fix the color input styles on chrome

Default captions to enabled
Textual feedback for personal colour
2022-07-12 20:21:36 +00:00 · 2022-04-29 23:50:35 +01:00 · 2022-04-29 23:41:33 +01:00 · 2022-04-29 23:28:11 +01:00 · 2022-04-29 23:25:31 +01:00 · 2022-04-29 23:24:37 +01:00
17 changed files with 810 additions and 553 deletions
--- a/frontend/create.html
+++ b/frontend/create.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8" />
    <title>watch party :D</title>
-    <link rel="stylesheet" href="/styles.css?v=048af96" />
+    <link rel="stylesheet" href="/styles.css?v=bfdcf2" />
  </head>

  <body>
@ -47,6 +47,6 @@
      </form>
    </div>

-    <script type="module" src="/create.mjs?v=048af96"></script>
+    <script type="module" src="/create.mjs?v=bfdcf2"></script>
  </body>
 </html>
--- a/frontend/create.mjs
+++ b/frontend/create.mjs
@ -1,4 +1,4 @@
-import { setupCreateSessionForm } from "./lib/create-session.mjs?v=048af96";
+import { setupCreateSessionForm } from "./lib/create-session.mjs?v=bfdcf2";

 const main = () => {
  setupCreateSessionForm();
--- a/frontend/emojis/blobcat.png
+++ b/frontend/emojis/blobcat.png
--- a/frontend/index.html
+++ b/frontend/index.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8" />
    <title>watch party :D</title>
-    <link rel="stylesheet" href="/styles.css?v=048af96" />
+    <link rel="stylesheet" href="/styles.css?v=bfdcf2" />
  </head>

  <body>
@ -30,8 +30,10 @@
          required
        />

-        <label for="join-session-colour">Colour:</label>
-        <input type="color" id="join-session-colour" value="#7ed0ff" required />
+        <label id="join-session-colour-label" for="join-session-colour">
+          Personal Colour:
+        </label>
+        <input type="color" id="join-session-colour" value="#ffffff" required />

        <label for="join-session-id">Session ID:</label>
        <input
@ -64,6 +66,19 @@
      </form>
    </div>

-    <script type="module" src="/main.mjs?v=048af96"></script>
+    <script type="module" src="/main.mjs?v=bfdcf2"></script>
+    <script>
+      const updateColourLabel = () => {
+        const colour = document.querySelector("#join-session-colour").value;
+        document.querySelector(
+          "#join-session-colour-label"
+        ).textContent = `Personal Colour: ${colour}`;
+      };
+
+      document
+        .querySelector("#join-session-colour")
+        .addEventListener("input", updateColourLabel);
+      updateColourLabel();
+    </script>
  </body>
 </html>
--- a/frontend/lib/chat.mjs
+++ b/frontend/lib/chat.mjs
@ -2,11 +2,12 @@ import {
  setDebounce,
  setVideoTime,
  setPlaying,
-} from "./watch-session.mjs?v=048af96";
-import { emojify, findEmojis } from "./emojis.mjs?v=048af96";
-
-let nickname = "";
-let kisses = {};
+} from "./watch-session.mjs?v=bfdcf2";
+import { emojify, findEmojis } from "./emojis.mjs?v=bfdcf2";
+import { linkify } from "./links.mjs?v=bfdcf2";
+import { joinSession } from "./watch-session.mjs?v=bfdcf2";
+import { pling } from "./pling.mjs?v=bfdcf2";
+import { state } from "./state.mjs";

 function setCaretPosition(elem, caretPos) {
  if (elem.createTextRange) {
@ -38,77 +39,81 @@ const setupChatboxEvents = (socket) => {
  };
  async function autocomplete(fromListTimeout) {
    if (autocompleting) return;
-    clearInterval(showListTimer);
-    emojiAutocomplete.textContent = "";
-    autocompleting = true;
-    let text = messageInput.value.slice(0, messageInput.selectionStart);
-    const match = text.match(/(:[^\s:]+)?:([^\s:]*)$/);
-    if (!match || match[1]) return (autocompleting = false); // We don't need to autocomplete.
-    const prefix = text.slice(0, match.index);
-    const search = text.slice(match.index + 1);
-    if (search.length < 1 && !fromListTimeout) {
+    try {
+      clearInterval(showListTimer);
+      emojiAutocomplete.textContent = "";
+      autocompleting = true;
+      let text = messageInput.value.slice(0, messageInput.selectionStart);
+      const match = text.match(/(:[^\s:]+)?:([^\s:]{2,})$/);
+      if (!match || match[1]) return (autocompleting = false); // We don't need to autocomplete.
+      const prefix = text.slice(0, match.index);
+      const search = text.slice(match.index + 1);
+      if (search.length < 1 && !fromListTimeout) {
+        autocompleting = false;
+        showListTimer = setTimeout(() => autocomplete(true), 500);
+        return;
+      }
+      const suffix = messageInput.value.slice(messageInput.selectionStart);
+      let selected;
+      const select = (button) => {
+        if (selected) selected.classList.remove("selected");
+        selected = button;
+        button.classList.add("selected");
+      };
+      let results = await findEmojis(search);
+      let yieldAt = performance.now() + 13;
+      for (let i = 0; i < results.length; i += 100) {
+        emojiAutocomplete.append.apply(
+          emojiAutocomplete,
+          results.slice(i, i + 100).map(([name, replaceWith, ext], i) => {
+            const button = Object.assign(document.createElement("button"), {
+              className: "emoji-option",
+              onmousedown: (e) => e.preventDefault(),
+              onclick: () => {
+                messageInput.value = prefix + replaceWith + " " + suffix;
+                setCaretPosition(
+                  messageInput,
+                  (prefix + " " + replaceWith).length
+                );
+              },
+              onmouseover: () => select(button),
+              onfocus: () => select(button),
+              type: "button",
+              title: name,
+            });
+            button.append(
+              replaceWith[0] !== ":"
+                ? Object.assign(document.createElement("span"), {
+                    textContent: replaceWith,
+                    className: "emoji",
+                  })
+                : Object.assign(new Image(), {
+                    loading: "lazy",
+                    src: `/emojis/${name}${ext}`,
+                    className: "emoji",
+                  }),
+              Object.assign(document.createElement("span"), {
+                textContent: name,
+                className: "emoji-name",
+              })
+            );
+            return button;
+          })
+        );
+        if (i == 0 && emojiAutocomplete.children[0]) {
+          emojiAutocomplete.children[0].scrollIntoView();
+          select(emojiAutocomplete.children[0]);
+        }
+        const now = performance.now();
+        if (now > yieldAt) {
+          yieldAt = now + 13;
+          await new Promise((cb) => setTimeout(cb, 0));
+        }
+      }
+      autocompleting = false;
+    } catch (e) {
      autocompleting = false;
-      showListTimer = setTimeout(() => autocomplete(true), 500);
-      return;
    }
-    const suffix = messageInput.value.slice(messageInput.selectionStart);
-    let selected;
-    const select = (button) => {
-      if (selected) selected.classList.remove("selected");
-      selected = button;
-      button.classList.add("selected");
-    };
-    let results = await findEmojis(search);
-    let yieldAt = performance.now() + 13;
-    for (let i = 0; i < results.length; i += 100) {
-      emojiAutocomplete.append.apply(
-        emojiAutocomplete,
-        results.slice(i, i + 100).map(([name, replaceWith, ext], i) => {
-          const button = Object.assign(document.createElement("button"), {
-            className: "emoji-option",
-            onmousedown: (e) => e.preventDefault(),
-            onclick: () => {
-              messageInput.value = prefix + replaceWith + " " + suffix;
-              setCaretPosition(
-                messageInput,
-                (prefix + " " + replaceWith).length
-              );
-            },
-            onmouseover: () => select(button),
-            onfocus: () => select(button),
-            type: "button",
-            title: name,
-          });
-          button.append(
-            replaceWith[0] !== ":"
-              ? Object.assign(document.createElement("span"), {
-                  textContent: replaceWith,
-                  className: "emoji",
-                })
-              : Object.assign(new Image(), {
-                  loading: "lazy",
-                  src: `/emojis/${name}${ext}`,
-                  className: "emoji",
-                }),
-            Object.assign(document.createElement("span"), {
-              textContent: name,
-              className: "emoji-name",
-            })
-          );
-          return button;
-        })
-      );
-      if (i == 0 && emojiAutocomplete.children[0]) {
-        emojiAutocomplete.children[0].scrollIntoView();
-        select(emojiAutocomplete.children[0]);
-      }
-      const now = performance.now();
-      if (now > yieldAt) {
-        yieldAt = now + 13;
-        await new Promise((cb) => setTimeout(cb, 0));
-      }
-    }
-    autocompleting = false;
  }
  messageInput.addEventListener("input", () => autocomplete());
  messageInput.addEventListener("selectionchange", () => autocomplete());
@ -128,7 +133,7 @@ const setupChatboxEvents = (socket) => {
      selected.classList.add("selected");
      selected.scrollIntoView({ scrollMode: "if-needed", block: "nearest" });
    }
-    if (event.key == "Tab") {
+    if (event.key == "Tab" || event.key == "Enter") {
      let selected = document.querySelector(".emoji-option.selected");
      if (!selected) return;
      event.preventDefault();
@ -187,23 +192,10 @@ 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
+          case "/join":
+            state().sessionId = args;
+            joinSession();
+            handled = true;
            break;
          case "/help":
            const helpMessageContent = document.createElement("span");
@ -213,7 +205,7 @@ const setupChatboxEvents = (socket) => {
              "&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>/join [session id]</code> - joins another session";

            printChatMessage(
              "command-message",
@ -246,17 +238,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) => {
@ -319,7 +303,7 @@ const matpad = (n) => {
 * @param {string?} user
 * @param {Node?} content
 */
-const printChatMessage = (eventType, user, colour, content) => {
+export const printChatMessage = (eventType, user, colour, content) => {
  const chatMessage = document.createElement("div");
  chatMessage.classList.add("chat-message");
  chatMessage.classList.add(eventType);
@ -350,31 +334,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 +356,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,
@ -462,32 +418,30 @@ export const logEventToChat = async (event) => {
      }

      printChatMessage("ping", event.user, event.colour, messageContent);
-      beep();
+      pling();
+      if ("Notification" in window) {
+        const title = "watch party :)";
+        const options = {
+          body: event.data
+            ? `${event.user} pinged saying: ${event.data}`
+            : `${event.user} pinged`,
+        };
+        if (Notification.permission === "granted") {
+          new Notification(title, options);
+        } else if (Notification.permission !== "denied") {
+          Notification.requestPermission().then(function (permission) {
+            if (permission === "granted") {
+              new Notification(title, options);
+            }
+          });
+        }
+      }
      break;
    }
  }
 };

-const beep = () => {
-  const context = new AudioContext();
-
-  const gain = context.createGain();
-  gain.connect(context.destination);
-  gain.gain.value = 0.1;
-
-  const oscillator = context.createOscillator();
-  oscillator.connect(gain);
-  oscillator.frequency.value = 520;
-  oscillator.type = "square";
-
-  oscillator.start(context.currentTime);
-  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
--- a/frontend/lib/create-session.mjs
+++ b/frontend/lib/create-session.mjs
@ -1,4 +1,4 @@
-import { createSession } from "./watch-session.mjs?v=048af96";
+import { createSession } from "./watch-session.mjs?v=bfdcf2";

 export const setupCreateSessionForm = () => {
  const form = document.querySelector("#create-session-form");
--- a/frontend/lib/emojis.mjs
+++ b/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 {
@ -29,7 +32,15 @@ export async function emojify(text) {
 const emojis = {};

 export const emojisLoaded = Promise.all([
-  fetch("/emojis")
+  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]]);
+      }
+    }),
+  fetch("/emojos")
    .then((e) => e.json())
    .then((a) => {
      for (let e of a) {
@ -39,14 +50,6 @@ export const emojisLoaded = Promise.all([
        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) {
@ -65,5 +68,5 @@ export async function findEmojis(search) {
      }
    }
  }
-  return [...groups[0], ...groups[1]];
+  return [...groups[1], ...groups[0]];
 }
--- a/frontend/lib/join-session.mjs
+++ b/frontend/lib/join-session.mjs
@ -1,4 +1,5 @@
-import { joinSession } from "./watch-session.mjs?v=048af96";
+import { joinSession } from "./watch-session.mjs?v=bfdcf2";
+import { state } from "./state.mjs";

 /**
 * @param {HTMLInputElement} field
@ -80,11 +81,10 @@ export const setupJoinSessionForm = () => {
    saveNickname(nickname);
    saveColour(colour);
    try {
-      await joinSession(
-        nickname.value,
-        sessionId.value,
-        colour.value.replace(/^#/, "")
-      );
+      state().nickname = nickname.value;
+      state().sessionId = sessionId.value;
+      state().colour = colour.value.replace(/^#/, "");
+      await joinSession();
    } catch (e) {
      alert(e.message);
      button.disabled = false;
--- a/frontend/lib/links.mjs
+++ b/frontend/lib/links.mjs
@ -0,0 +1,121 @@
+import { joinSession } from "./watch-session.mjs?v=bfdcf2";
+import { state } from "./state.mjs";
+
+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"), {
+                textContent: "Join Session",
+                className: "chip join-chip",
+                onclick: () => {
+                  state().sessionId = url.hash.substring(1);
+                  joinSession();
+                },
+              })
+            );
+          } 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]];
+}
--- a/frontend/lib/pling.mjs
+++ b/frontend/lib/pling.mjs
@ -0,0 +1,80 @@
+export const pling = () => {
+  const maxGain = 0.3;
+  const duration = 0.22;
+  const fadeDuration = 0.1;
+  const secondBeepOffset = 0.05;
+  const thirdBeepOffset = 2 * secondBeepOffset;
+
+  const ctx = new AudioContext();
+
+  const firstBeepGain = ctx.createGain();
+  firstBeepGain.connect(ctx.destination);
+  firstBeepGain.gain.setValueAtTime(0.01, ctx.currentTime);
+  firstBeepGain.gain.exponentialRampToValueAtTime(
+    maxGain,
+    ctx.currentTime + fadeDuration
+  );
+  firstBeepGain.gain.setValueAtTime(
+    maxGain,
+    ctx.currentTime + (duration - fadeDuration)
+  );
+  firstBeepGain.gain.exponentialRampToValueAtTime(
+    0.01,
+    ctx.currentTime + duration
+  );
+
+  const firstBeep = ctx.createOscillator();
+  firstBeep.connect(firstBeepGain);
+  firstBeep.frequency.value = 400;
+  firstBeep.type = "sine";
+
+  const secondBeepGain = ctx.createGain();
+  secondBeepGain.connect(ctx.destination);
+  secondBeepGain.gain.setValueAtTime(0.01, ctx.currentTime + secondBeepOffset);
+  secondBeepGain.gain.exponentialRampToValueAtTime(
+    maxGain,
+    ctx.currentTime + secondBeepOffset + fadeDuration
+  );
+  secondBeepGain.gain.setValueAtTime(
+    maxGain,
+    ctx.currentTime + secondBeepOffset + (duration - fadeDuration)
+  );
+  secondBeepGain.gain.exponentialRampToValueAtTime(
+    0.01,
+    ctx.currentTime + secondBeepOffset + duration
+  );
+
+  const secondBeep = ctx.createOscillator();
+  secondBeep.connect(secondBeepGain);
+  secondBeep.frequency.value = 600;
+  secondBeep.type = "sine";
+
+  const thirdBeepGain = ctx.createGain();
+  thirdBeepGain.connect(ctx.destination);
+  thirdBeepGain.gain.setValueAtTime(0.01, ctx.currentTime + thirdBeepOffset);
+  thirdBeepGain.gain.exponentialRampToValueAtTime(
+    maxGain,
+    ctx.currentTime + thirdBeepOffset + fadeDuration
+  );
+  thirdBeepGain.gain.setValueAtTime(
+    maxGain,
+    ctx.currentTime + thirdBeepOffset + (duration - fadeDuration)
+  );
+  thirdBeepGain.gain.exponentialRampToValueAtTime(
+    0.01,
+    ctx.currentTime + thirdBeepOffset + duration
+  );
+
+  const thirdBeep = ctx.createOscillator();
+  thirdBeep.connect(thirdBeepGain);
+  thirdBeep.frequency.value = 900;
+  thirdBeep.type = "sine";
+
+  firstBeep.start(ctx.currentTime);
+  firstBeep.stop(ctx.currentTime + duration);
+  secondBeep.start(ctx.currentTime + secondBeepOffset);
+  secondBeep.stop(ctx.currentTime + (secondBeepOffset + duration));
+  thirdBeep.start(ctx.currentTime + thirdBeepOffset);
+  thirdBeep.stop(ctx.currentTime + (thirdBeepOffset + duration));
+};
+
--- a/frontend/lib/reconnecting-web-socket.mjs
+++ b/frontend/lib/reconnecting-web-socket.mjs
@ -11,6 +11,7 @@ export default class ReconnectingWebSocket {
    this._lastConnect = 0;
    this._socket = null;
    this._unsent = [];
+    this._closing = false;
    this._connect(true);
  }
  _connect(first) {
@ -40,6 +41,7 @@ export default class ReconnectingWebSocket {
    });
  }
  _reconnect() {
+    if (this._closing) return;
    if (this._reconnecting) return;
    this._eventTarget.dispatchEvent(new Event("reconnecting"));
    this._reconnecting = true;
@ -56,6 +58,10 @@ export default class ReconnectingWebSocket {
      this._unsent.push(message);
    }
  }
+  close() {
+    this._closing = true;
+    this._socket.close();
+  }
  addEventListener(...a) {
    return this._eventTarget.addEventListener(...a);
  }
--- a/frontend/lib/state.mjs
+++ b/frontend/lib/state.mjs
@ -0,0 +1,7 @@
+let instance = null;
+export const state = () => {
+  if (!instance) {
+    instance = {};
+  }
+  return instance;
+};
--- a/frontend/lib/video.mjs
+++ b/frontend/lib/video.mjs
@ -51,7 +51,12 @@ const saveCaptionsTrack = (track) => {
 * @param {{name: string, url: string}[]} subtitles
 */
 const createVideoElement = (videoUrl, subtitles) => {
+  const oldVideo = document.getElementById("video");
+  if (oldVideo) {
+    oldVideo.remove();
+  }
  const video = document.createElement("video");
+  video.id = "video";
  video.controls = true;
  video.autoplay = false;
  video.volume = loadVolume();
@ -74,7 +79,7 @@ const createVideoElement = (videoUrl, subtitles) => {
    track.src = url;
    track.kind = "captions";

-    if (id == storedTrack) {
+    if (id == storedTrack || storedTrack == -1) {
      track.default = true;
    }

--- a/frontend/lib/watch-session.mjs
+++ b/frontend/lib/watch-session.mjs
@ -1,21 +1,23 @@
-import { setupVideo } from "./video.mjs?v=048af96";
+import { setupVideo } from "./video.mjs?v=bfdcf2";
 import {
  setupChat,
  logEventToChat,
  updateViewerList,
-} from "./chat.mjs?v=048af96";
+  printChatMessage,
+} from "./chat.mjs?v=bfdcf2";
 import ReconnectingWebSocket from "./reconnecting-web-socket.mjs";
+import { state } from "./state.mjs";

 /**
 * @param {string} sessionId
 * @param {string} nickname
 * @returns {ReconnectingWebSocket}
 */
-const createWebSocket = (sessionId, nickname, colour) => {
+const createWebSocket = () => {
  const wsUrl = new URL(
-    `/sess/${sessionId}/subscribe` +
-      `?nickname=${encodeURIComponent(nickname)}` +
-      `&colour=${encodeURIComponent(colour)}`,
+    `/sess/${state().sessionId}/subscribe` +
+      `?nickname=${encodeURIComponent(state().nickname)}` +
+      `&colour=${encodeURIComponent(state().colour)}`,
    window.location.href
  );
  wsUrl.protocol = "ws" + window.location.protocol.slice(4);
@ -166,19 +168,29 @@ const setupOutgoingEvents = (video, socket) => {
  });
 };

-/**
- * @param {string} nickname
- * @param {string} sessionId
- */
-export const joinSession = async (nickname, sessionId, colour) => {
+export const joinSession = async () => {
+  if (state().activeSession) {
+    if (state().activeSession === state().sessionId) {
+      // we are already in this session, dont rejoin
+      return;
+    }
+    // we are joining a new session from an existing session
+    const messageContent = document.createElement("span");
+    messageContent.appendChild(document.createTextNode("joining new session "));
+    messageContent.appendChild(document.createTextNode(state().sessionId));
+
+    printChatMessage("join-session", "watch-party", "#fffff", messageContent);
+  }
+  state().activeSession = state().sessionId;
+
  // try { // we are handling errors in the join form.
  const genericConnectionError = new Error(
    "There was an issue getting the session information."
  );
-  window.location.hash = sessionId;
+  window.location.hash = state().sessionId;
  let response, video_url, subtitle_tracks, current_time_ms, is_playing;
  try {
-    response = await fetch(`/sess/${sessionId}`);
+    response = await fetch(`/sess/${state().sessionId}`);
  } catch (e) {
    console.error(e);
    throw genericConnectionError;
@ -202,7 +214,12 @@ export const joinSession = async (nickname, sessionId, colour) => {
    throw genericConnectionError;
  }

-  const socket = createWebSocket(sessionId, nickname, colour);
+  if (state().socket) {
+    state().socket.close();
+    state().socket = null;
+  }
+  const socket = createWebSocket();
+  state().socket = socket;
  socket.addEventListener("open", async () => {
    const video = await setupVideo(
      video_url,
@ -211,16 +228,24 @@ export const joinSession = async (nickname, sessionId, colour) => {
      is_playing
    );

+    // TODO: Allow the user to set this somewhere
+    let defaultAllowControls = false;
+    try {
+      defaultAllowControls = localStorage.getItem(
+        "watch-party-default-allow-controls"
+      );
+    } catch (_err) {}
+
    // By default, we should disable video controls if the video is already playing.
    // This solves an issue where Safari users join and seek to 00:00:00 because of
    // outgoing events.
-    if (current_time_ms != 0) {
+    if (current_time_ms != 0 || !defaultAllowControls) {
      video.controls = false;
    }

    setupOutgoingEvents(video, socket);
    setupIncomingEvents(video, socket);
-    setupChat(socket, nickname);
+    setupChat(socket);
  });
  socket.addEventListener("reconnecting", (e) => {
    console.log("Reconnecting...");
--- a/frontend/main.mjs
+++ b/frontend/main.mjs
@ -1,4 +1,4 @@
-import { setupJoinSessionForm } from "./lib/join-session.mjs?v=048af96";
+import { setupJoinSessionForm } from "./lib/join-session.mjs?v=bfdcf2";

 const main = () => {
  setupJoinSessionForm();
--- a/frontend/styles.css
+++ b/frontend/styles.css
@ -1,356 +1,397 @@
-* {
-  box-sizing: border-box;
-}
-
-:root {
-  --bg-rgb: 28, 23, 36;
-  --fg-rgb: 234, 234, 248;
-  --accent-rgb: 181, 127, 220;
-  --fg: rgb(var(--fg-rgb));
-  --bg: rgb(var(--bg-rgb));
-  --default-user-color: rgb(126, 208, 255);
-  --accent: rgb(var(--accent-rgb));
-  --fg-transparent: rgba(var(--fg-rgb), 0.25);
-  --bg-transparent: rgba(var(--bg-rgb), 0.25);
-  --autocomplete-bg: linear-gradient(
-      var(--fg-transparent),
-      var(--fg-transparent)
-    ),
-    linear-gradient(var(--bg), var(--bg));
-}
-
-html {
-  background-color: var(--bg);
-  color: var(--fg);
-  font-size: 1.125rem;
-  font-family: sans-serif;
-}
-
-html,
-body {
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  overscroll-behavior: none;
-  width: 100%;
-  height: 100%;
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-}
-
-video {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-#video-container {
-  flex-grow: 0;
-  flex-shrink: 1;
-  display: none;
-}
-
-a {
-  color: var(--accent);
-}
-
-label {
-  display: block;
-}
-
-input[type="url"],
-input[type="text"] {
-  background: #fff;
-  background-clip: padding-box;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  border-radius: 6px;
-  color: rgba(0, 0, 0, 0.8);
-  display: block;
-
-  margin: 0.5em 0;
-  padding: 0.5em 1em;
-  line-height: 1.5;
-
-  font-family: sans-serif;
-  font-size: 1em;
-  width: 100%;
-
-  resize: none;
-  overflow-x: wrap;
-  overflow-y: scroll;
-}
-
-button {
-  background-color: var(--accent);
-  border: var(--accent);
-  border-radius: 6px;
-  color: #fff;
-  padding: 0.5em 1em;
-  display: inline-block;
-  font-weight: 400;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-
-  font-family: sans-serif;
-  font-size: 1em;
-  width: 100%;
-
-  user-select: none;
-  border: 1px solid rgba(0, 0, 0, 0);
-  line-height: 1.5;
-  cursor: pointer;
-  margin: 0.5em 0;
-}
-
-button:disabled {
-  filter: saturate(0.75);
-  opacity: 0.75;
-  cursor: default;
-}
-
-button.small-button {
-  font-size: 0.75em;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.subtitle-track-group {
-  display: flex;
-}
-
-.subtitle-track-group > * {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  margin-right: 1ch !important;
-}
-
-#pre-join-controls,
-#create-controls {
-  margin: 0;
-  flex-grow: 1;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-#join-session-form,
-#create-session-form {
-  width: 500px;
-  max-width: 100%;
-  padding: 1rem;
-}
-
-#join-session-form > *:first-child,
-#create-session-form > *:first-child {
-  margin-top: 0;
-}
-
-#post-create-message {
-  display: none;
-  width: 100%;
-  font-size: 0.85em;
-}
-
-#chatbox-container {
-  display: none;
-}
-
-.chat-message {
-  overflow-wrap: break-word;
-}
-
-.chat-message > strong,
-#viewer-list strong {
-  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 {
-  font-style: italic;
-}
-
-.chat-message.user-kissed {
-  color: #ff6094;
-}
-
-.chat-message.set-time,
-.chat-message.set-playing {
-  font-style: italic;
-  text-align: right;
-  font-size: 0.85em;
-}
-
-.chat-message.command-message {
-  font-size: 0.85em;
-}
-
-.chat-message.set-time > strong,
-.chat-message.set-playing > strong {
-  color: unset !important;
-}
-
-.emoji {
-  width: 2ch;
-  height: 2ch;
-  object-fit: contain;
-  margin-bottom: -0.35ch;
-}
-
-#chatbox {
-  padding: 0.5em 1em;
-  overflow-y: scroll;
-  flex-shrink: 1;
-  flex-grow: 1;
-}
-
-#viewer-list {
-  padding: 0.5em 1em;
-  /* TODO: turn this into max-height instead of fixed height without breaking the chatbox height */
-  overflow-y: scroll;
-  border-bottom: var(--fg-transparent);
-  border-bottom-style: solid;
-  max-height: 4rem;
-  flex-shrink: 0;
-}
-
-#chatbox-container {
-  background-color: var(--bg);
-  flex-direction: column;
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: 36ch;
-  min-width: 36ch;
-  overflow: hidden;
-}
-
-#chatbox-send {
-  padding: 0 1em;
-  padding-bottom: 0.5em;
-  position: relative;
-}
-
-#chatbox-send > input {
-  font-size: 0.75em;
-  width: 100%;
-}
-
-#emoji-autocomplete {
-  position: absolute;
-  bottom: 3.25rem;
-  background-image: var(--autocomplete-bg);
-  border-radius: 6px;
-  width: calc(100% - 2rem);
-  max-height: 8.5rem;
-  overflow-y: auto;
-  clip-path: inset(0 0 0 0 round 8px);
-}
-
-#emoji-autocomplete:empty {
-  display: none;
-}
-
-.emoji-option {
-  background: transparent;
-  font-size: 0.75rem;
-  text-align: left;
-  margin: 0 0.25rem;
-  border-radius: 4px;
-  width: calc(100% - 0.5rem);
-  display: flex;
-  align-items: center;
-  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;
-}
-
-.emoji-option .emoji {
-  width: 1.25rem;
-  height: 1.25rem;
-  margin: 0 0.5rem 0 0;
-  font-size: 2.25ch;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.emoji-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.emoji-option.selected {
-  background: var(--fg-transparent);
-}
-
-#join-session-colour {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  border: none;
-  padding: 0;
-  border-radius: 6px;
-  overflow: hidden;
-  margin: 0.5em 0;
-  height: 2rem;
-  width: 2.5rem;
-  cursor: pointer;
-}
-
-input[type="color"]::-moz-color-swatch,
-input[type="color"]::-webkit-color-swatch,
-input[type="color"]::-webkit-color-swatch-wrapper {
-  /* This *should* be working in Chrome, but it doesn't for reasons that are beyond me. */
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-
-@media (min-aspect-ratio: 4/3) {
-  body {
-    flex-direction: row;
-  }
-
-  #chatbox-container {
-    height: 100vh !important;
-    flex-grow: 0;
-  }
-
-  #video-container {
-    flex-grow: 1;
-  }
-
-  #chatbox {
-    height: calc(100vh - 5em - 4em) !important;
-  }
-}
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+:root {
+  --bg-rgb: 28, 23, 36;
+  --fg-rgb: 234, 234, 248;
+  --accent-rgb: 181, 127, 220;
+  --fg: rgb(var(--fg-rgb));
+  --bg: rgb(var(--bg-rgb));
+  --default-user-color: rgb(126, 208, 255);
+  --accent: rgb(var(--accent-rgb));
+  --fg-transparent: rgba(var(--fg-rgb), 0.25);
+  --bg-transparent: rgba(var(--bg-rgb), 0.25);
+  --autocomplete-bg: linear-gradient(
+      var(--fg-transparent),
+      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 {
+  background-color: var(--bg);
+  color: var(--fg);
+  font-size: 1.125rem;
+  font-family: sans-serif;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  overscroll-behavior: none;
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+#video-container {
+  flex-grow: 0;
+  flex-shrink: 1;
+  display: none;
+}
+
+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;
+}
+
+input[type="url"],
+input[type="text"] {
+  background: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  color: rgba(0, 0, 0, 0.8);
+  display: block;
+
+  margin: 0.5em 0;
+  padding: 0.5em 1em;
+  line-height: 1.5;
+
+  font-family: sans-serif;
+  font-size: 1em;
+  width: 100%;
+
+  resize: none;
+  overflow-x: wrap;
+  overflow-y: scroll;
+}
+
+button {
+  background-color: var(--accent);
+  border: var(--accent);
+  border-radius: 6px;
+  color: #fff;
+  padding: 0.5em 1em;
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+
+  font-family: sans-serif;
+  font-size: 1em;
+  width: 100%;
+
+  user-select: none;
+  border: 1px solid rgba(0, 0, 0, 0);
+  line-height: 1.5;
+  cursor: pointer;
+  margin: 0.5em 0;
+}
+
+button:disabled {
+  filter: saturate(0.75);
+  opacity: 0.75;
+  cursor: default;
+}
+
+button.small-button {
+  font-size: 0.75em;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.subtitle-track-group {
+  display: flex;
+}
+
+.subtitle-track-group > * {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  margin-right: 1ch !important;
+}
+
+#pre-join-controls,
+#create-controls {
+  margin: 0;
+  flex-grow: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+#join-session-form,
+#create-session-form {
+  width: 500px;
+  max-width: 100%;
+  padding: 1rem;
+}
+
+#join-session-form > *:first-child,
+#create-session-form > *:first-child {
+  margin-top: 0;
+}
+
+#post-create-message {
+  display: none;
+  width: 100%;
+  font-size: 0.85em;
+}
+
+#chatbox-container {
+  display: none;
+}
+
+.chat-message {
+  overflow-wrap: break-word;
+  margin-bottom: 0.125rem;
+}
+
+.chat-message > strong,
+#viewer-list strong {
+  color: var(--user-color, var(--default-user-color));
+}
+
+.chat-message.user-join,
+.chat-message.user-leave,
+.chat-message.ping {
+  font-style: italic;
+}
+
+.chat-message.set-time,
+.chat-message.set-playing,
+.chat-message.join-session {
+  font-style: italic;
+  text-align: right;
+  font-size: 0.85em;
+}
+
+.chat-message.command-message {
+  font-size: 0.85em;
+}
+
+.chat-message.set-time > strong,
+.chat-message.set-playing > strong,
+.chat-message.join-session > strong {
+  color: unset !important;
+}
+
+.emoji {
+  width: 2ch;
+  height: 2ch;
+  object-fit: contain;
+  margin-bottom: -0.35ch;
+}
+
+#chatbox {
+  padding: 0.5em 1em;
+  overflow-y: scroll;
+  flex-shrink: 1;
+  flex-grow: 1;
+}
+
+#viewer-list {
+  padding: 0.5em 1em;
+  /* TODO: turn this into max-height instead of fixed height without breaking the chatbox height */
+  overflow-y: scroll;
+  border-bottom: var(--fg-transparent);
+  border-bottom-style: solid;
+  max-height: 4rem;
+  flex-shrink: 0;
+}
+
+#chatbox-container {
+  background-color: var(--bg);
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 36ch;
+  min-width: 36ch;
+  overflow: hidden;
+}
+
+#chatbox-send {
+  padding: 0 1em;
+  padding-bottom: 0.5em;
+  position: relative;
+}
+
+#chatbox-send > input {
+  font-size: 0.75em;
+  width: 100%;
+}
+
+#emoji-autocomplete {
+  position: absolute;
+  bottom: 3.25rem;
+  background-image: var(--autocomplete-bg);
+  border-radius: 6px;
+  width: calc(100% - 2rem);
+  max-height: 8.5rem;
+  overflow-y: auto;
+  clip-path: inset(0 0 0 0 round 8px);
+}
+
+#emoji-autocomplete:empty {
+  display: none;
+}
+
+.emoji-option {
+  background: transparent;
+  font-size: 0.75rem;
+  text-align: left;
+  margin: 0 0.25rem;
+  border-radius: 4px;
+  width: calc(100% - 0.5rem);
+  display: flex;
+  align-items: center;
+  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;
+}
+
+.emoji-option .emoji {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0 0.5rem 0 0;
+  font-size: 2.25ch;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.emoji-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.emoji-option.selected {
+  background: var(--fg-transparent);
+}
+
+#join-session-colour {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  border: none;
+  padding: 0;
+  border-radius: 6px;
+  overflow: hidden;
+  margin: 0.5em 0;
+  height: 2rem;
+  width: 2.5rem;
+  cursor: pointer;
+}
+
+input[type="color"]::-moz-color-swatch {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+input[type="color"]::-webkit-color-swatch {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+input[type="color"]::-webkit-color-swatch-wrapper {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+@media (min-aspect-ratio: 4/3) {
+  body {
+    flex-direction: row;
+  }
+
+  #chatbox-container {
+    height: 100vh !important;
+    flex-grow: 0;
+  }
+
+  #video-container {
+    flex-grow: 1;
+  }
+
+  #chatbox {
+    height: calc(100vh - 5em - 4em) !important;
+  }
+}
--- a/src/main.rs
+++ b/src/main.rs
@ -62,7 +62,7 @@ async fn main() {
            warb::reply::json(&json!({ "id": session_uuid.to_string(), "session": session_view }))
        });

-    let get_emoji_route = warb::path!("emojis").and_then(get_emoji_list);
+    let get_emoji_route = warb::path!("emojos").and_then(get_emoji_list);

    enum RequestedSession {
        Session(Uuid, WatchSession),
Author	SHA1	Message	Date
easrng	e43184ab49	fix the color input styles on chrome	2022-07-12 20:21:36 +00:00
Charlotte Som	61c456eceb	Default captions to enabled	2022-04-29 23:50:35 +01:00
Charlotte Som	0fc8953a69	Textual feedback for personal colour	2022-04-29 23:41:33 +01:00
Charlotte Som	8e19d7b34d	Don't allow controls by default	2022-04-29 23:28:11 +01:00
Charlotte Som	8717e0dff2	Bust cache	2022-04-29 23:25:31 +01:00
Charlotte Som	bfdcf2afed	Default personal colour to white	2022-04-29 23:24:37 +01:00
Charlotte Som	8531c83574	Sort unicode emoji before emojos, let enter fill an emoji	2022-04-29 23:22:23 +01:00
Charlotte Som	0d555adf21	Remove blobcat.png It should be gitignored anyway	2022-04-29 23:08:10 +01:00
maia arson crimew	b72a7d11d7	bust cache	2022-03-30 16:28:10 +02:00
maia arson crimew	ee93fb84af	turn the beep into a pling	2022-03-30 16:26:34 +02:00
maia arson crimew	40b20b2157	Improve global state handling	2022-03-30 15:02:08 +02:00
maia arson crimew	9a2ac1c432	make pings send browser notifications	2022-03-30 13:45:59 +02:00
maia arson crimew	2197d2b757	make the ping sound a lot more tolerable	2022-03-30 13:28:35 +02:00
maia arson crimew	3d4ea0773d	Clicking the join chip will directly join the session without a reload also adds a /join command (most likely still requires some further debugging)	2022-03-30 13:17:44 +02:00
easrng	2d544620ed	add linkification and time and join chips	2022-03-09 18:38:22 -05:00
easrng	60672a04ef	oh no aaaa	2022-03-08 15:35:12 -05:00
easrng	c8ccb7afc4	fix broken things	2022-03-08 15:34:55 -05:00
easrng	2adc8b9d02	fix emoji name overflow (again) and sorting	2022-03-08 15:33:14 -05:00