From 3f458e9f463849c4f4c07b7e223b843a7b9b11cb Mon Sep 17 00:00:00 2001
From: Jixun Wu <jixun.moe@gmail.com>
Date: Sun, 21 May 2023 18:16:38 +0100
Subject: [PATCH] feat: rounded album cover image

---
 src/features/file-listing/AlbumImage.tsx | 24 ++++++++++++++++++++++++
 src/features/file-listing/FileRow.tsx    | 12 ++----------
 2 files changed, 26 insertions(+), 10 deletions(-)
 create mode 100644 src/features/file-listing/AlbumImage.tsx

diff --git a/src/features/file-listing/AlbumImage.tsx b/src/features/file-listing/AlbumImage.tsx
new file mode 100644
index 0000000..22c8dd2
--- /dev/null
+++ b/src/features/file-listing/AlbumImage.tsx
@@ -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>
+  );
+}
diff --git a/src/features/file-listing/FileRow.tsx b/src/features/file-listing/FileRow.tsx
index 1355185..c280c8c 100644
--- a/src/features/file-listing/FileRow.tsx
+++ b/src/features/file-listing/FileRow.tsx
@@ -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' }}>