Merge pull request #922 from jitsi/fix_filter_not_applied

Fix notification about network issues not displayed when expected

conference.js

@@ -681,6 +681,16 @@ export default {
         return this._room
             && this._room.getConnectionState();
     },
+    /**
+     * Checks whether or not our connection is currently in interrupted and
+     * reconnect attempts are in progress.
+     *
+     * @returns {boolean} true if the connection is in interrupted state or
+     * false otherwise.
+     */
+    isConnectionInterrupted () {
+        return connectionIsInterrupted;
+    },
     getMyUserId () {
         return this._room
             && this._room.myUserId();

modules/UI/shared_video/SharedVideo.js

@@ -567,10 +567,6 @@ class SharedVideoContainer extends LargeContainer {
         this.player = player;
     }
 
-    get $video () {
-        return this.$iframe;
-    }
-
     show () {
         let self = this;
         return new Promise(resolve => {

modules/UI/videolayout/LargeVideoManager.js

@@ -81,6 +81,27 @@ export default class LargeVideoManager {
         container.onHoverOut(e);
     }
 
+    /**
+     * Called when the media connection has been interrupted.
+     */
+    onVideoInterrupted () {
+        this.enableVideoProblemFilter(true);
+        let reconnectingKey = "connection.RECONNECTING";
+        $('#videoConnectionMessage')
+            .attr("data-i18n", reconnectingKey)
+            .text(APP.translation.translateString(reconnectingKey));
+        // Show the message only if the video is currently being displayed
+        this.showVideoConnectionMessage(this.state === VIDEO_CONTAINER_TYPE);
+    }
+
+    /**
+     * Called when the media connection has been restored.
+     */
+    onVideoRestored () {
+        this.enableVideoProblemFilter(false);
+        this.showVideoConnectionMessage(false);
+    }
+
     get id () {
         let container = this.getContainer(this.state);
         return container.id;
@@ -213,8 +234,7 @@ export default class LargeVideoManager {
      * @param enable <tt>true</tt> to enable, <tt>false</tt> to disable
      */
     enableVideoProblemFilter (enable) {
-        let container = this.getContainer(this.state);
+        this.videoContainer.enableVideoProblemFilter(enable);
-        container.$video.toggleClass("videoProblemFilter", enable);
     }
 
     /**
@@ -232,6 +252,24 @@ export default class LargeVideoManager {
         $('.watermark').css('visibility', show ? 'visible' : 'hidden');
     }
 
+    /**
+     * Shows/hides the "video connection message".
+     * @param {boolean|null} show(optional) tells whether the message is to be
+     * displayed or not. If missing the condition will be based on the value
+     * obtained from {@link APP.conference.isConnectionInterrupted}.
+     */
+    showVideoConnectionMessage (show) {
+        if (typeof show !== 'boolean') {
+            show = APP.conference.isConnectionInterrupted();
+        }
+
+        if (show) {
+            $('#videoConnectionMessage').css({display: "block"});
+        } else {
+            $('#videoConnectionMessage').css({display: "none"});
+        }
+    }
+
     /**
      * Add container of specified type.
      * @param {string} type container type
@@ -285,8 +323,12 @@ export default class LargeVideoManager {
         }
 
         let oldContainer = this.containers[this.state];
+        // FIXME when video is being replaced with other content we need to hide
+        // companion icons/messages. It would be best if the container would
+        // be taking care of it by itself, but that is a bigger refactoring
         if (this.state === VIDEO_CONTAINER_TYPE) {
             this.showWatermark(false);
+            this.showVideoConnectionMessage(false);
         }
         oldContainer.hide();
 
@@ -295,7 +337,12 @@ export default class LargeVideoManager {
 
         return container.show().then(() => {
             if (type === VIDEO_CONTAINER_TYPE) {
+                // FIXME when video appears on top of other content we need to
+                // show companion icons/messages. It would be best if
+                // the container would be taking care of it by itself, but that
+                // is a bigger refactoring
                 this.showWatermark(true);
+                this.showVideoConnectionMessage(/* fetch the current state */);
             }
         });
     }

modules/UI/videolayout/VideoContainer.js

@@ -184,6 +184,17 @@ export class VideoContainer extends LargeContainer {
         this.$video[0].onplay = onPlay;
     }
 
+    /**
+     * Enables a filter on the video which indicates that there are some
+     * problems with the media connection.
+     *
+     * @param {boolean} enable <tt>true</tt> if the filter is to be enabled or
+     * <tt>false</tt> otherwise.
+     */
+    enableVideoProblemFilter (enable) {
+        this.$video.toggleClass("videoProblemFilter", enable);
+    }
+
     /**
      * Get size of video element.
      * @returns {{width, height}}

modules/UI/videolayout/VideoLayout.js

@@ -951,28 +951,18 @@ var VideoLayout = {
      * Indicates that the video has been interrupted.
      */
     onVideoInterrupted () {
-        this.enableVideoProblemFilter(true);
+        if (largeVideo) {
-        let reconnectingKey = "connection.RECONNECTING";
+            largeVideo.onVideoInterrupted();
-        $('#videoConnectionMessage')
+        }
-            .attr("data-i18n", reconnectingKey)
-            .text(APP.translation.translateString(reconnectingKey))
-            .css({display: "block"});
     },
 
     /**
      * Indicates that the video has been restored.
      */
     onVideoRestored () {
-        this.enableVideoProblemFilter(false);
+        if (largeVideo) {
-        $('#videoConnectionMessage').css({display: "none"});
+            largeVideo.onVideoRestored();
-    },
-
-    enableVideoProblemFilter (enable) {
-        if (!largeVideo) {
-            return;
         }
-
-        largeVideo.enableVideoProblemFilter(enable);
     },
 
     isLargeVideoVisible () {