mirror of https://github.com/BTCPrivate/copay.git
Merge pull request #221 from maraoz/UI/footer-video
Video is now in footer, peers tab removed
This commit is contained in:
commit
ba6f15b432
20
css/main.css
20
css/main.css
|
@ -14,11 +14,11 @@ html, body {height: 100%;}
|
||||||
#wrap {min-height: 100%;}
|
#wrap {min-height: 100%;}
|
||||||
|
|
||||||
#main {overflow:auto;
|
#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;
|
#footer {position: relative;
|
||||||
margin-top: -30px; /* negative value of footer height */
|
margin-top: -91px; /* negative value of footer height */
|
||||||
height: 30px;
|
height: 91px;
|
||||||
clear:both;
|
clear:both;
|
||||||
padding: 5px 2rem;
|
padding: 5px 2rem;
|
||||||
}
|
}
|
||||||
|
@ -52,7 +52,7 @@ html, body {height: 100%;}
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-bar-section ul li {
|
.top-bar-section ul li {
|
||||||
width: 20%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
|
@ -257,17 +257,17 @@ hr { margin: 2.25rem 0;}
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-small {
|
.video-small {
|
||||||
width: 120px;
|
width: 80px;
|
||||||
height: 120px;
|
height: 80px;
|
||||||
margin: 20px;
|
border-radius: 1rem;
|
||||||
display: inline;
|
display: inline;
|
||||||
float:left;
|
float: right;
|
||||||
}
|
}
|
||||||
.online {
|
.online {
|
||||||
border: 10px solid green;
|
border: 3px solid green;
|
||||||
}
|
}
|
||||||
.offline {
|
.offline {
|
||||||
border: 10px solid gray;
|
border: 3px solid gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tx-copayers {
|
.tx-copayers {
|
||||||
|
|
64
index.html
64
index.html
|
@ -19,9 +19,8 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="large-9 medium-9 columns text-center p10t" ng-show="$root.wallet">
|
<div class="large-9 medium-9 columns text-center p10t" ng-show="$root.wallet">
|
||||||
<div class="large-4 medium-4 columns line-dashed-v">
|
<div class="large-4 medium-4 columns line-dashed-v">
|
||||||
<a href="#/peer" class="has-tip" tooltip-placement="bottom" tooltip="{{$root.wallet.id}}">
|
<a href="#/addresses" class="has-tip" tooltip-placement="bottom" tooltip="{{$root.wallet.id}}">
|
||||||
<span ng-if="!$root.wallet.name && $root.wallet.id">{{$root.wallet.id}}</span>
|
<strong><span>{{$root.getWalletDisplay()}}</span></strong>
|
||||||
<span ng-if="$root.wallet.name">{{$root.wallet.name}}</span>
|
|
||||||
</a>
|
</a>
|
||||||
<a class="button radius small-icon" href="#" title="Signout" ng-click="signout()"><i class="fi-power"></i></a>
|
<a class="button radius small-icon" href="#" title="Signout" ng-click="signout()"><i class="fi-power"></i></a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -44,7 +43,7 @@
|
||||||
|
|
||||||
<section class="top-bar-section {{isCollapsed && 'hide_menu' || 'show_menu'}}">
|
<section class="top-bar-section {{isCollapsed && 'hide_menu' || 'show_menu'}}">
|
||||||
<ul>
|
<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>
|
<a href="{{item.link}}"> <i class="{{item.icon}}"></i> {{item.title}}</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -99,13 +98,34 @@
|
||||||
|
|
||||||
<div id="footer" data-ng-controller="FooterController" ng-show="$root.wallet">
|
<div id="footer" data-ng-controller="FooterController" ng-show="$root.wallet">
|
||||||
<link rel="stylesheet" ng-href="{{theme}}">
|
<link rel="stylesheet" ng-href="{{theme}}">
|
||||||
<div class="large-4 columns">
|
<div class="row">
|
||||||
<span class="size-12">Copayers
|
<div class="large-2 columns">
|
||||||
{{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}}</span>
|
<strong><div>{{$root.getWalletDisplay()}}</div></strong>
|
||||||
|
<span class="size-12">
|
||||||
|
{{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}} wallet
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="large-8 columns text-right">
|
<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-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 ? '' : '· '}}</a>
|
<a class="size-12" ng-if="themes.length > 1" ng-click="change_theme(th)" ng-repeat="th in themes">{{th}} {{$last ? '' : '· '}}</a>
|
||||||
</div>
|
</div>
|
||||||
|
-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Templates -->
|
<!-- Templates -->
|
||||||
|
@ -223,34 +243,6 @@
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</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 -->
|
<!-- ADDRESS -->
|
||||||
<script type="text/ng-template" id="addresses.html">
|
<script type="text/ng-template" id="addresses.html">
|
||||||
<div class="addresses" data-ng-controller="AddressesController">
|
<div class="addresses" data-ng-controller="AddressesController">
|
||||||
|
|
|
@ -2,11 +2,8 @@
|
||||||
|
|
||||||
angular.module('copay.header').controller('HeaderController',
|
angular.module('copay.header').controller('HeaderController',
|
||||||
function($scope, $rootScope, $location, walletFactory, controllerUtils) {
|
function($scope, $rootScope, $location, walletFactory, controllerUtils) {
|
||||||
$scope.menu = [{
|
$scope.menu = [
|
||||||
'title': 'Copayers',
|
{
|
||||||
'icon': 'fi-torsos-all',
|
|
||||||
'link': '#/peer'
|
|
||||||
}, {
|
|
||||||
'title': 'Addresses',
|
'title': 'Addresses',
|
||||||
'icon': 'fi-address-book',
|
'icon': 'fi-address-book',
|
||||||
'link': '#/addresses'
|
'link': '#/addresses'
|
||||||
|
|
|
@ -12,6 +12,11 @@ angular.module('copay.controllerUtils')
|
||||||
return trusted;
|
return trusted;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
$rootScope.getWalletDisplay = function() {
|
||||||
|
var w = $rootScope.wallet;
|
||||||
|
return w && (w.name || w.id);
|
||||||
|
};
|
||||||
|
|
||||||
root.logout = function() {
|
root.logout = function() {
|
||||||
console.log('### DELETING WALLET'); //TODO
|
console.log('### DELETING WALLET'); //TODO
|
||||||
$rootScope.wallet = null;
|
$rootScope.wallet = null;
|
||||||
|
@ -54,7 +59,7 @@ angular.module('copay.controllerUtils')
|
||||||
});
|
});
|
||||||
w.on('created', function(myPeerID) {
|
w.on('created', function(myPeerID) {
|
||||||
video.setOwnPeer(myPeerID, w, handlePeerVideo);
|
video.setOwnPeer(myPeerID, w, handlePeerVideo);
|
||||||
$location.path('peer');
|
$location.path('addresses');
|
||||||
$rootScope.wallet = w;
|
$rootScope.wallet = w;
|
||||||
root.updateBalance();
|
root.updateBalance();
|
||||||
});
|
});
|
||||||
|
|
|
@ -7,6 +7,7 @@ var Video = function() {
|
||||||
|
|
||||||
this.mediaConnections = {};
|
this.mediaConnections = {};
|
||||||
this.localStream = null;
|
this.localStream = null;
|
||||||
|
this.onlineSound = new Audio('../../sound/online.wav');
|
||||||
};
|
};
|
||||||
|
|
||||||
Video.prototype.setOwnPeer = function(peer, wallet, cb) {
|
Video.prototype.setOwnPeer = function(peer, wallet, cb) {
|
||||||
|
@ -50,10 +51,12 @@ Video.prototype.callPeer = function(peerID, cb) {
|
||||||
};
|
};
|
||||||
|
|
||||||
Video.prototype._addCall = function(mediaConnection, cb) {
|
Video.prototype._addCall = function(mediaConnection, cb) {
|
||||||
|
var self = this;
|
||||||
var peerID = mediaConnection.peer;
|
var peerID = mediaConnection.peer;
|
||||||
|
|
||||||
// Wait for stream on the call, then set peer video display
|
// Wait for stream on the call, then set peer video display
|
||||||
mediaConnection.on('stream', function(stream) {
|
mediaConnection.on('stream', function(stream) {
|
||||||
|
self.onlineSound.play();
|
||||||
cb(null, peerID, URL.createObjectURL(stream));
|
cb(null, peerID, URL.createObjectURL(stream));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Binary file not shown.
Loading…
Reference in New Issue