From 82a07d2c1063116116eadb5bc91041f18e68e989 Mon Sep 17 00:00:00 2001
From: Manuel Araoz <manuelaraoz@gmail.com>
Date: Wed, 7 May 2014 19:04:36 -0300
Subject: [PATCH] add confvideo directive

---
 css/main.css                   |   1 +
 index.html                     |   9 ++-
 js/directives.js               | 131 ++++++++++++++++++---------------
 js/services/controllerUtils.js |  24 ++++--
 4 files changed, 97 insertions(+), 68 deletions(-)

diff --git a/css/main.css b/css/main.css
index fefd14439..9675e67e7 100644
--- a/css/main.css
+++ b/css/main.css
@@ -287,6 +287,7 @@ hr { margin: 2.25rem 0;}
   float: right;
 }
 .online {
+  background-color: black;
   border: 3px solid green;
 }
 .offline {
diff --git a/index.html b/index.html
index 006d40874..ff4392386 100644
--- a/index.html
+++ b/index.html
@@ -124,13 +124,14 @@
         <div class="bottom-copay"
             ng-repeat="c in $root.wallet.getRegisteredPeerIds()">
           <video 
-            ng-class="($root.wallet.getOnlinePeerIDs().indexOf(c.peerId) != -1) ? 'online' : 'offline'"
+            ng-if="$root.videoInfo[c.peerId]" 
             class="video-small"
-            autoplay ng-show="$root.videoSrc[c.peerId]" 
+            autoplay
+            confvideo
+            peer="{{c.peerId}}"
             ng-src="{{$root.getVideoURL(c.peerId)}}"
-            id="{{c.peerId + '-video'}}" muted="true"
             title="{{c.peerId + (c.peerId == $root.wallet.network.peerId?' (You)':'')}}" ></video>
-          <img ng-show="!$root.videoSrc[c.peerId]" 
+          <img ng-if="!$root.videoInfo[c.peerId]" 
             ng-class="($root.wallet.getOnlinePeerIDs().indexOf(c.peerId) != -1) ? 'online' : 'offline'"
             class="video-small"
             src="./img/satoshi.gif" 
diff --git a/js/directives.js b/js/directives.js
index fa9d2006b..4bcef07e5 100644
--- a/js/directives.js
+++ b/js/directives.js
@@ -1,81 +1,86 @@
 'use strict';
 
 angular.module('copay.directives')
-  .directive('validAddress', [function() {
+  .directive('validAddress', [
 
-    var bitcore = require('bitcore');
-    var Address = bitcore.Address;
+    function() {
 
-    return {
-      require: 'ngModel',
-      link: function (scope, elem, attrs, ctrl) {
-        var validator = function(value){
-          var a = new Address(value);
-          ctrl.$setValidity('validAddress', a.isValid());
-          return value;
-        };
+      var bitcore = require('bitcore');
+      var Address = bitcore.Address;
 
-        ctrl.$parsers.unshift(validator);
-        ctrl.$formatters.unshift(validator);
-      }
-    };
-  }])
-  .directive('notification', ['$rootScope', function($rootScope){
-    return {
-      restrict: 'A',
-      link: function(scope, element, attrs, ctrl) {
-        setTimeout(function(){
-          scope.$apply(function() {
-            $rootScope.flashMessage = {};
-          });
-        }, 5000);
-      }
-    };
-  }])
-  .directive('enoughAmount', ['$rootScope', function($rootScope){
-    return {
-      require: 'ngModel',
-      link: function(scope, element, attrs, ctrl) {
-        var val = function(value) {
-          var vStr = new String(value);
-          var vNum = Number(vStr);
-          if (typeof vNum == "number" && vNum > 0) {
-            if ($rootScope.availableBalance <= vNum) {
-              ctrl.$setValidity('enoughAmount', false);
-              scope.notEnoughAmount = 'Insufficient funds!';
-            }
-            else {
-              ctrl.$setValidity('enoughAmount', true);
+      return {
+        require: 'ngModel',
+        link: function(scope, elem, attrs, ctrl) {
+          var validator = function(value) {
+            var a = new Address(value);
+            ctrl.$setValidity('validAddress', a.isValid());
+            return value;
+          };
+
+          ctrl.$parsers.unshift(validator);
+          ctrl.$formatters.unshift(validator);
+        }
+      };
+    }
+  ])
+  .directive('notification', ['$rootScope',
+    function($rootScope) {
+      return {
+        restrict: 'A',
+        link: function(scope, element, attrs, ctrl) {
+          setTimeout(function() {
+            scope.$apply(function() {
+              $rootScope.flashMessage = {};
+            });
+          }, 5000);
+        }
+      };
+    }
+  ])
+  .directive('enoughAmount', ['$rootScope',
+    function($rootScope) {
+      return {
+        require: 'ngModel',
+        link: function(scope, element, attrs, ctrl) {
+          var val = function(value) {
+            var vStr = new String(value);
+            var vNum = Number(vStr);
+            if (typeof vNum == "number" && vNum > 0) {
+              if ($rootScope.availableBalance <= vNum) {
+                ctrl.$setValidity('enoughAmount', false);
+                scope.notEnoughAmount = 'Insufficient funds!';
+              } else {
+                ctrl.$setValidity('enoughAmount', true);
+                scope.notEnoughAmount = null;
+              }
+            } else {
               scope.notEnoughAmount = null;
             }
-          } else {
-            scope.notEnoughAmount = null;
+            return value;
           }
-          return value;
+          ctrl.$parsers.unshift(val);
+          ctrl.$formatters.unshift(val);
         }
-        ctrl.$parsers.unshift(val);
-        ctrl.$formatters.unshift(val);
-      }
-    };
-  }])
-  .directive('loading', function () {
+      };
+    }
+  ])
+  .directive('loading', function() {
     return {
       restrict: 'A',
-      link: function (scope, element, attr) {
+      link: function(scope, element, attr) {
         var a = element.html();
         var text = attr.loading;
-        scope.$watch('loading', function (val) {
+        scope.$watch('loading', function(val) {
           if (val) {
-            element.html('<img src="img/loading.gif"> ' + text + '...' );
-          }
-          else {
+            element.html('<img src="img/loading.gif"> ' + text + '...');
+          } else {
             element.html(a);
           }
         });
       }
     }
   })
-  .directive('ngFileSelect',function() {
+  .directive('ngFileSelect', function() {
     return {
       link: function($scope, el) {
         el.bind('change', function(e) {
@@ -84,5 +89,15 @@ angular.module('copay.directives')
         });
       }
     }
+  }).directive('confvideo', function($rootScope) {
+    return {
+      link: function(scope, element, attrs) {
+        var peer = attrs.peer;
+        element.addClass(($rootScope.wallet.getOnlinePeerIDs().indexOf(peer) != -1) ? 'online' : 'offline');
+        var muted = $rootScope.getVideoMutedStatus(peer);
+        if (muted) {
+          element.attr("muted", true);
+        }
+      }
+    }
   });
-
diff --git a/js/services/controllerUtils.js b/js/services/controllerUtils.js
index a3fbcc757..3638bdbf8 100644
--- a/js/services/controllerUtils.js
+++ b/js/services/controllerUtils.js
@@ -3,17 +3,26 @@
 angular.module('copay.controllerUtils')
   .factory('controllerUtils', function($rootScope, $sce, $location, Socket, video) {
     var root = {};
-    $rootScope.videoSrc = {};
+    $rootScope.videoInfo = {};
     $rootScope.loading = false;
 
     $rootScope.getVideoURL = function(copayer) {
-      var encoded = $rootScope.videoSrc[copayer];
-      if (!encoded) return;
+      var vi = $rootScope.videoInfo[copayer]
+      if (!vi) return;
+      var encoded = vi.url;
       var url = decodeURI(encoded);
       var trusted = $sce.trustAsResourceUrl(url);
       return trusted;
     };
 
+    $rootScope.getVideoMutedStatus = function(copayer) {
+      var vi = $rootScope.videoInfo[copayer]
+      if (!vi) {
+        return;
+      }
+      return vi.muted;
+    };
+
     $rootScope.getWalletDisplay = function() {
       var w = $rootScope.wallet;
       return w && (w.name || w.id);
@@ -24,7 +33,7 @@ angular.module('copay.controllerUtils')
       delete $rootScope['wallet'];
       $rootScope.totalBalance = 0;
       video.close();
-      $rootScope.videoSrc = {};
+      $rootScope.videoInfo = {};
       $location.path('signin');
     };
 
@@ -41,10 +50,13 @@ angular.module('copay.controllerUtils')
     root.startNetwork = function(w) {
       var handlePeerVideo = function(err, peerID, url) {
         if (err) {
-          delete $rootScope.videoSrc[peerID];
+          delete $rootScope.videoInfo[peerID];
           return;
         }
-        $rootScope.videoSrc[peerID] = encodeURI(url);
+        $rootScope.videoInfo[peerID] = {
+          url: encodeURI(url),
+          muted: peerID === w.network.peerId
+        };
         $rootScope.$digest();
       };
       w.on('badMessage', function(peerId) {