vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-06 20:10:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

reimplement playqueue list controls

Browse Source
This commit is contained in:
jeffvli
2025-11-13 18:48:46 -08:00
parent 498abf3c3d
commit 744780861f
6 changed files with 51 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-list/item-grid-list/item-grid-list.tsx
+1 -10
View File
@@ -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;
src/renderer/components/item-list/item-table-list/item-table-list.tsx
+1 -10
View File
@@ -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);
src/renderer/components/item-list/types.ts
-5
View File
@@ -53,11 +53,6 @@ export interface ItemListGridComponentProps<TQuery> 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;
src/renderer/features/now-playing/components/play-queue-list-controls.tsx
+44 -73
View File
@@ -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<null | { grid: AgGridReactType<Song> }>;
tableRef: MutableRefObject<ItemListHandle | null>;
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"
/>
</Group>
<Group>
<Group gap="xs">
<SearchInput
enableHotkey={false}
onChange={(e) => handleSearch(e.target.value)}
value={searchTerm}
/>
<ListConfigMenu
listKey={ItemListKey.SIDE_QUEUE}
tableColumnsData={SONG_TABLE_COLUMNS}
src/renderer/features/now-playing/components/play-queue.tsx
+2 -3
View File
@@ -1,10 +1,9 @@
import type { Ref } from 'react';
import { nanoid } from 'nanoid/non-secure';
import { forwardRef, useEffect, useMemo, useRef } from 'react';
import { ItemTableList } from '/@/renderer/components/item-list/item-table-list/item-table-list';
import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
import { ItemListHandle } from '/@/renderer/components/item-list/types';
import {
useIsPlayerFetching,
usePlayerContext,
@@ -24,7 +23,7 @@ type QueueProps = {
searchTerm: string | undefined;
};
export const PlayQueue = forwardRef(({ listKey, searchTerm }: QueueProps, ref: Ref<any>) => {
export const PlayQueue = forwardRef<ItemListHandle, QueueProps>(({ listKey, searchTerm }, ref) => {
const { table } = useListSettings(listKey) || {};
const queue = usePlayerQueue();
src/renderer/features/now-playing/components/sidebar-play-queue.tsx
+3 -2
View File
@@ -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>(null);
const tableRef = useRef<ItemListHandle | null>(null);
const [search, setSearch] = useState<string | undefined>(undefined);
return (
@@ -17,7 +18,7 @@ export const SidebarPlayQueue = () => {
tableRef={tableRef}
type={ItemListKey.SIDE_QUEUE}
/>
<PlayQueue listKey={ItemListKey.SIDE_QUEUE} searchTerm={search} />
<PlayQueue listKey={ItemListKey.SIDE_QUEUE} ref={tableRef} searchTerm={search} />
</Stack>
);
};