From fdfa9de1504e72561202778bd16c2629359c36f5 Mon Sep 17 00:00:00 2001 From: isymchych Date: Wed, 10 Feb 2016 17:16:55 +0200 Subject: [PATCH 1/3] hide large video if stream is muted --- modules/UI/videolayout/LargeVideo.js | 21 ++++++++------------- modules/UI/videolayout/VideoLayout.js | 8 +++++--- 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/modules/UI/videolayout/LargeVideo.js b/modules/UI/videolayout/LargeVideo.js index 479687ed0..ce4c9f3ea 100644 --- a/modules/UI/videolayout/LargeVideo.js +++ b/modules/UI/videolayout/LargeVideo.js @@ -307,9 +307,9 @@ class VideoContainer extends LargeContainer { show () { let $wrapper = this.$wrapper; return new Promise(function(resolve) { - $wrapper.css({visibility: 'visible'}); + $wrapper.css('visibility', 'visible'); $wrapper.fadeTo(FADE_DURATION_MS, 1, function () { - $('.watermark').css({visibility: 'visible'}); + $('.watermark').css('visibility', 'visible'); resolve(); }); }); @@ -317,12 +317,15 @@ class VideoContainer extends LargeContainer { hide () { let $wrapper = this.$wrapper; - let id = this.id; return new Promise(function(resolve) { + // There is no id on initial render + // so first time we hide wrapper immediately + // instead of slowly fading it out. + // This improves startup time. $wrapper.fadeTo(id ? FADE_DURATION_MS : 1, 0, function () { - $wrapper.css({visibility: 'hidden'}); - $('.watermark').css({visibility: 'hidden'}); + $wrapper.css('visibility', 'hidden'); + $('.watermark').css('visibility', 'hidden'); resolve(); }); }); @@ -514,14 +517,6 @@ export default class LargeVideoManager { $("#dominantSpeakerAvatar").attr('src', avatarUrl); } - /** - * Show avatar on Large video container or not. - * @param {boolean} show - */ - showAvatar (show) { - this.videoContainer.showAvatar(show); - } - /** * Add container of specified type. * @param {string} type container type diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 07b3858b1..5a0a81843 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -1,4 +1,4 @@ -/* global config, APP, $, interfaceConfig */ +/* global config, APP, $, interfaceConfig, JitsiMeetJS */ /* jshint -W101 */ import AudioLevels from "../audio_levels/AudioLevels"; @@ -504,8 +504,10 @@ var VideoLayout = { remoteVideo.setMutedView(value); } - if(this.isCurrentlyOnLarge(id)) - largeVideo.showAvatar(value); + if (this.isCurrentlyOnLarge(id)) { + // large video will show avatar instead of muted stream + this.updateLargeVideo(id, true); + } }, /** From 401e5e7ae01ef209a2f4e49a440f182232a03d72 Mon Sep 17 00:00:00 2001 From: isymchych Date: Wed, 10 Feb 2016 17:26:16 +0200 Subject: [PATCH 2/3] fix jshint issues --- .jshintignore | 7 ------- modules/UI/UI.js | 4 ++-- modules/UI/videolayout/LocalVideo.js | 2 +- modules/UI/videolayout/RemoteVideo.js | 3 ++- modules/UI/videolayout/SmallVideo.js | 2 +- modules/UI/videolayout/VideoLayout.js | 8 ++++---- 6 files changed, 10 insertions(+), 16 deletions(-) diff --git a/.jshintignore b/.jshintignore index 6224afaa9..efacec50a 100644 --- a/.jshintignore +++ b/.jshintignore @@ -2,10 +2,3 @@ node_modules libs debian analytics.js -lib-jitsi-meet.js - -modules/xmpp/strophe.emuc.js -modules/UI/prezi/Prezi.js -modules/RTC/adapter.screenshare.js -modules/statistics/* -modules/UI/videolayout/* diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 0727e7022..9515dec65 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -620,8 +620,8 @@ UI.getRemoteVideoType = function (jid) { return VideoLayout.getRemoteVideoType(jid); }; -UI.connectionIndicatorShowMore = function(jid) { - return VideoLayout.showMore(jid); +UI.connectionIndicatorShowMore = function(id) { + VideoLayout.showMore(id); }; // FIXME check if someone user this diff --git a/modules/UI/videolayout/LocalVideo.js b/modules/UI/videolayout/LocalVideo.js index a01c1cde7..e631e6a43 100644 --- a/modules/UI/videolayout/LocalVideo.js +++ b/modules/UI/videolayout/LocalVideo.js @@ -1,4 +1,4 @@ -/* global $, interfaceConfig, APP */ +/* global $, interfaceConfig, APP, JitsiMeetJS */ import ConnectionIndicator from "./ConnectionIndicator"; import UIUtil from "../util/UIUtil"; import UIEvents from "../../../service/UI/UIEvents"; diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 99abdaaa1..92462e8d5 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -253,7 +253,8 @@ RemoteVideo.prototype.addRemoteStreamElement = function (stream) { // calling attach will show it back $(streamElement).hide(); - // If the container is currently visible we attach the stream to the element. + // If the container is currently visible + // we attach the stream to the element. if (!isVideo || (this.container.offsetParent !== null && isVideo)) { this.waitForPlayback(streamElement, stream); diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index 83cb40ec1..2ea5d87ea 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -1,4 +1,4 @@ -/* global $, APP, require */ +/* global $, APP, JitsiMeetJS */ /* jshint -W101 */ import Avatar from "../avatar/Avatar"; import UIUtil from "../util/UIUtil"; diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 5a0a81843..53143fd20 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -819,15 +819,15 @@ var VideoLayout = { } }, - showMore (jid) { - if (jid === 'local') { + showMore (id) { + if (id === 'local') { localVideoThumbnail.connectionIndicator.showMore(); } else { - var remoteVideo = remoteVideos[Strophe.getResourceFromJid(jid)]; + let remoteVideo = remoteVideos[id]; if (remoteVideo) { remoteVideo.connectionIndicator.showMore(); } else { - console.info("Error - no remote video for jid: " + jid); + console.info("Error - no remote video for id: " + id); } } }, From 24ffc816f48cd0b34687d4201a94d23a6d2aa29e Mon Sep 17 00:00:00 2001 From: isymchych Date: Fri, 12 Feb 2016 16:47:42 +0200 Subject: [PATCH 3/3] LargeVideo: show watermark even if video is muted --- modules/UI/videolayout/LargeVideo.js | 62 ++++++++++++++++++++-------- 1 file changed, 44 insertions(+), 18 deletions(-) diff --git a/modules/UI/videolayout/LargeVideo.js b/modules/UI/videolayout/LargeVideo.js index ce4c9f3ea..474c54a80 100644 --- a/modules/UI/videolayout/LargeVideo.js +++ b/modules/UI/videolayout/LargeVideo.js @@ -170,6 +170,8 @@ class VideoContainer extends LargeContainer { this.stream = null; this.videoType = null; + this.isVisible = false; + this.$avatar = $('#dominantSpeaker'); this.$wrapper = $('#largeVideoWrapper'); @@ -298,6 +300,14 @@ class VideoContainer extends LargeContainer { this.$avatar.css("visibility", show ? "visible" : "hidden"); } + /** + * Show or hide watermark. + * @param {boolean} show + */ + showWatermark (show) { + $('.watermark').css('visibility', show ? 'visible' : 'hidden'); + } + // We are doing fadeOut/fadeIn animations on parent div which wraps // largeVideo, because when Temasys plugin is in use it replaces //