feat: move metadata display component out from FileRow

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

View File

@ -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} />}

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>
);
}