Move play queue handler to context

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 (
-    <QueryClientProvider client={queryClient}>
+    <MantineProvider
-      <MantineProvider
+      withGlobalStyles
-        withGlobalStyles
+      withNormalizeCSS
-        withNormalizeCSS
+      theme={{
-        theme={{
+        breakpoints: {
-          breakpoints: {
+          lg: 1200,
-            lg: 1200,
+          md: 1000,
-            md: 1000,
+          sm: 800,
-            sm: 800,
+          xl: 1400,
-            xl: 1400,
+          xs: 500,
-            xs: 500,
+        },
-          },
+        colorScheme: theme as 'light' | 'dark',
-          colorScheme: theme as 'light' | 'dark',
+        components: { Modal: { styles: { body: { padding: '.5rem' } } } },
-          components: { Modal: { styles: { body: { padding: '.5rem' } } } },
+        defaultRadius: 'xs',
-          defaultRadius: 'xs',
+        dir: 'ltr',
-          dir: 'ltr',
+        focusRing: 'auto',
-          focusRing: 'auto',
+        focusRingStyles: {
-          focusRingStyles: {
+          inputStyles: () => ({
-            inputStyles: () => ({
+            border: '1px solid var(--primary-color)',
-              border: '1px solid var(--primary-color)',
+          }),
-            }),
+          resetStyles: () => ({ outline: 'none' }),
-            resetStyles: () => ({ outline: 'none' }),
+          styles: () => ({
-            styles: () => ({
+            outline: '1px solid var(--primary-color)',
-              outline: '1px solid var(--primary-color)',
+            outlineOffset: '-1px',
-              outlineOffset: '-1px',
+          }),
-            }),
+        },
-          },
+        fontFamily: 'var(--content-font-family)',
-          fontFamily: 'var(--content-font-family)',
+        fontSizes: {
-          fontSizes: {
+          lg: 16,
-            lg: 16,
+          md: 14,
-            md: 14,
+          sm: 12,
-            sm: 12,
+          xl: 18,
-            xl: 18,
+          xs: 10,
-            xs: 10,
+        },
-          },
+        headings: { fontFamily: 'var(--content-font-family)' },
-          headings: { fontFamily: 'var(--content-font-family)' },
+        other: {},
-          other: {},
+        spacing: {
-          spacing: {
+          lg: 12,
-            lg: 12,
+          md: 8,
-            md: 8,
+          sm: 4,
-            sm: 4,
+          xl: 16,
-            xl: 16,
+          xs: 2,
-            xs: 2,
+        },
-          },
+      }}
+    >
+      <NotificationsProvider
+        autoClose={1500}
+        position="bottom-right"
+        style={{
+          marginBottom: '85px',
+          opacity: '.8',
+          userSelect: 'none',
+          width: '250px',
         }}
+        transitionDuration={200}
       >
-        <NotificationsProvider
+        <ModalsProvider
-          autoClose={1500}
+          modalProps={{
-          position="bottom-right"
+            centered: true,
-          style={{
+            exitTransitionDuration: 300,
-            marginBottom: '85px',
+            overflow: 'inside',
-            opacity: '.8',
+            overlayBlur: 0,
-            userSelect: 'none',
+            overlayOpacity: 0.8,
-            width: '250px',
+            transition: 'slide-down',
+            transitionDuration: 300,
           }}
-          transitionDuration={200}
+          modals={{ base: BaseContextModal }}
         >
-          <ModalsProvider
+          <PlayQueueHandlerContext.Provider value={{ handlePlayQueueAdd }}>
-            modalProps={{
-              centered: true,
-              exitTransitionDuration: 300,
-              overflow: 'inside',
-              overlayBlur: 0,
-              overlayOpacity: 0.8,
-              transition: 'slide-down',
-              transitionDuration: 300,
-            }}
-            modals={{ base: BaseContextModal }}
-          >
             <ContextMenuProvider>
               <AppRouter />
             </ContextMenuProvider>
-          </ModalsProvider>
+          </PlayQueueHandlerContext.Provider>
-        </NotificationsProvider>
+        </ModalsProvider>
-      </MantineProvider>
+      </NotificationsProvider>
-    </QueryClientProvider>
+    </MantineProvider>
   );
 };

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

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

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<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>

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

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

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

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

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

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) => {
+  const handlePlayQueueAdd = useCallback(
-    if (!server) return toast.error({ message: 'No server selected', type: 'error' });
+    async (options: PlayQueueAddOptions) => {
-    let songs = null;
+      if (!server) return toast.error({ message: 'No server selected', type: 'error' });
+      let songs = null;
 
-    if (options.byItemType) {
+      if (options.byItemType) {
-      let songsList;
+        let songsList;
-      let queryFilter: any;
+        let queryFilter: any;
-      let queryKey: any;
+        let queryKey: any;
-      if (options.byItemType.type === LibraryItem.ALBUM) {
+        if (options.byItemType.type === LibraryItem.ALBUM) {
-        queryFilter = {
+          queryFilter = {
-          albumIds: options.byItemType?.id || [],
+            albumIds: options.byItemType?.id || [],
-          sortBy: SongListSort.ALBUM,
+            sortBy: SongListSort.ALBUM,
-          sortOrder: SortOrder.ASC,
+            sortOrder: SortOrder.ASC,
-          startIndex: 0,
+            startIndex: 0,
-        };
+          };
 
-        queryKey = queryKeys.songs.list(server?.id, queryFilter);
+          queryKey = queryKeys.songs.list(server?.id, queryFilter);
-      } else if (options.byItemType.type === LibraryItem.ALBUM_ARTIST) {
+        } else if (options.byItemType.type === LibraryItem.ALBUM_ARTIST) {
-        queryFilter = {
+          queryFilter = {
-          artistIds: options.byItemType?.id || [],
+            artistIds: options.byItemType?.id || [],
-          sortBy: SongListSort.ALBUM,
+            sortBy: SongListSort.ALBUM,
-          sortOrder: SortOrder.ASC,
+            sortOrder: SortOrder.ASC,
-          startIndex: 0,
+            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 {
+          queryKey = queryKeys.songs.list(server?.id, queryFilter);
-        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',
-        });
-      }
 
-      if (!songsList) return toast.warn({ message: 'No songs found' });
+        try {
-
+          songsList = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
-      switch (server?.type) {
+            api.controller.getSongList({
-        case 'jellyfin':
+              query: queryFilter,
-          songs = songsList.items?.map((song) =>
+              server,
-            jfNormalize.song(song as JFSong, server, deviceId),
+              signal,
+            }),
           );
-          break;
+        } catch (err: any) {
-        case 'navidrome':
+          return toast.error({
-          songs = songsList.items?.map((song) =>
+            message: err.message,
-            ndNormalize.song(song as NDSong, server, deviceId),
+            title: 'Play queue add failed',
-          );
+          });
-          break;
+        }
-        case 'subsonic':
-          break;
-      }
-    } else if (options.byData) {
-      songs = options.byData.map((song) => ({ ...song, uniqueId: nanoid() }));
-    }
 
-    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);
+        switch (server?.type) {
-
+          case 'jellyfin':
-    if (options.play === Play.NEXT || options.play === Play.LAST) {
+            songs = songsList.items?.map((song) =>
-      if (playerType === PlaybackType.LOCAL) {
+              jfNormalize.song(song as JFSong, server, deviceId),
-        mpvPlayer.setQueueNext(playerData);
+            );
-      }
+            break;
-    }
+          case 'navidrome':
-
+            songs = songsList.items?.map((song) =>
-    if (options.play === Play.NOW) {
+              ndNormalize.song(song as NDSong, server, deviceId),
-      if (playerType === PlaybackType.LOCAL) {
+            );
-        mpvPlayer.setQueue(playerData);
+            break;
-        mpvPlayer.play();
+          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;
 };

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

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

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

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

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