Merge changes from @houkunlin

This commit is contained in:
鲁树人 2023-05-21 14:28:13 +01:00
commit a5d8e6bd11
3 changed files with 107 additions and 78 deletions

22
src/CurrentYear.tsx Normal file
View File

@ -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}</>;
}

View File

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

View File

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