From 04984b31fd322d63e74fc0d5154d7ff6413990f8 Mon Sep 17 00:00:00 2001
From: Kazuya Hara <iam@kazuyahara.dev>
Date: Sat, 19 Nov 2022 21:33:43 +0900
Subject: [PATCH] feat(web): show extension (#32)

---
 .../components/atoms/aspectRatioMedia/index.tsx    | 14 ++++++++++++++
 .../components/organisms/form/item/index.tsx       |  1 +
 .../components/organisms/list/item/index.tsx       |  7 ++++++-
 .../organisms/sectionList/item/index.tsx           |  1 +
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/web/src/adapters/userInterface/components/atoms/aspectRatioMedia/index.tsx b/web/src/adapters/userInterface/components/atoms/aspectRatioMedia/index.tsx
index 8de3eb9..0e57da1 100644
--- a/web/src/adapters/userInterface/components/atoms/aspectRatioMedia/index.tsx
+++ b/web/src/adapters/userInterface/components/atoms/aspectRatioMedia/index.tsx
@@ -6,6 +6,7 @@ import { Box, BoxProps, Typography } from '@mui/material';
 type Props = Pick<BoxProps, 'borderRadius' | 'sx'> & {
   component: 'img' | 'video';
   duration?: number;
+  extension: string;
   ratio?: number;
   src: string;
 };
@@ -14,6 +15,7 @@ export default function AspectRetioMedia({
   borderRadius,
   component,
   duration,
+  extension,
   ratio = 1 / 1,
   src,
   sx,
@@ -40,6 +42,18 @@ export default function AspectRetioMedia({
         sx={{ objectFit: 'cover', ...sx }}
         width="100%"
       />
+      <Box
+        bgcolor="rgba(0,0,0,0.5)"
+        borderRadius={1}
+        bottom={4}
+        left={8}
+        px={1}
+        position="absolute"
+      >
+        <Typography color="white" fontWeight="bold" variant="caption">
+          {extension.toUpperCase()}
+        </Typography>
+      </Box>
       {duration && (
         <Typography color="white" bottom={4} fontWeight="bold" position="absolute" right={8}>
           {`${`00${Math.floor(duration / 60) % 60}`.slice(-2)}:${`00${duration % 60}`.slice(-2)}`}
diff --git a/web/src/adapters/userInterface/components/organisms/form/item/index.tsx b/web/src/adapters/userInterface/components/organisms/form/item/index.tsx
index 0bfa1cd..08cafe2 100644
--- a/web/src/adapters/userInterface/components/organisms/form/item/index.tsx
+++ b/web/src/adapters/userInterface/components/organisms/form/item/index.tsx
@@ -45,6 +45,7 @@ export default function ItemForm({ loading, onSubmit, sx }: Props) {
             <AspectRetioMedia
               borderRadius={1}
               component={file.type.startsWith('video') ? 'video' : 'img'}
+              extension={file.name.split('.').pop()?.toLowerCase() as string}
               src={URL.createObjectURL(file)}
             />
           </Grid>
diff --git a/web/src/adapters/userInterface/components/organisms/list/item/index.tsx b/web/src/adapters/userInterface/components/organisms/list/item/index.tsx
index f21c828..7650cce 100644
--- a/web/src/adapters/userInterface/components/organisms/list/item/index.tsx
+++ b/web/src/adapters/userInterface/components/organisms/list/item/index.tsx
@@ -28,7 +28,12 @@ export default function ItemList({ items, onSelectItem, selectedItemIds, sx }: P
           {selectedItemIds.includes(item.id) && (
             <CheckCircle sx={{ color: 'white', position: 'absolute', top: 16, right: 8 }} />
           )}
-          <AspectRetioMedia borderRadius={1} component="img" src={item.url} />
+          <AspectRetioMedia
+            borderRadius={1}
+            component="img"
+            extension={item.medium.extension}
+            src={item.url}
+          />
         </Grid>
       ))}
     </Grid>
diff --git a/web/src/adapters/userInterface/components/organisms/sectionList/item/index.tsx b/web/src/adapters/userInterface/components/organisms/sectionList/item/index.tsx
index f9b6512..3f53128 100644
--- a/web/src/adapters/userInterface/components/organisms/sectionList/item/index.tsx
+++ b/web/src/adapters/userInterface/components/organisms/sectionList/item/index.tsx
@@ -41,6 +41,7 @@ export default function ItemSectionList({ items, sx }: Props) {
                   borderRadius={1}
                   component="img"
                   duration={item.medium.metadata?.format?.duration}
+                  extension={item.medium.extension}
                   src={item.url}
                 />
               </Grid>