Separate disconnect overlay.

css/_mixins.scss

@@ -151,3 +151,11 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/**
+ * Creates a semi-transparent background with the given color and alpha
+ * (opacity) value.
+ */
+@mixin transparentBg($color, $alpha) {
+  background-color: rgba(red($color), green($color), blue($color), $alpha);
+}

css/components/_button-control.scss

@@ -82,4 +82,8 @@
             color: $linkHoverFontColor;
         }
     }
+
+    &_center {
+        float: none !important;
+    }
 }

css/overlay/_overlay.scss

@@ -1,5 +1,6 @@
 .overlay {
-    &__container {
+    &__container,
+    &__container-light {
         top: 0;
         left: 0;
         width: 100%;
@@ -9,6 +10,10 @@
         background: $defaultBackground;
     }
 
+    &__container-light {
+        @include transparentBg($defaultBackground, 0.7);
+    }
+
     &__content {
         position: absolute;
         margin: 0 auto;

lang/main.json

@@ -215,6 +215,9 @@
         "failedpermissions": "Failed to obtain permissions to use the local microphone and/or camera.",
         "conferenceReloadTitle": "Unfortunately, something went wrong",
         "conferenceReloadMsg": "We're trying to fix this",
+        "conferenceDisconnectTitle": "You have been disconnected. You may want to check your network connection.",
+        "conferenceDisconnectMsg": "Reconnecting in...",
+        "reconnectNow": "Reconnect now",
         "conferenceReloadTimeLeft": "__seconds__ sec.",
         "maxUsersLimitReached": "The limit for maximum number of participants in the conference has been reached. The conference is full. Please try again later!",
         "lockTitle": "Lock failed",

modules/UI/overlay/Overlay.js

@@ -28,13 +28,19 @@ export default class Overlay{
     }
     /**
      * Constructs the HTML body of the overlay dialog.
+     *
+     * @param isLightOverlay indicates that this will be a light overlay look
+     * and feel.
      */
-    buildOverlayHtml() {
+    buildOverlayHtml(isLightOverlay) {
 
         let overlayContent = this._buildOverlayContent();
 
+        let containerClass = isLightOverlay ? "overlay__container-light"
+                                            : "overlay__container";
+
         this.$overlay = $(`
-            <div class='overlay__container'>
+            <div class=${containerClass}>
                 <div class='overlay__content'>
                     ${overlayContent}
                 </div>
@@ -61,10 +67,13 @@ export default class Overlay{
     /**
      * Shows the overlay dialog adn attaches the underlying HTML representation
      * to the DOM.
+     *
+     * @param isLightOverlay indicates that this will be a light overlay look
+     * and feel.
      */
-    show() {
+    show(isLightOverlay) {
 
-        !this.$overlay && this.buildOverlayHtml();
+        !this.$overlay && this.buildOverlayHtml(isLightOverlay);
 
         if (!this.isVisible()) {
             this.$overlay.appendTo('body');

modules/UI/reload_overlay/PageReloadOverlay.js

@@ -12,8 +12,13 @@ class PageReloadOverlayImpl extends Overlay{
      * Creates new <tt>PageReloadOverlayImpl</tt>
      * @param {number} timeoutSeconds how long the overlay dialog will be
      * displayed, before the conference will be reloaded.
+     * @param {boolean} isDisconnect indicates if this reload screen is created
+     * to indicate a disconnect
+     * @param {boolean} isNetworkFailure <tt>true</tt> indicates that it's
+     * caused by network related failure or <tt>false</tt> when it's
+     * the infrastructure.
      */
-    constructor(timeoutSeconds) {
+    constructor(timeoutSeconds, isNetworkFailure) {
         super();
         /**
          * Conference reload counter in seconds.
@@ -25,6 +30,13 @@ class PageReloadOverlayImpl extends Overlay{
          * @type {number}
          */
         this.timeout = timeoutSeconds;
+
+        /**
+         * Indicates that a network related failure is the reason for the
+         * reload.
+         * @type {boolean}
+         */
+        this.isNetworkFailure = isNetworkFailure;
     }
     /**
      * Constructs overlay body with the warning message and count down towards
@@ -32,10 +44,27 @@ class PageReloadOverlayImpl extends Overlay{
      * @override
      */
     _buildOverlayContent() {
+        let title = (this.isNetworkFailure)
+                        ? "dialog.conferenceDisconnectTitle"
+                        : "dialog.conferenceReloadTitle";
+        let message = (this.isNetworkFailure)
+                        ? "dialog.conferenceDisconnectMsg"
+                        : "dialog.conferenceReloadMsg";
+
+        let button = (this.isNetworkFailure)
+                    ? `<button id="reconnectNow" data-i18n="dialog.reconnectNow"
+                    class="button-control button-control_primary
+                            button-control_center"></button>`
+                    : "";
+
+        $(document).on('click', '#reconnectNow', () => {
+            APP.ConferenceUrl.reload();
+        });
+
         return `<div class="inlay">
-                    <span data-i18n='dialog.conferenceReloadTitle'
+                    <span data-i18n=${title}
                           class='reload_overlay_title'></span>
-                    <span data-i18n='dialog.conferenceReloadMsg'
+                    <span data-i18n=${message}
                           class='reload_overlay_msg'></span>
                     <div>
                         <div id='reloadProgressBar'
@@ -47,6 +76,7 @@ class PageReloadOverlayImpl extends Overlay{
                             class='reload_overlay_msg'>
                         </span>
                     </div>
+                    ${button}
                 </div>`;
     }
 
@@ -122,7 +152,8 @@ export default {
     show(timeoutSeconds, isNetworkFailure, reason) {
 
         if (!overlay) {
-            overlay = new PageReloadOverlayImpl(timeoutSeconds);
+            overlay
+                = new PageReloadOverlayImpl(timeoutSeconds, isNetworkFailure);
         }
         // Log the page reload event
         if (!this.isVisible()) {
@@ -132,6 +163,7 @@ export default {
             APP.conference.logEvent(
                 'page.reload', undefined /* value */, reason /* label */);
         }
-        overlay.show();
+        // If it's a network failure we enable the light overlay.
+        overlay.show(isNetworkFailure);
     }
 };