Enhance audio playback controls with loop functionality. Added a loop button in index.html and corresponding styles in style.css. Updated ui.js to manage loop state and toggle behavior, allowing users to switch between looping the current tape and playing through the shelf. Refactored loadCassette function to accommodate new looping logic.

.claude/launch.json

@@ -4,7 +4,7 @@
     {
       "name": "lofinity",
       "runtimeExecutable": "/bin/sh",
-      "runtimeArgs": ["-c", "GRADIO_SERVER_PORT=$PORT LOFINITY_ENGINE=stub exec .venv/bin/python app.py"],
+      "runtimeArgs": ["-c", "GRADIO_SERVER_PORT=$PORT exec .venv/bin/python app.py"],
       "port": 7860,
       "autoPort": true
     }

frontend/index.html

@@ -254,6 +254,30 @@
         <span class="mini-reel"></span>
         <span class="mini-reel"></span>
       </div>
+      <button
+        id="deck-loop"
+        class="on"
+        aria-label="loop this tape"
+        aria-pressed="true"
+        title="looping this tape — click to play the whole shelf"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          width="20"
+          height="20"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.4"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <polyline points="17 1 21 5 17 9" />
+          <path d="M3 11V9a4 4 0 0 1 4-4h14" />
+          <polyline points="7 23 3 19 7 15" />
+          <path d="M21 13v2a4 4 0 0 1-4 4H3" />
+        </svg>
+      </button>
       <a
         id="deck-download"
         class="disabled"

frontend/style.css

@@ -1228,6 +1228,42 @@ body {
   animation: reel-spin 2.4s linear infinite;
 }
 
+#deck-loop {
+  flex: none;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.22);
+  color: #fff;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease,
+    box-shadow 0.15s ease,
+    border-color 0.15s ease;
+}
+
+#deck-loop:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+/* lit up = this tape loops; off = roll through the whole shelf */
+#deck-loop.on {
+  background: #ffd84a;
+  border-color: #ffd84a;
+  color: #3a2c14;
+  box-shadow: 0 0 10px rgba(255, 216, 74, 0.7);
+}
+
+#deck-loop:active {
+  transform: translateY(1px);
+}
+
 #deck-download {
   flex: none;
   width: 44px;

frontend/ui.js

@@ -43,6 +43,7 @@ export function initUI({
   const deckFill = $("deck-fill");
   const deckTime = $("deck-time");
   const deckCassette = $("deck-cassette");
+  const deckLoop = $("deck-loop");
   const deckDownload = $("deck-download");
 
   // Two audio elements so tapes can crossfade — one element can't overlap
@@ -56,6 +57,9 @@ export function initUI({
   let fadeTimer = null;
   let playlist = []; // collection songs, when playing as a playlist
   let playlistIndex = -1; // active track's index in `playlist`, or -1 = single loop
+  // When on (the default), the current tape loops; toggle it off to roll through
+  // the rest of the shelf. Controlled by the loop button on the tape deck.
+  let loopOne = true;
   const CROSSFADE = 2.5; // s — overlap as one tape rolls into the next
   const PICK_FADE = 0.9; // s — quick blend when you pick or skip a tape by hand
 
@@ -184,13 +188,14 @@ export function initUI({
     syncPlayState();
   }
 
-  // A freshly vended tape plays on its own and loops (not part of a playlist).
-  function loadCassette(song, shell) {
-    playlist = [];
-    playlistIndex = -1;
-    setNowPlaying(song, shell);
-    startTrack(song.url, { loop: true, fadeSec: PICK_FADE });
-    syncCards();
+  // A freshly vended tape starts playing and then rolls into the rest of the
+  // session's tapes (newest → older) instead of looping on itself. With only
+  // one tape on the shelf, the playlist re-triggers it, so a lone tape still
+  // loops seamlessly.
+  function loadCassette(song) {
+    songsList = sessionTapes; // the shelf doubles as the now-playing playlist
+    const idx = sessionTapes.indexOf(song);
+    playCollection(idx >= 0 ? idx : 0, PICK_FADE);
   }
 
   // Play the collection as a playlist from `index`; tracks crossfade into one
@@ -205,13 +210,14 @@ export function initUI({
       songsList[playlistIndex],
       SHELL_COLORS[playlistIndex % SHELL_COLORS.length],
     );
-    startTrack(songsList[playlistIndex].url, { loop: false, fadeSec });
+    startTrack(songsList[playlistIndex].url, { loop: loopOne, fadeSec });
     layoutCarousel();
   }
 
-  // Near the end of a playlist track, roll into the next one.
+  // Near the end of a playlist track, roll into the next one — unless the user
+  // has the loop toggle on, in which case the tape repeats itself natively.
   function maybeAdvance() {
-    if (playlistIndex < 0 || fadeTimer || !active.duration) return;
+    if (loopOne || playlistIndex < 0 || fadeTimer || !active.duration) return;
     if (active.currentTime < 1) return; // ignore the very start of a track
     if (active.duration - active.currentTime <= CROSSFADE) {
       playCollection(playlistIndex + 1, CROSSFADE);
@@ -402,6 +408,27 @@ export function initUI({
     if (active.src) togglePlay();
   });
 
+  // Loop toggle: lit = the current tape repeats; off = play through the shelf.
+  function syncLoopBtn() {
+    deckLoop.classList.toggle("on", loopOne);
+    deckLoop.setAttribute("aria-pressed", String(loopOne));
+    deckLoop.title = loopOne
+      ? "looping this tape — click to play the whole shelf"
+      : "playing the whole shelf — click to loop this tape";
+  }
+
+  function setLoop(on) {
+    loopOne = on;
+    // apply to the live element(s) so the change takes effect this play, not
+    // just on the next track
+    audioA.loop = on;
+    audioB.loop = on;
+    syncLoopBtn();
+  }
+
+  deckLoop.addEventListener("click", () => setLoop(!loopOne));
+  syncLoopBtn();
+
   const seek = (bar) => (e) => {
     if (!active.duration) return;
     const rect = bar.getBoundingClientRect();