Redo queue handler as hook

src/renderer/components/virtual-grid/grid-card/default-card.tsx

@@ -7,9 +7,9 @@ import { SimpleImg } from 'react-simple-img';
 import type { ListChildComponentProps } from 'react-window';
 import styled from 'styled-components';
 import { Text } from '/@/renderer/components/text';
-import type { LibraryItem, CardRow, CardRoute, Play } from '/@/renderer/types';
-import GridCardControls from './grid-card-controls';
+import type { LibraryItem, CardRow, CardRoute, Play, PlayQueueAddOptions } from '/@/renderer/types';
 import { Skeleton } from '/@/renderer/components/skeleton';
+import { GridCardControls } from '/@/renderer/components/virtual-grid/grid-card/grid-card-controls';
 
 const CardWrapper = styled.div<{
   itemGap: number;
@@ -114,6 +114,7 @@ interface BaseGridCardProps {
   columnIndex: number;
   controls: {
     cardRows: CardRow[];
+    handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
     itemType: LibraryItem;
     playButtonBehavior: Play;
     route: CardRoute;
@@ -137,7 +138,7 @@ export const DefaultCard = ({
   const navigate = useNavigate();
   const { index } = listChildProps;
   const { itemGap, itemHeight, itemWidth } = sizes;
-  const { itemType, cardRows, route } = controls;
+  const { itemType, cardRows, route, handlePlayQueueAdd } = controls;
 
   const cardSize = itemWidth - 24;
 
@@ -191,6 +192,7 @@ export const DefaultCard = ({
             )}
             <ControlsContainer>
               <GridCardControls
+                handlePlayQueueAdd={handlePlayQueueAdd}
                 itemData={data}
                 itemType={itemType}
               />

src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx

@@ -6,7 +6,7 @@ import { RiPlayFill, RiMore2Fill, RiHeartFill, RiHeartLine } from 'react-icons/r
 import styled from 'styled-components';
 import { _Button } from '/@/renderer/components/button';
 import { DropdownMenu } from '/@/renderer/components/dropdown-menu';
-import type { LibraryItem } from '/@/renderer/types';
+import type { LibraryItem, PlayQueueAddOptions } from '/@/renderer/types';
 import { Play } from '/@/renderer/types';
 import { useSettingsStore } from '/@/renderer/store/settings.store';
 
@@ -116,23 +116,24 @@ const PLAY_TYPES = [
 export const GridCardControls = ({
   itemData,
   itemType,
+  handlePlayQueueAdd,
 }: {
+  handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
   itemData: any;
   itemType: LibraryItem;
 }) => {
   const playButtonBehavior = useSettingsStore((state) => state.player.playButtonBehavior);
 
-  const handlePlay = (e: MouseEvent<HTMLButtonElement>, playType?: Play) => {
+  const handlePlay = async (e: MouseEvent<HTMLButtonElement>, playType?: Play) => {
     e.preventDefault();
     e.stopPropagation();
-    import('/@/renderer/features/player/utils/handle-playqueue-add').then((fn) => {
-      fn.handlePlayQueueAdd({
-        byItemType: {
-          id: itemData.id,
-          type: itemType,
-        },
-        play: playType || playButtonBehavior,
-      });
+
+    handlePlayQueueAdd?.({
+      byItemType: {
+        id: itemData.id,
+        type: itemType,
+      },
+      play: playType || playButtonBehavior,
     });
   };
 
@@ -200,5 +201,3 @@ export const GridCardControls = ({
     </GridCardControlsContainer>
   );
 };
-
-export default GridCardControls;

src/renderer/components/virtual-grid/grid-card/index.tsx

@@ -17,9 +17,11 @@ export const GridCard = memo(({ data, index, style }: ListChildComponentProps) =
     itemData,
     itemType,
     playButtonBehavior,
+    handlePlayQueueAdd,
     route,
     display,
   } = data as GridCardData;
+
   const cards = [];
   const startIndex = index * columnCount;
   const stopIndex = Math.min(itemCount - 1, startIndex + columnCount - 1);
@@ -33,6 +35,7 @@ export const GridCard = memo(({ data, index, style }: ListChildComponentProps) =
         columnIndex={i}
         controls={{
           cardRows,
+          handlePlayQueueAdd,
           itemType,
           playButtonBehavior,
           route,

src/renderer/components/virtual-grid/grid-card/poster-card.tsx

@@ -8,8 +8,8 @@ import type { ListChildComponentProps } from 'react-window';
 import styled from 'styled-components';
 import { Skeleton } from '/@/renderer/components/skeleton';
 import { Text } from '/@/renderer/components/text';
-import type { LibraryItem, CardRow, CardRoute, Play } from '/@/renderer/types';
-import GridCardControls from './grid-card-controls';
+import type { LibraryItem, CardRow, CardRoute, Play, PlayQueueAddOptions } from '/@/renderer/types';
+import { GridCardControls } from '/@/renderer/components/virtual-grid/grid-card/grid-card-controls';
 
 const CardWrapper = styled.div<{
   itemGap: number;
@@ -117,6 +117,7 @@ interface BaseGridCardProps {
   columnIndex: number;
   controls: {
     cardRows: CardRow[];
+    handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
     itemType: LibraryItem;
     playButtonBehavior: Play;
     route: CardRoute;
@@ -184,6 +185,7 @@ export const PosterCard = ({
               )}
               <ControlsContainer>
                 <GridCardControls
+                  handlePlayQueueAdd={controls.handlePlayQueueAdd}
                   itemData={data}
                   itemType={controls.itemType}
                 />

src/renderer/components/virtual-grid/virtual-grid-wrapper.tsx

@@ -5,7 +5,13 @@ import type { FixedSizeListProps } from 'react-window';
 import { FixedSizeList } from 'react-window';
 import styled from 'styled-components';
 import { GridCard } from '/@/renderer/components/virtual-grid/grid-card';
-import type { CardRow, LibraryItem, CardDisplayType, CardRoute } from '/@/renderer/types';
+import type {
+  CardRow,
+  LibraryItem,
+  CardDisplayType,
+  CardRoute,
+  PlayQueueAddOptions,
+} from '/@/renderer/types';
 
 const createItemData = memoize(
   (
@@ -19,10 +25,12 @@ const createItemData = memoize(
     itemType,
     itemWidth,
     route,
+    handlePlayQueueAdd,
   ) => ({
     cardRows,
     columnCount,
     display,
+    handlePlayQueueAdd,
     itemCount,
     itemData,
     itemGap,
@@ -47,6 +55,7 @@ export const VirtualGridWrapper = ({
   columnCount,
   rowCount,
   initialScrollOffset,
+  handlePlayQueueAdd,
   itemData,
   route,
   onScroll,
@@ -55,6 +64,7 @@ export const VirtualGridWrapper = ({
   cardRows: CardRow[];
   columnCount: number;
   display: CardDisplayType;
+  handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
   itemData: any[];
   itemGap: number;
   itemHeight: number;
@@ -75,6 +85,7 @@ export const VirtualGridWrapper = ({
     itemType,
     itemWidth,
     route,
+    handlePlayQueueAdd,
   );
 
   const memoizedOnScroll = createScrollHandler(onScroll);

src/renderer/components/virtual-grid/virtual-infinite-grid.tsx

@@ -3,18 +3,19 @@ import debounce from 'lodash/debounce';
 import type { FixedSizeListProps } from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
 import { VirtualGridWrapper } from '/@/renderer/components/virtual-grid/virtual-grid-wrapper';
-import type { CardRoute, CardRow, LibraryItem } from '/@/renderer/types';
+import type { CardRoute, CardRow, LibraryItem, PlayQueueAddOptions } from '/@/renderer/types';
 import { CardDisplayType } from '/@/renderer/types';
 
 interface VirtualGridProps extends Omit<FixedSizeListProps, 'children' | 'itemSize'> {
   cardRows: CardRow[];
   display?: CardDisplayType;
   fetchFn: (options: { columnCount: number; skip: number; take: number }) => Promise<any>;
+  handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
   itemGap: number;
   itemSize: number;
   itemType: LibraryItem;
   minimumBatchSize?: number;
-  refresh?: any; // Pass in any value to refresh the grid when changed
+  refresh?: any;
   route?: CardRoute;
 }
 
@@ -35,6 +36,7 @@ export const VirtualInfiniteGrid = ({
   route,
   onScroll,
   display,
+  handlePlayQueueAdd,
   minimumBatchSize,
   fetchFn,
   initialScrollOffset,
@@ -123,6 +125,7 @@ export const VirtualInfiniteGrid = ({
           cardRows={cardRows}
           columnCount={columnCount}
           display={display || CardDisplayType.CARD}
+          handlePlayQueueAdd={handlePlayQueueAdd}
           height={height}
           initialScrollOffset={initialScrollOffset}
           itemCount={itemCount || 0}