Add 'Reload stream' button in js

anonstream/static/anonstream.js

@@ -8,6 +8,7 @@ const jsmarkup_style_tripcode_display = '<style id="style-tripcode-display"></st
 const jsmarkup_style_tripcode_colors = '<style id="style-tripcode-colors"></style>'
 const jsmarkup_info = '<div id="info_js" data-js="true"></div>';
 const jsmarkup_info_float = '<aside id="info_js__float"></aside>';
+const jsmarkup_info_float_button = '<button id="info_js__float__button">Reload stream</button>';
 const jsmarkup_info_float_viewership = '<div id="info_js__float__viewership"></div>';
 const jsmarkup_info_float_uptime = '<div id="info_js__float__uptime"></div>';
 const jsmarkup_info_title = '<header id="info_js__title"></header>';
@@ -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");

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