vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add configurable play button behavior

Browse Source
This commit is contained in:
jeffvli
2022-11-08 03:57:56 -08:00
parent b2cc85d368
commit 7b1940e1f5
5 changed files with 69 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/virtual-grid/grid-card/default-card.tsx
+9 -3
View File
@@ -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 = ({
<ControlsContainer>
{!isScrolling && (
<GridCardControls
cardControls={cardControls}
handlePlayQueueAdd={handlePlayQueueAdd}
itemData={data}
itemType={itemType}
playButtonBehavior={playButtonBehavior}
/>
)}
</ControlsContainer>
@@ -224,6 +226,7 @@ export const DefaultCard = ({
<React.Fragment key={`${data.id}-${item.id}`}>
{itemIndex > 0 && (
<Text
$noSelect
sx={{
display: 'inline-block',
padding: '0 2px 0 1px',
@@ -234,6 +237,7 @@ export const DefaultCard = ({
)}{' '}
<Text
$link
$noSelect
$secondary={index > 0}
component={Link}
overflow="hidden"
@@ -262,6 +266,7 @@ export const DefaultCard = ({
{data[row.property].map((item: any) => (
<Text
key={`${data.id}-${item.id}`}
$noSelect
$secondary={index > 0}
overflow="hidden"
>
@@ -277,6 +282,7 @@ export const DefaultCard = ({
{row.route ? (
<Text
$link
$noSelect
component={Link}
overflow="hidden"
to={generatePath(
@@ -293,7 +299,7 @@ export const DefaultCard = ({
{data && data[row.property]}
</Text>
) : (
<Text $secondary={index > 0} overflow="hidden">
<Text $noSelect $secondary={index > 0} overflow="hidden">
{data && data[row.property]}
</Text>
)}
src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx
+44 -33
View File
@@ -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 (
<GridCardControlsContainer>
<TopControls />
@@ -96,7 +117,7 @@ export const GridCardControls = ({
id: itemData.id,
type: itemType,
},
play: Play.NOW,
play: playButtonBehavior,
});
}}
>
@@ -126,36 +147,26 @@ export const GridCardControls = ({
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Item
onClick={(e: MouseEvent) => {
e.preventDefault();
e.stopPropagation();
handlePlayQueueAdd({
byItemType: {
id: itemData.id,
type: itemType,
},
play: Play.LAST,
});
}}
>
Play later
</DropdownMenu.Item>
<DropdownMenu.Item
onClick={(e: MouseEvent) => {
e.preventDefault();
e.stopPropagation();
handlePlayQueueAdd({
byItemType: {
id: itemData.id,
type: itemType,
},
play: Play.NEXT,
});
}}
>
Play next
</DropdownMenu.Item>
{PLAY_TYPES.filter(
(type) => type.play !== playButtonBehavior
).map((type) => (
<DropdownMenu.Item
key={`playtype-${type.play}`}
onClick={(e: MouseEvent) => {
e.preventDefault();
e.stopPropagation();
handlePlayQueueAdd({
byItemType: {
id: itemData.id,
type: itemType,
},
play: type.play,
});
}}
>
{type.label}
</DropdownMenu.Item>
))}
<DropdownMenu.Divider />
<DropdownMenu.Item disabled>Add to playlist</DropdownMenu.Item>
<DropdownMenu.Divider />
src/renderer/components/virtual-grid/grid-card/index.tsx
+2
View File
@@ -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]}
src/renderer/components/virtual-grid/grid-card/poster-card.tsx
+9 -4
View File
@@ -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 = ({
<ControlsContainer>
{!isScrolling && (
<GridCardControls
cardControls={cardControls}
handlePlayQueueAdd={handlePlayQueueAdd}
itemData={data}
itemType={itemType}
playButtonBehavior={playButtonBehavior}
/>
)}
</ControlsContainer>
@@ -217,6 +218,7 @@ export const PosterCard = ({
<React.Fragment key={`${data.id}-${item.id}`}>
{itemIndex > 0 && (
<Text
$noSelect
sx={{
display: 'inline-block',
padding: '0 2px 0 1px',
@@ -227,6 +229,7 @@ export const PosterCard = ({
)}{' '}
<Text
$link
$noSelect
$secondary={index > 0}
component={Link}
overflow="hidden"
@@ -254,6 +257,7 @@ export const PosterCard = ({
{data[row.property].map((item: any) => (
<Text
key={`${data.id}-${item.id}`}
$noSelect
$secondary={index > 0}
overflow="hidden"
>
@@ -269,6 +273,7 @@ export const PosterCard = ({
{row.route ? (
<Text
$link
$noSelect
component={Link}
overflow="hidden"
to={generatePath(
@@ -284,7 +289,7 @@ export const PosterCard = ({
{data && data[row.property]}
</Text>
) : (
<Text $secondary={index > 0} overflow="hidden">
<Text $noSelect $secondary={index > 0} overflow="hidden">
{data && data[row.property]}
</Text>
)}
src/renderer/components/virtual-grid/virtual-grid-wrapper.tsx
+5 -3
View File
@@ -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}
>