Merge remote-tracking branch 'houkunlin/feat/file-row' into merge-houkunlin

This commit is contained in:
鲁树人 2023-05-21 14:16:56 +01:00
commit c0bc9858d0

View File

@ -4,19 +4,21 @@ import {
Card,
CardBody,
Center,
Collapse,
Grid,
GridItem,
Image,
Link,
Text,
useDisclosure,
VStack,
Wrap,
WrapItem,
} from '@chakra-ui/react';
import { DecryptedAudioFile, ProcessState, deleteFile } from './fileListingSlice';
import { useRef } from 'react';
import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
import { useCallback, useRef } from 'react';
import { useAppDispatch } from '~/hooks';
import coverFallback from '~/assets/no-cover.svg';
import coverSvgUrl from '~/assets/no-cover.svg';
interface FileRowProps {
id: string;
@ -24,6 +26,7 @@ interface FileRowProps {
}
export function FileRow({ id, file }: FileRowProps) {
const { isOpen, onClose } = useDisclosure({ defaultIsOpen: true });
const dispatch = useAppDispatch();
const isDecrypted = file.state === ProcessState.COMPLETE;
const metadata = file.metadata;
@ -45,11 +48,15 @@ export function FileRow({ id, file }: FileRowProps) {
}
};
const handleDeleteRow = () => {
const handleDeleteRow = useCallback(() => {
onClose();
setTimeout(() => {
dispatch(deleteFile({ id }));
};
}, 500);
}, [dispatch, id, onClose]);
return (
<Collapse in={isOpen} animateOpacity unmountOnExit startingHeight={0} style={{ width: '100%' }}>
<Card w="full" data-testid="file-row">
<CardBody>
<Grid
@ -77,14 +84,12 @@ export function FileRow({ id, file }: FileRowProps) {
>
<GridItem area="cover">
<Center w="160px" h="160px" m="auto">
{metadata && (
<Image
objectFit="cover"
src={metadata.cover}
alt={`"${metadata.album}" 的专辑封面`}
fallbackSrc={coverFallback}
src={metadata?.cover}
alt={`${metadata?.album} 的专辑封面`}
fallbackSrc={coverSvgUrl}
/>
)}
</Center>
</GridItem>
<GridItem area="title">
@ -137,5 +142,6 @@ export function FileRow({ id, file }: FileRowProps) {
</Grid>
</CardBody>
</Card>
</Collapse>
);
}