fix(node-player): use AuthImg component for cover art with Bearer auth
Publish Web Player Image / build-and-push-image (push) Has been cancelled
Publish Node Player Image / build-and-push-image (push) Has been cancelled
Publish Metadata Agent Image / build-and-push-image (push) Has been cancelled

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:
Ultradesu
2026-04-08 17:50:19 +01:00
parent d3aba1152c
commit 4a39d44211
4 changed files with 43 additions and 20 deletions
@@ -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>