diff --git a/modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js b/modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js index d25880ba2..11c9fd2d3 100644 --- a/modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js +++ b/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 - * gUM prompt. - * @param {string} browser - name of browser for which to construct the - * guidance overlay. + * An overlay with guidance how to proceed with gUM prompt. */ -function buildOverlayHtml(browser) { - $overlay = $(` -
-
- - - -
-
`); +class GUMOverlayImpl extends Overlay { - 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 ` + + + `; + } } +/** + * Stores GUM overlay instance. + * @type {GUMOverlayImpl} + */ +let overlay; + export default { /** * Checks whether the overlay is currently visible. @@ -29,7 +43,7 @@ export default { * or false 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); - - !this.isVisible() && $overlay.appendTo('body'); + if (!overlay) { + overlay = new GUMOverlayImpl(browser); + } + overlay.show(); }, /** @@ -48,6 +63,6 @@ export default { * gUM prompt. */ hide() { - $overlay && $overlay.detach(); + overlay && overlay.hide(); } }; diff --git a/modules/UI/overlay/Overlay.js b/modules/UI/overlay/Overlay.js new file mode 100644 index 000000000..babdc587a --- /dev/null +++ b/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 Overlay 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 = $(` +
+
+ ${overlayContent} +
+
`); + + APP.translation.translateElement(this.$overlay); + } + /** + * Checks whether the page reload overlay has been displayed. + * @return {boolean} true if the page reload overlay is currently + * visible or false 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(); + } +} diff --git a/modules/UI/reload_overlay/PageReloadOverlay.js b/modules/UI/reload_overlay/PageReloadOverlay.js index cf58e67b2..03c1368ec 100644 --- a/modules/UI/reload_overlay/PageReloadOverlay.js +++ b/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. - * @type {number} + * An overlay dialog which is shown before the conference is reloaded. Shows + * a warning message and counts down towards the reload. */ -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 = $(` -
-
- - -
-
- -
- - +class PageReloadOverlayImpl extends Overlay{ + /** + * Creates new PageReloadOverlayImpl + * @param {number} timeoutSeconds how long the overlay dialog will be + * displayed, before the conference will be reloaded. + */ + constructor(timeoutSeconds) { + super(); + /** + * Conference reload counter in seconds. + * @type {number} + */ + this.timeLeft = timeoutSeconds; + /** + * Conference reload timeout in seconds. + * @type {number} + */ + this.timeout = timeoutSeconds; + } + /** + * Constructs overlay body with the warning message and count down towards + * the conference reload. + * @override + */ + _buildOverlayContent() { + return ` + + +
+
+
-
-
`); + + +
`; + } - 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() { - - 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."); -} +let overlay; export default { /** @@ -91,7 +103,7 @@ export default { * visible or false 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 (!this.isVisible()) { - $overlay.appendTo('body'); - start(timeoutSeconds); + if (!overlay) { + overlay = new PageReloadOverlayImpl(timeoutSeconds); } + overlay.show(); } };