Message dates and times in chat

Now using `get_message_for_websocket` when sending an individual message.

anonstream/chat.py

@@ -53,7 +53,7 @@ def add_chat_message(user, nonce, comment, ignore_empty=False):
             seq = last_message['seq'] + 1
     dt = datetime.utcfromtimestamp(timestamp)
     markup = escape(comment)
-    MESSAGES_BY_ID[message_id] = {
+    message = {
         'id': message_id,
         'seq': seq,
         'token': user['token'],
@@ -64,6 +64,7 @@ def add_chat_message(user, nonce, comment, ignore_empty=False):
         'nomarkup': comment,
         'markup': markup,
     }
+    MESSAGES_BY_ID[message_id] = message
 
     while len(MESSAGES_BY_ID) > CONFIG['MAX_CHAT_MESSAGES']:
         MESSAGES_BY_ID.pop(last=False)
@@ -76,10 +77,8 @@ def add_chat_message(user, nonce, comment, ignore_empty=False):
     broadcast(
         USERS,
         payload={
-            'type': 'chat',
+            'type': 'message',
-            'seq': seq,
+            'message': get_message_for_websocket(user, message),
-            'token_hash': user['token_hash'],
-            'markup': markup,
         },
     )
 

anonstream/static/anonstream.js

@@ -70,6 +70,12 @@ const create_chat_message = (object) => {
   chat_message.dataset.seq = object.seq;
   chat_message.dataset.tokenHash = object.token_hash;
 
+  const chat_message_time = document.createElement("time");
+  chat_message_time.classList.add("chat-message__time");
+  chat_message_time.dateTime = `${object.date}T${object.time_seconds}Z`;
+  chat_message_time.title = `${object.date} ${object.time_seconds}`;
+  chat_message_time.innerText = object.time_minutes;
+
   const chat_message_name = document.createElement("span");
   chat_message_name.classList.add("chat-message__name");
   chat_message_name.innerText = get_user_name({user});
@@ -90,6 +96,8 @@ const create_chat_message = (object) => {
   chat_message_markup.classList.add("chat-message__markup");
   chat_message_markup.innerHTML = object.markup;
 
+  chat_message.insertAdjacentElement("beforeend", chat_message_time);
+  chat_message.insertAdjacentHTML("beforeend", " ");
   chat_message.insertAdjacentElement("beforeend", chat_message_name);
   chat_message.insertAdjacentElement("beforeend", chat_message_tripcode_nbsp);
   chat_message.insertAdjacentElement("beforeend", chat_message_tripcode);
@@ -292,7 +300,7 @@ const disable_captcha = () => {
 }
 
 const on_websocket_message = (event) => {
-  console.log("websocket message", event);
+  //console.log("websocket message", event);
   const receipt = JSON.parse(event.data);
   switch (receipt.type) {
     case "error":
@@ -354,9 +362,9 @@ const on_websocket_message = (event) => {
       chat_form_submit.disabled = false;
       break;
 
-    case "chat":
+    case "message":
-      console.log("ws chat", receipt);
+      console.log("ws message", receipt);
-      create_and_add_chat_message(receipt);
+      create_and_add_chat_message(receipt.message);
       chat_messages.scrollTo({
         left: 0,
         top: chat_messages.scrollTopMax,

anonstream/static/style.css

@@ -114,6 +114,11 @@ noscript {
 .chat-message:hover {
   background-color: #434347;
 }
+.chat-message__time {
+  color: #b2b2b3;
+  font-size: 10pt;
+  cursor: help;
+}
 .chat-message__name {
   overflow-wrap: anywhere;
   font-weight: bold;

anonstream/templates/nojs_chat.html

@@ -94,6 +94,11 @@
     .chat-message:hover {
       background-color: #434347;
     }
+    .chat-message__time {
+      color: #b2b2b3;
+      font-size: 10pt;
+      cursor: help;
+    }
     .chat-message__name {
       overflow-wrap: anywhere;
       font-weight: bold;
@@ -126,7 +131,7 @@
     {% for message in messages | reverse %}
       <li class="chat-message">
         {% with user = users_by_token[message.token] %}
-          <span class="chat-message__name" style="color:{{ user.color }};" data-seq="{{ message.seq }}" data-token-hash="{{ user.token_hash }}">{{ user.name or get_default_name(user) }}</span>{% if user.tripcode != none %}<span class="for-tripcode">&nbsp;</span><span class="tripcode for-tripcode" style="background-color:{{ user.tripcode.background_color }};color:{{ user.tripcode.foreground_color }};">{{ user.tripcode.digest }}</span>{% endif %}:&nbsp;<span class="chat-message__markup">{{ message.markup }}</span>
+          <time class="chat-message__time" datetime="{{ message.date }}T{{ message.time_seconds }}Z" title="{{ message.date }} {{ message.time_seconds }}">{{ message.time_minutes }}</time>&nbsp;<span class="chat-message__name" style="color:{{ user.color }};" data-seq="{{ message.seq }}" data-token-hash="{{ user.token_hash }}">{{ user.name or get_default_name(user) }}</span>{% if user.tripcode %}<span class="for-tripcode">&nbsp;</span><span class="tripcode for-tripcode" style="background-color:{{ user.tripcode.background_color }};color:{{ user.tripcode.foreground_color }};">{{ user.tripcode.digest }}</span>{% endif %}:&nbsp;<span class="chat-message__markup">{{ message.markup }}</span>
         {% endwith %}
       </li>
     {% endfor %}