From d6dd046fad076c6e6ab13c8fa43cf8617a4b6e0c Mon Sep 17 00:00:00 2001
From: Ultradesu <ultradesu@hexor.cy>
Date: Wed, 8 Apr 2026 17:30:17 +0100
Subject: [PATCH 1/5] feat(node-player): use Service Worker for auth, enable
 streaming playback

Add a Service Worker that intercepts /api/* requests and injects the
Bearer token. This allows <audio> and <img> elements to use direct
URLs instead of downloading entire files as blobs first.

- Audio now streams progressively (no full download before playback)
- Cover art loads via regular <img src> (SW adds auth header)
- Remove blob-based preloadStream, fetchCoverBlob, useCoverUrl hook
- Register SW in main.tsx, token synced via postMessage

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .gitignore                                    |  1 +
 furumi-node-player/client/public/sw.js        | 23 +++++++++++++++
 .../client/src/FurumiPlayer.tsx               | 12 ++++----
 .../client/src/audioPlaybackService.ts        |  5 ++--
 .../client/src/components/NowPlaying.tsx      | 18 +++++++-----
 .../client/src/components/QueueList.tsx       | 13 ++++-----
 furumi-node-player/client/src/furumiApi.ts    | 21 ++++++--------
 .../client/src/hooks/useCoverUrl.ts           | 28 -------------------
 furumi-node-player/client/src/main.tsx        |  4 +++
 9 files changed, 61 insertions(+), 64 deletions(-)
 create mode 100644 furumi-node-player/client/public/sw.js
 delete mode 100644 furumi-node-player/client/src/hooks/useCoverUrl.ts

diff --git a/.gitignore b/.gitignore
index 2f3c66b..30f4604 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 /docker/inbox
 /docker/storage
 .env
+.DS_Store
diff --git a/furumi-node-player/client/public/sw.js b/furumi-node-player/client/public/sw.js
new file mode 100644
index 0000000..6ef25be
--- /dev/null
+++ b/furumi-node-player/client/public/sw.js
@@ -0,0 +1,23 @@
+let bearerToken = null
+
+self.addEventListener('message', (e) => {
+  if (e.data?.type === 'SET_TOKEN') {
+    bearerToken = e.data.token
+  }
+})
+
+self.addEventListener('fetch', (e) => {
+  const url = new URL(e.request.url)
+  // Only intercept /api/ requests to the same origin
+  if (url.origin !== self.location.origin || !url.pathname.startsWith('/api/')) return
+  if (!bearerToken) return
+
+  const authedRequest = new Request(e.request, {
+    headers: new Headers(e.request.headers),
+  })
+  authedRequest.headers.set('Authorization', `Bearer ${bearerToken}`)
+  e.respondWith(fetch(authedRequest))
+})
+
+self.addEventListener('install', () => self.skipWaiting())
+self.addEventListener('activate', (e) => e.waitUntil(self.clients.claim()))
diff --git a/furumi-node-player/client/src/FurumiPlayer.tsx b/furumi-node-player/client/src/FurumiPlayer.tsx
index 4217803..2633975 100644
--- a/furumi-node-player/client/src/FurumiPlayer.tsx
+++ b/furumi-node-player/client/src/FurumiPlayer.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState, type MouseEvent as ReactMouseEvent } from 'react'
 import './furumi-player.css'
-import { searchTracks, preloadStream, fetchCoverBlob, recordPlay } from './furumiApi'
+import { API_ROOT, searchTracks, recordPlay } from './furumiApi'
 import { store, useAppDispatch, useAppSelector } from './store'
 import { fetchArtists } from './store/slices/artistsSlice'
 import { fetchArtistAlbums } from './store/slices/albumsSlice'
@@ -88,14 +88,12 @@ export function FurumiPlayer({ user }: { user: UserProfile }) {
     document.title = `${nowPlayingTrack.title} — Furumi`
     if ('mediaSession' in navigator) {
       try {
-        const meta = new window.MediaMetadata({
+        const coverUrl = `${API_ROOT}/tracks/${nowPlayingTrack.slug}/cover`
+        navigator.mediaSession.metadata = new window.MediaMetadata({
           title: nowPlayingTrack.title,
           artist: nowPlayingTrack.artist || '',
           album: '',
-        })
-        navigator.mediaSession.metadata = meta
-        fetchCoverBlob(nowPlayingTrack.slug).then((url) => {
-          if (url) meta.artwork = [{ src: url, sizes: '512x512' }]
+          artwork: [{ src: coverUrl, sizes: '512x512' }],
         })
       } catch {
         // ignore
@@ -392,7 +390,7 @@ export function FurumiPlayer({ user }: { user: UserProfile }) {
           { slug, title: '', artist: '', album_slug: null, duration: null },
           true,
         )
-        void preloadStream(slug)
+        void playback.loadStreamForTrack(slug)
       }
     }
     searchSelectRef.current = onSearchSelect
diff --git a/furumi-node-player/client/src/audioPlaybackService.ts b/furumi-node-player/client/src/audioPlaybackService.ts
index e064fbd..9d94ad2 100644
--- a/furumi-node-player/client/src/audioPlaybackService.ts
+++ b/furumi-node-player/client/src/audioPlaybackService.ts
@@ -1,4 +1,4 @@
-import { preloadStream } from './furumiApi'
+import { API_ROOT } from './furumiApi'
 import { fmt } from './utils'
 
 const MAX_PLAYBACK_ERROR_SKIPS = 5
@@ -109,8 +109,7 @@ export function attachAudioPlayback(
   volSlider?.addEventListener('input', onVolInput)
 
   async function loadStreamForTrack(slug: string) {
-    const response = await preloadStream(slug)
-    audio.src = URL.createObjectURL(response?.data)
+    audio.src = `${API_ROOT}/stream/${slug}`
     await audio.play().catch(() => { })
   }
 
diff --git a/furumi-node-player/client/src/components/NowPlaying.tsx b/furumi-node-player/client/src/components/NowPlaying.tsx
index 25e4793..ac323bc 100644
--- a/furumi-node-player/client/src/components/NowPlaying.tsx
+++ b/furumi-node-player/client/src/components/NowPlaying.tsx
@@ -1,12 +1,15 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { API_ROOT } from '../furumiApi'
 import type { QueueItem } from './QueueList'
-import { useCoverUrl } from '../hooks/useCoverUrl'
 
-function Cover({ slug }: { slug: string }) {
+function Cover({ src }: { src: string }) {
   const [errored, setErrored] = useState(false)
-  const src = useCoverUrl(slug)
 
-  if (!src || errored) return <>&#127925;</>
+  useEffect(() => {
+    setErrored(false)
+  }, [src])
+
+  if (errored) return <>&#127925;</>
   return <img src={src} alt="" onError={() => setErrored(true)} />
 }
 
@@ -29,10 +32,12 @@ export function NowPlaying({ track }: { track: QueueItem | null }) {
     )
   }
 
+  const coverUrl = `${API_ROOT}/tracks/${track.slug}/cover`
+
   return (
     <div className="np-info">
       <div className="np-cover" id="npCover">
-        <Cover slug={track.slug} />
+        <Cover src={coverUrl} />
       </div>
       <div className="np-text">
         <div className="np-title" id="npTitle">
@@ -45,4 +50,3 @@ export function NowPlaying({ track }: { track: QueueItem | null }) {
     </div>
   )
 }
-
diff --git a/furumi-node-player/client/src/components/QueueList.tsx b/furumi-node-player/client/src/components/QueueList.tsx
index 3cb7428..d2877d3 100644
--- a/furumi-node-player/client/src/components/QueueList.tsx
+++ b/furumi-node-player/client/src/components/QueueList.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { useCoverUrl } from '../hooks/useCoverUrl'
+import { API_ROOT } from '../furumiApi'
 
 export type QueueItem = {
   slug: string
@@ -32,11 +32,10 @@ function fmt(secs: number) {
   return `${m}:${pad(s % 60)}`
 }
 
-function Cover({ slug }: { slug: string }) {
+function Cover({ src }: { src: string }) {
   const [errored, setErrored] = useState(false)
-  const src = useCoverUrl(slug)
-
-  if (!src || errored) return <>&#127925;</>
+  useEffect(() => { setErrored(false) }, [src])
+  if (errored) return <>&#127925;</>
   return <img src={src} alt="" onError={() => setErrored(true)} />
 }
 
@@ -75,7 +74,7 @@ export function QueueList({
         if (!t) return null
 
         const isPlaying = origIdx === playingOrigIdx
-        const hasAlbum = !!t.album_slug
+        const coverSrc = t.album_slug ? `${API_ROOT}/tracks/${t.slug}/cover` : ''
         const dur = t.duration ? fmt(t.duration) : ''
         const isDragging = draggingPos === pos
         const isDragOver = dragOverPos === pos
@@ -116,7 +115,7 @@ export function QueueList({
           >
             <span className="qi-index">{isPlaying ? '' : pos + 1}</span>
             <div className="qi-cover">
-              {hasAlbum ? <Cover slug={t.slug} /> : <>&#127925;</>}
+              {coverSrc ? <Cover src={coverSrc} /> : <>&#127925;</>}
             </div>
             <div className="qi-info">
               <div className="qi-title">{t.title}</div>
diff --git a/furumi-node-player/client/src/furumiApi.ts b/furumi-node-player/client/src/furumiApi.ts
index 4ed3312..c37eee3 100644
--- a/furumi-node-player/client/src/furumiApi.ts
+++ b/furumi-node-player/client/src/furumiApi.ts
@@ -8,8 +8,17 @@ export const furumiApi = axios.create({
   baseURL: API_ROOT,
 })
 
+function sendTokenToSW(token: string) {
+  navigator.serviceWorker?.controller?.postMessage({ type: 'SET_TOKEN', token })
+  // Also send to waiting/installing SW
+  navigator.serviceWorker?.ready.then((reg) => {
+    reg.active?.postMessage({ type: 'SET_TOKEN', token })
+  })
+}
+
 export function setAuthToken(token: string) {
   furumiApi.defaults.headers.common['Authorization'] = `Bearer ${token}`
+  sendTokenToSW(token)
 }
 
 export function clearAuthToken() {
@@ -37,7 +46,6 @@ furumiApi.interceptors.response.use(
     const original = error.config
     if (error.response?.status === 401 && !original._retried) {
       original._retried = true
-      // Deduplicate concurrent refresh attempts
       if (!refreshPromise) {
         refreshPromise = refreshToken().finally(() => { refreshPromise = null })
       }
@@ -96,14 +104,3 @@ export async function getRecentPlays(): Promise<RecentPlay[] | null> {
 export async function recordPlay(trackSlug: string): Promise<void> {
   await furumiApi.post(`/tracks/${trackSlug}/play`).catch(() => null)
 }
-
-export async function preloadStream(trackSlug: string) {
-  return await furumiApi.get(`/stream/${trackSlug}`, { responseType: 'blob' }).catch(() => null)
-}
-
-export async function fetchCoverBlob(trackSlug: string): Promise<string | null> {
-  const res = await furumiApi.get(`/tracks/${trackSlug}/cover`, { responseType: 'blob' }).catch(() => null)
-  if (!res?.data) return null
-  return URL.createObjectURL(res.data)
-}
-
diff --git a/furumi-node-player/client/src/hooks/useCoverUrl.ts b/furumi-node-player/client/src/hooks/useCoverUrl.ts
deleted file mode 100644
index 1b53be0..0000000
--- a/furumi-node-player/client/src/hooks/useCoverUrl.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useEffect, useState } from 'react'
-import { fetchCoverBlob } from '../furumiApi'
-
-export function useCoverUrl(trackSlug: string | undefined): string | null {
-  const [url, setUrl] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!trackSlug) {
-      setUrl(null)
-      return
-    }
-
-    let revoke: string | null = null
-
-    fetchCoverBlob(trackSlug).then((blobUrl) => {
-      if (blobUrl) {
-        revoke = blobUrl
-        setUrl(blobUrl)
-      }
-    })
-
-    return () => {
-      if (revoke) URL.revokeObjectURL(revoke)
-    }
-  }, [trackSlug])
-
-  return url
-}
diff --git a/furumi-node-player/client/src/main.tsx b/furumi-node-player/client/src/main.tsx
index 9d4c1bf..edf42b0 100644
--- a/furumi-node-player/client/src/main.tsx
+++ b/furumi-node-player/client/src/main.tsx
@@ -5,6 +5,10 @@ import { store } from './store'
 import './index.css'
 import App from './App.tsx'
 
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js')
+}
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <Provider store={store}>

From ea2fc53faf5e2a4a26594988dc3ce0ebde3eef0e Mon Sep 17 00:00:00 2001
From: Ultradesu <ultradesu@hexor.cy>
Date: Wed, 8 Apr 2026 17:40:47 +0100
Subject: [PATCH 2/5] fix(node-player): proxy /api through vite dev server for
 same-origin SW

Service Worker only intercepts same-origin requests. In dev mode, API
calls went directly to localhost:8085 (cross-origin), bypassing the SW.
Now vite proxies /api to Rust API, keeping everything same-origin so
the SW can inject Bearer tokens for audio/image requests.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 furumi-node-player/client/.env.example   | 3 ++-
 furumi-node-player/client/vite.config.ts | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/furumi-node-player/client/.env.example b/furumi-node-player/client/.env.example
index eeec224..2ce30f6 100644
--- a/furumi-node-player/client/.env.example
+++ b/furumi-node-player/client/.env.example
@@ -1 +1,2 @@
-VITE_FURUMI_API_URL=http://localhost:8085
+# Leave empty — vite proxy handles /api in dev, same-origin in production
+VITE_FURUMI_API_URL=
diff --git a/furumi-node-player/client/vite.config.ts b/furumi-node-player/client/vite.config.ts
index 58fa2c9..9f9fba5 100644
--- a/furumi-node-player/client/vite.config.ts
+++ b/furumi-node-player/client/vite.config.ts
@@ -14,6 +14,10 @@ export default defineConfig({
         target: 'http://localhost:3001',
         changeOrigin: true,
       },
+      '/api': {
+        target: 'http://localhost:8085',
+        changeOrigin: true,
+      },
     },
   },
 })

From c11b71a0efdb753a3271682f4d2f58edb53bcb0b Mon Sep 17 00:00:00 2001
From: Ultradesu <ultradesu@hexor.cy>
Date: Wed, 8 Apr 2026 17:43:33 +0100
Subject: [PATCH 3/5] fix(node-player): use IndexedDB for SW token instead of
 postMessage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

postMessage is unreliable on first load — SW may not be active yet.
IndexedDB is shared between page and SW, so the token is always
available regardless of SW lifecycle timing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 furumi-node-player/client/public/sw.js     | 46 ++++++++++++++++------
 furumi-node-player/client/src/furumiApi.ts | 13 +++---
 2 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/furumi-node-player/client/public/sw.js b/furumi-node-player/client/public/sw.js
index 6ef25be..a17ac24 100644
--- a/furumi-node-player/client/public/sw.js
+++ b/furumi-node-player/client/public/sw.js
@@ -1,22 +1,44 @@
-let bearerToken = null
+const DB_NAME = 'furumi-sw'
+const STORE = 'auth'
+const KEY = 'bearer'
 
-self.addEventListener('message', (e) => {
-  if (e.data?.type === 'SET_TOKEN') {
-    bearerToken = e.data.token
+function openDB() {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, 1)
+    req.onupgradeneeded = () => req.result.createObjectStore(STORE)
+    req.onsuccess = () => resolve(req.result)
+    req.onerror = () => reject(req.error)
+  })
+}
+
+async function getToken() {
+  try {
+    const db = await openDB()
+    return new Promise((resolve) => {
+      const tx = db.transaction(STORE, 'readonly')
+      const req = tx.objectStore(STORE).get(KEY)
+      req.onsuccess = () => resolve(req.result || null)
+      req.onerror = () => resolve(null)
+    })
+  } catch {
+    return null
   }
-})
+}
 
 self.addEventListener('fetch', (e) => {
   const url = new URL(e.request.url)
-  // Only intercept /api/ requests to the same origin
   if (url.origin !== self.location.origin || !url.pathname.startsWith('/api/')) return
-  if (!bearerToken) return
 
-  const authedRequest = new Request(e.request, {
-    headers: new Headers(e.request.headers),
-  })
-  authedRequest.headers.set('Authorization', `Bearer ${bearerToken}`)
-  e.respondWith(fetch(authedRequest))
+  e.respondWith(
+    (async () => {
+      const token = await getToken()
+      if (!token) return fetch(e.request)
+
+      const headers = new Headers(e.request.headers)
+      headers.set('Authorization', `Bearer ${token}`)
+      return fetch(new Request(e.request, { headers }))
+    })()
+  )
 })
 
 self.addEventListener('install', () => self.skipWaiting())
diff --git a/furumi-node-player/client/src/furumiApi.ts b/furumi-node-player/client/src/furumiApi.ts
index c37eee3..b7fc636 100644
--- a/furumi-node-player/client/src/furumiApi.ts
+++ b/furumi-node-player/client/src/furumiApi.ts
@@ -9,11 +9,14 @@ export const furumiApi = axios.create({
 })
 
 function sendTokenToSW(token: string) {
-  navigator.serviceWorker?.controller?.postMessage({ type: 'SET_TOKEN', token })
-  // Also send to waiting/installing SW
-  navigator.serviceWorker?.ready.then((reg) => {
-    reg.active?.postMessage({ type: 'SET_TOKEN', token })
-  })
+  try {
+    const req = indexedDB.open('furumi-sw', 1)
+    req.onupgradeneeded = () => req.result.createObjectStore('auth')
+    req.onsuccess = () => {
+      const tx = req.result.transaction('auth', 'readwrite')
+      tx.objectStore('auth').put(token, 'bearer')
+    }
+  } catch { /* ignore */ }
 }
 
 export function setAuthToken(token: string) {

From d3aba1152ce4ea5cfeb39a750238ca0aa530b64a Mon Sep 17 00:00:00 2001
From: Ultradesu <ultradesu@hexor.cy>
Date: Wed, 8 Apr 2026 17:45:54 +0100
Subject: [PATCH 4/5] fix(node-player): use blob for audio stream, keep SW for
 cover art

<audio> elements with Sec-Fetch-Mode: no-cors are unreliable with
Service Workers across browsers. Revert stream to blob download via
axios (Bearer token works). SW remains for cover art in <img> tags.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 furumi-node-player/client/src/audioPlaybackService.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/furumi-node-player/client/src/audioPlaybackService.ts b/furumi-node-player/client/src/audioPlaybackService.ts
index 9d94ad2..a632e7f 100644
--- a/furumi-node-player/client/src/audioPlaybackService.ts
+++ b/furumi-node-player/client/src/audioPlaybackService.ts
@@ -1,4 +1,4 @@
-import { API_ROOT } from './furumiApi'
+import { furumiApi } from './furumiApi'
 import { fmt } from './utils'
 
 const MAX_PLAYBACK_ERROR_SKIPS = 5
@@ -109,8 +109,13 @@ export function attachAudioPlayback(
   volSlider?.addEventListener('input', onVolInput)
 
   async function loadStreamForTrack(slug: string) {
-    audio.src = `${API_ROOT}/stream/${slug}`
-    await audio.play().catch(() => { })
+    try {
+      const res = await furumiApi.get(`/stream/${slug}`, { responseType: 'blob' })
+      audio.src = URL.createObjectURL(res.data)
+      await audio.play().catch(() => { })
+    } catch {
+      // stream failed
+    }
   }
 
   function pauseAndClearSource() {

From 4a39d44211f997a9e35dc86909e87e7723602d55 Mon Sep 17 00:00:00 2001
From: Ultradesu <ultradesu@hexor.cy>
Date: Wed, 8 Apr 2026 17:50:19 +0100
Subject: [PATCH 5/5] fix(node-player): use AuthImg component for cover art
 with Bearer auth

SW doesn't reliably intercept <img> requests (no-cors mode). Use a
thin AuthImg component that loads images via axios (which has the
Bearer token) and displays them as blob URLs. Audio streaming still
works via SW.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../client/src/FurumiPlayer.tsx               | 12 ++++++----
 .../client/src/components/AuthImg.tsx         | 24 +++++++++++++++++++
 .../client/src/components/NowPlaying.tsx      | 16 +++++--------
 .../client/src/components/QueueList.tsx       | 11 ++++-----
 4 files changed, 43 insertions(+), 20 deletions(-)
 create mode 100644 furumi-node-player/client/src/components/AuthImg.tsx

diff --git a/furumi-node-player/client/src/FurumiPlayer.tsx b/furumi-node-player/client/src/FurumiPlayer.tsx
index 2633975..6c058f7 100644
--- a/furumi-node-player/client/src/FurumiPlayer.tsx
+++ b/furumi-node-player/client/src/FurumiPlayer.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState, type MouseEvent as ReactMouseEvent } from 'react'
 import './furumi-player.css'
-import { API_ROOT, searchTracks, recordPlay } from './furumiApi'
+import { furumiApi, searchTracks, recordPlay } from './furumiApi'
 import { store, useAppDispatch, useAppSelector } from './store'
 import { fetchArtists } from './store/slices/artistsSlice'
 import { fetchArtistAlbums } from './store/slices/albumsSlice'
@@ -88,13 +88,17 @@ export function FurumiPlayer({ user }: { user: UserProfile }) {
     document.title = `${nowPlayingTrack.title} — Furumi`
     if ('mediaSession' in navigator) {
       try {
-        const coverUrl = `${API_ROOT}/tracks/${nowPlayingTrack.slug}/cover`
-        navigator.mediaSession.metadata = new window.MediaMetadata({
+        const meta = new window.MediaMetadata({
           title: nowPlayingTrack.title,
           artist: nowPlayingTrack.artist || '',
           album: '',
-          artwork: [{ src: coverUrl, sizes: '512x512' }],
         })
+        navigator.mediaSession.metadata = meta
+        furumiApi.get(`/tracks/${nowPlayingTrack.slug}/cover`, { responseType: 'blob' })
+          .then((res) => {
+            meta.artwork = [{ src: URL.createObjectURL(res.data), sizes: '512x512' }]
+          })
+          .catch(() => {})
       } catch {
         // ignore
       }
diff --git a/furumi-node-player/client/src/components/AuthImg.tsx b/furumi-node-player/client/src/components/AuthImg.tsx
new file mode 100644
index 0000000..fadfedf
--- /dev/null
+++ b/furumi-node-player/client/src/components/AuthImg.tsx
@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react'
+import { furumiApi } from '../furumiApi'
+
+export function AuthImg({ src, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) {
+  const [blobUrl, setBlobUrl] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!src) return
+    let revoked = false
+    furumiApi.get(src, { responseType: 'blob' })
+      .then((res) => {
+        if (!revoked) setBlobUrl(URL.createObjectURL(res.data))
+      })
+      .catch(() => {})
+    return () => {
+      revoked = true
+      if (blobUrl) URL.revokeObjectURL(blobUrl)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [src])
+
+  if (!blobUrl) return null
+  return <img src={blobUrl} alt={alt ?? ''} {...props} />
+}
diff --git a/furumi-node-player/client/src/components/NowPlaying.tsx b/furumi-node-player/client/src/components/NowPlaying.tsx
index ac323bc..8adf61a 100644
--- a/furumi-node-player/client/src/components/NowPlaying.tsx
+++ b/furumi-node-player/client/src/components/NowPlaying.tsx
@@ -1,16 +1,14 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { API_ROOT } from '../furumiApi'
+import { AuthImg } from './AuthImg'
 import type { QueueItem } from './QueueList'
 
-function Cover({ src }: { src: string }) {
+function Cover({ slug }: { slug: string }) {
   const [errored, setErrored] = useState(false)
-
-  useEffect(() => {
-    setErrored(false)
-  }, [src])
+  const src = `/tracks/${slug}/cover`
 
   if (errored) return <>&#127925;</>
-  return <img src={src} alt="" onError={() => setErrored(true)} />
+  return <AuthImg src={src} alt="" onError={() => setErrored(true)} />
 }
 
 export function NowPlaying({ track }: { track: QueueItem | null }) {
@@ -32,12 +30,10 @@ export function NowPlaying({ track }: { track: QueueItem | null }) {
     )
   }
 
-  const coverUrl = `${API_ROOT}/tracks/${track.slug}/cover`
-
   return (
     <div className="np-info">
       <div className="np-cover" id="npCover">
-        <Cover src={coverUrl} />
+        <Cover slug={track.slug} />
       </div>
       <div className="np-text">
         <div className="np-title" id="npTitle">
diff --git a/furumi-node-player/client/src/components/QueueList.tsx b/furumi-node-player/client/src/components/QueueList.tsx
index d2877d3..57865de 100644
--- a/furumi-node-player/client/src/components/QueueList.tsx
+++ b/furumi-node-player/client/src/components/QueueList.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { API_ROOT } from '../furumiApi'
+import { AuthImg } from './AuthImg'
 
 export type QueueItem = {
   slug: string
@@ -32,11 +32,10 @@ function fmt(secs: number) {
   return `${m}:${pad(s % 60)}`
 }
 
-function Cover({ src }: { src: string }) {
+function Cover({ slug }: { slug: string }) {
   const [errored, setErrored] = useState(false)
-  useEffect(() => { setErrored(false) }, [src])
   if (errored) return <>&#127925;</>
-  return <img src={src} alt="" onError={() => setErrored(true)} />
+  return <AuthImg src={`/tracks/${slug}/cover`} alt="" onError={() => setErrored(true)} />
 }
 
 export function QueueList({
@@ -74,7 +73,7 @@ export function QueueList({
         if (!t) return null
 
         const isPlaying = origIdx === playingOrigIdx
-        const coverSrc = t.album_slug ? `${API_ROOT}/tracks/${t.slug}/cover` : ''
+        const hasAlbum = !!t.album_slug
         const dur = t.duration ? fmt(t.duration) : ''
         const isDragging = draggingPos === pos
         const isDragOver = dragOverPos === pos
@@ -115,7 +114,7 @@ export function QueueList({
           >
             <span className="qi-index">{isPlaying ? '' : pos + 1}</span>
             <div className="qi-cover">
-              {coverSrc ? <Cover src={coverSrc} /> : <>&#127925;</>}
+              {hasAlbum ? <Cover slug={t.slug} /> : <>&#127925;</>}
             </div>
             <div className="qi-info">
               <div className="qi-title">{t.title}</div>