diff --git a/src/renderer/components/virtual-grid/grid-card/default-card.tsx b/src/renderer/components/virtual-grid/grid-card/default-card.tsx index 7f429ff60..fd5e15668 100644 --- a/src/renderer/components/virtual-grid/grid-card/default-card.tsx +++ b/src/renderer/components/virtual-grid/grid-card/default-card.tsx @@ -14,6 +14,7 @@ import { LibraryItem, CardRow, CardRoute, + Play, } from '@/renderer/types'; initSimpleImg({ threshold: 0.5 }, true); @@ -133,6 +134,7 @@ interface BaseGridCardProps { cardRows: CardRow[]; handlePlayQueueAdd: (options: PlayQueueAddOptions) => void; itemType: LibraryItem; + playButtonBehavior: Play; route: CardRoute; }; data: any; @@ -154,7 +156,7 @@ export const DefaultCard = ({ const navigate = useNavigate(); const { isScrolling, index } = listChildProps; const { itemGap, itemHeight, itemWidth } = sizes; - const { cardControls, handlePlayQueueAdd, itemType, cardRows, route } = + const { handlePlayQueueAdd, itemType, cardRows, route, playButtonBehavior } = controls; if (data) { @@ -204,10 +206,10 @@ export const DefaultCard = ({ {!isScrolling && ( )} @@ -224,6 +226,7 @@ export const DefaultCard = ({ {itemIndex > 0 && ( 0} component={Link} overflow="hidden" @@ -262,6 +266,7 @@ export const DefaultCard = ({ {data[row.property].map((item: any) => ( 0} overflow="hidden" > @@ -277,6 +282,7 @@ export const DefaultCard = ({ {row.route ? ( ) : ( - 0} overflow="hidden"> + 0} overflow="hidden"> {data && data[row.property]} )} diff --git a/src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx b/src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx index f31e3a1f0..f383a67ae 100644 --- a/src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx +++ b/src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx @@ -10,7 +10,7 @@ import { import styled from 'styled-components'; import { Button } from '@/renderer/components/button'; import { DropdownMenu } from '@/renderer/components/dropdown-menu'; -import { Play } from '@/renderer/types'; +import { LibraryItem, Play, PlayQueueAddOptions } from '@/renderer/types'; type PlayButtonType = UnstyledButtonProps & React.ComponentPropsWithoutRef<'button'>; @@ -74,11 +74,32 @@ const FavoriteWrapper = styled.span<{ isFavorite: boolean }>` } `; +const PLAY_TYPES = [ + { + label: 'Play', + play: Play.NOW, + }, + { + label: 'Play last', + play: Play.LAST, + }, + { + label: 'Play next', + play: Play.NEXT, + }, +]; + export const GridCardControls = ({ itemData, itemType, handlePlayQueueAdd, -}: any) => { + playButtonBehavior, +}: { + handlePlayQueueAdd: (options: PlayQueueAddOptions) => void; + itemData: any; + itemType: LibraryItem; + playButtonBehavior: Play; +}) => { return ( @@ -96,7 +117,7 @@ export const GridCardControls = ({ id: itemData.id, type: itemType, }, - play: Play.NOW, + play: playButtonBehavior, }); }} > @@ -126,36 +147,26 @@ export const GridCardControls = ({ - { - e.preventDefault(); - e.stopPropagation(); - handlePlayQueueAdd({ - byItemType: { - id: itemData.id, - type: itemType, - }, - play: Play.LAST, - }); - }} - > - Play later - - { - e.preventDefault(); - e.stopPropagation(); - handlePlayQueueAdd({ - byItemType: { - id: itemData.id, - type: itemType, - }, - play: Play.NEXT, - }); - }} - > - Play next - + {PLAY_TYPES.filter( + (type) => type.play !== playButtonBehavior + ).map((type) => ( + { + e.preventDefault(); + e.stopPropagation(); + handlePlayQueueAdd({ + byItemType: { + id: itemData.id, + type: itemType, + }, + play: type.play, + }); + }} + > + {type.label} + + ))} Add to playlist diff --git a/src/renderer/components/virtual-grid/grid-card/index.tsx b/src/renderer/components/virtual-grid/grid-card/index.tsx index 79590268b..229bb93d1 100644 --- a/src/renderer/components/virtual-grid/grid-card/index.tsx +++ b/src/renderer/components/virtual-grid/grid-card/index.tsx @@ -20,6 +20,7 @@ export const GridCard = ({ cardRows, itemData, itemType, + playButtonBehavior, route, display, } = data as GridCardData; @@ -40,6 +41,7 @@ export const GridCard = ({ cardRows, handlePlayQueueAdd, itemType, + playButtonBehavior, route, }} data={itemData[i]} diff --git a/src/renderer/components/virtual-grid/grid-card/poster-card.tsx b/src/renderer/components/virtual-grid/grid-card/poster-card.tsx index 12d051ac1..764ff1f78 100644 --- a/src/renderer/components/virtual-grid/grid-card/poster-card.tsx +++ b/src/renderer/components/virtual-grid/grid-card/poster-card.tsx @@ -13,6 +13,7 @@ import { LibraryItem, CardRow, CardRoute, + Play, } from '@/renderer/types'; initSimpleImg({ threshold: 0.5 }, true); @@ -125,10 +126,10 @@ const Row = styled.div<{ $secondary?: boolean }>` interface BaseGridCardProps { columnIndex: number; controls: { - cardControls: any[]; cardRows: CardRow[]; handlePlayQueueAdd: (options: PlayQueueAddOptions) => void; itemType: LibraryItem; + playButtonBehavior: Play; route: CardRoute; }; data: any; @@ -149,7 +150,7 @@ export const PosterCard = ({ }: BaseGridCardProps) => { const { isScrolling, index } = listChildProps; const { itemGap, itemHeight, itemWidth } = sizes; - const { cardControls, handlePlayQueueAdd, itemType, cardRows, route } = + const { handlePlayQueueAdd, itemType, cardRows, route, playButtonBehavior } = controls; if (data) { @@ -196,10 +197,10 @@ export const PosterCard = ({ {!isScrolling && ( )} @@ -217,6 +218,7 @@ export const PosterCard = ({ {itemIndex > 0 && ( 0} component={Link} overflow="hidden" @@ -254,6 +257,7 @@ export const PosterCard = ({ {data[row.property].map((item: any) => ( 0} overflow="hidden" > @@ -269,6 +273,7 @@ export const PosterCard = ({ {row.route ? ( ) : ( - 0} overflow="hidden"> + 0} overflow="hidden"> {data && data[row.property]} )} diff --git a/src/renderer/components/virtual-grid/virtual-grid-wrapper.tsx b/src/renderer/components/virtual-grid/virtual-grid-wrapper.tsx index 5973a5342..9ec36e303 100644 --- a/src/renderer/components/virtual-grid/virtual-grid-wrapper.tsx +++ b/src/renderer/components/virtual-grid/virtual-grid-wrapper.tsx @@ -3,6 +3,7 @@ import { FixedSizeList, FixedSizeListProps } from 'react-window'; import styled from 'styled-components'; import { GridCard } from '@/renderer/components/virtual-grid/grid-card'; import { usePlayQueueHandler } from '@/renderer/features/player/hooks/use-playqueue-handler'; +import { useSettingsStore } from '@/renderer/store/settings.store'; import { CardRow, LibraryItem, @@ -38,26 +39,27 @@ export const VirtualGridWrapper = ({ rowCount: number; }) => { const handlePlayQueueAdd = usePlayQueueHandler(); + const { playButtonBehavior } = useSettingsStore((state) => state.player); const memo = useMemo( () => ({ cardRows, columnCount, display, - handlePlayQueueAdd, itemCount, itemData, itemGap, itemHeight, itemType, itemWidth, + playButtonBehavior, route, }), [ cardRows, itemType, columnCount, - handlePlayQueueAdd, + playButtonBehavior, itemCount, itemData, display, @@ -74,7 +76,7 @@ export const VirtualGridWrapper = ({ {...rest} useIsScrolling itemCount={rowCount} - itemData={memo} + itemData={{ ...memo, handlePlayQueueAdd }} itemSize={itemHeight} overscanCount={5} >