diff --git a/src/client/index.pug b/src/client/index.pug index 66a79d0..0eb2f07 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 6b9aea3..b39cd5c 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 a0bb3e5..bacdb0c 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; }