synchronize Large video fadeIn/fadeOut animations

modules/UI/videolayout/LargeVideo.js

@@ -6,15 +6,18 @@ import UIEvents from "../../../service/UI/UIEvents";
 import LargeContainer from './LargeContainer';
 import BottomToolbar from '../toolbars/BottomToolbar';
 import Avatar from "../avatar/Avatar";
+import {createDeferred} from '../../util/helpers';
 
 const RTCBrowserType = require("../../RTC/RTCBrowserType");
 
 const avatarSize = interfaceConfig.DOMINANT_SPEAKER_AVATAR_SIZE;
+const FADE_DURATION_MS = 300;
 
-function getStreamId(stream) {
-    if(!stream)
+function getStreamOwnerId(stream) {
+    if (!stream) {
         return;
-    if (stream.isLocal()) {
+    }
+    if (stream.isLocal()) { // local stream doesn't have method "getParticipantId"
         return APP.conference.localId;
     } else {
         return stream.getParticipantId();
@@ -154,9 +157,7 @@ class VideoContainer extends LargeContainer {
     }
 
     get id () {
-        if (this.stream) {
-            return getStreamId(this.stream);
-        }
+        return getStreamOwnerId(this.stream);
     }
 
     constructor (onPlay) {
@@ -267,20 +268,20 @@ class VideoContainer extends LargeContainer {
     show () {
         let $wrapper = this.$wrapper;
         return new Promise(function(resolve) {
-            $wrapper.fadeIn(300, function () {
             $wrapper.css({visibility: 'visible'});
+            $wrapper.fadeIn(FADE_DURATION_MS, function () {
                 $('.watermark').css({visibility: 'visible'});
-            });
                 resolve();
             });
+        });
     }
 
     hide () {
-
         let $wrapper = this.$wrapper;
 
+        let id = this.id;
         return new Promise(function(resolve) {
-            $wrapper.fadeOut(300, function () {
+            $wrapper.fadeOut(id ? FADE_DURATION_MS : 1, function () {
                 $wrapper.css({visibility: 'hidden'});
                 $('.watermark').css({visibility: 'hidden'});
                 resolve();
@@ -356,30 +357,62 @@ export default class LargeVideoManager {
         return this.videoContainer.id;
     }
 
-    updateLargeVideo (smallVideo, videoType, largeVideoUpdatedCallBack) {
-        let id = getStreamId(smallVideo.stream);
+    scheduleLargeVideoUpdate () {
+        if (this.updateInProcess || !this.newStreamData) {
+            return;
+        }
+
+        this.updateInProcess = true;
 
         let container = this.getContainer(this.state);
 
         container.hide().then(() => {
+            let {id, stream, videoType, resolve} = this.newStreamData;
+            this.newStreamData = null;
+
             console.info("hover in %s", id);
             this.state = VideoContainerType;
-            this.videoContainer.setStream(smallVideo.stream, videoType);
+            this.videoContainer.setStream(stream, videoType);
 
             // change the avatar url on large
-            this.updateAvatar(Avatar.getAvatarUrl(smallVideo.id));
+            this.updateAvatar(Avatar.getAvatarUrl(id));
+
+            let isVideoMuted = stream.isMuted();
 
-            var isVideoMuted = smallVideo.stream.isMuted()
             // show the avatar on large if needed
             this.videoContainer.showAvatar(isVideoMuted);
 
-            if (!isVideoMuted)
-                this.videoContainer.show();
+            // do not show stream if video is muted
+            let promise = isVideoMuted ? Promise.resolve() : this.videoContainer.show();
 
-            largeVideoUpdatedCallBack();
+            // resolve updateLargeVideo promise after everything is done
+            promise.then(resolve);
+
+            return promise;
+        }).then(() => {
+            // after everything is done check again if there are any pending new streams.
+            this.updateInProcess = false;
+            this.scheduleLargeVideoUpdate();
         });
     }
 
+    updateLargeVideo (stream, videoType) {
+        let id = getStreamOwnerId(stream);
+
+        if (this.newStreamData) {
+            this.newStreamData.reject();
+        }
+
+        this.newStreamData = createDeferred();
+        this.newStreamData.id = id;
+        this.newStreamData.stream = stream;
+        this.newStreamData.videoType = videoType;
+
+        this.scheduleLargeVideoUpdate();
+
+        return this.newStreamData.promise;
+    }
+
     updateContainerSize (isSideBarVisible) {
         this.width = UIUtil.getAvailableVideoWidth(isSideBarVisible);
         this.height = window.innerHeight;
@@ -421,7 +454,6 @@ export default class LargeVideoManager {
     }
 
     showAvatar (show) {
-        show ? this.videoContainer.hide() : this.videoContainer.show();
         this.videoContainer.showAvatar(show);
     }
 
@@ -457,16 +489,11 @@ export default class LargeVideoManager {
             return Promise.resolve();
         }
 
-        let container = this.getContainer(type);
-
-        if (this.state) {
         let oldContainer = this.containers[this.state];
-            if (oldContainer) {
         oldContainer.hide();
-            }
-        }
 
         this.state = type;
+        let container = this.getContainer(type);
 
         return container.show();
     }

modules/UI/videolayout/VideoLayout.js

@@ -990,13 +990,14 @@ var VideoLayout = {
 
             let videoType = this.getRemoteVideoType(id);
             largeVideo.updateLargeVideo(
-                smallVideo,
-                videoType,
-                // LargeVideoUpdatedCallBack
-                function() {
+                smallVideo.stream,
+                videoType
+            ).then(function() {
                 // update current small video and the old one
                 smallVideo.updateView();
                 oldSmallVideo && oldSmallVideo.updateView();
+            }, function () {
+                // use clicked other video during update, nothing to do.
             });
 
         } else if (currentId) {

modules/util/helpers.js

@@ -0,0 +1,14 @@
+/**
+ * Create deferred object.
+ * @returns {{promise, resolve, reject}}
+ */
+export function createDeferred () {
+    let deferred = {};
+
+    deferred.promise = new Promise(function (resolve, reject) {
+        deferred.resolve = resolve;
+        deferred.reject = reject;
+    });
+
+    return deferred;
+}