lavender
/
watch-party
7
4
Fork 5
Code Issues Pull Requests 1 Projects Releases Wiki Activity

add /ping feature 

this is useful for ready checks
votekiss
maia arson crimew 2022-02-13 17:32:28 +01:00
parent 1944b2824c
commit 852270c63f
10 changed files with 60 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/create.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>watch party :D</title> <title>watch party :D</title>
<link rel="stylesheet" href="/styles.css?v=5" /> <link rel="stylesheet" href="/styles.css?v=8" />
</head> </head>
<body> <body>
@ -47,6 +47,6 @@
</p> </p>
</div> </div>
<script type="module" src="/create.mjs?v=7"></script> <script type="module" src="/create.mjs?v=8"></script>
</body> </body>
</html> </html>

2
frontend/create.mjs
View File

@ -1,4 +1,4 @@
import { setupCreateSessionForm } from "./lib/create-session.mjs?v=7"; import { setupCreateSessionForm } from "./lib/create-session.mjs?v=8";
const main = () => { const main = () => {
setupCreateSessionForm(); setupCreateSessionForm();

4
frontend/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>watch party :D</title> <title>watch party :D</title>
<link rel="stylesheet" href="/styles.css?v=5" /> <link rel="stylesheet" href="/styles.css?v=8" />
</head> </head>
<body> <body>
@ -61,6 +61,6 @@
</form> </form>
</div> </div>
<script type="module" src="/main.mjs?v=7"></script> <script type="module" src="/main.mjs?v=8"></script>
</body> </body>
</html> </html>

41
frontend/lib/chat.mjs
View File

@ -12,6 +12,17 @@ const setupChatboxEvents = (socket) => {
if (content.trim().length) { if (content.trim().length) {
input.value = ""; input.value = "";
if (
content.toLowerCase() == "/ping" ||
content.toLowerCase().startsWith("/ping ")
) {
socket.send(
JSON.stringify({
op: "Ping",
data: content.slice(5).trim(),
})
);
} else {
socket.send( socket.send(
JSON.stringify({ JSON.stringify({
op: "ChatMessage", op: "ChatMessage",
@ -19,6 +30,7 @@ const setupChatboxEvents = (socket) => {
}) })
); );
} }
}
}); });
}; };
@ -212,5 +224,34 @@ export const logEventToChat = (event) => {
printChatMessage("set-playing", event.user, event.colour, messageContent); printChatMessage("set-playing", event.user, event.colour, messageContent);
break; 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);
};

2
frontend/lib/create-session.mjs
View File

@ -1,4 +1,4 @@
import { createSession } from "./watch-session.mjs?v=7"; import { createSession } from "./watch-session.mjs?v=8";
export const setupCreateSessionForm = () => { export const setupCreateSessionForm = () => {
const form = document.querySelector("#create-session-form"); const form = document.querySelector("#create-session-form");

2
frontend/lib/join-session.mjs
View File

@ -1,4 +1,4 @@
import { joinSession } from "./watch-session.mjs?v=7"; import { joinSession } from "./watch-session.mjs?v=8";
/** /**
* @param {HTMLInputElement} field * @param {HTMLInputElement} field

4
frontend/lib/watch-session.mjs
View File

@ -1,5 +1,5 @@
import { setupVideo } from "./video.mjs?v=7"; import { setupVideo } from "./video.mjs?v=8";
import { setupChat, logEventToChat } from "./chat.mjs?v=7"; import { setupChat, logEventToChat } from "./chat.mjs?v=8";
/** /**
* @param {string} sessionId * @param {string} sessionId

2
frontend/main.mjs
View File

@ -1,4 +1,4 @@
import { setupJoinSessionForm } from "./lib/join-session.mjs?v=7"; import { setupJoinSessionForm } from "./lib/join-session.mjs?v=8";
const main = () => { const main = () => {
setupJoinSessionForm(); setupJoinSessionForm();

3
frontend/styles.css
View File

@ -138,7 +138,8 @@ button.small-button {
} }
.chat-message.user-join, .chat-message.user-join,
.chat-message.user-leave { .chat-message.user-leave,
.chat-message.ping {
font-style: italic; font-style: italic;
} }

1
src/events.rs
View File

@ -9,6 +9,7 @@ pub enum WatchEventData {
UserJoin, UserJoin,
UserLeave, UserLeave,
ChatMessage(String), ChatMessage(String),
Ping(String)
} }
#[derive(Clone, Serialize, Deserialize)] #[derive(Clone, Serialize, Deserialize)]