diff --git a/src/main.ts b/src/main.ts index 2ed17a8..83fe83e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -20,6 +20,12 @@ router .get("/statusline.js", async (ctx) => { ctx.response.body = await Deno.readFile("web/statusline.js"); }) + .get("/gone", async (ctx) => { + ctx.response.body = await Deno.readFile("web/gone.html"); + }) + .get("/gone.js", async (ctx) => { + ctx.response.body = await Deno.readFile("web/gone.js"); + }) .get("/style.css", async (ctx) => { ctx.response.body = await Deno.readFile("web/style.css"); }); @@ -41,7 +47,8 @@ setInterval(async () => { let songinfo: SongInfo | null = null; try { songinfo = await getVlcSongInfo(); - } catch { + } catch (e) { + console.log(`getVlcSongInfo() error: ${e}`); // properly handling this error is by ignoring it, // since then that leaves songinfo as null, // and that is guaranteed to be handled correctly. diff --git a/web/gone.html b/web/gone.html new file mode 100644 index 0000000..0e9ea0f --- /dev/null +++ b/web/gone.html @@ -0,0 +1,14 @@ + + + + + + + +

Streamboy is connecting...

+

[gone]

+

+ + + + diff --git a/web/gone.js b/web/gone.js new file mode 100644 index 0000000..ea33bcf --- /dev/null +++ b/web/gone.js @@ -0,0 +1,96 @@ +// Sunday, February 16 2025, 03:06:20 PM + +const dateElement = document.getElementById("date"); + +const months = [ + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", +]; + +const daysOfWeek = [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", +]; + +function updateDateTime() { + const date = new Date(); + + const seconds = date.getSeconds(); + const minutes = date.getMinutes(); + const hours24 = date.getHours(); + const hours12 = hours24 % 12; + const ampm = hours24 > 11 && hours24 != 0 ? "PM" : "AM"; + const secondsString = String(seconds).padStart(2, "0"); + const minutesString = String(minutes).padStart(2, "0"); + + const year = date.getFullYear(); + const month = months[date.getMonth()]; + const day = date.getDate(); + const dayOfWeek = daysOfWeek[date.getDay()]; + + dateElement.innerText = `${dayOfWeek}, ${month} ${day} ${year}, ${hours12}:${minutesString}:${secondsString} ${ampm}`; +} + +updateDateTime(); +setInterval(updateDateTime, 1000); + + + +// modified stuff from statusline.js +// TODO combine both functionalities into the same statusline.js +const statusLineElement = document.getElementById("status-line"); +const statusLineElement2 = statusLineElement.cloneNode(); +statusLineElement2.id = "status-line2"; +document.body.appendChild(statusLineElement2); + +let status = { blocks: [{ text: "Streamboy is connecting...", color: "#ffffff" }] }; +let scroll = 0; + +setInterval(() => { + let string = ""; + for (const i in status.blocks) { + string += status.blocks[i].text; + if (i < status.blocks.length - 1) string += " | "; + } + + if (scroll >= string.length + 9) scroll = 0; + const stringWidth = 16 * string.length + 144; + if (16 * string.length <= statusLineElement.parentElement.clientWidth) { + scroll = 0; + statusLineElement.style.removeProperty("position"); + statusLineElement.style.removeProperty("left"); + statusLineElement2.style.display = "none"; + statusLineElement.textContent = string; + statusLineElement2.textContent = string; + } else { + statusLineElement.style.position = "absolute"; + statusLineElement.style.left = `${-16 * scroll}px`; + statusLineElement2.style.position = "absolute"; + statusLineElement2.style.left = `${-16 * scroll + stringWidth}px`; + statusLineElement2.style.removeProperty("display"); + scroll += 1; + statusLineElement.textContent = string + " | "; + statusLineElement2.textContent = string + " | "; + } +}, 500); + +const socket = new WebSocket("ws://localhost:8012"); + +socket.addEventListener("message", (event) => { + status = JSON.parse(event.data); +}); diff --git a/web/style.css b/web/style.css index 2e66959..e3d4880 100644 --- a/web/style.css +++ b/web/style.css @@ -7,7 +7,25 @@ body { } #gone { + font-size: 224px; + position: absolute; + bottom: 164px; + left: 44px; + margin: 0; + background: linear-gradient(#179d23, #0f552c); + color: transparent; + background-clip: text; +} + +#date { font-size: 64px; + position: absolute; + left: 96px; + bottom: 64px; + margin: 0px; + background: linear-gradient(#26677d, #264f9a); + color: transparent; + background-clip: text; } #status-line, #status-line2 { @@ -18,3 +36,8 @@ body { text-align: center; position: absolute; } + +.doublesize { + font-size: 32px !important; + margin-top: 64px !important; +}