From 6e4e9b4622288c125cdcefdbadfc0907d19fb0e6 Mon Sep 17 00:00:00 2001
From: Romaric Mourgues <rmourgues@linagora.com>
Date: Tue, 4 Oct 2022 16:31:26 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=8E=20Increase=20thumbnails=20size=20(?=
 =?UTF-8?q?#2556)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/components/file/file-component.tsx    | 27 +++++++++++++++++--
 .../src/app/components/file/file.scss         |  5 ++--
 .../message/parts/MessageAttachments.tsx      |  3 ++-
 .../parts/PossiblyPendingAttachment.tsx       |  4 ++-
 4 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/twake/frontend/src/app/components/file/file-component.tsx b/twake/frontend/src/app/components/file/file-component.tsx
index e89e1604e4..88dfeecdf9 100644
--- a/twake/frontend/src/app/components/file/file-component.tsx
+++ b/twake/frontend/src/app/components/file/file-component.tsx
@@ -30,6 +30,7 @@ type PropsType = {
   onRemove?: () => void;
   className?: string;
   large?: boolean;
+  xlarge?: boolean;
 };
 
 export default ({
@@ -43,6 +44,7 @@ export default ({
   status,
   onRemove,
   large,
+  xlarge,
 }: PropsType) => {
   const { companyId, workspaceId } = RouterService.getStateFromRoute();
   const [file, setFile] = useState<DataFileType>(_file);
@@ -109,13 +111,34 @@ export default ({
     }
   };
 
-  const computedWidth = file.thumbnail_ratio * 200;
+  let computedHeight = 200;
+  let computedWidth = file.thumbnail_ratio * 200;
   const isMediaFile = ['image', 'video'].includes(file.type);
 
+  if (xlarge) {
+    computedWidth = Math.max(
+      160,
+      Math.min(
+        Math.min(messageFile.metadata?.thumbnails?.[0]?.width || 600, 600),
+        file.thumbnail_ratio * document.body.clientHeight * 0.5,
+      ),
+    );
+    computedHeight = Math.max(
+      200,
+      Math.min(
+        Math.min(
+          messageFile.metadata?.thumbnails?.[0]?.height || 10000,
+          document.body.clientHeight * 0.5,
+        ),
+        computedWidth / file.thumbnail_ratio,
+      ),
+    );
+  }
+
   return (
     <div
       className={classNames(classNameArguments)}
-      style={large ? { width: computedWidth } : {}}
+      style={large ? { width: computedWidth, height: computedHeight } : {}}
       onClick={() => companyId && onClickFile()}
     >
       {large && <LargePreview file={file} />}
diff --git a/twake/frontend/src/app/components/file/file.scss b/twake/frontend/src/app/components/file/file.scss
index 4680db91e3..8c1c5432ab 100644
--- a/twake/frontend/src/app/components/file/file.scss
+++ b/twake/frontend/src/app/components/file/file.scss
@@ -14,8 +14,9 @@
   }
 
   &.large-view {
-    height: 200px;
-    max-width: 400px;
+    min-height: 200px;
+    max-height: 500px;
+    max-width: 90%;
     min-width: 160px;
     position: relative;
 
diff --git a/twake/frontend/src/app/views/applications/messages/message/parts/MessageAttachments.tsx b/twake/frontend/src/app/views/applications/messages/message/parts/MessageAttachments.tsx
index 8e87b28b68..665650d071 100644
--- a/twake/frontend/src/app/views/applications/messages/message/parts/MessageAttachments.tsx
+++ b/twake/frontend/src/app/views/applications/messages/message/parts/MessageAttachments.tsx
@@ -37,13 +37,14 @@ export default () => {
             key={file.metadata?.external_id || file.id}
             type={'message'}
             file={file}
+            xlarge={files.length === 1 && (files[0].metadata?.thumbnails?.length || 0) > 0}
             large={
               //If all the documents are images
               files.length <= 6 &&
               files.filter(
                 file =>
                   file.metadata?.source === 'internal' &&
-                  (file.metadata?.thumbnails?.length || 0) > 0
+                  (file.metadata?.thumbnails?.length || 0) > 0,
               ).length === files.length
             }
             onRemove={() => setFiles(files.filter(f => f.id !== file.id))}
diff --git a/twake/frontend/src/app/views/applications/messages/message/parts/PossiblyPendingAttachment.tsx b/twake/frontend/src/app/views/applications/messages/message/parts/PossiblyPendingAttachment.tsx
index a65eda47c8..8ceb95b22c 100644
--- a/twake/frontend/src/app/views/applications/messages/message/parts/PossiblyPendingAttachment.tsx
+++ b/twake/frontend/src/app/views/applications/messages/message/parts/PossiblyPendingAttachment.tsx
@@ -11,9 +11,10 @@ type PropsType = {
   onRemove?: () => void;
   type: 'input' | 'message';
   large?: boolean;
+  xlarge?: boolean;
 };
 
-export default ({ file, onRemove, type, large }: PropsType) => {
+export default ({ file, onRemove, type, large, xlarge }: PropsType) => {
   const { getOnePendingFile } = useUpload();
 
   const id =
@@ -68,6 +69,7 @@ export default ({ file, onRemove, type, large }: PropsType) => {
       file={formatedFile}
       messageFile={file}
       large={large}
+      xlarge={xlarge}
       status={status}
       progress={progress}
       onRemove={onRemove}