Move play queue handler to context

This commit is contained in:
jeffvli 2022-12-31 19:26:58 -08:00
parent 0f364f7c5c
commit aa1cd742ad
15 changed files with 207 additions and 171 deletions

View File

@ -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 (
<QueryClientProvider client={queryClient}>
<MantineProvider
withGlobalStyles
withNormalizeCSS
theme={{
breakpoints: {
lg: 1200,
md: 1000,
sm: 800,
xl: 1400,
xs: 500,
},
colorScheme: theme as 'light' | 'dark',
components: { Modal: { styles: { body: { padding: '.5rem' } } } },
defaultRadius: 'xs',
dir: 'ltr',
focusRing: 'auto',
focusRingStyles: {
inputStyles: () => ({
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,
},
<MantineProvider
withGlobalStyles
withNormalizeCSS
theme={{
breakpoints: {
lg: 1200,
md: 1000,
sm: 800,
xl: 1400,
xs: 500,
},
colorScheme: theme as 'light' | 'dark',
components: { Modal: { styles: { body: { padding: '.5rem' } } } },
defaultRadius: 'xs',
dir: 'ltr',
focusRing: 'auto',
focusRingStyles: {
inputStyles: () => ({
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,
},
}}
>
<NotificationsProvider
autoClose={1500}
position="bottom-right"
style={{
marginBottom: '85px',
opacity: '.8',
userSelect: 'none',
width: '250px',
}}
transitionDuration={200}
>
<NotificationsProvider
autoClose={1500}
position="bottom-right"
style={{
marginBottom: '85px',
opacity: '.8',
userSelect: 'none',
width: '250px',
<ModalsProvider
modalProps={{
centered: true,
exitTransitionDuration: 300,
overflow: 'inside',
overlayBlur: 0,
overlayOpacity: 0.8,
transition: 'slide-down',
transitionDuration: 300,
}}
transitionDuration={200}
modals={{ base: BaseContextModal }}
>
<ModalsProvider
modalProps={{
centered: true,
exitTransitionDuration: 300,
overflow: 'inside',
overlayBlur: 0,
overlayOpacity: 0.8,
transition: 'slide-down',
transitionDuration: 300,
}}
modals={{ base: BaseContextModal }}
>
<PlayQueueHandlerContext.Provider value={{ handlePlayQueueAdd }}>
<ContextMenuProvider>
<AppRouter />
</ContextMenuProvider>
</ModalsProvider>
</NotificationsProvider>
</MantineProvider>
</QueryClientProvider>
</PlayQueueHandlerContext.Provider>
</ModalsProvider>
</NotificationsProvider>
</MantineProvider>
);
};

View File

@ -109,7 +109,7 @@ interface BaseGridCardProps {
route: CardRoute;
};
data: any;
handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
loading?: boolean;
size: number;
}

View File

@ -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<HTMLButtonElement>, playType?: Play) => {
e.preventDefault();
e.stopPropagation();
handlePlayQueueAdd({
handlePlayQueueAdd?.({
byItemType: {
id: itemData.id,
type: itemType,

View File

@ -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<any>[];
@ -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 (
<Wrapper>

View File

@ -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();

View File

@ -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<VirtualInfiniteGridRef | null>;
@ -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();

View File

@ -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<VirtualInfiniteGridRef | null>;
@ -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();

View File

@ -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,
});

View File

@ -0,0 +1,8 @@
import { createContext } from 'react';
import { PlayQueueAddOptions } from '/@/renderer/types';
export const PlayQueueHandlerContext = createContext<{
handlePlayQueueAdd: ((options: PlayQueueAddOptions) => void) | undefined;
}>({
handlePlayQueueAdd: undefined,
});

View File

@ -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;
};

View File

@ -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;
};

View File

@ -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';

View File

@ -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<QueueSong>) => {
if (!e.data) return;
handlePlayQueueAdd({
handlePlayQueueAdd?.({
byData: [e.data],
play: playButtonBehavior,
});

View File

@ -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<AgGridReactType | null>;
@ -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<QueueSong>) => {
if (!e.data) return;
handlePlayQueueAdd({
handlePlayQueueAdd?.({
byData: [e.data],
play: playButtonBehavior,
});

View File

@ -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(<App />);
root.render(
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>,
);