Simon Eisenmann
12 years ago
8 changed files with 242 additions and 258 deletions
@ -1,186 +0,0 @@ |
|||||||
/* |
|
||||||
* Spreed Speak Freely. |
|
||||||
* Copyright (C) 2013-2014 struktur AG |
|
||||||
* |
|
||||||
* This file is part of Spreed Speak Freely. |
|
||||||
* |
|
||||||
* This program is free software: you can redistribute it and/or modify |
|
||||||
* it under the terms of the GNU Affero General Public License as published by |
|
||||||
* the Free Software Foundation, either version 3 of the License, or |
|
||||||
* (at your option) any later version. |
|
||||||
* |
|
||||||
* This program is distributed in the hope that it will be useful, |
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
||||||
* GNU Affero General Public License for more details. |
|
||||||
* |
|
||||||
* You should have received a copy of the GNU Affero General Public License |
|
||||||
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
|
||||||
* |
|
||||||
*/ |
|
||||||
#container { |
|
||||||
position: absolute; |
|
||||||
top:0px; |
|
||||||
left:0px; |
|
||||||
bottom:0px; |
|
||||||
right:0px; |
|
||||||
} |
|
||||||
#container .visible { |
|
||||||
opacity:1 !important; |
|
||||||
} |
|
||||||
#card { |
|
||||||
position:relative; |
|
||||||
width:100%; |
|
||||||
height:100%; |
|
||||||
transition-property: transform; |
|
||||||
-webkit-transition-property: -webkit-transform; |
|
||||||
transition-duration: 2s; |
|
||||||
-webkit-transition-duration: 2s; |
|
||||||
transform: rotateY(0deg); |
|
||||||
-webkit-transform: rotateY(0deg); |
|
||||||
z-index:2; |
|
||||||
} |
|
||||||
.active #card { |
|
||||||
transform: rotateY(180deg); |
|
||||||
-webkit-transform: rotateY(180deg); |
|
||||||
} |
|
||||||
#local { |
|
||||||
position: absolute; |
|
||||||
left:0px; |
|
||||||
right:0px; |
|
||||||
top:0px; |
|
||||||
bottom:0px; |
|
||||||
transform: scale(-1, 1); |
|
||||||
-webkit-transform: scale(-1, 1); |
|
||||||
pointer-events:none; |
|
||||||
z-index:2; |
|
||||||
} |
|
||||||
#remote { |
|
||||||
position: absolute; |
|
||||||
left:0px; |
|
||||||
right:0px; |
|
||||||
top:0px; |
|
||||||
bottom:0px; |
|
||||||
transform: rotateY(180deg); |
|
||||||
-webkit-transform: rotateY(180deg); |
|
||||||
pointer-events:none; |
|
||||||
z-index:2; |
|
||||||
} |
|
||||||
#mini { |
|
||||||
position: absolute; |
|
||||||
max-height: 18%; |
|
||||||
bottom: 2px; |
|
||||||
right: 2px; |
|
||||||
transform: scale(-1, 1); |
|
||||||
-webkit-transform: scale(-1, 1); |
|
||||||
opacity: 0; |
|
||||||
transition-property: opacity; |
|
||||||
-webkit-transition-property: opacity; |
|
||||||
transition-duration: 0.5s; |
|
||||||
-webkit-transition-duration: 0.5s; |
|
||||||
} |
|
||||||
#localVideo { |
|
||||||
width: 100%; |
|
||||||
max-height: 100%; |
|
||||||
opacity: 0; |
|
||||||
transition-property: opacity; |
|
||||||
-webkit-transition-property: opacity; |
|
||||||
transition-duration: 2s; |
|
||||||
-webkit-transition-duration: 2s; |
|
||||||
background: rgba(0,0,0,0.4); |
|
||||||
/*background: red;*/ |
|
||||||
display:block; |
|
||||||
} |
|
||||||
#remoteVideos { |
|
||||||
position:absolute; |
|
||||||
left:0px; |
|
||||||
right:0px; |
|
||||||
bottom:0px; |
|
||||||
top:0px; |
|
||||||
opacity: 0; |
|
||||||
transition-property: opacity; |
|
||||||
-webkit-transition-property: opacity; |
|
||||||
transition-duration: 2s; |
|
||||||
-webkit-transition-duration: 2s; |
|
||||||
/*background: blue;*/ |
|
||||||
} |
|
||||||
#remoteVideos video { |
|
||||||
width:100%; |
|
||||||
height:100%; |
|
||||||
display:block; |
|
||||||
} |
|
||||||
#miniVideo { |
|
||||||
max-height: 100%; |
|
||||||
max-width:100%; |
|
||||||
display:block; |
|
||||||
} |
|
||||||
.remoteVideo { |
|
||||||
display: inline-block; |
|
||||||
width:100%; |
|
||||||
max-height:100%; |
|
||||||
vertical-align:bottom; |
|
||||||
position:relative; |
|
||||||
visibility:hidden; |
|
||||||
background: rgba(0,0,0,0.4); |
|
||||||
overflow:hidden; |
|
||||||
} |
|
||||||
.remoteVideo.withvideo { |
|
||||||
visibility:visible; |
|
||||||
} |
|
||||||
.remoteVideo.onlyaudio { |
|
||||||
visibility:visible; |
|
||||||
background: #666; |
|
||||||
} |
|
||||||
.remoteVideo .onlyaudio { |
|
||||||
display:none; |
|
||||||
position:absolute; |
|
||||||
left:0px; |
|
||||||
top:45%; |
|
||||||
right:0px; |
|
||||||
color:rgba(255,255,255,0.3); |
|
||||||
text-align:center; |
|
||||||
font-size:80px; |
|
||||||
margin-top:-40px; |
|
||||||
pointer-events:auto; |
|
||||||
} |
|
||||||
.remoteVideo.onlyaudio video { |
|
||||||
display:none; |
|
||||||
} |
|
||||||
.remoteVideo.onlyaudio .onlyaudio { |
|
||||||
display:block; |
|
||||||
} |
|
||||||
.remoteVideo .peeractions { |
|
||||||
position: absolute; |
|
||||||
z-index: 10; |
|
||||||
left:0px; |
|
||||||
right:0px; |
|
||||||
bottom:5%; |
|
||||||
text-align:center; |
|
||||||
opacity:.0; |
|
||||||
transition-property: opacity; |
|
||||||
-webkit-transition-property: opacity; |
|
||||||
transition-duration: 0.2s; |
|
||||||
-webkit-transition-duration: 0.2s; |
|
||||||
pointer-events:auto; |
|
||||||
} |
|
||||||
.remoteVideo .peeractions i { |
|
||||||
font-size:3vw; |
|
||||||
} |
|
||||||
.remoteVideo .peeractions:hover { |
|
||||||
opacity:.5; |
|
||||||
} |
|
||||||
.remoteVideo .peerlabel { |
|
||||||
position: absolute; |
|
||||||
z-index:8; |
|
||||||
left:4%; |
|
||||||
bottom:4%; |
|
||||||
font-size:2.5vw; |
|
||||||
color:white; |
|
||||||
opacity:.7; |
|
||||||
text-shadow: 0px 0px 4px black; |
|
||||||
max-width:30%; |
|
||||||
overflow:hidden; |
|
||||||
white-space:nowrap; |
|
||||||
text-overflow:ellipsis; |
|
||||||
padding:4px; |
|
||||||
} |
|
||||||
@ -1,17 +1,17 @@ |
|||||||
<div class="audioVideo"> |
<div class="audiovideo"> |
||||||
<div id="card"> |
<div class="audiovideoBase"> |
||||||
<div id="local"> |
<div class="localContainer"> |
||||||
<video id="localVideo" autoplay="autoplay" muted="true"></video> |
<video class="localVideo" autoplay="autoplay" muted="true"></video> |
||||||
<div class="overlaylogo"></div> |
<div class="overlayLogo"></div> |
||||||
</div> |
</div> |
||||||
<div id="remote"> |
<div class="remoteContainer"> |
||||||
<div id="remoteVideos"></div> |
<div class="remoteVideos"></div> |
||||||
<div id="mini" class="localVideo" ng-class="{talking: talking}"> |
<div class="miniContainer" ng-class="{talking: talking}"> |
||||||
<video id="miniVideo" autoplay="autoplay" muted="true"></video> |
<video class="miniVideo" autoplay="autoplay" muted="true"></video> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div class="overlayactions"> |
<div class="overlayActions"> |
||||||
<button class="btn btn-link" title="{{_('Standard view')}}" ng-click="setRenderer('onepeople')"><i class="fa fa-table" ></i></button> |
<button class="btn btn-link" title="{{_('Standard view')}}" ng-click="setRenderer('onepeople')"><i class="fa fa-table" ></i></button> |
||||||
<button class="btn btn-link" title="{{_('Kiosk view')}}" ng-click="setRenderer('conferencekiosk')"><i class="fa fa-user"></i></button> |
<button class="btn btn-link" title="{{_('Kiosk view')}}" ng-click="setRenderer('conferencekiosk')"><i class="fa fa-user"></i></button> |
||||||
</div> |
</div> |
||||||
|
|||||||
@ -1,9 +1,9 @@ |
|||||||
<div class="remoteVideo" ng-class="{'withvideo': withvideo, 'onlyaudio': onlyaudio, 'talking': talking}"> |
<div class="remoteVideo" ng-class="{'withvideo': withvideo, 'onlyaudio': onlyaudio, 'talking': talking}"> |
||||||
<video autoplay="autoplay"></video> |
<video autoplay="autoplay"></video> |
||||||
<div class="peerlabel">{{peerid|displayName}}</div> |
<div class="peerLabel">{{peerid|displayName}}</div> |
||||||
<div class="peeractions"> |
<div class="peerActions"> |
||||||
<a title="{{_('Start chat')}}" ng-click="doChat()" class="btn btn-default"><i class="fa fa-comments-o"></i></a> |
<a title="{{_('Start chat')}}" ng-click="doChat()" class="btn btn-default"><i class="fa fa-comments-o"></i></a> |
||||||
</div> |
</div> |
||||||
<div class="onlyaudio"><i class="fa fa-eye-close"></i></div> |
<div class="onlyaudio"><i class="fa fa-eye-close"></i></div> |
||||||
<div class="overlaylogo"></div> |
<div class="overlayLogo"></div> |
||||||
</div> |
</div> |
||||||
Loading…
Reference in new issue