52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
|
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();
|