Clicking the join chip will directly join the session without a reload

also adds a /join command (most likely still requires some further debugging)

frontend/lib/chat.mjs

@@ -4,7 +4,8 @@ import {
   setPlaying,
 } from "./watch-session.mjs?v=048af96";
 import { emojify, findEmojis } from "./emojis.mjs?v=048af96";
-import { linkify } from "./links.mjs";
+import { linkify } from "./links.mjs?v=048af96";
+import { joinNewSession } from "./watch-session.mjs?v=048af96";
 
 function setCaretPosition(elem, caretPos) {
   if (elem.createTextRange) {
@@ -189,6 +190,10 @@ const setupChatboxEvents = (socket) => {
             );
             handled = true;
             break;
+          case "/join":
+            joinNewSession(args);
+            handled = true;
+            break;
           case "/help":
             const helpMessageContent = document.createElement("span");
             helpMessageContent.innerHTML =
@@ -196,7 +201,8 @@ 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";
+              "&emsp;<code>/shrug</code> - appends ¯\\_(ツ)_/¯ to your message<br>" +
+              "&emsp;<code>/join [session id]</code> - joins another session";
 
             printChatMessage(
               "command-message",
@@ -294,7 +300,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);

frontend/lib/links.mjs

@@ -1,3 +1,5 @@
+import { joinNewSession } from "./watch-session.mjs?v=048af96";
+
 export async function linkify(
   text,
   next = async (t) => [document.createTextNode(t)]
@@ -29,9 +31,11 @@ export async function linkify(
           ) {
             nodes.push(
               Object.assign(document.createElement("a"), {
-                href: url.href,
                 textContent: "Join Session",
                 className: "chip join-chip",
+                onclick: () => {
+                  joinNewSession(url.hash.substring(1));
+                },
               })
             );
           } else if (

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);
   }

frontend/lib/watch-session.mjs

@@ -3,6 +3,7 @@ import {
   setupChat,
   logEventToChat,
   updateViewerList,
+  printChatMessage,
 } from "./chat.mjs?v=048af96";
 import ReconnectingWebSocket from "./reconnecting-web-socket.mjs";
 
@@ -166,11 +167,41 @@ const setupOutgoingEvents = (video, socket) => {
   });
 };
 
+let socket = null;
+let video = null;
+
+export const joinNewSession = async (sessionId) => {
+  const messageContent = document.createElement("span");
+  messageContent.appendChild(document.createTextNode("joining new session "));
+  messageContent.appendChild(document.createTextNode(sessionId));
+
+  printChatMessage("join-session", "watch-party", "#fffff", messageContent);
+
+  // clean up previous session
+  // TODO: this most likely isnt properly working yet when using the /join command to join a new session
+  if (socket != null) {
+    socket.close();
+    socket = null;
+  }
+  if (video != null) {
+    video.remove();
+    video = null;
+  }
+
+  joinSession(window.nickname, sessionId, sColour);
+};
+
 /**
  * @param {string} nickname
  * @param {string} sessionId
+ * @param {string} colour
  */
 export const joinSession = async (nickname, sessionId, colour) => {
+  // TODO: we are getting to a point with our features where some kind of
+  // state store for the various info that is needed in a lot of places would probably make sense
+  window.nickname = nickname;
+  window.colour = colour;
+
   // try { // we are handling errors in the join form.
   const genericConnectionError = new Error(
     "There was an issue getting the session information."
@@ -202,9 +233,9 @@ export const joinSession = async (nickname, sessionId, colour) => {
     throw genericConnectionError;
   }
 
-  const socket = createWebSocket(sessionId, nickname, colour);
+  socket = createWebSocket(sessionId, nickname, colour);
   socket.addEventListener("open", async () => {
-    const video = await setupVideo(
+    video = await setupVideo(
       video_url,
       subtitle_tracks,
       current_time_ms,

frontend/styles.css

@@ -226,7 +226,8 @@ button.small-button {
 }
 
 .chat-message.set-time,
-.chat-message.set-playing {
+.chat-message.set-playing,
+.chat-message.join-session {
   font-style: italic;
   text-align: right;
   font-size: 0.85em;
@@ -237,7 +238,8 @@ button.small-button {
 }
 
 .chat-message.set-time > strong,
-.chat-message.set-playing > strong {
+.chat-message.set-playing > strong,
+.chat-message.join-session > strong {
   color: unset !important;
 }