Move left pane entirely to React

ts/components/conversation/ImageGrid.tsx

@@ -2,12 +2,18 @@ import React from 'react';
 import classNames from 'classnames';
 
 import {
-  isImageTypeSupported,
-  isVideoTypeSupported,
-} from '../../util/GoogleChrome';
-import { AttachmentType } from './types';
+  areAllAttachmentsVisual,
+  AttachmentType,
+  getAlt,
+  getImageDimensions,
+  getThumbnailUrl,
+  getUrl,
+  isVideoAttachment,
+} from '../../types/Attachment';
+
 import { Image } from './Image';
-import { Localizer } from '../../types/Util';
+
+import { LocalizerType } from '../../types/Util';
 
 interface Props {
   attachments: Array<AttachmentType>;
@@ -15,17 +21,12 @@ interface Props {
   withContentBelow?: boolean;
   bottomOverlay?: boolean;
 
-  i18n: Localizer;
+  i18n: LocalizerType;
 
   onError: () => void;
   onClickAttachment?: (attachment: AttachmentType) => void;
 }
 
-const MAX_WIDTH = 300;
-const MAX_HEIGHT = MAX_WIDTH * 1.5;
-const MIN_WIDTH = 200;
-const MIN_HEIGHT = 50;
-
 export class ImageGrid extends React.Component<Props> {
   // tslint:disable-next-line max-func-body-length */
   public render() {
@@ -46,6 +47,8 @@ export class ImageGrid extends React.Component<Props> {
     const curveBottomLeft = curveBottom;
     const curveBottomRight = curveBottom;
 
+    const withBottomOverlay = Boolean(bottomOverlay && curveBottom);
+
     if (!attachments || !attachments.length) {
       return null;
     }
@@ -63,7 +66,7 @@ export class ImageGrid extends React.Component<Props> {
           <Image
             alt={getAlt(attachments[0], i18n)}
             i18n={i18n}
-            bottomOverlay={bottomOverlay && curveBottom}
+            bottomOverlay={withBottomOverlay}
             curveTopLeft={curveTopLeft}
             curveTopRight={curveTopRight}
             curveBottomLeft={curveBottomLeft}
@@ -87,7 +90,7 @@ export class ImageGrid extends React.Component<Props> {
             alt={getAlt(attachments[0], i18n)}
             i18n={i18n}
             attachment={attachments[0]}
-            bottomOverlay={bottomOverlay && curveBottom}
+            bottomOverlay={withBottomOverlay}
             curveTopLeft={curveTopLeft}
             curveBottomLeft={curveBottomLeft}
             playIconOverlay={isVideoAttachment(attachments[0])}
@@ -100,7 +103,7 @@ export class ImageGrid extends React.Component<Props> {
           <Image
             alt={getAlt(attachments[1], i18n)}
             i18n={i18n}
-            bottomOverlay={bottomOverlay && curveBottom}
+            bottomOverlay={withBottomOverlay}
             curveTopRight={curveTopRight}
             curveBottomRight={curveBottomRight}
             playIconOverlay={isVideoAttachment(attachments[1])}
@@ -121,7 +124,7 @@ export class ImageGrid extends React.Component<Props> {
           <Image
             alt={getAlt(attachments[0], i18n)}
             i18n={i18n}
-            bottomOverlay={bottomOverlay && curveBottom}
+            bottomOverlay={withBottomOverlay}
             curveTopLeft={curveTopLeft}
             curveBottomLeft={curveBottomLeft}
             attachment={attachments[0]}
@@ -148,7 +151,7 @@ export class ImageGrid extends React.Component<Props> {
             <Image
               alt={getAlt(attachments[2], i18n)}
               i18n={i18n}
-              bottomOverlay={bottomOverlay && curveBottom}
+              bottomOverlay={withBottomOverlay}
               curveBottomRight={curveBottomRight}
               height={99}
               width={99}
@@ -197,7 +200,7 @@ export class ImageGrid extends React.Component<Props> {
               <Image
                 alt={getAlt(attachments[2], i18n)}
                 i18n={i18n}
-                bottomOverlay={bottomOverlay && curveBottom}
+                bottomOverlay={withBottomOverlay}
                 curveBottomLeft={curveBottomLeft}
                 playIconOverlay={isVideoAttachment(attachments[2])}
                 height={149}
@@ -210,7 +213,7 @@ export class ImageGrid extends React.Component<Props> {
               <Image
                 alt={getAlt(attachments[3], i18n)}
                 i18n={i18n}
-                bottomOverlay={bottomOverlay && curveBottom}
+                bottomOverlay={withBottomOverlay}
                 curveBottomRight={curveBottomRight}
                 playIconOverlay={isVideoAttachment(attachments[3])}
                 height={149}
@@ -226,6 +229,11 @@ export class ImageGrid extends React.Component<Props> {
       );
     }
 
+    const moreMessagesOverlay = attachments.length > 5;
+    const moreMessagesOverlayText = moreMessagesOverlay
+      ? `+${attachments.length - 5}`
+      : undefined;
+
     return (
       <div className="module-image-grid">
         <div className="module-image-grid__column">
@@ -259,7 +267,7 @@ export class ImageGrid extends React.Component<Props> {
             <Image
               alt={getAlt(attachments[2], i18n)}
               i18n={i18n}
-              bottomOverlay={bottomOverlay && curveBottom}
+              bottomOverlay={withBottomOverlay}
               curveBottomLeft={curveBottomLeft}
               playIconOverlay={isVideoAttachment(attachments[2])}
               height={99}
@@ -272,7 +280,7 @@ export class ImageGrid extends React.Component<Props> {
             <Image
               alt={getAlt(attachments[3], i18n)}
               i18n={i18n}
-              bottomOverlay={bottomOverlay && curveBottom}
+              bottomOverlay={withBottomOverlay}
               playIconOverlay={isVideoAttachment(attachments[3])}
               height={99}
               width={98}
@@ -284,17 +292,13 @@ export class ImageGrid extends React.Component<Props> {
             <Image
               alt={getAlt(attachments[4], i18n)}
               i18n={i18n}
-              bottomOverlay={bottomOverlay && curveBottom}
+              bottomOverlay={withBottomOverlay}
               curveBottomRight={curveBottomRight}
               playIconOverlay={isVideoAttachment(attachments[4])}
               height={99}
               width={99}
-              darkOverlay={attachments.length > 5}
-              overlayText={
-                attachments.length > 5
-                  ? `+${attachments.length - 5}`
-                  : undefined
-              }
+              darkOverlay={moreMessagesOverlay}
+              overlayText={moreMessagesOverlayText}
               attachment={attachments[4]}
               url={getThumbnailUrl(attachments[4])}
               onClick={onClickAttachment}
@@ -306,148 +310,3 @@ 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;
-  }
-
-  return attachment.url;
-}
-
-export function isImage(attachments?: Array<AttachmentType>) {
-  return (
-    attachments &&
-    attachments[0] &&
-    attachments[0].contentType &&
-    isImageTypeSupported(attachments[0].contentType)
-  );
-}
-
-export function isImageAttachment(attachment: AttachmentType) {
-  return (
-    attachment &&
-    attachment.contentType &&
-    isImageTypeSupported(attachment.contentType)
-  );
-}
-export function hasImage(attachments?: Array<AttachmentType>) {
-  return (
-    attachments &&
-    attachments[0] &&
-    (attachments[0].url || attachments[0].pending)
-  );
-}
-
-export function isVideo(attachments?: Array<AttachmentType>) {
-  return attachments && isVideoAttachment(attachments[0]);
-}
-
-export function isVideoAttachment(attachment?: AttachmentType) {
-  return (
-    attachment &&
-    attachment.contentType &&
-    isVideoTypeSupported(attachment.contentType)
-  );
-}
-
-export function hasVideoScreenshot(attachments?: Array<AttachmentType>) {
-  const firstAttachment = attachments ? attachments[0] : null;
-
-  return (
-    firstAttachment &&
-    firstAttachment.screenshot &&
-    firstAttachment.screenshot.url
-  );
-}
-
-type DimensionsType = {
-  height: number;
-  width: number;
-};
-
-export function getImageDimensions(attachment: AttachmentType): DimensionsType {
-  const { height, width } = attachment;
-  if (!height || !width) {
-    return {
-      height: MIN_HEIGHT,
-      width: MIN_WIDTH,
-    };
-  }
-
-  const aspectRatio = height / width;
-  const targetWidth = Math.max(Math.min(MAX_WIDTH, width), MIN_WIDTH);
-  const candidateHeight = Math.round(targetWidth * aspectRatio);
-
-  return {
-    width: targetWidth,
-    height: Math.max(Math.min(MAX_HEIGHT, candidateHeight), MIN_HEIGHT),
-  };
-}
-
-export function areAllAttachmentsVisual(
-  attachments?: Array<AttachmentType>
-): boolean {
-  if (!attachments) {
-    return false;
-  }
-
-  const max = attachments.length;
-  for (let i = 0; i < max; i += 1) {
-    const attachment = attachments[i];
-    if (!isImageAttachment(attachment) && !isVideoAttachment(attachment)) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-export function getGridDimensions(
-  attachments?: Array<AttachmentType>
-): null | DimensionsType {
-  if (!attachments || !attachments.length) {
-    return null;
-  }
-
-  if (!isImage(attachments) && !isVideo(attachments)) {
-    return null;
-  }
-
-  if (attachments.length === 1) {
-    return getImageDimensions(attachments[0]);
-  }
-
-  if (attachments.length === 2) {
-    return {
-      height: 150,
-      width: 300,
-    };
-  }
-
-  if (attachments.length === 4) {
-    return {
-      height: 300,
-      width: 300,
-    };
-  }
-
-  return {
-    height: 200,
-    width: 300,
-  };
-}
-
-export function getAlt(attachment: AttachmentType, i18n: Localizer): string {
-  return isVideoAttachment(attachment)
-    ? i18n('videoAttachmentAlt')
-    : i18n('imageAttachmentAlt');
-}