From 3dcb0dc4ed48eb943d7a48b553b147ed7f4eb546 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Sat, 15 Jul 2023 15:57:40 -0700 Subject: [PATCH] Allow navigating directly to playlist song view --- src/renderer/components/card/card-rows.tsx | 7 +++++++ .../components/playlist-list-grid-view.tsx | 13 ++++++++---- .../components/playlist-list-table-view.tsx | 8 ++++++- .../components/general/control-settings.tsx | 20 ++++++++++++++++++ .../components/sidebar-playlist-list.tsx | 21 ++++++++++++------- src/renderer/store/settings.store.ts | 2 ++ 6 files changed, 58 insertions(+), 13 deletions(-) diff --git a/src/renderer/components/card/card-rows.tsx b/src/renderer/components/card/card-rows.tsx index 9cf2e144..9604f497 100644 --- a/src/renderer/components/card/card-rows.tsx +++ b/src/renderer/components/card/card-rows.tsx @@ -225,6 +225,13 @@ export const PLAYLIST_CARD_ROWS: { [key: string]: CardRow } = { slugs: [{ idProperty: 'id', slugProperty: 'playlistId' }], }, }, + nameFull: { + property: 'name', + route: { + route: AppRoute.PLAYLISTS_DETAIL_SONGS, + slugs: [{ idProperty: 'id', slugProperty: 'playlistId' }], + }, + }, owner: { property: 'owner', }, diff --git a/src/renderer/features/playlists/components/playlist-list-grid-view.tsx b/src/renderer/features/playlists/components/playlist-list-grid-view.tsx index 49fbfb29..33efebc2 100644 --- a/src/renderer/features/playlists/components/playlist-list-grid-view.tsx +++ b/src/renderer/features/playlists/components/playlist-list-grid-view.tsx @@ -15,7 +15,7 @@ import { import { usePlayQueueAdd } from '/@/renderer/features/player'; import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared'; import { AppRoute } from '/@/renderer/router/routes'; -import { useCurrentServer, usePlaylistListStore } from '/@/renderer/store'; +import { useCurrentServer, useGeneralSettings, usePlaylistListStore } from '/@/renderer/store'; import { CardRow, ListDisplayType } from '/@/renderer/types'; interface PlaylistListGridViewProps { @@ -31,6 +31,7 @@ export const PlaylistListGridView = ({ gridRef, itemCount }: PlaylistListGridVie const grid = usePlaylistGridStore(); const { setGrid } = usePlaylistStoreActions(); const page = usePlaylistListStore(); + const { defaultFullPlaylist } = useGeneralSettings(); const createFavoriteMutation = useCreateFavorite({}); const deleteFavoriteMutation = useDeleteFavorite({}); @@ -61,7 +62,9 @@ export const PlaylistListGridView = ({ gridRef, itemCount }: PlaylistListGridVie }; const cardRows = useMemo(() => { - const rows: CardRow[] = [PLAYLIST_CARD_ROWS.name]; + const rows: CardRow[] = defaultFullPlaylist + ? [PLAYLIST_CARD_ROWS.nameFull] + : [PLAYLIST_CARD_ROWS.name]; switch (page.filter.sortBy) { case PlaylistListSort.DURATION: @@ -84,7 +87,7 @@ export const PlaylistListGridView = ({ gridRef, itemCount }: PlaylistListGridVie } return rows; - }, [page.filter.sortBy]); + }, [defaultFullPlaylist, page.filter.sortBy]); const handleGridScroll = useCallback( (e: ListOnScrollProps) => { @@ -144,7 +147,9 @@ export const PlaylistListGridView = ({ gridRef, itemCount }: PlaylistListGridVie loading={itemCount === undefined || itemCount === null} minimumBatchSize={40} route={{ - route: AppRoute.PLAYLISTS_DETAIL, + route: defaultFullPlaylist + ? AppRoute.PLAYLISTS_DETAIL_SONGS + : AppRoute.PLAYLISTS_DETAIL, slugs: [{ idProperty: 'id', slugProperty: 'playlistId' }], }} width={width} diff --git a/src/renderer/features/playlists/components/playlist-list-table-view.tsx b/src/renderer/features/playlists/components/playlist-list-table-view.tsx index fdae517d..577b6e70 100644 --- a/src/renderer/features/playlists/components/playlist-list-table-view.tsx +++ b/src/renderer/features/playlists/components/playlist-list-table-view.tsx @@ -27,6 +27,7 @@ import { useSetPlaylistTable, useCurrentServer, usePlaylistListStore, + useGeneralSettings, } from '/@/renderer/store'; import { ListDisplayType } from '/@/renderer/types'; @@ -43,6 +44,7 @@ export const PlaylistListTableView = ({ tableRef, itemCount }: PlaylistListTable const pagination = usePlaylistTablePagination(); const setPagination = useSetPlaylistTablePagination(); const setTable = useSetPlaylistTable(); + const { defaultFullPlaylist } = useGeneralSettings(); const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED; @@ -171,7 +173,11 @@ export const PlaylistListTableView = ({ tableRef, itemCount }: PlaylistListTable const handleRowDoubleClick = (e: RowDoubleClickedEvent) => { if (!e.data) return; - navigate(generatePath(AppRoute.PLAYLISTS_DETAIL, { playlistId: e.data.id })); + if (defaultFullPlaylist) { + navigate(generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId: e.data.id })); + } else { + navigate(generatePath(AppRoute.PLAYLISTS_DETAIL, { playlistId: e.data.id })); + } }; return ( diff --git a/src/renderer/features/settings/components/general/control-settings.tsx b/src/renderer/features/settings/components/general/control-settings.tsx index f825b019..0d856094 100644 --- a/src/renderer/features/settings/components/general/control-settings.tsx +++ b/src/renderer/features/settings/components/general/control-settings.tsx @@ -195,6 +195,26 @@ export const ControlSettings = () => { isHidden: !isElectron(), title: 'Save play queue', }, + { + control: ( + + setSettings({ + general: { + ...settings, + defaultFullPlaylist: e.currentTarget.checked, + }, + }) + } + /> + ), + description: + 'When navigating to a playlist, go to the playlist song list page instead of the default page', + isHidden: false, + title: 'Go to playlist songs page by default', + }, ]; return ; diff --git a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx index f554b4be..357845c6 100644 --- a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx +++ b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx @@ -13,12 +13,21 @@ import { Play } from '/@/renderer/types'; import AutoSizer from 'react-virtualized-auto-sizer'; import { FixedSizeList, ListChildComponentProps } from 'react-window'; import { useHideScrollbar } from '/@/renderer/hooks'; +import { useGeneralSettings } from '/@/renderer/store'; interface SidebarPlaylistListProps { data: ReturnType['data']; } const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => { + const path = data?.items[index].id + ? data.defaultFullPlaylist + ? generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId: data.items[index].id }) + : generatePath(AppRoute.PLAYLISTS_DETAIL, { + playlistId: data?.items[index].id, + }) + : undefined; + return (
{ cursor: 'default', width: '100%', }} - to={ - data?.items[index].id - ? generatePath(AppRoute.PLAYLISTS_DETAIL, { - playlistId: data?.items[index].id, - }) - : undefined - } + to={path} > {data?.items[index].name} @@ -110,6 +113,7 @@ const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => { export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => { const { isScrollbarHidden, hideScrollbarElementProps } = useHideScrollbar(0); const handlePlayQueueAdd = usePlayQueueAdd(); + const { defaultFullPlaylist } = useGeneralSettings(); const [rect, setRect] = useState({ height: 0, @@ -133,10 +137,11 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => { const memoizedItemData = useMemo(() => { return { + defaultFullPlaylist, handlePlay: handlePlayPlaylist, items: data?.items, }; - }, [data?.items, handlePlayPlaylist]); + }, [data?.items, defaultFullPlaylist, handlePlayPlaylist]); return (