From dd520491c227dd2cf6c87f18cae821cf469e343c Mon Sep 17 00:00:00 2001
From: peterino2 <peterlimail47@gmail.com>
Date: Mon, 2 Feb 2026 19:10:00 -0800
Subject: [PATCH] style changes

---
 musicroom.db      | Bin 32768 -> 32768 bytes
 public/app.js     |  29 +++++++++++++++++++++++++++++
 public/index.html |   2 ++
 public/styles.css |   2 ++
 4 files changed, 33 insertions(+)

diff --git a/musicroom.db b/musicroom.db
index cbbe635a566bc2ca7f8141bf6bcbcda57373d1f7..3e6880fd4e4f6d35337ff211bcb78bde2c83a5a7 100644
GIT binary patch
delta 194
zcmZo@U}|V!njp=%XrhcW<D!iTOYC`Ac-J%VpXOKMOXOX@Sx{g;uX&?B3r8p?3rl0R
zs%cV6l7&f1ims(as;RC?ieaj5l9`FQZjz~irLnnzp>dL>WoFkx<;=#k8IvRZ^LdOd
z^b9Qx^h}NQj4UQ6`h8+rU@|$>e?1Qie=GxkEPosS4St|43cmch8qA@L#2C*4QaCxs
LPi6DE_#g!U2!%FE

delta 76
zcmV-S0JHyqfC7Mk0+1U4oRJ(u0i3a5q(2G+4q*Tf%MT(BVY3ksQx211PVxerz>`%^
iuL=VXh5!$S57-Z{vk@S84+JO!RRNQ1P9(FgUs52LjThhm

diff --git a/public/app.js b/public/app.js
index 3b33b7d..4d5738f 100644
--- a/public/app.js
+++ b/public/app.js
@@ -519,6 +519,35 @@
 
   $("#status-icon").onclick = togglePlayback;
 
+  async function jumpToTrack(index) {
+    if (playlist.length === 0) return;
+    const newIndex = (index + playlist.length) % playlist.length;
+    
+    if (synced && currentStreamId) {
+      fetch("/api/streams/" + currentStreamId + "/jump", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ index: newIndex })
+      });
+    } else {
+      const track = playlist[newIndex];
+      currentIndex = newIndex;
+      currentFilename = track.filename;
+      serverTrackDuration = track.duration;
+      $("#track-title").textContent = track.title?.trim() || track.filename.replace(/\.[^.]+$/, "");
+      loadingSegments.clear();
+      const cachedUrl = await loadTrackBlob(track.filename);
+      audio.src = cachedUrl || getTrackUrl(track.filename);
+      audio.currentTime = 0;
+      localTimestamp = 0;
+      audio.play();
+      renderPlaylist();
+    }
+  }
+
+  $("#btn-prev").onclick = () => jumpToTrack(currentIndex - 1);
+  $("#btn-next").onclick = () => jumpToTrack(currentIndex + 1);
+
   $("#progress-container").onmousemove = (e) => {
     if (serverTrackDuration <= 0) return;
     const rect = $("#progress-container").getBoundingClientRect();
diff --git a/public/index.html b/public/index.html
index 758131a..3591282 100644
--- a/public/index.html
+++ b/public/index.html
@@ -48,7 +48,9 @@
     </div>
     <div id="time"><span id="time-current">0:00</span><span id="time-total">0:00</span></div>
     <div id="progress-row">
+      <span id="btn-prev" title="Previous track">⏮</span>
       <span id="status-icon">▶</span>
+      <span id="btn-next" title="Next track">⏭</span>
       <div id="progress-container"><div id="progress-bar"></div><div id="seek-tooltip"></div></div>
     </div>
     <div id="buffer-bar"></div>
diff --git a/public/styles.css b/public/styles.css
index a2ac528..fbe9dcf 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -15,6 +15,8 @@ h1 { font-size: 1.2rem; color: #888; margin-bottom: 1.5rem; display: flex; align
 #btn-sync.synced { color: #4e8; text-shadow: 0 0 8px #4e8, 0 0 12px #4e8; }
 #time { display: flex; justify-content: space-between; font-size: 0.8rem; color: #888; margin-bottom: 0.3rem; }
 #progress-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
+#btn-prev, #btn-next { font-size: 0.8rem; cursor: pointer; opacity: 0.6; transition: opacity 0.2s; }
+#btn-prev:hover, #btn-next:hover { opacity: 1; }
 #status-icon { font-size: 0.9rem; width: 1rem; text-align: center; cursor: pointer; }
 #progress-container { background: #222; border-radius: 4px; height: 6px; cursor: pointer; position: relative; flex: 1; }
 #progress-bar { background: #555; height: 100%; border-radius: 4px; width: 0%; transition: width 0.3s linear; pointer-events: none; }