From c9488d5ee937d3c2abd35abb594462bf5d6ec66a Mon Sep 17 00:00:00 2001 From: yanas Date: Mon, 5 Dec 2016 23:38:09 -0600 Subject: [PATCH 1/3] 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 acf7c96793..d28e4504bd 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 3a2392c995..5fa0002925 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 9727bd7bec..0e40f293d2 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 c43795a846..2dc1487fda 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 361ce890a0..37d9a87494 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 7a1d1db37d..224b908691 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); } }; From 642fa8d6f8c8f64e007db8945769013104240464 Mon Sep 17 00:00:00 2001 From: yanas Date: Tue, 6 Dec 2016 17:05:32 -0600 Subject: [PATCH 2/3] Fixes some issues pointed out from hristoterezov --- modules/UI/UI.js | 2 +- modules/UI/overlay/Overlay.js | 23 +-- .../UI/reload_overlay/PageReloadOverlay.js | 144 +++++++++--------- 3 files changed, 90 insertions(+), 79 deletions(-) diff --git a/modules/UI/UI.js b/modules/UI/UI.js index fdac5ffd1f..30fbcf58e9 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -17,7 +17,7 @@ import Recording from "./recording/Recording"; import GumPermissionsOverlay from './gum_overlay/UserMediaPermissionsGuidanceOverlay'; -import PageReloadOverlay from './reload_overlay/PageReloadOverlay'; +import * as PageReloadOverlay from './reload_overlay/PageReloadOverlay'; import SuspendedOverlay from './suspended_overlay/SuspendedOverlay'; import VideoLayout from "./videolayout/VideoLayout"; import FilmStrip from "./videolayout/FilmStrip"; diff --git a/modules/UI/overlay/Overlay.js b/modules/UI/overlay/Overlay.js index 37d9a87494..e4559e0b9c 100644 --- a/modules/UI/overlay/Overlay.js +++ b/modules/UI/overlay/Overlay.js @@ -15,13 +15,20 @@ export default class Overlay{ * @type {jQuery} */ this.$overlay = null; + + /** + * Indicates if this overlay should use the light look & feel or the + * standard one. + * @type {boolean} + */ + this.isLightOverlay = false; } /** * 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 + * @protected */ _buildOverlayContent() { return ''; @@ -31,8 +38,9 @@ export default class Overlay{ * * @param isLightOverlay indicates that this will be a light overlay look * and feel. + * @private */ - buildOverlayHtml(isLightOverlay) { + _buildOverlayHtml(isLightOverlay) { let overlayContent = this._buildOverlayContent(); @@ -59,21 +67,18 @@ export default class Overlay{ /** * Template method called just after the overlay is displayed for the first * time. - * @private + * @protected */ _onShow() { // To be overridden by subclasses. } /** - * Shows the overlay dialog adn attaches the underlying HTML representation + * Shows the overlay dialog and attaches the underlying HTML representation * to the DOM. - * - * @param isLightOverlay indicates that this will be a light overlay look - * and feel. */ - show(isLightOverlay) { + show() { - !this.$overlay && this.buildOverlayHtml(isLightOverlay); + !this.$overlay && this._buildOverlayHtml(this.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 224b908691..aec4c5d2be 100644 --- a/modules/UI/reload_overlay/PageReloadOverlay.js +++ b/modules/UI/reload_overlay/PageReloadOverlay.js @@ -1,7 +1,7 @@ /* global $, APP, AJS */ const logger = require("jitsi-meet-logger").getLogger(__filename); -import Overlay from '../overlay/Overlay'; +import Overlay from "../overlay/Overlay"; /** * An overlay dialog which is shown before the conference is reloaded. Shows @@ -12,13 +12,14 @@ 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. + * @param {string} title the title of the overlay message + * @param {string} message the message of the overlay + * @param {string} buttonHtml the button html or an empty string if there's + * no button + * @param {boolean} isLightOverlay indicates if the overlay should be a + * light overlay or a standard one */ - constructor(timeoutSeconds, isNetworkFailure) { + constructor(timeoutSeconds, title, message, buttonHtml, isLightOverlay) { super(); /** * Conference reload counter in seconds. @@ -31,12 +32,10 @@ class PageReloadOverlayImpl extends Overlay{ */ this.timeout = timeoutSeconds; - /** - * Indicates that a network related failure is the reason for the - * reload. - * @type {boolean} - */ - this.isNetworkFailure = isNetworkFailure; + this.title = title; + this.message = message; + this.buttonHtml = buttonHtml; + this.isLightOverlay = isLightOverlay; } /** * Constructs overlay body with the warning message and count down towards @@ -44,27 +43,10 @@ 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} + ${this.buttonHtml}
`; } @@ -97,6 +79,9 @@ class PageReloadOverlayImpl extends Overlay{ * @override */ _onShow() { + $("#reconnectNow").click(() => { + APP.ConferenceUrl.reload(); + }); // Initialize displays this.updateDisplay(); @@ -128,42 +113,63 @@ class PageReloadOverlayImpl extends Overlay{ */ let overlay; -export default { - /** - * Checks whether the page reload overlay has been displayed. - * @return {boolean} true if the page reload overlay is currently - * visible or false otherwise. - */ - isVisible() { +/** + * Checks whether the page reload overlay has been displayed. + * @return {boolean} true if the page reload overlay is currently + * visible or false otherwise. + */ +export function 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. - * @param {boolean} isNetworkFailure true indicates that it's - * caused by network related failure or false when it's - * the infrastructure. - * @param {string} reason a label string identifying the reason for the page - * reload which will be included in details of the log event - */ - show(timeoutSeconds, isNetworkFailure, reason) { +} - if (!overlay) { - overlay - = new PageReloadOverlayImpl(timeoutSeconds, isNetworkFailure); - } - // Log the page reload event - if (!this.isVisible()) { - // 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', undefined /* value */, reason /* label */); - } - // If it's a network failure we enable the light overlay. - overlay.show(isNetworkFailure); +/** + * 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. + * @param {boolean} isNetworkFailure true indicates that it's + * caused by network related failure or false when it's + * the infrastructure. + * @param {string} reason a label string identifying the reason for the page + * reload which will be included in details of the log event + */ +export function show(timeoutSeconds, isNetworkFailure, reason) { + let title; + let message; + let buttonHtml; + let isLightOverlay; + + if (isNetworkFailure) { + title = "dialog.conferenceDisconnectTitle"; + message = "dialog.conferenceDisconnectMsg"; + buttonHtml + = ``; + isLightOverlay = true; } -}; + else { + title = "dialog.conferenceReloadTitle"; + message = "dialog.conferenceReloadMsg"; + buttonHtml = ""; + isLightOverlay = false; + } + + if (!overlay) { + overlay = new PageReloadOverlayImpl(timeoutSeconds, + title, + message, + buttonHtml, + isLightOverlay); + } + // Log the page reload event + if (!this.isVisible()) { + // 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', undefined /* value */, reason /* label */); + } + overlay.show(); +} From ce42d3ab5d0fb5d26f58c426f6afca17f1917c3d Mon Sep 17 00:00:00 2001 From: yanas Date: Wed, 7 Dec 2016 10:24:37 -0600 Subject: [PATCH 3/3] Fixes unnecessary parameter --- modules/UI/overlay/Overlay.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/modules/UI/overlay/Overlay.js b/modules/UI/overlay/Overlay.js index e4559e0b9c..f850c2a5fe 100644 --- a/modules/UI/overlay/Overlay.js +++ b/modules/UI/overlay/Overlay.js @@ -36,16 +36,14 @@ 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. * @private */ - _buildOverlayHtml(isLightOverlay) { + _buildOverlayHtml() { let overlayContent = this._buildOverlayContent(); - let containerClass = isLightOverlay ? "overlay__container-light" - : "overlay__container"; + let containerClass = this.isLightOverlay ? "overlay__container-light" + : "overlay__container"; this.$overlay = $(`
@@ -78,7 +76,7 @@ export default class Overlay{ */ show() { - !this.$overlay && this._buildOverlayHtml(this.isLightOverlay); + !this.$overlay && this._buildOverlayHtml(); if (!this.isVisible()) { this.$overlay.appendTo('body');