New staged attachments UI, multiple image attachments per message

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>
+    );
+  }
+}