From d2bc92c39db287262fd67c897fa0e6804b8c3c9e Mon Sep 17 00:00:00 2001 From: HouKunLin Date: Tue, 16 May 2023 16:21:42 +0800 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E5=BA=95?= =?UTF-8?q?=E9=83=A8=E7=89=88=E6=9D=83=E5=8C=BA=E5=9F=9F=EF=BC=8C=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=20Wrap=20=E7=BB=84=E4=BB=B6=E6=9D=A5=E5=AE=9E?= =?UTF-8?q?=E7=8E=B0=E6=96=87=E5=AD=97=E9=97=B4=E7=9A=84=E9=97=B4=E9=9A=94?= =?UTF-8?q?=EF=BC=8C=E6=8A=8A=E7=BB=93=E6=9D=9F=E5=B9=B4=E4=BB=BD=E5=8A=A8?= =?UTF-8?q?=E6=80=81=E8=8E=B7=E5=8F=96=E5=BD=93=E5=89=8D=E5=B9=B4=E4=BB=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Footer.tsx | 31 ++++++++++++++++--------------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/src/Footer.tsx b/src/Footer.tsx index a8c121e..9f66aba 100644 --- a/src/Footer.tsx +++ b/src/Footer.tsx @@ -1,8 +1,9 @@ -import { Center, Flex, Link, Text } from '@chakra-ui/react'; -import { Suspense } from 'react'; +import { Center, Flex, Link, Text, Wrap, WrapItem } from '@chakra-ui/react'; +import { Suspense, useMemo } from 'react'; import { SDKVersion } from './SDKVersion'; export function Footer() { + const year = useMemo(() => new Date().getFullYear(), []); return (
- {'音乐解锁 (__APP_VERSION_SHORT__'} + 音乐解锁 (__APP_VERSION_SHORT__ - {') - 移除已购音乐的加密保护。'} + ) - 移除已购音乐的加密保护 - - {'Copyright © 2019 - 2023 '} - - UnlockMusic 团队 - - {' | 音乐解锁授权基于'} - - MIT许可协议 - - 。 - + + Copyright © 2019 - {year} + + UnlockMusic 团队 + + | + 音乐解锁授权基于 + + MIT许可协议 + +
); From 8a825affd0034f2b9aa153a979ed19fbffccbc5a Mon Sep 17 00:00:00 2001 From: HouKunLin Date: Tue, 16 May 2023 16:24:00 +0800 Subject: [PATCH 2/8] =?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(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 ( - - - + + + - -
- {file.metadata.cover && } - {!file.metadata.cover && 暂无封面} -
- - - - {file.metadata.name || nameWithoutExt} - - - - {isDecrypted && ( - - 专辑: {file.metadata.album} - 艺术家: {file.metadata.artist} - 专辑艺术家: {file.metadata.albumArtist} + }} + gridTemplateRows={{ + base: 'repeat(auto-fill)', + md: 'min-content 1fr', + }} + gridTemplateColumns={{ + base: '1fr', + md: '160px 1fr', + }} + gap="1" + > + +
+ {file.metadata.album} +
+ + + + {file.metadata.name || nameWithoutExt} - )} - - - - {file.decrypted && + + {isDecrypted && ( + + 专辑: {file.metadata.album} + 艺术家: {file.metadata.artist} + 专辑艺术家: {file.metadata.albumArtist} + + )} + + + + {file.decrypted && - - - - + + + + + + + ); } From 0197c8b2f45b923746d66067963d7c72f5ae7f64 Mon Sep 17 00:00:00 2001 From: HouKunLin Date: Wed, 17 May 2023 09:10:36 +0800 Subject: [PATCH 3/8] =?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 ( From 4341203c08cf00504a78908b5195c99e04659698 Mon Sep 17 00:00:00 2001 From: HouKunLin Date: Wed, 17 May 2023 09:27:16 +0800 Subject: [PATCH 4/8] =?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(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'} /> )} From aaefffbb8b7716439940a1df5a352697adf595e1 Mon Sep 17 00:00:00 2001 From: HouKunLin Date: Wed, 17 May 2023 09:39:33 +0800 Subject: [PATCH 5/8] =?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) { >
- {metadata && ( - {`"${metadata.album}" - )} + {`${metadata?.album}
From 4b7ed9024707e5958c051d4a5e265eee9bba5ba7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=B2=81=E6=A0=91=E4=BA=BA?= Date: Sun, 21 May 2023 14:17:55 +0100 Subject: [PATCH 6/8] chore: address code review re file row --- src/features/file-listing/FileRow.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/features/file-listing/FileRow.tsx b/src/features/file-listing/FileRow.tsx index 6680b07..bd4f0b8 100644 --- a/src/features/file-listing/FileRow.tsx +++ b/src/features/file-listing/FileRow.tsx @@ -18,7 +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'; +import noCoverFallbackImageURL from '~/assets/no-cover.svg'; interface FileRowProps { id: string; @@ -86,9 +86,8 @@ export function FileRow({ id, file }: FileRowProps) {
{`${metadata?.album}
From 0f99f9ac4fd71ecefde87e99f1d0989934926ace Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=B2=81=E6=A0=91=E4=BA=BA?= Date: Sun, 21 May 2023 14:19:23 +0100 Subject: [PATCH 7/8] =?UTF-8?q?Revert=20"feat:=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E5=BA=95=E9=83=A8=E7=89=88=E6=9D=83=E5=8C=BA=E5=9F=9F=EF=BC=8C?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=20Wrap=20=E7=BB=84=E4=BB=B6=E6=9D=A5?= =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E6=96=87=E5=AD=97=E9=97=B4=E7=9A=84=E9=97=B4?= =?UTF-8?q?=E9=9A=94=EF=BC=8C=E6=8A=8A=E7=BB=93=E6=9D=9F=E5=B9=B4=E4=BB=BD?= =?UTF-8?q?=E5=8A=A8=E6=80=81=E8=8E=B7=E5=8F=96=E5=BD=93=E5=89=8D=E5=B9=B4?= =?UTF-8?q?=E4=BB=BD"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit d2bc92c39db287262fd67c897fa0e6804b8c3c9e. --- src/Footer.tsx | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/src/Footer.tsx b/src/Footer.tsx index 9f66aba..a8c121e 100644 --- a/src/Footer.tsx +++ b/src/Footer.tsx @@ -1,9 +1,8 @@ -import { Center, Flex, Link, Text, Wrap, WrapItem } from '@chakra-ui/react'; -import { Suspense, useMemo } from 'react'; +import { Center, Flex, Link, Text } from '@chakra-ui/react'; +import { Suspense } from 'react'; import { SDKVersion } from './SDKVersion'; export function Footer() { - const year = useMemo(() => new Date().getFullYear(), []); return (
- 音乐解锁 (__APP_VERSION_SHORT__ + {'音乐解锁 (__APP_VERSION_SHORT__'} - ) - 移除已购音乐的加密保护 + {') - 移除已购音乐的加密保护。'} - - Copyright © 2019 - {year} - - UnlockMusic 团队 - - | - 音乐解锁授权基于 - - MIT许可协议 - - + + {'Copyright © 2019 - 2023 '} + + UnlockMusic 团队 + + {' | 音乐解锁授权基于'} + + MIT许可协议 + + 。 +
); From bbb43ba2f5d56317e4fad6c418a96fff76025365 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=B2=81=E6=A0=91=E4=BA=BA?= Date: Sun, 21 May 2023 14:24:06 +0100 Subject: [PATCH 8/8] feat: re-implement current year logic by using a component --- src/CurrentYear.tsx | 22 ++++++++++++++++++++++ src/Footer.tsx | 4 +++- 2 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 src/CurrentYear.tsx 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 团队