feat: rounded album cover image
This commit is contained in:
parent
1fb7a81c63
commit
9fc8c15c28
24
src/features/file-listing/AlbumImage.tsx
Normal file
24
src/features/file-listing/AlbumImage.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
@ -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' }}>
|
||||||
|
Loading…
Reference in New Issue
Block a user