New staged attachments UI, multiple image attachments per message

ts/components/CaptionEditor.md

@@ -0,0 +1,72 @@
+## Image
+
+```js
+let caption = null;
+
+<div style={{ position: 'relative', width: '100%', height: 500 }}>
+  <CaptionEditor
+    url={util.gifObjectUrl}
+    attachment={{
+      contentType: 'image/jpeg',
+    }}
+    onChangeCaption={caption => console.log('onChangeCaption', caption)}
+    i18n={util.i18n}
+  />
+</div>;
+```
+
+## Image with caption
+
+```js
+let caption =
+  "This is the user-provided caption. We show it overlaid on the image. If it's really long, then it wraps, but it doesn't get too close to the edges of the image.";
+
+<div style={{ position: 'relative', width: '100%', height: 500 }}>
+  <CaptionEditor
+    url="https://placekitten.com/800/600"
+    attachment={{
+      contentType: 'image/jpeg',
+    }}
+    caption={caption}
+    contentType="image/jpeg"
+    onChangeCaption={caption => console.log('onChangeCaption', caption)}
+    i18n={util.i18n}
+  />
+</div>;
+```
+
+## Video
+
+```js
+let caption = null;
+
+<div style={{ position: 'relative', width: '100%', height: 500 }}>
+  <CaptionEditor
+    url="fixtures/pixabay-Soap-Bubble-7141.mp4"
+    attachment={{
+      contentType: 'video/mp4',
+    }}
+    onChangeCaption={caption => console.log('onChangeCaption', caption)}
+    i18n={util.i18n}
+  />
+</div>;
+```
+
+## Video with caption
+
+```js
+let caption =
+  "This is the user-provided caption. We show it overlaid on the image. If it's really long, then it wraps, but it doesn't get too close to the edges of the image.";
+
+<div style={{ position: 'relative', width: '100%', height: 500 }}>
+  <CaptionEditor
+    url="fixtures/pixabay-Soap-Bubble-7141.mp4"
+    attachment={{
+      contentType: 'video/mp4',
+    }}
+    caption={caption}
+    onChangeCaption={caption => console.log('onChangeCaption', caption)}
+    i18n={util.i18n}
+  />
+</div>;
+```

ts/components/CaptionEditor.tsx

@@ -0,0 +1,78 @@
+// tslint:disable:react-a11y-anchors
+
+import React from 'react';
+import * as GoogleChrome from '../util/GoogleChrome';
+
+import { AttachmentType } from './conversation/types';
+
+import { Localizer } from '../types/Util';
+
+interface Props {
+  attachment: AttachmentType;
+  i18n: Localizer;
+  url: string;
+  caption?: string;
+  onChangeCaption?: (caption: string) => void;
+  close?: () => void;
+}
+
+export class CaptionEditor extends React.Component<Props> {
+  public renderObject() {
+    const { url, i18n, attachment } = this.props;
+    const { contentType } = attachment || { contentType: null };
+
+    const isImageTypeSupported = GoogleChrome.isImageTypeSupported(contentType);
+    if (isImageTypeSupported) {
+      return (
+        <img
+          className="module-caption-editor__image"
+          alt={i18n('imageAttachmentAlt')}
+          src={url}
+        />
+      );
+    }
+
+    const isVideoTypeSupported = GoogleChrome.isVideoTypeSupported(contentType);
+    if (isVideoTypeSupported) {
+      return (
+        <video className="module-caption-editor__video" controls={true}>
+          <source src={url} />
+        </video>
+      );
+    }
+
+    return <div className="module-caption-editor__placeholder" />;
+  }
+
+  public render() {
+    const { caption, i18n, close, onChangeCaption } = this.props;
+
+    return (
+      <div className="module-caption-editor">
+        <div
+          role="button"
+          onClick={close}
+          className="module-caption-editor__close-button"
+        />
+        <div className="module-caption-editor__media-container">
+          {this.renderObject()}
+        </div>
+        <div className="module-caption-editor__bottom-bar">
+          <div className="module-caption-editor__add-caption-button" />
+          <input
+            type="text"
+            value={caption || ''}
+            maxLength={200}
+            placeholder={i18n('addACaption')}
+            className="module-caption-editor__caption-input"
+            onChange={event => {
+              if (onChangeCaption) {
+                onChangeCaption(event.target.value);
+              }
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+}

ts/components/conversation/AttachmentList.md

@@ -0,0 +1,114 @@
+### One image
+
+```jsx
+const attachments = [
+  {
+    url: util.gifObjectUrl,
+    contentType: 'image/gif',
+    width: 320,
+    height: 240,
+  },
+];
+
+<AttachmentList
+  attachments={attachments}
+  onClose={() => console.log('onClose')}
+  onClickAttachment={attachment => {
+    console.log('onClickAttachment', attachment);
+  }}
+  onCloseAttachment={attachment => {
+    console.log('onCloseAttachment', attachment);
+  }}
+  i18n={util.i18n}
+/>;
+```
+
+### Four images
+
+```jsx
+const attachments = [
+  {
+    url: util.gifObjectUrl,
+    contentType: 'image/png',
+    width: 320,
+    height: 240,
+  },
+  {
+    url: util.pngObjectUrl,
+    contentType: 'image/png',
+    width: 800,
+    height: 1200,
+  },
+  {
+    url: util.landscapeObjectUrl,
+    contentType: 'image/png',
+    width: 4496,
+    height: 3000,
+  },
+  {
+    url: util.landscapeGreenObjectUrl,
+    contentType: 'image/png',
+    width: 1000,
+    height: 50,
+  },
+];
+
+<div>
+  <AttachmentList
+    attachments={attachments}
+    onClose={() => console.log('onClose')}
+    onClickAttachment={attachment => {
+      console.log('onClickAttachment', attachment);
+    }}
+    onCloseAttachment={attachment => {
+      console.log('onCloseAttachment', attachment);
+    }}
+    i18n={util.i18n}
+  />
+</div>;
+```
+
+### A mix of attachment types
+
+```jsx
+const attachments = [
+  {
+    url: util.gifObjectUrl,
+    contentType: 'image/gif',
+    width: 320,
+    height: 240,
+  },
+  {
+    contentType: 'text/plain',
+    fileName: 'manifesto.txt',
+  },
+  {
+    url: util.pngObjectUrl,
+    contentType: 'image/png',
+    width: 800,
+    height: 1200,
+  },
+];
+
+<div>
+  <AttachmentList
+    attachments={attachments}
+    onClose={() => console.log('onClose')}
+    onClickAttachment={attachment => {
+      console.log('onClickAttachment', attachment);
+    }}
+    onCloseAttachment={attachment => {
+      console.log('onCloseAttachment', attachment);
+    }}
+    i18n={util.i18n}
+  />
+</div>;
+```
+
+### No attachments provided
+
+Nothing is shown if attachment list is empty.
+
+```jsx
+<AttachmentList attachments={[]} i18n={util.i18n} />
+```

ts/components/conversation/AttachmentList.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+// import classNames from 'classnames';
+
+import {
+  isImageTypeSupported,
+  isVideoTypeSupported,
+} from '../../util/GoogleChrome';
+import { AttachmentType } from './types';
+import { Image } from './Image';
+import { StagedGenericAttachment } from './StagedGenericAttachment';
+import { Localizer } from '../../types/Util';
+
+interface Props {
+  attachments: Array<AttachmentType>;
+  i18n: Localizer;
+  // onError: () => void;
+  onClickAttachment: (attachment: AttachmentType) => void;
+  onCloseAttachment: (attachment: AttachmentType) => void;
+  onClose: () => void;
+}
+
+const IMAGE_WIDTH = 120;
+const IMAGE_HEIGHT = 120;
+
+export class AttachmentList extends React.Component<Props> {
+  // tslint:disable-next-line max-func-body-length */
+  public render() {
+    const {
+      attachments,
+      i18n,
+      // onError,
+      onClickAttachment,
+      onCloseAttachment,
+      onClose,
+    } = this.props;
+
+    if (!attachments.length) {
+      return null;
+    }
+
+    return (
+      <div className="module-attachments">
+        {attachments.length > 1 ? (
+          <div className="module-attachments__header">
+            <div
+              role="button"
+              onClick={onClose}
+              className="module-attachments__close-button"
+            />
+          </div>
+        ) : null}
+        <div className="module-attachments__rail">
+          {(attachments || []).map((attachment, index) => {
+            const { contentType } = attachment;
+            if (
+              isImageTypeSupported(contentType) ||
+              isVideoTypeSupported(contentType)
+            ) {
+              return (
+                <Image
+                  key={getUrl(attachment) || attachment.fileName || index}
+                  alt={`TODO: attachment number ${index}`}
+                  i18n={i18n}
+                  attachment={attachment}
+                  softCorners={true}
+                  playIconOverlay={isVideoAttachment(attachment)}
+                  height={IMAGE_HEIGHT}
+                  width={IMAGE_WIDTH}
+                  url={getUrl(attachment)}
+                  closeButton={true}
+                  onClick={onClickAttachment}
+                  onClickClose={onCloseAttachment}
+                />
+              );
+            }
+
+            return (
+              <StagedGenericAttachment
+                key={getUrl(attachment) || attachment.fileName || index}
+                attachment={attachment}
+                i18n={i18n}
+                onClose={onCloseAttachment}
+              />
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+}
+
+export function isVideoAttachment(attachment?: AttachmentType) {
+  return (
+    attachment &&
+    attachment.contentType &&
+    isVideoTypeSupported(attachment.contentType)
+  );
+}
+
+function getUrl(attachment: AttachmentType) {
+  if (attachment.screenshot) {
+    return attachment.screenshot.url;
+  }
+
+  return attachment.url;
+}

ts/components/conversation/Image.md

@@ -77,18 +77,21 @@
       width="199"
       attachment={{ caption: 'dogs playing' }}
       url={util.pngObjectUrl}
+      i18n={util.i18n}
     />
     <Image
       height="149"
       width="149"
       attachment={{ caption: 'dogs playing' }}
       url={util.pngObjectUrl}
+      i18n={util.i18n}
     />
     <Image
       height="99"
       width="99"
       attachment={{ caption: 'dogs playing' }}
       url={util.pngObjectUrl}
+      i18n={util.i18n}
     />
   </div>
   <hr />
@@ -100,6 +103,7 @@
       darkOverlay
       overlayText="+3"
       url={util.pngObjectUrl}
+      i18n={util.i18n}
     />
     <Image
       height="149"
@@ -108,6 +112,7 @@
       darkOverlay
       overlayText="+3"
       url={util.pngObjectUrl}
+      i18n={util.i18n}
     />
     <Image
       height="99"
@@ -116,6 +121,82 @@
       darkOverlay
       overlayText="+3"
       url={util.pngObjectUrl}
+      i18n={util.i18n}
+    />
+  </div>
+</div>
+```
+
+### With top-right X and soft corners
+
+```jsx
+<div>
+  <div>
+    <Image
+      height="200"
+      width="199"
+      closeButton={true}
+      onClick={() => console.log('onClick')}
+      onClickClose={attachment => console.log('onClickClose', attachment)}
+      softCorners={true}
+      url={util.gifObjectUrl}
+      i18n={util.i18n}
+    />
+    <Image
+      height="149"
+      width="149"
+      closeButton={true}
+      onClick={() => console.log('onClick')}
+      onClickClose={attachment => console.log('onClickClose', attachment)}
+      softCorners={true}
+      url={util.gifObjectUrl}
+      i18n={util.i18n}
+    />
+    <Image
+      height="99"
+      width="99"
+      closeButton={true}
+      onClick={() => console.log('onClick')}
+      onClickClose={attachment => console.log('onClickClose', attachment)}
+      softCorners={true}
+      url={util.gifObjectUrl}
+      i18n={util.i18n}
+    />
+  </div>
+  <br />
+  <div>
+    <Image
+      height="200"
+      width="199"
+      closeButton={true}
+      attachment={{ caption: 'dogs playing' }}
+      onClick={() => console.log('onClick')}
+      onClickClose={attachment => console.log('onClickClose', attachment)}
+      softCorners={true}
+      url={util.gifObjectUrl}
+      i18n={util.i18n}
+    />
+    <Image
+      height="149"
+      width="149"
+      closeButton={true}
+      attachment={{ caption: 'dogs playing' }}
+      onClick={() => console.log('onClick')}
+      onClickClose={attachment => console.log('onClickClose', attachment)}
+      softCorners={true}
+      url={util.gifObjectUrl}
+      i18n={util.i18n}
+    />
+    <Image
+      height="99"
+      width="99"
+      closeButton={true}
+      attachment={{ caption: 'dogs playing' }}
+      onClick={() => console.log('onClick')}
+      onClickClose={attachment => console.log('onClickClose', attachment)}
+      softCorners={true}
+      url={util.gifObjectUrl}
+      i18n={util.i18n}
     />
   </div>
 </div>

ts/components/conversation/Image.tsx

@@ -15,24 +15,29 @@ interface Props {
   overlayText?: string;
 
   bottomOverlay?: boolean;
+  closeButton?: boolean;
   curveBottomLeft?: boolean;
   curveBottomRight?: boolean;
   curveTopLeft?: boolean;
   curveTopRight?: boolean;
   darkOverlay?: boolean;
   playIconOverlay?: boolean;
+  softCorners?: boolean;
 
   i18n: Localizer;
   onClick?: (attachment: AttachmentType) => void;
+  onClickClose?: (attachment: AttachmentType) => void;
   onError?: () => void;
 }
 
 export class Image extends React.Component<Props> {
+  // tslint:disable-next-line max-func-body-length cyclomatic-complexity
   public render() {
     const {
       alt,
       attachment,
       bottomOverlay,
+      closeButton,
       curveBottomLeft,
       curveBottomRight,
       curveTopLeft,
@@ -41,9 +46,11 @@ export class Image extends React.Component<Props> {
       height,
       i18n,
       onClick,
+      onClickClose,
       onError,
       overlayText,
       playIconOverlay,
+      softCorners,
       url,
       width,
     } = this.props;
@@ -52,18 +59,20 @@ export class Image extends React.Component<Props> {
 
     return (
       <div
+        role={onClick ? 'button' : undefined}
         onClick={() => {
           if (onClick) {
             onClick(attachment);
           }
         }}
-        role="button"
         className={classNames(
           'module-image',
+          onClick ? 'module-image__with-click-handler' : null,
           curveBottomLeft ? 'module-image--curved-bottom-left' : null,
           curveBottomRight ? 'module-image--curved-bottom-right' : null,
           curveTopLeft ? 'module-image--curved-top-left' : null,
-          curveTopRight ? 'module-image--curved-top-right' : null
+          curveTopRight ? 'module-image--curved-top-right' : null,
+          softCorners ? 'module-image--soft-corners' : null
         )}
       >
         <img
@@ -88,9 +97,22 @@ export class Image extends React.Component<Props> {
             curveTopRight ? 'module-image--curved-top-right' : null,
             curveBottomLeft ? 'module-image--curved-bottom-left' : null,
             curveBottomRight ? 'module-image--curved-bottom-right' : null,
+            softCorners ? 'module-image--soft-corners' : null,
             darkOverlay ? 'module-image__border-overlay--dark' : null
           )}
         />
+        {closeButton ? (
+          <div
+            role="button"
+            onClick={(e: React.MouseEvent<{}>) => {
+              e.stopPropagation();
+              if (onClickClose) {
+                onClickClose(attachment);
+              }
+            }}
+            className="module-image__close-button"
+          />
+        ) : null}
         {bottomOverlay ? (
           <div
             className={classNames(

ts/components/conversation/ImageGrid.tsx

@@ -24,7 +24,7 @@ interface Props {
 const MAX_WIDTH = 300;
 const MAX_HEIGHT = MAX_WIDTH * 1.5;
 const MIN_WIDTH = 200;
-const MIN_HEIGHT = 25;
+const MIN_HEIGHT = 50;
 
 export class ImageGrid extends React.Component<Props> {
   // tslint:disable-next-line max-func-body-length */

ts/components/conversation/Message.tsx

@@ -79,52 +79,6 @@ interface State {
   imageBroken: boolean;
 }
 
-function isAudio(attachments?: Array<AttachmentType>) {
-  return (
-    attachments &&
-    attachments[0] &&
-    attachments[0].contentType &&
-    MIME.isAudio(attachments[0].contentType)
-  );
-}
-
-function canDisplayImage(attachments?: Array<AttachmentType>) {
-  const { height, width } =
-    attachments && attachments[0] ? attachments[0] : { height: 0, width: 0 };
-
-  return (
-    height &&
-    height > 0 &&
-    height <= 4096 &&
-    width &&
-    width > 0 &&
-    width <= 4096
-  );
-}
-
-function getExtension({
-  fileName,
-  contentType,
-}: {
-  fileName: string;
-  contentType: MIME.MIMEType;
-}): string | null {
-  if (fileName && fileName.indexOf('.') >= 0) {
-    const lastPeriod = fileName.lastIndexOf('.');
-    const extension = fileName.slice(lastPeriod + 1);
-    if (extension.length) {
-      return extension;
-    }
-  }
-
-  const slash = contentType.indexOf('/');
-  if (slash >= 0) {
-    return contentType.slice(slash + 1);
-  }
-
-  return null;
-}
-
 const EXPIRATION_CHECK_MINIMUM = 2000;
 const EXPIRED_DELAY = 600;
 
@@ -847,3 +801,49 @@ export class Message extends React.Component<Props, State> {
     );
   }
 }
+
+export function getExtension({
+  fileName,
+  contentType,
+}: {
+  fileName: string;
+  contentType: MIME.MIMEType;
+}): string | null {
+  if (fileName && fileName.indexOf('.') >= 0) {
+    const lastPeriod = fileName.lastIndexOf('.');
+    const extension = fileName.slice(lastPeriod + 1);
+    if (extension.length) {
+      return extension;
+    }
+  }
+
+  const slash = contentType.indexOf('/');
+  if (slash >= 0) {
+    return contentType.slice(slash + 1);
+  }
+
+  return null;
+}
+
+function isAudio(attachments?: Array<AttachmentType>) {
+  return (
+    attachments &&
+    attachments[0] &&
+    attachments[0].contentType &&
+    MIME.isAudio(attachments[0].contentType)
+  );
+}
+
+function canDisplayImage(attachments?: Array<AttachmentType>) {
+  const { height, width } =
+    attachments && attachments[0] ? attachments[0] : { height: 0, width: 0 };
+
+  return (
+    height &&
+    height > 0 &&
+    height <= 4096 &&
+    width &&
+    width > 0 &&
+    width <= 4096
+  );
+}

ts/components/conversation/StagedGenericAttachment.md

@@ -0,0 +1,44 @@
+Text file
+
+```js
+const attachment = {
+  contentType: 'text/plain',
+  fileName: 'manifesto.txt',
+};
+
+<StagedGenericAttachment
+  attachment={attachment}
+  i18n={util.i18n}
+  onClose={attachment => console.log('onClose', attachment)}
+/>;
+```
+
+File with long name
+
+```js
+const attachment = {
+  contentType: 'text/plain',
+  fileName: 'this-is-my-very-important-manifesto-you-must-read-it.txt',
+};
+
+<StagedGenericAttachment
+  attachment={attachment}
+  i18n={util.i18n}
+  onClose={attachment => console.log('onClose', attachment)}
+/>;
+```
+
+File with long extension
+
+```js
+const attachment = {
+  contentType: 'text/plain',
+  fileName: 'manifesto.reallylongtxt',
+};
+
+<StagedGenericAttachment
+  attachment={attachment}
+  i18n={util.i18n}
+  onClose={attachment => console.log('onClose', attachment)}
+/>;
+```

ts/components/conversation/StagedGenericAttachment.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { getExtension } from './Message';
+
+import { Localizer } from '../../types/Util';
+import { AttachmentType } from './types';
+
+interface Props {
+  attachment: AttachmentType;
+  onClose: (attachment: AttachmentType) => void;
+  i18n: Localizer;
+}
+
+export class StagedGenericAttachment extends React.Component<Props> {
+  public render() {
+    const { attachment, onClose } = this.props;
+    const { fileName, contentType } = attachment;
+    const extension = getExtension({ contentType, fileName });
+
+    return (
+      <div className="module-staged-generic-attachment">
+        <div
+          className="module-staged-generic-attachment__close-button"
+          role="button"
+          onClick={() => {
+            if (onClose) {
+              onClose(attachment);
+            }
+          }}
+        />
+        <div className="module-staged-generic-attachment__icon">
+          {extension ? (
+            <div className="module-staged-generic-attachment__icon__extension">
+              {extension}
+            </div>
+          ) : null}
+        </div>
+        <div className="module-staged-generic-attachment__filename">
+          {fileName}
+        </div>
+      </div>
+    );
+  }
+}