From 744780861f3665d92cd361a93c86156fb36434af Mon Sep 17 00:00:00 2001 From: jeffvli Date: Thu, 13 Nov 2025 18:48:46 -0800 Subject: [PATCH] reimplement playqueue list controls --- .../item-grid-list/item-grid-list.tsx | 11 +- .../item-table-list/item-table-list.tsx | 11 +- src/renderer/components/item-list/types.ts | 5 - .../components/play-queue-list-controls.tsx | 117 +++++++----------- .../now-playing/components/play-queue.tsx | 5 +- .../components/sidebar-play-queue.tsx | 5 +- 6 files changed, 51 insertions(+), 103 deletions(-) diff --git a/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx b/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx index d026464fd..cd37b53ec 100644 --- a/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx +++ b/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx @@ -564,15 +564,6 @@ export const ItemGridList = ({ const imperativeHandle: ItemListHandle = useMemo(() => { return { - clearExpanded: () => { - internalState.clearExpanded(); - }, - clearSelected: () => { - internalState.clearSelected(); - }, - getItem: (index: number) => data[index], - getItemCount: () => data.length, - getItems: () => data, internalState, scrollToIndex: (index: number) => { scrollToIndex(index); @@ -581,7 +572,7 @@ export const ItemGridList = ({ scrollToOffset(offset); }, }; - }, [data, internalState, scrollToIndex, scrollToOffset]); + }, [internalState, scrollToIndex, scrollToOffset]); useEffect(() => { handleRef.current = imperativeHandle; diff --git a/src/renderer/components/item-list/item-table-list/item-table-list.tsx b/src/renderer/components/item-list/item-table-list/item-table-list.tsx index fdce2b934..3955efccf 100644 --- a/src/renderer/components/item-list/item-table-list/item-table-list.tsx +++ b/src/renderer/components/item-list/item-table-list/item-table-list.tsx @@ -1276,15 +1276,6 @@ export const ItemTableList = ({ const imperativeHandle: ItemListHandle = useMemo(() => { return { - clearExpanded: () => { - internalState.clearExpanded(); - }, - clearSelected: () => { - internalState.clearSelected(); - }, - getItem: (index: number) => (enableHeader ? data[index - 1] : data[index]), - getItemCount: () => (enableHeader ? data.length : data.length), - getItems: () => data, internalState, scrollToIndex: (index: number) => { scrollToTableIndex(enableHeader ? index + 1 : index); @@ -1293,7 +1284,7 @@ export const ItemTableList = ({ scrollToTableOffset(offset); }, }; - }, [data, enableHeader, internalState, scrollToTableIndex, scrollToTableOffset]); + }, [enableHeader, internalState, scrollToTableIndex, scrollToTableOffset]); useImperativeHandle(ref, () => imperativeHandle); diff --git a/src/renderer/components/item-list/types.ts b/src/renderer/components/item-list/types.ts index a36331e2d..26a3c2a0f 100644 --- a/src/renderer/components/item-list/types.ts +++ b/src/renderer/components/item-list/types.ts @@ -53,11 +53,6 @@ export interface ItemListGridComponentProps extends ItemListComponentPro } export interface ItemListHandle { - clearExpanded: () => void; - clearSelected: () => void; - getItem: (index: number) => unknown; - getItemCount: () => number; - getItems: () => unknown[]; internalState: ItemListStateActions; scrollToIndex: (index: number, options?: { behavior?: 'auto' | 'smooth' }) => void; scrollToOffset: (offset: number, options?: { behavior?: 'auto' | 'smooth' }) => void; diff --git a/src/renderer/features/now-playing/components/play-queue-list-controls.tsx b/src/renderer/features/now-playing/components/play-queue-list-controls.tsx index ac8981740..25a16f397 100644 --- a/src/renderer/features/now-playing/components/play-queue-list-controls.tsx +++ b/src/renderer/features/now-playing/components/play-queue-list-controls.tsx @@ -1,22 +1,22 @@ -import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; - import { type MutableRefObject } from 'react'; import { useTranslation } from 'react-i18next'; +import { ItemListHandle } from '/@/renderer/components/item-list/types'; import { SONG_TABLE_COLUMNS } from '/@/renderer/components/virtual-table'; import { usePlayerContext } from '/@/renderer/features/player/context/player-context'; import { updateSong } from '/@/renderer/features/player/update-remote-song'; import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu'; -import { usePlaybackType } from '/@/renderer/store/settings.store'; +import { SearchInput } from '/@/renderer/features/shared/components/search-input'; +import { usePlayerSong, usePlayerStoreBase } from '/@/renderer/store'; import { ActionIcon } from '/@/shared/components/action-icon/action-icon'; import { Group } from '/@/shared/components/group/group'; -import { Song } from '/@/shared/types/domain-types'; +import { QueueSong } from '/@/shared/types/domain-types'; import { ItemListKey } from '/@/shared/types/types'; interface PlayQueueListOptionsProps { handleSearch: (value: string) => void; searchTerm?: string; - tableRef: MutableRefObject }>; + tableRef: MutableRefObject; type: ItemListKey; } @@ -24,94 +24,60 @@ export const PlayQueueListControls = ({ handleSearch, searchTerm, tableRef, - type, }: PlayQueueListOptionsProps) => { const { t } = useTranslation(); - // const { - // clearQueue, - // moveToBottomOfQueue, - // moveToNextOfQueue, - // moveToTopOfQueue, - // removeFromQueue, - // shuffleQueue, - // } = useQueueControls(); - - // const { pause } = usePlayerControls(); - const player = usePlayerContext(); - - const playbackType = usePlaybackType(); - // const setCurrentTime = useSetCurrentTime(); + const currentSong = usePlayerSong(); const handleMoveToNext = () => { - // const selectedRows = tableRef?.current?.grid.api.getSelectedRows(); - // const uniqueIds = selectedRows?.map((row) => row.uniqueId); - // if (!uniqueIds?.length) return; - // // const playerData = moveToNextOfQueue(uniqueIds); - // // if (playbackType === PlaybackType.LOCAL) { - // // setQueueNext(playerData); - // // } - // player.moveSelectedToNext(selectedRows); + const selectedItems = tableRef?.current?.internalState.getSelected() as + | QueueSong[] + | undefined; + if (!selectedItems || selectedItems.length === 0) return; + player.moveSelectedToNext(selectedItems); }; const handleMoveToBottom = () => { - // const selectedRows = tableRef?.current?.grid.api.getSelectedRows(); - // const uniqueIds = selectedRows?.map((row) => row.uniqueId); - // if (!uniqueIds?.length) return; - // const playerData = moveToBottomOfQueue(uniqueIds); - // if (playbackType === PlaybackType.LOCAL) { - // setQueueNext(playerData); - // } + const selectedItems = tableRef?.current?.internalState.getSelected() as + | QueueSong[] + | undefined; + if (!selectedItems || selectedItems.length === 0) return; + player.moveSelectedToBottom(selectedItems); }; const handleMoveToTop = () => { - // const selectedRows = tableRef?.current?.grid.api.getSelectedRows(); - // const uniqueIds = selectedRows?.map((row) => row.uniqueId); - // if (!uniqueIds?.length) return; - // const playerData = moveToTopOfQueue(uniqueIds); - // if (playbackType === PlaybackType.LOCAL) { - // setQueueNext(playerData); - // } + const selectedItems = tableRef?.current?.internalState.getSelected() as + | QueueSong[] + | undefined; + if (!selectedItems || selectedItems.length === 0) return; + player.moveSelectedToTop(selectedItems); }; const handleRemoveSelected = () => { - // const selectedRows = tableRef?.current?.grid.api.getSelectedRows(); - // const uniqueIds = selectedRows?.map((row) => row.uniqueId); - // if (!uniqueIds?.length) return; - // const currentSong = usePlayerStore.getState().current.song; - // const playerData = removeFromQueue(uniqueIds); - // const isCurrentSongRemoved = currentSong && uniqueIds.includes(currentSong.uniqueId); - // if (playbackType === PlaybackType.LOCAL) { - // if (isCurrentSongRemoved) { - // setQueue(playerData); - // } else { - // setQueueNext(playerData); - // } - // } - // if (isCurrentSongRemoved) { - // updateSong(playerData.current.song); - // } + const selectedItems = tableRef?.current?.internalState.getSelected() as + | QueueSong[] + | undefined; + if (!selectedItems || selectedItems.length === 0) return; + + const selectedUniqueIds = selectedItems.map((item) => item._uniqueId); + const isCurrentSongRemoved = + currentSong && selectedUniqueIds.includes(currentSong._uniqueId); + + player.clearSelected(selectedItems); + + if (isCurrentSongRemoved) { + // Get the new current song after removal + const newCurrentSong = usePlayerStoreBase.getState().getCurrentSong(); + updateSong(newCurrentSong); + } }; const handleClearQueue = () => { - // const playerData = clearQueue(); - - // if (playbackType === PlaybackType.LOCAL) { - // setQueue(playerData); - // mpvPlayer!.pause(); - // } - player.clearQueue(); - - // setCurrentTime(0); - // pause(); }; const handleShuffleQueue = () => { - // const playerData = shuffleQueue(); - // if (playbackType === PlaybackType.LOCAL) { - // setQueueNext(playerData); - // } + player.shuffleAll(); }; return ( @@ -165,7 +131,12 @@ export const PlayQueueListControls = ({ variant="subtle" /> - + + handleSearch(e.target.value)} + value={searchTerm} + /> ) => { +export const PlayQueue = forwardRef(({ listKey, searchTerm }, ref) => { const { table } = useListSettings(listKey) || {}; const queue = usePlayerQueue(); diff --git a/src/renderer/features/now-playing/components/sidebar-play-queue.tsx b/src/renderer/features/now-playing/components/sidebar-play-queue.tsx index f0a046b3d..f15ef4ca8 100644 --- a/src/renderer/features/now-playing/components/sidebar-play-queue.tsx +++ b/src/renderer/features/now-playing/components/sidebar-play-queue.tsx @@ -1,12 +1,13 @@ import { useRef, useState } from 'react'; +import { ItemListHandle } from '/@/renderer/components/item-list/types'; import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue'; import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls'; import { Stack } from '/@/shared/components/stack/stack'; import { ItemListKey } from '/@/shared/types/types'; export const SidebarPlayQueue = () => { - const tableRef = useRef(null); + const tableRef = useRef(null); const [search, setSearch] = useState(undefined); return ( @@ -17,7 +18,7 @@ export const SidebarPlayQueue = () => { tableRef={tableRef} type={ItemListKey.SIDE_QUEUE} /> - + ); };