From a9869315697477aad6249ca77df34461dbd349c5 Mon Sep 17 00:00:00 2001
From: audric <audric@loki.network>
Date: Fri, 27 Aug 2021 15:18:44 +1000
Subject: [PATCH] make attacments the same size that they are displayed on the
 UI

---
 js/modules/types/attachment.js                 | 2 +-
 ts/components/conversation/ImageGrid.tsx       | 5 ++---
 ts/components/conversation/ReadableMessage.tsx | 2 +-
 ts/types/Attachment.ts                         | 8 ++++----
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/js/modules/types/attachment.js b/js/modules/types/attachment.js
index 84253b8fa..740ad286c 100644
--- a/js/modules/types/attachment.js
+++ b/js/modules/types/attachment.js
@@ -202,7 +202,7 @@ exports.save = AttachmentTS.save;
 exports.getFileExtension = AttachmentTS.getFileExtension;
 exports.arrayBufferFromFile = AttachmentTS.arrayBufferFromFile;
 
-const THUMBNAIL_SIZE = 150;
+const THUMBNAIL_SIZE = 200;
 const THUMBNAIL_CONTENT_TYPE = 'image/png';
 
 exports.captureDimensionsAndScreenshot = async (
diff --git a/ts/components/conversation/ImageGrid.tsx b/ts/components/conversation/ImageGrid.tsx
index 51017533e..ad6d1d070 100644
--- a/ts/components/conversation/ImageGrid.tsx
+++ b/ts/components/conversation/ImageGrid.tsx
@@ -8,7 +8,6 @@ import {
   getAlt,
   getImageDimensions,
   getThumbnailUrl,
-  getUrl,
   isVideoAttachment,
 } from '../../types/Attachment';
 
@@ -44,7 +43,7 @@ export const ImageGrid = (props: Props) => {
           playIconOverlay={isVideoAttachment(attachments[0])}
           height={height}
           width={width}
-          url={getUrl(attachments[0])}
+          url={getThumbnailUrl(attachments[0])}
           onClick={onClickAttachment}
           onError={onError}
         />
@@ -91,7 +90,7 @@ export const ImageGrid = (props: Props) => {
           playIconOverlay={isVideoAttachment(attachments[0])}
           height={200}
           width={199}
-          url={getUrl(attachments[0])}
+          url={getThumbnailUrl(attachments[0])}
           onClick={onClickAttachment}
           onError={onError}
         />
diff --git a/ts/components/conversation/ReadableMessage.tsx b/ts/components/conversation/ReadableMessage.tsx
index 614e6ca86..923a62336 100644
--- a/ts/components/conversation/ReadableMessage.tsx
+++ b/ts/components/conversation/ReadableMessage.tsx
@@ -1,5 +1,5 @@
 import _, { noop } from 'lodash';
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { InView } from 'react-intersection-observer';
 import { useDispatch, useSelector } from 'react-redux';
 import { getMessageById } from '../../data/data';
diff --git a/ts/types/Attachment.ts b/ts/types/Attachment.ts
index 38bf4fb51..c573d2639 100644
--- a/ts/types/Attachment.ts
+++ b/ts/types/Attachment.ts
@@ -8,10 +8,10 @@ import { SignalService } from '../protobuf';
 import { isImageTypeSupported, isVideoTypeSupported } from '../util/GoogleChrome';
 import { fromHexToArray } from '../session/utils/String';
 
-const MAX_WIDTH = 300;
-const MAX_HEIGHT = MAX_WIDTH * 1.5;
-const MIN_WIDTH = 200;
-const MIN_HEIGHT = 50;
+const MAX_WIDTH = 200;
+const MAX_HEIGHT = MAX_WIDTH;
+const MIN_WIDTH = MAX_WIDTH;
+const MIN_HEIGHT = MAX_WIDTH;
 
 // Used for display