From b8c3a517562b614b061298148c067ded7937c72c Mon Sep 17 00:00:00 2001
From: HouKunLin <houkunlin@aliyun.com>
Date: Tue, 16 May 2023 16:24:00 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E6=AD=8C=E6=9B=B2=E5=B0=81?=
 =?UTF-8?q?=E9=9D=A2=E4=BD=BF=E7=94=A8=20Image=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E5=88=A0=E9=99=A4=E6=AD=8C=E6=9B=B2=E8=A1=8C=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=97=B6=E4=BD=BF=E7=94=A8=E4=B8=80=E4=B8=AA=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E6=95=88=E6=9E=9C=E6=9D=A5=E8=BF=87=E6=B8=A1=E4=B8=80?=
 =?UTF-8?q?=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/file-listing/FileRow.tsx | 153 ++++++++++++++------------
 1 file changed, 83 insertions(+), 70 deletions(-)

diff --git a/src/features/file-listing/FileRow.tsx b/src/features/file-listing/FileRow.tsx
index 07c04c3..9cdc12d 100644
--- a/src/features/file-listing/FileRow.tsx
+++ b/src/features/file-listing/FileRow.tsx
@@ -1,20 +1,22 @@
 import {
-  Avatar,
   Box,
   Button,
   Card,
   CardBody,
   Center,
+  Collapse,
   Grid,
   GridItem,
+  Image,
   Link,
   Text,
+  useDisclosure,
   VStack,
   Wrap,
   WrapItem,
 } from '@chakra-ui/react';
-import { DecryptedAudioFile, ProcessState, deleteFile } from './fileListingSlice';
-import { useRef } from 'react';
+import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
+import { useCallback, useRef } from 'react';
 import { useAppDispatch } from '~/hooks';
 
 interface FileRowProps {
@@ -23,6 +25,7 @@ interface FileRowProps {
 }
 
 export function FileRow({ id, file }: FileRowProps) {
+  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
   const dispatch = useAppDispatch();
   const isDecrypted = file.state === ProcessState.COMPLETE;
 
@@ -30,7 +33,7 @@ export function FileRow({ id, file }: FileRowProps) {
   const decryptedName = nameWithoutExt + '.' + file.ext;
 
   const audioPlayerRef = useRef<HTMLAudioElement>(null);
-  const togglePlay = () => {
+  const togglePlay = useCallback(() => {
     const player = audioPlayerRef.current;
     if (!player) {
       return;
@@ -41,87 +44,97 @@ export function FileRow({ id, file }: FileRowProps) {
     } else {
       player.pause();
     }
-  };
+  }, []);
 
-  const handleDeleteRow = () => {
-    dispatch(deleteFile({ id }));
-  };
+  const handleDeleteRow = useCallback(() => {
+    onToggle();
+    setTimeout(() => {
+      dispatch(deleteFile({ id }));
+    }, 500);
+  }, [dispatch, id, onToggle]);
 
   return (
-    <Card w="full">
-      <CardBody>
-        <Grid
-          templateAreas={{
-            base: `
+    <Collapse in={isOpen} animateOpacity unmountOnExit startingHeight={0} style={{ width: '100%' }}>
+      <Card w="full">
+        <CardBody>
+          <Grid
+            templateAreas={{
+              base: `
               "cover"
               "title"
               "meta"
               "action"
             `,
-            md: `
+              md: `
               "cover title title"
               "cover meta  action"
             `,
-          }}
-          gridTemplateRows={{
-            base: 'repeat(auto-fill)',
-            md: 'min-content 1fr',
-          }}
-          gridTemplateColumns={{
-            base: '1fr',
-            md: '160px 1fr',
-          }}
-          gap="1"
-        >
-          <GridItem area="cover">
-            <Center w="160px" h="160px" m="auto">
-              {file.metadata.cover && <Avatar size="sm" name="专辑封面" src={file.metadata.cover} />}
-              {!file.metadata.cover && <Text>暂无封面</Text>}
-            </Center>
-          </GridItem>
-          <GridItem area="title">
-            <Box w="full" as="h4" fontWeight="semibold" mt="1" textAlign={{ base: 'center', md: 'left' }}>
-              {file.metadata.name || nameWithoutExt}
-            </Box>
-          </GridItem>
-          <GridItem area="meta">
-            {isDecrypted && (
-              <Box>
-                <Text>专辑: {file.metadata.album}</Text>
-                <Text>艺术家: {file.metadata.artist}</Text>
-                <Text>专辑艺术家: {file.metadata.albumArtist}</Text>
+            }}
+            gridTemplateRows={{
+              base: 'repeat(auto-fill)',
+              md: 'min-content 1fr',
+            }}
+            gridTemplateColumns={{
+              base: '1fr',
+              md: '160px 1fr',
+            }}
+            gap="1"
+          >
+            <GridItem area="cover">
+              <Center w="160px" h="160px" m="auto">
+                <Image
+                  boxSize='160px'
+                  objectFit='cover'
+                  src={file.metadata.cover}
+                  alt={file.metadata.album}
+                  fallbackSrc='https://via.placeholder.com/160'
+                />
+              </Center>
+            </GridItem>
+            <GridItem area="title">
+              <Box w="full" as="h4" fontWeight="semibold" mt="1" textAlign={{ base: 'center', md: 'left' }}>
+                {file.metadata.name || nameWithoutExt}
               </Box>
-            )}
-          </GridItem>
-          <GridItem area="action">
-            <VStack>
-              {file.decrypted && <audio controls autoPlay={false} src={file.decrypted} ref={audioPlayerRef} />}
+            </GridItem>
+            <GridItem area="meta">
+              {isDecrypted && (
+                <Box>
+                  <Text>专辑: {file.metadata.album}</Text>
+                  <Text>艺术家: {file.metadata.artist}</Text>
+                  <Text>专辑艺术家: {file.metadata.albumArtist}</Text>
+                </Box>
+              )}
+            </GridItem>
+            <GridItem area="action">
+              <VStack>
+                {file.decrypted && <audio controls autoPlay={false} src={file.decrypted} ref={audioPlayerRef} />}
 
-              <Wrap>
-                {isDecrypted && (
+                <Wrap>
+                  {isDecrypted && (
+                    <WrapItem>
+                      <Button type="button" onClick={togglePlay}>
+                        播放/暂停
+                      </Button>
+                    </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>
                   </WrapItem>
-                )}
-                <WrapItem>
-                  {file.decrypted && (
-                    <Link isExternal href={file.decrypted} download={decryptedName}>
-                      <Button as="span">下载</Button>
-                    </Link>
-                  )}
-                </WrapItem>
-                <WrapItem>
-                  <Button type="button" onClick={handleDeleteRow}>
-                    删除
-                  </Button>
-                </WrapItem>
-              </Wrap>
-            </VStack>
-          </GridItem>
-        </Grid>
-      </CardBody>
-    </Card>
+                </Wrap>
+              </VStack>
+            </GridItem>
+          </Grid>
+        </CardBody>
+      </Card>
+    </Collapse>
   );
 }

From eaf05d8cbbd1ad00f78fe3204a176c87924c4359 Mon Sep 17 00:00:00 2001
From: HouKunLin <houkunlin@aliyun.com>
Date: Wed, 17 May 2023 09:10:36 +0800
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E5=88=A0=E9=99=A4=E6=AD=8C?=
 =?UTF-8?q?=E6=9B=B2=E8=A1=8C=E6=95=B0=E6=8D=AE=E6=97=B6=E6=94=B9=E7=94=A8?=
 =?UTF-8?q?=20onClose=20=E6=9D=A5=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/file-listing/FileRow.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/file-listing/FileRow.tsx b/src/features/file-listing/FileRow.tsx
index 9cdc12d..2efe8d3 100644
--- a/src/features/file-listing/FileRow.tsx
+++ b/src/features/file-listing/FileRow.tsx
@@ -25,7 +25,7 @@ interface FileRowProps {
 }
 
 export function FileRow({ id, file }: FileRowProps) {
-  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
+  const { isOpen, onClose } = useDisclosure({ defaultIsOpen: true });
   const dispatch = useAppDispatch();
   const isDecrypted = file.state === ProcessState.COMPLETE;
 
@@ -47,11 +47,11 @@ export function FileRow({ id, file }: FileRowProps) {
   }, []);
 
   const handleDeleteRow = useCallback(() => {
-    onToggle();
+    onClose();
     setTimeout(() => {
       dispatch(deleteFile({ id }));
     }, 500);
-  }, [dispatch, id, onToggle]);
+  }, [dispatch, id, onClose]);
 
   return (
     <Collapse in={isOpen} animateOpacity unmountOnExit startingHeight={0} style={{ width: '100%' }}>

From 33a6abab7fb9b7021b4ecbae1791dd6ab79b1619 Mon Sep 17 00:00:00 2001
From: HouKunLin <houkunlin@aliyun.com>
Date: Wed, 17 May 2023 09:27:16 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20togglePlay=20=E6=96=B9=E6=B3=95?=
 =?UTF-8?q?=E5=8F=96=E6=B6=88=E4=BD=BF=E7=94=A8=20useCallback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/file-listing/FileRow.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/features/file-listing/FileRow.tsx b/src/features/file-listing/FileRow.tsx
index 4c5c5e9..b949e4e 100644
--- a/src/features/file-listing/FileRow.tsx
+++ b/src/features/file-listing/FileRow.tsx
@@ -18,7 +18,6 @@ import {
 import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
 import { useCallback, useRef } from 'react';
 import { useAppDispatch } from '~/hooks';
-import coverFallback from '~/assets/no-cover.svg';
 
 interface FileRowProps {
   id: string;
@@ -35,7 +34,7 @@ export function FileRow({ id, file }: FileRowProps) {
   const decryptedName = nameWithoutExt + '.' + file.ext;
 
   const audioPlayerRef = useRef<HTMLAudioElement>(null);
-  const togglePlay = useCallback(() => {
+  const togglePlay = () => {
     const player = audioPlayerRef.current;
     if (!player) {
       return;
@@ -46,7 +45,7 @@ export function FileRow({ id, file }: FileRowProps) {
     } else {
       player.pause();
     }
-  }, []);
+  };
 
   const handleDeleteRow = useCallback(() => {
     onClose();
@@ -89,7 +88,7 @@ export function FileRow({ id, file }: FileRowProps) {
                     objectFit="cover"
                     src={metadata.cover}
                     alt={`"${metadata.album}" 的专辑封面`}
-                    fallbackSrc={coverFallback}
+                    fallbackSrc={'/assets/no-cover.svg'}
                   />
                 )}
               </Center>

From 76cb2a154b2b420a5d2c31f53b581ef6f9c5ca0f Mon Sep 17 00:00:00 2001
From: HouKunLin <houkunlin@aliyun.com>
Date: Wed, 17 May 2023 09:39:33 +0800
Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=E5=8D=B3=E4=BD=BF=E4=B8=8D?=
 =?UTF-8?q?=E5=AD=98=E5=9C=A8=E6=AD=8C=E6=9B=B2=E5=85=83=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=EF=BC=8C=E4=B9=9F=E5=B1=95=E7=A4=BA=E9=BB=98=E8=AE=A4=E7=9A=84?=
 =?UTF-8?q?=E2=80=9C=E6=9A=82=E6=97=A0=E5=B0=81=E9=9D=A2=E2=80=9D=E5=8D=A0?=
 =?UTF-8?q?=E4=BD=8D=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/file-listing/FileRow.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/features/file-listing/FileRow.tsx b/src/features/file-listing/FileRow.tsx
index b949e4e..6680b07 100644
--- a/src/features/file-listing/FileRow.tsx
+++ b/src/features/file-listing/FileRow.tsx
@@ -18,6 +18,7 @@ import {
 import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
 import { useCallback, useRef } from 'react';
 import { useAppDispatch } from '~/hooks';
+import coverSvgUrl from '~/assets/no-cover.svg';
 
 interface FileRowProps {
   id: string;
@@ -83,14 +84,12 @@ export function FileRow({ id, file }: FileRowProps) {
           >
             <GridItem area="cover">
               <Center w="160px" h="160px" m="auto">
-                {metadata && (
-                  <Image
-                    objectFit="cover"
-                    src={metadata.cover}
-                    alt={`"${metadata.album}" 的专辑封面`}
-                    fallbackSrc={'/assets/no-cover.svg'}
-                  />
-                )}
+                <Image
+                  objectFit="cover"
+                  src={metadata?.cover}
+                  alt={`${metadata?.album} 的专辑封面`}
+                  fallbackSrc={coverSvgUrl}
+                />
               </Center>
             </GridItem>
             <GridItem area="title">