diff --git a/html/main.html b/html/main.html index d18f50c6..99c27acb 100644 --- a/html/main.html +++ b/html/main.html @@ -27,9 +27,7 @@
-
- -
+
diff --git a/src/styles/components/_audiovideo.scss b/src/styles/components/_audiovideo.scss index 7469774f..1ed69a23 100644 --- a/src/styles/components/_audiovideo.scss +++ b/src/styles/components/_audiovideo.scss @@ -19,47 +19,221 @@ * */ #audiovideo { -position:absolute; -left:0px; -top:44px; -bottom:0px; -right:0px; -border-top:1px solid $bordercolor; --webkit-user-select: none; --khtml-user-select: none; --moz-user-select: none; --o-user-select: none; -user-select: none; + position:absolute; + left:0px; + top:44px; + bottom:0px; + right:0px; + border-top:1px solid $bordercolor; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; } #audiovideo.fullscreen { -top:0px !important; -right:0px !important; -bottom:0px !important; -left:0px !important; -background:black !important; + top:0px !important; + right:0px !important; + bottom:0px !important; + left:0px !important; + background:black !important; } -#audiovideo.fullscreen .remoteVideo .peeractions { -display:none; +#audiovideo.fullscreen .remoteVideo .peerActions { + display:none; } .withChat #audiovideo, .withBuddylist #audiovideo { -right:260px; + right:260px; } .withBuddylist.withChat #audiovideo { -right:520px; + right:520px; +} + +.audiovideo { + position:absolute; + top:0px; + left:0px; + bottom:0px; + right:0px; } -.audioVideo { +.audiovideo.active { + perspective: 1000; + -webkit-perspective: 1000; +} + +.audiovideo .audiovideoBase { 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; } -.audioVideo.active { - perspective: 1000; - -webkit-perspective: 1000; +.audiovideo.active .audiovideoBase { + transform: rotateY(180deg); + -webkit-transform: rotateY(180deg); +} + +.audiovideo .localContainer { + 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; +} + +.audiovideo .remoteContainer { + position: absolute; + left:0px; + right:0px; + top:0px; + bottom:0px; + transform: rotateY(180deg); + -webkit-transform: rotateY(180deg); + pointer-events:none; + z-index:2; +} + +.audiovideo .miniContainer { + 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; +} + +.audiovideo .miniContainer.visible { + opacity: 1; +} + +.audiovideo .miniVideo { + max-height: 100%; + max-width:100%; + display:block; +} + +.audiovideo .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); + display:block; +} + +.audiovideo .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; + + video { + width:100%; + height:100%; + display:block; + } +} + +.audiovideo { + + .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; + } + } -.audioVideo .overlayactions { +.audiovideo .overlayActions { position: absolute; left:0px; top:0px; @@ -81,26 +255,26 @@ right:520px; } } -.audioVideo.active:hover .overlayactions { +.audiovideo.active:hover .overlayActions { opacity: 0.3; } -.audioVideo.active .overlayactions:hover { +.audiovideo.active .overlayActions:hover { opacity: 0.6; } -.remoteVideo .peerlabel { +.remoteVideo .peerLabel { -webkit-transition: color 500ms ease-out; -moz-transition: color 500ms ease-out; -o-transition: color 500ms ease-out; transition: color 500ms ease-out; } -.remoteVideo.talking .peerlabel { +.remoteVideo.talking .peerLabel { color: #9dd53a; } -.remoteVideo .overlaylogo { +.remoteVideo .overlayLogo { position:absolute; right:4%; top:4%; @@ -117,37 +291,37 @@ right:520px; pointer-events: none; } -.localVideo video { +.miniContainer video { border:1px solid transparent; } -.localVideo.talking video { +.miniContainer.talking video { border:1px solid #9dd53a; } .renderer-smally { width:150px; - #remoteVideos { + .remoteVideos { padding-bottom: 85px; } - #mini { + .miniContainer { bottom:0px; left:0px; right:0px; max-height:none; height:85px; } - .remoteVideo .peerlabel { + .remoteVideo .peerLabel { font-size:.9em; font-weight:bold; } - .remoteVideo .peeractions i { + .remoteVideo .peerActions i { font-size:1em; } } .renderer-conferencekiosk { - #remoteVideos { + .remoteVideos { top:auto; bottom:2px; text-align:center; @@ -159,17 +333,17 @@ right:520px; width:192px; cursor:pointer; } - .overlaylogo { + .overlayLogo { display:none; } - .peerlabel, .peeractions i { + .peerLabel, .peerActions i { font-size:1.1em; } - .peerlabel { + .peerLabel { background: rgba(0,0,0,0.9); } } - #mini { + .miniContainer { max-height: none; height:108px; width:192px; @@ -187,14 +361,13 @@ right:520px; transition-duration: 2s; -webkit-transition-duration: 2s; } + .bigVideo video { + width:100%; + height:100%; + } } -.bigVideo video { - width:100%; - height:100%; -} - @media only screen and (max-width: 630px) { .mainScreenshare #audiovideo { display:none; diff --git a/src/styles/components/_webrtc.scss b/src/styles/components/_webrtc.scss deleted file mode 100644 index b9446333..00000000 --- a/src/styles/components/_webrtc.scss +++ /dev/null @@ -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 . - * - */ -#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; -} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 8415c187..688ab7f4 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -33,7 +33,6 @@ @import "components/rightslide"; @import "components/bar"; -@import "components/webrtc"; @import "components/buddylist"; @import "components/settings"; @import "components/chat"; diff --git a/static/js/directives/audiovideo.js b/static/js/directives/audiovideo.js index d6d04a56..033cc826 100644 --- a/static/js/directives/audiovideo.js +++ b/static/js/directives/audiovideo.js @@ -30,13 +30,13 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/ var peers = {}; var events = $({}); - $scope.container = $element.parent().get(0); - $scope.layoutparent = $element.parent().parent(); + $scope.container = $element.get(0); + $scope.layoutparent = $element.parent(); - $scope.remoteVideos = $element.find("#remoteVideos").get(0); - $scope.localVideo = $element.find("#localVideo").get(0); - $scope.miniVideo = $element.find("#miniVideo").get(0); - $scope.mini = $element.find("#mini"); + $scope.remoteVideos = $element.find(".remoteVideos").get(0); + $scope.localVideo = $element.find(".localVideo").get(0); + $scope.miniVideo = $element.find(".miniVideo").get(0); + $scope.mini = $element.find(".miniContainer").get(0); $scope.hasUsermedia = false; $scope.isActive = false; @@ -143,7 +143,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/ }, 500); _.delay(function() { //console.log("active 4", $scope.mini); - $scope.mini.addClass("visible"); //.style.opacity = 1; + $($scope.mini).addClass("visible"); }, 1000); } @@ -198,7 +198,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/ $scope.miniVideo.src = ''; $($scope.remoteVideos).empty(); }, 1500); - $scope.mini.removeClass("visible"); + $($scope.mini).removeClass("visible"); $scope.localVideo.style.opacity = 0; $scope.remoteVideos.style.opacity = 0; $element.removeClass('active'); diff --git a/static/js/services/videolayout.js b/static/js/services/videolayout.js index a976b028..56617ccb 100644 --- a/static/js/services/videolayout.js +++ b/static/js/services/videolayout.js @@ -159,7 +159,7 @@ define(["jquery", "underscore"], function($, _) { // A view with one selectable large video. The others are small. var ConferenceKiosk = function(container, scope, controller) { - this.remoteVideos = $(container).find("#remoteVideos"); + this.remoteVideos = $(container).find(".remoteVideos"); this.bigVideo = $("
").addClass("bigVideo").get(0); this.remoteVideos.before(this.bigVideo); diff --git a/static/partials/audiovideo.html b/static/partials/audiovideo.html index 2c4e7045..8804203c 100644 --- a/static/partials/audiovideo.html +++ b/static/partials/audiovideo.html @@ -1,17 +1,17 @@ -
-
-
- - +
+
+
+ +
-
-
-
- +
+
+
+
-
+
diff --git a/static/partials/audiovideopeer.html b/static/partials/audiovideopeer.html index 0ef59995..a637d4f1 100644 --- a/static/partials/audiovideopeer.html +++ b/static/partials/audiovideopeer.html @@ -1,9 +1,9 @@
-
{{peerid|displayName}}
-
+
{{peerid|displayName}}
+
- +
\ No newline at end of file