Merge pull request 'feature/USERS' (#11) from feature/USERS into DEV

Reviewed-on: #11

.gitignore

@@ -2,4 +2,3 @@
 /docker/inbox
 /docker/storage
 .env
-.DS_Store

furumi-node-player/client/.env.example

@@ -1,2 +1 @@
-# Leave empty — vite proxy handles /api in dev, same-origin in production
+VITE_FURUMI_API_URL=http://localhost:8085
-VITE_FURUMI_API_URL=

furumi-node-player/client/public/sw.js

@@ -1,45 +0,0 @@
-const DB_NAME = 'furumi-sw'
-const STORE = 'auth'
-const KEY = 'bearer'
-
-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)
-  if (url.origin !== self.location.origin || !url.pathname.startsWith('/api/')) return
-
-  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())
-self.addEventListener('activate', (e) => e.waitUntil(self.clients.claim()))

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 { furumiApi, searchTracks, recordPlay } from './furumiApi'
+import { searchTracks, preloadStream, fetchCoverBlob, recordPlay } from './furumiApi'
 import { store, useAppDispatch, useAppSelector } from './store'
 import { fetchArtists } from './store/slices/artistsSlice'
 import { fetchArtistAlbums } from './store/slices/albumsSlice'
@@ -94,11 +94,9 @@ export function FurumiPlayer({ user }: { user: UserProfile }) {
           album: '',
         })
         navigator.mediaSession.metadata = meta
-        furumiApi.get(`/tracks/${nowPlayingTrack.slug}/cover`, { responseType: 'blob' })
+        fetchCoverBlob(nowPlayingTrack.slug).then((url) => {
-          .then((res) => {
+          if (url) meta.artwork = [{ src: url, sizes: '512x512' }]
-            meta.artwork = [{ src: URL.createObjectURL(res.data), sizes: '512x512' }]
+        })
-          })
-          .catch(() => {})
       } catch {
         // ignore
       }
@@ -394,7 +392,7 @@ export function FurumiPlayer({ user }: { user: UserProfile }) {
           { slug, title: '', artist: '', album_slug: null, duration: null },
           true,
         )
-        void playback.loadStreamForTrack(slug)
+        void preloadStream(slug)
       }
     }
     searchSelectRef.current = onSearchSelect

furumi-node-player/client/src/audioPlaybackService.ts

@@ -1,4 +1,4 @@
-import { furumiApi } from './furumiApi'
+import { preloadStream } from './furumiApi'
 import { fmt } from './utils'
 
 const MAX_PLAYBACK_ERROR_SKIPS = 5
@@ -109,13 +109,9 @@ export function attachAudioPlayback(
   volSlider?.addEventListener('input', onVolInput)
 
   async function loadStreamForTrack(slug: string) {
-    try {
+    const response = await preloadStream(slug)
-      const res = await furumiApi.get(`/stream/${slug}`, { responseType: 'blob' })
+    audio.src = URL.createObjectURL(response?.data)
-      audio.src = URL.createObjectURL(res.data)
+    await audio.play().catch(() => { })
-      await audio.play().catch(() => { })
-    } catch {
-      // stream failed
-    }
   }
 
   function pauseAndClearSource() {

furumi-node-player/client/src/components/AuthImg.tsx

@@ -1,24 +0,0 @@
-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} />
-}

furumi-node-player/client/src/components/NowPlaying.tsx

@@ -1,13 +1,13 @@
 import { useState } from 'react'
-import { AuthImg } from './AuthImg'
 import type { QueueItem } from './QueueList'
+import { useCoverUrl } from '../hooks/useCoverUrl'
 
 function Cover({ slug }: { slug: string }) {
   const [errored, setErrored] = useState(false)
-  const src = `/tracks/${slug}/cover`
+  const src = useCoverUrl(slug)
 
-  if (errored) return <>&#127925;</>
+  if (!src || errored) return <>&#127925;</>
-  return <AuthImg src={src} alt="" onError={() => setErrored(true)} />
+  return <img src={src} alt="" onError={() => setErrored(true)} />
 }
 
 export function NowPlaying({ track }: { track: QueueItem | null }) {
@@ -45,3 +45,4 @@ export function NowPlaying({ track }: { track: QueueItem | null }) {
     </div>
   )
 }
+

furumi-node-player/client/src/components/QueueList.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { AuthImg } from './AuthImg'
+import { useCoverUrl } from '../hooks/useCoverUrl'
 
 export type QueueItem = {
   slug: string
@@ -34,8 +34,10 @@ function fmt(secs: number) {
 
 function Cover({ slug }: { slug: string }) {
   const [errored, setErrored] = useState(false)
-  if (errored) return <>&#127925;</>
+  const src = useCoverUrl(slug)
-  return <AuthImg src={`/tracks/${slug}/cover`} alt="" onError={() => setErrored(true)} />
+
+  if (!src || errored) return <>&#127925;</>
+  return <img src={src} alt="" onError={() => setErrored(true)} />
 }
 
 export function QueueList({

furumi-node-player/client/src/furumiApi.ts

@@ -8,20 +8,8 @@ export const furumiApi = axios.create({
   baseURL: API_ROOT,
 })
 
-function sendTokenToSW(token: string) {
-  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) {
   furumiApi.defaults.headers.common['Authorization'] = `Bearer ${token}`
-  sendTokenToSW(token)
 }
 
 export function clearAuthToken() {
@@ -49,6 +37,7 @@ 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 })
       }
@@ -107,3 +96,14 @@ 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)
+}
+

furumi-node-player/client/src/hooks/useCoverUrl.ts

@@ -0,0 +1,28 @@
+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
+}

furumi-node-player/client/src/main.tsx

@@ -5,10 +5,6 @@ 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}>

furumi-node-player/client/vite.config.ts

@@ -14,10 +14,6 @@ export default defineConfig({
         target: 'http://localhost:3001',
         changeOrigin: true,
       },
-      '/api': {
-        target: 'http://localhost:8085',
-        changeOrigin: true,
-      },
     },
   },
 })