Add itemtype and optional pagination for carousel

src/renderer/components/grid-carousel/index.tsx

@@ -11,12 +11,14 @@ import styled from 'styled-components';
 import { AlbumCard } from '/@/renderer/components/card';
 import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
 import { LibraryItem } from '/@/renderer/api/types';
+import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 
 interface GridCarouselProps {
   cardRows: CardRow<any>[];
   children: React.ReactElement;
   containerWidth: number;
   data: any[] | undefined;
+  itemType: LibraryItem;
   loading?: boolean;
   pagination?: {
     handleNextPage?: () => void;
@@ -78,9 +80,11 @@ const variants: Variants = {
 };
 
 const Carousel = ({ data, cardRows }: any) => {
-  const { loading, pagination, gridHeight, imageSize, direction, uniqueId } =
+  const { loading, pagination, gridHeight, imageSize, direction, uniqueId, itemType } =
     useContext(GridCarouselContext);
 
+  const playButtonBehavior = usePlayButtonBehavior();
+
   const handlePlayQueueAdd = usePlayQueueAdd();
 
   return (
@@ -105,9 +109,9 @@ const Carousel = ({ data, cardRows }: any) => {
               key={`card-${uniqueId}-${index}`}
               controls={{
                 cardRows,
-                itemType: LibraryItem.ALBUM,
+                itemType: itemType || LibraryItem.ALBUM,
-                playButtonBehavior: Play.NOW,
+                playButtonBehavior: playButtonBehavior || Play.NOW,
-                route: {
+                route: cardRows[0]?.route || {
                   route: AppRoute.LIBRARY_ALBUMS_DETAIL,
                   slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
                 },
@@ -131,6 +135,7 @@ export const GridCarousel = ({
   children,
   containerWidth,
   uniqueId,
+  itemType,
 }: GridCarouselProps) => {
   const [direction, setDirection] = useState(0);
 
@@ -148,12 +153,13 @@ export const GridCarousel = ({
       direction,
       gridHeight,
       imageSize,
+      itemType,
       loading,
       pagination,
       setDirection,
       uniqueId,
     }),
-    [cardRows, data, direction, gridHeight, imageSize, loading, pagination, uniqueId],
+    [cardRows, data, direction, gridHeight, imageSize, itemType, loading, pagination, uniqueId],
   );
 
   return (
@@ -177,6 +183,7 @@ interface TitleProps {
 
 const Title = ({ children }: TitleProps) => {
   const { pagination, setDirection } = useContext(GridCarouselContext);
+  const showPaginationButtons = pagination?.handleNextPage && pagination?.handlePreviousPage;
 
   const handleNextPage = useCallback(() => {
     setDirection(1);
@@ -191,23 +198,25 @@ const Title = ({ children }: TitleProps) => {
   return (
     <Group position="apart">
       {children}
-      <Group>
+      {showPaginationButtons && (
-        <Button
+        <Group>
-          compact
+          <Button
-          disabled={!pagination?.hasPreviousPage}
+            compact
-          variant="default"
+            disabled={!pagination?.hasPreviousPage}
-          onClick={handlePreviousPage}
+            variant="default"
-        >
+            onClick={handlePreviousPage}
-          <RiArrowLeftSLine size={15} />
+          >
-        </Button>
+            <RiArrowLeftSLine size={15} />
-        <Button
+          </Button>
-          compact
+          <Button
-          variant="default"
+            compact
-          onClick={handleNextPage}
+            variant="default"
-        >
+            onClick={handleNextPage}
-          <RiArrowRightSLine size={15} />
+          >
-        </Button>
+            <RiArrowRightSLine size={15} />
-      </Group>
+          </Button>
+        </Group>
+      )}
     </Group>
   );
 };