From 0b2000ebe2a16843d972f449e2c161f603472a4a Mon Sep 17 00:00:00 2001
From: Jixun Wu <jixun.moe@gmail.com>
Date: Sun, 21 May 2023 18:19:41 +0100
Subject: [PATCH] feat: move metadata display component out from FileRow

---
 src/features/file-listing/FileRow.tsx      | 20 +++-----------------
 src/features/file-listing/SongMetadata.tsx | 22 ++++++++++++++++++++++
 2 files changed, 25 insertions(+), 17 deletions(-)
 create mode 100644 src/features/file-listing/SongMetadata.tsx

diff --git a/src/features/file-listing/FileRow.tsx b/src/features/file-listing/FileRow.tsx
index c280c8c..91d60d4 100644
--- a/src/features/file-listing/FileRow.tsx
+++ b/src/features/file-listing/FileRow.tsx
@@ -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} />}
diff --git a/src/features/file-listing/SongMetadata.tsx b/src/features/file-listing/SongMetadata.tsx
new file mode 100644
index 0000000..1756fa4
--- /dev/null
+++ b/src/features/file-listing/SongMetadata.tsx
@@ -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>
+  );
+}