feat(web): show extension (#32)

KazuyaHara · Nov 19, 2022 · 04984b3 · 04984b3
1 parent d9db9a4
commit 04984b3
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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>