jiti-meet/modules/UI/reload_overlay/PageReloadOverlay.js

176 lines
5.6 KiB
JavaScript
Raw Normal View History

2016-10-12 20:11:14 +00:00
/* global $, APP, AJS */
2016-11-11 15:00:54 +00:00
const logger = require("jitsi-meet-logger").getLogger(__filename);
2016-10-12 20:11:14 +00:00
import Overlay from "../overlay/Overlay";
2016-10-12 20:11:14 +00:00
/**
2016-10-21 18:01:30 +00:00
* An overlay dialog which is shown before the conference is reloaded. Shows
* a warning message and counts down towards the reload.
2016-10-12 20:11:14 +00:00
*/
2016-10-21 18:01:30 +00:00
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.
* @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
2016-10-21 18:01:30 +00:00
*/
constructor(timeoutSeconds, title, message, buttonHtml, isLightOverlay) {
2016-10-21 18:01:30 +00:00
super();
/**
* Conference reload counter in seconds.
* @type {number}
*/
this.timeLeft = timeoutSeconds;
/**
* Conference reload timeout in seconds.
* @type {number}
*/
this.timeout = timeoutSeconds;
2016-12-06 05:38:09 +00:00
this.title = title;
this.message = message;
this.buttonHtml = buttonHtml;
this.isLightOverlay = isLightOverlay;
2016-10-21 18:01:30 +00:00
}
/**
* Constructs overlay body with the warning message and count down towards
* the conference reload.
* @override
*/
_buildOverlayContent() {
return `<div class="inlay">
<span data-i18n=${this.title}
class='reload_overlay_title'></span>
<span data-i18n=${this.message}
class='reload_overlay_msg'></span>
<div>
<div id='reloadProgressBar'
class="aui-progress-indicator">
<span class="aui-progress-indicator-value"></span>
</div>
<span id='reloadSecRemaining'
data-i18n="dialog.conferenceReloadTimeLeft"
class='reload_overlay_msg'>
</span>
</div>
${this.buttonHtml}
</div>`;
2016-10-21 18:01:30 +00:00
}
2016-10-12 20:11:14 +00:00
2016-10-21 18:01:30 +00:00
/**
* Updates the progress indicator position and the label with the time left.
*/
updateDisplay() {
2016-10-12 20:11:14 +00:00
APP.translation.translateElement(
$("#reloadSecRemaining"), { seconds: this.timeLeft });
2016-10-12 20:11:14 +00:00
2016-10-21 18:01:30 +00:00
const ratio = (this.timeout - this.timeLeft) / this.timeout;
AJS.progressBars.update("#reloadProgressBar", ratio);
}
2016-10-12 20:11:14 +00:00
2016-10-21 18:01:30 +00:00
/**
* Starts the reload countdown with the animation.
* @override
*/
_onShow() {
$("#reconnectNow").click(() => {
APP.ConferenceUrl.reload();
});
2016-10-12 20:11:14 +00:00
2016-10-21 18:01:30 +00:00
// Initialize displays
this.updateDisplay();
2016-10-12 20:11:14 +00:00
2016-10-21 18:01:30 +00:00
var intervalId = window.setInterval(function() {
2016-10-12 20:11:14 +00:00
2016-10-21 18:01:30 +00:00
if (this.timeLeft >= 1) {
this.timeLeft -= 1;
}
2016-10-12 20:11:14 +00:00
2016-10-21 18:01:30 +00:00
this.updateDisplay();
2016-10-12 20:11:14 +00:00
2016-10-21 18:01:30 +00:00
if (this.timeLeft === 0) {
window.clearInterval(intervalId);
APP.ConferenceUrl.reload();
}
}.bind(this), 1000);
2016-11-11 15:00:54 +00:00
logger.info(
2016-10-21 18:01:30 +00:00
"The conference will be reloaded after "
+ this.timeLeft + " seconds.");
}
2016-10-12 20:11:14 +00:00
}
2016-10-21 18:01:30 +00:00
/**
* Holds the page reload overlay instance.
*
* {@type PageReloadOverlayImpl}
*/
let 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.
*/
export function isVisible() {
2016-10-21 18:01:30 +00:00
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 <tt>true</tt> indicates that it's
* caused by network related failure or <tt>false</tt> 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
= `<button id="reconnectNow" data-i18n="dialog.reconnectNow"
class="button-control button-control_primary
button-control_center"></button>`;
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 */);
2016-10-12 20:11:14 +00:00
}
overlay.show();
}