-
-
- {confirmDelete && (
- e.stopPropagation()} style={{ maxWidth: '560px', width: '90vw' }}>
-
-
- {t('queue.loadPlaylist')}
- {!loading && playlists.length > 0 && ( - setFilter(e.target.value)} - autoFocus - style={{ width: '100%', marginBottom: '0.75rem', padding: '8px 14px' }} - /> - )} - {loading ? ( -{t('queue.loading')}
- ) : playlists.length === 0 ? ( -{t('queue.noPlaylists')}
- ) : ( -
- {playlists.filter(p => p.name.toLowerCase().includes(filter.toLowerCase())).map(p => (
-
- )}
-
- {p.name}
-
- ))}
-
-
-
-
-
- setConfirmDelete(null)} role="dialog" aria-modal="true">
-
- )}
-
- );
-}
-
-type DurationMode = 'total' | 'remaining' | 'eta';
-
-interface QueueHeaderProps {
- queue: Track[];
- queueIndex: number;
- activePlaylist: { id: string; name: string } | null;
- isNowPlayingCollapsed: boolean;
- setIsNowPlayingCollapsed: (v: boolean) => void;
- durationMode: DurationMode;
- setDurationMode: (m: DurationMode) => void;
- t: TFunction;
-}
-function QueueHeader({ queue, queueIndex, activePlaylist, isNowPlayingCollapsed, setIsNowPlayingCollapsed, durationMode, setDurationMode, t }: QueueHeaderProps) {
- const currentTime = usePlayerStore((s) => Math.floor(s.currentTime / 30) * 30);
- const isPlaying = usePlayerStore((s) => s.isPlaying);
-
- const totalSecs = useMemo(() =>
- queue.reduce((acc: number, track: Track) => acc + (track.duration || 0), 0),
- [queue]
- );
- const futureTracksDuration = useMemo(() =>
- queue.slice(queueIndex + 1).reduce((acc: number, track: Track) => acc + (track.duration || 0), 0),
- [queue, queueIndex]
- );
-
- const remainingSecs = Math.max(0, (queue[queueIndex]?.duration ?? 0) - currentTime + futureTracksDuration);
-
- const fmt = (secs: number) => {
- const h = Math.floor(secs / 3600);
- const m = Math.floor((secs % 3600) / 60);
- const s = secs % 60;
- return h > 0 ? `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}` : `${m}:${s.toString().padStart(2, "0")}`;
- };
- const fmtEta = (secs: number) => {
- const finishTime = new Date(Date.now() + secs * 1000);
- return new Intl.DateTimeFormat(undefined, { hour: '2-digit', minute: '2-digit' }).format(finishTime);
- };
-
- let dur: string | null = null;
- if (queue.length > 0) {
- if (durationMode === 'total') dur = fmt(Math.floor(totalSecs));
- else if (durationMode === 'remaining') dur = `-${fmt(Math.floor(remainingSecs))}`;
- else dur = fmtEta(remainingSecs);
- }
-
- const nextMode: DurationMode =
- durationMode === 'total' ? 'remaining' :
- durationMode === 'remaining' ? 'eta' : 'total';
- const nextTooltipKey =
- nextMode === 'total' ? 'queue.showTotal' :
- nextMode === 'remaining' ? 'queue.showRemaining' : 'queue.showEta';
-
- const isEta = durationMode === 'eta';
-
- return (
- e.stopPropagation()} style={{ maxWidth: '360px' }}>
-
-
- {t('queue.delete')}
-- {t('queue.deleteConfirm', { name: confirmDelete.name })} -
-
-
-
-
-
-
- );
-}
+import { useQueueToolbarStore } from '../store/queueToolbarStore';
+import {
+ DurationMode,
+ formatTime,
+} from '../utils/queuePanelHelpers';
+import { SavePlaylistModal } from './queuePanel/SavePlaylistModal';
+import { LoadPlaylistModal } from './queuePanel/LoadPlaylistModal';
+import { QueueHeader } from './queuePanel/QueueHeader';
+import { QueueCurrentTrack } from './queuePanel/QueueCurrentTrack';
+import { useQueuePanelDrag } from '../hooks/useQueuePanelDrag';
+import { useQueueLufsTgtPopover } from '../hooks/useQueueLufsTgtPopover';
+import { QueueToolbar } from './queuePanel/QueueToolbar';
+import { QueueList } from './queuePanel/QueueList';
+import { QueueTabBar } from './queuePanel/QueueTabBar';
+import { useQueueAutoScroll } from '../hooks/useQueueAutoScroll';
export default function QueuePanel() {
const orbitRole = useOrbitStore(s => s.role);
@@ -347,7 +92,6 @@ function QueuePanelHostOrSolo() {
const currentCoverSrc = useCachedUrl(currentCoverFetchUrl, currentCoverCacheKey);
const isQueueVisible = usePlayerStore(s => s.isQueueVisible);
const playTrack = usePlayerStore(s => s.playTrack);
- const toggleQueue = usePlayerStore(s => s.toggleQueue);
const clearQueue = usePlayerStore(s => s.clearQueue);
const reorderQueue = usePlayerStore(s => s.reorderQueue);
@@ -377,7 +121,6 @@ function QueuePanelHostOrSolo() {
const setGaplessEnabled = useAuthStore(s => s.setGaplessEnabled);
const setInfiniteQueueEnabled = useAuthStore(s => s.setInfiniteQueueEnabled);
const normalizationEngine = useAuthStore(s => s.normalizationEngine);
- const replayGainMode = useAuthStore(s => s.replayGainMode);
const activeTab = useLyricsStore(s => s.activeTab);
const setTab = useLyricsStore(s => s.setTab);
@@ -387,236 +130,47 @@ function QueuePanelHostOrSolo() {
const setIsNowPlayingCollapsed = useAuthStore(s => s.setQueueNowPlayingCollapsed);
const toolbarButtons = useQueueToolbarStore(s => s.buttons);
const [durationMode, setDurationMode] = useState
-
-
-
-
- {activePlaylist && (
- {t("queue.title")}
- {queue.length > 0 && ( - - ({queueIndex + 1}/{queue.length}) - - )} - {dur !== null && ( - setDurationMode(nextMode)} - data-tooltip={t(nextTooltipKey)} - style={{ - fontSize: "13px", - color: isEta ? (isPlaying ? "var(--accent)" : "var(--text-muted)") : "var(--accent)", - opacity: isEta && !isPlaying ? 0.5 : 1, - whiteSpace: "nowrap", - cursor: "pointer", - userSelect: "none", - }} - > - · {dur} - - )} -
-
- )}
-
- {(() => {
- const baseParts = [
- currentTrack.suffix?.toUpperCase(),
- currentTrack.bitRate ? `${currentTrack.bitRate} kbps` : undefined,
- (() => {
- const bd = currentTrack.bitDepth;
- const sr = currentTrack.samplingRate ? `${currentTrack.samplingRate / 1000} kHz` : '';
- if (bd && sr) return `${bd}/${sr}`;
- if (bd) return `${bd}-bit`;
- if (sr) return sr;
- return undefined;
- })(),
- ].filter(Boolean) as string[];
- const rgParts = formatQueueReplayGainParts(currentTrack, t);
- const baseLine = baseParts.join(' · ');
- const rgLine = rgParts.join(' · ');
- const isLoudnessActive = normalizationEngine === 'loudness' || normalizationEngineLive === 'loudness';
- const liveGainLabel = (() => {
- if (normalizationNowDb != null && Number.isFinite(normalizationNowDb)) {
- return `${normalizationNowDb >= 0 ? '+' : ''}${normalizationNowDb.toFixed(2)} dB`;
- }
- if (isLoudnessActive && Number.isFinite(loudnessPreAnalysisAttenuationDb)) {
- const preEff = effectiveLoudnessPreAnalysisAttenuationDb(
- loudnessPreAnalysisAttenuationDb,
- authLoudnessTargetLufs,
- );
- const ph = loudnessGainPlaceholderUntilCacheDb(
- authLoudnessTargetLufs,
- preEff,
- );
- return `${ph >= 0 ? '+' : ''}${ph.toFixed(2)} dB`;
- }
- return '—';
- })();
- const tgtNum = normalizationTargetLufs ?? authLoudnessTargetLufs;
- const targetLabel = `${tgtNum} LUFS`;
- if (!baseLine && !rgLine && !playbackSource) return null;
- const showRgLine = !isLoudnessActive && expandReplayGain && !!rgLine;
- const showLufsLine = isLoudnessActive && expandReplayGain;
- return (
-
+
-
- );
- })()}
-
-
-
- {playbackSource && (
-
- {playbackSource === 'offline' &&
- {showRgLine && (
-
- {t('queue.replayGain')}
- {' · '}{rgLine}
-
- )}
- {showLufsLine && (
-
- Loudness
- {' · '}
-
- {' · '}
- TGT
- {' · '}
-
- {lufsTgtOpen &&
- createPortal(
- e.stopPropagation()}
- >
- {([-10, -12, -14, -16] as const).map((v) => (
-
- ))}
-
,
- document.body,
- )}
-
- )}
-
-
-
- {currentTrack.coverArt ? (
- 
- ) : (
-
-
-
- {currentTrack.title}
- currentTrack.artistId && navigate(`/artist/${currentTrack.artistId}`)}
- >{currentTrack.artist}
- currentTrack.albumId && navigate(`/album/${currentTrack.albumId}`)}
- >{currentTrack.album}
- {currentTrack.year && (
- {currentTrack.year}
- )}
- {(() => {
- const label = orbitAttributionLabel(currentTrack.id);
- return label ? {label}
: null;
- })()}
- {renderStars(userRatingOverrides[currentTrack.id] ?? currentTrack.userRating)}
-
- {toolbarButtons.map((btn, idx) => {
- if (!btn.visible) return null;
-
- switch (btn.id as QueueToolbarButtonId) {
- case 'shuffle':
- return (
-
- );
- case 'save':
- return (
-
- );
- case 'load':
- return (
-
- );
- case 'share':
- return (
-
- );
- case 'clear':
- return (
-
- );
- case 'separator':
- return ;
- case 'gapless':
- return (
-
- );
- case 'crossfade':
- return (
-
+
-
- {showCrossfadePopover && (
-
- );
- case 'infinite':
- return (
-
- );
- default:
- return null;
- }
- })}
-
-
- )}
-
-
- {
- setCrossfadeSecs(parseFloat(e.target.value));
- setCrossfadeEnabled(true);
- }}
- className="crossfade-popover-slider"
- />
-
- 0.1s10s
-
- {t('queue.nextTracks')}
}
-
- {t('queue.emptyQueue')}
-
- ) : (
- <>
- {queue.map((track, idx) => {
- const isPlaying = idx === queueIndex;
- const isFirstAutoAdded = track.autoAdded && (idx === 0 || !queue[idx - 1].autoAdded);
- const isFirstRadioAdded = track.radioAdded && (idx === 0 || !queue[idx - 1].radioAdded);
-
- let dragStyle: React.CSSProperties = {};
- if (isQueueDrag && psyDragFromIdxRef.current === idx) {
- dragStyle = { opacity: 0.4, background: 'var(--bg-hover)' };
- } else if (isQueueDrag && externalDropTarget?.idx === idx) {
- if (externalDropTarget.before) {
- dragStyle = { borderTop: '2px solid var(--accent)', paddingTop: '6px', marginTop: '-2px' };
- } else {
- dragStyle = { borderBottom: '2px solid var(--accent)', paddingBottom: '6px', marginBottom: '-2px' };
- }
- }
-
- return (
-
- {t('queue.radioAdded')}
-
- )}
- {isFirstAutoAdded && (
-
- {t('queue.autoAdded')}
-
- )}
- {
- suppressNextAutoScrollRef.current = true;
- // Pass the row index so a click on a duplicate track lands on
- // *this* slot, not the first occurrence (issue #500).
- playTrack(track, queue, undefined, undefined, idx);
- }}
- onContextMenu={(e) => {
- e.preventDefault();
- usePlayerStore.getState().openContextMenu(e.clientX, e.clientY, track, 'queue-item', idx);
- }}
- onMouseDown={(e) => {
- if (e.button !== 0) return;
- e.preventDefault();
- const startX = e.clientX;
- const startY = e.clientY;
- const onMove = (me: MouseEvent) => {
- if (Math.abs(me.clientX - startX) > 5 || Math.abs(me.clientY - startY) > 5) {
- document.removeEventListener('mousemove', onMove);
- document.removeEventListener('mouseup', onUp);
- psyDragFromIdxRef.current = idx;
- startDrag({ data: JSON.stringify({ type: 'queue_reorder', index: idx }), label: track.title }, me.clientX, me.clientY);
- }
- };
- const onUp = () => {
- document.removeEventListener('mousemove', onMove);
- document.removeEventListener('mouseup', onUp);
- };
- document.addEventListener('mousemove', onMove);
- document.addEventListener('mouseup', onUp);
- }}
- style={dragStyle}
- >
-
- {luckyRolling && isPlaying && (
-
- )}
-
-
-
- {isPlaying &&
- {track.artist}
- {(() => {
- const label = orbitAttributionLabel(track.id);
- return label ? {label}
: null;
- })()}
-
- {formatTime(track.duration)}
-
-
-
-
-
-
+
+
+
+ {confirmDelete && (
+ e.stopPropagation()} style={{ maxWidth: '560px', width: '90vw' }}>
+
+
+ {t('queue.loadPlaylist')}
+ {!loading && playlists.length > 0 && ( + setFilter(e.target.value)} + autoFocus + style={{ width: '100%', marginBottom: '0.75rem', padding: '8px 14px' }} + /> + )} + {loading ? ( +{t('queue.loading')}
+ ) : playlists.length === 0 ? ( +{t('queue.noPlaylists')}
+ ) : ( +
+ {playlists.filter(p => p.name.toLowerCase().includes(filter.toLowerCase())).map(p => (
+
+ )}
+
+ {p.name}
+
+ ))}
+
+
+
+
+
+ setConfirmDelete(null)} role="dialog" aria-modal="true">
+
+ )}
+
+ );
+}
diff --git a/src/components/queuePanel/QueueCurrentTrack.tsx b/src/components/queuePanel/QueueCurrentTrack.tsx
new file mode 100644
index 00000000..a1f19dd0
--- /dev/null
+++ b/src/components/queuePanel/QueueCurrentTrack.tsx
@@ -0,0 +1,223 @@
+import React from 'react';
+import { ChevronDown, FolderOpen, HardDrive, Music, Waves } from 'lucide-react';
+import type { TFunction } from 'i18next';
+import type { Track } from '../../store/playerStoreTypes';
+import type { LoudnessLufsPreset, NormalizationEngine } from '../../store/authStoreTypes';
+import type { PlaybackSourceKind } from '../../utils/resolvePlaybackUrl';
+import {
+ formatQueueReplayGainParts,
+ renderStars,
+} from '../../utils/queuePanelHelpers';
+import { loudnessGainPlaceholderUntilCacheDb } from '../../utils/loudnessPlaceholder';
+import { effectiveLoudnessPreAnalysisAttenuationDb } from '../../utils/loudnessPreAnalysisSlider';
+import { QueueLufsTargetMenu } from './QueueLufsTargetMenu';
+
+interface Props {
+ currentTrack: Track;
+ currentCoverSrc: string;
+ userRatingOverrides: Record e.stopPropagation()} style={{ maxWidth: '360px' }}>
+
+
+ {t('queue.delete')}
++ {t('queue.deleteConfirm', { name: confirmDelete.name })} +
+
+
+
+
+
+ {(() => {
+ const baseParts = [
+ currentTrack.suffix?.toUpperCase(),
+ currentTrack.bitRate ? `${currentTrack.bitRate} kbps` : undefined,
+ (() => {
+ const bd = currentTrack.bitDepth;
+ const sr = currentTrack.samplingRate ? `${currentTrack.samplingRate / 1000} kHz` : '';
+ if (bd && sr) return `${bd}/${sr}`;
+ if (bd) return `${bd}-bit`;
+ if (sr) return sr;
+ return undefined;
+ })(),
+ ].filter(Boolean) as string[];
+ const rgParts = formatQueueReplayGainParts(currentTrack, t);
+ const baseLine = baseParts.join(' · ');
+ const rgLine = rgParts.join(' · ');
+ const isLoudnessActive = normalizationEngine === 'loudness' || normalizationEngineLive === 'loudness';
+ const liveGainLabel = (() => {
+ if (normalizationNowDb != null && Number.isFinite(normalizationNowDb)) {
+ return `${normalizationNowDb >= 0 ? '+' : ''}${normalizationNowDb.toFixed(2)} dB`;
+ }
+ if (isLoudnessActive && Number.isFinite(loudnessPreAnalysisAttenuationDb)) {
+ const preEff = effectiveLoudnessPreAnalysisAttenuationDb(
+ loudnessPreAnalysisAttenuationDb,
+ authLoudnessTargetLufs,
+ );
+ const ph = loudnessGainPlaceholderUntilCacheDb(
+ authLoudnessTargetLufs,
+ preEff,
+ );
+ return `${ph >= 0 ? '+' : ''}${ph.toFixed(2)} dB`;
+ }
+ return '—';
+ })();
+ const tgtNum = normalizationTargetLufs ?? authLoudnessTargetLufs;
+ const targetLabel = `${tgtNum} LUFS`;
+ if (!baseLine && !rgLine && !playbackSource) return null;
+ const showRgLine = !isLoudnessActive && expandReplayGain && !!rgLine;
+ const showLufsLine = isLoudnessActive && expandReplayGain;
+ return (
+
+ );
+}
diff --git a/src/components/queuePanel/QueueHeader.tsx b/src/components/queuePanel/QueueHeader.tsx
new file mode 100644
index 00000000..94795a20
--- /dev/null
+++ b/src/components/queuePanel/QueueHeader.tsx
@@ -0,0 +1,111 @@
+import { useMemo } from 'react';
+import { ChevronDown, ListMusic } from 'lucide-react';
+import type { TFunction } from 'i18next';
+import { usePlayerStore } from '../../store/playerStore';
+import type { Track } from '../../store/playerStoreTypes';
+import type { DurationMode } from '../../utils/queuePanelHelpers';
+
+interface Props {
+ queue: Track[];
+ queueIndex: number;
+ activePlaylist: { id: string; name: string } | null;
+ isNowPlayingCollapsed: boolean;
+ setIsNowPlayingCollapsed: (v: boolean) => void;
+ durationMode: DurationMode;
+ setDurationMode: (m: DurationMode) => void;
+ t: TFunction;
+}
+
+export function QueueHeader({
+ queue, queueIndex, activePlaylist, isNowPlayingCollapsed,
+ setIsNowPlayingCollapsed, durationMode, setDurationMode, t,
+}: Props) {
+ const currentTime = usePlayerStore((s) => Math.floor(s.currentTime / 30) * 30);
+ const isPlaying = usePlayerStore((s) => s.isPlaying);
+
+ const totalSecs = useMemo(() =>
+ queue.reduce((acc: number, track: Track) => acc + (track.duration || 0), 0),
+ [queue]
+ );
+ const futureTracksDuration = useMemo(() =>
+ queue.slice(queueIndex + 1).reduce((acc: number, track: Track) => acc + (track.duration || 0), 0),
+ [queue, queueIndex]
+ );
+
+ const remainingSecs = Math.max(0, (queue[queueIndex]?.duration ?? 0) - currentTime + futureTracksDuration);
+
+ const fmt = (secs: number) => {
+ const h = Math.floor(secs / 3600);
+ const m = Math.floor((secs % 3600) / 60);
+ const s = secs % 60;
+ return h > 0 ? `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}` : `${m}:${s.toString().padStart(2, "0")}`;
+ };
+ const fmtEta = (secs: number) => {
+ const finishTime = new Date(Date.now() + secs * 1000);
+ return new Intl.DateTimeFormat(undefined, { hour: '2-digit', minute: '2-digit' }).format(finishTime);
+ };
+
+ let dur: string | null = null;
+ if (queue.length > 0) {
+ if (durationMode === 'total') dur = fmt(Math.floor(totalSecs));
+ else if (durationMode === 'remaining') dur = `-${fmt(Math.floor(remainingSecs))}`;
+ else dur = fmtEta(remainingSecs);
+ }
+
+ const nextMode: DurationMode =
+ durationMode === 'total' ? 'remaining' :
+ durationMode === 'remaining' ? 'eta' : 'total';
+ const nextTooltipKey =
+ nextMode === 'total' ? 'queue.showTotal' :
+ nextMode === 'remaining' ? 'queue.showRemaining' : 'queue.showEta';
+
+ const isEta = durationMode === 'eta';
+
+ return (
+
+
+ );
+ })()}
+
+ setLufsTgtOpen(false)}
+ />
+ )}
+
+ )}
+
+
+ {playbackSource && (
+
+ {playbackSource === 'offline' &&
+ {showRgLine && (
+
+ {t('queue.replayGain')}
+ {' · '}{rgLine}
+
+ )}
+ {showLufsLine && (
+
+ Loudness
+ {' · '}
+
+ {' · '}
+ TGT
+ {' · '}
+
+ {lufsTgtOpen && (
+
+
+
+ {currentTrack.coverArt ? (
+
+ ) : (
+
+
+
+ {currentTrack.title}
+ currentTrack.artistId && navigate(`/artist/${currentTrack.artistId}`)}
+ >{currentTrack.artist}
+ currentTrack.albumId && navigate(`/album/${currentTrack.albumId}`)}
+ >{currentTrack.album}
+ {currentTrack.year && (
+ {currentTrack.year}
+ )}
+ {(() => {
+ const label = orbitAttributionLabel(currentTrack.id);
+ return label ? {label}
: null;
+ })()}
+ {renderStars(userRatingOverrides[currentTrack.id] ?? currentTrack.userRating)}
+
+
+ );
+}
diff --git a/src/components/queuePanel/QueueList.tsx b/src/components/queuePanel/QueueList.tsx
new file mode 100644
index 00000000..ca69b029
--- /dev/null
+++ b/src/components/queuePanel/QueueList.tsx
@@ -0,0 +1,164 @@
+import React from 'react';
+import { Play } from 'lucide-react';
+import type { TFunction } from 'i18next';
+import OverlayScrollArea from '../OverlayScrollArea';
+import { usePlayerStore } from '../../store/playerStore';
+import { useLuckyMixStore } from '../../store/luckyMixStore';
+import type { Track, PlayerState } from '../../store/playerStoreTypes';
+import { formatTime } from '../../utils/queuePanelHelpers';
+
+type StartDrag = (
+ payload: { data: string; label: string },
+ x: number,
+ y: number,
+) => void;
+
+interface Props {
+ queue: Track[];
+ queueIndex: number;
+ contextMenu: PlayerState['contextMenu'];
+ playTrack: PlayerState['playTrack'];
+ activeTab: string;
+ queueListRef: React.RefObject
+
+
+
+
+ {activePlaylist && (
+ {t("queue.title")}
+ {queue.length > 0 && ( + + ({queueIndex + 1}/{queue.length}) + + )} + {dur !== null && ( + setDurationMode(nextMode)} + data-tooltip={t(nextTooltipKey)} + style={{ + fontSize: "13px", + color: isEta ? (isPlaying ? "var(--accent)" : "var(--text-muted)") : "var(--accent)", + opacity: isEta && !isPlaying ? 0.5 : 1, + whiteSpace: "nowrap", + cursor: "pointer", + userSelect: "none", + }} + > + · {dur} + + )} +
+
+ )}
+
+ {t('queue.emptyQueue')}
+
+ ) : (
+ <>
+ {queue.map((track, idx) => {
+ const isPlaying = idx === queueIndex;
+ const isFirstAutoAdded = track.autoAdded && (idx === 0 || !queue[idx - 1].autoAdded);
+ const isFirstRadioAdded = track.radioAdded && (idx === 0 || !queue[idx - 1].radioAdded);
+
+ let dragStyle: React.CSSProperties = {};
+ if (isQueueDrag && psyDragFromIdxRef.current === idx) {
+ dragStyle = { opacity: 0.4, background: 'var(--bg-hover)' };
+ } else if (isQueueDrag && externalDropTarget?.idx === idx) {
+ if (externalDropTarget.before) {
+ dragStyle = { borderTop: '2px solid var(--accent)', paddingTop: '6px', marginTop: '-2px' };
+ } else {
+ dragStyle = { borderBottom: '2px solid var(--accent)', paddingBottom: '6px', marginBottom: '-2px' };
+ }
+ }
+
+ return (
+
+ {t('queue.radioAdded')}
+
+ )}
+ {isFirstAutoAdded && (
+
+ {t('queue.autoAdded')}
+
+ )}
+ {
+ suppressNextAutoScrollRef.current = true;
+ // Pass the row index so a click on a duplicate track lands on
+ // *this* slot, not the first occurrence (issue #500).
+ playTrack(track, queue, undefined, undefined, idx);
+ }}
+ onContextMenu={(e) => {
+ e.preventDefault();
+ usePlayerStore.getState().openContextMenu(e.clientX, e.clientY, track, 'queue-item', idx);
+ }}
+ onMouseDown={(e) => {
+ if (e.button !== 0) return;
+ e.preventDefault();
+ const startX = e.clientX;
+ const startY = e.clientY;
+ const onMove = (me: MouseEvent) => {
+ if (Math.abs(me.clientX - startX) > 5 || Math.abs(me.clientY - startY) > 5) {
+ document.removeEventListener('mousemove', onMove);
+ document.removeEventListener('mouseup', onUp);
+ psyDragFromIdxRef.current = idx;
+ startDrag({ data: JSON.stringify({ type: 'queue_reorder', index: idx }), label: track.title }, me.clientX, me.clientY);
+ }
+ };
+ const onUp = () => {
+ document.removeEventListener('mousemove', onMove);
+ document.removeEventListener('mouseup', onUp);
+ };
+ document.addEventListener('mousemove', onMove);
+ document.addEventListener('mouseup', onUp);
+ }}
+ style={dragStyle}
+ >
+
+ {luckyRolling && isPlaying && (
+
+ )}
+
+
+
+ {isPlaying &&
+ {track.artist}
+ {(() => {
+ const label = orbitAttributionLabel(track.id);
+ return label ? {label}
: null;
+ })()}
+
+ {formatTime(track.duration)}
+
+ e.stopPropagation()}
+ >
+ {LUFS_TARGETS.map((v) => (
+
+ ))}
+
,
+ document.body,
+ );
+}
diff --git a/src/components/queuePanel/QueueTabBar.tsx b/src/components/queuePanel/QueueTabBar.tsx
new file mode 100644
index 00000000..f4e3cb17
--- /dev/null
+++ b/src/components/queuePanel/QueueTabBar.tsx
@@ -0,0 +1,41 @@
+import { Info, ListMusic, MicVocal } from 'lucide-react';
+import type { TFunction } from 'i18next';
+
+type LyricsTab = 'queue' | 'lyrics' | 'info';
+
+interface Props {
+ activeTab: LyricsTab;
+ setTab: (tab: LyricsTab) => void;
+ t: TFunction;
+}
+
+export function QueueTabBar({ activeTab, setTab, t }: Props) {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/src/components/queuePanel/QueueToolbar.tsx b/src/components/queuePanel/QueueToolbar.tsx
new file mode 100644
index 00000000..16e30834
--- /dev/null
+++ b/src/components/queuePanel/QueueToolbar.tsx
@@ -0,0 +1,185 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+ Check, FolderOpen, Infinity, MoveRight, Save, Share2, Shuffle, Trash2, Waves,
+} from 'lucide-react';
+import type { TFunction } from 'i18next';
+import type { Track } from '../../store/playerStoreTypes';
+import type {
+ QueueToolbarButtonConfig,
+ QueueToolbarButtonId,
+} from '../../store/queueToolbarStore';
+
+interface Props {
+ queue: Track[];
+ activePlaylist: { id: string; name: string } | null;
+ saveState: 'idle' | 'saving' | 'saved';
+ toolbarButtons: QueueToolbarButtonConfig[];
+ shuffleQueue: () => void;
+ handleSave: () => void;
+ handleLoad: () => void;
+ handleCopyQueueShare: () => void;
+ handleClear: () => void;
+ gaplessEnabled: boolean;
+ setGaplessEnabled: (v: boolean) => void;
+ crossfadeEnabled: boolean;
+ setCrossfadeEnabled: (v: boolean) => void;
+ crossfadeSecs: number;
+ setCrossfadeSecs: (v: number) => void;
+ infiniteQueueEnabled: boolean;
+ setInfiniteQueueEnabled: (v: boolean) => void;
+ t: TFunction;
+}
+
+export function QueueToolbar({
+ queue, activePlaylist, saveState, toolbarButtons, shuffleQueue,
+ handleSave, handleLoad, handleCopyQueueShare, handleClear,
+ gaplessEnabled, setGaplessEnabled, crossfadeEnabled, setCrossfadeEnabled,
+ crossfadeSecs, setCrossfadeSecs, infiniteQueueEnabled, setInfiniteQueueEnabled,
+ t,
+}: Props) {
+ const [showCrossfadePopover, setShowCrossfadePopover] = useState(false);
+ const crossfadeBtnRef = useRef
+ {toolbarButtons.map((btn) => {
+ if (!btn.visible) return null;
+
+ switch (btn.id as QueueToolbarButtonId) {
+ case 'shuffle':
+ return (
+
+ );
+ case 'save':
+ return (
+
+ );
+ case 'load':
+ return (
+
+ );
+ case 'share':
+ return (
+
+ );
+ case 'clear':
+ return (
+
+ );
+ case 'separator':
+ return ;
+ case 'gapless':
+ return (
+
+ );
+ case 'crossfade':
+ return (
+
+ );
+}
diff --git a/src/components/queuePanel/SavePlaylistModal.tsx b/src/components/queuePanel/SavePlaylistModal.tsx
new file mode 100644
index 00000000..ba04b43b
--- /dev/null
+++ b/src/components/queuePanel/SavePlaylistModal.tsx
@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import { X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+ onClose: () => void;
+ onSave: (name: string) => void;
+}
+
+export function SavePlaylistModal({ onClose, onSave }: Props) {
+ const { t } = useTranslation();
+ const [name, setName] = useState('');
+ return (
+
+
+ {showCrossfadePopover && (
+
+ );
+ case 'infinite':
+ return (
+
+ );
+ default:
+ return null;
+ }
+ })}
+
+
+ )}
+
+
+ {
+ setCrossfadeSecs(parseFloat(e.target.value));
+ setCrossfadeEnabled(true);
+ }}
+ className="crossfade-popover-slider"
+ />
+
+ 0.1s10s
+
+
+
+ );
+}
diff --git a/src/hooks/useQueueAutoScroll.ts b/src/hooks/useQueueAutoScroll.ts
new file mode 100644
index 00000000..57d7c4dd
--- /dev/null
+++ b/src/hooks/useQueueAutoScroll.ts
@@ -0,0 +1,51 @@
+import React, { useEffect, useLayoutEffect } from 'react';
+import { registerQueueListScrollTopReader, consumePendingQueueListScrollTop } from '../store/queueUndo';
+import type { Track } from '../store/playerStoreTypes';
+
+interface Args {
+ queue: Track[];
+ queueIndex: number;
+ currentTrack: Track | null;
+ activeTab: string;
+ queueListRef: React.RefObject e.stopPropagation()} style={{ maxWidth: '400px' }}>
+
+
+ {t('queue.savePlaylist')}
+ setName(e.target.value)} + autoFocus + onKeyDown={e => e.key === 'Enter' && name.trim() && onSave(name.trim())} + style={{ width: '100%', marginBottom: '1rem', padding: '10px 16px' }} + /> +
+
+
+
+ {stars}
;
+}