From 5538d4bc8ad6d016e66885b5f7cb0c746c34485a Mon Sep 17 00:00:00 2001
From: Jeeves <guydoodlesdev@gmail.com>
Date: Wed, 19 Feb 2025 10:54:32 -0700
Subject: [PATCH] gone screen
---
src/main.ts | 9 ++++-
web/gone.html | 14 ++++++++
web/gone.js | 96 +++++++++++++++++++++++++++++++++++++++++++++++++++
web/style.css | 23 ++++++++++++
4 files changed, 141 insertions(+), 1 deletion(-)
create mode 100644 web/gone.html
create mode 100644 web/gone.js
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 @@
+<!DOCTYPE html>
+
+<head>
+ <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+ <p id="status-line" class="doublesize">Streamboy is connecting...</p>
+ <p id="gone">[gone]</p>
+ <p id="date"></p>
+
+ <script src="gone.js"></script>
+</body>
+
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;
+}