feat: implement PageReloadOverlay

conference.js

@@ -380,7 +380,7 @@ class ConferenceConnector {
             // the app. Both the errors above are unrecoverable from the library
             // perspective.
             room.leave().then(() => connection.disconnect());
-            APP.UI.notifyVideoConferencingNotAvailable();
+            APP.UI.showPageReloadOverlay();
             break;
 
         case ConferenceErrors.CONFERENCE_MAX_USERS:

lang/main.json

@@ -202,7 +202,8 @@
         "detectext": "Error when trying to detect desktopsharing extension.",
         "failtoinstall": "Failed to install desktop sharing extension",
         "failedpermissions": "Failed to obtain permissions to use the local microphone and/or camera.",
-        "serviceUnavailableMsg": "The video conferencing service is currently unavailable. Please try again later!",
+        "conferenceReloadMsg": "Something went wrong we'll try to reload the conference in...",
+        "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",
         "lockMessage": "Failed to lock the conference.",

modules/UI/UI.js

@@ -14,12 +14,12 @@ import Recording from "./recording/Recording";
 import GumPermissionsOverlay
     from './gum_overlay/UserMediaPermissionsGuidanceOverlay';
 
+import PageReloadOverlay from './reload_overlay/PageReloadOverlay';
 import VideoLayout from "./videolayout/VideoLayout";
 import FilmStrip from "./videolayout/FilmStrip";
 import SettingsMenu from "./side_pannels/settings/SettingsMenu";
 import Profile from "./side_pannels/profile/Profile";
 import Settings from "./../settings/Settings";
-import { reload } from '../util/helpers';
 import RingOverlay from "./ring_overlay/RingOverlay";
 import UIErrors from './UIErrors';
 
@@ -1110,23 +1110,8 @@ UI.notifyFocusDisconnected = function (focus, retrySec) {
  * Notify the user that the video conferencing service is badly broken and
  * the page should be reloaded.
  */
-UI.notifyVideoConferencingNotAvailable = function () {
+UI.showPageReloadOverlay = function () {
-    let title = APP.translation.generateTranslationHTML(
+    PageReloadOverlay.show(15 /* will reload in 15 seconds */);
-        'dialog.serviceUnavailable'
-    );
-    let msg = APP.translation.generateTranslationHTML(
-        'dialog.serviceUnavailableMsg'
-    );
-    messageHandler.openDialog(
-        title,
-        msg,
-        true, // persistent
-        [{title: 'retry'}],
-        function () {
-            reload();
-            return false;
-        }
-    );
 };
 
 /**

modules/UI/reload_overlay/PageReloadOverlay.js

@@ -0,0 +1,105 @@
+/* global $, APP, AJS */
+
+import { reload } from '../../util/helpers';
+
+let $overlay;
+
+/**
+ * Conference reload counter in seconds.
+ * @type {number}
+ */
+let timeLeft;
+
+/**
+ * Conference reload timeout in seconds.
+ * @type {number}
+ */
+let timeout;
+
+/**
+ * Internal function that constructs overlay with the warning message and count
+ * down towards the conference reload.
+ */
+function buildReloadOverlayHtml() {
+    $overlay = $(`
+        <div class='overlay_container'>
+            <div class='overlay_content'>
+                <span data-i18n='dialog.serviceUnavailable' 
+                      class='overlay_text_small'></span>
+                <span data-i18n='dialog.conferenceReloadMsg' 
+                      class='overlay_text_small'></span>
+                <div>
+                    <div id='reloadProgressBar' class="aui-progress-indicator">
+                        <span class="aui-progress-indicator-value"></span>
+                    </div>
+                    <span id='reloadSecRemaining' class='overlay_text_small'>
+                    </span>
+                </div>
+            </div>
+        </div>`);
+
+    APP.translation.translateElement($overlay);
+}
+
+/**
+ * Updates the progress indicator position and the label with the time left.
+ */
+function updateDisplay() {
+
+    const timeLeftTxt
+        = APP.translation.translateString(
+            "dialog.conferenceReloadTimeLeft",
+            { seconds: timeLeft });
+    $("#reloadSecRemaining").text(timeLeftTxt);
+
+    const ratio = (timeout-timeLeft)/timeout;
+    AJS.progressBars.update("#reloadProgressBar", ratio);
+}
+
+/**
+ * Starts the reload countdown with the animation.
+ * @param {number} timeoutSeconds how many seconds before the conference
+ * reload will happen.
+ */
+function start(timeoutSeconds) {
+
+    timeLeft = timeout = timeoutSeconds;
+
+    // Initialize displays
+    updateDisplay();
+
+    var intervalId = window.setInterval(function() {
+
+        if (timeLeft >= 1) {
+            timeLeft -= 1;
+            console.info("Reloading in " + timeLeft + " seconds...");
+        }
+
+        updateDisplay();
+
+        if (timeLeft === 0) {
+            console.info("Reloading!");
+            window.clearInterval(intervalId);
+            reload();
+        }
+    }, 1000);
+}
+
+export default {
+    /**
+     * 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.
+     */
+    show(timeoutSeconds) {
+
+        !$overlay && buildReloadOverlayHtml();
+
+        if (!$overlay.parents('body').length) {
+            $overlay.appendTo('body');
+            start(timeoutSeconds);
+        }
+    }
+};