whoops i forgor a newline

fix votekiss
oh no aaaa
2022-02-18 17:33:19 -05:00 · 2022-02-18 17:28:56 -05:00 · 2022-02-18 17:14:54 -05:00 · 2022-02-18 17:13:49 -05:00 · 2022-02-18 16:52:37 -05:00 · 2022-02-18 14:48:56 -05:00
23 changed files with 2095 additions and 2331 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -3,7 +3,7 @@ root = true
 [*]
 indent_style = space
 indent_size = 2
-end_of_line = lf
+end_of_line = crlf
 charset = utf-8
 trim_trailing_whitespace = false
 insert_final_newline = true
--- 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=4b61c4" />
+    <link rel="stylesheet" href="/styles.css?v=048af96" />
  </head>

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

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

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

  <body>
@ -31,10 +30,8 @@
          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-colour">Colour:</label>
+        <input type="color" id="join-session-colour" value="#7ed0ff" required />

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

-    <script type="module" src="/main.mjs?v=4b61c4"></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>
+    <script type="module" src="/main.mjs?v=048af96"></script>
  </body>
 </html>
--- a/frontend/lib/chat.mjs
+++ b/frontend/lib/chat.mjs
@ -2,13 +2,11 @@ import {
  setDebounce,
  setVideoTime,
  setPlaying,
-  sync,
-} from "./watch-session.mjs?v=4b61c4";
-import { emojify, findEmojis } from "./emojis.mjs?v=4b61c4";
-import { linkify } from "./links.mjs?v=4b61c4";
-import { joinSession } from "./watch-session.mjs?v=4b61c4";
-import { pling } from "./pling.mjs?v=4b61c4";
-import { state } from "./state.mjs";
+} from "./watch-session.mjs?v=048af96";
+import { emojify, findEmojis } from "./emojis.mjs?v=048af96";
+
+let nickname = "";
+let kisses = {};

 function setCaretPosition(elem, caretPos) {
  if (elem.createTextRange) {
@ -40,12 +38,11 @@ const setupChatboxEvents = (socket) => {
  };
  async function autocomplete(fromListTimeout) {
    if (autocompleting) return;
-    try {
    clearInterval(showListTimer);
    emojiAutocomplete.textContent = "";
    autocompleting = true;
    let text = messageInput.value.slice(0, messageInput.selectionStart);
-      const match = text.match(/(:[^\s:]+)?:([^\s:]{2,})$/);
+    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);
@ -112,9 +109,6 @@ const setupChatboxEvents = (socket) => {
      }
    }
    autocompleting = false;
-    } catch (e) {
-      autocompleting = false;
-    }
  }
  messageInput.addEventListener("input", () => autocomplete());
  messageInput.addEventListener("selectionchange", () => autocomplete());
@ -134,7 +128,7 @@ const setupChatboxEvents = (socket) => {
      selected.classList.add("selected");
      selected.scrollIntoView({ scrollMode: "if-needed", block: "nearest" });
    }
-    if (event.key == "Tab" || event.key == "Enter") {
+    if (event.key == "Tab") {
      let selected = document.querySelector(".emoji-option.selected");
      if (!selected) return;
      event.preventDefault();
@ -165,7 +159,14 @@ const setupChatboxEvents = (socket) => {
            handled = true;
            break;
          case "/sync":
-            await sync();
+            const sessionId = window.location.hash.slice(1);
+            const { current_time_ms, is_playing } = await fetch(
+              `/sess/${sessionId}`
+            ).then((r) => r.json());
+
+            setDebounce();
+            setPlaying(is_playing);
+            setVideoTime(current_time_ms);

            const syncMessageContent = document.createElement("span");
            syncMessageContent.appendChild(
@ -186,10 +187,23 @@ const setupChatboxEvents = (socket) => {
            );
            handled = true;
            break;
-          case "/join":
-            state().sessionId = args;
-            joinSession();
-            handled = true;
+          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");
@ -199,7 +213,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>/join [session id]</code> - joins another session";
+              "&emsp;<code>/votekiss</code> - like votekick but gay";

            printChatMessage(
              "command-message",
@ -232,9 +246,17 @@ const setupChatboxEvents = (socket) => {
 /**
 * @param {WebSocket} socket
 */
-export const setupChat = async (socket) => {
+export const setupChat = async (socket, _nickname) => {
+  nickname = _nickname; // We need this for commands
  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) => {
@ -297,7 +319,7 @@ const matpad = (n) => {
 * @param {string?} user
 * @param {Node?} content
 */
-export const printChatMessage = (eventType, user, colour, content) => {
+const printChatMessage = (eventType, user, colour, content) => {
  const chatMessage = document.createElement("div");
  chatMessage.classList.add("chat-message");
  chatMessage.classList.add(eventType);
@ -328,6 +350,31 @@ 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;
@ -350,12 +397,15 @@ 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");
-      messageContent.append(...(await linkify(event.data, emojify)));
+      if (handleClientCommand(event.data, event.user)) break;
+      messageContent.append(...(await emojify(event.data)));
+
      printChatMessage(
        "chat-message",
        event.user,
@ -412,30 +462,32 @@ export const logEventToChat = async (event) => {
      }

      printChatMessage("ping", event.user, event.colour, messageContent);
-      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);
-            }
-          });
-        }
-      }
+      beep();
      break;
    }
  }
 };

-export const updateViewerList = (viewers) => {
+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;
  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=4b61c4";
+import { createSession } from "./watch-session.mjs?v=048af96";

 export const setupCreateSessionForm = () => {
  const form = document.querySelector("#create-session-form");
--- a/frontend/lib/emojis.mjs
+++ b/frontend/lib/emojis.mjs
@ -5,10 +5,7 @@ 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;
-    try {
-      emoji = emojis[name.toLowerCase()[0]].find((e) => e[0] == name);
-    } catch (e) {}
+    let emoji = emojis[name.toLowerCase()[0]].find((e) => e[0] == name);
    if (!emoji) {
      nodes.push(document.createTextNode(match));
    } else {
@ -32,15 +29,7 @@ export async function emojify(text) {
 const emojis = {};

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

 /**
 * @param {HTMLInputElement} field
@ -54,13 +53,11 @@ const displayPostCreateMessage = () => {
  if (params.get("created") == "true") {
    document.querySelector("#post-create-message").style["display"] = "block";
    window.history.replaceState({}, document.title, `/${window.location.hash}`);
-    return true;
  }
-  return false;
 };

 export const setupJoinSessionForm = () => {
-  const created = displayPostCreateMessage();
+  displayPostCreateMessage();

  const form = document.querySelector("#join-session-form");
  const nickname = form.querySelector("#join-session-nickname");
@ -83,10 +80,11 @@ export const setupJoinSessionForm = () => {
    saveNickname(nickname);
    saveColour(colour);
    try {
-      state().nickname = nickname.value;
-      state().sessionId = sessionId.value;
-      state().colour = colour.value.replace(/^#/, "");
-      await joinSession(created);
+      await joinSession(
+        nickname.value,
+        sessionId.value,
+        colour.value.replace(/^#/, "")
+      );
    } catch (e) {
      alert(e.message);
      button.disabled = false;
--- a/frontend/lib/links.mjs
+++ b/frontend/lib/links.mjs
@ -1,121 +0,0 @@
-import { joinSession } from "./watch-session.mjs?v=4b61c4";
-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
@ -1,79 +0,0 @@
-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/plyr-3.7.3.css
+++ b/frontend/lib/plyr-3.7.3.css
--- a/frontend/lib/plyr-3.7.3.min.esm.js
+++ b/frontend/lib/plyr-3.7.3.min.esm.js
--- a/frontend/lib/reconnecting-web-socket.mjs
+++ b/frontend/lib/reconnecting-web-socket.mjs
@ -11,7 +11,6 @@ export default class ReconnectingWebSocket {
    this._lastConnect = 0;
    this._socket = null;
    this._unsent = [];
-    this._closing = false;
    this._connect(true);
  }
  _connect(first) {
@ -41,7 +40,6 @@ export default class ReconnectingWebSocket {
    });
  }
  _reconnect() {
-    if (this._closing) return;
    if (this._reconnecting) return;
    this._eventTarget.dispatchEvent(new Event("reconnecting"));
    this._reconnecting = true;
@ -58,10 +56,6 @@ 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
@ -1,7 +0,0 @@
-let instance = null;
-export const state = () => {
-  if (!instance) {
-    instance = {};
-  }
-  return instance;
-};
--- a/frontend/lib/video.mjs
+++ b/frontend/lib/video.mjs
@ -1,56 +1,105 @@
-import Plyr from "./plyr-3.7.3.min.esm.js";
+const loadVolume = () => {
+  try {
+    const savedVolume = localStorage.getItem("watch-party-volume");
+    if (savedVolume != null && savedVolume != "") {
+      return +savedVolume;
+    }
+  } catch (_err) {
+    // Sometimes localStorage is blocked from use
+  }
+  // default
+  return 0.5;
+};
+
+/**
+ * @param {number} volume
+ */
+const saveVolume = (volume) => {
+  try {
+    localStorage.setItem("watch-party-volume", volume);
+  } catch (_err) {
+    // see loadVolume
+  }
+};
+
+const loadCaptionTrack = () => {
+  try {
+    const savedTrack = localStorage.getItem("watch-party-captions");
+    if (savedTrack != null && savedTrack != "") {
+      return +savedTrack;
+    }
+  } catch (_err) {
+    // Sometimes localStorage is blocked from use
+  }
+  // default
+  return -1;
+};
+
+/**
+ * @param {number} track
+ */
+const saveCaptionsTrack = (track) => {
+  try {
+    localStorage.setItem("watch-party-captions", track);
+  } catch (_err) {
+    // see loadCaptionsTrack
+  }
+};

 /**
 * @param {string} videoUrl
 * @param {{name: string, url: string}[]} subtitles
 */
-const createVideoElement = (videoUrl, subtitles, created) => {
-  const oldVideo = document.getElementById(".plyr");
-  if (oldVideo) {
-    oldVideo.remove();
-  }
+const createVideoElement = (videoUrl, subtitles) => {
  const video = document.createElement("video");
-  video.id = "video";
+  video.controls = true;
+  video.autoplay = false;
+  video.volume = loadVolume();
  video.crossOrigin = "anonymous";

+  video.addEventListener("volumechange", async () => {
+    saveVolume(video.volume);
+  });
+
  const source = document.createElement("source");
  source.src = videoUrl;

  video.appendChild(source);

+  const storedTrack = loadCaptionTrack();
+  let id = 0;
  for (const { name, url } of subtitles) {
    const track = document.createElement("track");
    track.label = name;
-    track.srclang = "xx-" + name.toLowerCase();
    track.src = url;
    track.kind = "captions";
-    video.appendChild(track);
+
+    if (id == storedTrack) {
+      track.default = true;
    }

-  const videoContainer = document.querySelector("#video-container");
-  videoContainer.style.display = "block";
-  videoContainer.appendChild(video);
+    video.appendChild(track);
+    id++;
+  }

-  const player = new Plyr(video, {
-    clickToPlay: false,
-    settings: ["captions", "quality"],
-    autopause: false,
+  video.textTracks.addEventListener("change", async () => {
+    let id = 0;
+    for (const track of video.textTracks) {
+      if (track.mode != "disabled") {
+        saveCaptionsTrack(id);
+        return;
+      }
+      id++;
+    }
+    saveCaptionsTrack(-1);
  });
-  player.elements.controls.insertAdjacentHTML(
-    "afterbegin",
-    `<button type="button" aria-pressed="false" class="plyr__controls__item plyr__control lock-controls"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z"></path></svg><span class="label--pressed plyr__sr-only">Unlock controls</span><span class="label--not-pressed plyr__sr-only">Lock controls</span></button>`
-  );
-  const lockButton = player.elements.controls.children[0];
-  let controlsEnabled = created;
-  const setControlsEnabled = (enabled) => {
-    controlsEnabled = enabled;
-    lockButton.setAttribute("aria-pressed", enabled);
-    lockButton.classList.toggle("plyr__control--pressed", enabled);
-    player.elements.buttons.play[0].disabled =
-      player.elements.buttons.play[1].disabled =
-      player.elements.inputs.seek.disabled =
-        !enabled;
-    if (!enabled) {
+
+  // watch for attribute changes on the video object to detect hiding/showing of controls
+  // as far as i can tell this is the least hacky solutions to get control visibility change events
+  const observer = new MutationObserver(async (mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.attributeName == "controls") {
+        if (video.controls) {
          // enable media button support
          navigator.mediaSession.setActionHandler("play", null);
          navigator.mediaSession.setActionHandler("pause", null);
@ -71,14 +120,13 @@ const createVideoElement = (videoUrl, subtitles, created) => {
          navigator.mediaSession.setActionHandler("previoustrack", () => {});
          navigator.mediaSession.setActionHandler("nexttrack", () => {});
        }
-  };
-  setControlsEnabled(controlsEnabled);
-  lockButton.addEventListener("click", () =>
-    setControlsEnabled(!controlsEnabled)
-  );
-  window.__plyr = player;
+        return;
+      }
+    }
+  });
+  observer.observe(video, { attributes: true });

-  return player;
+  return video;
 };

 /**
@ -87,26 +135,24 @@ const createVideoElement = (videoUrl, subtitles, created) => {
 * @param {number} currentTime
 * @param {boolean} playing
 */
-export const setupVideo = async (
-  videoUrl,
-  subtitles,
-  currentTime,
-  playing,
-  created
-) => {
+export const setupVideo = async (videoUrl, subtitles, currentTime, playing) => {
  document.querySelector("#pre-join-controls").style["display"] = "none";
-  const player = createVideoElement(videoUrl, subtitles, created);
-  player.currentTime = currentTime / 1000.0;
+  const video = createVideoElement(videoUrl, subtitles);
+  const videoContainer = document.querySelector("#video-container");
+  videoContainer.style.display = "block";
+  videoContainer.appendChild(video);
+
+  video.currentTime = currentTime / 1000.0;

  try {
    if (playing) {
-      player.play();
+      await video.play();
    } else {
-      player.pause();
+      video.pause();
    }
  } catch (err) {
    // Auto-play is probably disabled, we should uhhhhhhh do something about it
  }

-  return player;
+  return video;
 };
--- a/frontend/lib/watch-session.mjs
+++ b/frontend/lib/watch-session.mjs
@ -1,23 +1,21 @@
-import { setupVideo } from "./video.mjs?v=4b61c4";
+import { setupVideo } from "./video.mjs?v=048af96";
 import {
  setupChat,
  logEventToChat,
  updateViewerList,
-  printChatMessage,
-} from "./chat.mjs?v=4b61c4";
+} from "./chat.mjs?v=048af96";
 import ReconnectingWebSocket from "./reconnecting-web-socket.mjs";
-import { state } from "./state.mjs";
-let player;
+
 /**
 * @param {string} sessionId
 * @param {string} nickname
 * @returns {ReconnectingWebSocket}
 */
-const createWebSocket = () => {
+const createWebSocket = (sessionId, nickname, colour) => {
  const wsUrl = new URL(
-    `/sess/${state().sessionId}/subscribe` +
-      `?nickname=${encodeURIComponent(state().nickname)}` +
-      `&colour=${encodeURIComponent(state().colour)}`,
+    `/sess/${sessionId}/subscribe` +
+      `?nickname=${encodeURIComponent(nickname)}` +
+      `&colour=${encodeURIComponent(colour)}`,
    window.location.href
  );
  wsUrl.protocol = "ws" + window.location.protocol.slice(4);
@ -42,18 +40,26 @@ export const setDebounce = () => {
  }, 500);
 };

-export const setVideoTime = (time) => {
+export const setVideoTime = (time, video = null) => {
+  if (video == null) {
+    video = document.querySelector("video");
+  }
+
  const timeSecs = time / 1000.0;
-  if (Math.abs(player.currentTime - timeSecs) > 0.5) {
-    player.currentTime = timeSecs;
+  if (Math.abs(video.currentTime - timeSecs) > 0.5) {
+    video.currentTime = timeSecs;
  }
 };

-export const setPlaying = async (playing) => {
+export const setPlaying = async (playing, video = null) => {
+  if (video == null) {
+    video = document.querySelector("video");
+  }
+
  if (playing) {
-    await player.play();
+    await video.play();
  } else {
-    player.pause();
+    video.pause();
  }
 };

@ -61,7 +67,7 @@ export const setPlaying = async (playing) => {
 * @param {HTMLVideoElement} video
 * @param {ReconnectingWebSocket} socket
 */
-const setupIncomingEvents = (player, socket) => {
+const setupIncomingEvents = (video, socket) => {
  socket.addEventListener("message", async (messageEvent) => {
    try {
      const event = JSON.parse(messageEvent.data);
@ -71,16 +77,16 @@ const setupIncomingEvents = (player, socket) => {
            setDebounce();

            if (event.data.playing) {
-              await player.play();
+              await video.play();
            } else {
-              player.pause();
+              video.pause();
            }

-            setVideoTime(event.data.time);
+            setVideoTime(event.data.time, video);
            break;
          case "SetTime":
            setDebounce();
-            setVideoTime(event.data);
+            setVideoTime(event.data, video);
            break;
          case "UpdateViewerList":
            updateViewerList(event.data);
@ -94,19 +100,19 @@ const setupIncomingEvents = (player, socket) => {
 };

 /**
- * @param {Plyr} player
+ * @param {HTMLVideoElement} video
 * @param {ReconnectingWebSocket} socket
 */
-const setupOutgoingEvents = (player, socket) => {
-  const currentVideoTime = () => (player.currentTime * 1000) | 0;
+const setupOutgoingEvents = (video, socket) => {
+  const currentVideoTime = () => (video.currentTime * 1000) | 0;

-  player.on("pause", async () => {
-    if (outgoingDebounce || player.elements.inputs.seek.disabled) {
+  video.addEventListener("pause", async (event) => {
+    if (outgoingDebounce || !video.controls) {
      return;
    }

    // don't send a pause event for the video ending
-    if (player.currentTime == player.duration) {
+    if (video.currentTime == video.duration) {
      return;
    }

@ -121,8 +127,8 @@ const setupOutgoingEvents = (player, socket) => {
    );
  });

-  player.on("play", () => {
-    if (outgoingDebounce || player.elements.inputs.seek.disabled) {
+  video.addEventListener("play", (event) => {
+    if (outgoingDebounce || !video.controls) {
      return;
    }

@ -138,14 +144,14 @@ const setupOutgoingEvents = (player, socket) => {
  });

  let firstSeekComplete = false;
-  player.on("seeked", async (event) => {
+  video.addEventListener("seeked", async (event) => {
    if (!firstSeekComplete) {
      // The first seeked event is performed by the browser when the video is loading
      firstSeekComplete = true;
      return;
    }

-    if (outgoingDebounce || player.elements.inputs.seek.disabled) {
+    if (outgoingDebounce || !video.controls) {
      return;
    }

@ -160,29 +166,19 @@ const setupOutgoingEvents = (player, socket) => {
  });
 };

-export const joinSession = async (created) => {
-  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;
-
+/**
+ * @param {string} nickname
+ * @param {string} sessionId
+ */
+export const joinSession = async (nickname, sessionId, colour) => {
  // try { // we are handling errors in the join form.
  const genericConnectionError = new Error(
    "There was an issue getting the session information."
  );
-  window.location.hash = state().sessionId;
+  window.location.hash = sessionId;
  let response, video_url, subtitle_tracks, current_time_ms, is_playing;
  try {
-    response = await fetch(`/sess/${state().sessionId}`);
+    response = await fetch(`/sess/${sessionId}`);
  } catch (e) {
    console.error(e);
    throw genericConnectionError;
@ -206,28 +202,25 @@ export const joinSession = async (created) => {
    throw genericConnectionError;
  }

-  if (state().socket) {
-    state().socket.close();
-    state().socket = null;
-  }
-  const socket = createWebSocket();
-  state().socket = socket;
+  const socket = createWebSocket(sessionId, nickname, colour);
  socket.addEventListener("open", async () => {
-    player = await setupVideo(
+    const video = await setupVideo(
      video_url,
      subtitle_tracks,
      current_time_ms,
-      is_playing,
-      created
+      is_playing
    );

-    player.on("canplay", () => {
-      sync();
-    });
+    // 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) {
+      video.controls = false;
+    }

-    setupOutgoingEvents(player, socket);
-    setupIncomingEvents(player, socket);
-    setupChat(socket);
+    setupOutgoingEvents(video, socket);
+    setupIncomingEvents(video, socket);
+    setupChat(socket, nickname);
  });
  socket.addEventListener("reconnecting", (e) => {
    console.log("Reconnecting...");
@ -256,15 +249,3 @@ export const createSession = async (videoUrl, subtitleTracks) => {

  window.location = `/?created=true#${id}`;
 };
-
-export const sync = async () => {
-  setDebounce();
-  await setPlaying(false);
-  const { current_time_ms, is_playing } = await fetch(
-    `/sess/${state().sessionId}`
-  ).then((r) => r.json());
-
-  setDebounce();
-  setVideoTime(current_time_ms);
-  if (is_playing) await setPlaying(is_playing);
-};
--- a/frontend/main.mjs
+++ b/frontend/main.mjs
@ -1,4 +1,4 @@
-import { setupJoinSessionForm } from "./lib/join-session.mjs?v=4b61c4";
+import { setupJoinSessionForm } from "./lib/join-session.mjs?v=048af96";

 const main = () => {
  setupJoinSessionForm();
--- a/frontend/styles.css
+++ b/frontend/styles.css
@ -1,6 +1,4 @@
-*,
-*:before,
-*:after {
+* {
  box-sizing: border-box;
 }

@ -19,20 +17,6 @@
      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);
-  --plyr-color-main: var(--accent);
-  --plyr-control-radius: 6px;
-  --plyr-menu-radius: 6px;
-  --plyr-menu-background: var(--autocomplete-bg);
-  --plyr-menu-color: var(--fg);
-  --plyr-menu-arrow-color: var(--fg);
-  --plyr-menu-back-border-color: var(--fg-transparent);
-  --plyr-menu-back-border-shadow-color: transparent;
 }

 html {
@ -57,41 +41,11 @@ body {
  flex-direction: column;
 }

-.lock-controls.plyr__control--pressed svg {
-  opacity: 0.5;
-}
-
-.plyr {
+video {
+  display: block;
  width: 100%;
  height: 100%;
-}
-
-.plyr__menu__container {
-  --plyr-video-control-background-hover: var(--fg-transparent);
-  --plyr-video-control-color-hover: var(--fg);
-  --plyr-control-radius: 4px;
-  --plyr-control-spacing: calc(0.25rem / 0.7);
-  --plyr-font-size-menu: 0.75rem;
-  --plyr-menu-arrow-size: 0;
-  margin-bottom: 0.48rem;
-  max-height: 27vmin;
-  clip-path: inset(0 0 0 0 round 4px);
-  scrollbar-width: thin;
-}
-
-.plyr__menu__container .plyr__control[role="menuitemradio"]::after {
-  left: 10px;
-}
-
-.plyr__menu__container
-  .plyr__control[role="menuitemradio"][aria-checked="true"].plyr__tab-focus::before,
-.plyr__menu__container
-  .plyr__control[role="menuitemradio"][aria-checked="true"]:hover::before {
-  background: var(--accent);
-}
-
-[data-plyr="language"] .plyr__menu__value {
-  display: none;
+  object-fit: contain;
 }

 #video-container {
@ -104,45 +58,6 @@ 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;
 }
@ -169,7 +84,7 @@ input[type="text"] {
  overflow-y: scroll;
 }

-button:not(.plyr button) {
+button {
  background-color: var(--accent);
  border: var(--accent);
  border-radius: 6px;
@ -249,7 +164,6 @@ button.small-button {

 .chat-message {
  overflow-wrap: break-word;
-  margin-bottom: 0.125rem;
 }

 .chat-message > strong,
@ -257,15 +171,34 @@ 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.ping,
+.chat-message.user-kissed {
  font-style: italic;
 }

+.chat-message.user-kissed {
+  color: #ff6094;
+}
+
 .chat-message.set-time,
-.chat-message.set-playing,
-.chat-message.join-session {
+.chat-message.set-playing {
  font-style: italic;
  text-align: right;
  font-size: 0.85em;
@ -276,8 +209,7 @@ button.small-button {
 }

 .chat-message.set-time > strong,
-.chat-message.set-playing > strong,
-.chat-message.join-session > strong {
+.chat-message.set-playing > strong {
  color: unset !important;
 }

@ -341,7 +273,7 @@ button.small-button {
  display: none;
 }

-.emoji-option:not(:root) {
+.emoji-option {
  background: transparent;
  font-size: 0.75rem;
  text-align: left;
@ -353,11 +285,9 @@ 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;
 }
@ -397,19 +327,10 @@ button.small-button {
  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"]::-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;
--- 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!("emojos").and_then(get_emoji_list);
+    let get_emoji_route = warb::path!("emojis").and_then(get_emoji_list);

    enum RequestedSession {
        Session(Uuid, WatchSession),
Author	SHA1	Message	Date
easrng	fbedc0ba23	whoops i forgor a newline	2022-02-18 17:33:19 -05:00
easrng	437004fb9b	fix votekiss	2022-02-18 17:28:56 -05:00
easrng	fb136a1899	oh no aaaa	2022-02-18 17:14:54 -05:00
easrng	1bf13d9776	fix broken things	2022-02-18 17:13:49 -05:00
easrng	a514241bee	fix emoji name overflow (again) and sorting	2022-02-18 16:52:37 -05:00
easrng	cdec8b72a9	Merge branch 'main' of lavender.software:lavender/watch-party	2022-02-18 14:48:56 -05:00
easrng	92860f1ae6	add votekiss	2022-02-18 14:48:36 -05:00