make attacments the same size that they are displayed on the UI

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 (

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}
         />

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';

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