antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 18:13:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Lint all files

Browse source
This commit is contained in:
jeffvli 2023-07-01 19:10:05 -07:00
parent 22af76b4d6
commit 30e52ebb54
334 changed files with 76519 additions and 75932 deletions
Download patch file Download diff file Expand all files Collapse all files

104
src/renderer/components/virtual-table/cells/album-artist-cell.tsx
View file

@ -9,60 +9,60 @@ import { AppRoute } from '/@/renderer/router/routes';
import { Skeleton } from '/@/renderer/components/skeleton';
export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
if (value === undefined) {
return (
<CellContainer position="left">
<Skeleton
height="1rem"
width="80%"
/>
</CellContainer>
);
}
if (value === undefined) {
return (
<CellContainer position="left">
<Skeleton
height="1rem"
width="80%"
/>
</CellContainer>
);
}
return (
<CellContainer position="left">
<Text
$secondary
overflow="hidden"
size="md"
>
{value?.map((item: Artist | AlbumArtist, index: number) => (
<React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
{index > 0 && (
<Text
$secondary
size="md"
style={{ display: 'inline-block' }}
>
,
</Text>
)}{' '}
{item.id ? (
<Text
$link
$secondary
component={Link}
overflow="hidden"
size="md"
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: item.id,
})}
>
{item.name || '—'}
</Text>
) : (
<Text
return (
<CellContainer position="left">
<Text
$secondary
overflow="hidden"
size="md"
>
{item.name || '—'}
</Text>
)}
</React.Fragment>
))}
</Text>
</CellContainer>
);
>
{value?.map((item: Artist | AlbumArtist, index: number) => (
<React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
{index > 0 && (
<Text
$secondary
size="md"
style={{ display: 'inline-block' }}
>
,
</Text>
)}{' '}
{item.id ? (
<Text
$link
$secondary
component={Link}
overflow="hidden"
size="md"
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: item.id,
})}
>
{item.name || '—'}
</Text>
) : (
<Text
$secondary
overflow="hidden"
size="md"
>
{item.name || '—'}
</Text>
)}
</React.Fragment>
))}
</Text>
</CellContainer>
);
};

104
src/renderer/components/virtual-table/cells/artist-cell.tsx
View file

@ -9,60 +9,60 @@ import { AppRoute } from '/@/renderer/router/routes';
import { Skeleton } from '/@/renderer/components/skeleton';
export const ArtistCell = ({ value, data }: ICellRendererParams) => {
if (value === undefined) {
return (
<CellContainer position="left">
<Skeleton
height="1rem"
width="80%"
/>
</CellContainer>
);
}
if (value === undefined) {
return (
<CellContainer position="left">
<Skeleton
height="1rem"
width="80%"
/>
</CellContainer>
);
}
return (
<CellContainer position="left">
<Text
$secondary
overflow="hidden"
size="md"
>
{value?.map((item: Artist | AlbumArtist, index: number) => (
<React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
{index > 0 && (
<Text
$secondary
size="md"
style={{ display: 'inline-block' }}
>
,
</Text>
)}{' '}
{item.id ? (
<Text
$link
$secondary
component={Link}
overflow="hidden"
size="md"
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: item.id,
})}
>
{item.name || '—'}
</Text>
) : (
<Text
return (
<CellContainer position="left">
<Text
$secondary
overflow="hidden"
size="md"
>
{item.name || '—'}
</Text>
)}
</React.Fragment>
))}
</Text>
</CellContainer>
);
>
{value?.map((item: Artist | AlbumArtist, index: number) => (
<React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
{index > 0 && (
<Text
$secondary
size="md"
style={{ display: 'inline-block' }}
>
,
</Text>
)}{' '}
{item.id ? (
<Text
$link
$secondary
component={Link}
overflow="hidden"
size="md"
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: item.id,
})}
>
{item.name || '—'}
</Text>
) : (
<Text
$secondary
overflow="hidden"
size="md"
>
{item.name || '—'}
</Text>
)}
</React.Fragment>
))}
</Text>
</CellContainer>
);
};

236
src/renderer/components/virtual-table/cells/combined-title-cell.tsx
View file

@ -13,140 +13,140 @@ import { ServerType } from '/@/renderer/types';
import { Skeleton } from '/@/renderer/components/skeleton';
const CellContainer = styled(motion.div)<{ height: number }>`
display: grid;
grid-auto-columns: 1fr;
grid-template-areas: 'image info';
grid-template-rows: 1fr;
grid-template-columns: ${(props) => props.height}px minmax(0, 1fr);
gap: 0.5rem;
width: 100%;
max-width: 100%;
height: 100%;
letter-spacing: 0.5px;
display: grid;
grid-auto-columns: 1fr;
grid-template-areas: 'image info';
grid-template-rows: 1fr;
grid-template-columns: ${(props) => props.height}px minmax(0, 1fr);
gap: 0.5rem;
width: 100%;
max-width: 100%;
height: 100%;
letter-spacing: 0.5px;
`;
const ImageWrapper = styled.div`
display: flex;
grid-area: image;
align-items: center;
justify-content: center;
height: 100%;
display: flex;
grid-area: image;
align-items: center;
justify-content: center;
height: 100%;
`;
const MetadataWrapper = styled.div`
display: flex;
flex-direction: column;
grid-area: info;
justify-content: center;
width: 100%;
display: flex;
flex-direction: column;
grid-area: info;
justify-content: center;
width: 100%;
`;
const StyledImage = styled.img`
object-fit: cover;
object-fit: cover;
`;
export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams) => {
const artists = useMemo(() => {
if (!value) return null;
return value?.type === ServerType.JELLYFIN ? value.artists : value.albumArtists;
}, [value]);
const artists = useMemo(() => {
if (!value) return null;
return value?.type === ServerType.JELLYFIN ? value.artists : value.albumArtists;
}, [value]);
if (value === undefined) {
return (
<CellContainer height={node.rowHeight || 40}>
<Skeleton>
<ImageWrapper />
</Skeleton>
<MetadataWrapper>
<Skeleton
height="1rem"
width="80%"
/>
<Skeleton
height="1rem"
mt="0.5rem"
width="60%"
/>
</MetadataWrapper>
</CellContainer>
);
}
if (value === undefined) {
return (
<CellContainer height={node.rowHeight || 40}>
<Skeleton>
<ImageWrapper />
</Skeleton>
<MetadataWrapper>
<Skeleton
height="1rem"
width="80%"
/>
<Skeleton
height="1rem"
mt="0.5rem"
width="60%"
/>
</MetadataWrapper>
</CellContainer>
);
}
return (
<CellContainer height={node.rowHeight || 40}>
<ImageWrapper>
{value.imageUrl ? (
<StyledImage
alt="cover"
height={(node.rowHeight || 40) - 10}
placeholder={value.imagePlaceholderUrl || 'var(--placeholder-bg)'}
src={value.imageUrl}
style={{}}
width={(node.rowHeight || 40) - 10}
/>
) : (
<Center
sx={{
background: 'var(--placeholder-bg)',
borderRadius: 'var(--card-default-radius)',
height: `${(node.rowHeight || 40) - 10}px`,
width: `${(node.rowHeight || 40) - 10}px`,
}}
>
<RiAlbumFill
color="var(--placeholder-fg)"
size={35}
/>
</Center>
)}
</ImageWrapper>
<MetadataWrapper>
<Text
overflow="hidden"
size="md"
>
{value.name}
</Text>
<Text
$secondary
overflow="hidden"
size="md"
>
{artists?.length ? (
artists.map((artist: Artist | AlbumArtist, index: number) => (
<React.Fragment key={`queue-${rowIndex}-artist-${artist.id}`}>
{index > 0 ? ', ' : null}
{artist.id ? (
<Text
$link
$secondary
component={Link}
overflow="hidden"
size="md"
sx={{ width: 'fit-content' }}
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: artist.id,
})}
>
{artist.name}
</Text>
<CellContainer height={node.rowHeight || 40}>
<ImageWrapper>
{value.imageUrl ? (
<StyledImage
alt="cover"
height={(node.rowHeight || 40) - 10}
placeholder={value.imagePlaceholderUrl || 'var(--placeholder-bg)'}
src={value.imageUrl}
style={{}}
width={(node.rowHeight || 40) - 10}
/>
) : (
<Text
<Center
sx={{
background: 'var(--placeholder-bg)',
borderRadius: 'var(--card-default-radius)',
height: `${(node.rowHeight || 40) - 10}px`,
width: `${(node.rowHeight || 40) - 10}px`,
}}
>
<RiAlbumFill
color="var(--placeholder-fg)"
size={35}
/>
</Center>
)}
</ImageWrapper>
<MetadataWrapper>
<Text
overflow="hidden"
size="md"
>
{value.name}
</Text>
<Text
$secondary
overflow="hidden"
size="md"
sx={{ width: 'fit-content' }}
>
{artist.name}
</Text>
)}
</React.Fragment>
))
) : (
<Text $secondary>—</Text>
)}
</Text>
</MetadataWrapper>
</CellContainer>
);
>
{artists?.length ? (
artists.map((artist: Artist | AlbumArtist, index: number) => (
<React.Fragment key={`queue-${rowIndex}-artist-${artist.id}`}>
{index > 0 ? ', ' : null}
{artist.id ? (
<Text
$link
$secondary
component={Link}
overflow="hidden"
size="md"
sx={{ width: 'fit-content' }}
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: artist.id,
})}
>
{artist.name}
</Text>
) : (
<Text
$secondary
overflow="hidden"
size="md"
sx={{ width: 'fit-content' }}
>
{artist.name}
</Text>
)}
</React.Fragment>
))
) : (
<Text $secondary>—</Text>
)}
</Text>
</MetadataWrapper>
</CellContainer>
);
};

108
src/renderer/components/virtual-table/cells/favorite-cell.tsx
View file

@ -6,61 +6,61 @@ import { CellContainer } from '/@/renderer/components/virtual-table/cells/generi
import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
const createMutation = useCreateFavorite({});
const deleteMutation = useDeleteFavorite({});
const createMutation = useCreateFavorite({});
const deleteMutation = useDeleteFavorite({});
const handleToggleFavorite = () => {
const newFavoriteValue = !value;
const handleToggleFavorite = () => {
const newFavoriteValue = !value;
if (newFavoriteValue) {
createMutation.mutate(
{
query: {
id: [data.id],
type: data.itemType,
},
serverId: data.serverId,
},
{
onSuccess: () => {
node.setData({ ...data, userFavorite: newFavoriteValue });
},
},
);
} else {
deleteMutation.mutate(
{
query: {
id: [data.id],
type: data.itemType,
},
serverId: data.serverId,
},
{
onSuccess: () => {
node.setData({ ...data, userFavorite: newFavoriteValue });
},
},
);
}
};
if (newFavoriteValue) {
createMutation.mutate(
{
query: {
id: [data.id],
type: data.itemType,
},
serverId: data.serverId,
},
{
onSuccess: () => {
node.setData({ ...data, userFavorite: newFavoriteValue });
},
},
);
} else {
deleteMutation.mutate(
{
query: {
id: [data.id],
type: data.itemType,
},
serverId: data.serverId,
},
{
onSuccess: () => {
node.setData({ ...data, userFavorite: newFavoriteValue });
},
},
);
}
};
return (
<CellContainer position="center">
<Button
compact
sx={{
svg: {
fill: !value
? 'var(--main-fg-secondary) !important'
: 'var(--primary-color) !important',
},
}}
variant="subtle"
onClick={handleToggleFavorite}
>
{!value ? <RiHeartLine size="1.3em" /> : <RiHeartFill size="1.3em" />}
</Button>
</CellContainer>
);
return (
<CellContainer position="center">
<Button
compact
sx={{
svg: {
fill: !value
? 'var(--main-fg-secondary) !important'
: 'var(--primary-color) !important',
},
}}
variant="subtle"
onClick={handleToggleFavorite}
>
{!value ? <RiHeartLine size="1.3em" /> : <RiHeartFill size="1.3em" />}
</Button>
</CellContainer>
);
};

56
src/renderer/components/virtual-table/cells/full-width-disc-cell.tsx
View file

@ -8,38 +8,38 @@ import { Paper } from '/@/renderer/components/paper';
import { getNodesByDiscNumber, setNodeSelection } from '../utils';
const Container = styled(Paper)`
padding: 0.5rem 1rem;
border: 1px solid transparent;
padding: 0.5rem 1rem;
border: 1px solid transparent;
`;
export const FullWidthDiscCell = ({ node, data, api }: ICellRendererParams) => {
const [isSelected, setIsSelected] = useState(false);
const [isSelected, setIsSelected] = useState(false);
const handleToggleDiscNodes = () => {
if (!data) return;
const discNumber = Number(node.data.id.split('-')[1]);
const nodes = getNodesByDiscNumber({ api, discNumber });
const handleToggleDiscNodes = () => {
if (!data) return;
const discNumber = Number(node.data.id.split('-')[1]);
const nodes = getNodesByDiscNumber({ api, discNumber });
setNodeSelection({ isSelected: !isSelected, nodes });
setIsSelected((prev) => !prev);
};
setNodeSelection({ isSelected: !isSelected, nodes });
setIsSelected((prev) => !prev);
};
return (
<Container>
<Group
position="apart"
w="100%"
>
<Button
compact
leftIcon={isSelected ? <RiCheckboxLine /> : <RiCheckboxBlankLine />}
size="md"
variant="subtle"
onClick={handleToggleDiscNodes}
>
{data.name}
</Button>
</Group>
</Container>
);
return (
<Container>
<Group
position="apart"
w="100%"
>
<Button
compact
leftIcon={isSelected ? <RiCheckboxLine /> : <RiCheckboxBlankLine />}
size="md"
variant="subtle"
onClick={handleToggleDiscNodes}
>
{data.name}
</Button>
</Group>
</Container>
);
};

118
src/renderer/components/virtual-table/cells/generic-cell.tsx
View file

@ -6,79 +6,79 @@ import { Skeleton } from '/@/renderer/components/skeleton';
import { Text } from '/@/renderer/components/text';
export const CELL_VARIANTS: Variants = {
animate: {
opacity: 1,
},
initial: {
opacity: 0,
},
animate: {
opacity: 1,
},
initial: {
opacity: 0,
},
};
export const CellContainer = styled(motion.div)<{ position?: 'left' | 'center' | 'right' }>`
display: flex;
align-items: center;
justify-content: ${(props) =>
props.position === 'right'
? 'flex-end'
: props.position === 'center'
? 'center'
: 'flex-start'};
width: 100%;
height: 100%;
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: ${(props) =>
props.position === 'right'
? 'flex-end'
: props.position === 'center'
? 'center'
: 'flex-start'};
width: 100%;
height: 100%;
letter-spacing: 0.5px;
`;
type Options = {
array?: boolean;
isArray?: boolean;
isLink?: boolean;
position?: 'left' | 'center' | 'right';
primary?: boolean;
array?: boolean;
isArray?: boolean;
isLink?: boolean;
position?: 'left' | 'center' | 'right';
primary?: boolean;
};
export const GenericCell = (
{ value, valueFormatted }: ICellRendererParams,
{ position, primary, isLink }: Options,
{ value, valueFormatted }: ICellRendererParams,
{ position, primary, isLink }: Options,
) => {
const displayedValue = valueFormatted || value;
const displayedValue = valueFormatted || value;
if (value === undefined) {
return (
<CellContainer position={position || 'left'}>
<Skeleton
height="1rem"
width="80%"
/>
</CellContainer>
);
}
if (value === undefined) {
return (
<CellContainer position={position || 'left'}>
<Skeleton
height="1rem"
width="80%"
/>
</CellContainer>
<CellContainer position={position || 'left'}>
{isLink ? (
<Text
$link={isLink}
$secondary={!primary}
component={Link}
overflow="hidden"
size="md"
to={displayedValue.link}
>
{isLink ? displayedValue.value : displayedValue}
</Text>
) : (
<Text
$secondary={!primary}
overflow="hidden"
size="md"
>
{displayedValue}
</Text>
)}
</CellContainer>
);
}
return (
<CellContainer position={position || 'left'}>
{isLink ? (
<Text
$link={isLink}
$secondary={!primary}
component={Link}
overflow="hidden"
size="md"
to={displayedValue.link}
>
{isLink ? displayedValue.value : displayedValue}
</Text>
) : (
<Text
$secondary={!primary}
overflow="hidden"
size="md"
>
{displayedValue}
</Text>
)}
</CellContainer>
);
};
GenericCell.defaultProps = {
position: undefined,
position: undefined,
};

60
src/renderer/components/virtual-table/cells/genre-cell.tsx
View file

@ -6,37 +6,37 @@ import { Text } from '/@/renderer/components/text';
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
export const GenreCell = ({ value, data }: ICellRendererParams) => {
return (
<CellContainer position="left">
<Text
$secondary
overflow="hidden"
size="md"
>
{value?.map((item: Artist | AlbumArtist, index: number) => (
<React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
{index > 0 && (
<Text
$secondary
size="md"
style={{ display: 'inline-block' }}
>
,
</Text>
)}{' '}
return (
<CellContainer position="left">
<Text
$link
$secondary
component={Link}
overflow="hidden"
size="md"
to="/"
$secondary
overflow="hidden"
size="md"
>
{item.name || '—'}
{value?.map((item: Artist | AlbumArtist, index: number) => (
<React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
{index > 0 && (
<Text
$secondary
size="md"
style={{ display: 'inline-block' }}
>
,
</Text>
)}{' '}
<Text
$link
$secondary
component={Link}
overflow="hidden"
size="md"
to="/"
>
{item.name || '—'}
</Text>
</React.Fragment>
))}
</Text>
</React.Fragment>
))}
</Text>
</CellContainer>
);
</CellContainer>
);
};

94
src/renderer/components/virtual-table/cells/rating-cell.tsx
View file

@ -6,54 +6,54 @@ import { CellContainer } from '/@/renderer/components/virtual-table/cells/generi
import { useSetRating } from '/@/renderer/features/shared';
export const RatingCell = ({ value, node }: ICellRendererParams) => {
const updateRatingMutation = useSetRating({});
const updateRatingMutation = useSetRating({});
const handleUpdateRating = (rating: number) => {
if (!value) return;
const handleUpdateRating = (rating: number) => {
if (!value) return;
updateRatingMutation.mutate(
{
query: {
item: [value],
rating,
},
serverId: value?.serverId,
},
{
onSuccess: () => {
node.setData({ ...node.data, userRating: rating });
},
},
updateRatingMutation.mutate(
{
query: {
item: [value],
rating,
},
serverId: value?.serverId,
},
{
onSuccess: () => {
node.setData({ ...node.data, userRating: rating });
},
},
);
};
const handleClearRating = (e: MouseEvent<HTMLDivElement>) => {
e.preventDefault();
e.stopPropagation();
updateRatingMutation.mutate(
{
query: {
item: [value],
rating: 0,
},
serverId: value?.serverId,
},
{
onSuccess: () => {
node.setData({ ...node.data, userRating: 0 });
},
},
);
};
return (
<CellContainer position="center">
<Rating
size="xs"
value={value?.userRating}
onChange={handleUpdateRating}
onClick={handleClearRating}
/>
</CellContainer>
);
};
const handleClearRating = (e: MouseEvent<HTMLDivElement>) => {
e.preventDefault();
e.stopPropagation();
updateRatingMutation.mutate(
{
query: {
item: [value],
rating: 0,
},
serverId: value?.serverId,
},
{
onSuccess: () => {
node.setData({ ...node.data, userRating: 0 });
},
},
);
};
return (
<CellContainer position="center">
<Rating
size="xs"
value={value?.userRating}
onChange={handleUpdateRating}
onClick={handleClearRating}
/>
</CellContainer>
);
};