Merge pull request #1008 from jitsi/page_reload_overlay

Page reload overlay

app.js

@@ -24,6 +24,7 @@ import RoomnameGenerator from './modules/util/RoomnameGenerator';
 import UI from "./modules/UI/UI";
 import settings from "./modules/settings/Settings";
 import conference from './conference';
+import ConferenceUrl from './modules/URL/ConferenceUrl';
 import API from './modules/API/API';
 
 import UIEvents from './service/UI/UIEvents';
@@ -47,6 +48,18 @@ function pushHistoryState(roomName, URL) {
     return null;
 }
 
+/**
+ * Replaces current history state(replaces the URL displayed by the browser).
+ * @param {string} newUrl the URL string which is to be displayed by the browser
+ * to the user.
+ */
+function replaceHistoryState (newUrl) {
+    if (window.history
+        && typeof window.history.replaceState === 'function') {
+        window.history.replaceState({}, document.title, newUrl);
+    }
+}
+
 /**
  * Builds and returns the room name.
  */
@@ -82,6 +95,12 @@ const APP = {
     UI,
     settings,
     conference,
+    /**
+     * After the APP has been initialized provides utility methods for dealing
+     * with the conference room URL(address).
+     * @type ConferenceUrl
+     */
+    ConferenceUrl : null,
     connection: null,
     API,
     init () {
@@ -107,6 +126,10 @@ function setTokenData() {
 
 function init() {
     setTokenData();
+    // Initialize the conference URL handler
+    APP.ConferenceUrl = new ConferenceUrl(window.location);
+    // Clean up the URL displayed by the browser
+    replaceHistoryState(APP.ConferenceUrl.getInviteUrl());
     var isUIReady = APP.UI.start();
     if (isUIReady) {
         APP.conference.init({roomName: buildRoomName()}).then(function () {

conference.js

@@ -329,10 +329,6 @@ class ConferenceConnector {
             }
             break;
 
-        case ConferenceErrors.VIDEOBRIDGE_NOT_AVAILABLE:
-            APP.UI.notifyBridgeDown();
-            break;
-
             // not enough rights to create conference
         case ConferenceErrors.AUTHENTICATION_REQUIRED:
             // schedule reconnect to check if someone else created the room
@@ -367,6 +363,10 @@ class ConferenceConnector {
             }
             break;
 
+            // FIXME FOCUS_DISCONNECTED is confusing event name.
+            // What really happens there is that the library is not ready yet,
+            // because Jicofo is not available, but it is going to give
+            // it another try.
         case ConferenceErrors.FOCUS_DISCONNECTED:
             {
                 let [focus, retrySec] = params;
@@ -375,8 +375,17 @@ class ConferenceConnector {
             break;
 
         case ConferenceErrors.FOCUS_LEFT:
+        case ConferenceErrors.VIDEOBRIDGE_NOT_AVAILABLE:
+            // Log the page reload event
+            // 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');
+            // FIXME the conference should be stopped by the library and not by
+            // the app. Both the errors above are unrecoverable from the library
+            // perspective.
             room.leave().then(() => connection.disconnect());
-            APP.UI.notifyFocusLeft();
+            APP.UI.showPageReloadOverlay();
             break;
 
         case ConferenceErrors.CONFERENCE_MAX_USERS:

css/_variables.scss

@@ -84,8 +84,9 @@ $sidebarWidth: 200px;
  */
 $tooltipsZ: 901;
 $toolbarZ: 900;
-$overlayZ: 800;
+$overlayZ: 902;
 $notificationZ: 1012;
+$ringingZ: 800;
 
 /**
  * Font Colors TODO: Change colors when general dialogs are implemented.

css/main.scss

@@ -38,6 +38,7 @@
 @import 'toastr';
 @import 'base';
 @import 'overlay/overlay';
+@import 'reload_overlay/reload_overlay';
 @import 'modals/dialog';
 @import 'modals/feedback/feedback';
 @import 'videolayout_default';

css/overlay/_overlay.scss

@@ -1,48 +1,30 @@
-.overlay {
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: $overlayZ;
-    background: #21B9FC; /* Old browsers */
-    opacity: 0.75;
-    display: block;
-}
-
-.overlay_transparent {
-    background: rgba(22, 185, 252, .9);
-}
-
 .overlay_container {
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
     position: fixed;
     z-index: $overlayZ;
+    background: rgba(22, 185, 252, .9);
 }
 
 .overlay_content {
     color: #fff;
-    font-weight: normal;
-    font-size: 20px;
     text-align: center;
     width: 400px;
     height: 250px;
     top: 50%;
     left: 50%;
-    position:absolute;
+    position: absolute;
     margin-top: -125px;
     margin-left: -200px;
 }
 
-
 .overlay_text_small {
+    display: block;
     font-size: 18px;
 }
 
 .overlay_icon {
-    position: relative;
-    z-index: 1013;
-    float: none;
     font-size: 100px;
 }

css/reload_overlay/_reload_overlay.scss

@@ -0,0 +1,17 @@
+.reload_overlay_title {
+    display: block;
+    font-size: 16px;
+    line-height: 20px;
+}
+
+.reload_overlay_msg {
+    display: block;
+    font-size: 12px;
+    line-height: 30px;
+}
+
+#reloadProgressBar {
+    width: 180px;
+    margin: 5px auto;
+}
+

css/ringing/_ringing.scss

@@ -5,7 +5,7 @@
     width: 100%;
     height: 100%;
     position: fixed;
-    z-index: $overlayZ;
+    z-index: $ringingZ;
     background: linear-gradient(transparent, #000);
     opacity: 0.8;
 

lang/main.json

@@ -202,8 +202,9 @@
         "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.",
-        "bridgeUnavailable": "Jitsi Videobridge is currently unavailable. Please try again later!",
-        "jicofoUnavailable": "Jicofo is currently unavailable. Please try again later!",
+        "conferenceReloadTitle": "Unfortunately, something went wrong",
+        "conferenceReloadMsg": "We're trying to fix this",
+        "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';
 
@@ -195,13 +195,6 @@ UI.notifyConferenceDestroyed = function (reason) {
     messageHandler.openDialog(title, reason, true, {}, () => false);
 };
 
-/**
- * Notify user that Jitsi Videobridge is not accessible.
- */
- UI.notifyBridgeDown = function () {
-    messageHandler.showError("dialog.error", "dialog.bridgeUnavailable");
-};
-
 /**
  * Show chat error.
  * @param err the Error
@@ -265,19 +258,6 @@ UI.setLocalRaisedHandStatus = (raisedHandStatus) => {
  */
 UI.initConference = function () {
     let id = APP.conference.getMyUserId();
-
-    // Do not include query parameters in the invite URL
-    // "https:" + "//" + "example.com:8888" + "/SomeConference1245"
-    var inviteURL = window.location.protocol + "//" +
-        window.location.host + window.location.pathname;
-
-    this.emitEvent(UIEvents.INVITE_URL_INITIALISED, inviteURL);
-
-    // Clean up the URL displayed by the browser
-    if (window.history && typeof window.history.replaceState === 'function') {
-        window.history.replaceState({}, document.title, inviteURL);
-    }
-
     // Add myself to the contact list.
     UI.ContactList.addContact(id, true);
 
@@ -1119,25 +1099,11 @@ UI.notifyFocusDisconnected = function (focus, retrySec) {
 };
 
 /**
- * Notify user that focus left the conference so page should be reloaded.
+ * Notify the user that the video conferencing service is badly broken and
+ * the page should be reloaded.
  */
-UI.notifyFocusLeft = function () {
-    let title = APP.translation.generateTranslationHTML(
-        'dialog.serviceUnavailable'
-    );
-    let msg = APP.translation.generateTranslationHTML(
-        'dialog.jicofoUnavailable'
-    );
-    messageHandler.openDialog(
-        title,
-        msg,
-        true, // persistent
-        [{title: 'retry'}],
-        function () {
-            reload();
-            return false;
-        }
-    );
+UI.showPageReloadOverlay = function () {
+    PageReloadOverlay.show(15 /* will reload in 15 seconds */);
 };
 
 /**
@@ -1475,6 +1441,18 @@ UI.hideRingOverLay = function () {
     FilmStrip.toggleFilmStrip(true);
 };
 
+/**
+ * Indicates if any the "top" overlays are currently visible. The check includes
+ * the call overlay, GUM permissions overlay and a page reload overlay.
+ *
+ * @returns {*|boolean} {true} if the overlay is visible, {false} otherwise
+ */
+UI.isOverlayVisible = function () {
+    return RingOverlay.isVisible()
+        || PageReloadOverlay.isVisible()
+        || GumPermissionsOverlay.isVisible();
+};
+
 /**
  * Indicates if the ring overlay is currently visible.
  *

modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js

@@ -1,29 +1,50 @@
-/* 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 = $(`
-        <div class='overlay_container'>
-            <div class='overlay overlay_transparent' />
-            <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 overlay_text_small'></span>
-            </div>
-        </div>`);
+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 `
+            <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.
+     * @return {boolean} <tt>true</tt> if the overlay is visible
+     * or <tt>false</tt> otherwise.
+     */
+    isVisible () {
+        return overlay && overlay.isVisible();
+    },
     /**
      * Shows browser-specific overlay with guidance how to proceed with
      * gUM prompt.
@@ -31,9 +52,10 @@ export default {
      *      guidance overlay.
      */
     show(browser) {
-        !$overlay && buildOverlayHtml(browser);
-
-        !$overlay.parents('body').length && $overlay.appendTo('body');
+        if (!overlay) {
+            overlay = new GUMOverlayImpl(browser);
+        }
+        overlay.show();
     },
 
     /**
@@ -41,6 +63,6 @@ export default {
      * gUM prompt.
      */
     hide() {
-        $overlay && $overlay.detach();
+        overlay && overlay.hide();
     }
 };

modules/UI/invite/Invite.js

@@ -14,6 +14,7 @@ const ConferenceEvents = JitsiMeetJS.events.conference;
 class Invite {
     constructor(conference) {
         this.conference = conference;
+        this.inviteUrl = APP.ConferenceUrl.getInviteUrl();
         this.createRoomLocker(conference);
         this.registerListeners();
     }
@@ -48,11 +49,6 @@ class Invite {
         APP.UI.addListener( UIEvents.INVITE_CLICKED,
                             () => { this.openLinkDialog(); });
 
-        APP.UI.addListener( UIEvents.INVITE_URL_INITIALISED,
-                            (inviteUrl) => {
-                                this.updateInviteUrl(inviteUrl);
-                            });
-
         APP.UI.addListener( UIEvents.PASSWORD_REQUIRED,
             () => {
                 this.setLockedFromElsewhere(true);
@@ -172,14 +168,6 @@ class Invite {
         }
     }
 
-    /**
-     * Updates the room invite url.
-     */
-    updateInviteUrl (newInviteUrl) {
-        this.inviteUrl = newInviteUrl;
-        this.updateView();
-    }
-
     /**
      * Helper method for encoding
      * Invite URL

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

@@ -0,0 +1,122 @@
+/* global $, APP, AJS */
+
+import Overlay from '../overlay/Overlay';
+
+/**
+ * An overlay dialog which is shown before the conference is reloaded. Shows
+ * a warning message and counts down towards the reload.
+ */
+class PageReloadOverlayImpl extends Overlay{
+    /**
+     * Creates new <tt>PageReloadOverlayImpl</tt>
+     * @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 `
+            <span data-i18n='dialog.conferenceReloadTitle' 
+                  class='reload_overlay_title'></span>
+            <span data-i18n='dialog.conferenceReloadMsg' 
+                  class='reload_overlay_msg'></span>
+            <div>
+                <div id='reloadProgressBar' class="aui-progress-indicator">
+                    <span class="aui-progress-indicator-value"></span>
+                </div>
+                <span id='reloadSecRemaining' class='reload_overlay_msg'>
+                </span>
+            </div>`;
+    }
+
+    /**
+     * 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.");
+    }
+}
+
+/**
+ * Holds the page reload overlay instance.
+ *
+ * {@type PageReloadOverlayImpl}
+ */
+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() {
+        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.
+     */
+    show(timeoutSeconds) {
+
+        if (!overlay) {
+            overlay = new PageReloadOverlayImpl(timeoutSeconds);
+        }
+        overlay.show();
+    }
+};

modules/UI/toolbars/ToolbarToggler.js

@@ -34,9 +34,10 @@ function hideToolbar(force) { // eslint-disable-line no-unused-vars
     clearTimeout(toolbarTimeoutObject);
     toolbarTimeoutObject = null;
 
-    if (Toolbar.isHovered()
-            || APP.UI.isRingOverlayVisible()
-            || SideContainerToggler.isVisible()) {
+    if (force !== true &&
+            (Toolbar.isHovered()
+                || APP.UI.isRingOverlayVisible()
+                || SideContainerToggler.isVisible())) {
         toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout);
     } else {
         Toolbar.hide();

modules/UI/util/MessageHandler.js

@@ -333,7 +333,7 @@ var messageHandler = {
                      messageArguments, options) {
 
         // If we're in ringing state we skip all toaster notifications.
-        if(!notificationsEnabled || APP.UI.isRingOverlayVisible())
+        if(!notificationsEnabled || APP.UI.isOverlayVisible())
             return;
 
         var displayNameSpan = '<span class="nickname" ';

modules/URL/ConferenceUrl.js

@@ -0,0 +1,73 @@
+/* global console */
+
+import { redirect } from '../util/helpers';
+
+/**
+ * The modules stores information about the URL used to start the conference and
+ * provides utility methods for dealing with conference URL and reloads.
+ */
+export default class ConferenceUrl {
+    /**
+     * Initializes the module.
+     *
+     * @param location an object which stores provides the info about conference
+     * URL(would be 'window.location' for the Web app). The params below are
+     * described based on the following example URL:
+     *
+     * https://example.com:8888/SomeConference1245?opt=1#somehash
+     *
+     * @param location.href full URL with all parameters, would be the whole URL
+     * from the example string above.
+     *
+     * @param location.host the host part of the URL, 'example.com' from
+     * the sample URL above.
+     *
+     * @param location.pathname the path part of the URL, would be
+     * '/SomeConference1245' from the example above.
+     *
+     * @param location.protocol the protocol part of the URL, would be 'https:'
+     * from the sample URL.
+     */
+    constructor(location) {
+        /**
+         * Stores the original conference room URL with all parameters.
+         * Example:
+         * https://example.com:8888/SomeConference1245?jwt=a5sbc2#blablahash
+         * @type {string}
+         */
+        this.originalURL = location.href;
+        /**
+         * A simplified version of the conference URL stripped out of
+         * the parameters which should be used for sending invites.
+         * Example:
+         * https://example.com:8888/SomeConference1245
+         * @type {string}
+         */
+        this.inviteURL
+            = location.protocol + "//" + location.host + location.pathname;
+        console.info("Stored original conference URL: " + this.originalURL);
+        console.info("Conference URL for invites: " + this.inviteURL);
+    }
+    /**
+     * Obtains the conference invite URL.
+     * @return {string} the URL pointing o the conference which is mean to be
+     * used to invite new participants.
+     */
+    getInviteUrl() {
+        return this.inviteURL;
+    }
+    /**
+     * Obtains full conference URL with all original parameters.
+     * @return {string} the original URL used to open the current conference.
+     */
+    getOriginalUrl() {
+        return this.originalURL;
+    }
+    /**
+     * Reloads the conference using original URL with all of the parameters.
+     */
+    reload() {
+        console.info("Reloading the conference using URL: " + this.originalURL);
+        redirect(this.originalURL);
+    }
+}

modules/util/helpers.js

@@ -20,6 +20,15 @@ export function reload () {
     window.location.reload();
 }
 
+/**
+ * Redirects to new URL.
+ * @param {string} url the URL pointing to the location where the user should
+ * be redirected to.
+ */
+export function redirect (url) {
+    window.location.replace(url);
+}
+
 /**
  * Prints the error and reports it to the global error handler.
  * @param e {Error} the error

service/UI/UIEvents.js

@@ -145,11 +145,6 @@ export default {
      */
     DISPLAY_NAME_CHANGED: "UI.display_name_changed",
 
-    /**
-     * Indicates that the invite url has been initialised.
-     */
-    INVITE_URL_INITIALISED: "UI.invite_url_initialised",
-
     /**
      * Indicates that a password is required for the call.
      */