ref(Overlay): introduce base class

modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js

@@ -1,27 +1,41 @@
-/* global $, APP */
+/* global */
 
-let $overlay;
+import Overlay from '../overlay/Overlay';
 
 /**
- * Internal function that constructs overlay with guidance how to proceed with
+ * An overlay with guidance how to proceed with gUM prompt.
- * gUM prompt.
- * @param {string} browser - name of browser for which to construct the
- *      guidance overlay.
  */
-function buildOverlayHtml(browser) {
+class GUMOverlayImpl extends Overlay {
-    $overlay = $(`
-        <div class='overlay_container'>
-            <div class='overlay_content'>
-                <span class="overlay_icon icon-microphone"></span>
-                <span class="overlay_icon icon-camera"></span>
-                <span data-i18n='[html]userMedia.${browser}GrantPermissions' 
-                      class='overlay_text_small'></span>
-            </div>
-        </div>`);
 
-    APP.translation.translateElement($overlay);
+    /**
+     * Constructs overlay with guidance how to proceed with gUM prompt.
+     * @param {string} browser - name of browser for which to construct the
+     *     guidance overlay.
+     * @override
+     */
+    constructor(browser) {
+        super();
+        this.browser = browser;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    _buildOverlayContent() {
+        return `
+            <span class="overlay_icon icon-microphone"></span>
+            <span class="overlay_icon icon-camera"></span>
+            <span data-i18n='[html]userMedia.${this.browser}GrantPermissions' 
+                  class='overlay_text_small'></span>`;
+    }
 }
 
+/**
+ * Stores GUM overlay instance.
+ * @type {GUMOverlayImpl}
+ */
+let overlay;
+
 export default {
     /**
      * Checks whether the overlay is currently visible.
@@ -29,7 +43,7 @@ export default {
      * or <tt>false</tt> otherwise.
      */
     isVisible () {
-        return $overlay && $overlay.parents('body').length > 0;
+        return overlay && overlay.isVisible();
     },
     /**
      * Shows browser-specific overlay with guidance how to proceed with
@@ -38,9 +52,10 @@ export default {
      *      guidance overlay.
      */
     show(browser) {
-        !$overlay && buildOverlayHtml(browser);
+        if (!overlay) {
-
+            overlay = new GUMOverlayImpl(browser);
-        !this.isVisible() && $overlay.appendTo('body');
+        }
+        overlay.show();
     },
 
     /**
@@ -48,6 +63,6 @@ export default {
      * gUM prompt.
      */
     hide() {
-        $overlay && $overlay.detach();
+        overlay && overlay.hide();
     }
 };

modules/UI/overlay/Overlay.js

@@ -0,0 +1,82 @@
+/* global $, APP */
+
+/**
+ * Base class for overlay components - the components which are displayed on
+ * top of the application with semi-transparent background covering the whole
+ * screen.
+ */
+export default class Overlay{
+    /**
+     * Creates new <tt>Overlay</tt> instance.
+     */
+    constructor() {
+        /**
+         *
+         * @type {jQuery}
+         */
+        this.$overlay = null;
+    }
+    /**
+     * 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
+     */
+    _buildOverlayContent() {
+        return '';
+    }
+    /**
+     * Constructs the HTML body of the overlay dialog.
+     */
+    buildOverlayHtml() {
+
+        let overlayContent = this._buildOverlayContent();
+
+        this.$overlay = $(`
+            <div class='overlay_container'>
+                <div class='overlay_content'>
+                    ${overlayContent}
+                </div>
+            </div>`);
+
+        APP.translation.translateElement(this.$overlay);
+    }
+    /**
+     * 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() {
+        return this.$overlay && this.$overlay.parents('body').length > 0;
+    }
+    /**
+     * Template method called just after the overlay is displayed for the first
+     * time.
+     * @private
+     */
+    _onShow() {
+        // To be overridden by subclasses.
+    }
+    /**
+     * Shows the overlay dialog adn attaches the underlying HTML representation
+     * to the DOM.
+     */
+    show() {
+
+        !this.$overlay && this.buildOverlayHtml();
+
+        if (!this.isVisible()) {
+            this.$overlay.appendTo('body');
+            this._onShow();
+        }
+    }
+
+    /**
+     * Hides the overlay dialog and detaches it's HTML representation from
+     * the DOM.
+     */
+    hide() {
+        this.$overlay && this.$overlay.detach();
+    }
+}

modules/UI/reload_overlay/PageReloadOverlay.js

@@ -1,88 +1,100 @@
 /* global $, APP, AJS */
 
-let $overlay;
+import Overlay from '../overlay/Overlay';
 
 /**
- * Conference reload counter in seconds.
+ * An overlay dialog which is shown before the conference is reloaded. Shows
- * @type {number}
+ * a warning message and counts down towards the reload.
  */
-let timeLeft;
+class PageReloadOverlayImpl extends Overlay{
-
+    /**
-/**
+     * Creates new <tt>PageReloadOverlayImpl</tt>
- * Conference reload timeout in seconds.
+     * @param {number} timeoutSeconds how long the overlay dialog will be
- * @type {number}
+     * displayed, before the conference will be reloaded.
- */
+     */
-let timeout;
+    constructor(timeoutSeconds) {
-
+        super();
-/**
+        /**
- * Internal function that constructs overlay with the warning message and count
+         * Conference reload counter in seconds.
- * down towards the conference reload.
+         * @type {number}
- */
+         */
-function buildReloadOverlayHtml() {
+        this.timeLeft = timeoutSeconds;
-    $overlay = $(`
+        /**
-        <div class='overlay_container'>
+         * Conference reload timeout in seconds.
-            <div class='overlay_content'>
+         * @type {number}
-                <span data-i18n='dialog.serviceUnavailable' 
+         */
-                      class='overlay_text_small'></span>
+        this.timeout = timeoutSeconds;
-                <span data-i18n='dialog.conferenceReloadMsg' 
+    }
-                      class='overlay_text_small'></span>
+    /**
-                <div>
+     * Constructs overlay body with the warning message and count down towards
-                    <div id='reloadProgressBar' class="aui-progress-indicator">
+     * the conference reload.
-                        <span class="aui-progress-indicator-value"></span>
+     * @override
-                    </div>
+     */
-                    <span id='reloadSecRemaining' class='overlay_text_small'>
+    _buildOverlayContent() {
-                    </span>
+        return `
+            <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>
-            </div>
+                <span id='reloadSecRemaining' class='overlay_text_small'>
-        </div>`);
+                </span>
+            </div>`;
+    }
 
-    APP.translation.translateElement($overlay);
+    /**
+     * Updates the progress indicator position and the label with the time left.
+     */
+    updateDisplay() {
+
+        const timeLeftTxt
+            = APP.translation.translateString(
+                "dialog.conferenceReloadTimeLeft",
+                { seconds: this.timeLeft });
+        $("#reloadSecRemaining").text(timeLeftTxt);
+
+        const ratio = (this.timeout - this.timeLeft) / this.timeout;
+        AJS.progressBars.update("#reloadProgressBar", ratio);
+    }
+
+    /**
+     * Starts the reload countdown with the animation.
+     * @override
+     */
+    _onShow() {
+
+        // Initialize displays
+        this.updateDisplay();
+
+        var intervalId = window.setInterval(function() {
+
+            if (this.timeLeft >= 1) {
+                this.timeLeft -= 1;
+            }
+
+            this.updateDisplay();
+
+            if (this.timeLeft === 0) {
+                window.clearInterval(intervalId);
+                APP.ConferenceUrl.reload();
+            }
+        }.bind(this), 1000);
+
+        console.info(
+            "The conference will be reloaded after "
+                + this.timeLeft + " seconds.");
+    }
 }
 
 /**
- * Updates the progress indicator position and the label with the time left.
+ * Holds the page reload overlay instance.
+ *
+ * {@type PageReloadOverlayImpl}
  */
-function updateDisplay() {
+let overlay;
-
-    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;
-        }
-
-        updateDisplay();
-
-        if (timeLeft === 0) {
-            window.clearInterval(intervalId);
-            APP.ConferenceUrl.reload();
-        }
-    }, 1000);
-
-    console.info(
-        "The conference will be reloaded after " + timeLeft + " seconds.");
-}
 
 export default {
     /**
@@ -91,7 +103,7 @@ export default {
      * visible or <tt>false</tt> otherwise.
      */
     isVisible() {
-        return $overlay && $overlay.parents('body').length > 0;
+        return overlay && overlay.isVisible();
     },
     /**
      * Shows the page reload overlay which will do the conference reload after
@@ -102,11 +114,9 @@ export default {
      */
     show(timeoutSeconds) {
 
-        !$overlay && buildReloadOverlayHtml();
+        if (!overlay) {
-
+            overlay = new PageReloadOverlayImpl(timeoutSeconds);
-        if (!this.isVisible()) {
-            $overlay.appendTo('body');
-            start(timeoutSeconds);
         }
+        overlay.show();
     }
 };