gone screen
This commit is contained in:
parent
5a70cafef2
commit
5538d4bc8a
4 changed files with 141 additions and 1 deletions
|
|
@ -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.
|
||||
|
|
|
|||
14
web/gone.html
Normal file
14
web/gone.html
Normal file
|
|
@ -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>
|
||||
|
||||
96
web/gone.js
Normal file
96
web/gone.js
Normal file
|
|
@ -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);
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue