Merge pull request #167 from Ragzouken/playing

entry now playing adjustments
Ragzouken · Nov 18, 2023 · 2e378f6 · 2e378f6
2 parents 37374a0 + 3c4b0c5
commit 2e378f6
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/src/client/index.pug b/src/client/index.pug
@@ -121,7 +121,7 @@ html
  #entry-panel
  #entry-logo-container
  img#entry-logo(src="./zone-logo.png")
- #entry-playing ...
+ #entry-playing(hidden) ...
  #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
@@ -959,32 +959,45 @@ function setupEntrySplash() {
  updateEntryUsers();
  setInterval(updateEntryUsers, 5000);
 
- let lastItem: QueueItem;
- let lastTime: number;
+ let lastItem: QueueItem | undefined;
+ let lastItemStartTime: number;
 
- function refreshEntryPlaying() {
+ function updateEntryPlaying() {
  if (lastItem) {
- const time = performance.now() - lastTime;
+ const time = (performance.now() - lastItemStartTime) / 1000;
+ const durr = lastItem.media.duration / 1000;
+
+ if (time >= durr) {
+ lastItem = undefined;
+ fetchEntryPlaying();
+ updateEntryPlaying();
+ } else {
+ entryPlaying.replaceChildren(
+ lastItem.media.title,
+ document.createElement("br"),
+ `${secondsToTime(time)} / ${secondsToTime(durr)}`,
+ );
+ }
 
- const stamp = secondsToTime(time / 1000);
- const duration = secondsToTime(lastItem.media.duration / 1000);
- entryPlaying.replaceChildren(`${lastItem.media.title}`, document.createElement("br"), `${stamp} / ${duration}`);
+ entryPlaying.hidden = durr < 600;
  } else {
- entryPlaying.replaceChildren(`nothing playing`);
+ entryPlaying.hidden = true;
  }
  }
 
- function updateEntryPlaying() {
- fetch('./playing')
+ function fetchEntryPlaying() {
+ if (entrySplash.hidden) return;
+
+ fetch("https://tinybird.zone/playing")
  .then((res) => res.json())
  .then(({ item, time }) => {
  lastItem = item;
- lastTime = performance.now() - time;
+ lastItemStartTime = performance.now() - time;
  });
  }
- updateEntryPlaying();
- setInterval(updateEntryPlaying, 5000);
- setInterval(refreshEntryPlaying, 500);
+ fetchEntryPlaying();
+ setInterval(fetchEntryPlaying, 5000);
+ setInterval(updateEntryPlaying, 500);
 
  entryButton.disabled = !entryForm.checkValidity();
  nameInput.addEventListener('input', () => (entryButton.disabled = !entryForm.checkValidity()));

diff --git a/src/client/style.css b/src/client/style.css
@@ -282,6 +282,7 @@ button > img {
 
 #entry-playing {
  margin: 1em;
+ color: cyan;
 }
 
 .user-dj {