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>
This commit is contained in:
@@ -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 <>🎵</>
|
||||
useEffect(() => { setErrored(false) }, [src])
|
||||
if (errored) return <>🎵</>
|
||||
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} /> : <>🎵</>}
|
||||
{coverSrc ? <Cover src={coverSrc} /> : <>🎵</>}
|
||||
</div>
|
||||
<div className="qi-info">
|
||||
<div className="qi-title">{t.title}</div>
|
||||
|
||||
Reference in New Issue
Block a user