Browse Source

Improved onlyaudio styles.

pull/206/head
Simon Eisenmann 10 years ago committed by Simon Eisenmann
parent
commit
af77cc0033
  1. 45
      src/styles/components/_audiovideo.scss
  2. 2
      static/css/main.min.css
  3. 4
      static/js/directives/audiovideo.js
  4. 1
      static/js/services/videolayout.js
  5. 2
      static/partials/audiovideo.html
  6. 2
      static/partials/audiovideopeer.html

45
src/styles/components/_audiovideo.scss

@ -117,16 +117,29 @@ @@ -117,16 +117,29 @@
.onlyaudio {
color: $video-onlyaudio;
display: none;
font-size: 80px;
font-size: 1em;
left: 0;
margin-top: -40px;
pointer-events: auto;
position: absolute;
right: 0;
text-align: center;
top: 45%;
top: 0;
bottom: 0;
&:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
> * {
font-size: 6em;
vertical-align: middle;
}
}
.remoteContainer {
bottom: 0;
left: 0;
@ -158,7 +171,8 @@ @@ -158,7 +171,8 @@
}
&.cameraMute .miniContainer,
&.cameraMute .localContainer {
&.cameraMute .localVideos {
background: $video-onlyaudio-background;
.onlyaudio {
display: block;
}
@ -180,10 +194,20 @@ @@ -180,10 +194,20 @@
background: $video-background;
display: block;
max-height: 100%;
width: 100%;
opacity: 0;
transition-duration: 2s;
transition-property: opacity;
width: 100%;
}
.localVideos {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
transition-duration: 2s;
transition-property: opacity;
}
.remoteVideos {
@ -241,7 +265,7 @@ @@ -241,7 +265,7 @@
//visibility: visible;
}
&.onlyaudio {
&.onlyaudioVideo {
background: $video-onlyaudio-background;
//visibility: visible;
@ -250,7 +274,7 @@ @@ -250,7 +274,7 @@
}
}
&.onlyaudio video,
&.onlyaudioVideo video,
&.dummy video {
visibility: hidden;
}
@ -371,10 +395,12 @@ @@ -371,10 +395,12 @@
}
.renderer-onepeople {
.miniContainer .onlyaudio {
font-size: 0.4em;
}
}
.renderer-democrazy {
.remoteVideos .miniContainer {
bottom: auto;
display: inline-block;
@ -388,7 +414,6 @@ @@ -388,7 +414,6 @@
.active .miniContainer {
opacity: 1;
}
}
.renderer-conferencekiosk {
@ -520,7 +545,7 @@ @@ -520,7 +545,7 @@
height: 180px;
width: 320px;
video {
.remoteVideo, .video {
height: 100%;
width: 100%;
}

2
static/css/main.min.css vendored

File diff suppressed because one or more lines are too long

4
static/js/directives/audiovideo.js

@ -46,6 +46,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/ @@ -46,6 +46,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
$scope.layoutparent = $element.parent();
$scope.remoteVideos = $element.find(".remoteVideos")[0];
$scope.localVideos = $element.find(".localVideos")[0];
$scope.localVideo = $element.find(".localVideo")[0];
$scope.miniVideo = $element.find(".miniVideo")[0];
$scope.mini = $element.find(".miniContainer")[0];
@ -217,6 +218,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/ @@ -217,6 +218,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
$element.addClass("active");
//console.log("active 3");
_.delay(function() {
$scope.localVideos.style.opacity = 0;
$scope.localVideo.style.opacity = 0;
$scope.localVideo.src = "";
}, 500);
@ -263,6 +265,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/ @@ -263,6 +265,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
return;
}
if ($scope.localVideo.videoWidth > 0) {
console.log("Local video size: ", $scope.localVideo.videoWidth, $scope.localVideo.videoHeight);
$scope.localVideo.style.opacity = 1;
$scope.redraw();
} else {
@ -298,6 +301,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/ @@ -298,6 +301,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
$($scope.remoteVideos).children(".remoteVideo").remove();
}, 1500);
$($scope.mini).removeClass("visible");
$scope.localVideos.style.opacity = 1;
$scope.localVideo.style.opacity = 0;
$scope.remoteVideos.style.opacity = 0;
$element.removeClass('active');

1
static/js/services/videolayout.js

@ -86,7 +86,6 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern @@ -86,7 +86,6 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
if (scope.localVideo.style.opacity === '1') {
videoWidth = scope.localVideo.videoWidth;
videoHeight = scope.localVideo.videoHeight;
console.log("Local video size: ", videoWidth, videoHeight);
videos = [null];
}
}

2
static/partials/audiovideo.html

@ -1,9 +1,11 @@ @@ -1,9 +1,11 @@
<div class="audiovideo" ng-class="{'cameraMute': cameraMute, 'microphoneMute': microphoneMute}">
<div class="audiovideoBase">
<div class="localContainer">
<div class="localVideos">
<video class="localVideo" autoplay="autoplay" muted="true"></video>
<div class="onlyaudio"><i class="fa fa-eye-slash"></i></div>
<div class="overlayLogo"></div>
</div>
</div>
<div class="remoteContainer">
<div class="remoteVideos nicescroll"></div>

2
static/partials/audiovideopeer.html

@ -1,4 +1,4 @@ @@ -1,4 +1,4 @@
<div class="remoteVideo" ng-class="{'dummy': dummy, 'withvideo': withvideo, 'onlyaudio': onlyaudio, 'talking': peersTalking[peerid]}">
<div class="remoteVideo" ng-class="{'dummy': dummy, 'withvideo': withvideo, 'onlyaudioVideo': onlyaudio, 'talking': peersTalking[peerid]}">
<video autoplay="autoplay"></video>
<div class="peerLabel">{{peerid|displayName}}</div>
<div class="peerActions">

Loading…
Cancel
Save