diff --git a/frontend/create.html b/frontend/create.html index 29ddb29..ed15b74 100644 --- a/frontend/create.html +++ b/frontend/create.html @@ -3,7 +3,7 @@ watch party :D - + @@ -47,6 +47,6 @@

- + diff --git a/frontend/create.mjs b/frontend/create.mjs index dc8f441..bb00cab 100644 --- a/frontend/create.mjs +++ b/frontend/create.mjs @@ -1,4 +1,4 @@ -import { setupCreateSessionForm } from "./lib/create-session.mjs?v=7"; +import { setupCreateSessionForm } from "./lib/create-session.mjs?v=8"; const main = () => { setupCreateSessionForm(); diff --git a/frontend/index.html b/frontend/index.html index 46e7405..29db5b1 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,7 @@ watch party :D - + @@ -61,6 +61,6 @@ - + diff --git a/frontend/lib/chat.mjs b/frontend/lib/chat.mjs index af868e8..777783f 100644 --- a/frontend/lib/chat.mjs +++ b/frontend/lib/chat.mjs @@ -12,12 +12,24 @@ const setupChatboxEvents = (socket) => { if (content.trim().length) { input.value = ""; - socket.send( - JSON.stringify({ - op: "ChatMessage", - data: content, - }) - ); + if ( + content.toLowerCase() == "/ping" || + content.toLowerCase().startsWith("/ping ") + ) { + socket.send( + JSON.stringify({ + op: "Ping", + data: content.slice(5).trim(), + }) + ); + } else { + socket.send( + JSON.stringify({ + op: "ChatMessage", + data: content, + }) + ); + } } }); }; @@ -212,5 +224,34 @@ export const logEventToChat = (event) => { printChatMessage("set-playing", event.user, event.colour, messageContent); break; } + case "Ping": { + const messageContent = document.createElement("span"); + if (event.data) { + messageContent.appendChild(document.createTextNode("pinged saying: ")); + messageContent.appendChild(document.createTextNode(event.data)); + } else { + messageContent.appendChild(document.createTextNode("pinged")); + } + + printChatMessage("ping", event.user, event.colour, messageContent); + beep(); + 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); +}; diff --git a/frontend/lib/create-session.mjs b/frontend/lib/create-session.mjs index ea4385b..4380bef 100644 --- a/frontend/lib/create-session.mjs +++ b/frontend/lib/create-session.mjs @@ -1,4 +1,4 @@ -import { createSession } from "./watch-session.mjs?v=7"; +import { createSession } from "./watch-session.mjs?v=8"; export const setupCreateSessionForm = () => { const form = document.querySelector("#create-session-form"); diff --git a/frontend/lib/join-session.mjs b/frontend/lib/join-session.mjs index 3fb9041..c139e74 100644 --- a/frontend/lib/join-session.mjs +++ b/frontend/lib/join-session.mjs @@ -1,4 +1,4 @@ -import { joinSession } from "./watch-session.mjs?v=7"; +import { joinSession } from "./watch-session.mjs?v=8"; /** * @param {HTMLInputElement} field diff --git a/frontend/lib/watch-session.mjs b/frontend/lib/watch-session.mjs index 6588142..bb771bb 100644 --- a/frontend/lib/watch-session.mjs +++ b/frontend/lib/watch-session.mjs @@ -1,5 +1,5 @@ -import { setupVideo } from "./video.mjs?v=7"; -import { setupChat, logEventToChat } from "./chat.mjs?v=7"; +import { setupVideo } from "./video.mjs?v=8"; +import { setupChat, logEventToChat } from "./chat.mjs?v=8"; /** * @param {string} sessionId diff --git a/frontend/main.mjs b/frontend/main.mjs index e332bdf..863afb9 100644 --- a/frontend/main.mjs +++ b/frontend/main.mjs @@ -1,4 +1,4 @@ -import { setupJoinSessionForm } from "./lib/join-session.mjs?v=7"; +import { setupJoinSessionForm } from "./lib/join-session.mjs?v=8"; const main = () => { setupJoinSessionForm(); diff --git a/frontend/styles.css b/frontend/styles.css index e2ca53d..e8dc8c3 100644 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -138,7 +138,8 @@ button.small-button { } .chat-message.user-join, -.chat-message.user-leave { +.chat-message.user-leave, +.chat-message.ping { font-style: italic; } diff --git a/src/events.rs b/src/events.rs index 49b70ea..d8adda7 100644 --- a/src/events.rs +++ b/src/events.rs @@ -9,6 +9,7 @@ pub enum WatchEventData { UserJoin, UserLeave, ChatMessage(String), + Ping(String) } #[derive(Clone, Serialize, Deserialize)]