Simon Eisenmann
12 years ago
8 changed files with 242 additions and 258 deletions
@ -1,186 +0,0 @@
@@ -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 @@
@@ -1,17 +1,17 @@
|
||||
<div class="audioVideo"> |
||||
<div id="card"> |
||||
<div id="local"> |
||||
<video id="localVideo" autoplay="autoplay" muted="true"></video> |
||||
<div class="overlaylogo"></div> |
||||
<div class="audiovideo"> |
||||
<div class="audiovideoBase"> |
||||
<div class="localContainer"> |
||||
<video class="localVideo" autoplay="autoplay" muted="true"></video> |
||||
<div class="overlayLogo"></div> |
||||
</div> |
||||
<div id="remote"> |
||||
<div id="remoteVideos"></div> |
||||
<div id="mini" class="localVideo" ng-class="{talking: talking}"> |
||||
<video id="miniVideo" autoplay="autoplay" muted="true"></video> |
||||
<div class="remoteContainer"> |
||||
<div class="remoteVideos"></div> |
||||
<div class="miniContainer" ng-class="{talking: talking}"> |
||||
<video class="miniVideo" autoplay="autoplay" muted="true"></video> |
||||
</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="{{_('Kiosk view')}}" ng-click="setRenderer('conferencekiosk')"><i class="fa fa-user"></i></button> |
||||
</div> |
||||
|
||||
@ -1,9 +1,9 @@
@@ -1,9 +1,9 @@
|
||||
<div class="remoteVideo" ng-class="{'withvideo': withvideo, 'onlyaudio': onlyaudio, 'talking': talking}"> |
||||
<video autoplay="autoplay"></video> |
||||
<div class="peerlabel">{{peerid|displayName}}</div> |
||||
<div class="peeractions"> |
||||
<div class="peerLabel">{{peerid|displayName}}</div> |
||||
<div class="peerActions"> |
||||
<a title="{{_('Start chat')}}" ng-click="doChat()" class="btn btn-default"><i class="fa fa-comments-o"></i></a> |
||||
</div> |
||||
<div class="onlyaudio"><i class="fa fa-eye-close"></i></div> |
||||
<div class="overlaylogo"></div> |
||||
<div class="overlayLogo"></div> |
||||
</div> |
||||
Loading…
Reference in new issue