feat: move metadata display component out from FileRow
This commit is contained in:
parent
9fc8c15c28
commit
e6b3c2813d
@ -7,17 +7,17 @@ import {
|
|||||||
Collapse,
|
Collapse,
|
||||||
GridItem,
|
GridItem,
|
||||||
Link,
|
Link,
|
||||||
Text,
|
|
||||||
useDisclosure,
|
|
||||||
VStack,
|
VStack,
|
||||||
Wrap,
|
Wrap,
|
||||||
WrapItem,
|
WrapItem,
|
||||||
|
useDisclosure,
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import { FileRowResponsiveGrid } from './FileRowResponsiveGrid';
|
import { FileRowResponsiveGrid } from './FileRowResponsiveGrid';
|
||||||
import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
|
import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
|
||||||
import { useAppDispatch } from '~/hooks';
|
import { useAppDispatch } from '~/hooks';
|
||||||
import { AnimationDefinition } from 'framer-motion';
|
import { AnimationDefinition } from 'framer-motion';
|
||||||
import { AlbumImage } from './AlbumImage';
|
import { AlbumImage } from './AlbumImage';
|
||||||
|
import { SongMetadata } from './SongMetadata';
|
||||||
|
|
||||||
interface FileRowProps {
|
interface FileRowProps {
|
||||||
id: string;
|
id: string;
|
||||||
@ -73,21 +73,7 @@ export function FileRow({ id, file }: FileRowProps) {
|
|||||||
<span data-testid="audio-meta-song-name">{metadata?.name ?? nameWithoutExt}</span>
|
<span data-testid="audio-meta-song-name">{metadata?.name ?? nameWithoutExt}</span>
|
||||||
</Box>
|
</Box>
|
||||||
</GridItem>
|
</GridItem>
|
||||||
<GridItem area="meta">
|
<GridItem area="meta">{isDecrypted && metadata && <SongMetadata metadata={metadata} />}</GridItem>
|
||||||
{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="action" alignSelf="center">
|
<GridItem area="action" alignSelf="center">
|
||||||
<VStack>
|
<VStack>
|
||||||
{file.decrypted && <audio controls autoPlay={false} src={file.decrypted} ref={audioPlayerRef} />}
|
{file.decrypted && <audio controls autoPlay={false} src={file.decrypted} ref={audioPlayerRef} />}
|
||||||
|
22
src/features/file-listing/SongMetadata.tsx
Normal file
22
src/features/file-listing/SongMetadata.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user