Use thumbnails for smaller cells in image grids

ts/components/conversation/ImageGrid.tsx

@@ -93,7 +93,7 @@ export class ImageGrid extends React.Component<Props> {
             playIconOverlay={isVideoAttachment(attachments[0])}
             height={149}
             width={149}
-            url={getUrl(attachments[0])}
+            url={getThumbnailUrl(attachments[0])}
             onClick={onClickAttachment}
             onError={onError}
           />
@@ -107,7 +107,7 @@ export class ImageGrid extends React.Component<Props> {
             height={149}
             width={149}
             attachment={attachments[1]}
-            url={getUrl(attachments[1])}
+            url={getThumbnailUrl(attachments[1])}
             onClick={onClickAttachment}
             onError={onError}
           />
@@ -141,7 +141,7 @@ export class ImageGrid extends React.Component<Props> {
               width={99}
               attachment={attachments[1]}
               playIconOverlay={isVideoAttachment(attachments[1])}
-              url={getUrl(attachments[1])}
+              url={getThumbnailUrl(attachments[1])}
               onClick={onClickAttachment}
               onError={onError}
             />
@@ -154,7 +154,7 @@ export class ImageGrid extends React.Component<Props> {
               width={99}
               attachment={attachments[2]}
               playIconOverlay={isVideoAttachment(attachments[2])}
-              url={getUrl(attachments[2])}
+              url={getThumbnailUrl(attachments[2])}
               onClick={onClickAttachment}
               onError={onError}
             />
@@ -176,7 +176,7 @@ export class ImageGrid extends React.Component<Props> {
                 playIconOverlay={isVideoAttachment(attachments[0])}
                 height={149}
                 width={149}
-                url={getUrl(attachments[0])}
+                url={getThumbnailUrl(attachments[0])}
                 onClick={onClickAttachment}
                 onError={onError}
               />
@@ -188,7 +188,7 @@ export class ImageGrid extends React.Component<Props> {
                 height={149}
                 width={149}
                 attachment={attachments[1]}
-                url={getUrl(attachments[1])}
+                url={getThumbnailUrl(attachments[1])}
                 onClick={onClickAttachment}
                 onError={onError}
               />
@@ -203,7 +203,7 @@ export class ImageGrid extends React.Component<Props> {
                 height={149}
                 width={149}
                 attachment={attachments[2]}
-                url={getUrl(attachments[2])}
+                url={getThumbnailUrl(attachments[2])}
                 onClick={onClickAttachment}
                 onError={onError}
               />
@@ -216,7 +216,7 @@ export class ImageGrid extends React.Component<Props> {
                 height={149}
                 width={149}
                 attachment={attachments[3]}
-                url={getUrl(attachments[3])}
+                url={getThumbnailUrl(attachments[3])}
                 onClick={onClickAttachment}
                 onError={onError}
               />
@@ -238,7 +238,7 @@ export class ImageGrid extends React.Component<Props> {
               playIconOverlay={isVideoAttachment(attachments[0])}
               height={149}
               width={149}
-              url={getUrl(attachments[0])}
+              url={getThumbnailUrl(attachments[0])}
               onClick={onClickAttachment}
               onError={onError}
             />
@@ -250,7 +250,7 @@ export class ImageGrid extends React.Component<Props> {
               height={149}
               width={149}
               attachment={attachments[1]}
-              url={getUrl(attachments[1])}
+              url={getThumbnailUrl(attachments[1])}
               onClick={onClickAttachment}
               onError={onError}
             />
@@ -265,7 +265,7 @@ export class ImageGrid extends React.Component<Props> {
               height={99}
               width={99}
               attachment={attachments[2]}
-              url={getUrl(attachments[2])}
+              url={getThumbnailUrl(attachments[2])}
               onClick={onClickAttachment}
               onError={onError}
             />
@@ -277,7 +277,7 @@ export class ImageGrid extends React.Component<Props> {
               height={99}
               width={98}
               attachment={attachments[3]}
-              url={getUrl(attachments[3])}
+              url={getThumbnailUrl(attachments[3])}
               onClick={onClickAttachment}
               onError={onError}
             />
@@ -296,7 +296,7 @@ export class ImageGrid extends React.Component<Props> {
                   : undefined
               }
               attachment={attachments[4]}
-              url={getUrl(attachments[4])}
+              url={getThumbnailUrl(attachments[4])}
               onClick={onClickAttachment}
               onError={onError}
             />
@@ -307,6 +307,14 @@ export class ImageGrid extends React.Component<Props> {
   }
 }
 
+function getThumbnailUrl(attachment: AttachmentType) {
+  if (attachment.thumbnail) {
+    return attachment.thumbnail.url;
+  }
+
+  return getUrl(attachment);
+}
+
 function getUrl(attachment: AttachmentType) {
   if (attachment.screenshot) {
     return attachment.screenshot.url;