53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
|
import { useEffect, useState } from 'react'
|
||
|
|
import type { QueueItem } from './QueueList'
|
||
|
|
|
||
|
|
function Cover({ src }: { src: string }) {
|
||
|
|
const [errored, setErrored] = useState(false)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setErrored(false)
|
||
|
|
}, [src])
|
||
|
|
|
||
|
|
if (errored) return <>🎵</>
|
||
|
|
return <img src={src} alt="" onError={() => setErrored(true)} />
|
||
|
|
}
|
||
|
|
|
||
|
|
export function NowPlaying({ apiRoot, track }: { apiRoot: string; track: QueueItem | null }) {
|
||
|
|
if (!track) {
|
||
|
|
return (
|
||
|
|
<div className="np-info">
|
||
|
|
<div className="np-cover" id="npCover">
|
||
|
|
🎵
|
||
|
|
</div>
|
||
|
|
<div className="np-text">
|
||
|
|
<div className="np-title" id="npTitle">
|
||
|
|
Nothing playing
|
||
|
|
</div>
|
||
|
|
<div className="np-artist" id="npArtist">
|
||
|
|
—
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const coverUrl = `${apiRoot}/tracks/${track.slug}/cover`
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="np-info">
|
||
|
|
<div className="np-cover" id="npCover">
|
||
|
|
<Cover src={coverUrl} />
|
||
|
|
</div>
|
||
|
|
<div className="np-text">
|
||
|
|
<div className="np-title" id="npTitle">
|
||
|
|
{track.title}
|
||
|
|
</div>
|
||
|
|
<div className="np-artist" id="npArtist">
|
||
|
|
{track.artist || '—'}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|