Show and update stream uptime in js

anonstream/routes/nojs.py

@@ -2,7 +2,7 @@ from quart import current_app, request, render_template, redirect, url_for, esca
 
 from anonstream.captcha import get_random_captcha_digest_for
 from anonstream.chat import add_chat_message, Rejected
-from anonstream.stream import get_stream_title
+from anonstream.stream import get_stream_title, get_stream_uptime
 from anonstream.user import add_state, pop_state, try_change_appearance, verify, deverify, BadCaptcha
 from anonstream.routes.wrappers import with_user_from, render_template_with_etag
 from anonstream.helpers.chat import get_scrollback
@@ -20,6 +20,7 @@ async def nojs_info(user):
         'nojs_info.html',
         user=user,
         title=get_stream_title(),
+        uptime=get_stream_uptime(),
     )
 
 @current_app.route('/chat/messages.html')

anonstream/static/anonstream.js

@@ -5,8 +5,9 @@ const token = document.body.dataset.token;
 const jsmarkup_style_color = '<style id="style-color"></style>'
 const jsmarkup_style_tripcode_display = '<style id="style-tripcode-display"></style>'
 const jsmarkup_style_tripcode_colors = '<style id="style-tripcode-colors"></style>'
-const jsmarkup_info = '<div id="info_js"></div>';
-const jsmarkup_info_title = '<header id="info_js__title" data-js="true"></header>';
+const jsmarkup_info = '<div id="info_js" data-js="true"></div>';
+const jsmarkup_info_uptime = '<aside id="info_js__uptime"></aside>';
+const jsmarkup_info_title = '<header id="info_js__title"></header>';
 const jsmarkup_chat_messages = '<ol id="chat-messages_js" data-js="true"></ol>';
 const jsmarkup_chat_form = `\
 <form id="chat-form_js" data-js="true" action="/chat" method="post">
@@ -39,6 +40,10 @@ const insert_jsmarkup = () => {
     const parent = document.getElementById("info");
     parent.insertAdjacentHTML("beforeend", jsmarkup_info);
   }
+  if (document.getElementById("info_js__uptime") === null) {
+    const parent = document.getElementById("info_js");
+    parent.insertAdjacentHTML("beforeend", jsmarkup_info_uptime);
+  }
   if (document.getElementById("info_js__title") === null) {
     const parent = document.getElementById("info_js");
     parent.insertAdjacentHTML("beforeend", jsmarkup_info_title);
@@ -60,6 +65,7 @@ const stylesheet_tripcode_colors = document.styleSheets[3];
 
 /* create websocket */
 const info_title = document.getElementById("info_js__title");
+const info_uptime = document.getElementById("info_js__uptime");
 const chat_messages = document.getElementById("chat-messages_js");
 
 const create_chat_message = (object) => {
@@ -310,6 +316,36 @@ const disable_captcha = () => {
   chat_form_captcha_image.removeAttribute("src");
 }
 
+let frozen_uptime = null;
+let frozen_uptime_received = null;
+const set_frozen_uptime = (x) => {
+  frozen_uptime = x;
+  frozen_uptime_received = new Date();
+}
+const update_uptime = () => {
+  if (frozen_uptime_received === null) {
+    return;
+  } else if (frozen_uptime === null) {
+    info_uptime.innerText = "";
+  } else {
+    const frozen_uptime_received_ago = (new Date() - frozen_uptime_received) / 1000;
+    const uptime = Math.round(frozen_uptime + frozen_uptime_received_ago);
+
+    const s = Math.round(uptime % 60);
+    const m = Math.floor(uptime / 60) % 60
+    const h = Math.floor(uptime / 3600);
+
+    const ss = s.toString().padStart(2, "0");
+    if (uptime < 3600) {
+      info_uptime.innerText = `${m}:${ss}`;
+    } else {
+      const mm = m.toString().padStart(2, "0");
+      info_uptime.innerText = `${h}:${mm}:${ss}`;
+    }
+  }
+}
+setInterval(update_uptime, 1000); // always update uptime
+
 const on_websocket_message = (event) => {
   //console.log("websocket message", event);
   const receipt = JSON.parse(event.data);
@@ -322,6 +358,8 @@ const on_websocket_message = (event) => {
       console.log("ws init", receipt);
 
       info_title.innerText = receipt.title;
+      set_frozen_uptime(receipt.uptime);
+      update_uptime();
 
       chat_form_nonce.value = receipt.nonce;
       receipt.digest === null ? disable_captcha() : enable_captcha(receipt.digest);

anonstream/static/style.css

@@ -64,6 +64,10 @@ noscript {
   padding: 1ch 1.5ch;
   height: 100%;
 }
+#info_js__uptime {
+  float: right;
+  font-size: 11pt;
+}
 #info_js__title {
   font-size: 18pt;
   overflow-wrap: anywhere;

anonstream/templates/nojs_form.html

@@ -56,12 +56,12 @@
       box-sizing: border-box;
       align-items: center;
     }
-    #notice h1 {
+    #notice h2 {
       margin: 0;
       font-size: 18pt;
       line-height: 1.25;
     }
-    #notice.verbose h1 {
+    #notice.verbose h2 {
       font-size: 14pt;
     }
 
@@ -202,7 +202,7 @@
   <div id="appearance"></div>
   {% if state.notice %}
     <a id="notice" {% if state.verbose %}class="verbose" {% endif %}{% if prefer_chat_form %}href="#chat"{% else %}href="#appearance"{% endif %}>
-      <header><h1>{{ state.notice }}</h1></header>
+      <header><h2>{{ state.notice }}</h2></header>
       <small>Click to dismiss</small>
     </a>
   {% endif %}

anonstream/templates/nojs_info.html

@@ -9,13 +9,19 @@
       font-family: sans-serif;
       color: #ddd;
     }
-    #title {
+    #uptime {
+      float: right;
+      font-size: 11pt;
+    }
+    #title > h1 {
+      margin: 0;
       font-size: 18pt;
       overflow-wrap: anywhere;
     }
   </style>
 </head>
 <body>
-  <header id="title">{{ title }}</header>
+  <aside id="uptime">{{ uptime }}</aside>
+  <header id="title"><h1>{{ title }}</h1></header>
 </body>
 </html>