-
- 
+ 
+ );
+ }
+
+ const isVideo = GoogleChrome.isVideoTypeSupported(contentType);
+ if (isVideo) {
+ return (
+
+ );
+ }
+
+ // tslint:disable-next-line no-console
+ console.log('Lightbox: Unexpected content type', { contentType });
+ return null;
+ };
+
private setContainerRef = (value: HTMLDivElement) => {
this.containerRef = value;
};
@@ -111,11 +214,28 @@ export class Lightbox extends React.Component {
};
private onKeyUp = (event: KeyboardEvent) => {
- if (event.key !== 'Escape') {
- return;
- }
+ const { onClose } = this;
+ const { onNext, onPrevious } = this.props;
+ switch (event.key) {
+ case 'Escape':
+ onClose();
+ break;
- this.onClose();
+ case 'ArrowLeft':
+ if (onPrevious) {
+ onPrevious();
+ }
+ break;
+
+ case 'ArrowRight':
+ if (onNext) {
+ onNext();
+ }
+ break;
+
+ default:
+ break;
+ }
};
private onContainerClick = (event: React.MouseEvent) => {
@@ -125,7 +245,7 @@ export class Lightbox extends React.Component {
this.onClose();
};
- private onImageClick = (event: React.MouseEvent) => {
+ private onObjectClick = (event: React.MouseEvent) => {
event.stopPropagation();
this.onClose();
};
diff --git a/ts/components/LightboxGallery.md b/ts/components/LightboxGallery.md
new file mode 100644
index 000000000000..66f90e0dc597
--- /dev/null
+++ b/ts/components/LightboxGallery.md
@@ -0,0 +1,19 @@
+```js
+const noop = () => {};
+
+const items = [
+ { objectURL: 'https://placekitten.com/800/600', contentType: 'image/jpeg' },
+ { objectURL: 'https://placekitten.com/900/600', contentType: 'image/jpeg' },
+ { objectURL: 'https://placekitten.com/980/800', contentType: 'image/jpeg' },
+ { objectURL: 'https://placekitten.com/656/540', contentType: 'image/jpeg' },
+ { objectURL: 'https://placekitten.com/762/400', contentType: 'image/jpeg' },
+ { objectURL: 'https://placekitten.com/920/620', contentType: 'image/jpeg' },
+];
+
+;
+ onSave?: ({ message }: { message: Message }) => void;
+ selectedIndex: number;
+}
+
+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,
+ };
+
+ constructor(props: Props) {
+ super(props);
+
+ this.state = {
+ selectedIndex: this.props.selectedIndex,
+ };
+ }
+
+ public render() {
+ const { close, messages, onSave } = this.props;
+ const { selectedIndex } = this.state;
+
+ const selectedMessage: Message = messages[selectedIndex];
+ const selectedItem = messageToItem(selectedMessage);
+
+ const firstIndex = 0;
+ 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';
+
+ return (
+ ;
onItemClick?: (event: ItemClickEvent) => void;
}
@@ -82,11 +83,11 @@ export class AttachmentSection extends React.Component {
}
private createClickHandler = (message: Message) => () => {
- const { onItemClick } = this.props;
+ const { onItemClick, type } = this.props;
if (!onItemClick) {
return;
}
- onItemClick({ message });
+ onItemClick({ type, message });
};
}
diff --git a/ts/components/conversation/media-gallery/DocumentListItem.tsx b/ts/components/conversation/media-gallery/DocumentListItem.tsx
index 8646d3a2a455..b9fb8459970b 100644
--- a/ts/components/conversation/media-gallery/DocumentListItem.tsx
+++ b/ts/components/conversation/media-gallery/DocumentListItem.tsx
@@ -23,6 +23,7 @@ const styles = {
borderBottomStyle: 'solid',
},
itemContainer: {
+ cursor: 'pointer',
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
diff --git a/ts/components/conversation/media-gallery/EmptyState.md b/ts/components/conversation/media-gallery/EmptyState.md
new file mode 100644
index 000000000000..e6382357dfbe
--- /dev/null
+++ b/ts/components/conversation/media-gallery/EmptyState.md
@@ -0,0 +1,11 @@
+```js
+ {
+ public render() {
+ const { label } = this.props;
+ return ;
@@ -34,9 +35,18 @@ const tabStyle = {
};
const styles = {
- tabContainer: {
- cursor: 'pointer',
+ container: {
display: 'flex',
+ flexDirection: 'column',
+ flexGrow: 1,
+ width: '100%',
+ height: '100%',
+ } as React.CSSProperties,
+ tabContainer: {
+ display: 'flex',
+ flexGrow: 0,
+ flexShrink: 0,
+ cursor: 'pointer',
width: '100%',
},
tab: {
@@ -46,9 +56,17 @@ const styles = {
borderBottom: '2px solid #08f',
},
},
- attachmentsContainer: {
+ contentContainer: {
+ display: 'flex',
+ flexGrow: 1,
+ overflowY: 'auto',
padding: 20,
- },
+ } as React.CSSProperties,
+ sectionContainer: {
+ display: 'flex',
+ flexGrow: 1,
+ flexDirection: 'column',
+ } as React.CSSProperties,
};
interface TabSelectEvent {
@@ -87,7 +105,7 @@ export class MediaGallery extends React.Component {
const { selectedTab } = this.state;
return (
-
+
+
-
+ {!is.undefined(contentType)
+ ? this.renderObject({ objectURL, contentType })
+ : null}
+
+
+
-
);
}
+ private renderObject = ({
+ objectURL,
+ contentType,
+ }: {
+ objectURL: string;
+ contentType: MIME.MIMEType;
+ }) => {
+ const isImage = GoogleChrome.isImageTypeSupported(contentType);
+ if (isImage) {
+ return (
+
+ {onPrevious ? (
+
+
+```
diff --git a/ts/components/LightboxGallery.tsx b/ts/components/LightboxGallery.tsx
new file mode 100644
index 000000000000..39b7b4eb06e1
--- /dev/null
+++ b/ts/components/LightboxGallery.tsx
@@ -0,0 +1,97 @@
+/**
+ * @prettier
+ */
+import React from 'react';
+
+import * as MIME from '../types/MIME';
+import { Lightbox } from './Lightbox';
+import { Message } from './conversation/media-gallery/types/Message';
+
+interface Item {
+ objectURL?: string;
+ contentType: MIME.MIMEType | undefined;
+}
+
+interface Props {
+ close: () => void;
+ messages: Array
+
+```
+
+```js
+
+
+```
diff --git a/ts/components/conversation/media-gallery/EmptyState.tsx b/ts/components/conversation/media-gallery/EmptyState.tsx
new file mode 100644
index 000000000000..17af2067738f
--- /dev/null
+++ b/ts/components/conversation/media-gallery/EmptyState.tsx
@@ -0,0 +1,29 @@
+/**
+ * @prettier
+ */
+import React from 'react';
+
+import * as Colors from '../../styles/Colors';
+
+interface Props {
+ label: string;
+}
+
+const styles = {
+ container: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ flexGrow: 1,
+
+ fontSize: 28,
+ color: Colors.TEXT_SECONDARY,
+ } as React.CSSProperties,
+};
+
+export class EmptyState extends React.Component{label}
;
+ }
+}
diff --git a/ts/components/conversation/media-gallery/MediaGallery.md b/ts/components/conversation/media-gallery/MediaGallery.md
index ca6e3a6277cf..729117144897 100644
--- a/ts/components/conversation/media-gallery/MediaGallery.md
+++ b/ts/components/conversation/media-gallery/MediaGallery.md
@@ -1,3 +1,17 @@
+### Empty states for missing media and documents
+
+```
+
+
+```
+
+### Media gallery with media and documents
+
```jsx
const DAY_MS = 24 * 60 * 60 * 1000;
const MONTH_MS = 30 * DAY_MS;
diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx
index a720ce046b54..8f06c7035197 100644
--- a/ts/components/conversation/media-gallery/MediaGallery.tsx
+++ b/ts/components/conversation/media-gallery/MediaGallery.tsx
@@ -6,11 +6,12 @@ import React from 'react';
import moment from 'moment';
import { AttachmentSection } from './AttachmentSection';
+import { AttachmentType } from './types/AttachmentType';
+import { EmptyState } from './EmptyState';
import { groupMessagesByDate } from './groupMessagesByDate';
-import { ItemClickEvent } from './events/ItemClickEvent';
-import { Message } from './propTypes/Message';
-
-type AttachmentType = 'media' | 'documents';
+import { ItemClickEvent } from './types/ItemClickEvent';
+import { Message } from './types/Message';
+import { missingCaseError } from '../../../util/missingCaseError';
interface Props {
documents: Array
+
{
isSelected={selectedTab === 'media'}
onSelect={this.handleTabSelect}
/>
- {/* Disable for MVP:
-
);
}
@@ -121,12 +137,23 @@ export class MediaGallery extends React.Component {
const type = selectedTab;
if (!messages || messages.length === 0) {
- return null;
+ const label = (() => {
+ switch (type) {
+ case 'media':
+ return i18n('mediaEmptyState');
+
+ case 'documents':
+ return i18n('documentsEmptyState');
+
+ default:
+ throw missingCaseError(type);
+ }
+ })();
+ return {
/>
);
});
+
+ return ) => async (
messages: Array
): Promise> => {
@@ -29,14 +26,15 @@ export const loadWithObjectURL = (loadMessage: MapAsync) => async (
}
// Messages with video are too expensive to load into memory, so we don’t:
- const [, messagesWithoutVideo] = partition(messages, hasVideoAttachment);
+ const [messagesWithVideo, messagesWithoutVideo] = partition(
+ messages,
+ hasVideoAttachment
+ );
const loadedMessagesWithoutVideo: Array = await Promise.all(
messagesWithoutVideo.map(loadMessage)
);
const loadedMessages = sortBy(
- // // Only show images for MVP:
- // [...messagesWithVideo, ...loadedMessagesWithoutVideo],
- loadedMessagesWithoutVideo,
+ [...messagesWithVideo, ...loadedMessagesWithoutVideo],
message => -message.received_at
);
@@ -50,17 +48,17 @@ const hasVideoAttachment = (message: Message): boolean =>
MIME.isVideo(attachment.contentType)
);
-const withObjectURL = (message: Message): Message => {
+export const withObjectURL = (message: Message): Message => {
if (message.attachments.length === 0) {
throw new TypeError('`message.attachments` cannot be empty');
}
const attachment = message.attachments[0];
- if (typeof attachment.contentType === 'undefined') {
+ if (is.undefined(attachment.contentType)) {
throw new TypeError('`attachment.contentType` is required');
}
- if (MIME.isVideo(attachment.contentType)) {
+ if (is.undefined(attachment.data) && MIME.isVideo(attachment.contentType)) {
return {
...message,
objectURL: 'images/video.svg',
@@ -69,7 +67,7 @@ const withObjectURL = (message: Message): Message => {
const objectURL = arrayBufferToObjectURL({
data: attachment.data,
- type: attachment.contentType || DEFAULT_CONTENT_TYPE,
+ type: attachment.contentType,
});
return {
...message,
diff --git a/ts/components/styles/Colors.ts b/ts/components/styles/Colors.ts
new file mode 100644
index 000000000000..bcc7f814f571
--- /dev/null
+++ b/ts/components/styles/Colors.ts
@@ -0,0 +1,4 @@
+/**
+ * @prettier
+ */
+export const TEXT_SECONDARY = '#bbb';
diff --git a/ts/test/components/media-gallery/groupMessagesByDate.ts b/ts/test/components/media-gallery/groupMessagesByDate.ts
index 050e915125c8..85ed5e499eb6 100644
--- a/ts/test/components/media-gallery/groupMessagesByDate.ts
+++ b/ts/test/components/media-gallery/groupMessagesByDate.ts
@@ -10,7 +10,7 @@ import {
groupMessagesByDate,
Section,
} from '../../../components/conversation/media-gallery/groupMessagesByDate';
-import { Message } from '../../../components/conversation/media-gallery/propTypes/Message';
+import { Message } from '../../../components/conversation/media-gallery/types/Message';
const toMessage = (date: Date): Message => ({
id: date.toUTCString(),
diff --git a/ts/test/types/Attachment_test.ts b/ts/test/types/Attachment_test.ts
new file mode 100644
index 000000000000..343373d4ba36
--- /dev/null
+++ b/ts/test/types/Attachment_test.ts
@@ -0,0 +1,60 @@
+/**
+ * @prettier
+ */
+import 'mocha';
+import { assert } from 'chai';
+
+import * as Attachment from '../../types/Attachment';
+import { MIMEType } from '../../types/MIME';
+// @ts-ignore
+import { stringToArrayBuffer } from '../../../js/modules/string_to_array_buffer';
+
+describe('Attachment', () => {
+ describe('getFileExtension', () => {
+ it('should return file extension from content type', () => {
+ const input: Attachment.Attachment = {
+ data: stringToArrayBuffer('foo'),
+ contentType: 'image/gif' as MIMEType,
+ };
+ assert.strictEqual(Attachment.getFileExtension(input), 'gif');
+ });
+
+ it('should return file extension for QuickTime videos', () => {
+ const input: Attachment.Attachment = {
+ data: stringToArrayBuffer('foo'),
+ contentType: 'video/quicktime' as MIMEType,
+ };
+ assert.strictEqual(Attachment.getFileExtension(input), 'mov');
+ });
+ });
+
+ describe('getSuggestedFilename', () => {
+ context('for attachment with filename', () => {
+ it('should return existing filename if present', () => {
+ const attachment: Attachment.Attachment = {
+ fileName: 'funny-cat.mov',
+ data: stringToArrayBuffer('foo'),
+ contentType: 'video/quicktime' as MIMEType,
+ };
+ const actual = Attachment.getSuggestedFilename({ attachment });
+ const expected = 'funny-cat.mov';
+ assert.strictEqual(actual, expected);
+ });
+ });
+ context('for attachment without filename', () => {
+ it('should generate a filename based on timestamp', () => {
+ const attachment: Attachment.Attachment = {
+ data: stringToArrayBuffer('foo'),
+ contentType: 'video/quicktime' as MIMEType,
+ };
+ const timestamp = new Date(new Date(0).getTimezoneOffset() * 60 * 1000);
+ const actual = Attachment.getSuggestedFilename({
+ attachment,
+ timestamp,
+ });
+ const expected = 'signal-attachment-1970-01-01-000000.mov';
+ assert.strictEqual(actual, expected);
+ });
+ });
+ });
+});
diff --git a/ts/types/Attachment.ts b/ts/types/Attachment.ts
index fa4e09106979..3578f1b4e226 100644
--- a/ts/types/Attachment.ts
+++ b/ts/types/Attachment.ts
@@ -2,11 +2,14 @@
* @prettier
*/
import is from '@sindresorhus/is';
+import moment from 'moment';
import * as GoogleChrome from '../util/GoogleChrome';
+import { saveURLAsFile } from '../util/saveURLAsFile';
+import { arrayBufferToObjectURL } from '../util/arrayBufferToObjectURL';
import { MIMEType } from './MIME';
-export interface Attachment {
+export type Attachment = {
fileName?: string;
contentType?: MIMEType;
size?: number;
@@ -21,8 +24,14 @@ export interface Attachment {
// key?: ArrayBuffer;
// digest?: ArrayBuffer;
// flags?: number;
+} & Partial;
+
+interface AttachmentSchemaVersion3 {
+ path: string;
}
+const SAVE_CONTENT_TYPE = 'application/octet-stream' as MIMEType;
+
export const isVisualMedia = (attachment: Attachment): boolean => {
const { contentType } = attachment;
@@ -34,3 +43,62 @@ export const isVisualMedia = (attachment: Attachment): boolean => {
const isSupportedVideoType = GoogleChrome.isVideoTypeSupported(contentType);
return isSupportedImageType || isSupportedVideoType;
};
+
+export const save = ({
+ attachment,
+ document,
+ getAbsolutePath,
+ timestamp,
+}: {
+ attachment: Attachment;
+ document: Document;
+ getAbsolutePath: (relativePath: string) => string;
+ timestamp?: number;
+}): void => {
+ const isObjectURLRequired = is.undefined(attachment.path);
+ const url = !is.undefined(attachment.path)
+ ? getAbsolutePath(attachment.path)
+ : arrayBufferToObjectURL({
+ data: attachment.data,
+ type: SAVE_CONTENT_TYPE,
+ });
+ const filename = getSuggestedFilename({ attachment, timestamp });
+ saveURLAsFile({ url, filename, document });
+ if (isObjectURLRequired) {
+ URL.revokeObjectURL(url);
+ }
+};
+
+export const getSuggestedFilename = ({
+ attachment,
+ timestamp,
+}: {
+ attachment: Attachment;
+ timestamp?: number | Date;
+}): string => {
+ if (attachment.fileName) {
+ return attachment.fileName;
+ }
+
+ const prefix = 'signal-attachment';
+ const suffix = timestamp
+ ? moment(timestamp).format('-YYYY-MM-DD-HHmmss')
+ : '';
+ const fileType = getFileExtension(attachment);
+ const extension = fileType ? `.${fileType}` : '';
+ return `${prefix}${suffix}${extension}`;
+};
+
+export const getFileExtension = (attachment: Attachment): string | null => {
+ if (!attachment.contentType) {
+ return null;
+ }
+
+ switch (attachment.contentType) {
+ case 'video/quicktime':
+ return 'mov';
+ default:
+ // TODO: Use better MIME --> file extension mapping:
+ return attachment.contentType.split('/')[1];
+ }
+};
diff --git a/ts/types/MIME.ts b/ts/types/MIME.ts
index a27cb658c51e..7439a8a66c2d 100644
--- a/ts/types/MIME.ts
+++ b/ts/types/MIME.ts
@@ -4,9 +4,6 @@
export type MIMEType = string & { _mimeTypeBrand: any };
export const isJPEG = (value: MIMEType): boolean => value === 'image/jpeg';
-
export const isImage = (value: MIMEType): boolean => value.startsWith('image/');
-
export const isVideo = (value: MIMEType): boolean => value.startsWith('video/');
-
export const isAudio = (value: MIMEType): boolean => value.startsWith('audio/');
diff --git a/ts/util/arrayBufferToObjectURL.ts b/ts/util/arrayBufferToObjectURL.ts
index 29bdb9eca96d..f9c58c8d2490 100644
--- a/ts/util/arrayBufferToObjectURL.ts
+++ b/ts/util/arrayBufferToObjectURL.ts
@@ -1,6 +1,8 @@
/**
* @prettier
*/
+import is from '@sindresorhus/is';
+
import { MIMEType } from '../types/MIME';
export const arrayBufferToObjectURL = ({
@@ -10,6 +12,10 @@ export const arrayBufferToObjectURL = ({
data: ArrayBuffer;
type: MIMEType;
}): string => {
+ if (!is.arrayBuffer(data)) {
+ throw new TypeError('`data` must be an ArrayBuffer');
+ }
+
const blob = new Blob([data], { type });
return URL.createObjectURL(blob);
};
diff --git a/ts/util/saveURLAsFile.ts b/ts/util/saveURLAsFile.ts
new file mode 100644
index 000000000000..90bc99273fe7
--- /dev/null
+++ b/ts/util/saveURLAsFile.ts
@@ -0,0 +1,17 @@
+/**
+ * @prettier
+ */
+export const saveURLAsFile = ({
+ filename,
+ url,
+ document,
+}: {
+ filename: string;
+ url: string;
+ document: Document;
+}): void => {
+ const anchorElement = document.createElement('a');
+ anchorElement.href = url;
+ anchorElement.download = filename;
+ anchorElement.click();
+};
{this.renderSections()}
+ {this.renderSections()}
{sections}
;
}
}
diff --git a/ts/components/conversation/media-gallery/MediaGridItem.tsx b/ts/components/conversation/media-gallery/MediaGridItem.tsx
index 1dd5aeb394c2..1a69314b4fb6 100644
--- a/ts/components/conversation/media-gallery/MediaGridItem.tsx
+++ b/ts/components/conversation/media-gallery/MediaGridItem.tsx
@@ -3,7 +3,7 @@
*/
import React from 'react';
-import { Message } from './propTypes/Message';
+import { Message } from './types/Message';
interface Props {
message: Message;
@@ -17,6 +17,7 @@ const size = {
const styles = {
container: {
...size,
+ cursor: 'pointer',
backgroundColor: '#f3f3f3',
marginRight: 4,
marginBottom: 4,
diff --git a/ts/components/conversation/media-gallery/events/ItemClickEvent.tsx b/ts/components/conversation/media-gallery/events/ItemClickEvent.tsx
deleted file mode 100644
index a53e0c2bb85b..000000000000
--- a/ts/components/conversation/media-gallery/events/ItemClickEvent.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @prettier
- */
-import { Message } from '../propTypes/Message';
-
-export interface ItemClickEvent {
- message: Message;
-}
diff --git a/ts/components/conversation/media-gallery/groupMessagesByDate.ts b/ts/components/conversation/media-gallery/groupMessagesByDate.ts
index 02fc6ea39aa7..7b34d2250101 100644
--- a/ts/components/conversation/media-gallery/groupMessagesByDate.ts
+++ b/ts/components/conversation/media-gallery/groupMessagesByDate.ts
@@ -4,7 +4,7 @@
import moment from 'moment';
import { compact, groupBy, sortBy } from 'lodash';
-import { Message } from './propTypes/Message';
+import { Message } from './types/Message';
// import { missingCaseError } from '../../../util/missingCaseError';
type StaticSectionType = 'today' | 'yesterday' | 'thisWeek' | 'thisMonth';
diff --git a/ts/components/conversation/media-gallery/types/AttachmentType.ts b/ts/components/conversation/media-gallery/types/AttachmentType.ts
new file mode 100644
index 000000000000..1bd5deba9c1c
--- /dev/null
+++ b/ts/components/conversation/media-gallery/types/AttachmentType.ts
@@ -0,0 +1,4 @@
+/**
+ * @prettier
+ */
+export type AttachmentType = 'media' | 'documents';
diff --git a/ts/components/conversation/media-gallery/types/ItemClickEvent.tsx b/ts/components/conversation/media-gallery/types/ItemClickEvent.tsx
new file mode 100644
index 000000000000..1bb410aa9594
--- /dev/null
+++ b/ts/components/conversation/media-gallery/types/ItemClickEvent.tsx
@@ -0,0 +1,10 @@
+/**
+ * @prettier
+ */
+import { AttachmentType } from './AttachmentType';
+import { Message } from './Message';
+
+export interface ItemClickEvent {
+ message: Message;
+ type: AttachmentType;
+}
diff --git a/ts/components/conversation/media-gallery/propTypes/Message.tsx b/ts/components/conversation/media-gallery/types/Message.tsx
similarity index 76%
rename from ts/components/conversation/media-gallery/propTypes/Message.tsx
rename to ts/components/conversation/media-gallery/types/Message.tsx
index a72e4a44dacb..4b47504bd760 100644
--- a/ts/components/conversation/media-gallery/propTypes/Message.tsx
+++ b/ts/components/conversation/media-gallery/types/Message.tsx
@@ -8,7 +8,6 @@ import * as MIME from '../../../../types/MIME';
import { arrayBufferToObjectURL } from '../../../../util/arrayBufferToObjectURL';
import { Attachment } from '../../../../types/Attachment';
import { MapAsync } from '../../../../types/MapAsync';
-import { MIMEType } from '../../../../types/MIME';
export type Message = {
id: string;
@@ -16,8 +15,6 @@ export type Message = {
received_at: number;
} & { objectURL?: string };
-const DEFAULT_CONTENT_TYPE: MIMEType = 'application/octet-stream' as MIMEType;
-
export const loadWithObjectURL = (loadMessage: MapAsync