Merge pull request #1184 from jitsi/separate-disconnect-overlay

Separate disconnect overlay

css/_mixins.scss

   overflow: hidden;
   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

             color: $linkHoverFontColor;
         }
     }
+
+    &_center {
+        float: none !important;
+    }
 }

css/overlay/_overlay.scss

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

lang/main.json

         "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/UI.js

 import GumPermissionsOverlay
     from './gum_overlay/UserMediaPermissionsGuidanceOverlay';
 
-import PageReloadOverlay from './reload_overlay/PageReloadOverlay';
+import * as PageReloadOverlay from './reload_overlay/PageReloadOverlay';
 import SuspendedOverlay from './suspended_overlay/SuspendedOverlay';
 import VideoLayout from "./videolayout/VideoLayout";
 import FilmStrip from "./videolayout/FilmStrip";

modules/UI/overlay/Overlay.js

          * @type {jQuery}
          */
         this.$overlay = null;
+
+        /**
+         * Indicates if this overlay should use the light look & feel or the
+         * standard one.
+         * @type {boolean}
+         */
+        this.isLightOverlay = false;
     }
     /**
      * Template method which should be used by subclasses to provide the overlay
      * content. The contents provided by this method are later subject to
      * the translation using {@link APP.translation.translateElement}.
      * @return {string} HTML representation of the overlay dialog contents.
-     * @private
+     * @protected
      */
     _buildOverlayContent() {
         return '';
     }
     /**
      * Constructs the HTML body of the overlay dialog.
+     *
+     * @private
      */
-    buildOverlayHtml() {
+    _buildOverlayHtml() {
 
         let overlayContent = this._buildOverlayContent();
 
+        let containerClass = this.isLightOverlay    ? "overlay__container-light"
+                                                    : "overlay__container";
+
         this.$overlay = $(`
-            <div class='overlay__container'>
+            <div class=${containerClass}>
                 <div class='overlay__content'>
                     ${overlayContent}
                 </div>
     /**
      * Template method called just after the overlay is displayed for the first
      * time.
-     * @private
+     * @protected
      */
     _onShow() {
         // To be overridden by subclasses.
     }
     /**
-     * Shows the overlay dialog adn attaches the underlying HTML representation
+     * Shows the overlay dialog and attaches the underlying HTML representation
      * to the DOM.
      */
     show() {
 
-        !this.$overlay && this.buildOverlayHtml();
+        !this.$overlay && this._buildOverlayHtml();
 
         if (!this.isVisible()) {
             this.$overlay.appendTo('body');

modules/UI/reload_overlay/PageReloadOverlay.js

 /* global $, APP, AJS */
 const logger = require("jitsi-meet-logger").getLogger(__filename);
 
-import Overlay from '../overlay/Overlay';
+import Overlay from "../overlay/Overlay";
 
 /**
  * An overlay dialog which is shown before the conference is reloaded. Shows
      * Creates new <tt>PageReloadOverlayImpl</tt>
      * @param {number} timeoutSeconds how long the overlay dialog will be
      * displayed, before the conference will be reloaded.
+     * @param {string} title the title of the overlay message
+     * @param {string} message the message of the overlay
+     * @param {string} buttonHtml the button html or an empty string if there's
+     * no button
+     * @param {boolean} isLightOverlay indicates if the overlay should be a
+     * light overlay or a standard one
      */
-    constructor(timeoutSeconds) {
+    constructor(timeoutSeconds, title, message, buttonHtml, isLightOverlay) {
         super();
         /**
          * Conference reload counter in seconds.
          * @type {number}
          */
         this.timeout = timeoutSeconds;
+
+        this.title = title;
+        this.message = message;
+        this.buttonHtml = buttonHtml;
+        this.isLightOverlay = isLightOverlay;
     }
     /**
      * Constructs overlay body with the warning message and count down towards
      */
     _buildOverlayContent() {
         return `<div class="inlay">
-                    <span data-i18n='dialog.conferenceReloadTitle'
+                    <span data-i18n=${this.title}
                           class='reload_overlay_title'></span>
-                    <span data-i18n='dialog.conferenceReloadMsg'
+                    <span data-i18n=${this.message}
                           class='reload_overlay_msg'></span>
                     <div>
                         <div id='reloadProgressBar'
                             class='reload_overlay_msg'>
                         </span>
                     </div>
+                    ${this.buttonHtml}
                 </div>`;
     }
 
      * @override
      */
     _onShow() {
+        $("#reconnectNow").click(() => {
+            APP.ConferenceUrl.reload();
+        });
 
         // Initialize displays
         this.updateDisplay();
  */
 let overlay;
 
-export default {
-    /**
-     * Checks whether the page reload overlay has been displayed.
-     * @return {boolean} <tt>true</tt> if the page reload overlay is currently
-     * visible or <tt>false</tt> otherwise.
-     */
-    isVisible() {
+/**
+ * Checks whether the page reload overlay has been displayed.
+ * @return {boolean} <tt>true</tt> if the page reload overlay is currently
+ * visible or <tt>false</tt> otherwise.
+ */
+export function isVisible() {
         return overlay && overlay.isVisible();
-    },
-    /**
-     * Shows the page reload overlay which will do the conference reload after
-     * the given amount of time.
-     *
-     * @param {number} timeoutSeconds how many seconds before the conference
-     * reload will happen.
-     * @param {boolean} isNetworkFailure <tt>true</tt> indicates that it's
-     * caused by network related failure or <tt>false</tt> when it's
-     * the infrastructure.
-     * @param {string} reason a label string identifying the reason for the page
-     * reload which will be included in details of the log event
-     */
-    show(timeoutSeconds, isNetworkFailure, reason) {
-
-        if (!overlay) {
-            overlay = new PageReloadOverlayImpl(timeoutSeconds);
-        }
-        // Log the page reload event
-        if (!this.isVisible()) {
-            // FIXME (CallStats - issue) this event will not make it to
-            // the CallStats, because the log queue is not flushed, before
-            // "fabric terminated" is sent to the backed
-            APP.conference.logEvent(
-                'page.reload', undefined /* value */, reason /* label */);
-        }
-        overlay.show();
+}
+
+/**
+ * Shows the page reload overlay which will do the conference reload after
+ * the given amount of time.
+ *
+ * @param {number} timeoutSeconds how many seconds before the conference
+ * reload will happen.
+ * @param {boolean} isNetworkFailure <tt>true</tt> indicates that it's
+ * caused by network related failure or <tt>false</tt> when it's
+ * the infrastructure.
+ * @param {string} reason a label string identifying the reason for the page
+ * reload which will be included in details of the log event
+ */
+export function show(timeoutSeconds, isNetworkFailure, reason) {
+    let title;
+    let message;
+    let buttonHtml;
+    let isLightOverlay;
+
+    if (isNetworkFailure) {
+        title = "dialog.conferenceDisconnectTitle";
+        message = "dialog.conferenceDisconnectMsg";
+        buttonHtml
+            = `<button id="reconnectNow" data-i18n="dialog.reconnectNow"
+                    class="button-control button-control_primary
+                            button-control_center"></button>`;
+        isLightOverlay = true;
+    }
+    else {
+        title = "dialog.conferenceReloadTitle";
+        message = "dialog.conferenceReloadMsg";
+        buttonHtml = "";
+        isLightOverlay = false;
     }
-};
+
+    if (!overlay) {
+        overlay = new PageReloadOverlayImpl(timeoutSeconds,
+                                            title,
+                                            message,
+                                            buttonHtml,
+                                            isLightOverlay);
+    }
+    // Log the page reload event
+    if (!this.isVisible()) {
+        // FIXME (CallStats - issue) this event will not make it to
+        // the CallStats, because the log queue is not flushed, before
+        // "fabric terminated" is sent to the backed
+        APP.conference.logEvent(
+            'page.reload', undefined /* value */, reason /* label */);
+    }
+    overlay.show();
+}