diff --git a/src/CurrentYear.tsx b/src/CurrentYear.tsx new file mode 100644 index 0000000..651f036 --- /dev/null +++ b/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}; +} diff --git a/src/Footer.tsx b/src/Footer.tsx index a8c121e..8cd3c68 100644 --- a/src/Footer.tsx +++ b/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() { {') - 移除已购音乐的加密保护。'} - {'Copyright © 2019 - 2023 '} + {'Copyright © 2019 - '} + {' '} UnlockMusic 团队 diff --git a/src/features/file-listing/FileRow.tsx b/src/features/file-listing/FileRow.tsx index 0bd7e59..bd4f0b8 100644 --- a/src/features/file-listing/FileRow.tsx +++ b/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,97 +48,99 @@ export function FileRow({ id, file }: FileRowProps) { } }; - const handleDeleteRow = () => { - dispatch(deleteFile({ id })); - }; + const handleDeleteRow = useCallback(() => { + onClose(); + setTimeout(() => { + dispatch(deleteFile({ id })); + }, 500); + }, [dispatch, id, onClose]); return ( - - - + + + - -
- {metadata && ( + }} + gridTemplateRows={{ + base: 'repeat(auto-fill)', + md: 'min-content 1fr', + }} + gridTemplateColumns={{ + base: '1fr', + md: '160px 1fr', + }} + gap="1" + > + +
{`"${metadata.album}" - )} -
-
- - - {metadata?.name ?? nameWithoutExt} - - - - {isDecrypted && metadata && ( - - - 专辑: {metadata.album} - - - 艺术家: {metadata.artist} - - - 专辑艺术家: {metadata.albumArtist} - +
+
+ + + {metadata?.name ?? nameWithoutExt} - )} - - - - {file.decrypted && + + {isDecrypted && metadata && ( + + + 专辑: {metadata.album} + + + 艺术家: {metadata.artist} + + + 专辑艺术家: {metadata.albumArtist} + + + )} + + + + {file.decrypted && - -
-
-
+ + + +
+
+
+ ); }