diff --git a/src/components/common/PlayingIndicator.tsx b/src/components/common/PlayingIndicator.tsx new file mode 100644 index 0000000..d3dddfe --- /dev/null +++ b/src/components/common/PlayingIndicator.tsx @@ -0,0 +1,22 @@ +/* + * "Hopping bars" equalizer indicator (YTM-style) shown next to the currently + * playing track. `animate` controls whether the bars bounce (playback active) + * or sit frozen at full height (paused). Reusable across track lists. + */ +interface Props { + animate?: boolean; + className?: string; +} + +export function PlayingIndicator({ animate = true, className }: Props) { + return ( + + ); +} diff --git a/src/components/player/QueuePanel.tsx b/src/components/player/QueuePanel.tsx index 9dc0892..4a85153 100644 --- a/src/components/player/QueuePanel.tsx +++ b/src/components/player/QueuePanel.tsx @@ -2,6 +2,7 @@ import { Slider, Badge } from '@olly/modern-sk'; import { useTranslation } from 'react-i18next'; import { Icon } from '../common/Icon'; import { ArtTile } from '../common/ArtTile'; +import { PlayingIndicator } from '../common/PlayingIndicator'; import { useAppDispatch, useAppSelector } from '../../hooks/useAppDispatch'; import { goToIndex, @@ -18,21 +19,10 @@ export function QueuePanel() { const { t } = useTranslation(); const dispatch = useAppDispatch(); const queue = useAppSelector((s) => s.queue); - const token = useAppSelector((s) => s.auth.accessToken); + const isPlaying = useAppSelector((s) => s.player.isPlaying); const isOpen = useAppSelector((s) => s.player.isQueueOpen); - const nowEntry = - queue.currentIndex >= 0 ? queue.entries[queue.currentIndex] : undefined; - const now = useResolvedQueueEntry(nowEntry); - const nowArtUrl = now - ? (getCoverUrl(now.albumArtUrl) ?? - (token && now.hasCover - ? getTrackCoverUrl(now.trackId, token, true) - : undefined)) - : undefined; - const upNext = queue.entries - .map((entry, index) => ({ entry, index })) - .filter(({ index }) => index > queue.currentIndex); + const hasEntries = queue.entries.length > 0; const isRadio = queue.source === 'radio'; const sourceLabel = queue.sourceName ?? queue.source; @@ -76,35 +66,8 @@ export function QueuePanel() {