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