From 035be7bf489dc4ee94c21b453dc7672cb46eabe6 Mon Sep 17 00:00:00 2001
From: candle <ragzouken@gmail.com>
Date: Fri, 17 Nov 2023 20:18:58 +0000
Subject: [PATCH] show playing on splash

---
 src/client/index.pug |  1 +
 src/client/main.ts   | 21 +++++++++++++++++++++
 src/client/style.css |  4 ++++
 3 files changed, 26 insertions(+)

diff --git a/src/client/index.pug b/src/client/index.pug
index 66a79d06..0eb2f072 100644
--- a/src/client/index.pug
+++ b/src/client/index.pug
@@ -121,6 +121,7 @@ html
             #entry-panel
                 #entry-logo-container
                     img#entry-logo(src="./zone-logo.png")
+                #entry-playing ...
                 #entry-users.user-container ...
                 form#entry
                     input#join-name(type="text" placeholder="your name..." minlength="1" maxlength="16" required)
diff --git a/src/client/main.ts b/src/client/main.ts
index 6b9aea37..b39cd5c3 100644
--- a/src/client/main.ts
+++ b/src/client/main.ts
@@ -928,6 +928,8 @@ function setupEntrySplash() {
     const entryButton = document.getElementById('entry-button') as HTMLInputElement;
     const entryForm = document.getElementById('entry') as HTMLFormElement;
 
+    const entryPlaying = document.getElementById("entry-playing") as HTMLElement;
+
     function refreshUsers(users: { name?: string; avatar?: string, userId: string }[]) {
         entryUsers.innerHTML = '';
         users.forEach((user) => {
@@ -957,6 +959,25 @@ function setupEntrySplash() {
     updateEntryUsers();
     setInterval(updateEntryUsers, 5000);
 
+    function updateEntryPlaying() {
+        fetch('./playing')
+        .then((res) => res.json())
+        .then(({ item, time }) => {
+            const playing = document.createElement("div");
+            entryPlaying.replaceChildren(playing);
+
+            if (item) {
+                const stamp = secondsToTime(time / 1000);
+                const duration = secondsToTime(item.media.duration / 1000);
+                playing.replaceChildren(`${item.media.title} (${stamp} / ${duration})`);
+            } else {
+                playing.replaceChildren(`nothing playing`);
+            }
+        });
+    }
+    updateEntryPlaying();
+    setInterval(updateEntryPlaying, 5000);
+
     entryButton.disabled = !entryForm.checkValidity();
     nameInput.addEventListener('input', () => (entryButton.disabled = !entryForm.checkValidity()));
     zone.hidden = true;
diff --git a/src/client/style.css b/src/client/style.css
index a0bb3e5b..bacdb0c2 100644
--- a/src/client/style.css
+++ b/src/client/style.css
@@ -280,6 +280,10 @@ button > img {
     margin: 1em;
 }
 
+#entry-playing {
+    margin: 1em;
+}
+
 .user-dj {
     text-decoration: underline 2px #00FFFF;
 }