fix: make thumbnails nice in grid view

graasp · Feb 5, 2024 · 7cf0f84 · 7cf0f84
1 parent 0abb860
commit 7cf0f84
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/src/components/main/ItemCard.tsx b/src/components/main/ItemCard.tsx
@@ -6,6 +6,7 @@ import {
   ItemMembership,
   ItemType,
   PermissionLevel,
+  ThumbnailSize,
 } from '@graasp/sdk';
 import { Card as GraaspCard, Thumbnail } from '@graasp/ui';
 
@@ -53,7 +54,10 @@ const ItemComponent = ({
   canMove = true,
 }: Props): JSX.Element => {
   const { id, name } = item;
-  const { data: thumbnailUrl, isLoading } = hooks.useItemThumbnailUrl({ id });
+  const { data: thumbnailUrl, isLoading } = hooks.useItemThumbnailUrl({
+    id,
+    size: ThumbnailSize.Medium,
+  });
 
   const alt = name;
   const defaultValueComponent = (
@@ -80,6 +84,7 @@ const ItemComponent = ({
       url={thumbnailUrl ?? linkUrl}
       alt={alt}
       defaultComponent={defaultValueComponent}
+      sx={{ width: '100%', height: '100%', objectFit: 'cover' }}
     />
   );
 

diff --git a/src/components/table/ItemNameCellRenderer.tsx b/src/components/table/ItemNameCellRenderer.tsx
@@ -1,6 +1,11 @@
 import { Box, Typography } from '@mui/material';
 
-import { DiscriminatedItem, ItemType, getEmbeddedLinkExtra } from '@graasp/sdk';
+import {
+  DiscriminatedItem,
+  ItemType,
+  getEmbeddedLinkExtra,
+  getMimetype,
+} from '@graasp/sdk';
 import { ItemIcon, Thumbnail } from '@graasp/ui';
 
 import { hooks } from '../../config/queryClient';
@@ -25,11 +30,8 @@ const ItemNameCellRenderer = (
         type={item.type}
         iconSrc={iconSrc}
         alt={alt}
-        extra={
-          item.type === ItemType.S3_FILE || item.type === ItemType.LOCAL_FILE
-            ? item.extra
-            : undefined
-        }
+        mimetype={getMimetype(item.extra)}
+        sx={{ border: '2px solid red' }}
       />
     );