style changes

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();

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>

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; }