feat: 歌曲封面使用 Image 组件,删除歌曲行数据时使用一个动画效果来过渡一下

This commit is contained in:
HouKunLin 2023-05-16 16:24:00 +08:00
parent 67b87f685d
commit b8c3a51756

View File

@ -1,20 +1,22 @@
import {
Avatar,
Box,
Button,
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';
interface FileRowProps {
@ -23,6 +25,7 @@ interface FileRowProps {
}
export function FileRow({ id, file }: FileRowProps) {
const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
const dispatch = useAppDispatch();
const isDecrypted = file.state === ProcessState.COMPLETE;
@ -30,7 +33,7 @@ export function FileRow({ id, file }: FileRowProps) {
const decryptedName = nameWithoutExt + '.' + file.ext;
const audioPlayerRef = useRef<HTMLAudioElement>(null);
const togglePlay = () => {
const togglePlay = useCallback(() => {
const player = audioPlayerRef.current;
if (!player) {
return;
@ -41,13 +44,17 @@ export function FileRow({ id, file }: FileRowProps) {
} else {
player.pause();
}
};
}, []);
const handleDeleteRow = () => {
const handleDeleteRow = useCallback(() => {
onToggle();
setTimeout(() => {
dispatch(deleteFile({ id }));
};
}, 500);
}, [dispatch, id, onToggle]);
return (
<Collapse in={isOpen} animateOpacity unmountOnExit startingHeight={0} style={{ width: '100%' }}>
<Card w="full">
<CardBody>
<Grid
@ -75,8 +82,13 @@ export function FileRow({ id, file }: FileRowProps) {
>
<GridItem area="cover">
<Center w="160px" h="160px" m="auto">
{file.metadata.cover && <Avatar size="sm" name="专辑封面" src={file.metadata.cover} />}
{!file.metadata.cover && <Text></Text>}
<Image
boxSize='160px'
objectFit='cover'
src={file.metadata.cover}
alt={file.metadata.album}
fallbackSrc='https://via.placeholder.com/160'
/>
</Center>
</GridItem>
<GridItem area="title">
@ -123,5 +135,6 @@ export function FileRow({ id, file }: FileRowProps) {
</Grid>
</CardBody>
</Card>
</Collapse>
);
}