diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx index 98de6086..13b9a480 100644 --- a/src/renderer/app.tsx +++ b/src/renderer/app.tsx @@ -5,16 +5,16 @@ import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model'; import { MantineProvider } from '@mantine/core'; import { ModalsProvider } from '@mantine/modals'; import { NotificationsProvider } from '@mantine/notifications'; -import { QueryClientProvider } from '@tanstack/react-query'; import { initSimpleImg } from 'react-simple-img'; import { BaseContextModal } from './components'; import { useTheme } from './hooks'; -import { queryClient } from './lib/react-query'; import { AppRouter } from './router/app-router'; import { useSettingsStore } from './store/settings.store'; import './styles/global.scss'; import '@ag-grid-community/styles/ag-grid.css'; import { ContextMenuProvider } from '/@/renderer/features/context-menu'; +import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add'; +import { PlayQueueHandlerContext } from '/@/renderer/features/player'; ModuleRegistry.registerModules([ClientSideRowModelModule, InfiniteRowModelModule]); @@ -24,87 +24,89 @@ export const App = () => { const theme = useTheme(); const contentFont = useSettingsStore((state) => state.general.fontContent); + const handlePlayQueueAdd = useHandlePlayQueueAdd(); + useEffect(() => { const root = document.documentElement; root.style.setProperty('--content-font-family', contentFont); }, [contentFont]); return ( - - ({ - border: '1px solid var(--primary-color)', - }), - resetStyles: () => ({ outline: 'none' }), - styles: () => ({ - outline: '1px solid var(--primary-color)', - outlineOffset: '-1px', - }), - }, - fontFamily: 'var(--content-font-family)', - fontSizes: { - lg: 16, - md: 14, - sm: 12, - xl: 18, - xs: 10, - }, - headings: { fontFamily: 'var(--content-font-family)' }, - other: {}, - spacing: { - lg: 12, - md: 8, - sm: 4, - xl: 16, - xs: 2, - }, + ({ + border: '1px solid var(--primary-color)', + }), + resetStyles: () => ({ outline: 'none' }), + styles: () => ({ + outline: '1px solid var(--primary-color)', + outlineOffset: '-1px', + }), + }, + fontFamily: 'var(--content-font-family)', + fontSizes: { + lg: 16, + md: 14, + sm: 12, + xl: 18, + xs: 10, + }, + headings: { fontFamily: 'var(--content-font-family)' }, + other: {}, + spacing: { + lg: 12, + md: 8, + sm: 4, + xl: 16, + xs: 2, + }, + }} + > + - - + - - - - + + + + ); }; diff --git a/src/renderer/components/card/album-card.tsx b/src/renderer/components/card/album-card.tsx index a3f98d2c..fd8d2059 100644 --- a/src/renderer/components/card/album-card.tsx +++ b/src/renderer/components/card/album-card.tsx @@ -109,7 +109,7 @@ interface BaseGridCardProps { route: CardRoute; }; data: any; - handlePlayQueueAdd: (options: PlayQueueAddOptions) => void; + handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void; loading?: boolean; size: number; } diff --git a/src/renderer/components/card/card-controls.tsx b/src/renderer/components/card/card-controls.tsx index c8046fcd..af25780e 100644 --- a/src/renderer/components/card/card-controls.tsx +++ b/src/renderer/components/card/card-controls.tsx @@ -118,7 +118,7 @@ export const CardControls = ({ itemType, handlePlayQueueAdd, }: { - handlePlayQueueAdd: (options: PlayQueueAddOptions) => void; + handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void; itemData: any; itemType: LibraryItem; }) => { @@ -127,7 +127,7 @@ export const CardControls = ({ const handlePlay = (e: MouseEvent, playType?: Play) => { e.preventDefault(); e.stopPropagation(); - handlePlayQueueAdd({ + handlePlayQueueAdd?.({ byItemType: { id: itemData.id, type: itemType, diff --git a/src/renderer/components/grid-carousel/index.tsx b/src/renderer/components/grid-carousel/index.tsx index 53472eb5..c38ca770 100644 --- a/src/renderer/components/grid-carousel/index.tsx +++ b/src/renderer/components/grid-carousel/index.tsx @@ -9,7 +9,7 @@ import type { CardRow } from '/@/renderer/types'; import { LibraryItem, Play } from '/@/renderer/types'; import styled from 'styled-components'; import { AlbumCard } from '/@/renderer/components/card'; -import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add'; +import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add'; interface GridCarouselProps { cardRows: CardRow[]; @@ -80,7 +80,7 @@ const Carousel = ({ data, cardRows }: any) => { const { loading, pagination, gridHeight, imageSize, direction, uniqueId } = useContext(GridCarouselContext); - const handlePlayQueueAdd = useHandlePlayQueueAdd(); + const handlePlayQueueAdd = usePlayQueueAdd(); return ( diff --git a/src/renderer/features/albums/components/album-detail-content.tsx b/src/renderer/features/albums/components/album-detail-content.tsx index bba093a1..dbf428c3 100644 --- a/src/renderer/features/albums/components/album-detail-content.tsx +++ b/src/renderer/features/albums/components/album-detail-content.tsx @@ -19,7 +19,6 @@ import { useSongListStore } from '/@/renderer/store'; import styled from 'styled-components'; import { AppRoute } from '/@/renderer/router/routes'; import { useContainerQuery } from '/@/renderer/hooks'; -import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add'; import { usePlayButtonBehavior } from '/@/renderer/store/settings.store'; import { openContextMenu } from '/@/renderer/features/context-menu'; import { LibraryItem, Play } from '/@/renderer/types'; @@ -27,6 +26,7 @@ import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/conte import { PlayButton, PLAY_TYPES } from '/@/renderer/features/shared'; import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-query'; import { AlbumListSort, SortOrder } from '/@/renderer/api/types'; +import { usePlayQueueAdd } from '/@/renderer/features/player'; const ContentContainer = styled.div` display: flex; @@ -59,7 +59,7 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => { const { albumId } = useParams() as { albumId: string }; const detailQuery = useAlbumDetail({ id: albumId }); const cq = useContainerQuery(); - const handlePlayQueueAdd = useHandlePlayQueueAdd(); + const handlePlayQueueAdd = usePlayQueueAdd(); const page = useSongListStore(); diff --git a/src/renderer/features/albums/components/album-list-content.tsx b/src/renderer/features/albums/components/album-list-content.tsx index 5a485419..beac7d29 100644 --- a/src/renderer/features/albums/components/album-list-content.tsx +++ b/src/renderer/features/albums/components/album-list-content.tsx @@ -17,7 +17,6 @@ import { controller } from '/@/renderer/api/controller'; import { queryKeys } from '/@/renderer/api/query-keys'; import { Album, AlbumListSort } from '/@/renderer/api/types'; import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-query'; -import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add'; import { useQueryClient } from '@tanstack/react-query'; import { useCurrentServer, @@ -43,6 +42,7 @@ import { openContextMenu } from '/@/renderer/features/context-menu'; import { ALBUM_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items'; import sortBy from 'lodash/sortBy'; import { generatePath, useNavigate } from 'react-router'; +import { usePlayQueueAdd } from '/@/renderer/features/player'; interface AlbumListContentProps { gridRef: MutableRefObject; @@ -55,7 +55,7 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) = const server = useCurrentServer(); const page = useAlbumListStore(); const setPage = useSetAlbumStore(); - const handlePlayQueueAdd = useHandlePlayQueueAdd(); + const handlePlayQueueAdd = usePlayQueueAdd(); const pagination = useAlbumTablePagination(); const setPagination = useSetAlbumTablePagination(); diff --git a/src/renderer/features/artists/components/album-artist-list-content.tsx b/src/renderer/features/artists/components/album-artist-list-content.tsx index 47e582ce..2b0858cd 100644 --- a/src/renderer/features/artists/components/album-artist-list-content.tsx +++ b/src/renderer/features/artists/components/album-artist-list-content.tsx @@ -15,7 +15,6 @@ import { ListOnScrollProps } from 'react-window'; import { api } from '/@/renderer/api'; import { queryKeys } from '/@/renderer/api/query-keys'; import { AlbumArtist, AlbumArtistListSort } from '/@/renderer/api/types'; -import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add'; import { useQueryClient } from '@tanstack/react-query'; import { useCurrentServer, @@ -42,6 +41,7 @@ import { ALBUM_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/cont import sortBy from 'lodash/sortBy'; import { generatePath, useNavigate } from 'react-router'; import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query'; +import { usePlayQueueAdd } from '/@/renderer/features/player'; interface AlbumArtistListContentProps { gridRef: MutableRefObject; @@ -54,7 +54,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon const server = useCurrentServer(); const page = useAlbumArtistListStore(); const setPage = useSetAlbumArtistStore(); - const handlePlayQueueAdd = useHandlePlayQueueAdd(); + const handlePlayQueueAdd = usePlayQueueAdd(); const pagination = useAlbumArtistTablePagination(); const setPagination = useSetAlbumArtistTablePagination(); diff --git a/src/renderer/features/context-menu/context-menu-provider.tsx b/src/renderer/features/context-menu/context-menu-provider.tsx index 14875395..49cd9be4 100644 --- a/src/renderer/features/context-menu/context-menu-provider.tsx +++ b/src/renderer/features/context-menu/context-menu-provider.tsx @@ -7,7 +7,7 @@ import { SetContextMenuItems, useContextMenuEvents, } from '/@/renderer/features/context-menu/events'; -import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add'; +import { usePlayQueueAdd } from '/@/renderer/features/player'; import { LibraryItem, Play } from '/@/renderer/types'; type ContextMenuContextProps = { @@ -45,7 +45,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => { yPos: 0, }); - const handlePlayQueueAdd = useHandlePlayQueueAdd(); + const handlePlayQueueAdd = usePlayQueueAdd(); const openContextMenu = (args: OpenContextMenuProps) => { const { xPos, yPos, menuItems, data, type } = args; @@ -70,32 +70,30 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => { }); const handlePlay = (play: Play) => { - console.log('ctx', ctx); - switch (ctx.type) { case LibraryItem.ALBUM: - handlePlayQueueAdd({ + handlePlayQueueAdd?.({ byItemType: { id: ctx.data.map((item) => item.id), type: ctx.type }, play, }); break; case LibraryItem.ARTIST: - handlePlayQueueAdd({ + handlePlayQueueAdd?.({ byItemType: { id: ctx.data.map((item) => item.id), type: ctx.type }, play, }); break; case LibraryItem.ALBUM_ARTIST: - handlePlayQueueAdd({ + handlePlayQueueAdd?.({ byItemType: { id: ctx.data.map((item) => item.id), type: ctx.type }, play, }); break; case LibraryItem.SONG: - handlePlayQueueAdd({ byData: ctx.data, play }); + handlePlayQueueAdd?.({ byData: ctx.data, play }); break; case LibraryItem.PLAYLIST: - handlePlayQueueAdd({ + handlePlayQueueAdd?.({ byItemType: { id: ctx.data.map((item) => item.id), type: ctx.type }, play, }); diff --git a/src/renderer/features/player/context/play-queue-handler-context.ts b/src/renderer/features/player/context/play-queue-handler-context.ts new file mode 100644 index 00000000..f322c070 --- /dev/null +++ b/src/renderer/features/player/context/play-queue-handler-context.ts @@ -0,0 +1,8 @@ +import { createContext } from 'react'; +import { PlayQueueAddOptions } from '/@/renderer/types'; + +export const PlayQueueHandlerContext = createContext<{ + handlePlayQueueAdd: ((options: PlayQueueAddOptions) => void) | undefined; +}>({ + handlePlayQueueAdd: undefined, +}); diff --git a/src/renderer/features/player/hooks/use-handle-playqueue-add.ts b/src/renderer/features/player/hooks/use-handle-playqueue-add.ts index 47da975c..58b393d0 100644 --- a/src/renderer/features/player/hooks/use-handle-playqueue-add.ts +++ b/src/renderer/features/player/hooks/use-handle-playqueue-add.ts @@ -1,3 +1,4 @@ +import { useCallback } from 'react'; import { useQueryClient } from '@tanstack/react-query'; import { api } from '/@/renderer/api/index'; import { jfNormalize } from '/@/renderer/api/jellyfin.api'; @@ -21,90 +22,102 @@ export const useHandlePlayQueueAdd = () => { const deviceId = useAuthStore.getState().deviceId; const server = useAuthStore.getState().currentServer; - const handlePlayQueueAdd = async (options: PlayQueueAddOptions) => { - if (!server) return toast.error({ message: 'No server selected', type: 'error' }); - let songs = null; + const handlePlayQueueAdd = useCallback( + async (options: PlayQueueAddOptions) => { + if (!server) return toast.error({ message: 'No server selected', type: 'error' }); + let songs = null; - if (options.byItemType) { - let songsList; - let queryFilter: any; - let queryKey: any; - if (options.byItemType.type === LibraryItem.ALBUM) { - queryFilter = { - albumIds: options.byItemType?.id || [], - sortBy: SongListSort.ALBUM, - sortOrder: SortOrder.ASC, - startIndex: 0, - }; + if (options.byItemType) { + let songsList; + let queryFilter: any; + let queryKey: any; + if (options.byItemType.type === LibraryItem.ALBUM) { + queryFilter = { + albumIds: options.byItemType?.id || [], + sortBy: SongListSort.ALBUM, + sortOrder: SortOrder.ASC, + startIndex: 0, + }; - queryKey = queryKeys.songs.list(server?.id, queryFilter); - } else if (options.byItemType.type === LibraryItem.ALBUM_ARTIST) { - queryFilter = { - artistIds: options.byItemType?.id || [], - sortBy: SongListSort.ALBUM, - sortOrder: SortOrder.ASC, - startIndex: 0, - }; + queryKey = queryKeys.songs.list(server?.id, queryFilter); + } else if (options.byItemType.type === LibraryItem.ALBUM_ARTIST) { + queryFilter = { + artistIds: options.byItemType?.id || [], + sortBy: SongListSort.ALBUM, + sortOrder: SortOrder.ASC, + startIndex: 0, + }; - queryKey = queryKeys.songs.list(server?.id, queryFilter); - } + queryKey = queryKeys.songs.list(server?.id, queryFilter); + } else if (options.byItemType.type === LibraryItem.PLAYLIST) { + queryFilter = { + artistIds: options.byItemType?.id || [], + sortBy: SongListSort.ALBUM, + sortOrder: SortOrder.ASC, + startIndex: 0, + }; - try { - songsList = await queryClient.fetchQuery(queryKey, async ({ signal }) => - api.controller.getSongList({ - query: queryFilter, - server, - signal, - }), - ); - } catch (err: any) { - return toast.error({ - message: err.message, - title: 'Play queue add failed', - }); - } + queryKey = queryKeys.songs.list(server?.id, queryFilter); + } - if (!songsList) return toast.warn({ message: 'No songs found' }); - - switch (server?.type) { - case 'jellyfin': - songs = songsList.items?.map((song) => - jfNormalize.song(song as JFSong, server, deviceId), + try { + songsList = await queryClient.fetchQuery(queryKey, async ({ signal }) => + api.controller.getSongList({ + query: queryFilter, + server, + signal, + }), ); - break; - case 'navidrome': - songs = songsList.items?.map((song) => - ndNormalize.song(song as NDSong, server, deviceId), - ); - break; - case 'subsonic': - break; - } - } else if (options.byData) { - songs = options.byData.map((song) => ({ ...song, uniqueId: nanoid() })); - } + } catch (err: any) { + return toast.error({ + message: err.message, + title: 'Play queue add failed', + }); + } - if (!songs) return toast.warn({ message: 'No songs found' }); + if (!songsList) return toast.warn({ message: 'No songs found' }); - const playerData = usePlayerStore.getState().actions.addToQueue(songs, options.play); - - if (options.play === Play.NEXT || options.play === Play.LAST) { - if (playerType === PlaybackType.LOCAL) { - mpvPlayer.setQueueNext(playerData); - } - } - - if (options.play === Play.NOW) { - if (playerType === PlaybackType.LOCAL) { - mpvPlayer.setQueue(playerData); - mpvPlayer.play(); + switch (server?.type) { + case 'jellyfin': + songs = songsList.items?.map((song) => + jfNormalize.song(song as JFSong, server, deviceId), + ); + break; + case 'navidrome': + songs = songsList.items?.map((song) => + ndNormalize.song(song as NDSong, server, deviceId), + ); + break; + case 'subsonic': + break; + } + } else if (options.byData) { + songs = options.byData.map((song) => ({ ...song, uniqueId: nanoid() })); } - usePlayerStore.getState().actions.play(); - } + if (!songs) return toast.warn({ message: 'No songs found' }); - return null; - }; + const playerData = usePlayerStore.getState().actions.addToQueue(songs, options.play); + + if (options.play === Play.NEXT || options.play === Play.LAST) { + if (playerType === PlaybackType.LOCAL) { + mpvPlayer.setQueueNext(playerData); + } + } + + if (options.play === Play.NOW) { + if (playerType === PlaybackType.LOCAL) { + mpvPlayer.setQueue(playerData); + mpvPlayer.play(); + } + + usePlayerStore.getState().actions.play(); + } + + return null; + }, + [deviceId, playerType, queryClient, server], + ); return handlePlayQueueAdd; }; diff --git a/src/renderer/features/player/hooks/use-playqueue-add.ts b/src/renderer/features/player/hooks/use-playqueue-add.ts new file mode 100644 index 00000000..0fb87611 --- /dev/null +++ b/src/renderer/features/player/hooks/use-playqueue-add.ts @@ -0,0 +1,7 @@ +import { useContext } from 'react'; +import { PlayQueueHandlerContext } from '/@/renderer/features/player/context/play-queue-handler-context'; + +export const usePlayQueueAdd = () => { + const { handlePlayQueueAdd } = useContext(PlayQueueHandlerContext); + return handlePlayQueueAdd; +}; diff --git a/src/renderer/features/player/index.ts b/src/renderer/features/player/index.ts index bfa9c40b..c1974d47 100644 --- a/src/renderer/features/player/index.ts +++ b/src/renderer/features/player/index.ts @@ -2,3 +2,5 @@ export * from './components/center-controls'; export * from './components/left-controls'; export * from './components/playerbar'; export * from './components/slider'; +export * from './context/play-queue-handler-context'; +export * from './hooks/use-playqueue-add'; diff --git a/src/renderer/features/playlists/components/playlist-detail-content.tsx b/src/renderer/features/playlists/components/playlist-detail-content.tsx index 3d862cb1..22007d9a 100644 --- a/src/renderer/features/playlists/components/playlist-detail-content.tsx +++ b/src/renderer/features/playlists/components/playlist-detail-content.tsx @@ -13,12 +13,12 @@ import debounce from 'lodash/debounce'; import { openContextMenu } from '/@/renderer/features/context-menu'; import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items'; import sortBy from 'lodash/sortBy'; -import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add'; import { usePlayButtonBehavior } from '/@/renderer/store/settings.store'; import { QueueSong } from '/@/renderer/api/types'; import { usePlaylistSongList } from '/@/renderer/features/playlists/queries/playlist-song-list-query'; import { useParams } from 'react-router'; import styled from 'styled-components'; +import { usePlayQueueAdd } from '/@/renderer/features/player'; const ContentContainer = styled.div` display: flex; @@ -56,7 +56,7 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps) // const pagination = useSongTablePagination(); // const setPagination = useSetSongTablePagination(); const setTable = useSetSongTable(); - const handlePlayQueueAdd = useHandlePlayQueueAdd(); + const handlePlayQueueAdd = usePlayQueueAdd(); const playButtonBehavior = usePlayButtonBehavior(); // const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED; @@ -198,7 +198,7 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps) const handleRowDoubleClick = (e: RowDoubleClickedEvent) => { if (!e.data) return; - handlePlayQueueAdd({ + handlePlayQueueAdd?.({ byData: [e.data], play: playButtonBehavior, }); diff --git a/src/renderer/features/songs/components/song-list-content.tsx b/src/renderer/features/songs/components/song-list-content.tsx index e85b4979..f326895e 100644 --- a/src/renderer/features/songs/components/song-list-content.tsx +++ b/src/renderer/features/songs/components/song-list-content.tsx @@ -33,9 +33,9 @@ import debounce from 'lodash/debounce'; import { openContextMenu } from '/@/renderer/features/context-menu'; import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items'; import sortBy from 'lodash/sortBy'; -import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add'; import { usePlayButtonBehavior } from '/@/renderer/store/settings.store'; import { QueueSong } from '/@/renderer/api/types'; +import { usePlayQueueAdd } from '/@/renderer/features/player'; interface SongListContentProps { tableRef: MutableRefObject; @@ -49,7 +49,7 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => { const pagination = useSongTablePagination(); const setPagination = useSetSongTablePagination(); const setTable = useSetSongTable(); - const handlePlayQueueAdd = useHandlePlayQueueAdd(); + const handlePlayQueueAdd = usePlayQueueAdd(); const playButtonBehavior = usePlayButtonBehavior(); const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED; @@ -189,7 +189,7 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => { const handleRowDoubleClick = (e: RowDoubleClickedEvent) => { if (!e.data) return; - handlePlayQueueAdd({ + handlePlayQueueAdd?.({ byData: [e.data], play: playButtonBehavior, }); diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx index 9b3ff33a..9ec9d7ea 100644 --- a/src/renderer/index.tsx +++ b/src/renderer/index.tsx @@ -1,7 +1,13 @@ +import { QueryClientProvider } from '@tanstack/react-query'; import { createRoot } from 'react-dom/client'; import { App } from './app'; +import { queryClient } from './lib/react-query'; const container = document.getElementById('root')! as HTMLElement; const root = createRoot(container); -root.render(); +root.render( + + + , +);