show playing on splash

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)

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;

src/client/style.css

@@ -280,6 +280,10 @@ button > img {
     margin: 1em;
 }
 
+#entry-playing {
+    margin: 1em;
+}
+
 .user-dj {
     text-decoration: underline 2px #00FFFF;
 }