From c9488d5ee937d3c2abd35abb594462bf5d6ec66a Mon Sep 17 00:00:00 2001 From: yanas Date: Mon, 5 Dec 2016 23:38:09 -0600 Subject: [PATCH] Separate disconnect overlay. --- css/_mixins.scss | 8 ++++ css/components/_button-control.scss | 4 ++ css/overlay/_overlay.scss | 7 +++- lang/main.json | 3 ++ modules/UI/overlay/Overlay.js | 17 ++++++-- .../UI/reload_overlay/PageReloadOverlay.js | 42 ++++++++++++++++--- 6 files changed, 71 insertions(+), 10 deletions(-) diff --git a/css/_mixins.scss b/css/_mixins.scss index acf7c9679..d28e4504b 100644 --- a/css/_mixins.scss +++ b/css/_mixins.scss @@ -150,4 +150,12 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; +} + +/** + * Creates a semi-transparent background with the given color and alpha + * (opacity) value. + */ +@mixin transparentBg($color, $alpha) { + background-color: rgba(red($color), green($color), blue($color), $alpha); } \ No newline at end of file diff --git a/css/components/_button-control.scss b/css/components/_button-control.scss index 3a2392c99..5fa000292 100644 --- a/css/components/_button-control.scss +++ b/css/components/_button-control.scss @@ -82,4 +82,8 @@ color: $linkHoverFontColor; } } + + &_center { + float: none !important; + } } \ No newline at end of file diff --git a/css/overlay/_overlay.scss b/css/overlay/_overlay.scss index 9727bd7be..0e40f293d 100644 --- a/css/overlay/_overlay.scss +++ b/css/overlay/_overlay.scss @@ -1,5 +1,6 @@ .overlay { - &__container { + &__container, + &__container-light { top: 0; left: 0; width: 100%; @@ -9,6 +10,10 @@ background: $defaultBackground; } + &__container-light { + @include transparentBg($defaultBackground, 0.7); + } + &__content { position: absolute; margin: 0 auto; diff --git a/lang/main.json b/lang/main.json index c43795a84..2dc1487fd 100644 --- a/lang/main.json +++ b/lang/main.json @@ -215,6 +215,9 @@ "failedpermissions": "Failed to obtain permissions to use the local microphone and/or camera.", "conferenceReloadTitle": "Unfortunately, something went wrong", "conferenceReloadMsg": "We're trying to fix this", + "conferenceDisconnectTitle": "You have been disconnected. You may want to check your network connection.", + "conferenceDisconnectMsg": "Reconnecting in...", + "reconnectNow": "Reconnect now", "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", diff --git a/modules/UI/overlay/Overlay.js b/modules/UI/overlay/Overlay.js index 361ce890a..37d9a8749 100644 --- a/modules/UI/overlay/Overlay.js +++ b/modules/UI/overlay/Overlay.js @@ -28,13 +28,19 @@ export default class Overlay{ } /** * Constructs the HTML body of the overlay dialog. + * + * @param isLightOverlay indicates that this will be a light overlay look + * and feel. */ - buildOverlayHtml() { + buildOverlayHtml(isLightOverlay) { let overlayContent = this._buildOverlayContent(); + let containerClass = isLightOverlay ? "overlay__container-light" + : "overlay__container"; + this.$overlay = $(` -
+
${overlayContent}
@@ -61,10 +67,13 @@ export default class Overlay{ /** * Shows the overlay dialog adn attaches the underlying HTML representation * to the DOM. + * + * @param isLightOverlay indicates that this will be a light overlay look + * and feel. */ - show() { + show(isLightOverlay) { - !this.$overlay && this.buildOverlayHtml(); + !this.$overlay && this.buildOverlayHtml(isLightOverlay); if (!this.isVisible()) { this.$overlay.appendTo('body'); diff --git a/modules/UI/reload_overlay/PageReloadOverlay.js b/modules/UI/reload_overlay/PageReloadOverlay.js index 7a1d1db37..224b90869 100644 --- a/modules/UI/reload_overlay/PageReloadOverlay.js +++ b/modules/UI/reload_overlay/PageReloadOverlay.js @@ -12,8 +12,13 @@ class PageReloadOverlayImpl extends Overlay{ * Creates new PageReloadOverlayImpl * @param {number} timeoutSeconds how long the overlay dialog will be * displayed, before the conference will be reloaded. + * @param {boolean} isDisconnect indicates if this reload screen is created + * to indicate a disconnect + * @param {boolean} isNetworkFailure true indicates that it's + * caused by network related failure or false when it's + * the infrastructure. */ - constructor(timeoutSeconds) { + constructor(timeoutSeconds, isNetworkFailure) { super(); /** * Conference reload counter in seconds. @@ -25,6 +30,13 @@ class PageReloadOverlayImpl extends Overlay{ * @type {number} */ this.timeout = timeoutSeconds; + + /** + * Indicates that a network related failure is the reason for the + * reload. + * @type {boolean} + */ + this.isNetworkFailure = isNetworkFailure; } /** * Constructs overlay body with the warning message and count down towards @@ -32,10 +44,27 @@ class PageReloadOverlayImpl extends Overlay{ * @override */ _buildOverlayContent() { + let title = (this.isNetworkFailure) + ? "dialog.conferenceDisconnectTitle" + : "dialog.conferenceReloadTitle"; + let message = (this.isNetworkFailure) + ? "dialog.conferenceDisconnectMsg" + : "dialog.conferenceReloadMsg"; + + let button = (this.isNetworkFailure) + ? `` + : ""; + + $(document).on('click', '#reconnectNow', () => { + APP.ConferenceUrl.reload(); + }); + return `
- -
+ ${button}
`; } @@ -122,7 +152,8 @@ export default { show(timeoutSeconds, isNetworkFailure, reason) { if (!overlay) { - overlay = new PageReloadOverlayImpl(timeoutSeconds); + overlay + = new PageReloadOverlayImpl(timeoutSeconds, isNetworkFailure); } // Log the page reload event if (!this.isVisible()) { @@ -132,6 +163,7 @@ export default { APP.conference.logEvent( 'page.reload', undefined /* value */, reason /* label */); } - overlay.show(); + // If it's a network failure we enable the light overlay. + overlay.show(isNetworkFailure); } };