feat: rounded album cover image

This commit is contained in:
鲁树人 2023-05-21 18:16:38 +01:00
parent 1fb7a81c63
commit 9fc8c15c28
2 changed files with 26 additions and 10 deletions

View File

@ -0,0 +1,24 @@
import { Box, Image } from '@chakra-ui/react';
import noCoverFallbackImageURL from '~/assets/no-cover.svg';
interface AlbumImageProps {
url?: string;
name?: string;
}
export function AlbumImage({ name, url }: AlbumImageProps) {
const coverAlternativeText = name ? `${name} 的专辑封面` : '专辑封面';
return (
<Box w="160px" h="160px" m="auto">
<Image
border="2px solid"
borderColor="gray.400"
borderRadius="50%"
objectFit="cover"
src={url || noCoverFallbackImageURL}
alt={coverAlternativeText}
/>
</Box>
);
}

View File

@ -4,10 +4,8 @@ import {
Button, Button,
Card, Card,
CardBody, CardBody,
Center,
Collapse, Collapse,
GridItem, GridItem,
Image,
Link, Link,
Text, Text,
useDisclosure, useDisclosure,
@ -19,7 +17,7 @@ import { FileRowResponsiveGrid } from './FileRowResponsiveGrid';
import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice'; import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
import { useAppDispatch } from '~/hooks'; import { useAppDispatch } from '~/hooks';
import { AnimationDefinition } from 'framer-motion'; import { AnimationDefinition } from 'framer-motion';
import noCoverFallbackImageURL from '~/assets/no-cover.svg'; import { AlbumImage } from './AlbumImage';
interface FileRowProps { interface FileRowProps {
id: string; id: string;
@ -68,13 +66,7 @@ export function FileRow({ id, file }: FileRowProps) {
<CardBody> <CardBody>
<FileRowResponsiveGrid> <FileRowResponsiveGrid>
<GridItem area="cover"> <GridItem area="cover">
<Center w="160px" h="160px" m="auto"> <AlbumImage name={metadata?.album} url={metadata?.cover} />
<Image
objectFit="cover"
src={metadata?.cover || noCoverFallbackImageURL}
alt={`${metadata?.album} 的专辑封面`}
/>
</Center>
</GridItem> </GridItem>
<GridItem area="title"> <GridItem area="title">
<Box w="full" as="h4" fontWeight="semibold" mt="1" textAlign={{ base: 'center', md: 'left' }}> <Box w="full" as="h4" fontWeight="semibold" mt="1" textAlign={{ base: 'center', md: 'left' }}>