add linkification and time and join chips

frontend/lib/chat.mjs

@@ -4,9 +4,7 @@ import {
   setPlaying,
 } from "./watch-session.mjs?v=048af96";
 import { emojify, findEmojis } from "./emojis.mjs?v=048af96";
-
-let nickname = "";
-let kisses = {};
+import { linkify } from "./links.mjs";
 
 function setCaretPosition(elem, caretPos) {
   if (elem.createTextRange) {
@@ -38,6 +36,7 @@ const setupChatboxEvents = (socket) => {
   };
   async function autocomplete(fromListTimeout) {
     if (autocompleting) return;
+    try {
       clearInterval(showListTimer);
       emojiAutocomplete.textContent = "";
       autocompleting = true;
@@ -109,6 +108,9 @@ const setupChatboxEvents = (socket) => {
         }
       }
       autocompleting = false;
+    } catch (e) {
+      autocompleting = false;
+    }
   }
   messageInput.addEventListener("input", () => autocomplete());
   messageInput.addEventListener("selectionchange", () => autocomplete());
@@ -187,24 +189,6 @@ const setupChatboxEvents = (socket) => {
             );
             handled = true;
             break;
-          case "/votekiss":
-		    if(kisses[args]&&kisses[args][nickname])
-              printChatMessage(
-                "vote-kiss",
-                "/votekiss",
-                "b57fdc",
-                document.createTextNode("you already voted to kiss " + args)
-              );
-			else
-              printChatMessage(
-                "vote-kiss",
-                "/votekiss",
-                "b57fdc",
-                document.createTextNode("you voted to kiss " + args)
-              );
-            handled = false;
-            // we also handle this on receive
-            break;
           case "/help":
             const helpMessageContent = document.createElement("span");
             helpMessageContent.innerHTML =
@@ -212,8 +196,7 @@ const setupChatboxEvents = (socket) => {
               "&emsp;<code>/help</code> - display this help message<br>" +
               "&emsp;<code>/ping [message]</code> - ping all viewers<br>" +
               "&emsp;<code>/sync</code> - resyncs you with other viewers<br>" +
-              "&emsp;<code>/shrug</code> - appends ¯\\_(ツ)_/¯ to your message<br>" +
-              "&emsp;<code>/votekiss</code> - like votekick but gay";
+              "&emsp;<code>/shrug</code> - appends ¯\\_(ツ)_/¯ to your message";
 
             printChatMessage(
               "command-message",
@@ -246,17 +229,9 @@ const setupChatboxEvents = (socket) => {
 /**
  * @param {WebSocket} socket
  */
-export const setupChat = async (socket, _nickname) => {
-  nickname = _nickname; // We need this for commands
+export const setupChat = async (socket) => {
   document.querySelector("#chatbox-container").style["display"] = "flex";
   setupChatboxEvents(socket);
-
-  window.addEventListener("keydown", (event) => {
-    try {
-      const isSelectionEmpty = window.getSelection().toString().length === 0;
-      if (event.code.match(/Key\w/) && isSelectionEmpty) messageInput.focus();
-    } catch (_err) {}
-  });
 };
 
 const addToChat = (node) => {
@@ -350,31 +325,6 @@ const formatTime = (ms) => {
   }:${seconds < 10 ? "0" + seconds : seconds}`;
 };
 
-function handleClientCommand(content, user) {
-  let handled = false;
-  if (content.startsWith("/")) {
-    const command = content.toLowerCase().match(/^\/\S+/)[0];
-    const args = content.slice(command.length).trim();
-    switch (command) {
-      case "/votekiss":
-        kisses[args] = kisses[args] || {};
-        kisses[args][user] = true;
-        if (Object.keys(kisses[args]).length >= 3) {
-          printChatMessage(
-            "user-kissed",
-            args,
-            "ff6094",
-            document.createTextNode("was kissed 💋")
-          );
-          kisses[args] = {};
-        }
-        handled = true;
-        break;
-    }
-  }
-  return handled;
-}
-
 export const logEventToChat = async (event) => {
   if (checkDebounce(event)) {
     return;
@@ -397,15 +347,12 @@ export const logEventToChat = async (event) => {
         event.colour,
         document.createTextNode("left")
       );
-      for (let kissed in kisses) delete kisses[kissed][event.user];
       break;
     }
     case "ChatMessage": {
       const messageContent = document.createElement("span");
       messageContent.classList.add("message-content");
-      if (handleClientCommand(event.data, event.user)) break;
-      messageContent.append(...(await emojify(event.data)));
-
+      messageContent.append(...(await linkify(event.data, emojify)));
       printChatMessage(
         "chat-message",
         event.user,
@@ -484,10 +431,7 @@ const beep = () => {
   oscillator.stop(context.currentTime + 0.22);
 };
 
-let viewers = [];
-
-export const updateViewerList = (_viewers) => {
-  viewers = _viewers;
+export const updateViewerList = (viewers) => {
   const listContainer = document.querySelector("#viewer-list");
 
   // empty out the current list

frontend/lib/emojis.mjs

@@ -5,7 +5,10 @@ export async function emojify(text) {
   text.replace(/:([^\s:]+):/g, (match, name, index) => {
     if (last <= index)
       nodes.push(document.createTextNode(text.slice(last, index)));
-    let emoji = emojis[name.toLowerCase()[0]].find((e) => e[0] == name);
+    let emoji;
+    try {
+      emoji = emojis[name.toLowerCase()[0]].find((e) => e[0] == name);
+    } catch (e) {}
     if (!emoji) {
       nodes.push(document.createTextNode(match));
     } else {

frontend/lib/links.mjs

@@ -0,0 +1,115 @@
+export async function linkify(
+  text,
+  next = async (t) => [document.createTextNode(t)]
+) {
+  let last = 0;
+  let nodes = [];
+  let promise = Promise.resolve();
+  // matching non-urls isn't a problem, we use the browser's url parser to filter them out
+  text.replace(
+    /[^:/?#\s]+:\/\/\S+/g,
+    (match, index) =>
+      (promise = promise.then(async () => {
+        if (last <= index) nodes.push(...(await next(text.slice(last, index))));
+        let url;
+        try {
+          url = new URL(match);
+          if (url.protocol === "javascript:") throw new Error();
+        } catch (e) {
+          url = null;
+        }
+        if (!url) {
+          nodes.push(...(await next(match)));
+        } else {
+          let s;
+          if (
+            url.origin == location.origin &&
+            url.pathname == "/" &&
+            url.hash.length > 1
+          ) {
+            nodes.push(
+              Object.assign(document.createElement("a"), {
+                href: url.href,
+                textContent: "Join Session",
+                className: "chip join-chip",
+              })
+            );
+          } else if (
+            url.hostname == "xiv.st" &&
+            (s = url.pathname.match(/(\d?\d).?(\d\d)/))
+          ) {
+            if (s) {
+              const date = new Date();
+              date.setUTCSeconds(0);
+              date.setUTCMilliseconds(0);
+              date.setUTCHours(s[1]), date.setUTCMinutes(s[2]);
+              nodes.push(
+                Object.assign(document.createElement("a"), {
+                  href: url.href,
+                  textContent: date.toLocaleString([], {
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  }),
+                  className: "chip time-chip",
+                  target: "_blank",
+                })
+              );
+            }
+          } else {
+            nodes.push(
+              Object.assign(document.createElement("a"), {
+                href: url.href,
+                textContent: url.href,
+                target: "_blank",
+              })
+            );
+          }
+        }
+        last = index + match.length;
+      }))
+  );
+  await promise;
+  if (last < text.length) nodes.push(...(await next(text.slice(last))));
+  return nodes;
+}
+const emojis = {};
+
+export const emojisLoaded = Promise.all([
+  fetch("/emojis")
+    .then((e) => e.json())
+    .then((a) => {
+      for (let e of a) {
+        const name = e.slice(0, -4),
+          lower = name.toLowerCase();
+        emojis[lower[0]] = emojis[lower[0]] || [];
+        emojis[lower[0]].push([name, ":" + name + ":", e.slice(-4), lower]);
+      }
+    }),
+  fetch("/emojis/unicode.json")
+    .then((e) => e.json())
+    .then((a) => {
+      for (let e of a) {
+        emojis[e[0][0]] = emojis[e[0][0]] || [];
+        emojis[e[0][0]].push([e[0], e[1], null, e[0]]);
+      }
+    }),
+]);
+
+export async function findEmojis(search) {
+  await emojisLoaded;
+  let groups = [[], []];
+  if (search.length < 1) {
+    for (let letter of Object.keys(emojis).sort())
+      for (let emoji of emojis[letter]) {
+        (emoji[1][0] === ":" ? groups[0] : groups[1]).push(emoji);
+      }
+  } else {
+    search = search.toLowerCase();
+    for (let emoji of emojis[search[0]]) {
+      if (search.length == 1 || emoji[3].startsWith(search)) {
+        (emoji[1][0] === ":" ? groups[0] : groups[1]).push(emoji);
+      }
+    }
+  }
+  return [...groups[0], ...groups[1]];
+}

frontend/lib/watch-session.mjs

@@ -220,7 +220,7 @@ export const joinSession = async (nickname, sessionId, colour) => {
 
     setupOutgoingEvents(video, socket);
     setupIncomingEvents(video, socket);
-    setupChat(socket, nickname);
+    setupChat(socket);
   });
   socket.addEventListener("reconnecting", (e) => {
     console.log("Reconnecting...");

frontend/styles.css

@@ -1,4 +1,6 @@
-* {
+*,
+*:before,
+*:after {
   box-sizing: border-box;
 }
 
@@ -17,6 +19,12 @@
       var(--fg-transparent)
     ),
     linear-gradient(var(--bg), var(--bg));
+  --chip-bg: linear-gradient(
+      var(--accent-transparent),
+      var(--accent-transparent)
+    ),
+    linear-gradient(var(--bg), var(--bg));
+  --accent-transparent: rgba(var(--accent-rgb), 0.25);
 }
 
 html {
@@ -58,6 +66,45 @@ a {
   color: var(--accent);
 }
 
+.chip {
+  color: var(--fg);
+  background: var(--chip-bg);
+  text-decoration: none;
+  padding: 0 0.5rem 0 1.45rem;
+  display: inline-flex;
+  position: relative;
+  font-size: 0.9rem;
+  height: 1.125rem;
+  align-items: center;
+  border-radius: 2rem;
+  overflow: hidden;
+}
+
+.chip::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 1.125rem;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background: var(--accent-transparent);
+  background-repeat: no-repeat;
+  background-size: 18px;
+  background-position: center;
+}
+
+.join-chip::before {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTggNXYxNGwxMS03eiIvPjwvc3ZnPg==");
+}
+
+.time-chip::before {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTExLjk5IDJDNi40NyAyIDIgNi40OCAyIDEyczQuNDcgMTAgOS45OSAxMEMxNy41MiAyMiAyMiAxNy41MiAyMiAxMlMxNy41MiAyIDExLjk5IDJ6TTEyIDIwYy00LjQyIDAtOC0zLjU4LTgtOHMzLjU4LTggOC04IDggMy41OCA4IDgtMy41OCA4LTggOHoiLz48cGF0aCBkPSJNMTIuNSA3SDExdjZsNS4yNSAzLjE1Ljc1LTEuMjMtNC41LTIuNjd6Ii8+PC9zdmc+");
+}
+
 label {
   display: block;
 }
@@ -164,6 +211,7 @@ button.small-button {
 
 .chat-message {
   overflow-wrap: break-word;
+  margin-bottom: 0.125rem;
 }
 
 .chat-message > strong,
@@ -171,32 +219,12 @@ button.small-button {
   color: var(--user-color, var(--default-user-color));
 }
 
-/*
-@supports (-webkit-background-clip: text) {
-  .chat-message > strong,
-  #viewer-list strong {
-    background: linear-gradient(var(--fg-transparent), var(--fg-transparent)),
-      linear-gradient(
-        var(--user-color, var(--default-user-color)),
-        var(--user-color, var(--default-user-color))
-      );
-    -webkit-background-clip: text;
-    color: transparent !important;
-  }
-}
-*/
-
 .chat-message.user-join,
 .chat-message.user-leave,
-.chat-message.ping,
-.chat-message.user-kissed {
+.chat-message.ping {
   font-style: italic;
 }
 
-.chat-message.user-kissed {
-  color: #ff6094;
-}
-
 .chat-message.set-time,
 .chat-message.set-playing {
   font-style: italic;
@@ -285,9 +313,11 @@ button.small-button {
   padding: 0.25rem 0.5rem;
   scroll-margin: 0.25rem;
 }
+
 .emoji-option:first-child {
   margin-top: 0.25rem;
 }
+
 .emoji-option:last-child {
   margin-bottom: 0.25rem;
 }