Merge pull request 'add message timestamp on title' (#7) from annie/watch-party:timestamps into main

Reviewed-on: charlotte/watch-party#7

frontend/index.html

@@ -52,6 +52,6 @@
       </form>
     </div>
 
-    <script type="module" src="/main.mjs?v=5"></script>
+    <script type="module" src="/main.mjs?v=6"></script>
   </body>
 </html>

frontend/lib/chat.mjs

@@ -96,6 +96,21 @@ const checkDebounce = (event) => {
   return shouldIgnore;
 };
 
+/**
+ * @returns {string}
+ */
+const getCurrentTimestamp = () => {
+  const t = new Date();
+  return `${matpad(t.getHours())}:${matpad(t.getMinutes())}:${matpad(t.getSeconds())}`;
+};
+
+/**
+ * https://media.discordapp.net/attachments/834541919568527361/931678814751301632/66d2c68c48daa414c96951381665ec2e.png
+ */
+const matpad = (n) => {
+  return ("00" + n).slice(-2);
+};
+
 /**
  * @param {string} eventType
  * @param {string?} user
@@ -105,6 +120,7 @@ const printChatMessage = (eventType, user, content) => {
   const chatMessage = document.createElement("div");
   chatMessage.classList.add("chat-message");
   chatMessage.classList.add(eventType);
+  chatMessage.title = getCurrentTimestamp();
 
   if (user != null) {
     const userName = document.createElement("strong");

frontend/lib/create-session.mjs

@@ -1,4 +1,4 @@
-import { createSession } from "./watch-session.mjs?v=5";
+import { createSession } from "./watch-session.mjs?v=6";
 
 export const setupCreateSessionForm = () => {
   const form = document.querySelector("#create-session-form");

frontend/lib/join-session.mjs

@@ -1,4 +1,4 @@
-import { joinSession } from "./watch-session.mjs?v=5";
+import { joinSession } from "./watch-session.mjs?v=6";
 
 /**
  * @param {HTMLInputElement} field

frontend/lib/watch-session.mjs

@@ -1,5 +1,5 @@
 import { setupVideo } from "./video.mjs?v=5";
-import { setupChat, logEventToChat } from "./chat.mjs?v=5";
+import { setupChat, logEventToChat } from "./chat.mjs?v=6";
 
 /**
  * @param {string} sessionId

frontend/main.mjs

@@ -1,4 +1,4 @@
-import { setupJoinSessionForm } from "./lib/join-session.mjs?v=5";
+import { setupJoinSessionForm } from "./lib/join-session.mjs?v=6";
 
 const main = () => {
   setupJoinSessionForm();