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