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;
}