CarlGao4/um-react
1
0
Fork 0
mirror of https://git.unlock-music.dev/um/um-react.git synced 2024-11-23 23:22:18 +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

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

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