diff --git a/anonstream/static/anonstream.js b/anonstream/static/anonstream.js index fe30b22..491dd98 100644 --- a/anonstream/static/anonstream.js +++ b/anonstream/static/anonstream.js @@ -8,6 +8,7 @@ const jsmarkup_style_tripcode_display = '' const jsmarkup_info = '
'; const jsmarkup_info_float = ''; +const jsmarkup_info_float_button = ''; const jsmarkup_info_float_viewership = '
'; const jsmarkup_info_float_uptime = '
'; const jsmarkup_info_title = '
'; @@ -55,6 +56,10 @@ const insert_jsmarkup = () => {jsmarkup_info_float_viewership const parent = document.getElementById("info_js"); parent.insertAdjacentHTML("beforeend", jsmarkup_info_float); } + if (document.getElementById("info_js__float__button") === null) { + const parent = document.getElementById("info_js__float"); + parent.insertAdjacentHTML("beforeend", jsmarkup_info_float_button); + } if (document.getElementById("info_js__float__viewership") === null) { const parent = document.getElementById("info_js__float"); parent.insertAdjacentHTML("beforeend", jsmarkup_info_float_viewership); @@ -496,6 +501,13 @@ const on_websocket_message = (event) => { stats_received = new Date(); update_stats(); + // stream reload button + if (stats === null || stream.networkState === stream.NETWORK_LOADING) { + info_button.removeAttribute("data-visible"); + } else { + info_button.dataset.visible = ""; + } + // chat form nonce chat_form_nonce.value = receipt.nonce; @@ -542,14 +554,26 @@ const on_websocket_message = (event) => { case "info": console.log("ws info", receipt); + + // set title if (receipt.title !== undefined) { set_title(receipt.title); } + + // update stats (uptime/viewership) if (receipt.stats !== undefined) { stats = receipt.stats; stats_received = new Date(); update_stats(); } + + // stream reload button + if (stats === null || stream.networkState === stream.NETWORK_LOADING) { + info_button.removeAttribute("data-visible"); + } else { + info_button.dataset.visible = ""; + } + break; case "ack": @@ -655,6 +679,19 @@ const connect_websocket = () => { connect_websocket(); +/* stream reload button */ +const stream = document.getElementById("stream"); +const info_button = document.getElementById("info_js__float__button"); +info_button.addEventListener("click", (event) => { + stream.load(); + info_button.removeAttribute("data-visible"); +}); +stream.addEventListener("error", (event) => { + if (stats !== null) { + info_button.dataset.visible = ""; + } +}); + /* override js-only chat form */ const chat_form = document.getElementById("chat-form_js"); const chat_form_nonce = document.getElementById("chat-form_js__nonce"); diff --git a/anonstream/static/style.css b/anonstream/static/style.css index 99e9a9c..f8d2633 100644 --- a/anonstream/static/style.css +++ b/anonstream/static/style.css @@ -63,6 +63,7 @@ noscript { overflow-y: auto; padding: 0.75ch 1.25ch; height: 100%; + box-sizing: border-box; } #info_js__float { float: right; @@ -71,6 +72,9 @@ noscript { grid-auto-flow: column; grid-gap: 2.5ch; } +#info_js__float__button:not([data-visible]) { + display: none; +} #info_js__float__uptime { font-variant-numeric: tabular-nums; }