Merge remote-tracking branch 'houkunlin/feat/file-row' into merge-houkunlin
This commit is contained in:
commit
c0bc9858d0
@ -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>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user