mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-15 21:16:17 +02:00
Update grid card styles and props
This commit is contained in:
jeffvli
@@ -0,0 +1,163 @@
|
||||
import React, { MouseEvent } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { Group, UnstyledButtonProps } from '@mantine/core';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
RiPlayFill,
|
||||
RiMore2Fill,
|
||||
RiHeartFill,
|
||||
RiHeartLine,
|
||||
} from 'react-icons/ri';
|
||||
import { Button } from '@/renderer/components/button';
|
||||
import { DropdownMenu } from '@/renderer/components/dropdown-menu';
|
||||
import { Play } from '@/renderer/types';
|
||||
|
||||
type PlayButtonType = UnstyledButtonProps &
|
||||
React.ComponentPropsWithoutRef<'button'>;
|
||||
|
||||
const PlayButton = styled(motion.button)<PlayButtonType>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
transition: scale 0.2s ease-in;
|
||||
|
||||
svg {
|
||||
fill: rgb(0, 0, 0);
|
||||
stroke: rgb(0, 0, 0);
|
||||
}
|
||||
`;
|
||||
|
||||
const GridCardControlsContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const ControlsRow = styled(motion.div)`
|
||||
width: 100%;
|
||||
height: calc(100% / 3);
|
||||
`;
|
||||
|
||||
const TopControls = styled(ControlsRow)`
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem;
|
||||
`;
|
||||
|
||||
const CenterControls = styled(ControlsRow)`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem;
|
||||
`;
|
||||
|
||||
const BottomControls = styled(ControlsRow)`
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0.5rem;
|
||||
`;
|
||||
|
||||
const FavoriteWrapper = styled.span<{ isFavorite: boolean }>`
|
||||
svg {
|
||||
fill: ${(props) => props.isFavorite && 'var(--primary-color)'};
|
||||
}
|
||||
`;
|
||||
|
||||
export const GridCardControls = ({
|
||||
itemData,
|
||||
itemType,
|
||||
handlePlayQueueAdd,
|
||||
}: any) => {
|
||||
return (
|
||||
<GridCardControlsContainer>
|
||||
<TopControls />
|
||||
<CenterControls animate={{ opacity: 1 }} initial={{ opacity: 0 }} />
|
||||
<BottomControls>
|
||||
<PlayButton
|
||||
animate={{ opacity: 0.6 }}
|
||||
whileHover={{ opacity: 1, scale: 1.1 }}
|
||||
whileTap={{ scale: 1 }}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handlePlayQueueAdd({
|
||||
byItemType: {
|
||||
id: itemData.id,
|
||||
type: itemType,
|
||||
},
|
||||
play: Play.NOW,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<RiPlayFill size={25} />
|
||||
</PlayButton>
|
||||
<Group spacing="xs">
|
||||
<Button disabled p={5} variant="subtle">
|
||||
<FavoriteWrapper isFavorite={itemData?.isFavorite}>
|
||||
{itemData?.isFavorite ? (
|
||||
<RiHeartFill size={20} />
|
||||
) : (
|
||||
<RiHeartLine color="white" size={20} />
|
||||
)}
|
||||
</FavoriteWrapper>
|
||||
</Button>
|
||||
<DropdownMenu withinPortal position="bottom-start">
|
||||
<DropdownMenu.Target>
|
||||
<Button
|
||||
p={5}
|
||||
variant="subtle"
|
||||
onClick={(e) => e.preventDefault()}
|
||||
>
|
||||
<RiMore2Fill color="white" size={20} />
|
||||
</Button>
|
||||
</DropdownMenu.Target>
|
||||
<DropdownMenu.Dropdown>
|
||||
<DropdownMenu.Item
|
||||
onClick={(e: MouseEvent) => {
|
||||
e.preventDefault();
|
||||
handlePlayQueueAdd({
|
||||
byItemType: {
|
||||
id: itemData.id,
|
||||
type: itemType,
|
||||
},
|
||||
play: Play.LAST,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Play later
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
onClick={(e: MouseEvent) => {
|
||||
e.preventDefault();
|
||||
handlePlayQueueAdd({
|
||||
byItemType: {
|
||||
id: itemData.id,
|
||||
type: itemType,
|
||||
},
|
||||
play: Play.NEXT,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Play next
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Divider />
|
||||
<DropdownMenu.Item disabled>Add to playlist</DropdownMenu.Item>
|
||||
<DropdownMenu.Divider />
|
||||
<DropdownMenu.Item disabled>Refresh metadata</DropdownMenu.Item>
|
||||
</DropdownMenu.Dropdown>
|
||||
</DropdownMenu>
|
||||
</Group>
|
||||
</BottomControls>
|
||||
</GridCardControlsContainer>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,61 @@
|
||||
import { ListChildComponentProps } from 'react-window';
|
||||
import { PosterCard } from '@/renderer/components/virtual-grid/grid-card/poster-card';
|
||||
import { GridCardData } from '@/renderer/types';
|
||||
|
||||
export const GridCard = ({
|
||||
data,
|
||||
index,
|
||||
style,
|
||||
isScrolling,
|
||||
}: ListChildComponentProps) => {
|
||||
const {
|
||||
itemHeight,
|
||||
itemWidth,
|
||||
columnCount,
|
||||
itemGap,
|
||||
itemCount,
|
||||
cardControls,
|
||||
handlePlayQueueAdd,
|
||||
cardRows,
|
||||
itemData,
|
||||
itemType,
|
||||
route,
|
||||
display,
|
||||
} = data as GridCardData;
|
||||
|
||||
const startIndex = index * columnCount;
|
||||
const stopIndex = Math.min(itemCount - 1, startIndex + columnCount - 1);
|
||||
const cards = [];
|
||||
|
||||
for (let i = startIndex; i <= stopIndex; i += 1) {
|
||||
cards.push(
|
||||
<PosterCard
|
||||
key={`card-${i}-${index}`}
|
||||
columnIndex={i}
|
||||
controls={{
|
||||
cardControls,
|
||||
cardRows,
|
||||
handlePlayQueueAdd,
|
||||
itemType,
|
||||
route,
|
||||
}}
|
||||
data={itemData[i]}
|
||||
listChildProps={{ index, isScrolling }}
|
||||
sizes={{ itemGap, itemHeight, itemWidth }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
...style,
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'start',
|
||||
}}
|
||||
>
|
||||
{cards}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,338 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { Center, Skeleton } from '@mantine/core';
|
||||
import { RiAlbumFill } from 'react-icons/ri';
|
||||
import { generatePath } from 'react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ListChildComponentProps } from 'react-window';
|
||||
import { Text } from '@/renderer/components/text';
|
||||
import { GridCardControls } from '@/renderer/components/virtual-grid/grid-card/grid-card-controls';
|
||||
import { fadeIn } from '@/renderer/styles';
|
||||
import {
|
||||
PlayQueueAddOptions,
|
||||
LibraryItem,
|
||||
CardRow,
|
||||
CardRoute,
|
||||
} from '@/renderer/types';
|
||||
|
||||
const CardWrapper = styled.div<{
|
||||
itemGap: number;
|
||||
itemHeight: number;
|
||||
itemWidth: number;
|
||||
}>`
|
||||
flex: ${({ itemWidth }) => `0 0 ${itemWidth}px`};
|
||||
width: ${({ itemWidth }) => `${itemWidth}px`};
|
||||
height: ${({ itemHeight }) => `${itemHeight}px`};
|
||||
margin: ${({ itemGap }) => `0 ${itemGap / 2}px`};
|
||||
transition: border 0.2s ease-in-out;
|
||||
user-select: none;
|
||||
pointer-events: auto; // https://github.com/bvaughn/react-window/issues/128#issuecomment-460166682
|
||||
|
||||
&:hover div {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover * {
|
||||
&::before {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 1px solid #fff;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledCard = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
border-radius: 5px;
|
||||
`;
|
||||
|
||||
const ImageSection = styled.div`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 100%) 35%,
|
||||
rgba(0, 0, 0, 0%) 100%
|
||||
);
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
content: '';
|
||||
user-select: none;
|
||||
}
|
||||
`;
|
||||
|
||||
interface ImageProps {
|
||||
height: number;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
const Image = styled.img<ImageProps>`
|
||||
${fadeIn};
|
||||
width: ${({ height }) => `${height}px`};
|
||||
height: ${({ height }) => `${height}px`};
|
||||
object-fit: cover;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
`;
|
||||
|
||||
const ControlsContainer = styled.div`
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 50;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
`;
|
||||
|
||||
const DetailSection = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const Row = styled.div<{ secondary?: boolean }>`
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 25px;
|
||||
padding: 0 0.2rem;
|
||||
overflow: hidden;
|
||||
color: ${({ secondary }) =>
|
||||
secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
`;
|
||||
|
||||
interface BaseGridCardProps {
|
||||
columnIndex: number;
|
||||
controls: {
|
||||
cardControls: any[];
|
||||
cardRows: CardRow[];
|
||||
handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
|
||||
itemType: LibraryItem;
|
||||
route?: CardRoute;
|
||||
};
|
||||
data: any;
|
||||
listChildProps: Omit<ListChildComponentProps, 'data' | 'style'>;
|
||||
sizes: {
|
||||
itemGap: number;
|
||||
itemHeight: number;
|
||||
itemWidth: number;
|
||||
};
|
||||
}
|
||||
|
||||
export const PosterCard = ({
|
||||
listChildProps,
|
||||
data,
|
||||
columnIndex,
|
||||
controls,
|
||||
sizes,
|
||||
}: BaseGridCardProps) => {
|
||||
const { isScrolling, index } = listChildProps;
|
||||
const { itemGap, itemHeight, itemWidth } = sizes;
|
||||
const { cardControls, handlePlayQueueAdd, itemType, cardRows, route } =
|
||||
controls;
|
||||
|
||||
if (data) {
|
||||
return (
|
||||
<CardWrapper
|
||||
key={`card-${columnIndex}-${index}`}
|
||||
itemGap={itemGap}
|
||||
itemHeight={itemHeight}
|
||||
itemWidth={itemWidth}
|
||||
>
|
||||
<StyledCard>
|
||||
{route ? (
|
||||
<Link
|
||||
tabIndex={0}
|
||||
to={generatePath(
|
||||
route.route,
|
||||
route.slugs?.reduce((acc, slug) => {
|
||||
return {
|
||||
...acc,
|
||||
[slug.slugProperty]: data[slug.idProperty],
|
||||
};
|
||||
}, {})
|
||||
)}
|
||||
>
|
||||
<ImageSection style={{ height: `${itemWidth}px` }}>
|
||||
{data?.imageUrl ? (
|
||||
<Image height={itemWidth} src={data?.imageUrl} />
|
||||
) : (
|
||||
<Center
|
||||
sx={{
|
||||
background: 'var(--placeholder-bg)',
|
||||
borderRadius: '5px',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<RiAlbumFill color="var(--placeholder-fg)" size={35} />
|
||||
</Center>
|
||||
)}
|
||||
<ControlsContainer>
|
||||
{!isScrolling && (
|
||||
<GridCardControls
|
||||
cardControls={cardControls}
|
||||
handlePlayQueueAdd={handlePlayQueueAdd}
|
||||
itemData={data}
|
||||
itemType={itemType}
|
||||
/>
|
||||
)}
|
||||
</ControlsContainer>
|
||||
</ImageSection>
|
||||
</Link>
|
||||
) : (
|
||||
<ImageSection style={{ height: `${itemWidth}px` }}>
|
||||
{data?.imageUrl ? (
|
||||
<Image height={itemWidth} src={data?.imageUrl} />
|
||||
) : (
|
||||
<Center
|
||||
sx={{
|
||||
background: 'var(--placeholder-bg)',
|
||||
borderRadius: '5px',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<RiAlbumFill color="var(--placeholder-fg)" size={35} />
|
||||
</Center>
|
||||
)}
|
||||
<ControlsContainer>
|
||||
{!isScrolling && (
|
||||
<GridCardControls
|
||||
cardControls={cardControls}
|
||||
handlePlayQueueAdd={handlePlayQueueAdd}
|
||||
itemData={data}
|
||||
itemType={itemType}
|
||||
/>
|
||||
)}
|
||||
</ControlsContainer>
|
||||
</ImageSection>
|
||||
)}
|
||||
<DetailSection>
|
||||
{cardRows.map((row: CardRow, index: number) => {
|
||||
if (row.arrayProperty) {
|
||||
if (row.route) {
|
||||
return (
|
||||
<Row secondary={index > 0}>
|
||||
{data[row.property].map(
|
||||
(item: any, itemIndex: number) => (
|
||||
<>
|
||||
{itemIndex > 0 && (
|
||||
<Text
|
||||
sx={{
|
||||
display: 'inline-block',
|
||||
padding: '0 2px 0 1px',
|
||||
}}
|
||||
>
|
||||
,
|
||||
</Text>
|
||||
)}{' '}
|
||||
<Text
|
||||
link
|
||||
component={Link}
|
||||
overflow="hidden"
|
||||
secondary={index > 0}
|
||||
to={generatePath(
|
||||
row.route!.route,
|
||||
row.route!.slugs?.reduce((acc, slug) => {
|
||||
return {
|
||||
...acc,
|
||||
[slug.slugProperty]: data[slug.idProperty],
|
||||
};
|
||||
}, {})
|
||||
)}
|
||||
>
|
||||
{row.arrayProperty && item[row.arrayProperty]}
|
||||
</Text>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Row>
|
||||
{data[row.property].map((item: any) => (
|
||||
<Text overflow="hidden" secondary={index > 0}>
|
||||
{row.arrayProperty && item[row.arrayProperty]}
|
||||
</Text>
|
||||
))}
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Row key={row.property}>
|
||||
{row.route ? (
|
||||
<Text
|
||||
link
|
||||
component={Link}
|
||||
overflow="hidden"
|
||||
to={generatePath(
|
||||
row.route.route,
|
||||
row.route.slugs?.reduce((acc, slug) => {
|
||||
return {
|
||||
...acc,
|
||||
[slug.slugProperty]: data[slug.idProperty],
|
||||
};
|
||||
}, {})
|
||||
)}
|
||||
>
|
||||
{data && data[row.property]}
|
||||
</Text>
|
||||
) : (
|
||||
<Text overflow="hidden" secondary={index > 0}>
|
||||
{data && data[row.property]}
|
||||
</Text>
|
||||
)}
|
||||
</Row>
|
||||
);
|
||||
})}
|
||||
</DetailSection>
|
||||
</StyledCard>
|
||||
</CardWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CardWrapper
|
||||
key={`card-${columnIndex}-${index}`}
|
||||
itemGap={itemGap}
|
||||
itemHeight={itemHeight}
|
||||
itemWidth={itemWidth}
|
||||
>
|
||||
<StyledCard>
|
||||
<Skeleton visible radius="sm">
|
||||
<ImageSection style={{ height: `${itemWidth}px` }} />
|
||||
</Skeleton>
|
||||
<DetailSection>
|
||||
{cardRows.map((row: CardRow, index: number) => (
|
||||
<Skeleton
|
||||
key={`row-${row.property}`}
|
||||
my={2}
|
||||
radius="md"
|
||||
visible={!data}
|
||||
width={!data ? (index > 0 ? '50%' : '90%') : '100%'}
|
||||
>
|
||||
<Row />
|
||||
</Skeleton>
|
||||
))}
|
||||
</DetailSection>
|
||||
</StyledCard>
|
||||
</CardWrapper>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user