feat(track): show now-playing bars overlay on cover art
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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user