CarlGao4/um-react
1
0
Fork 0
mirror of https://git.unlock-music.dev/um/um-react.git synced 2024-11-23 22:42:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: basic responsive UI

Browse Source
This commit is contained in:
鲁树人 2023-05-15 00:41:39 +01:00
parent a692c7a9ae
commit 9aba8f9bd7
1 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,8 @@ interface FileRowProps {
export function FileRow({ id, file }: FileRowProps) {
const isDecrypted = file.state === ProcessState.COMPLETE;
const decryptedName = file.fileName.replace(/\.[a-z\d]{3,6}$/, '') + '.' + file.ext;
const nameWithoutExt = file.fileName.replace(/\.[a-z\d]{3,6}$/, '');
const decryptedName = nameWithoutExt + '.' + file.ext;
const audioPlayerRef = useRef<HTMLAudioElement>(null);
const togglePlay = () => {
@ -44,23 +45,37 @@ export function FileRow({ id, file }: FileRowProps) {
<Card w="full">
<CardBody>
<Grid
templateAreas={`
templateAreas={{
base: `
"cover"
"title"
"meta"
"action"
`,
md: `
"cover title title"
"cover meta action"
`}
gridTemplateRows={'min-content 1fr'}
gridTemplateColumns={'160px 1fr'}
`,
}}
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">
<Center w="160px" h="160px" m="auto">
{file.metadata.cover && <Avatar size="sm" name="专辑封面" src={file.metadata.cover} />}
{!file.metadata.cover && <Text>暂无封面</Text>}
</Center>
</GridItem>
<GridItem area="title">
<Box w="full" as="h4" fontWeight="semibold" mt="1">
{file.metadata.name || file.fileName}
<Box w="full" as="h4" fontWeight="semibold" mt="1" textAlign={{ base: 'center', md: 'left' }}>
{file.metadata.name || nameWithoutExt}
</Box>
</GridItem>
<GridItem area="meta">