diff --git a/ts/components/LightboxGallery.md b/ts/components/LightboxGallery.md
index 46b2ff5188..ded53f090a 100644
--- a/ts/components/LightboxGallery.md
+++ b/ts/components/LightboxGallery.md
@@ -1,44 +1,64 @@
```js
const noop = () => {};
-const messages = [
+const mediaItems = [
{
objectURL: 'https://placekitten.com/799/600',
- attachments: [{ contentType: 'image/jpeg' }],
+ contentType: 'image/jpeg',
+ message: { id: 1 },
+ attachment: {
+ contentType: 'image/jpeg',
+ caption:
+ "This is a really long caption. Because the user had a lot to say. You know, it's very important to provide full context when sending an image. You don't want to make the wrong impression.",
+ },
},
{
objectURL: 'https://placekitten.com/900/600',
- attachments: [{ contentType: 'image/jpeg' }],
+ contentType: 'image/jpeg',
+ message: { id: 2 },
+ attachment: { contentType: 'image/jpeg' },
},
// Unsupported image type
{
objectURL: 'foo.tif',
- attachments: [{ contentType: 'image/tiff' }],
+ contentType: 'image/tiff',
+ message: { id: 3 },
+ attachment: { contentType: 'image/tiff' },
},
// Video
{
objectURL: util.mp4ObjectUrl,
- attachments: [{ contentType: 'video/mp4' }],
+ contentType: 'video/mp4',
+ message: { id: 4 },
+ attachment: { contentType: 'video/mp4' },
},
{
objectURL: 'https://placekitten.com/980/800',
- attachments: [{ contentType: 'image/jpeg' }],
+ contentType: 'image/jpeg',
+ message: { id: 5 },
+ attachment: { contentType: 'image/jpeg' },
},
{
objectURL: 'https://placekitten.com/656/540',
- attachments: [{ contentType: 'image/jpeg' }],
+ contentType: 'image/jpeg',
+ message: { id: 6 },
+ attachment: { contentType: 'image/jpeg' },
},
{
objectURL: 'https://placekitten.com/762/400',
- attachments: [{ contentType: 'image/jpeg' }],
+ contentType: 'image/jpeg',
+ message: { id: 7 },
+ attachment: { contentType: 'image/jpeg' },
},
{
objectURL: 'https://placekitten.com/920/620',
- attachments: [{ contentType: 'image/jpeg' }],
+ contentType: 'image/jpeg',
+ message: { id: 8 },
+ attachment: { contentType: 'image/jpeg' },
},
];
-
+
;
```
diff --git a/ts/components/LightboxGallery.tsx b/ts/components/LightboxGallery.tsx
index 7d83c34928..e3ebea472e 100644
--- a/ts/components/LightboxGallery.tsx
+++ b/ts/components/LightboxGallery.tsx
@@ -6,19 +6,26 @@ import React from 'react';
import * as MIME from '../types/MIME';
import { Lightbox } from './Lightbox';
import { Message } from './conversation/media-gallery/types/Message';
+import { AttachmentType } from './conversation/types';
import { Localizer } from '../types/Util';
-interface Item {
+export interface MediaItemType {
objectURL?: string;
- contentType: MIME.MIMEType | undefined;
+ thumbnailObjectUrl?: string;
+ contentType?: MIME.MIMEType;
+ index: number;
+ attachment: AttachmentType;
+ message: Message;
}
interface Props {
close: () => void;
i18n: Localizer;
- messages: Array
;
- onSave?: ({ message }: { message: Message }) => void;
+ media: Array;
+ onSave?: (
+ { attachment, message }: { attachment: AttachmentType; message: Message }
+ ) => void;
selectedIndex: number;
}
@@ -26,11 +33,6 @@ interface State {
selectedIndex: number;
}
-const messageToItem = (message: Message): Item => ({
- objectURL: message.objectURL,
- contentType: message.attachments[0].contentType,
-});
-
export class LightboxGallery extends React.Component {
public static defaultProps: Partial = {
selectedIndex: 0,
@@ -45,20 +47,19 @@ export class LightboxGallery extends React.Component {
}
public render() {
- const { close, messages, onSave, i18n } = this.props;
+ const { close, media, onSave, i18n } = this.props;
const { selectedIndex } = this.state;
- const selectedMessage: Message = messages[selectedIndex];
- const selectedItem = messageToItem(selectedMessage);
-
+ const selectedMedia = media[selectedIndex];
const firstIndex = 0;
+ const lastIndex = media.length - 1;
+
const onPrevious =
selectedIndex > firstIndex ? this.handlePrevious : undefined;
-
- const lastIndex = messages.length - 1;
const onNext = selectedIndex < lastIndex ? this.handleNext : undefined;
- const objectURL = selectedItem.objectURL || 'images/alert-outline.svg';
+ const objectURL = selectedMedia.objectURL || 'images/alert-outline.svg';
+ const { attachment } = selectedMedia;
return (
{
onNext={onNext}
onSave={onSave ? this.handleSave : undefined}
objectURL={objectURL}
- contentType={selectedItem.contentType}
+ caption={attachment ? attachment.caption : undefined}
+ contentType={selectedMedia.contentType}
i18n={i18n}
/>
);
@@ -83,19 +85,21 @@ export class LightboxGallery extends React.Component {
this.setState((prevState, props) => ({
selectedIndex: Math.min(
prevState.selectedIndex + 1,
- props.messages.length - 1
+ props.media.length - 1
),
}));
};
private handleSave = () => {
- const { messages, onSave } = this.props;
+ const { media, onSave } = this.props;
if (!onSave) {
return;
}
const { selectedIndex } = this.state;
- const message = messages[selectedIndex];
- onSave({ message });
+ const mediaItem = media[selectedIndex];
+ const { attachment, message } = mediaItem;
+
+ onSave({ attachment, message });
};
}
diff --git a/ts/components/conversation/Image.md b/ts/components/conversation/Image.md
new file mode 100644
index 0000000000..dc28d28aed
--- /dev/null
+++ b/ts/components/conversation/Image.md
@@ -0,0 +1,122 @@
+### Various sizes
+
+```jsx
+
+
+
+```
+
+### Various curved corners
+
+```jsx
+
+
+
+
+```
+
+### With bottom overlay
+
+```jsx
+
+
+
+```
+
+### With play icon
+
+```jsx
+
+
+
+```
+
+### With dark overlay and text
+
+```jsx
+
+```
+
+### With caption
+
+```jsx
+
+```
diff --git a/ts/components/conversation/Image.tsx b/ts/components/conversation/Image.tsx
new file mode 100644
index 0000000000..9deeee2c4a
--- /dev/null
+++ b/ts/components/conversation/Image.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { Localizer } from '../../types/Util';
+import { AttachmentType } from './types';
+
+interface Props {
+ alt: string;
+ attachment: AttachmentType;
+ url: string;
+
+ height?: number;
+ width?: number;
+
+ overlayText?: string;
+
+ bottomOverlay?: boolean;
+ curveBottomLeft?: boolean;
+ curveBottomRight?: boolean;
+ curveTopLeft?: boolean;
+ curveTopRight?: boolean;
+ darkOverlay?: boolean;
+ playIconOverlay?: boolean;
+
+ i18n: Localizer;
+ onClick?: (attachment: AttachmentType) => void;
+ onError?: () => void;
+}
+
+export class Image extends React.Component {
+ public render() {
+ const {
+ alt,
+ attachment,
+ bottomOverlay,
+ curveBottomLeft,
+ curveBottomRight,
+ curveTopLeft,
+ curveTopRight,
+ darkOverlay,
+ height,
+ i18n,
+ onClick,
+ onError,
+ overlayText,
+ playIconOverlay,
+ url,
+ width,
+ } = this.props;
+
+ const { caption } = attachment || { caption: null };
+
+ return (
+ {
+ if (onClick) {
+ onClick(attachment);
+ }
+ }}
+ role="button"
+ className={classNames(
+ 'module-image',
+ 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
+ )}
+ >
+
+ {caption ? (
+
+ ) : null}
+
+ {bottomOverlay ? (
+
+ ) : null}
+ {playIconOverlay ? (
+
+ ) : null}
+ {overlayText ? (
+
+ {overlayText}
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Two images
+
+```jsx
+const attachments = [
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+];
+
+;
+```
+
+### Three images
+
+```jsx
+const attachments = [
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+];
+
+;
+```
+
+### Four images
+
+```jsx
+const attachments = [
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+];
+
+;
+```
+
+### Five images
+
+```jsx
+const attachments = [
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+];
+
+;
+```
+
+### Six images
+
+```
+const attachments = [
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+ {
+ url: util.pngObjectUrl,
+ contentType: 'image/png',
+ width: 320,
+ height: 240,
+ },
+];
+
+;
+```
diff --git a/ts/components/conversation/ImageGrid.tsx b/ts/components/conversation/ImageGrid.tsx
new file mode 100644
index 0000000000..2af2511662
--- /dev/null
+++ b/ts/components/conversation/ImageGrid.tsx
@@ -0,0 +1,416 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import {
+ isImageTypeSupported,
+ isVideoTypeSupported,
+} from '../../util/GoogleChrome';
+import { AttachmentType } from './types';
+import { Image } from './Image';
+import { Localizer } from '../../types/Util';
+
+interface Props {
+ attachments: Array;
+ withContentAbove: boolean;
+ withContentBelow: boolean;
+ bottomOverlay?: boolean;
+
+ i18n: Localizer;
+
+ onError: () => void;
+ onClickAttachment?: (attachment: AttachmentType) => void;
+}
+
+const MAX_WIDTH = 300;
+const MAX_HEIGHT = MAX_WIDTH * 1.5;
+const MIN_WIDTH = 200;
+const MIN_HEIGHT = 25;
+
+export class ImageGrid extends React.Component {
+ // tslint:disable-next-line max-func-body-length */
+ public render() {
+ const {
+ attachments,
+ bottomOverlay,
+ i18n,
+ onError,
+ onClickAttachment,
+ withContentAbove,
+ withContentBelow,
+ } = this.props;
+
+ const curveTopLeft = !Boolean(withContentAbove);
+ const curveTopRight = curveTopLeft;
+
+ const curveBottom = !Boolean(withContentBelow);
+ const curveBottomLeft = curveBottom;
+ const curveBottomRight = curveBottom;
+
+ if (!attachments || !attachments.length) {
+ return null;
+ }
+
+ if (attachments.length === 1) {
+ const { height, width } = getImageDimensions(attachments[0]);
+
+ return (
+
+
+
+ );
+ }
+
+ if (attachments.length === 2) {
+ return (
+
+
+
+
+ );
+ }
+
+ if (attachments.length === 3) {
+ return (
+
+ );
+ }
+
+ if (attachments.length === 4) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+ 5}
+ overlayText={
+ attachments.length > 5
+ ? `+${attachments.length - 5}`
+ : undefined
+ }
+ attachment={attachments[4]}
+ url={getUrl(attachments[4])}
+ onClick={onClickAttachment}
+ onError={onError}
+ />
+
+
+
-
-
- {!withCaption && !collapseMetadata ? (
-
- ) : null}
-
-
-
- {!withCaption && !collapseMetadata ? (
-
- ) : null}
-
{
- if (onDownload) {
- onDownload(isDangerous);
- }
- }}
- role="button"
- className={classNames(
- 'module-message__buttons__download',
- `module-message__buttons__download--${direction}`
- )}
- />
- ) : null;
+ const downloadButton =
+ !multipleAttachments && attachments && attachments[0] ? (
+
{
+ if (onDownload) {
+ onDownload(isDangerous);
+ }
+ }}
+ role="button"
+ className={classNames(
+ 'module-message__buttons__download',
+ `module-message__buttons__download--${direction}`
+ )}
+ />
+ ) : null;
const replyButton = (
{
public renderContextMenu(triggerId: string) {
const {
- attachment,
+ attachments,
direction,
status,
onDelete,
@@ -819,12 +721,14 @@ export class Message extends React.Component
{
} = this.props;
const showRetry = status === 'error' && direction === 'outgoing';
- const fileName = attachment ? attachment.fileName : null;
+ const fileName =
+ attachments && attachments[0] ? attachments[0].fileName : null;
const isDangerous = isFileDangerous(fileName || '');
+ const multipleAttachments = attachments && attachments.length > 1;
return (
- {attachment ? (
+ {!multipleAttachments && attachments && attachments[0] ? (