feat: basic responsive UI
This commit is contained in:
parent
a692c7a9ae
commit
9aba8f9bd7
@ -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">
|
||||||
|
Loading…
Reference in New Issue
Block a user