Change music type play behavior for cards (#236)

- Play the song instead of the full album

src/components/card/Card.tsx

@@ -29,7 +29,7 @@ import { addModalPage } from '../../redux/miscSlice';
 import CustomTooltip from '../shared/CustomTooltip';
 import { CoverArtWrapper, CustomImageGrid, CustomImageGridWrapper } from '../layout/styled';
 import usePlayQueueHandler from '../../hooks/usePlayQueueHandler';
-import { Play } from '../../types';
+import { Item, Play } from '../../types';
 
 const Card = ({
   onClick,
@@ -176,23 +176,35 @@ const Card = ({
                   size="lg"
                   circle
                   icon={<Icon icon="play" />}
-                  onClick={() =>
-                    handlePlayQueueAdd({
+                  onClick={() => {
+                    if (playClick.type === Item.Music) {
+                      return handlePlayQueueAdd({
+                        byData: [playClick],
+                        play: Play.Play,
+                      });
+                    }
+                    return handlePlayQueueAdd({
                       byItemType: { item: playClick.type, id: playClick.id },
                       play: Play.Play,
-                    })
-                  }
+                    });
+                  }}
                 />
 
                 <CustomTooltip text={t('Add to queue (later)')} delay={1000}>
                   <AppendOverlayButton
                     aria-label={t('Add to queue (later)')}
-                    onClick={() =>
-                      handlePlayQueueAdd({
+                    onClick={() => {
+                      if (playClick.type === Item.Music) {
+                        return handlePlayQueueAdd({
+                          byData: [playClick],
+                          play: Play.Later,
+                        });
+                      }
+                      return handlePlayQueueAdd({
                         byItemType: { item: playClick.type, id: playClick.id },
                         play: Play.Later,
-                      })
-                    }
+                      });
+                    }}
                     size={size <= 160 ? 'xs' : 'sm'}
                     icon={<Icon icon="plus" />}
                   />
@@ -201,12 +213,18 @@ const Card = ({
                 <CustomTooltip text={t('Add to queue (next)')} delay={1000}>
                   <AppendNextOverlayButton
                     aria-label={t('Add to queue (next)')}
-                    onClick={() =>
-                      handlePlayQueueAdd({
+                    onClick={() => {
+                      if (playClick.type === Item.Music) {
+                        return handlePlayQueueAdd({
+                          byData: [playClick],
+                          play: Play.Next,
+                        });
+                      }
+                      return handlePlayQueueAdd({
                         byItemType: { item: playClick.type, id: playClick.id },
                         play: Play.Next,
-                      })
-                    }
+                      });
+                    }}
                     size={size <= 160 ? 'xs' : 'sm'}
                     icon={<Icon icon="plus-circle" />}
                   />

src/components/scrollingmenu/ScrollingMenu.tsx

@@ -6,6 +6,7 @@ import Card from '../card/Card';
 import { SectionTitleWrapper, SectionTitle, StyledButton } from '../shared/styled';
 import { useAppSelector } from '../../redux/hooks';
 import { smoothScroll } from '../../shared/utils';
+import { Item } from '../../types';
 
 const ScrollMenuContainer = styled.div<{ $noScrollbar?: boolean; maxWidth: string }>`
   overflow-x: auto;
@@ -114,7 +115,7 @@ const ScrollingMenu = ({
               coverArt={item.image}
               url={
                 cardTitle.urlProperty
-                  ? `${cardTitle.prefix}/${type === 'music' ? item.albumId : item.id}`
+                  ? `${cardTitle.prefix}/${type === Item.Music ? item.albumId : item.id}`
                   : undefined
               }
               subUrl={
@@ -122,7 +123,7 @@ const ScrollingMenu = ({
                   ? `${cardSubtitle.prefix}/${item[cardSubtitle.urlProperty]}`
                   : undefined
               }
-              playClick={{ type, id: type === 'music' ? item.albumId : item.id }}
+              playClick={type === Item.Music ? item : { type, id: item.id }}
               details={{ cacheType: type, ...item }}
               hasHoverButtons
               size={cardSize || config.lookAndFeel.gridView.cardSize}