From 2a5b4dde31d315a8375e4219bd2cdb430558fc80 Mon Sep 17 00:00:00 2001 From: paweldomas Date: Wed, 12 Oct 2016 15:11:14 -0500 Subject: [PATCH] feat: implement PageReloadOverlay --- conference.js | 2 +- lang/main.json | 3 +- modules/UI/UI.js | 21 +--- .../UI/reload_overlay/PageReloadOverlay.js | 105 ++++++++++++++++++ 4 files changed, 111 insertions(+), 20 deletions(-) create mode 100644 modules/UI/reload_overlay/PageReloadOverlay.js diff --git a/conference.js b/conference.js index 00c129799..a15cca2c8 100644 --- a/conference.js +++ b/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: diff --git a/lang/main.json b/lang/main.json index 7600f1539..74d9e3ed0 100644 --- a/lang/main.json +++ b/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.", diff --git a/modules/UI/UI.js b/modules/UI/UI.js index a2b6d1f73..ea289baef 100644 --- a/modules/UI/UI.js +++ b/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 () { - let title = APP.translation.generateTranslationHTML( - 'dialog.serviceUnavailable' - ); - let msg = APP.translation.generateTranslationHTML( - 'dialog.serviceUnavailableMsg' - ); - messageHandler.openDialog( - title, - msg, - true, // persistent - [{title: 'retry'}], - function () { - reload(); - return false; - } - ); +UI.showPageReloadOverlay = function () { + PageReloadOverlay.show(15 /* will reload in 15 seconds */); }; /** diff --git a/modules/UI/reload_overlay/PageReloadOverlay.js b/modules/UI/reload_overlay/PageReloadOverlay.js new file mode 100644 index 000000000..21edbbd5e --- /dev/null +++ b/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 = $(` +
+
+ + +
+
+ +
+ + +
+
+
`); + + 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); + } + } +};