forked from FreakU/watch-party
Clicking the join chip will directly join the session without a reload
also adds a /join command (most likely still requires some further debugging)
This commit is contained in:
parent
2d544620ed
commit
3d4ea0773d
|
@ -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) => {
|
|||
" <code>/help</code> - display this help message<br>" +
|
||||
" <code>/ping [message]</code> - ping all viewers<br>" +
|
||||
" <code>/sync</code> - resyncs you with other viewers<br>" +
|
||||
" <code>/shrug</code> - appends ¯\\_(ツ)_/¯ to your message";
|
||||
" <code>/shrug</code> - appends ¯\\_(ツ)_/¯ to your message<br>" +
|
||||
" <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);
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue