diff --git a/assets/js/channels.js b/assets/js/channels.js index 1e35aaa30..700e864d8 100644 --- a/assets/js/channels.js +++ b/assets/js/channels.js @@ -135,18 +135,57 @@ Genie.initWebChannel = function(channel = Genie.Settings.webchannels_default_rou return WebChannel } -function displayAlert(content = 'Can not reach the server - please reload the page') { - let elemid = 'wsconnectionalert'; - if (document.getElementById(elemid) === null) { - let elem = document.createElement('div'); - elem.id = elemid; - elem.style.cssText = 'position:absolute;width:100%;opacity:0.5;z-index:100;background:#e63946;color:#f1faee;text-align:center;'; - elem.innerHTML = content + 'Reload'; - setTimeout(() => { - document.body.appendChild(elem); - document.location.href = '#' + elemid; - }, Genie.Settings.webchannels_server_gone_alert_timeout); - } +let wsconnectionalert_elemid = 'wsconnectionalert'; + +function displayAlert(WebChannel, content = 'Can not reach the server. Trying to reconnect...') { + if (document.getElementById(wsconnectionalert_elemid) !== null || WebChannel.wsconnectionalert_triggered) return; + + let elem = document.createElement('div'); + elem.id = wsconnectionalert_elemid; + elem.style.cssText = 'position:fixed;top:0;width:100%;z-index:100;background:#e63946;color:#f1faee;text-align:center;'; + elem.style.height = '1.8em'; + elem.innerHTML = content; + + let elemspacer = document.createElement('div'); + elemspacer.id = wsconnectionalert_elemid + 'spacer'; + elemspacer.style.height = (Genie.Settings.webchannels_alert_overlay) ? 0 : elem.style.height; + + WebChannel.wsconnectionalert_triggered = true; + + WebChannel.alertTimeout = setTimeout(() => { + if (Genie.Settings.webchannels_show_alert) { + document.body.prepend(elem); + document.body.prepend(elemspacer); + } + if (WebChannel.parent) WebChannel.parent.ws_disconnected = true; + }, Genie.Settings.webchannels_server_gone_alert_timeout); +} + +function deleteAlert(WebChannel) { + WebChannel.wsconnectionalert_triggered = false; + clearInterval(WebChannel.alertTimeout); + if (WebChannel.parent) WebChannel.parent.ws_disconnected = false; + + // if all WebChannels are connected, remove the alert + setTimeout(() => { + for (let i = 0; i < Genie.AllWebChannels.length; i++) { + if (Genie.AllWebChannels[i].wsconnectionalert_triggered) { + console.info('WebChannel ' + i + ' is still disconnected'); + return + } + } + + let elem = document.getElementById(wsconnectionalert_elemid); + let elemspacer = document.getElementById(wsconnectionalert_elemid + 'spacer'); + + if (elem !== null) { + elem.remove(); + } + + if (elemspacer !== null) { + elemspacer.remove(); + } + }, 20); } function newSocketConnection(WebChannel, host = Genie.Settings.websockets_exposed_host) { @@ -252,7 +291,7 @@ function subscription_ready(WebChannel) { f(); } } - + deleteAlert(WebChannel); if (isDev()) console.info('Subscription ready'); }; @@ -265,7 +304,7 @@ function subscribe(WebChannel, trial = 1) { trial++; setTimeout(subscribe.bind(this, WebChannel, trial), Genie.Settings.webchannels_timeout); } else { - displayAlert(); + displayAlert(WebChannel); } };