124 lines
No EOL
3.7 KiB
JavaScript
124 lines
No EOL
3.7 KiB
JavaScript
let enum_counter = 0;
|
|
const WebsocketMessageTypeCurrentlyPlaying = enum_counter++;
|
|
const WebsocketMessageTypeChatMessage = enum_counter++;
|
|
const WebsocketMessageTypeUserJoin = enum_counter++;
|
|
const WebsocketMessageTypeUserLeave = enum_counter++;
|
|
const WebsocketMessageTypeUserRename = enum_counter++;
|
|
|
|
const messages = document.getElementById("messages");
|
|
const messageInput = document.getElementById("message-input");
|
|
const messageSubmit = document.getElementById("message-submit");
|
|
const viewersCountElement = document.getElementById("viewers-count");
|
|
const viewers = document.getElementById("viewers");
|
|
|
|
let viewersCounter = 0;
|
|
|
|
let stream = videojs('livestream');
|
|
|
|
let wsurl = "";
|
|
if (location.protocol === 'https:') {
|
|
wsurl = "wss://" + window.location.host + "/ws"
|
|
} else {
|
|
wsurl = "ws://" + window.location.host + "/ws"
|
|
}
|
|
|
|
let websocket = new WebSocket(wsurl)
|
|
|
|
function sendInput() {
|
|
let content = messageInput.value.trim();
|
|
if (content == "" || content.length > 200) {
|
|
return
|
|
}
|
|
|
|
let message = {
|
|
type: WebsocketMessageTypeChatMessage,
|
|
message: content,
|
|
};
|
|
|
|
messageInput.value = "";
|
|
|
|
websocket.send(JSON.stringify(message));
|
|
}
|
|
messageInput.addEventListener("keyup", function (e) {
|
|
if (e.key === "Enter") {
|
|
sendInput()
|
|
}
|
|
});
|
|
|
|
messageSubmit.addEventListener("click", () => sendInput())
|
|
|
|
websocket.onmessage = (event) => {
|
|
let data = JSON.parse(event.data)
|
|
|
|
switch (data.type) {
|
|
case WebsocketMessageTypeCurrentlyPlaying:
|
|
currently_playing.innerText = data.message
|
|
|
|
stream.one('error', function () {
|
|
stream.src({ type: 'application/x-mpegURL', src: '/media/stream.m3u8' });
|
|
stream.play();
|
|
console.log("trying again")
|
|
})
|
|
|
|
break
|
|
case WebsocketMessageTypeChatMessage: {
|
|
let message = document.createElement("div");
|
|
message.className = "message";
|
|
|
|
let username = document.createElement("div");
|
|
username.className = "message-username";
|
|
username.style.color = "#" + data.message.username_color;
|
|
username.innerText = data.message.username;
|
|
message.appendChild(username);
|
|
|
|
let content = document.createElement("div");
|
|
content.className = "message-content";
|
|
content.innerText = data.message.content;
|
|
|
|
message.appendChild(content);
|
|
|
|
messages.appendChild(message);
|
|
break
|
|
}
|
|
|
|
case WebsocketMessageTypeUserJoin: {
|
|
let username = document.createElement("div");
|
|
username.style.color = "#" + data.message.color;
|
|
username.className = "viewer";
|
|
|
|
username.innerText = data.message.username;
|
|
viewers.appendChild(username)
|
|
|
|
if (data.message.username != "Bot") {
|
|
viewersCounter ++;
|
|
viewersCountElement.innerText = viewersCounter;
|
|
}
|
|
|
|
break
|
|
}
|
|
case WebsocketMessageTypeUserLeave: {
|
|
for (let viewer of viewers.children) {
|
|
if (viewer.innerText == data.message.username) {
|
|
viewer.remove();
|
|
}
|
|
}
|
|
|
|
if (data.message.username != "Bot") {
|
|
viewersCounter --;
|
|
viewersCountElement.innerText = viewersCounter;
|
|
}
|
|
break
|
|
}
|
|
case WebsocketMessageTypeUserRename: {
|
|
for (let viewer of viewers.children) {
|
|
if (viewer.innerText == data.message.old_username) {
|
|
viewer.style.color = "#" + data.message.new_color;
|
|
viewer.innerText = data.message.new_username;
|
|
}
|
|
}
|
|
break
|
|
}
|
|
}
|
|
};
|
|
|
|
feather.replace() |