fix(VideoLayout): "connection interrupted" shown only on video

The message about having connectivity issues should be displayed only
on top of the video like the "video problems filter" is.

modules/UI/videolayout/LargeVideoManager.js

         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;
         $('.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
         }
 
         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();
 
 
         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/VideoLayout.js

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