From 08548d57f6923aa8bd1a5e6707ee4e66194a6941 Mon Sep 17 00:00:00 2001
From: Basile Spaenlehauer <spaenleh@gmail.com>
Date: Wed, 7 Feb 2024 08:48:13 +0100
Subject: [PATCH] fix: improve item thumbnails in grid view (#992)

---
 src/components/main/ItemCard.tsx              |  7 ++++++-
 src/components/table/ItemNameCellRenderer.tsx | 13 +++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/main/ItemCard.tsx b/src/components/main/ItemCard.tsx
index ed75db454..de5da649d 100644
--- 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
index 3c346e9b7..349faf229 100644
--- 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,7 @@ 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)}
       />
     );