um/um-react
16
28
Fork 10
Code Issues 15 Pull Requests 1 Packages Projects 1 Releases 2 Wiki Activity

Merge changes from @houkunlin

Browse Source
This commit is contained in:
鲁树人 2023-05-21 14:28:13 +01:00
commit d12ef12ea4
3 changed files with 107 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

4
src/Footer.tsx
View File

@ -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>

159
src/features/file-listing/FileRow.tsx
View File

@ -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 (
<Card w="full" data-testid="file-row">
<CardBody>
<Grid
templateAreas={{
base: `
<Collapse in={isOpen} animateOpacity unmountOnExit startingHeight={0} style={{ width: '100%' }}>
<Card w="full" data-testid="file-row">
<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">
{metadata && (
}}
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
objectFit="cover"
src={metadata.cover}
alt={`"${metadata.album}" 的专辑封面`}
fallbackSrc={coverFallback}
src={metadata?.cover || noCoverFallbackImageURL}
alt={`${metadata?.album} 的专辑封面`}
/>
)}
</Center>
</GridItem>
<GridItem area="title">
<Box w="full" as="h4" fontWeight="semibold" mt="1" textAlign={{ base: 'center', md: 'left' }}>
<span data-testid="audio-meta-song-name">{metadata?.name ?? nameWithoutExt}</span>
</Box>
</GridItem>
<GridItem area="meta">
{isDecrypted && metadata && (
<Box>
<Text>
专辑: <span data-testid="audio-meta-album-name">{metadata.album}</span>
</Text>
<Text>
艺术家: <span data-testid="audio-meta-song-artist">{metadata.artist}</span>
</Text>
<Text>
专辑艺术家: <span data-testid="audio-meta-album-artist">{metadata.albumArtist}</span>
</Text>
</Center>
</GridItem>
<GridItem area="title">
<Box w="full" as="h4" fontWeight="semibold" mt="1" textAlign={{ base: 'center', md: 'left' }}>
<span data-testid="audio-meta-song-name">{metadata?.name ?? nameWithoutExt}</span>
</Box>
)}
</GridItem>
<GridItem area="action">
<VStack>
{file.decrypted && <audio controls autoPlay={false} src={file.decrypted} ref={audioPlayerRef} />}
</GridItem>
<GridItem area="meta">
{isDecrypted && metadata && (
<Box>
<Text>
专辑: <span data-testid="audio-meta-album-name">{metadata.album}</span>
</Text>
<Text>
艺术家: <span data-testid="audio-meta-song-artist">{metadata.artist}</span>
</Text>
<Text>
专辑艺术家: <span data-testid="audio-meta-album-artist">{metadata.albumArtist}</span>
</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>
);
}