From 11ff44fa621a021e8fa5499a84d70985a459cd30 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 15 Jul 2026 00:29:02 +0000
Subject: [PATCH 1/2] fix(player): handle missing audio instead of playing the
 wrong track
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When an imported track's bytes were gone, the load effect set `missing` and
returned WITHOUT touching the <audio> element, so it kept playing the PREVIOUS
track while the UI showed the new (silent) one — and nothing told the user
anything was wrong (the `missing` flag was never read).

- On a missing blob, pause the element, drop its src, and reset isPlaying, so
  the old track actually stops.
- Surface `missing` in the UI: the mini bar shows "Audio unavailable —
  re-import" and Now Playing shows a message in place of the scrubber; the play
  button is disabled in both (nothing to play), while next/prev stay enabled so
  you can move on.
- Reset progress/duration at the start of every load so the scrubber doesn't
  briefly show the previous track's position.

Verified in-browser: playing a real track then switching to a blob-less track
stops the audio (paused, src removed) and shows the unavailable message.

Fixes #3.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FkDKh1Uo1a4D7n5wCKdcKF
---
 src/components/Player.jsx    | 42 +++++++++++++++++++++---------------
 src/index.css                |  2 ++
 src/state/PlayerProvider.jsx | 15 ++++++++++++-
 3 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/src/components/Player.jsx b/src/components/Player.jsx
index e34c906..ca4e9cc 100644
--- a/src/components/Player.jsx
+++ b/src/components/Player.jsx
@@ -18,10 +18,12 @@ export default function Player() {
         <Artwork track={p.current} size={40} />
         <span className="mini__meta">
           <span className="mini__title">{p.current.title}</span>
-          <span className="mini__artist">{p.current.artist}</span>
+          <span className="mini__artist">
+            {p.missing ? 'Audio unavailable — re-import' : p.current.artist}
+          </span>
         </span>
         <span className="mini__controls" onClick={(e) => e.stopPropagation()}>
-          <button className="iconbtn" onClick={p.toggle} aria-label={p.isPlaying ? 'Pause' : 'Play'}>
+          <button className="iconbtn" onClick={p.toggle} aria-label={p.isPlaying ? 'Pause' : 'Play'} disabled={p.missing}>
             {p.isPlaying ? <PauseIcon /> : <PlayIcon />}
           </button>
           <button className="iconbtn" onClick={p.next} aria-label="Next"><NextIcon /></button>
@@ -82,25 +84,31 @@ function NowPlaying({ p, onClose }) {
         </button>
       </div>
 
-      <div className="scrub">
-        <input
-          type="range"
-          min="0"
-          max={p.duration || 0}
-          step="0.1"
-          value={p.progress}
-          onChange={(e) => p.seek(Number(e.target.value))}
-          style={{ background: `linear-gradient(to right, var(--accent) ${pct}%, var(--surface-2) ${pct}%)` }}
-        />
-        <div className="scrub__times">
-          <span>{formatTime(p.progress)}</span>
-          <span>{formatTime(p.duration)}</span>
+      {p.missing ? (
+        <p className="now__missing" role="status">
+          Audio unavailable — the file for this track is missing. Re-import it to play.
+        </p>
+      ) : (
+        <div className="scrub">
+          <input
+            type="range"
+            min="0"
+            max={p.duration || 0}
+            step="0.1"
+            value={p.progress}
+            onChange={(e) => p.seek(Number(e.target.value))}
+            style={{ background: `linear-gradient(to right, var(--accent) ${pct}%, var(--surface-2) ${pct}%)` }}
+          />
+          <div className="scrub__times">
+            <span>{formatTime(p.progress)}</span>
+            <span>{formatTime(p.duration)}</span>
+          </div>
         </div>
-      </div>
+      )}
 
       <div className="transport">
         <button className="iconbtn" onClick={p.prev} aria-label="Previous"><PrevIcon /></button>
-        <button className="playbtn" onClick={p.toggle} aria-label={p.isPlaying ? 'Pause' : 'Play'}>
+        <button className="playbtn" onClick={p.toggle} aria-label={p.isPlaying ? 'Pause' : 'Play'} disabled={p.missing}>
           {p.isPlaying ? <PauseIcon big /> : <PlayIcon big />}
         </button>
         <button className="iconbtn" onClick={p.next} aria-label="Next"><NextIcon /></button>
diff --git a/src/index.css b/src/index.css
index afa4660..6b061c5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -483,6 +483,8 @@ body {
   box-shadow: 0 8px 24px rgba(233, 162, 59, 0.35);
 }
 .playbtn:active { transform: scale(0.96); }
+.playbtn:disabled, .mini__controls .iconbtn:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
+.now__missing { margin: 14px 0; padding: 0 24px; text-align: center; font-size: 13px; color: var(--accent); }
 
 .loopbtn {
   display: inline-flex; align-items: center; gap: 8px;
diff --git a/src/state/PlayerProvider.jsx b/src/state/PlayerProvider.jsx
index 5bfc46c..fec3621 100644
--- a/src/state/PlayerProvider.jsx
+++ b/src/state/PlayerProvider.jsx
@@ -80,6 +80,10 @@ export function PlayerProvider({ children }) {
     let cancelled = false
     countedRef.current = false
     setMissing(false)
+    // Reset the scrubber immediately so it doesn't show the previous track's
+    // position/length until the new metadata arrives.
+    setProgress(0)
+    setDuration(0)
 
     const revokePrev = () => {
       if (objectUrlRef.current) {
@@ -93,7 +97,16 @@ export function PlayerProvider({ children }) {
       if (!url) {
         const blob = await getAudioBlob(current.id)
         if (!blob) {
-          if (!cancelled) setMissing(true)
+          // Bytes are gone (cleared storage / failed import). Stop the element
+          // so it doesn't keep playing the PREVIOUS track under a now-missing
+          // `current`, and reset state so the UI can show an honest message.
+          if (!cancelled) {
+            audio.pause()
+            audio.removeAttribute('src')
+            audio.load()
+            setIsPlaying(false)
+            setMissing(true)
+          }
           return
         }
         if (cancelled) return

From daa8e9eef1c9ed57c2169b12653ca95c7d28ca05 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 15 Jul 2026 00:32:15 +0000
Subject: [PATCH 2/2] chore(player): revoke previous blob URL on missing-audio
 branch

Review follow-up: release the prior track's object URL when we bail on a
missing blob, instead of leaving it allocated until the next successful load.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FkDKh1Uo1a4D7n5wCKdcKF
---
 src/state/PlayerProvider.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/state/PlayerProvider.jsx b/src/state/PlayerProvider.jsx
index fec3621..610d3d5 100644
--- a/src/state/PlayerProvider.jsx
+++ b/src/state/PlayerProvider.jsx
@@ -104,6 +104,7 @@ export function PlayerProvider({ children }) {
             audio.pause()
             audio.removeAttribute('src')
             audio.load()
+            revokePrev() // release the previous track's blob URL too
             setIsPlaying(false)
             setMissing(true)
           }