CarlGao4/um-react
1
0
Fork 0
mirror of https://git.unlock-music.dev/um/um-react.git synced 2024-11-23 19:32:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: move metadata display component out from FileRow

Browse Source
This commit is contained in:
鲁树人 2023-05-21 18:19:41 +01:00
parent 9fc8c15c28
commit e6b3c2813d
2 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/features/file-listing/FileRow.tsx
View File

@ -7,17 +7,17 @@ import {
Collapse,
GridItem,
Link,
Text,
useDisclosure,
VStack,
Wrap,
WrapItem,
useDisclosure,
} from '@chakra-ui/react';
import { FileRowResponsiveGrid } from './FileRowResponsiveGrid';
import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
import { useAppDispatch } from '~/hooks';
import { AnimationDefinition } from 'framer-motion';
import { AlbumImage } from './AlbumImage';
import { SongMetadata } from './SongMetadata';
interface FileRowProps {
id: string;
@ -73,21 +73,7 @@ export function FileRow({ id, file }: FileRowProps) {
<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>
)}
</GridItem>
<GridItem area="meta">{isDecrypted && metadata && <SongMetadata metadata={metadata} />}</GridItem>
<GridItem area="action" alignSelf="center">
<VStack>
{file.decrypted && <audio controls autoPlay={false} src={file.decrypted} ref={audioPlayerRef} />}

22
src/features/file-listing/SongMetadata.tsx Normal file
View File

@ -0,0 +1,22 @@
import { Box, Text } from '@chakra-ui/react';
import type { AudioMetadata } from './fileListingSlice';
export interface SongMetadataProps {
metadata: AudioMetadata;
}
export function SongMetadata({ metadata }: SongMetadataProps) {
return (
<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>
);
}