Add copayer list at sidebar, separate snippet and clean video controller code

css/main.css

@@ -75,7 +75,9 @@ body, html{
 }
 
 .page, .main, .sidebar {
-  height:100%;   
+  height:100%;
+  overflow-y: auto;
+  overflow-x: none;
 }
 
 .sidebar {
@@ -91,10 +93,33 @@ body, html{
   color: #fff;
 }
 
+.sidebar ul.copayer-list {
+  list-style-type: none;
+  padding:0; margin:0;
+}
+
+.sidebar ul.copayer-list li {
+  margin-top: 15px;
+}
+
+.sidebar ul.copayer-list img {
+  width: 30px;
+  height: 30px;
+}
+
 .button.small.side-bar {
   padding: 0.2rem 0.4rem;
 }
 
+.online {
+  border: 3px solid #1ABC9C;
+}
+
+.offline {
+  border: 3px solid gray;
+  opacity: 0.4;
+}
+
 .main {
   margin-left: 250px;
   padding: 1.5rem

js/controllers/video.js

@@ -3,16 +3,35 @@
 angular.module('copayApp.controllers').controller('VideoController', 
   function($scope, $rootScope, $sce) {
 
+  // 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 = $rootScope.videoInfo[copayer]
-      if (!vi) return;
+    var vi = $scope.videoInfo[copayer.peerId];
+    if (!vi) return;
 
-    if ($rootScope.wallet.getOnlinePeerIDs().indexOf(copayer) === -1) {
+    if ($scope.isConnected(copayer)) {
       // peer disconnected, remove his video
-      delete $rootScope.videoInfo[copayer]
-        return;
+      delete $rootScope.videoInfo[copayer.peerId];
+      return;
     }
 
     var encoded = vi.url;

views/includes/peer-list.html

@@ -0,0 +1,28 @@
+<div ng-controller="VideoController">
+  Icon Copayers
+  {{$root.wallet.requiredCopayers}} of {{$root.wallet.totalCopayers}}
+
+  <ul class="copayer-list" ng-repeat="copayer in copayers">
+    <li>
+      <video
+        ng-if="hasVideo(copayer)"
+        peer="{{copayer}}" avatar autoplay
+        ng-class="isConnected(copayer) ? 'online' : 'offline'"
+        ng-src="{{getVideoURL(copayer)}}"></video>
+
+      <img 
+        class="no-video"
+        ng-if="!hasVideo(copayer)"
+        ng-class="isConnected(copayer) ? 'online' : 'offline'"
+        src="./img/satoshi.gif"
+        alt="{{copayer}}">
+
+      <span
+        tooltip="ID: {{copayer.peerId}}" 
+        tooltip-placement="bottom">
+        <span ng-show="copayer.index == 0">you</span>
+        <span ng-show="copayer.index > 0">{{copayer.nick}}</span>
+      </span>
+    </li>
+  </ul>
+</div>

views/includes/sidebar.html

@@ -52,9 +52,8 @@
       </a>
     </li>
   </ul>
-  {{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}} wallet
 
-  <div ng-include="'views/includes/video.html'"></div>
+  <div ng-include="'views/includes/peer-list.html'"></div>
 
 </div>
 

views/includes/video.html

@@ -1,30 +1,27 @@
-<div 
-  class="video-box"
-  ng-controller="VideoController"
-  ng-repeat="c in $root.wallet.getRegisteredPeerIds()">
-  <video 
-    ng-if="$root.videoInfo[c.peerId]"
-    avatar 
-    peer="{{c}}"
-    autoplay
-    ng-class="($root.wallet.getOnlinePeerIDs().indexOf(c.peerId) != -1) ? 'online' : 'offline'"
-    ng-src="{{getVideoURL(c.peerId)}}"
-    ></video>
-  <img 
-    class="no-video"
-    ng-if="!$root.videoInfo[c.peerId]"
-    avatar 
-    peer="{{c}}"
-    ng-class="($root.wallet.getOnlinePeerIDs().indexOf(c.peerId) != -1) ? 'online' : 'offline'"
-    src="./img/satoshi.gif"
-    alt="{{c}}">
-  <div 
-    tooltip="ID: {{c.peerId}}" 
-    tooltip-placement="bottom">
-    <span ng-show="c.index==0">you</span>
-    <span ng-show="c.index>0">{{c.nick}}</span>
-  </div>
-  <div class="success label" ng-show="$root.wallet.publicKeyRing.isBackupReady(c.copayerId)">
-    Backup ready
+<div ng-controller="VideoController">
+  <div  class="video-box" ng-repeat="copayer in copayersList()">
+    <video
+      ng-if="hasVideo(copayer)"
+      peer="{{copayer}}" avatar autoplay
+      ng-class="isConnected(copayer) ? 'online' : 'offline'"
+      ng-src="{{getVideoURL(copayer)}}"></video>
+
+    <img
+      class="no-video"
+      ng-if="!hasVideo(copayer)"
+      ng-class="isConnected(copayer) ? 'online' : 'offline'"
+      src="./img/satoshi.gif"
+      alt="{{copayer}}">
+
+    <div
+      tooltip="ID: {{copayer.peerId}}"
+      tooltip-placement="bottom">
+      <span ng-show="copayer.index == 0">you</span>
+      <span ng-show="copayer.index > 0">{{copayer.nick}}</span>
+    </div>
+
+    <div class="success label" ng-show="isBackupReady(copayer)">
+      Backup ready
+    </div>
   </div>
 </div>