Nojs uptime counter

anonstream/routes/nojs.py

@@ -37,9 +37,9 @@ async def nojs_info(user):
 
 @current_app.route('/chat/messages.html')
 @with_user_from(request)
-async def nojs_chat(user):
+async def nojs_chat_messages(user):
     return await render_template_with_etag(
-        'nojs_chat.html',
+        'nojs_chat_messages.html',
         user=user,
         users_by_token=USERS_BY_TOKEN,
         messages=get_scrollback(current_app.messages),
@@ -49,15 +49,15 @@ async def nojs_chat(user):
 
 @current_app.route('/chat/messages')
 @with_user_from(request)
-async def nojs_chat_redirect(user):
-    return redirect(url_for('nojs_chat', token=user['token'], _anchor='end'))
+async def nojs_chat_messages_redirect(user):
+    return redirect(url_for('nojs_chat_messages', token=user['token'], _anchor='end'))
 
 @current_app.route('/chat/users.html')
 @with_user_from(request)
-async def nojs_users(user):
+async def nojs_chat_users(user):
     users_by_presence = get_users_by_presence()
     return await render_template_with_etag(
-        'nojs_users.html',
+        'nojs_chat_users.html',
         user=user,
         get_default_name=get_default_name,
         users_watching=users_by_presence[Presence.WATCHING],
@@ -67,12 +67,12 @@ async def nojs_users(user):
 
 @current_app.route('/chat/form.html')
 @with_user_from(request)
-async def nojs_form(user):
+async def nojs_chat_form(user):
     state_id = request.args.get('state', type=int)
     state = pop_state(user, state_id)
     prefer_chat_form = request.args.get('landing') != 'appearance'
     return await render_template(
-        'nojs_form.html',
+        'nojs_chat_form.html',
         user=user,
         state=state,
         prefer_chat_form=prefer_chat_form,
@@ -83,7 +83,7 @@ async def nojs_form(user):
 
 @current_app.post('/chat/form')
 @with_user_from(request)
-async def nojs_form_redirect(user):
+async def nojs_chat_form_redirect(user):
     comment = (await request.form).get('comment', '')
     if len(comment) > CONFIG['CHAT_COMMENT_MAX_LENGTH']:
         comment = ''
@@ -93,7 +93,7 @@ async def nojs_form_redirect(user):
     else:
         state_id = None
 
-    return redirect(url_for('nojs_form', token=user['token'], state=state_id))
+    return redirect(url_for('nojs_chat_form', token=user['token'], state=state_id))
 
 @current_app.post('/chat/message')
 @with_user_from(request)
@@ -128,7 +128,7 @@ async def nojs_submit_message(user):
                 deverify(user)
 
     return redirect(url_for(
-        'nojs_form',
+        'nojs_chat_form',
         token=user['token'],
         landing='chat',
         state=state_id,
@@ -165,7 +165,7 @@ async def nojs_submit_appearance(user):
 
     state_id = add_state(user, notice=notice, verbose=len(errors) > 1)
     return redirect(url_for(
-        'nojs_form',
+        'nojs_chat_form',
         token=user['token'],
         landing='appearance' if errors else 'chat',
         state=state_id,

anonstream/static/anonstream.js

@@ -135,7 +135,7 @@ const create_chat_message = (object) => {
   chat_message.insertAdjacentElement("beforeend", chat_message_name);
   chat_message.insertAdjacentElement("beforeend", chat_message_tripcode_nbsp);
   chat_message.insertAdjacentElement("beforeend", chat_message_tripcode);
-  chat_message.insertAdjacentHTML("beforeend", ": ");
+  chat_message.insertAdjacentHTML("beforeend", ": ");
   chat_message.insertAdjacentElement("beforeend", chat_message_markup);
 
   return chat_message;

anonstream/templates/home.html

@@ -20,15 +20,15 @@
     </header>
     <article id="chat__body">
       <section id="chat__body__messages">
-        <noscript><iframe id="chat-messages_nojs" src="{{ url_for('nojs_chat', token=user.token, _anchor='end') }}" data-js="false"></iframe></noscript>
+        <noscript><iframe id="chat-messages_nojs" src="{{ url_for('nojs_chat_messages', token=user.token, _anchor='end') }}" data-js="false"></iframe></noscript>
       </section>
       <section id="chat__body__users">
         <header id="chat-users-header"><h4>Users in chat</h4></header>
-        <noscript><iframe id="chat-users_nojs" src="{{ url_for('nojs_users', token=user.token) }}" data-js="false"></iframe></noscript>
+        <noscript><iframe id="chat-users_nojs" src="{{ url_for('nojs_chat_users', token=user.token) }}" data-js="false"></iframe></noscript>
       </section>
     </article>
     <section id="chat__form">
-      <noscript><iframe id="chat-form_nojs" src="{{ url_for('nojs_form', token=user.token) }}" data-js="false"></iframe></noscript>
+      <noscript><iframe id="chat-form_nojs" src="{{ url_for('nojs_chat_form', token=user.token) }}" data-js="false"></iframe></noscript>
     </section>
   </aside>
   <nav id="nav">

anonstream/templates/nojs_chat_form.html

@@ -214,7 +214,7 @@
     <div id="chat-form__exit"><a href="#appearance">Settings</a></div>
     {% if digest %}
       <input type="hidden" name="captcha-digest" value="{{ digest }}">
-      <input id="chat-form__captcha-image" type="image" formaction="{{ url_for('nojs_form_redirect', token=user.token) }}" formnovalidate src="{{ url_for('captcha', token=user.token, digest=digest) }}" width="72" height="30" alt="Captcha failed to load" title="Click for a new captcha" tabindex="2">
+      <input id="chat-form__captcha-image" type="image" formaction="{{ url_for('nojs_chat_form_redirect', token=user.token) }}" formnovalidate src="{{ url_for('captcha', token=user.token, digest=digest) }}" width="72" height="30" alt="Captcha failed to load" title="Click for a new captcha" tabindex="2">
       <input id="chat-form__captcha-answer" name="captcha-answer" required placeholder="Captcha" tabindex="3">
     {% endif %}
   </form>

anonstream/templates/nojs_chat_messages.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="refresh" content="4">
-  <meta http-equiv="refresh" content="5; url={{ url_for('nojs_chat_redirect', token=user.token) }}">
+  <meta http-equiv="refresh" content="5; url={{ url_for('nojs_chat_messages_redirect', token=user.token) }}">
   <style>
     html {
       height: 100%;
@@ -130,7 +130,7 @@
   <div id="end"></div>
   <div id="notimeout"></div>
   <aside id="timeout">
-    <a class="button" href="{{ url_for('nojs_chat_redirect', token=user.token) }}">
+    <a class="button" href="{{ url_for('nojs_chat_messages_redirect', token=user.token) }}">
       <header>Timed out</header>
       <small>Click to refresh</small>
     </a>
@@ -142,7 +142,7 @@
           <time class="chat-message__time" datetime="{{ message.date }}T{{ message.time_seconds }}Z" title="{{ message.date }} {{ message.time_seconds }}">{{ message.time_minutes }}</time>
           {{- '&nbsp;' | safe -}}
           {{ appearance(user, name_class='chat-message__name', tag_class='chat-message__name__tag') }}
-          {{- ':&nbsp;' | safe -}}
+          {{- ': ' -}}
           <span class="chat-message__markup">{{ message.markup }}</span>
         {% endwith %}
       </li>
@@ -152,7 +152,7 @@
     <a class="button" href="#notimeout">Hide timeout notice</a>
   </aside>
   <aside id="timeout-alt">
-    <a class="button" href="{{ url_for('nojs_chat_redirect', token=user.token) }}">Click to refresh</a>
+    <a class="button" href="{{ url_for('nojs_chat_messages_redirect', token=user.token) }}">Click to refresh</a>
   </aside>
 </body>
 </html>

anonstream/templates/nojs_info.html

@@ -25,6 +25,99 @@
     #float__uptime {
       font-variant-numeric: tabular-nums;
     }
+    #uptime-static[data-hidden], #uptime-static__label {
+      display: none;
+    }
+
+    {% if uptime < 360000 %}
+      #s0::before, #s1::before,
+      #m0::before, #m1::before,
+      #h0::before, #h1::before {
+        animation-timing-function: step-end;
+        animation-delay: {{ -uptime }}s;
+        animation-iteration-count: infinite;
+        content: "";
+      }
+      #m0::after, #h0::after {
+        content: ":";
+      }
+      #s0::before {
+        animation-name: tick10;
+        animation-duration: 10s;
+      }
+      #s1::before {
+        animation-name: tick6;
+        animation-duration: 60s;
+      }
+      #m0::before {
+        animation-name: tick10;
+        animation-duration: 600s;
+      }
+      #m1::before {
+        animation-name: tick6;
+        animation-duration: 3600s;
+      }
+      #h0::before {
+        animation-name: tick10;
+        animation-duration: 36000s;
+      }
+      #h1::before {
+        animation-name: tick10;
+        animation-duration: 360000s;
+      }
+      #m1, #h0, #h1 {
+        display: inline-block;
+        animation: appear step-end both;
+      }
+      #m1 {
+        animation-duration: {{ 600 - uptime }}s;
+      }
+      #h0 {
+        animation-duration: {{ 3600 - uptime }}s;
+      }
+      #h1 {
+        animation-duration: {{ 36000 - uptime }}s;
+      }
+      #uptime-dynamic-overflow {
+        animation: appear step-end {{ 360000 - uptime }}s backwards;
+      }
+      #uptime-dynamic {
+        animation: disappear step-end {{ 360000 - uptime }}s forwards;
+      }
+      @keyframes appear {
+        from {
+          width: 0;
+          visibility: hidden;
+        }
+      }
+      @keyframes disappear {
+        to {
+          height: 0;
+          opacity: 0;
+        }
+      }
+      @keyframes tick6 {
+        00.0000% { content: "0"; }
+        16.6667% { content: "1"; }
+        33.3333% { content: "2"; }
+        50.0000% { content: "3"; }
+        66.6667% { content: "4"; }
+        83.3333% { content: "5"; }
+      }
+      @keyframes tick10 {
+        00% { content: "0"; }
+        10% { content: "1"; }
+        20% { content: "2"; }
+        30% { content: "3"; }
+        40% { content: "4"; }
+        50% { content: "5"; }
+        60% { content: "6"; }
+        70% { content: "7"; }
+        80% { content: "8"; }
+        90% { content: "9"; }
+      }
+    {% endif %}
+
     #title > h1 {
       margin: 0;
       font-size: 18pt;
@@ -43,7 +136,38 @@
         </form>
       {% endif %}
       <div id="float__viewership">{{ viewership }} viewers</div>
-      <div id="float__uptime">{{ uptime }}</div>
+      <div id="float__uptime">
+        <div id="uptime-static"{% if uptime < 360000 %} data-hidden=""{% endif %}>
+          <span id="uptime-static__label">Uptime:</span>
+          <span>
+            {%- if uptime >= 3600 -%}
+              {{- (uptime // 3600) | int -}}
+              {{- ':' -}}
+              {{- '%02.0f' | format(uptime % 3600 // 60) -}}
+            {%- else -%}
+              {{- uptime % 3600 // 60 | int -}}
+            {%- endif -%}
+            {{- ':' -}}
+            {{- '%02.0f' | format(uptime % 60) -}}
+          </span>
+        </div>
+        {% if uptime < 360000 %}
+          <div id="uptime-dynamic">
+            <span id="h1"></span>
+            {{- '' -}}
+            <span id="h0"></span>
+            {{- '' -}}
+            <span id="m1"></span>
+            {{- '' -}}
+            <span id="m0"></span>
+            {{- '' -}}
+            <span id="s1"></span>
+            {{- '' -}}
+            <span id="s0"></span>
+          </div>
+          <div id="uptime-dynamic-overflow">100+ hours</div>
+        {% endif %}
+      </div>
     </aside>
   {% endif %}
   <header id="title"><h1>{{ title }}</h1></header>