Merge pull request #493 from isymchych/fix-screensharing-mute-on-safari

Fix screensharing mute on safari

.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/*

modules/UI/UI.js

@@ -620,8 +620,8 @@ UI.getRemoteVideoType = function (jid) {
     return VideoLayout.getRemoteVideoType(jid);
 };
 
-UI.connectionIndicatorShowMore = function(jid) {
+UI.connectionIndicatorShowMore = function(id) {
-    return VideoLayout.showMore(jid);
+    VideoLayout.showMore(id);
 };
 
 // FIXME check if someone user this

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
     // <video> elements with plugin <object> tag. In Safari jQuery is
@@ -305,24 +315,36 @@ class VideoContainer extends LargeContainer {
     // animation effects performed on it directly.
 
     show () {
+        // its already visible
+        if (this.isVisible) {
+            return Promise.resolve();
+        }
+
         let $wrapper = this.$wrapper;
-        return new Promise(function(resolve) {
+        return new Promise((resolve) => {
-            $wrapper.css({visibility: 'visible'});
+            this.$wrapper.css('visibility', 'visible').fadeTo(
-            $wrapper.fadeTo(FADE_DURATION_MS, 1, function () {
+                FADE_DURATION_MS,
-                $('.watermark').css({visibility: 'visible'});
+                1,
-                resolve();
+                () => {
-            });
+                    this.showWatermark(true);
+                    this.isVisible = true;
+                    resolve();
+                }
+            );
         });
     }
 
     hide () {
-        let $wrapper = this.$wrapper;
+        // its already hidden
+        if (!this.isVisible) {
+            return Promise.resolve();
+        }
 
-        let id = this.id;
+        return new Promise((resolve) => {
-        return new Promise(function(resolve) {
+            this.$wrapper.fadeTo(FADE_DURATION_MS, 0, () => {
-            $wrapper.fadeTo(id ? FADE_DURATION_MS : 1, 0, function () {
+                this.$wrapper.css('visibility', 'hidden');
-                $wrapper.css({visibility: 'hidden'});
+                this.showWatermark(false);
-                $('.watermark').css({visibility: 'hidden'});
+                this.isVisible = false;
                 resolve();
             });
         });
@@ -423,9 +445,16 @@ export default class LargeVideoManager {
             // show the avatar on large if needed
             this.videoContainer.showAvatar(isVideoMuted);
 
+            let promise;
+
             // do not show stream if video is muted
-            let promise
+            // but we still should show watermark
-                = isVideoMuted ? Promise.resolve() : this.videoContainer.show();
+            if (isVideoMuted) {
+                this.videoContainer.showWatermark(true);
+                promise = Promise.resolve();
+            } else {
+                promise = this.videoContainer.show();
+            }
 
             // resolve updateLargeVideo promise after everything is done
             promise.then(resolve);
@@ -514,14 +543,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

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";

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);
 

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";

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))
+        if (this.isCurrentlyOnLarge(id)) {
-            largeVideo.showAvatar(value);
+            // large video will show avatar instead of muted stream
+            this.updateLargeVideo(id, true);
+        }
     },
 
     /**
@@ -817,15 +819,15 @@ var VideoLayout = {
         }
     },
 
-    showMore (jid) {
+    showMore (id) {
-        if (jid === 'local') {
+        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);
             }
         }
     },