Merge remote-tracking branch 'houkunlin/feat/file-row' into merge-houkunlin
This commit is contained in:
commit
c0bc9858d0
@ -4,19 +4,21 @@ import {
|
|||||||
Card,
|
Card,
|
||||||
CardBody,
|
CardBody,
|
||||||
Center,
|
Center,
|
||||||
|
Collapse,
|
||||||
Grid,
|
Grid,
|
||||||
GridItem,
|
GridItem,
|
||||||
Image,
|
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';
|
||||||
import coverFallback from '~/assets/no-cover.svg';
|
import coverSvgUrl from '~/assets/no-cover.svg';
|
||||||
|
|
||||||
interface FileRowProps {
|
interface FileRowProps {
|
||||||
id: string;
|
id: string;
|
||||||
@ -24,6 +26,7 @@ interface FileRowProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function FileRow({ id, file }: FileRowProps) {
|
export function FileRow({ id, file }: FileRowProps) {
|
||||||
|
const { isOpen, onClose } = useDisclosure({ defaultIsOpen: true });
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
const isDecrypted = file.state === ProcessState.COMPLETE;
|
const isDecrypted = file.state === ProcessState.COMPLETE;
|
||||||
const metadata = file.metadata;
|
const metadata = file.metadata;
|
||||||
@ -45,97 +48,100 @@ export function FileRow({ id, file }: FileRowProps) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDeleteRow = () => {
|
const handleDeleteRow = useCallback(() => {
|
||||||
dispatch(deleteFile({ id }));
|
onClose();
|
||||||
};
|
setTimeout(() => {
|
||||||
|
dispatch(deleteFile({ id }));
|
||||||
|
}, 500);
|
||||||
|
}, [dispatch, id, onClose]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card w="full" data-testid="file-row">
|
<Collapse in={isOpen} animateOpacity unmountOnExit startingHeight={0} style={{ width: '100%' }}>
|
||||||
<CardBody>
|
<Card w="full" data-testid="file-row">
|
||||||
<Grid
|
<CardBody>
|
||||||
templateAreas={{
|
<Grid
|
||||||
base: `
|
templateAreas={{
|
||||||
|
base: `
|
||||||
"cover"
|
"cover"
|
||||||
"title"
|
"title"
|
||||||
"meta"
|
"meta"
|
||||||
"action"
|
"action"
|
||||||
`,
|
`,
|
||||||
md: `
|
md: `
|
||||||
"cover title title"
|
"cover title title"
|
||||||
"cover meta action"
|
"cover meta action"
|
||||||
`,
|
`,
|
||||||
}}
|
}}
|
||||||
gridTemplateRows={{
|
gridTemplateRows={{
|
||||||
base: 'repeat(auto-fill)',
|
base: 'repeat(auto-fill)',
|
||||||
md: 'min-content 1fr',
|
md: 'min-content 1fr',
|
||||||
}}
|
}}
|
||||||
gridTemplateColumns={{
|
gridTemplateColumns={{
|
||||||
base: '1fr',
|
base: '1fr',
|
||||||
md: '160px 1fr',
|
md: '160px 1fr',
|
||||||
}}
|
}}
|
||||||
gap="1"
|
gap="1"
|
||||||
>
|
>
|
||||||
<GridItem area="cover">
|
<GridItem area="cover">
|
||||||
<Center w="160px" h="160px" m="auto">
|
<Center w="160px" h="160px" m="auto">
|
||||||
{metadata && (
|
|
||||||
<Image
|
<Image
|
||||||
objectFit="cover"
|
objectFit="cover"
|
||||||
src={metadata.cover}
|
src={metadata?.cover}
|
||||||
alt={`"${metadata.album}" 的专辑封面`}
|
alt={`${metadata?.album} 的专辑封面`}
|
||||||
fallbackSrc={coverFallback}
|
fallbackSrc={coverSvgUrl}
|
||||||
/>
|
/>
|
||||||
)}
|
</Center>
|
||||||
</Center>
|
</GridItem>
|
||||||
</GridItem>
|
<GridItem area="title">
|
||||||
<GridItem area="title">
|
<Box w="full" as="h4" fontWeight="semibold" mt="1" textAlign={{ base: 'center', md: 'left' }}>
|
||||||
<Box w="full" as="h4" fontWeight="semibold" mt="1" textAlign={{ base: 'center', md: 'left' }}>
|
<span data-testid="audio-meta-song-name">{metadata?.name ?? nameWithoutExt}</span>
|
||||||
<span data-testid="audio-meta-song-name">{metadata?.name ?? nameWithoutExt}</span>
|
|
||||||
</Box>
|
|
||||||
</GridItem>
|
|
||||||
<GridItem area="meta">
|
|
||||||
{isDecrypted && metadata && (
|
|
||||||
<Box>
|
|
||||||
<Text>
|
|
||||||
专辑: <span data-testid="audio-meta-album-name">{metadata.album}</span>
|
|
||||||
</Text>
|
|
||||||
<Text>
|
|
||||||
艺术家: <span data-testid="audio-meta-song-artist">{metadata.artist}</span>
|
|
||||||
</Text>
|
|
||||||
<Text>
|
|
||||||
专辑艺术家: <span data-testid="audio-meta-album-artist">{metadata.albumArtist}</span>
|
|
||||||
</Text>
|
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
</GridItem>
|
||||||
</GridItem>
|
<GridItem area="meta">
|
||||||
<GridItem area="action">
|
{isDecrypted && metadata && (
|
||||||
<VStack>
|
<Box>
|
||||||
{file.decrypted && <audio controls autoPlay={false} src={file.decrypted} ref={audioPlayerRef} />}
|
<Text>
|
||||||
|
专辑: <span data-testid="audio-meta-album-name">{metadata.album}</span>
|
||||||
|
</Text>
|
||||||
|
<Text>
|
||||||
|
艺术家: <span data-testid="audio-meta-song-artist">{metadata.artist}</span>
|
||||||
|
</Text>
|
||||||
|
<Text>
|
||||||
|
专辑艺术家: <span data-testid="audio-meta-album-artist">{metadata.albumArtist}</span>
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</GridItem>
|
||||||
|
<GridItem area="action">
|
||||||
|
<VStack>
|
||||||
|
{file.decrypted && <audio controls autoPlay={false} src={file.decrypted} ref={audioPlayerRef} />}
|
||||||
|
|
||||||
<Wrap>
|
<Wrap>
|
||||||
{isDecrypted && (
|
{isDecrypted && (
|
||||||
|
<WrapItem>
|
||||||
|
<Button type="button" onClick={togglePlay}>
|
||||||
|
播放/暂停
|
||||||
|
</Button>
|
||||||
|
</WrapItem>
|
||||||
|
)}
|
||||||
<WrapItem>
|
<WrapItem>
|
||||||
<Button type="button" onClick={togglePlay}>
|
{file.decrypted && (
|
||||||
播放/暂停
|
<Link isExternal href={file.decrypted} download={decryptedName}>
|
||||||
|
<Button as="span">下载</Button>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</WrapItem>
|
||||||
|
<WrapItem>
|
||||||
|
<Button type="button" onClick={handleDeleteRow}>
|
||||||
|
删除
|
||||||
</Button>
|
</Button>
|
||||||
</WrapItem>
|
</WrapItem>
|
||||||
)}
|
</Wrap>
|
||||||
<WrapItem>
|
</VStack>
|
||||||
{file.decrypted && (
|
</GridItem>
|
||||||
<Link isExternal href={file.decrypted} download={decryptedName}>
|
</Grid>
|
||||||
<Button as="span">下载</Button>
|
</CardBody>
|
||||||
</Link>
|
</Card>
|
||||||
)}
|
</Collapse>
|
||||||
</WrapItem>
|
|
||||||
<WrapItem>
|
|
||||||
<Button type="button" onClick={handleDeleteRow}>
|
|
||||||
删除
|
|
||||||
</Button>
|
|
||||||
</WrapItem>
|
|
||||||
</Wrap>
|
|
||||||
</VStack>
|
|
||||||
</GridItem>
|
|
||||||
</Grid>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user