mirror of
https://github.com/jeffvli/feishin.git
synced 2024-11-20 06:27:09 +01:00
Move play queue handler to context
This commit is contained in:
parent
0f364f7c5c
commit
aa1cd742ad
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -109,7 +109,7 @@ interface BaseGridCardProps {
|
||||
route: CardRoute;
|
||||
};
|
||||
data: any;
|
||||
handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
|
||||
handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
|
||||
loading?: boolean;
|
||||
size: number;
|
||||
}
|
||||
|
@ -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,
|
||||
|
@ -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>
|
||||
|
@ -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();
|
||||
|
||||
|
@ -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();
|
||||
|
@ -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();
|
||||
|
@ -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,
|
||||
});
|
||||
|
@ -0,0 +1,8 @@
|
||||
import { createContext } from 'react';
|
||||
import { PlayQueueAddOptions } from '/@/renderer/types';
|
||||
|
||||
export const PlayQueueHandlerContext = createContext<{
|
||||
handlePlayQueueAdd: ((options: PlayQueueAddOptions) => void) | undefined;
|
||||
}>({
|
||||
handlePlayQueueAdd: undefined,
|
||||
});
|
@ -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;
|
||||
};
|
||||
|
7
src/renderer/features/player/hooks/use-playqueue-add.ts
Normal file
7
src/renderer/features/player/hooks/use-playqueue-add.ts
Normal 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;
|
||||
};
|
@ -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';
|
||||
|
@ -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,
|
||||
});
|
||||
|
@ -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,
|
||||
});
|
||||
|
@ -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>,
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user