Merge pull request #1258 from cmgustavo/feature/01-remove-peerjs

Feature: remove peerjs

Gruntfile.js

@@ -83,7 +83,6 @@ module.exports = function(grunt) {
           'js/shell.js', // shell must be loaded before moment due to the way moment loads in a commonjs env
           'lib/moment/min/moment.min.js',
           'lib/qrcode-generator/js/qrcode.js',
-          'lib/peer.js',
           'lib/bitcore.js',
           'lib/crypto-js/rollups/sha256.js',
           'lib/crypto-js/rollups/pbkdf2.js',

bower.json

@@ -10,7 +10,6 @@
     "angular-foundation": "*",
     "angular-route": "~1.2.14",
     "angular-qrcode": "~3.1.0",
-    "peerjs": "=0.3.8",
     "angular-mocks": "~1.2.14",
     "mocha": "~1.18.2",
     "chai": "~1.9.1",

config.js

@@ -62,7 +62,6 @@ var defaultConfig = {
     updateFrequencySeconds: 60 * 60
   },
 
-  disableVideo: true,
   verbose: 1,
 };
 if (typeof module !== 'undefined')

css/src/main.css

@@ -205,23 +205,6 @@ a:hover {
   color: #fff;
 }
 
-.sidebar ul.copayer-list {
-  list-style-type: none;
-  padding:0; margin:0;
-}
-
-.sidebar ul.copayer-list li {
-  margin-top: 15px;
-  font-weight: 100;
-  font-size: 12px;
-  color: #C9C9C9;
-}
-
-.sidebar ul.copayer-list img {
-  width: 30px;
-  height: 30px;
-}
-
 .button.small.side-bar {
   padding: 0rem 0.4rem;
 }
@@ -954,7 +937,15 @@ button, .button, p {
   cursor: pointer;
 }
 
-.video-box {
+.copay-box-small {
+  width: 40px;
+  text-align: center;
+  margin-right: 10px;
+  padding-bottom: 5px;
+  float: left;
+}
+
+.copay-box {
   width: 70px;
   text-align: center;
   margin-right: 20px;
@@ -962,11 +953,6 @@ button, .button, p {
   float: left;
 }
 
-.video-small {
-  width: 50px;
-  height: 50px;
-}
-
 .icon-input {
   position: absolute;
   top: 11px;

js/controllers/copayers.js

@@ -26,4 +26,15 @@ angular.module('copayApp.controllers').controller('CopayersController',
       });
     };
 
+    // Cached list of copayers
+    $scope.copayers = $rootScope.wallet.getRegisteredPeerIds();
+
+    $scope.copayersList = function() {
+      return $rootScope.wallet.getRegisteredPeerIds();
+    }
+
+    $scope.isBackupReady = function(copayer) {
+      return $rootScope.wallet.publicKeyRing.isBackupReady(copayer.copayerId);
+    }
+
   });

js/controllers/create.js

@@ -37,7 +37,6 @@ angular.module('copayApp.controllers').controller('CreateController',
     controllerUtils.redirIfLogged();
 
     $rootScope.fromSetup = true;
-    $rootScope.videoInfo = {};
     $scope.loading = false;
     $scope.walletPassword = $rootScope.walletPassword;
     $scope.isMobile = !!window.cordova;

js/controllers/settings.js

@@ -8,7 +8,6 @@ angular.module('copayApp.controllers').controller('SettingsController', function
   $scope.insightHost = config.blockchain.host;
   $scope.insightPort = config.blockchain.port;
   $scope.insightSecure = config.blockchain.schema === 'https';
-  $scope.disableVideo = typeof config.disableVideo === undefined ? true : config.disableVideo;
   $scope.forceNetwork = config.forceNetwork;
 
   $scope.unitOpts = [{
@@ -85,7 +84,6 @@ angular.module('copayApp.controllers').controller('SettingsController', function
         schema: $scope.insightSecure ? 'https' : 'http',
       },
       network: network,
-      disableVideo: $scope.disableVideo,
       unitName: $scope.selectedUnit.shortName,
       unitToSatoshi: $scope.selectedUnit.value,
       unitDecimals: $scope.selectedUnit.decimals,

js/controllers/video.js

@@ -1,46 +0,0 @@
-'use strict';
-
-angular.module('copayApp.controllers').controller('VideoController', 
-  function($scope, $rootScope, $sce) {
-
-  $rootScope.videoInfo = {};
-  
-  // Cached list of copayers
-  $scope.copayers = $rootScope.wallet.getRegisteredPeerIds();
-
-  $scope.copayersList = function() {
-    return $rootScope.wallet.getRegisteredPeerIds();
-  }
-
-  $scope.hasVideo = function(copayer) {
-    return $rootScope.videoInfo[copayer.peerId];
-  }
-
-  $scope.isConnected = function(copayer) {
-    return $rootScope.wallet.getOnlinePeerIDs().indexOf(copayer.peerId) != -1;
-  }
-
-  $scope.isBackupReady = function(copayer) {
-    return $rootScope.wallet.publicKeyRing.isBackupReady(copayer.copayerId);
-  }
-
-  $scope.getVideoURL = function(copayer) {
-    if (config.disableVideo) return;
-
-    var vi = $scope.videoInfo[copayer.peerId];
-    if (!vi) return;
-
-    if ($scope.isConnected(copayer)) {
-      // peer disconnected, remove his video
-      delete $rootScope.videoInfo[copayer.peerId];
-      return;
-    }
-
-    var encoded = vi.url;
-    var url = decodeURI(encoded);
-    var trusted = $sce.trustAsResourceUrl(url);
-    return trusted;
-  };
-
-});
-

js/directives.js

@@ -109,20 +109,6 @@ angular.module('copayApp.directives')
       }
     }
   })
-  .directive('avatar', function($rootScope, controllerUtils) {
-    return {
-      link: function(scope, element, attrs) {
-        var peer = JSON.parse(attrs.peer)
-        var peerId = peer.peerId;
-        var nick = peer.nick;
-        element.addClass('video-small');
-        var muted = controllerUtils.getVideoMutedStatus(peerId);
-        if (true || muted) { // mute everyone for now
-          element.attr("muted", true);
-        }
-      }
-    }
-  })
   .directive('contact', function() {
     return {
       restrict: 'E',

js/models/core/Wallet.js

@@ -455,28 +455,12 @@ Wallet.prototype.netStart = function(callback) {
     self.emit('ready', net.getPeer());
     setTimeout(function() {
       self.emit('publicKeyRingUpdated', true);
-      //self.scheduleConnect(); 
       // no connection logic for now
       self.emit('txProposalsUpdated');
     }, 10);
   });
 };
 
-
-// not being used now
-Wallet.prototype.scheduleConnect = function() {
-  var self = this;
-  if (self.network.isOnline()) {
-    self.connectToAll();
-    self.currentDelay = self.currentDelay * 2 || self.reconnectDelay;
-    setTimeout(self.scheduleConnect.bind(self), self.currentDelay);
-  }
-}
-
-Wallet.prototype.getOnlinePeerIDs = function() {
-  return this.network.getOnlinePeerIDs();
-};
-
 Wallet.prototype.getRegisteredCopayerIds = function() {
   var l = this.publicKeyRing.registeredCopayers();
   var copayers = [];

js/services/controllerUtils.js

@@ -2,17 +2,8 @@
 var bitcore = require('bitcore');
 
 angular.module('copayApp.services')
-  .factory('controllerUtils', function($rootScope, $sce, $location, notification, $timeout, video, uriHandler, rateService) {
+  .factory('controllerUtils', function($rootScope, $sce, $location, notification, $timeout, uriHandler, rateService) {
     var root = {};
-    root.getVideoMutedStatus = function(copayer) {
-      if (!$rootScope.videoInfo) return;
-
-      var vi = $rootScope.videoInfo[copayer]
-      if (!vi) {
-        return;
-      }
-      return vi.muted;
-    };
 
     root.redirIfLogged = function() {
       if ($rootScope.wallet) {
@@ -27,7 +18,6 @@ angular.module('copayApp.services')
       $rootScope.wallet = null;
       delete $rootScope['wallet'];
 
-      video.close();
       // Clear rootScope
       for (var i in $rootScope) {
         if (i.charAt(0) != '$') {
@@ -102,18 +92,6 @@ angular.module('copayApp.services')
       root.installStartupHandlers(w, $scope);
       root.updateGlobalAddresses();
 
-      var handlePeerVideo = function(err, peerID, url) {
-        if (err) {
-          delete $rootScope.videoInfo[peerID];
-          return;
-        }
-        $rootScope.videoInfo[peerID] = {
-          url: encodeURI(url),
-          muted: peerID === w.network.peerId
-        };
-        $rootScope.$digest();
-      };
-
       notification.enableHtml5Mode(); // for chrome: if support, enable it
 
       w.on('corrupt', function(peerId) {
@@ -128,8 +106,6 @@ angular.module('copayApp.services')
         } else {
           $location.path('receive');
         }
-        if (!config.disableVideo)
-          video.setOwnPeer(myPeerID, w, handlePeerVideo);
       });
 
       w.on('publicKeyRingUpdated', function(dontDigest) {
@@ -172,9 +148,6 @@ angular.module('copayApp.services')
         root.onErrorDigest(null, msg);
       });
       w.on('connect', function(peerID) {
-        if (peerID && !config.disableVideo) {
-          video.callPeer(peerID, handlePeerVideo);
-        }
         $rootScope.$digest();
       });
       w.on('close', root.onErrorDigest);

js/services/video.js

@@ -1,92 +0,0 @@
-'use strict';
-
-var Video = function() {
-  navigator.getUserMedia = navigator.getUserMedia ||
-    navigator.webkitGetUserMedia ||
-    navigator.mozGetUserMedia;
-
-  this.mediaConnections = {};
-  this.localStream = null;
-};
-
-Video.prototype.setOwnPeer = function(peer, wallet, cb) {
-  var self = this;
-
-  var VWIDTH = 320;
-  var VHEIGHT = 320;
-  var constraints = {
-    audio: true,
-    video: {
-      mandatory: {
-        maxWidth: VWIDTH,
-        maxHeight: VHEIGHT,
-      }
-    }
-  };
-  navigator.getUserMedia(constraints, function(stream) {
-    // This is called when user accepts using webcam
-    self.localStream = stream;
-    var online = wallet.getOnlinePeerIDs();
-    for (var i = 0; i < online.length; i++) {
-      var o = online[i];
-      if (o !== peer.id) {
-        self.callPeer(o, cb);
-      }
-    }
-    cb(null, peer.id, URL.createObjectURL(stream));
-  }, function() {
-    cb(new Error('Failed to access the webcam and microphone.'));
-  });
-
-  // Receiving a call
-  peer.on('call', function(mediaConnection) {
-    if (self.localStream) {
-      mediaConnection.answer(self.localStream);
-    } else {
-      mediaConnection.answer();
-    }
-    self._addCall(mediaConnection, cb);
-  });
-  this.peer = peer;
-};
-
-Video.prototype.callPeer = function(peerID, cb) {
-  if (this.localStream) {
-    var mediaConnection = this.peer.call(peerID, this.localStream);
-    this._addCall(mediaConnection, cb);
-  }
-};
-
-Video.prototype._addCall = function(mediaConnection, cb) {
-  var self = this;
-  var peerID = mediaConnection.peer;
-
-  // Wait for stream on the call, then set peer video display
-  mediaConnection.on('stream', function(stream) {
-    cb(null, peerID, URL.createObjectURL(stream));
-  });
-
-  mediaConnection.on('close', function() {
-    cb(true, peerID, null); // ask to stop video streaming in UI
-  });
-  mediaConnection.on('error', function(e) {
-    cb(e, peerID, null);
-  });
-  this.mediaConnections[peerID] = mediaConnection;
-}
-
-Video.prototype.close = function() {
-  if (this.localStream) {
-    this.localStream.stop();
-    this.localStream.mozSrcObject = null;
-    this.localStream.src = "";
-    this.localStream.src = null;
-    this.localStream = null;
-  }
-  for (var i = 0; this.mediaConnections.length; i++) {
-    this.mediaConnections[i].close();
-  }
-  this.mediaConnections = {};
-};
-
-angular.module('copayApp.services').value('video', new Video());

karma.conf.js

@@ -28,7 +28,6 @@ module.exports = function(config) {
       'lib/angular-route/angular-route.min.js',
       'lib/angular-foundation/mm-foundation.min.js',
       'lib/angular-foundation/mm-foundation-tpls.min.js',
-      'lib/peerjs/peer.js',
       'lib/bitcore.js',
       'lib/crypto-js/rollups/sha256.js',
       'lib/crypto-js/rollups/pbkdf2.js',

test/unit/services/servicesSpec.js

@@ -116,12 +116,7 @@ describe("Unit: isMobile Service", function() {
     isMobile.any().should.equal(true);
   }));
 });
-describe("Unit: video service", function() {
-  beforeEach(angular.mock.module('copayApp.services'));
-  it('should contain a video service', inject(function(video) {
-    should.exist(video);
-  }));
-});
+
 describe("Unit: uriHandler service", function() {
   beforeEach(angular.mock.module('copayApp.services'));
   it('should contain a uriHandler service', inject(function(uriHandler) {

views/copayers.html

@@ -51,10 +51,10 @@
 
         <div class="box-setup-copayers p20">
           <div class="oh">
-            <div ng-include="'views/includes/video.html'"></div> 
+            <div ng-include="'views/includes/copayer.html'"></div> 
             <div ng-if="!$root.wallet.publicKeyRing.isComplete()">
               <img
-              class="waiting br100 no-video"
+              class="waiting br100"
               ng-if="!hasVideo(copayer)"
               src="./img/satoshi.gif"
               alt="Waiting Copayer"

views/includes/copayer.html

@@ -1,17 +1,9 @@
-<div ng-controller="VideoController">
-  <div class="video-box" ng-repeat="copayer in copayersList()">
-    <video
-      ng-if="hasVideo(copayer)"
-      peer="{{copayer}}" avatar autoplay
-      ng-class="true || isConnected(copayer) ? 'online' : 'offline'"
-      ng-src="{{getVideoURL(copayer)}}"></video>
-
+<div ng-controller="CopayersController">
+  <div class="copay-box" ng-repeat="copayer in copayersList()">
     <img
-      class="br100 no-video"
-      ng-if="!hasVideo(copayer)"
-      ng-class="true || isConnected(copayer) ? 'online' : 'offline'"
+      class="br100 online"
       src="./img/satoshi.gif"
-      alt="{{copayer}}"
+      alt="{{copayer.peerId}}"
       width="70">
 
     <div

views/includes/peer-list.html

@@ -1,55 +1,22 @@
-<div ng-controller="VideoController" class="copayers">
-  <div>
-    <h3>
-      <i class="fi-torsos-all size-21 m20r"></i>
-      Copayers
-      <small class="m15l">
-        {{$root.wallet.requiredCopayers}} of {{$root.wallet.totalCopayers}}
-      </small>
-    </h3>
-  </div>
+<div ng-controller="CopayersController" class="copayers">
+  <h3>
+    <i class="fi-torsos-all size-21 m20r"></i>
+    Copayers
+    <small class="m15l">
+      {{$root.wallet.requiredCopayers}} of {{$root.wallet.totalCopayers}}
+    </small>
+  </h3>
 
+  <div class="copay-box-small" ng-repeat="copayer in copayers">
+    <img
+      class="br100 online"
+      src="./img/satoshi.gif"
+      alt="{{copayer.peerId}}"
+      width="30">
 
-  <ul class="copayer-list" ng-repeat="copayer in copayers">
-    <li class="ellipsis">
-      <video
-        ng-if="hasVideo(copayer)"
-        peer="{{copayer}}" avatar autoplay
-        ng-class="isConnected(copayer) ? 'online' : 'offline'"
-        ng-src="{{getVideoURL(copayer)}}"></video>
-
-      <img 
-        class="br100 oh no-video m20r"
-        ng-if="!hasVideo(copayer)"
-        ng-class="isConnected(copayer) ? 'online' : 'offline'"
-        src="./img/satoshi.gif"
-        alt="{{copayer}}"
-        width="70">
-
-      <span ng-show="copayer.index == 0">Me</span>
-      <span ng-show="copayer.index > 0">{{copayer.nick}}</span>
-      <span class="btn-copy" clip-copy="copayer.peerId"></span>
-    </li>
-  </ul>
-  <div class="copayer-list-small-height" ng-repeat="copayer in copayers">
-    <span class="left" class="has-tip" tooltip-placement="top" tooltip="{{copayer.nick}}">
-      <video
-        ng-if="hasVideo(copayer)"
-        peer="{{copayer}}" avatar autoplay
-        ng-class="isConnected(copayer) ? 'online' : 'offline'"
-        ng-src="{{getVideoURL(copayer)}}"></video>
-
-      <img 
-        class="br100 oh no-video m20r"
-        ng-if="!hasVideo(copayer)"
-        ng-class="isConnected(copayer) ? 'online' : 'offline'"
-        src="./img/satoshi.gif"
-        alt="{{copayer}}"
-        width="70">
-
-      <!-- <span ng-show="copayer.index == 0">Me</span>
-      <span ng-show="copayer.index > 0">{{copayer.nick}}</span>
-      <span class="btn-copy" clip-copy="copayer.peerId"></span> -->
-    </span>
+    <div class="ellipsis" tooltip-placement="top" tooltip="{{copayer.nick}}">
+      <small class="text-gray" ng-show="copayer.index == 0">Me</small>
+      <small class="text-gray" ng-show="copayer.index > 0">{{copayer.nick}}</small>
+    </div>
   </div> 
 </div>

views/settings.html

@@ -31,11 +31,6 @@
             <select class="form-control" ng-model="selectedAlternative" ng-options="alternative.name for alternative in alternativeOpts" required>
             </select>
           </fieldset>
-          <fieldset>
-            <legend>Videoconferencing</legend>
-            <input id="disableVideo-opt" type="checkbox" ng-model="disableVideo" class="form-control">
-            <label for="disableVideo-opt">Disable videoconferencing (for slow networks)</label>
-          </fieldset>
           <fieldset>
             <legend>Insight API server</legend>
             <label for="insight-host">Host</label>