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

View File

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

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 = () => {
setupCreateSessionForm();

View File

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

View File

@ -12,6 +12,17 @@ const setupChatboxEvents = (socket) => {
if (content.trim().length) {
input.value = "";
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",
@ -19,6 +30,7 @@ const setupChatboxEvents = (socket) => {
})
);
}
}
});
};
@ -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);
};

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 = () => {
const form = document.querySelector("#create-session-form");

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

View File

@ -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

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 = () => {
setupJoinSessionForm();

View File

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

View File

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