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

improve image column play handler to support long press

Browse Source
This commit is contained in:
jeffvli
2025-12-03 16:25:28 -08:00
parent a7e6a75c68
commit 55ebc7d74a
10 changed files with 127 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-list/helpers/item-list-controls.ts
+1 -5
View File
@@ -245,11 +245,7 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
return;
}
player.addToQueueByData(songsToAdd, Play.NOW);
const targetIndex = clickedIndex - startIndex;
player.mediaPlayByIndex(targetIndex);
player.addToQueueByData(songsToAdd, Play.NOW, item.id);
return;
}
src/renderer/components/item-list/item-table-list/columns/image-column.tsx
+6 -1
View File
@@ -35,7 +35,9 @@ export const ImageColumn = (props: ItemTableListInnerColumn) => {
// For SONG items, use double click behavior
if (
(props.itemType === LibraryItem.SONG || props.itemType === LibraryItem.PLAYLIST_SONG) &&
(props.itemType === LibraryItem.SONG ||
props.itemType === LibraryItem.PLAYLIST_SONG ||
item._itemType === LibraryItem.SONG) &&
props.controls?.onDoubleClick
) {
// Calculate the index based on rowIndex, accounting for header if enabled
@@ -48,6 +50,9 @@ export const ImageColumn = (props: ItemTableListInnerColumn) => {
internalState,
item,
itemType: props.itemType,
meta: {
playType,
},
});
return;
}
src/renderer/features/albums/components/album-detail-content.tsx
+4 -3
View File
@@ -568,16 +568,17 @@ const AlbumDetailSongsTable = ({ songs }: AlbumDetailSongsTableProps) => {
const overrideControls: Partial<ItemControls> = useMemo(() => {
return {
onDoubleClick: ({ index, internalState, item }) => {
onDoubleClick: ({ index, internalState, item, meta }) => {
if (!item) {
return;
}
const playType = (meta?.playType as Play) || Play.NOW;
const items = internalState?.getData() as Song[];
if (index !== undefined) {
player.addToQueueByData(items, Play.NOW);
player.mediaPlayByIndex(index);
player.addToQueueByData(items, playType, item.id);
}
},
};
src/renderer/features/albums/components/expanded-album-list-item.tsx
+5 -16
View File
@@ -56,19 +56,10 @@ interface TrackRowProps {
player: ReturnType<typeof usePlayer>;
serverId: string;
song: NonNullable<AlbumTracksTableProps['songs']>[0];
songIndex: number;
songs: Song[];
}
const TrackRow = ({
controls,
internalState,
player,
serverId,
song,
songIndex,
songs,
}: TrackRowProps) => {
const TrackRow = ({ controls, internalState, player, serverId, song, songs }: TrackRowProps) => {
const rowId = internalState.extractRowId(song);
const isSelected = useItemSelectionState(internalState, rowId);
const isDraggingState = useItemDraggingState(internalState, rowId);
@@ -122,11 +113,10 @@ const TrackRow = ({
const mergedRef = useMergedRef(containerRef, dragRef);
const handleDoubleClick = useCallback(() => {
if (songs && songIndex !== undefined) {
player.addToQueueByData(songs, Play.NOW);
player.mediaPlayByIndex(songIndex);
if (songs && song.id) {
player.addToQueueByData(songs, Play.NOW, song.id);
}
}, [player, songs, songIndex]);
}, [player, songs, song.id]);
return (
<Text
@@ -180,7 +170,7 @@ const AlbumTracksTable = ({ isDark, serverId, songs }: AlbumTracksTableProps) =>
<div className={clsx(styles.tracks, { [styles.dark]: isDark })}>
<ScrollArea>
<div className={styles['tracks-list']}>
{songs?.map((song, index) => (
{songs?.map((song) => (
<TrackRow
controls={controls}
internalState={internalState}
@@ -188,7 +178,6 @@ const AlbumTracksTable = ({ isDark, serverId, songs }: AlbumTracksTableProps) =>
player={player}
serverId={serverId}
song={song}
songIndex={index}
songs={fullSongs || []}
/>
))}
src/renderer/features/artists/components/album-artist-detail-content.tsx
+3 -3
View File
@@ -221,16 +221,16 @@ const AlbumArtistMetadataTopSongs = ({
const overrideControls: Partial<ItemControls> = useMemo(() => {
return {
onDoubleClick: ({ index, internalState, item }) => {
onDoubleClick: ({ index, internalState, item, meta }) => {
if (!item) {
return;
}
const playType = (meta?.playType as Play) || Play.NOW;
const items = internalState?.getData() as Song[];
if (index !== undefined) {
player.addToQueueByData(items, Play.NOW);
player.mediaPlayByIndex(index);
player.addToQueueByData(items, playType, item.id);
}
},
};
src/renderer/features/artists/routes/album-artist-detail-top-songs-list-route.tsx
+3 -3
View File
@@ -65,16 +65,16 @@ const AlbumArtistDetailTopSongsListRoute = () => {
const overrideControls: Partial<ItemControls> = useMemo(() => {
return {
onDoubleClick: ({ index, internalState, item }) => {
onDoubleClick: ({ index, internalState, item, meta }) => {
if (!item) {
return;
}
const playType = (meta?.playType as Play) || Play.NOW;
const items = internalState?.getData() as Song[];
if (index !== undefined) {
player.addToQueueByData(items, Play.NOW);
player.mediaPlayByIndex(index);
player.addToQueueByData(items, playType, item.id);
}
},
};
src/renderer/features/folders/components/folder-list-content.tsx
+16 -9
View File
@@ -117,7 +117,7 @@ export const FolderListView = ({ folderQuery }: FolderListViewProps) => {
const overrideControls = useMemo(() => {
return {
onDoubleClick: ({ index, internalState, item }: DefaultItemControlProps) => {
onDoubleClick: ({ internalState, item, meta }: DefaultItemControlProps) => {
if (!item) {
return;
}
@@ -127,17 +127,24 @@ export const FolderListView = ({ folderQuery }: FolderListViewProps) => {
return navigateToFolder(folder.id, folder.name);
}
const items = internalState?.getData() as Song[];
const playType = (meta?.playType as Play) || Play.NOW;
const songCount = items.filter(
(item) => item._itemType === LibraryItem.SONG,
).length;
const data = internalState?.getData();
if (!data) {
return;
}
const indexesToSkip = items.length - songCount;
const validSongs = data.filter((d): d is Song => {
return (
(d as unknown as { _itemType: LibraryItem })._itemType === LibraryItem.SONG
);
}) as Song[];
const startIndex = indexesToSkip + (index ?? 0);
player.addToQueueByData(items, Play.NOW);
player.mediaPlayByIndex(startIndex);
if (validSongs.length === 0) {
return;
}
player.addToQueueByData(validSongs, playType, item.id);
},
};
}, [navigateToFolder, player]);
src/renderer/features/player/context/player-context.tsx
+4 -4
View File
@@ -39,7 +39,7 @@ import {
import { Play, PlayerRepeat, PlayerShuffle } from '/@/shared/types/types';
export interface PlayerContext {
addToQueueByData: (data: Song[], type: AddToQueueType) => void;
addToQueueByData: (data: Song[], type: AddToQueueType, playSongId?: string) => void;
addToQueueByFetch: (
serverId: string,
id: string[],
@@ -208,7 +208,7 @@ export const PlayerProvider = ({ children }: { children: React.ReactNode }) => {
);
const addToQueueByData = useCallback(
(data: Song[], type: AddToQueueType) => {
(data: Song[], type: AddToQueueType, playSongId?: string) => {
if (typeof type === 'object' && 'edge' in type && type.edge !== null) {
const edge = type.edge === 'top' ? 'top' : 'bottom';
@@ -217,14 +217,14 @@ export const PlayerProvider = ({ children }: { children: React.ReactNode }) => {
meta: { data: data.length, edge, type, uniqueId: type.uniqueId },
});
storeActions.addToQueueByUniqueId(data, type.uniqueId, edge);
storeActions.addToQueueByUniqueId(data, type.uniqueId, edge, playSongId);
} else {
logFn.debug(logMsg[LogCategory.PLAYER].addToQueueByType, {
category: LogCategory.PLAYER,
meta: { data: data.length, type },
});
storeActions.addToQueueByType(data, type as Play);
storeActions.addToQueueByType(data, type as Play, playSongId);
}
},
[storeActions],
src/renderer/features/playlists/components/playlist-detail-song-list-table.tsx
+3 -3
View File
@@ -76,16 +76,16 @@ export const PlaylistDetailSongListTable = forwardRef<any, PlaylistDetailSongLis
const overrideControls: Partial<ItemControls> = useMemo(() => {
return {
onDoubleClick: ({ index, internalState, item }) => {
onDoubleClick: ({ index, internalState, item, meta }) => {
if (!item) {
return;
}
const playType = (meta?.playType as Play) || Play.NOW;
const items = internalState?.getData() as Song[];
if (index !== undefined) {
player.addToQueueByData(items, Play.NOW);
player.mediaPlayByIndex(index);
player.addToQueueByData(items, playType, item.id);
}
},
};
src/renderer/store/player.store.ts
+82 -4
View File
@@ -29,8 +29,13 @@ export interface PlayerState extends Actions, State {}
export type QueueGroupingProperty = keyof QueueSong;
interface Actions {
addToQueueByType: (items: Song[], playType: Play) => void;
addToQueueByUniqueId: (items: Song[], uniqueId: string, edge: 'bottom' | 'top') => void;
addToQueueByType: (items: Song[], playType: Play, playSongId?: string) => void;
addToQueueByUniqueId: (
items: Song[],
uniqueId: string,
edge: 'bottom' | 'top',
playSongId?: string,
) => void;
clearQueue: () => void;
clearSelected: (items: QueueSong[]) => void;
decreaseVolume: (value: number) => void;
@@ -260,10 +265,15 @@ export const usePlayerStoreBase = createWithEqualityFn<PlayerState>()(
persist(
subscribeWithSelector(
immer((set, get) => ({
addToQueueByType: (items, playType) => {
addToQueueByType: (items, playType, playSongId) => {
const newItems = items.map(toQueueSong);
const newUniqueIds = newItems.map((item) => item._uniqueId);
// Find the target song's uniqueId if playSongId is provided
const targetSongUniqueId = playSongId
? newItems.find((item) => item.id === playSongId)?._uniqueId
: undefined;
const queueType = getQueueType();
switch (queueType) {
@@ -760,10 +770,47 @@ export const usePlayerStoreBase = createWithEqualityFn<PlayerState>()(
break;
}
}
// If playSongId is provided, find the song and start playback on it
if (targetSongUniqueId) {
set((state) => {
const queue = state.getQueue();
const queueIndex = queue.items.findIndex(
(item) => item._uniqueId === targetSongUniqueId,
);
if (queueIndex !== -1) {
if (
state.player.shuffle === PlayerShuffle.TRACK &&
state.queue.shuffled.length > 0
) {
// Find the shuffled position for this queue index
const shuffledPosition = state.queue.shuffled.findIndex(
(idx) => idx === queueIndex,
);
if (shuffledPosition !== -1) {
state.player.index = shuffledPosition;
} else {
state.player.index = queueIndex;
}
} else {
state.player.index = queueIndex;
}
state.player.status = PlayerStatus.PLAYING;
setTimestampStore(0);
}
});
}
},
addToQueueByUniqueId: (items, uniqueId, edge) => {
addToQueueByUniqueId: (items, uniqueId, edge, playSongId) => {
const newItems = items.map(toQueueSong);
const newUniqueIds = newItems.map((item) => item._uniqueId);
// Find the target song's uniqueId if playSongId is provided
const targetSongUniqueId = playSongId
? newItems.find((item) => item.id === playSongId)?._uniqueId
: undefined;
const queueType = getQueueType();
set((state) => {
@@ -888,6 +935,37 @@ export const usePlayerStoreBase = createWithEqualityFn<PlayerState>()(
}
}
});
// If playSongId is provided, find the song and start playback on it
if (targetSongUniqueId) {
set((state) => {
const queue = state.getQueue();
const queueIndex = queue.items.findIndex(
(item) => item._uniqueId === targetSongUniqueId,
);
if (queueIndex !== -1) {
if (
state.player.shuffle === PlayerShuffle.TRACK &&
state.queue.shuffled.length > 0
) {
// Find the shuffled position for this queue index
const shuffledPosition = state.queue.shuffled.findIndex(
(idx) => idx === queueIndex,
);
if (shuffledPosition !== -1) {
state.player.index = shuffledPosition;
} else {
state.player.index = queueIndex;
}
} else {
state.player.index = queueIndex;
}
state.player.status = PlayerStatus.PLAYING;
setTimestampStore(0);
}
});
}
},
clearQueue: () => {
set((state) => {