Merge pull request #221 from maraoz/UI/footer-video

Video is now in footer, peers tab removed

css/main.css

@@ -14,11 +14,11 @@ html, body {height: 100%;}
 #wrap {min-height: 100%;}
 
 #main {overflow:auto;
-	padding-bottom: 30px;}  /* must be same height as the footer */
+	padding-bottom: 91px;}  /* must be same height as the footer */
 
 #footer {position: relative;
-	margin-top: -30px; /* negative value of footer height */
-	height: 30px;
+	margin-top: -91px; /* negative value of footer height */
+	height: 91px;
 	clear:both;
   padding: 5px 2rem;
 }
@@ -52,7 +52,7 @@ html, body {height: 100%;}
 }
 
 .top-bar-section ul li {
-  width: 20%;
+  width: 25%;
 }
 
 .header {
@@ -257,17 +257,17 @@ hr { margin: 2.25rem 0;}
 }
 
 .video-small {
-  width: 120px;
-  height: 120px;
-  margin: 20px;
+  width: 80px;
+  height: 80px;
+  border-radius: 1rem;
   display: inline;
-  float:left;
+  float: right;
 }
 .online {
-  border: 10px solid green;
+  border: 3px solid green;
 }
 .offline {
-  border: 10px solid gray;
+  border: 3px solid gray;
 }
 
 .tx-copayers {

index.html

@@ -19,9 +19,8 @@
             </div>
             <div class="large-9 medium-9 columns text-center p10t" ng-show="$root.wallet">
               <div class="large-4 medium-4 columns line-dashed-v">
-                <a href="#/peer" class="has-tip" tooltip-placement="bottom" tooltip="{{$root.wallet.id}}">
-                  <span ng-if="!$root.wallet.name && $root.wallet.id">{{$root.wallet.id}}</span>
-                  <span ng-if="$root.wallet.name">{{$root.wallet.name}}</span>
+                <a href="#/addresses" class="has-tip" tooltip-placement="bottom" tooltip="{{$root.wallet.id}}">
+                  <strong><span>{{$root.getWalletDisplay()}}</span></strong>
                 </a> 
                 <a class="button radius small-icon" href="#" title="Signout" ng-click="signout()"><i class="fi-power"></i></a>
               </div>
@@ -44,7 +43,7 @@
 
           <section class="top-bar-section {{isCollapsed && 'hide_menu' || 'show_menu'}}">
             <ul>
-              <li data-ng-repeat="item in menu" ui-route="/{{item.link}}" class="large-2 text-center" data-ng-class="{active: isActive(item)}">
+              <li data-ng-repeat="item in menu" ui-route="/{{item.link}}" class="text-center" data-ng-class="{active: isActive(item)}">
                 <a href="{{item.link}}"> <i class="{{item.icon}}"></i> {{item.title}}</a>
               </li>
             </ul>
@@ -99,13 +98,34 @@
 
   <div id="footer" data-ng-controller="FooterController" ng-show="$root.wallet">
     <link rel="stylesheet" ng-href="{{theme}}">
-    <div class="large-4 columns">
-      <span class="size-12">Copayers 
-        {{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}}</span> 
+    <div class="row">
+      <div class="large-2 columns">
+        <strong><div>{{$root.getWalletDisplay()}}</div></strong>
+        <span class="size-12">
+          {{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}} wallet
+        </span> 
+      </div>
+      <div class="large-2 columns" style="float:right;"
+          ng-repeat="copayer in $root.wallet.getRegisteredPeerIds()">
+        <video 
+          ng-class="($root.wallet.getOnlinePeerIDs().indexOf(copayer) != -1) ? 'online' : 'offline'"
+          class="video-small"
+          autoplay ng-show="$root.videoSrc[copayer]" 
+          ng-src="{{$root.getVideoURL(copayer)}}"
+          id="{{copayer + '-video'}}" muted="true"
+          title="{{copayer + (copayer == $root.wallet.network.peerId?' (You)':'')}}" ></video>
+        <img ng-show="!$root.videoSrc[copayer]" 
+          ng-class="($root.wallet.getOnlinePeerIDs().indexOf(copayer) != -1) ? 'online' : 'offline'"
+          class="video-small"
+          src="./img/satoshi.gif" 
+          title="{{copayer + (copayer == $root.wallet.network.peerId?' (You)':'')}}" />
+      </div>
     </div>
-    <div class="large-8 columns text-right">
+    <!--
+    <div class="large-2 columns text-right">
       <a class="size-12" ng-if="themes.length > 1" ng-click="change_theme(th)" ng-repeat="th in themes">{{th}} {{$last ? '' : '&middot; '}}</a>
     </div>
+    -->
   </div>
 
     <!-- Templates -->
@@ -223,34 +243,6 @@
       </div>
     </script>
 
-    <script type="text/ng-template" id="peer.html">
-      <div class="row"  ng-if="$root.wallet.requiredCopayers > $root.wallet.network.connectedCopayers().length">
-        <div class="large-12 columns p70l">
-          <p class="text-info"> <i class="fi-alert size-28"></i> 
-          {{$root.wallet.requiredCopayers}} copayers needed for signing transactions
-        </div>
-      </div>
-      <div class="row">
-        <div class="large-4 columns"
-          ng-repeat="copayer in $root.wallet.getRegisteredPeerIds()">
-          <video 
-            ng-class="($root.wallet.getOnlinePeerIDs().indexOf(copayer) != -1) ? 'online' : 'offline'"
-            class="video-small"
-            autoplay ng-show="$root.videoSrc[copayer]" 
-            ng-src="{{$root.getVideoURL(copayer)}}"
-            id="{{copayer + '-video'}}" muted="true"
-            title="{{copayer + (copayer == $root.wallet.network.peerId?' (You)':'')}}" ></video>
-          <img ng-show="!$root.videoSrc[copayer]" 
-            ng-class="($root.wallet.getOnlinePeerIDs().indexOf(copayer) != -1) ? 'online' : 'offline'"
-            class="video-small"
-            src="./img/satoshi.gif" 
-            title="{{copayer + (copayer == $root.wallet.network.peerId?' (You)':'')}}" />
-        </div>
-      </div>
-    </script>
-    
-    
-
     <!-- ADDRESS -->
     <script type="text/ng-template" id="addresses.html">
       <div class="addresses" data-ng-controller="AddressesController">

js/controllers/header.js

@@ -2,11 +2,8 @@
 
 angular.module('copay.header').controller('HeaderController',
   function($scope, $rootScope, $location, walletFactory, controllerUtils) {
-    $scope.menu = [{
-      'title': 'Copayers',
-      'icon': 'fi-torsos-all',
-      'link': '#/peer'
-    }, {
+    $scope.menu = [
+    {
       'title': 'Addresses',
       'icon': 'fi-address-book',
       'link': '#/addresses'

js/services/controllerUtils.js

@@ -12,6 +12,11 @@ angular.module('copay.controllerUtils')
       return trusted;
     };
 
+    $rootScope.getWalletDisplay = function() {
+      var w = $rootScope.wallet;
+      return w && (w.name || w.id);
+    };
+
     root.logout = function() {
       console.log('### DELETING WALLET'); //TODO
       $rootScope.wallet = null;
@@ -54,7 +59,7 @@ angular.module('copay.controllerUtils')
       });
       w.on('created', function(myPeerID) {
         video.setOwnPeer(myPeerID, w, handlePeerVideo);
-        $location.path('peer');
+        $location.path('addresses');
         $rootScope.wallet = w;
         root.updateBalance();
       });

js/services/video.js

@@ -7,6 +7,7 @@ var Video = function() {
 
   this.mediaConnections = {};
   this.localStream = null;
+  this.onlineSound = new Audio('../../sound/online.wav');
 };
 
 Video.prototype.setOwnPeer = function(peer, wallet, cb) {
@@ -50,10 +51,12 @@ Video.prototype.callPeer = function(peerID, 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) {
+    self.onlineSound.play();
     cb(null, peerID, URL.createObjectURL(stream));
   });