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>
This commit is contained in:
@@ -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 <>🎵</>
|
||||
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} /> : <>🎵</>}
|
||||
{hasAlbum ? <Cover slug={t.slug} /> : <>🎵</>}
|
||||
</div>
|
||||
<div className="qi-info">
|
||||
<div className="qi-title">{t.title}</div>
|
||||
|
||||
Reference in New Issue
Block a user