feat(track): show now-playing bars overlay on cover art
Docker Build & Publish / build (push) Has been cancelled
Docker Build & Publish / push (push) Has been cancelled
Docker Build & Publish / Prune old image versions (push) Has been cancelled

Overlay the accent-coloured "hopping bars" PlayingIndicator on a
track's cover art wherever TrackRow appears when it's the active
player track, and reuse the same component/overlay for the current
entry's cover in the queue panel.
This commit is contained in:
Senko-san
2026-06-13 17:49:06 +03:00
parent 3984c7a499
commit f5767ff55e
3 changed files with 47 additions and 5 deletions
+7 -4
View File
@@ -4,6 +4,7 @@ import { TrackContextMenu } from './TrackContextMenu';
import { AvailabilityBadge } from './AvailabilityBadge';
import { MetadataStatusBadge } from './MetadataStatusBadge';
import { Icon } from '../common/Icon';
import { PlayingIndicator } from '../common/PlayingIndicator';
import { formatDuration } from '../../lib/format';
import { useAppDispatch, useAppSelector } from '../../hooks/useAppDispatch';
import { playNow } from '../../store/slices/queue';
@@ -73,10 +74,7 @@ export function TrackRow({
>
{isActive && isPlaying ? '▶' : index !== undefined ? index + 1 : ''}
</span>
<div
className="track-art"
style={{ position: 'relative', width: 36, height: 36 }}
>
<div className="track-art">
{artUrl ? (
<img
src={artUrl}
@@ -95,6 +93,11 @@ export function TrackRow({
}}
/>
)}
{isActive && (
<div className="cover-playing">
<PlayingIndicator animate={isPlaying} />
</div>
)}
<button
type="button"
className="track-art-play"