stream-tools/learning/public/cards.js

const timeEl = document.getElementById("time");
const titleEl = document.getElementById("title");
const coverEl = document.getElementById("cover");

function render() {
    const date = new Date();

    const tick = (date.getMilliseconds() * 0.001 % 1.0 > 0.5) ? ":" : " ";

    const hh = `${date.getUTCHours()}`.padStart(2, "0");
    const mm = `${date.getUTCMinutes()}`.padStart(2, "0");
    const ss = `${date.getUTCSeconds()}`.padStart(2, "0");
    timeEl.innerText = `${hh}${tick}${mm}${tick}${ss}`;

    requestAnimationFrame(render);
}

function ready() {
    coverEl.classList.add("hidden");

    requestAnimationFrame(render);
}

async function updateTitle() {
    if (!titleEl) {
        ready();
        return;
    }

    const eventSource = new EventSource("/learning/sse");
    eventSource.addEventListener("open", () => {
        console.log("Connected.");

        eventSource.addEventListener("title-update", event => {
            console.log(`title updated: \"${titleEl.innerText}\" -> \"${event.data}\"`)
            titleEl.innerText = event.data;
            ready();
        });

        eventSource.addEventListener("error", () => {
            eventSource.removeEventListener("error");
            eventSource.close();
            console.error("Connection lost, or an error has occurred.");
            console.log("Attempting to reconnect...");
            setTimeout(() => {
                updateTitle();
            }, 1000);
        });
    });
}
updateTitle();