feat: 歌曲封面使用 Image 组件,删除歌曲行数据时使用一个动画效果来过渡一下
This commit is contained in:
parent
67b87f685d
commit
b8c3a51756
@ -1,20 +1,22 @@
|
|||||||
import {
|
import {
|
||||||
Avatar,
|
|
||||||
Box,
|
Box,
|
||||||
Button,
|
Button,
|
||||||
Card,
|
Card,
|
||||||
CardBody,
|
CardBody,
|
||||||
Center,
|
Center,
|
||||||
|
Collapse,
|
||||||
Grid,
|
Grid,
|
||||||
GridItem,
|
GridItem,
|
||||||
|
Image,
|
||||||
Link,
|
Link,
|
||||||
Text,
|
Text,
|
||||||
|
useDisclosure,
|
||||||
VStack,
|
VStack,
|
||||||
Wrap,
|
Wrap,
|
||||||
WrapItem,
|
WrapItem,
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import { DecryptedAudioFile, ProcessState, deleteFile } from './fileListingSlice';
|
import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
|
||||||
import { useRef } from 'react';
|
import { useCallback, useRef } from 'react';
|
||||||
import { useAppDispatch } from '~/hooks';
|
import { useAppDispatch } from '~/hooks';
|
||||||
|
|
||||||
interface FileRowProps {
|
interface FileRowProps {
|
||||||
@ -23,6 +25,7 @@ interface FileRowProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function FileRow({ id, file }: FileRowProps) {
|
export function FileRow({ id, file }: FileRowProps) {
|
||||||
|
const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
const isDecrypted = file.state === ProcessState.COMPLETE;
|
const isDecrypted = file.state === ProcessState.COMPLETE;
|
||||||
|
|
||||||
@ -30,7 +33,7 @@ export function FileRow({ id, file }: FileRowProps) {
|
|||||||
const decryptedName = nameWithoutExt + '.' + file.ext;
|
const decryptedName = nameWithoutExt + '.' + file.ext;
|
||||||
|
|
||||||
const audioPlayerRef = useRef<HTMLAudioElement>(null);
|
const audioPlayerRef = useRef<HTMLAudioElement>(null);
|
||||||
const togglePlay = () => {
|
const togglePlay = useCallback(() => {
|
||||||
const player = audioPlayerRef.current;
|
const player = audioPlayerRef.current;
|
||||||
if (!player) {
|
if (!player) {
|
||||||
return;
|
return;
|
||||||
@ -41,13 +44,17 @@ export function FileRow({ id, file }: FileRowProps) {
|
|||||||
} else {
|
} else {
|
||||||
player.pause();
|
player.pause();
|
||||||
}
|
}
|
||||||
};
|
}, []);
|
||||||
|
|
||||||
const handleDeleteRow = () => {
|
const handleDeleteRow = useCallback(() => {
|
||||||
|
onToggle();
|
||||||
|
setTimeout(() => {
|
||||||
dispatch(deleteFile({ id }));
|
dispatch(deleteFile({ id }));
|
||||||
};
|
}, 500);
|
||||||
|
}, [dispatch, id, onToggle]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<Collapse in={isOpen} animateOpacity unmountOnExit startingHeight={0} style={{ width: '100%' }}>
|
||||||
<Card w="full">
|
<Card w="full">
|
||||||
<CardBody>
|
<CardBody>
|
||||||
<Grid
|
<Grid
|
||||||
@ -75,8 +82,13 @@ export function FileRow({ id, file }: FileRowProps) {
|
|||||||
>
|
>
|
||||||
<GridItem area="cover">
|
<GridItem area="cover">
|
||||||
<Center w="160px" h="160px" m="auto">
|
<Center w="160px" h="160px" m="auto">
|
||||||
{file.metadata.cover && <Avatar size="sm" name="专辑封面" src={file.metadata.cover} />}
|
<Image
|
||||||
{!file.metadata.cover && <Text>暂无封面</Text>}
|
boxSize='160px'
|
||||||
|
objectFit='cover'
|
||||||
|
src={file.metadata.cover}
|
||||||
|
alt={file.metadata.album}
|
||||||
|
fallbackSrc='https://via.placeholder.com/160'
|
||||||
|
/>
|
||||||
</Center>
|
</Center>
|
||||||
</GridItem>
|
</GridItem>
|
||||||
<GridItem area="title">
|
<GridItem area="title">
|
||||||
@ -123,5 +135,6 @@ export function FileRow({ id, file }: FileRowProps) {
|
|||||||
</Grid>
|
</Grid>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
|
</Collapse>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user