Merge changes from @houkunlin

src/CurrentYear.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+// Update every half hour
+const TIMER_UPDATE_INTERVAL = 30 * 60 * 1000;
+
+const getCurrentYear = () => new Date().getFullYear();
+
+export function CurrentYear() {
+  const [year, setYear] = useState(getCurrentYear);
+
+  useEffect(() => {
+    const updateTime = () => setYear(getCurrentYear);
+    updateTime();
+
+    const timer = setInterval(updateTime, TIMER_UPDATE_INTERVAL);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return <>{year}</>;
+}

src/Footer.tsx

@@ -1,6 +1,7 @@
 import { Center, Flex, Link, Text } from '@chakra-ui/react';
 import { Suspense } from 'react';
 import { SDKVersion } from './SDKVersion';
+import { CurrentYear } from './CurrentYear';
 
 export function Footer() {
   return (
@@ -25,7 +26,8 @@ export function Footer() {
           {') - 移除已购音乐的加密保护。'}
         </Flex>
         <Text>
-          {'Copyright © 2019 - 2023 '}
+          {'Copyright © 2019 - '}
+          <CurrentYear />{' '}
           <Link href="https://git.unlock-music.dev/um" isExternal>
             UnlockMusic 团队
           </Link>

src/features/file-listing/FileRow.tsx

@@ -4,19 +4,21 @@ import {
   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';
-import coverFallback from '~/assets/no-cover.svg';
+import noCoverFallbackImageURL from '~/assets/no-cover.svg';
 
 interface FileRowProps {
   id: string;
@@ -24,6 +26,7 @@ interface FileRowProps {
 }
 
 export function FileRow({ id, file }: FileRowProps) {
+  const { isOpen, onClose } = useDisclosure({ defaultIsOpen: true });
   const dispatch = useAppDispatch();
   const isDecrypted = file.state === ProcessState.COMPLETE;
   const metadata = file.metadata;
@@ -45,11 +48,15 @@ export function FileRow({ id, file }: FileRowProps) {
     }
   };
 
-  const handleDeleteRow = () => {
+  const handleDeleteRow = useCallback(() => {
+    onClose();
+    setTimeout(() => {
       dispatch(deleteFile({ id }));
-  };
+    }, 500);
+  }, [dispatch, id, onClose]);
 
   return (
+    <Collapse in={isOpen} animateOpacity unmountOnExit startingHeight={0} style={{ width: '100%' }}>
       <Card w="full" data-testid="file-row">
         <CardBody>
           <Grid
@@ -77,14 +84,11 @@ 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={coverFallback}
+                  src={metadata?.cover || noCoverFallbackImageURL}
+                  alt={`${metadata?.album} 的专辑封面`}
                 />
-              )}
               </Center>
             </GridItem>
             <GridItem area="title">
@@ -137,5 +141,6 @@ export function FileRow({ id, file }: FileRowProps) {
           </Grid>
         </CardBody>
       </Card>
+    </Collapse>
   );
 }