Browse Source

Change music type play behavior for cards (#236)

- Play the song instead of the full album
master
jeffvli 3 years ago
parent
commit
6cd2766970
  1. 44
      src/components/card/Card.tsx
  2. 5
      src/components/scrollingmenu/ScrollingMenu.tsx

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

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

Loading…
Cancel
Save