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