From 3d4ea0773dd6812b6bd380facfb090b1d4ce9649 Mon Sep 17 00:00:00 2001 From: maia arson crimew Date: Wed, 30 Mar 2022 13:17:44 +0200 Subject: [PATCH] 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 | 12 ++++++-- frontend/lib/links.mjs | 6 +++- frontend/lib/reconnecting-web-socket.mjs | 6 ++++ frontend/lib/watch-session.mjs | 35 ++++++++++++++++++++++-- frontend/styles.css | 6 ++-- 5 files changed, 57 insertions(+), 8 deletions(-) diff --git a/frontend/lib/chat.mjs b/frontend/lib/chat.mjs index 15ce7f3..ad9adac 100644 --- a/frontend/lib/chat.mjs +++ b/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) => { " /help - display this help message
" + " /ping [message] - ping all viewers
" + " /sync - resyncs you with other viewers
" + - " /shrug - appends ¯\\_(ツ)_/¯ to your message"; + " /shrug - appends ¯\\_(ツ)_/¯ to your message
" + + " /join [session id] - 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); diff --git a/frontend/lib/links.mjs b/frontend/lib/links.mjs index f69442c..998930e 100644 --- a/frontend/lib/links.mjs +++ b/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 ( diff --git a/frontend/lib/reconnecting-web-socket.mjs b/frontend/lib/reconnecting-web-socket.mjs index 563473d..6370c21 100644 --- 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); } diff --git a/frontend/lib/watch-session.mjs b/frontend/lib/watch-session.mjs index eb2304a..814f8fa 100644 --- a/frontend/lib/watch-session.mjs +++ b/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, diff --git a/frontend/styles.css b/frontend/styles.css index 64f524d..014d9f0 100644 --- a/frontend/styles.css +++ b/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; }