livestream/static/js/script.js

const WebsocketMessageTypeViewers = 0;
const WebsocketMessageTypeCurrentlyPlaying = 1;
const WebsocketMessageTypeChatMessage = 2;

const messages = document.getElementById("messages");
const messageInput = document.getElementById("message-input");
const messageSubmit = document.getElementById("message-submit");

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 message = {
        type: WebsocketMessageTypeChatMessage,
        message: messageInput.value,
    };

    messageInput.value = "";

    websocket.send(JSON.stringify(message));
}
messageInput.addEventListener("keyup", function(e) {
    if (e.key === "Enter") {
        sendInput()
    }
});

messageSubmit.addEventListener("click", (e) => sendInput())

websocket.onmessage = (event) => {
    let data = JSON.parse(event.data)

    switch (data.type) {
        case WebsocketMessageTypeViewers:
            viewers.innerText = data.message;
            break
        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
    }
};

feather.replace()