From 6a63e427c8ac0305198cac5fa95fe3ebe9d4f7fc Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Mon, 9 Apr 2018 18:38:44 -0400 Subject: [PATCH 001/122] Use `is` instead of Lodash `is*` --- js/modules/types/attachment.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/js/modules/types/attachment.js b/js/modules/types/attachment.js index 06298b284e..25e58bb953 100644 --- a/js/modules/types/attachment.js +++ b/js/modules/types/attachment.js @@ -1,4 +1,4 @@ -const { isFunction, isString } = require('lodash'); +const is = require('@sindresorhus/is'); const MIME = require('./mime'); const { arrayBufferToBlob, blobToArrayBuffer, dataURLToBlob } = require('blob-util'); @@ -76,7 +76,7 @@ const INVALID_CHARACTERS_PATTERN = new RegExp( // which currently doesn’t support async testing: // https://github.com/leebyron/testcheck-js/issues/45 exports._replaceUnicodeOrderOverridesSync = (attachment) => { - if (!isString(attachment.fileName)) { + if (!is.string(attachment.fileName)) { return attachment; } @@ -115,7 +115,7 @@ exports.hasData = attachment => // Attachment -> // IO (Promise Attachment) exports.loadData = (readAttachmentData) => { - if (!isFunction(readAttachmentData)) { + if (!is.function(readAttachmentData)) { throw new TypeError("'readAttachmentData' must be a function"); } @@ -129,7 +129,7 @@ exports.loadData = (readAttachmentData) => { return attachment; } - if (!isString(attachment.path)) { + if (!is.string(attachment.path)) { throw new TypeError("'attachment.path' is required"); } @@ -142,7 +142,7 @@ exports.loadData = (readAttachmentData) => { // Attachment -> // IO Unit exports.deleteData = (deleteAttachmentData) => { - if (!isFunction(deleteAttachmentData)) { + if (!is.function(deleteAttachmentData)) { throw new TypeError("'deleteAttachmentData' must be a function"); } @@ -156,7 +156,7 @@ exports.deleteData = (deleteAttachmentData) => { return; } - if (!isString(attachment.path)) { + if (!is.string(attachment.path)) { throw new TypeError("'attachment.path' is required"); } From df2e6e78640fa11d15f7b9514b04a39e27ed68a3 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Mon, 9 Apr 2018 19:24:24 -0400 Subject: [PATCH 002/122] Port `MIME` module to TypeScript --- js/modules/types/attachment.js | 2 +- js/modules/types/mime.js | 10 ---------- preload.js | 2 +- test/modules/types/mime_test.js | 2 +- ts/components/conversation/Quote.tsx | 17 ++++++++--------- ts/styleguide/StyleGuideUtil.ts | 3 +-- ts/types/MIME.ts | 13 +++++++++++++ 7 files changed, 25 insertions(+), 24 deletions(-) delete mode 100644 js/modules/types/mime.js diff --git a/js/modules/types/attachment.js b/js/modules/types/attachment.js index 25e58bb953..cb67b7f1da 100644 --- a/js/modules/types/attachment.js +++ b/js/modules/types/attachment.js @@ -1,6 +1,6 @@ const is = require('@sindresorhus/is'); -const MIME = require('./mime'); +const MIME = require('../../../ts/types/MIME'); const { arrayBufferToBlob, blobToArrayBuffer, dataURLToBlob } = require('blob-util'); const { autoOrientImage } = require('../auto_orient_image'); const { migrateDataToFileSystem } = require('./attachment/migrate_data_to_file_system'); diff --git a/js/modules/types/mime.js b/js/modules/types/mime.js deleted file mode 100644 index b149aead43..0000000000 --- a/js/modules/types/mime.js +++ /dev/null @@ -1,10 +0,0 @@ -exports.isJPEG = mimeType => - mimeType === 'image/jpeg'; - -exports.isVideo = mimeType => - mimeType.startsWith('video/') && mimeType !== 'video/wmv'; - -exports.isImage = mimeType => - mimeType.startsWith('image/') && mimeType !== 'image/tiff'; - -exports.isAudio = mimeType => mimeType.startsWith('audio/'); diff --git a/preload.js b/preload.js index 24eada4524..d35da5a885 100644 --- a/preload.js +++ b/preload.js @@ -191,7 +191,7 @@ window.Signal.Types.Conversation = require('./ts/types/Conversation'); window.Signal.Types.Errors = require('./js/modules/types/errors'); window.Signal.Types.Message = Message; -window.Signal.Types.MIME = require('./js/modules/types/mime'); +window.Signal.Types.MIME = require('./ts/types/MIME'); window.Signal.Types.Settings = require('./js/modules/types/settings'); window.Signal.Views = {}; diff --git a/test/modules/types/mime_test.js b/test/modules/types/mime_test.js index b56f831c46..ab62bc3433 100644 --- a/test/modules/types/mime_test.js +++ b/test/modules/types/mime_test.js @@ -1,6 +1,6 @@ const { assert } = require('chai'); -const MIME = require('../../../js/modules/types/mime'); +const MIME = require('../../../ts/types/MIME'); describe('MIME', () => { diff --git a/ts/components/conversation/Quote.tsx b/ts/components/conversation/Quote.tsx index 3e541f7ce4..417448dd4c 100644 --- a/ts/components/conversation/Quote.tsx +++ b/ts/components/conversation/Quote.tsx @@ -1,8 +1,7 @@ import React from 'react'; import classnames from 'classnames'; -// @ts-ignore -import Mime from '../../../js/modules/types/mime'; +import * as MIME from '../../../ts/types/MIME'; interface Props { @@ -92,17 +91,17 @@ export class Quote extends React.Component { const { contentType, thumbnail } = first; const objectUrl = getObjectUrl(thumbnail); - if (Mime.isVideo(contentType)) { + if (MIME.isVideo(contentType)) { return objectUrl ? this.renderImage(objectUrl, 'play') : this.renderIcon('movie'); } - if (Mime.isImage(contentType)) { + if (MIME.isImage(contentType)) { return objectUrl ? this.renderImage(objectUrl) : this.renderIcon('image'); } - if (Mime.isAudio(contentType)) { + if (MIME.isAudio(contentType)) { return this.renderIcon('microphone'); } @@ -123,16 +122,16 @@ export class Quote extends React.Component { const first = attachments[0]; const { contentType, fileName, isVoiceMessage } = first; - if (Mime.isVideo(contentType)) { + if (MIME.isVideo(contentType)) { return
{i18n('video')}
; } - if (Mime.isImage(contentType)) { + if (MIME.isImage(contentType)) { return
{i18n('photo')}
; } - if (Mime.isAudio(contentType) && isVoiceMessage) { + if (MIME.isAudio(contentType) && isVoiceMessage) { return
{i18n('voiceMessage')}
; } - if (Mime.isAudio(contentType)) { + if (MIME.isAudio(contentType)) { return
{i18n('audio')}
; } diff --git a/ts/styleguide/StyleGuideUtil.ts b/ts/styleguide/StyleGuideUtil.ts index 35149e1964..0d61d39fe0 100644 --- a/ts/styleguide/StyleGuideUtil.ts +++ b/ts/styleguide/StyleGuideUtil.ts @@ -20,8 +20,7 @@ export { BackboneWrapper } from '../components/utility/BackboneWrapper'; import { Quote } from '../components/conversation/Quote'; import * as HTML from '../html'; -// @ts-ignore -import MIME from '../../js/modules/types/mime'; +import * as MIME from '../../ts/types/MIME'; // TypeScript wants two things when you import: // 1) a normal typescript file diff --git a/ts/types/MIME.ts b/ts/types/MIME.ts index ade12d7d50..ed1e3b5fde 100644 --- a/ts/types/MIME.ts +++ b/ts/types/MIME.ts @@ -1 +1,14 @@ export type MIMEType = string & { _mimeTypeBrand: any }; + + +export const isVideo = (value: MIMEType): boolean => + value.startsWith('video/') && value !== 'video/wmv'; + +export const isImage = (value: MIMEType): boolean => + value.startsWith('image/') && value !== 'image/tiff'; + +export const isAudio = (value: MIMEType): boolean => + value.startsWith('audio/'); + +export const isJPEG = (value: MIMEType): boolean => + value === 'image/jpeg'; From 6ff82adf0a8a9d8a2d5281233aec80652a355c95 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Mon, 9 Apr 2018 19:24:47 -0400 Subject: [PATCH 003/122] Add `MIME.isImage` and `MIME.isVideo` --- ts/types/MIME.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ts/types/MIME.ts b/ts/types/MIME.ts index ed1e3b5fde..3ac85dbfb9 100644 --- a/ts/types/MIME.ts +++ b/ts/types/MIME.ts @@ -1,14 +1,14 @@ export type MIMEType = string & { _mimeTypeBrand: any }; -export const isVideo = (value: MIMEType): boolean => - value.startsWith('video/') && value !== 'video/wmv'; +export const isJPEG = (value: MIMEType): boolean => + value === 'image/jpeg'; export const isImage = (value: MIMEType): boolean => - value.startsWith('image/') && value !== 'image/tiff'; + value.startsWith('image/'); + +export const isVideo = (value: MIMEType): boolean => + value.startsWith('video/'); export const isAudio = (value: MIMEType): boolean => value.startsWith('audio/'); - -export const isJPEG = (value: MIMEType): boolean => - value === 'image/jpeg'; From 9533c09707d6f03764145b59934cbfb5414db850 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Mon, 9 Apr 2018 19:25:48 -0400 Subject: [PATCH 004/122] Add `@types/lodash` --- package.json | 1 + yarn.lock | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/package.json b/package.json index 7c99afda60..36b2eb7546 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ }, "dependencies": { "@sindresorhus/is": "^0.8.0", + "@types/lodash": "^4.14.106", "archiver": "^2.1.1", "blob-util": "^1.3.0", "blueimp-canvas-to-blob": "^3.14.0", diff --git a/yarn.lock b/yarn.lock index 3748ca6bba..ed9d1b1fd8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -36,6 +36,10 @@ dependencies: samsam "1.3.0" +"@types/lodash@^4.14.106": + version "4.14.106" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.106.tgz#6093e9a02aa567ddecfe9afadca89e53e5dce4dd" + "@types/chai@^4.1.2": version "4.1.2" resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.1.2.tgz#f1af664769cfb50af805431c407425ed619daa21" From 47cc701e723a8cc14628cdd4b42a8bc257b598c6 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Mon, 9 Apr 2018 19:27:40 -0400 Subject: [PATCH 005/122] Add `GoogleChrome` module Helps us determine which media we can natively display / play back in Electron. --- ts/GoogleChrome.ts | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 ts/GoogleChrome.ts diff --git a/ts/GoogleChrome.ts b/ts/GoogleChrome.ts new file mode 100644 index 0000000000..9d9429ca42 --- /dev/null +++ b/ts/GoogleChrome.ts @@ -0,0 +1,37 @@ +import * as MIME from './types/MIME'; + + +interface MIMETypeSupportMap { + [key: string]: boolean; +} + +// See: https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support +const SUPPORTED_IMAGE_MIME_TYPES: MIMETypeSupportMap = { + 'image/bmp': true, + 'image/gif': true, + 'image/jpeg': true, + 'image/svg+xml': true, + 'image/webp': true, + 'image/x-xbitmap': true, + // ICO + 'image/vnd.microsoft.icon': true, + 'image/ico': true, + 'image/icon': true, + 'image/x-icon': true, + // PNG + 'image/apng': true, + 'image/png': true, +}; + +export const isImageTypeSupported = (mimeType: MIME.MIMEType): boolean => + SUPPORTED_IMAGE_MIME_TYPES[mimeType] === true; + +const SUPPORTED_VIDEO_MIME_TYPES: MIMETypeSupportMap = { + 'video/mp4': true, + 'video/ogg': true, + 'video/webm': true, +}; + +// See: https://www.chromium.org/audio-video +export const isVideoTypeSupported = (mimeType: MIME.MIMEType): boolean => + SUPPORTED_VIDEO_MIME_TYPES[mimeType] === true; From fc12353bb838789a014f42cee70458c63dfe8955 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Mon, 9 Apr 2018 19:29:38 -0400 Subject: [PATCH 006/122] Add `Attachment.isVisualMedia` --- ts/types/Attachment.ts | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/ts/types/Attachment.ts b/ts/types/Attachment.ts index 1e3d14e65f..4f384d1c3a 100644 --- a/ts/types/Attachment.ts +++ b/ts/types/Attachment.ts @@ -1,3 +1,6 @@ +import is from '@sindresorhus/is'; + +import * as GoogleChrome from '../GoogleChrome'; import { MIMEType } from './MIME'; @@ -16,4 +19,16 @@ export interface Attachment { // key?: ArrayBuffer; // digest?: ArrayBuffer; // flags?: number; -} +}; + +export const isVisualMedia = (attachment: Attachment): boolean => { + const { contentType } = attachment; + + if (is.undefined(contentType)) { + return false; + } + + const isSupportedImageType = GoogleChrome.isImageTypeSupported(contentType); + const isSupportedVideoType = GoogleChrome.isVideoTypeSupported(contentType); + return isSupportedImageType || isSupportedVideoType; +}; From c5352cf26c0c9da956af086e2ab47b72fcadf1c8 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Mon, 9 Apr 2018 20:02:07 -0400 Subject: [PATCH 007/122] Separate required from optional `Message` keys --- ts/types/Message.ts | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/ts/types/Message.ts b/ts/types/Message.ts index f539ed1a8d..4afe2dc84f 100644 --- a/ts/types/Message.ts +++ b/ts/types/Message.ts @@ -8,32 +8,39 @@ export type Message export type IncomingMessage = Readonly<{ type: 'incoming'; + // Required attachments: Array; + id: string; + received_at: number; + + // Optional body?: string; decrypted_at?: number; errors?: Array; flags?: number; - id: string; - received_at: number; source?: string; sourceDevice?: number; } & SharedMessageProperties & Message4 & ExpirationTimerUpdate>; export type OutgoingMessage = Readonly<{ type: 'outgoing'; + + // Required attachments: Array; - body?: string; delivered: number; delivered_to: Array; destination: string; // PhoneNumber expirationStartTimestamp: number; - expires_at?: number; - expireTimer?: number; id: string; received_at: number; - recipients?: Array; // Array sent: boolean; sent_to: Array; // Array + + // Optional + body?: string; + expires_at?: number; + expireTimer?: number; + recipients?: Array; // Array synced: boolean; } & SharedMessageProperties & Message4 & ExpirationTimerUpdate>; From 867bece952ca2c30091eacdd219a1620c3f5de70 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Mon, 9 Apr 2018 20:05:36 -0400 Subject: [PATCH 008/122] Add `Message.initializeAttachmentMetadata` --- .../initializeAttachmentMetadata_test.ts | 50 +++++++++++++++++++ test/modules/types/message_test.js | 3 ++ .../message/initializeAttachmentMetadata.ts | 20 ++++++++ 3 files changed, 73 insertions(+) create mode 100644 test/modules/types/message/initializeAttachmentMetadata_test.ts create mode 100644 ts/types/message/initializeAttachmentMetadata.ts diff --git a/test/modules/types/message/initializeAttachmentMetadata_test.ts b/test/modules/types/message/initializeAttachmentMetadata_test.ts new file mode 100644 index 0000000000..c6b69d1987 --- /dev/null +++ b/test/modules/types/message/initializeAttachmentMetadata_test.ts @@ -0,0 +1,50 @@ +import 'mocha'; +import { assert } from 'chai'; + +import * as Message from '../../../../ts/types/message/initializeAttachmentMetadata'; +import { IncomingMessage } from '../../../../ts/types/Message'; +import { MIMEType } from '../../../../ts/types/MIME'; +// @ts-ignore +import { stringToArrayBuffer } from '../../../../js/modules/string_to_array_buffer'; + + +describe('Message', () => { + describe('initializeAttachmentMetadata', () => { + it('should handle visual media attachments', async () => { + const input: IncomingMessage = { + type: 'incoming', + conversationId: 'foo', + id: '11111111-1111-1111-1111-111111111111', + timestamp: 1523317140899, + received_at: 1523317140899, + sent_at: 1523317140800, + attachments: [{ + contentType: 'image/jpeg' as MIMEType, + data: stringToArrayBuffer('foo'), + fileName: 'foo.jpg', + size: 1111, + }], + }; + const expected: IncomingMessage = { + type: 'incoming', + conversationId: 'foo', + id: '11111111-1111-1111-1111-111111111111', + timestamp: 1523317140899, + received_at: 1523317140899, + sent_at: 1523317140800, + attachments: [{ + contentType: 'image/jpeg' as MIMEType, + data: stringToArrayBuffer('foo'), + fileName: 'foo.jpg', + size: 1111, + }], + numAttachments: 1, + numVisualMediaAttachments: 1, + numFileAttachments: 0, + }; + + const actual = await Message.initializeAttachmentMetadata(input); + assert.deepEqual(actual, expected); + }); + }); +}); diff --git a/test/modules/types/message_test.js b/test/modules/types/message_test.js index 271ffe825b..42e8c4c6c0 100644 --- a/test/modules/types/message_test.js +++ b/test/modules/types/message_test.js @@ -181,6 +181,9 @@ describe('Message', () => { fileName: 'test\uFFFDfig.exe', size: 1111, }], + numAttachments: 1, + numVisualMediaAttachments: 0, + numFileAttachments: 1, schemaVersion: Message.CURRENT_SCHEMA_VERSION, }; diff --git a/ts/types/message/initializeAttachmentMetadata.ts b/ts/types/message/initializeAttachmentMetadata.ts new file mode 100644 index 0000000000..49d0f35d62 --- /dev/null +++ b/ts/types/message/initializeAttachmentMetadata.ts @@ -0,0 +1,20 @@ +import { partition } from 'lodash'; + +import * as Attachment from '../Attachment'; +import { Message } from '../message'; + + +export const initializeAttachmentMetadata = + async (message: Message): Promise => { + const numAttachments = message.attachments.length; + const [numVisualMediaAttachments, numFileAttachments] = + partition(message.attachments, Attachment.isVisualMedia) + .map((attachments) => attachments.length); + + return { + ...message, + numAttachments, + numVisualMediaAttachments, + numFileAttachments, + }; + }; From 7d11efc50ba6fad77f95632facc97387d1557694 Mon Sep 17 00:00:00 2001 From: Scott Nonnenberg Date: Mon, 26 Mar 2018 11:45:25 -0700 Subject: [PATCH 009/122] ConversationView: Add 'View All Media' menu item --- _locales/en/messages.json | 3 +++ background.html | 1 + 2 files changed, 4 insertions(+) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 85251a2b68..983de15252 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -522,6 +522,9 @@ "showSafetyNumber": { "message": "Show safety number" }, + "viewAllMedia": { + "message": "View all media" + }, "verifyHelp": { "message": "If you wish to verify the security of your end-to-end encryption with $name$, compare the numbers above with the numbers on their device.", "placeholders": { diff --git a/background.html b/background.html index f061468a17..af336a2411 100644 --- a/background.html +++ b/background.html @@ -159,6 +159,7 @@
  • {{ disappearing-messages }}
    • +
  • {{ viewAllMedia }}
    • {{#group}}
  • {{ show-members }}
    • From d14761087a0c327901227b7bae83763cb9fd7318 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Wed, 11 Apr 2018 11:21:32 -0400 Subject: [PATCH 010/122] Add schema version 4: Attachment metadata --- js/modules/types/message.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/js/modules/types/message.js b/js/modules/types/message.js index 17ef082515..0e8c639789 100644 --- a/js/modules/types/message.js +++ b/js/modules/types/message.js @@ -3,6 +3,8 @@ const { isFunction, isString, omit } = require('lodash'); const Attachment = require('./attachment'); const Errors = require('./errors'); const SchemaVersion = require('./schema_version'); +const { initializeAttachmentMetadata } = + require('../../../ts/types/message/initializeAttachmentMetadata'); const GROUP = 'group'; @@ -20,6 +22,11 @@ const PRIVATE = 'private'; // - Attachments: Write attachment data to disk and store relative path to it. // Version 4 // - Quotes: Write thumbnail data to disk and store relative path to it. +// Version 5 +// - Attachments: Track number and kind of attachments for media gallery +// - `numAttachments: Number` +// - `numVisualMediaAttachments: Number` (for media gallery ‘Media’ view) +// - `numFileAttachments: Number` (for media gallery ‘Documents’ view) const INITIAL_SCHEMA_VERSION = 0; @@ -29,7 +36,7 @@ const INITIAL_SCHEMA_VERSION = 0; // add more upgrade steps, we could design a pipeline that does this // incrementally, e.g. from version 0 / unknown -> 1, 1 --> 2, etc., similar to // how we do database migrations: -exports.CURRENT_SCHEMA_VERSION = 4; +exports.CURRENT_SCHEMA_VERSION = 5; // Public API @@ -206,6 +213,7 @@ const toVersion4 = exports._withSchemaVersion( 4, exports._mapQuotedAttachments(Attachment.migrateDataToFileSystem) ); +const toVersion5 = exports._withSchemaVersion(5, initializeAttachmentMetadata); // UpgradeStep exports.upgradeSchema = async (rawMessage, { writeNewAttachmentData } = {}) => { @@ -214,7 +222,7 @@ exports.upgradeSchema = async (rawMessage, { writeNewAttachmentData } = {}) => { } let message = rawMessage; - const versions = [toVersion0, toVersion1, toVersion2, toVersion3, toVersion4]; + const versions = [toVersion0, toVersion1, toVersion2, toVersion3, toVersion4, toVersion5]; for (let i = 0, max = versions.length; i < max; i += 1) { const currentVersion = versions[i]; From 273248d3fdd9dba7386959412491787610f84bbf Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Wed, 11 Apr 2018 11:41:38 -0400 Subject: [PATCH 011/122] =?UTF-8?q?Wire=20up=20=E2=80=98View=20All=20Media?= =?UTF-8?q?=E2=80=99=20menu=20item?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _locales/en/messages.json | 3 ++- background.html | 2 +- js/views/conversation_view.js | 5 +++++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 983de15252..fdbcc5d3a2 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -523,7 +523,8 @@ "message": "Show safety number" }, "viewAllMedia": { - "message": "View all media" + "message": "View all media", + "description": "This is a menu item for viewing all media (images + video) in a conversation, using the imperative case, as in a command." }, "verifyHelp": { "message": "If you wish to verify the security of your end-to-end encryption with $name$, compare the numbers above with the numbers on their device.", diff --git a/background.html b/background.html index af336a2411..98b8b3c044 100644 --- a/background.html +++ b/background.html @@ -159,7 +159,7 @@
    • {{ disappearing-messages }}
      • -
    • {{ viewAllMedia }}
      • +
    • {{ view-all-media }}
      • {{#group}}
    • {{ show-members }}
      • diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index e3b2039713..91b09bfb86 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -111,6 +111,7 @@ 'disappearing-messages': i18n('disappearingMessages'), 'android-length-warning': i18n('androidMessageLengthWarning'), timer_options: Whisper.ExpirationTimerOptions.models, + 'view-all-media': i18n('viewAllMedia'), }; }, initialize(options) { @@ -568,6 +569,10 @@ el[0].scrollIntoView(); }, + viewAllMedia() { + console.log('View All Media'); + }, + scrollToBottom() { // If we're above the last seen indicator, we should scroll there instead // Note: if we don't end up at the bottom of the conversation, button won't go away! From 5f220a7b2cf3c2c6faef0bdb8e4bc92cda276dda Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Wed, 11 Apr 2018 11:42:06 -0400 Subject: [PATCH 012/122] Add migration for media gallery indices --- js/modules/migrations/18/index.js | 16 ++++++++++++++++ ...rations_0_database_with_attachment_data.js | 19 ++++++++++++++++++- 2 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 js/modules/migrations/18/index.js diff --git a/js/modules/migrations/18/index.js b/js/modules/migrations/18/index.js new file mode 100644 index 0000000000..a1072f227e --- /dev/null +++ b/js/modules/migrations/18/index.js @@ -0,0 +1,16 @@ +exports.run = (transaction) => { + const messagesStore = transaction.objectStore('messages'); + + [ + 'numAttachments', + 'numVisualMediaAttachments', + 'numFileAttachments', + ].forEach((name) => { + console.log(`Create message attachment metadata index: '${name}'`); + messagesStore.createIndex( + name, + ['conversationId', 'received_at', name], + { unique: false } + ); + }); +}; diff --git a/js/modules/migrations/migrations_0_database_with_attachment_data.js b/js/modules/migrations/migrations_0_database_with_attachment_data.js index 1f80b48e3d..953d8406ed 100644 --- a/js/modules/migrations/migrations_0_database_with_attachment_data.js +++ b/js/modules/migrations/migrations_0_database_with_attachment_data.js @@ -1,6 +1,7 @@ const { isString, last } = require('lodash'); const { runMigrations } = require('./run_migrations'); +const Migration18 = require('./18'); // IMPORTANT: The migrations below are run on a database that may be very large @@ -133,7 +134,23 @@ const migrations = [ const duration = Date.now() - start; console.log( - 'Complete migration to database version 17.', + 'Complete migration to database version 17', + `Duration: ${duration}ms` + ); + next(); + }, + }, + { + version: 18, + migrate(transaction, next) { + console.log('Migration 18'); + + const start = Date.now(); + Migration18.run(transaction); + const duration = Date.now() - start; + + console.log( + 'Complete migration to database version 18', `Duration: ${duration}ms` ); next(); From f9e461339562918c8b14c6dcd4dae3429ddcd125 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Wed, 11 Apr 2018 11:55:43 -0400 Subject: [PATCH 013/122] Move TS test for message migration --- .../test-unit}/types/message/initializeAttachmentMetadata_test.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename {test/modules => ts/test-unit}/types/message/initializeAttachmentMetadata_test.ts (100%) diff --git a/test/modules/types/message/initializeAttachmentMetadata_test.ts b/ts/test-unit/types/message/initializeAttachmentMetadata_test.ts similarity index 100% rename from test/modules/types/message/initializeAttachmentMetadata_test.ts rename to ts/test-unit/types/message/initializeAttachmentMetadata_test.ts From 32a3ef518b3164b7a2e5e6073d1beb6e531a77a1 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Wed, 11 Apr 2018 11:57:31 -0400 Subject: [PATCH 014/122] Render media gallery placeholder panel --- js/views/conversation_view.js | 55 +++++++++++++++++++ preload.js | 3 + .../media-gallery/MediaGallery.tsx | 13 +++++ 3 files changed, 71 insertions(+) create mode 100644 ts/components/conversation/media-gallery/MediaGallery.tsx diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 91b09bfb86..62d4c950e8 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -208,6 +208,7 @@ 'click .update-group': 'newGroupUpdate', 'click .show-identity': 'showSafetyNumber', 'click .show-members': 'showMembers', + 'click .view-all-media': 'viewAllMedia', 'click .conversation-menu .hamburger': 'toggleMenu', click: 'onClick', 'click .bottom-bar': 'focusMessageField', @@ -630,6 +631,60 @@ } }, + viewAllMedia() { + // We have to do this manually, since our React component will not propagate click + // events up to its parent elements in the DOM. + this.closeMenu(); + + const ReactWrapper = Backbone.View.extend({ + initialize(options) { + const { Component, props, onClose } = options; + this.render(); + this.onClose = onClose; + + const updatedProps = Object.assign({}, props, { + close: () => { + if (onClose) { + onClose(); + return; + } + this.remove(); + }, + }); + + const element = window.React.createElement(Component, updatedProps); + window.ReactDOM.render(element, this.el); + }, + remove() { + window.ReactDOM.unmountComponentAtNode(this.el); + Backbone.View.prototype.remove.call(this); + }, + }); + + // Next: + // pull latest media + // need a way for react component to request further data + + // needed components: + // GalleryPanel + // Section - header, list of thumbnails + // Thumbnail + // Lightbox - or do we use the lightbox already in the app? + + const Component = window.Signal.Components.MediaGallery; + const props = { + number: 10, + }; + + const view = new ReactWrapper({ + Component, + props, + onClose: this.resetPanel.bind(this), + }); + + this.listenBack(view); + }, + focusMessageField() { this.$messageField.focus(); }, diff --git a/preload.js b/preload.js index d35da5a885..0bf24c7057 100644 --- a/preload.js +++ b/preload.js @@ -161,9 +161,12 @@ window.Signal.Debug = require('./js/modules/debug'); window.Signal.HTML = require('./ts/html'); window.Signal.Logs = require('./js/modules/logs'); +const { MediaGallery } = + require('./ts/components/conversation/media-gallery/MediaGallery'); const { Quote } = require('./ts/components/conversation/Quote'); window.Signal.Components = { + MediaGallery, Quote, }; diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx new file mode 100644 index 0000000000..6134835e4a --- /dev/null +++ b/ts/components/conversation/media-gallery/MediaGallery.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +interface Props { + number: number; +} + +export class MediaGallery extends React.Component { + public render() { + return ( +
      Hello Media Gallery! Number: {this.props.number}
      + ); + } +} From 272c49c5bfe52b680f9edd7cf2846e4693778ba9 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Wed, 11 Apr 2018 12:10:52 -0400 Subject: [PATCH 015/122] Use existing `ReactWrapper` --- js/views/conversation_view.js | 31 ++++--------------------------- 1 file changed, 4 insertions(+), 27 deletions(-) diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 62d4c950e8..9553874960 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -16,6 +16,8 @@ window.Whisper = window.Whisper || {}; + const { MediaGallery } = window.Signal.Components; + Whisper.ExpiredToast = Whisper.ToastView.extend({ render_attributes() { return { toastMessage: i18n('expiredWarning') }; @@ -636,30 +638,6 @@ // events up to its parent elements in the DOM. this.closeMenu(); - const ReactWrapper = Backbone.View.extend({ - initialize(options) { - const { Component, props, onClose } = options; - this.render(); - this.onClose = onClose; - - const updatedProps = Object.assign({}, props, { - close: () => { - if (onClose) { - onClose(); - return; - } - this.remove(); - }, - }); - - const element = window.React.createElement(Component, updatedProps); - window.ReactDOM.render(element, this.el); - }, - remove() { - window.ReactDOM.unmountComponentAtNode(this.el); - Backbone.View.prototype.remove.call(this); - }, - }); // Next: // pull latest media @@ -671,13 +649,12 @@ // Thumbnail // Lightbox - or do we use the lightbox already in the app? - const Component = window.Signal.Components.MediaGallery; const props = { number: 10, }; - const view = new ReactWrapper({ - Component, + const view = new window.Whisper.ReactWrapper({ + Component: MediaGallery, props, onClose: this.resetPanel.bind(this), }); From 94ef3bab80fb4e54a87e6c231388d4f5d6a48369 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Thu, 12 Apr 2018 12:53:28 -0400 Subject: [PATCH 016/122] Move test file --- .../types/message/initializeAttachmentMetadata_test.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename ts/{test-unit => test}/types/message/initializeAttachmentMetadata_test.ts (100%) diff --git a/ts/test-unit/types/message/initializeAttachmentMetadata_test.ts b/ts/test/types/message/initializeAttachmentMetadata_test.ts similarity index 100% rename from ts/test-unit/types/message/initializeAttachmentMetadata_test.ts rename to ts/test/types/message/initializeAttachmentMetadata_test.ts From 10bede85c96485d0d95725f4ef532bb15613e853 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Thu, 12 Apr 2018 16:15:20 -0400 Subject: [PATCH 017/122] Add `filesize` dependency --- package.json | 2 ++ yarn.lock | 8 ++++++++ 2 files changed, 10 insertions(+) diff --git a/package.json b/package.json index 36b2eb7546..7e159fc5af 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ }, "dependencies": { "@sindresorhus/is": "^0.8.0", + "@types/filesize": "^3.6.0", "@types/lodash": "^4.14.106", "archiver": "^2.1.1", "blob-util": "^1.3.0", @@ -68,6 +69,7 @@ "emoji-datasource-apple": "4.0.0", "emoji-js": "^3.4.0", "emoji-panel": "https://github.com/scottnonnenberg/emoji-panel.git#v0.5.5", + "filesize": "^3.6.1", "firstline": "^1.2.1", "form-data": "^2.3.2", "fs-extra": "^5.0.0", diff --git a/yarn.lock b/yarn.lock index ed9d1b1fd8..8983765fbc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -48,6 +48,10 @@ version "2.2.3" resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.3.tgz#3f0ff6873da793870e20a260cada55982f38a9e5" +"@types/filesize@^3.6.0": + version "3.6.0" + resolved "https://registry.yarnpkg.com/@types/filesize/-/filesize-3.6.0.tgz#5f1a25c7b4e3d5ee2bc63133d374d096b7008c8d" + "@types/lodash@^4.14.106": version "4.14.106" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.106.tgz#6093e9a02aa567ddecfe9afadca89e53e5dce4dd" @@ -3204,6 +3208,10 @@ filesize@3.5.11: version "3.5.11" resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.11.tgz#1919326749433bb3cf77368bd158caabcc19e9ee" +filesize@^3.6.1: + version "3.6.1" + resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317" + fill-range@^2.1.0: version "2.2.3" resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723" From 8ef04cb1fdf4aa5d99118bf3428be49ac08cd641 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Thu, 12 Apr 2018 16:20:23 -0400 Subject: [PATCH 018/122] Move `@types/*` dependencies to `devDependencies` --- package.json | 4 ++-- yarn.lock | 4 ---- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 7e159fc5af..47d2477215 100644 --- a/package.json +++ b/package.json @@ -50,8 +50,6 @@ }, "dependencies": { "@sindresorhus/is": "^0.8.0", - "@types/filesize": "^3.6.0", - "@types/lodash": "^4.14.106", "archiver": "^2.1.1", "blob-util": "^1.3.0", "blueimp-canvas-to-blob": "^3.14.0", @@ -98,6 +96,8 @@ "devDependencies": { "@types/chai": "^4.1.2", "@types/classnames": "^2.2.3", + "@types/filesize": "^3.6.0", + "@types/lodash": "^4.14.106", "@types/lodash": "^4.14.106", "@types/mocha": "^5.0.0", "@types/qs": "^6.5.1", diff --git a/yarn.lock b/yarn.lock index 8983765fbc..8051b0430f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -36,10 +36,6 @@ dependencies: samsam "1.3.0" -"@types/lodash@^4.14.106": - version "4.14.106" - resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.106.tgz#6093e9a02aa567ddecfe9afadca89e53e5dce4dd" - "@types/chai@^4.1.2": version "4.1.2" resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.1.2.tgz#f1af664769cfb50af805431c407425ed619daa21" From a8be4f2d8d61b53b864e418490a5fc58010d7244 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Thu, 12 Apr 2018 16:21:21 -0400 Subject: [PATCH 019/122] Expose Lodash in style guide --- ts/styleguide/StyleGuideUtil.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/ts/styleguide/StyleGuideUtil.ts b/ts/styleguide/StyleGuideUtil.ts index 0d61d39fe0..b19483157c 100644 --- a/ts/styleguide/StyleGuideUtil.ts +++ b/ts/styleguide/StyleGuideUtil.ts @@ -1,6 +1,3 @@ -import moment from 'moment'; -import qs from 'qs'; - import React from 'react'; import ReactDOM from 'react-dom'; import { @@ -8,6 +5,11 @@ import { sample, } from 'lodash'; +import _ from 'lodash'; +import moment from 'moment'; +import qs from 'qs'; + +export { _ }; // Helper components used in the Style Guide, exposed at 'util' in the global scope via // the 'context' option in react-styleguidist. From fc1c3aabf5cdb161794fe2a9590c4d5a9c98f65a Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Thu, 12 Apr 2018 16:23:26 -0400 Subject: [PATCH 020/122] Add scaffolding for media gallery --- styleguide.config.js | 5 + .../media-gallery/AttachmentListSection.tsx | 56 ++++++++++ .../media-gallery/DocumentListEntry.md | 19 ++++ .../media-gallery/DocumentListEntry.tsx | 97 ++++++++++++++++ .../media-gallery/ImageThumbnail.tsx | 44 ++++++++ .../media-gallery/LoadingIndicator.tsx | 13 +++ .../media-gallery/MediaGallery.md | 33 ++++++ .../media-gallery/MediaGallery.tsx | 105 +++++++++++++++++- .../media-gallery/propTypes/Message.tsx | 12 ++ ts/types/Attachment.ts | 2 +- 10 files changed, 382 insertions(+), 4 deletions(-) create mode 100644 ts/components/conversation/media-gallery/AttachmentListSection.tsx create mode 100644 ts/components/conversation/media-gallery/DocumentListEntry.md create mode 100644 ts/components/conversation/media-gallery/DocumentListEntry.tsx create mode 100644 ts/components/conversation/media-gallery/ImageThumbnail.tsx create mode 100644 ts/components/conversation/media-gallery/LoadingIndicator.tsx create mode 100644 ts/components/conversation/media-gallery/MediaGallery.md create mode 100644 ts/components/conversation/media-gallery/propTypes/Message.tsx diff --git a/styleguide.config.js b/styleguide.config.js index ea2955031a..af5f8fdf10 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -12,6 +12,11 @@ module.exports = { description: 'Everything necessary to render a conversation', components: 'ts/components/conversation/*.tsx', }, + { + name: 'Media Gallery', + description: 'Display media and documents in a conversation', + components: 'ts/components/conversation/media-gallery/*.tsx', + }, { name: 'Utility', description: 'Utility components used across the application', diff --git a/ts/components/conversation/media-gallery/AttachmentListSection.tsx b/ts/components/conversation/media-gallery/AttachmentListSection.tsx new file mode 100644 index 0000000000..785198eed1 --- /dev/null +++ b/ts/components/conversation/media-gallery/AttachmentListSection.tsx @@ -0,0 +1,56 @@ +import React from 'react'; + +import { ImageThumbnail } from './ImageThumbnail'; +import { DocumentListEntry } from './DocumentListEntry'; +import { Message } from './propTypes/Message'; + +const styles = { + container: { + width: '100%', + }, + header: { + fontFamily: '', + }, + itemContainer: { + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'flex-start', + alignItems: 'flex-start', + } as React.CSSProperties, +}; + +interface Props { + i18n: (value: string) => string; + header?: string; + type: 'media' | 'documents'; + messages: Array; +} + +export class AttachmentListSection extends React.Component { + public renderItems() { + const { i18n, messages, type } = this.props; + const Component = type === 'media' ? ImageThumbnail : DocumentListEntry; + + return messages.map((message) => ( + + )); + } + + public render() { + const { header } = this.props; + + return ( +
      +
      {header}
      +
      + {this.renderItems()} +
      +
      + ); + } +} diff --git a/ts/components/conversation/media-gallery/DocumentListEntry.md b/ts/components/conversation/media-gallery/DocumentListEntry.md new file mode 100644 index 0000000000..776eaa8416 --- /dev/null +++ b/ts/components/conversation/media-gallery/DocumentListEntry.md @@ -0,0 +1,19 @@ +DocumentListEntry example: + +```js + + + +``` diff --git a/ts/components/conversation/media-gallery/DocumentListEntry.tsx b/ts/components/conversation/media-gallery/DocumentListEntry.tsx new file mode 100644 index 0000000000..5f84b2fdb3 --- /dev/null +++ b/ts/components/conversation/media-gallery/DocumentListEntry.tsx @@ -0,0 +1,97 @@ +import React from 'react'; + +import moment from 'moment'; +import formatFileSize from 'filesize'; + +// import { LoadingIndicator } from './LoadingIndicator'; + + +interface Props { + fileName: string | null; + fileSize?: number; + i18n: (key: string, values?: Array) => string; + timestamp: number; +} + +const styles = { + container: { + width: '100%', + height: 72, + borderBottomWidth: 1, + borderBottomColor: '#ccc', + borderBottomStyle: 'solid', + }, + itemContainer: { + display: 'flex', + flexDirection: 'row', + flexWrap: 'nowrap', + alignItems: 'center', + height: '100%', + } as React.CSSProperties, + itemMetadata: { + display: 'inline-flex', + flexDirection: 'column', + flexGrow: 1, + flexShrink: 0, + marginLeft: 8, + marginRight: 8, + } as React.CSSProperties, + itemDate: { + display: 'inline-block', + flexShrink: 0, + }, + itemIcon: { + flexShrink: 0, + }, + itemFileSize: { + display: 'inline-block', + marginTop: 8, + fontSize: '80%', + }, +}; + +export class DocumentListEntry extends React.Component { + public renderContent() { + const { fileName, fileSize, timestamp } = this.props; + + // if (!attachment.data) { + // return ; + // } + + return ( +
      + +
      + {fileName} + + {typeof fileSize === 'number' ? formatFileSize(fileSize) : ''} + +
      +
      + {moment(timestamp).format('dddd, MMMM D, Y')} +
      +
      + ); + } + + public render() { + return ( +
      + {this.renderContent()} +
      + ); + } +} diff --git a/ts/components/conversation/media-gallery/ImageThumbnail.tsx b/ts/components/conversation/media-gallery/ImageThumbnail.tsx new file mode 100644 index 0000000000..5635b30113 --- /dev/null +++ b/ts/components/conversation/media-gallery/ImageThumbnail.tsx @@ -0,0 +1,44 @@ +import React from 'react'; + +import { LoadingIndicator } from './LoadingIndicator'; +import { Message } from './propTypes/Message'; + +interface Props { + message: Message; + i18n: (value: string) => string; +} + +const styles = { + container: { + backgroundColor: '#f3f3f3', + marginRight: 4, + marginBottom: 4, + width: 94, + height: 94, + }, +}; + +export class ImageThumbnail extends React.Component { + public renderContent() { + const { i18n, message } = this.props; + + if (!message.imageUrl) { + return ; + } + + return ( + {`${i18n('messageCaption')}: + ); + } + + public render() { + return ( +
      + {this.renderContent()} +
      + ); + } +} diff --git a/ts/components/conversation/media-gallery/LoadingIndicator.tsx b/ts/components/conversation/media-gallery/LoadingIndicator.tsx new file mode 100644 index 0000000000..349560a8ec --- /dev/null +++ b/ts/components/conversation/media-gallery/LoadingIndicator.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +export const LoadingIndicator = () => { + return ( +
      +
      + + + +
      +
      + ); +}; diff --git a/ts/components/conversation/media-gallery/MediaGallery.md b/ts/components/conversation/media-gallery/MediaGallery.md new file mode 100644 index 0000000000..5ba41bd81b --- /dev/null +++ b/ts/components/conversation/media-gallery/MediaGallery.md @@ -0,0 +1,33 @@ +```jsx +const YEAR_MS = 1 * 12 * 30 * 24 * 60 * 60 * 1000; +const tokens = ['foo', 'bar', 'baz', 'qux', 'quux']; +const fileExtensions = ['docx', 'pdf', 'txt', 'mp3', 'wmv', 'tiff']; +const createRandomMessage = (props) => { + const now = Date.now(); + const fileName = + `${_.sample(tokens)}${_.sample(tokens)}.${_.sample(fileExtensions)}`; + return { + id: _.random(now).toString(), + received_at: _.random(now - YEAR_MS, now), + attachments: [{ + fileName, + data: null, + }], + + // TODO: Revisit + imageUrl: 'https://placekitten.com/94/94', + ...props, + }; +}; + +const startTime = Date.now(); +const messages = _.sortBy( + _.range(30).map(createRandomMessage), + message => -message.received_at +); + + key} + messages={messages} +/> +``` diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx index 6134835e4a..3ecb7215ea 100644 --- a/ts/components/conversation/media-gallery/MediaGallery.tsx +++ b/ts/components/conversation/media-gallery/MediaGallery.tsx @@ -1,13 +1,112 @@ import React from 'react'; +import { AttachmentListSection } from './AttachmentListSection'; +import { Message } from './propTypes/Message'; + + +type AttachmentType = 'media' | 'documents'; + interface Props { - number: number; + i18n: (key: string, values?: Array) => string; + messages: Array; } -export class MediaGallery extends React.Component { +interface State { + selectedTab: AttachmentType; +} + +const COLOR_GREY = '#f3f3f3'; + +const tabStyle = { + width: '100%', + backgroundColor: COLOR_GREY, + padding: 20, + textAlign: 'center', +}; + +const styles = { + tabContainer: { + cursor: 'pointer', + display: 'flex', + width: '100%', + }, + tab: { + default: tabStyle, + active: { + ...tabStyle, + borderBottom: '2px solid #08f', + }, + }, + attachmentsContainer: { + padding: 20, + }, +}; + +interface TabSelectEvent { + type: AttachmentType; +} + +const Tab = ({ + isSelected, + label, + onSelect, + type, +}: { + isSelected: boolean, + label: string, + onSelect?: (event: TabSelectEvent) => void, + type: AttachmentType, +}) => { + const handleClick = onSelect ? + () => onSelect({ type }) : undefined; + + return ( +
      + {label} +
      + ); +}; + + +export class MediaGallery extends React.Component { + public state: State = { + selectedTab: 'media', + }; + public render() { + const { selectedTab } = this.state; + return ( -
      Hello Media Gallery! Number: {this.props.number}
      +
      +
      + + +
      +
      + +
      +
      ); } + + private handleTabSelect = (event: TabSelectEvent): void => { + this.setState({selectedTab: event.type}); + } } diff --git a/ts/components/conversation/media-gallery/propTypes/Message.tsx b/ts/components/conversation/media-gallery/propTypes/Message.tsx new file mode 100644 index 0000000000..094a5a6eb9 --- /dev/null +++ b/ts/components/conversation/media-gallery/propTypes/Message.tsx @@ -0,0 +1,12 @@ +export interface Message { + id: string; + body?: string; + received_at: number; + attachments: Array<{ + data?: ArrayBuffer; + fileName?: string; + }>; + + // TODO: Revisit + imageUrl: string; +} diff --git a/ts/types/Attachment.ts b/ts/types/Attachment.ts index 4f384d1c3a..44138ae225 100644 --- a/ts/types/Attachment.ts +++ b/ts/types/Attachment.ts @@ -19,7 +19,7 @@ export interface Attachment { // key?: ArrayBuffer; // digest?: ArrayBuffer; // flags?: number; -}; +} export const isVisualMedia = (attachment: Attachment): boolean => { const { contentType } = attachment; From 923d5ff0888d585518a3020804de19805a519327 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Thu, 12 Apr 2018 17:19:13 -0400 Subject: [PATCH 021/122] Add `missingCaseError` function --- ts/missingCaseError.ts | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 ts/missingCaseError.ts diff --git a/ts/missingCaseError.ts b/ts/missingCaseError.ts new file mode 100644 index 0000000000..c32999bac4 --- /dev/null +++ b/ts/missingCaseError.ts @@ -0,0 +1,21 @@ +// `missingCaseError` is useful for compile-time checking that all `case`s in +// a `switch` statement have been handled, e.g. +// +// type AttachmentType = 'media' | 'documents'; +// +// const type: AttachmentType = selectedTab; +// switch (type) { +// case 'media': +// return ; +// case 'documents': +// return ; +// default: +// return missingCaseError(type); +// } +// +// If we extended `AttachmentType` to `'media' | 'documents' | 'links'` the code +// above would trigger a compiler error stating that `'links'` has not been +// handled by our `switch` / `case` statement which is useful for code +// maintenance and system evolution. +export const missingCaseError = (x: never): TypeError => + new TypeError(`Unhandled case: ${x}`); From 66516fd36a51475b0f1a9cc44d19082e0654c2f6 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Thu, 12 Apr 2018 17:22:26 -0400 Subject: [PATCH 022/122] Use short format for dates --- ts/components/conversation/media-gallery/DocumentListEntry.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/components/conversation/media-gallery/DocumentListEntry.tsx b/ts/components/conversation/media-gallery/DocumentListEntry.tsx index 5f84b2fdb3..0053aa6bd1 100644 --- a/ts/components/conversation/media-gallery/DocumentListEntry.tsx +++ b/ts/components/conversation/media-gallery/DocumentListEntry.tsx @@ -81,7 +81,7 @@ export class DocumentListEntry extends React.Component {
      - {moment(timestamp).format('dddd, MMMM D, Y')} + {moment(timestamp).format('ddd, MMM D, Y')}
      ); From a86a596f34fdb6aa33feb9f9fdce31d1957d8ed2 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Thu, 12 Apr 2018 20:18:25 -0400 Subject: [PATCH 023/122] Add translations for section headers in media gallery --- _locales/en/messages.json | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index fdbcc5d3a2..168fad9060 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -322,6 +322,34 @@ "incomingError": { "message": "Error handling incoming message." }, + "media": { + "message": "Media", + "description": "Header of the default pane in the media gallery, showing images and videos" + }, + "documents": { + "message": "Documents", + "description": "Header of the secondary pane in the media gallery, showing every non-media attachment" + }, + "messageCaption": { + "message": "Message caption", + "description": "Prefix of attachment alt tags in the media gallery" + }, + "today": { + "message": "Today", + "description": "Section header in the media gallery" + }, + "yesterday": { + "message": "Yesterday", + "description": "Section header in the media gallery" + }, + "thisWeek": { + "message": "This Week", + "description": "Section header in the media gallery" + }, + "thisMonth": { + "message": "This Month", + "description": "Section header in the media gallery" + }, "unsupportedAttachment": { "message": "Unsupported attachment type. Click to save.", "description": "Displayed for incoming unsupported attachment" From ae419764bf60529aff83573b86455a3500ed56df Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Thu, 12 Apr 2018 20:19:16 -0400 Subject: [PATCH 024/122] Use arrow function over `.bind` --- js/views/conversation_view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 9553874960..41a21542e1 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -656,7 +656,7 @@ const view = new window.Whisper.ReactWrapper({ Component: MediaGallery, props, - onClose: this.resetPanel.bind(this), + onClose: () => this.resetPanel(), }); this.listenBack(view); From 9053b6acfca7e8d6ad920aa79cfc1f9986c9e8f8 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Thu, 12 Apr 2018 20:41:04 -0400 Subject: [PATCH 025/122] Remove unused style --- .../conversation/media-gallery/AttachmentListSection.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/ts/components/conversation/media-gallery/AttachmentListSection.tsx b/ts/components/conversation/media-gallery/AttachmentListSection.tsx index 785198eed1..b306c66887 100644 --- a/ts/components/conversation/media-gallery/AttachmentListSection.tsx +++ b/ts/components/conversation/media-gallery/AttachmentListSection.tsx @@ -9,7 +9,6 @@ const styles = { width: '100%', }, header: { - fontFamily: '', }, itemContainer: { display: 'flex', From e34347f2908e0fcb001efa531f9837c6bed5f218 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Thu, 12 Apr 2018 20:45:14 -0400 Subject: [PATCH 026/122] Add `groupMessagesByDate` --- .../media-gallery/groupMessagesByDate.ts | 52 +++++ .../media-gallery/groupMessagesByDate.ts | 183 ++++++++++++++++++ 2 files changed, 235 insertions(+) create mode 100644 ts/components/conversation/media-gallery/groupMessagesByDate.ts create mode 100644 ts/test/components/media-gallery/groupMessagesByDate.ts diff --git a/ts/components/conversation/media-gallery/groupMessagesByDate.ts b/ts/components/conversation/media-gallery/groupMessagesByDate.ts new file mode 100644 index 0000000000..10a869c06d --- /dev/null +++ b/ts/components/conversation/media-gallery/groupMessagesByDate.ts @@ -0,0 +1,52 @@ +import moment from 'moment'; +import { groupBy, sortBy } from 'lodash'; + +import { Message } from './propTypes/Message'; + + +export const groupMessagesByDate = (timestamp: number, messages: Array): any => { + const referenceDateTime = moment.utc(timestamp); + const today = moment(referenceDateTime).startOf('day'); + const yesterday = moment(referenceDateTime).subtract(1, 'day').startOf('day'); + const thisWeek = moment(referenceDateTime).startOf('week'); + const thisMonth = moment(referenceDateTime).startOf('month'); + + const sorted = sortBy(messages, (message) => -message.received_at); + const annotations = sorted.map((message) => { + const date = moment(message.received_at); + + if (date.isAfter(today)) { + return { + order: 0, + label: 'today', + message, + }; + } else if (date.isAfter(yesterday)) { + return { + order: 1, + label: 'yesterday', + message, + }; + } else if (date.isAfter(thisWeek)) { + return { + order: 2, + label: 'thisWeek', + message, + }; + } else if (date.isAfter(thisMonth)) { + return { + order: 3, + label: 'thisMonth', + message, + }; + } + + return { + order: (date.year() * 100) + date.month(), + label: 'yearMonth', + message, + }; + }); + + return groupBy(annotations, 'label'); +}; diff --git a/ts/test/components/media-gallery/groupMessagesByDate.ts b/ts/test/components/media-gallery/groupMessagesByDate.ts new file mode 100644 index 0000000000..6f0d9dbb56 --- /dev/null +++ b/ts/test/components/media-gallery/groupMessagesByDate.ts @@ -0,0 +1,183 @@ +import 'mocha'; +import { assert } from 'chai'; + +import { groupMessagesByDate } from + '../../../components/conversation/media-gallery/groupMessagesByDate'; +import { Message } from + '../../../components/conversation/media-gallery/propTypes/Message'; + + +const toMessage = (date: Date): Message => ({ + id: date.toUTCString(), + received_at: date.getTime(), + attachments: [], +}); + +describe('groupMessagesByDate', () => { + it('should group messages', () => { + const referenceTime = new Date('2018-04-12T18:00Z').getTime(); + const input: Array = [ + // Today + toMessage(new Date('2018-04-12T12:00Z')), + toMessage(new Date('2018-04-12T07:00Z')), + toMessage(new Date('2018-04-12T00:01Z')), + // This week + toMessage(new Date('2018-04-11T23:59Z')), + toMessage(new Date('2018-04-09T00:01Z')), + // This month + toMessage(new Date('2018-04-08T23:59Z')), + toMessage(new Date('2018-04-05T09:00Z')), + toMessage(new Date('2018-04-01T00:01Z')), + // March 2018 + toMessage(new Date('2018-03-31T23:59Z')), + toMessage(new Date('2018-03-28T14:00Z')), + toMessage(new Date('2018-03-01T14:00Z')), + // February 2011 + toMessage(new Date('2011-02-28T23:59Z')), + toMessage(new Date('2011-02-15T10:00Z')), + toMessage(new Date('2011-02-01T10:00Z')), + ]; + + const expected = { + today: [ + { + order: 0, + label: 'today', + message: { + id: 'Thu, 12 Apr 2018 12:00:00 GMT', + received_at: 1523534400000, + attachments: [], + }, + }, + { + order: 0, + label: 'today', + message: { + id: 'Thu, 12 Apr 2018 07:00:00 GMT', + received_at: 1523516400000, + attachments: [], + }, + }, + { + order: 0, + label: 'today', + message: { + id: 'Thu, 12 Apr 2018 00:01:00 GMT', + received_at: 1523491260000, + attachments: [], + }, + }, + ], + yesterday: [ + { + order: 1, + label: 'yesterday', + message: { + id: 'Wed, 11 Apr 2018 23:59:00 GMT', + received_at: 1523491140000, + attachments: [], + }, + }, + ], + thisWeek: [ + { + order: 2, + label: 'thisWeek', + message: { + id: 'Mon, 09 Apr 2018 00:01:00 GMT', + received_at: 1523232060000, + attachments: [], + }, + }, + { + order: 2, + label: 'thisWeek', + message: { + id: 'Sun, 08 Apr 2018 23:59:00 GMT', + received_at: 1523231940000, + attachments: [], + }, + }, + ], + thisMonth: [ + { + order: 3, + label: 'thisMonth', + message: { + id: 'Thu, 05 Apr 2018 09:00:00 GMT', + received_at: 1522918800000, + attachments: [], + }, + }, + { + order: 3, + label: 'thisMonth', + message: { + id: 'Sun, 01 Apr 2018 00:01:00 GMT', + received_at: 1522540860000, + attachments: [], + }, + }, + ], + yearMonth: [ + { + order: 201802, + label: 'yearMonth', + message: { + id: 'Sat, 31 Mar 2018 23:59:00 GMT', + received_at: 1522540740000, + attachments: [], + }, + }, + { + order: 201802, + label: 'yearMonth', + message: { + id: 'Wed, 28 Mar 2018 14:00:00 GMT', + received_at: 1522245600000, + attachments: [], + }, + }, + { + order: 201802, + label: 'yearMonth', + message: { + id: 'Thu, 01 Mar 2018 14:00:00 GMT', + received_at: 1519912800000, + attachments: [], + }, + }, + { + order: 201101, + label: 'yearMonth', + message: { + id: 'Mon, 28 Feb 2011 23:59:00 GMT', + received_at: 1298937540000, + attachments: [], + }, + }, + { + order: 201101, + label: 'yearMonth', + message: { + id: 'Tue, 15 Feb 2011 10:00:00 GMT', + received_at: 1297764000000, + attachments: [], + }, + }, + { + order: 201101, + label: 'yearMonth', + message: { + id: 'Tue, 01 Feb 2011 10:00:00 GMT', + received_at: 1296554400000, + attachments: [], + }, + }, + ], + }; + + const actual = groupMessagesByDate(referenceTime, input); + assert.deepEqual(actual, expected); + }); +}); From d7b21ef5dc14d7c873a86e59c37ec8c79f0b7b23 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Thu, 12 Apr 2018 20:56:05 -0400 Subject: [PATCH 027/122] Render attachments grouped by date --- js/views/conversation_view.js | 3 +- .../media-gallery/AttachmentListSection.tsx | 39 ++++++++++---- .../media-gallery/DocumentListEntry.tsx | 2 +- .../media-gallery/ImageThumbnail.tsx | 24 ++++++--- .../media-gallery/MediaGallery.md | 12 +++-- .../media-gallery/MediaGallery.tsx | 53 ++++++++++++++++--- .../media-gallery/propTypes/Message.tsx | 3 +- 7 files changed, 104 insertions(+), 32 deletions(-) diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 41a21542e1..26214a7f57 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -650,7 +650,8 @@ // Lightbox - or do we use the lightbox already in the app? const props = { - number: 10, + media: [], + documents: [], }; const view = new window.Whisper.ReactWrapper({ diff --git a/ts/components/conversation/media-gallery/AttachmentListSection.tsx b/ts/components/conversation/media-gallery/AttachmentListSection.tsx index b306c66887..65c58aa957 100644 --- a/ts/components/conversation/media-gallery/AttachmentListSection.tsx +++ b/ts/components/conversation/media-gallery/AttachmentListSection.tsx @@ -1,8 +1,10 @@ import React from 'react'; -import { ImageThumbnail } from './ImageThumbnail'; import { DocumentListEntry } from './DocumentListEntry'; +import { ImageThumbnail } from './ImageThumbnail'; import { Message } from './propTypes/Message'; +import { missingCaseError } from '../../../missingCaseError'; + const styles = { container: { @@ -29,15 +31,34 @@ interface Props { export class AttachmentListSection extends React.Component { public renderItems() { const { i18n, messages, type } = this.props; - const Component = type === 'media' ? ImageThumbnail : DocumentListEntry; - return messages.map((message) => ( - - )); + return messages.map((message) => { + const { attachments } = message; + const firstAttachment = attachments[0]; + + switch (type) { + case 'media': + return ( + + ); + case 'documents': + return ( + + ); + default: + return missingCaseError(type); + } + }); } public render() { diff --git a/ts/components/conversation/media-gallery/DocumentListEntry.tsx b/ts/components/conversation/media-gallery/DocumentListEntry.tsx index 0053aa6bd1..19c586c637 100644 --- a/ts/components/conversation/media-gallery/DocumentListEntry.tsx +++ b/ts/components/conversation/media-gallery/DocumentListEntry.tsx @@ -7,7 +7,7 @@ import formatFileSize from 'filesize'; interface Props { - fileName: string | null; + fileName?: string; fileSize?: number; i18n: (key: string, values?: Array) => string; timestamp: number; diff --git a/ts/components/conversation/media-gallery/ImageThumbnail.tsx b/ts/components/conversation/media-gallery/ImageThumbnail.tsx index 5635b30113..9a774373b2 100644 --- a/ts/components/conversation/media-gallery/ImageThumbnail.tsx +++ b/ts/components/conversation/media-gallery/ImageThumbnail.tsx @@ -8,28 +8,38 @@ interface Props { i18n: (value: string) => string; } +const size = { + width: 94, + height: 94, +}; const styles = { container: { + ...size, backgroundColor: '#f3f3f3', marginRight: 4, marginBottom: 4, - width: 94, - height: 94, + }, + image: { + ...size, + backgroundSize: 'cover', }, }; export class ImageThumbnail extends React.Component { public renderContent() { - const { i18n, message } = this.props; + const {/* i18n, */message } = this.props; - if (!message.imageUrl) { + if (!message.objectURL) { return ; } return ( - {`${i18n('messageCaption')}: ); } diff --git a/ts/components/conversation/media-gallery/MediaGallery.md b/ts/components/conversation/media-gallery/MediaGallery.md index 5ba41bd81b..cf862db7fa 100644 --- a/ts/components/conversation/media-gallery/MediaGallery.md +++ b/ts/components/conversation/media-gallery/MediaGallery.md @@ -10,24 +10,26 @@ const createRandomMessage = (props) => { id: _.random(now).toString(), received_at: _.random(now - YEAR_MS, now), attachments: [{ - fileName, data: null, + fileName, + size: _.random(1000, 1000 * 1000 * 50), }], // TODO: Revisit - imageUrl: 'https://placekitten.com/94/94', + objectURL: `https://placekitten.com/${_.random(50, 150)}/${_.random(50, 150)}`, ...props, }; }; const startTime = Date.now(); const messages = _.sortBy( - _.range(30).map(createRandomMessage), + _.range(25).map(createRandomMessage), message => -message.received_at ); key} - messages={messages} + i18n={window.i18n} + media={messages} + documents={messages} /> ``` diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx index 3ecb7215ea..f4a267d718 100644 --- a/ts/components/conversation/media-gallery/MediaGallery.tsx +++ b/ts/components/conversation/media-gallery/MediaGallery.tsx @@ -1,20 +1,26 @@ import React from 'react'; +import moment from 'moment'; +import { map } from 'lodash'; + import { AttachmentListSection } from './AttachmentListSection'; +import { groupMessagesByDate } from './groupMessagesByDate'; import { Message } from './propTypes/Message'; type AttachmentType = 'media' | 'documents'; interface Props { + documents: Array; i18n: (key: string, values?: Array) => string; - messages: Array; + media: Array; } interface State { selectedTab: AttachmentType; } +const MONTH_FORMAT = 'MMMM YYYY'; const COLOR_GREY = '#f3f3f3'; const tabStyle = { @@ -76,6 +82,10 @@ export class MediaGallery extends React.Component { selectedTab: 'media', }; + private handleTabSelect = (event: TabSelectEvent): void => { + this.setState({selectedTab: event.type}); + } + public render() { const { selectedTab } = this.state; @@ -96,17 +106,44 @@ export class MediaGallery extends React.Component { />
      - + {this.renderSections()}
      ); } - private handleTabSelect = (event: TabSelectEvent): void => { - this.setState({selectedTab: event.type}); + private renderSections() { + const { i18n, media, documents } = this.props; + const { selectedTab } = this.state; + + const messages = selectedTab === 'media' ? media : documents; + const type = selectedTab; + + if (!messages || messages.length === 0) { + // return ; + return null; + } + + const now = Date.now(); + const groups = groupMessagesByDate(now, messages); + return map(groups, (annotations) => { + const first = annotations[0]; + const date = moment(first.message.received_at); + + const header = first.label === 'yearMonth' + ? date.format(MONTH_FORMAT) + : i18n(first.label); + const groupMessages = map(annotations, 'message'); + + return ( + + ); + }); } } diff --git a/ts/components/conversation/media-gallery/propTypes/Message.tsx b/ts/components/conversation/media-gallery/propTypes/Message.tsx index 094a5a6eb9..209fc25652 100644 --- a/ts/components/conversation/media-gallery/propTypes/Message.tsx +++ b/ts/components/conversation/media-gallery/propTypes/Message.tsx @@ -5,8 +5,9 @@ export interface Message { attachments: Array<{ data?: ArrayBuffer; fileName?: string; + size?: number; }>; // TODO: Revisit - imageUrl: string; + objectURL?: string; } From 3d70e46aead2b845214f32fb9756915779351982 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 10:53:15 -0400 Subject: [PATCH 028/122] Calculate dates in UTC --- .../media-gallery/groupMessagesByDate.ts | 4 +- .../media-gallery/groupMessagesByDate.ts | 56 +++---------------- 2 files changed, 10 insertions(+), 50 deletions(-) diff --git a/ts/components/conversation/media-gallery/groupMessagesByDate.ts b/ts/components/conversation/media-gallery/groupMessagesByDate.ts index 10a869c06d..f0d53824b4 100644 --- a/ts/components/conversation/media-gallery/groupMessagesByDate.ts +++ b/ts/components/conversation/media-gallery/groupMessagesByDate.ts @@ -8,12 +8,12 @@ export const groupMessagesByDate = (timestamp: number, messages: Array) const referenceDateTime = moment.utc(timestamp); const today = moment(referenceDateTime).startOf('day'); const yesterday = moment(referenceDateTime).subtract(1, 'day').startOf('day'); - const thisWeek = moment(referenceDateTime).startOf('week'); + const thisWeek = moment(referenceDateTime).startOf('isoWeek'); const thisMonth = moment(referenceDateTime).startOf('month'); const sorted = sortBy(messages, (message) => -message.received_at); const annotations = sorted.map((message) => { - const date = moment(message.received_at); + const date = moment.utc(message.received_at); if (date.isAfter(today)) { return { diff --git a/ts/test/components/media-gallery/groupMessagesByDate.ts b/ts/test/components/media-gallery/groupMessagesByDate.ts index 6f0d9dbb56..a44258e2a2 100644 --- a/ts/test/components/media-gallery/groupMessagesByDate.ts +++ b/ts/test/components/media-gallery/groupMessagesByDate.ts @@ -15,26 +15,22 @@ const toMessage = (date: Date): Message => ({ describe('groupMessagesByDate', () => { it('should group messages', () => { - const referenceTime = new Date('2018-04-12T18:00Z').getTime(); + const referenceTime = new Date('2018-04-12T18:00Z').getTime(); // Thu const input: Array = [ // Today - toMessage(new Date('2018-04-12T12:00Z')), - toMessage(new Date('2018-04-12T07:00Z')), - toMessage(new Date('2018-04-12T00:01Z')), + toMessage(new Date('2018-04-12T12:00Z')), // Thu + toMessage(new Date('2018-04-12T00:01Z')), // Thu // This week - toMessage(new Date('2018-04-11T23:59Z')), - toMessage(new Date('2018-04-09T00:01Z')), + toMessage(new Date('2018-04-11T23:59Z')), // Wed + toMessage(new Date('2018-04-09T00:01Z')), // Mon // This month - toMessage(new Date('2018-04-08T23:59Z')), - toMessage(new Date('2018-04-05T09:00Z')), + toMessage(new Date('2018-04-08T23:59Z')), // Sun toMessage(new Date('2018-04-01T00:01Z')), // March 2018 toMessage(new Date('2018-03-31T23:59Z')), - toMessage(new Date('2018-03-28T14:00Z')), toMessage(new Date('2018-03-01T14:00Z')), // February 2011 toMessage(new Date('2011-02-28T23:59Z')), - toMessage(new Date('2011-02-15T10:00Z')), toMessage(new Date('2011-02-01T10:00Z')), ]; @@ -49,15 +45,6 @@ describe('groupMessagesByDate', () => { attachments: [], }, }, - { - order: 0, - label: 'today', - message: { - id: 'Thu, 12 Apr 2018 07:00:00 GMT', - received_at: 1523516400000, - attachments: [], - }, - }, { order: 0, label: 'today', @@ -89,23 +76,14 @@ describe('groupMessagesByDate', () => { attachments: [], }, }, - { - order: 2, - label: 'thisWeek', - message: { - id: 'Sun, 08 Apr 2018 23:59:00 GMT', - received_at: 1523231940000, - attachments: [], - }, - }, ], thisMonth: [ { order: 3, label: 'thisMonth', message: { - id: 'Thu, 05 Apr 2018 09:00:00 GMT', - received_at: 1522918800000, + id: 'Sun, 08 Apr 2018 23:59:00 GMT', + received_at: 1523231940000, attachments: [], }, }, @@ -129,15 +107,6 @@ describe('groupMessagesByDate', () => { attachments: [], }, }, - { - order: 201802, - label: 'yearMonth', - message: { - id: 'Wed, 28 Mar 2018 14:00:00 GMT', - received_at: 1522245600000, - attachments: [], - }, - }, { order: 201802, label: 'yearMonth', @@ -156,15 +125,6 @@ describe('groupMessagesByDate', () => { attachments: [], }, }, - { - order: 201101, - label: 'yearMonth', - message: { - id: 'Tue, 15 Feb 2011 10:00:00 GMT', - received_at: 1297764000000, - attachments: [], - }, - }, { order: 201101, label: 'yearMonth', From cf1d621bce00ef40379b2c707bacd3e1b3719fa2 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 10:55:08 -0400 Subject: [PATCH 029/122] Allow line breaks in long `import` statements --- tslint.json | 1 + 1 file changed, 1 insertion(+) diff --git a/tslint.json b/tslint.json index 95ebd6f784..78b5364460 100644 --- a/tslint.json +++ b/tslint.json @@ -7,6 +7,7 @@ "jsRules": {}, "rules": { "array-type": [true, "generic"], + "import-spacing": false, "interface-name": [true, "never-prefix"], "mocha-avoid-only": true, From 832b6309a2c4d18e3e167ddaf6a862d16e53674f Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 10:55:16 -0400 Subject: [PATCH 030/122] Limit line length --- tslint.json | 1 + 1 file changed, 1 insertion(+) diff --git a/tslint.json b/tslint.json index 78b5364460..c0d3f4f1b2 100644 --- a/tslint.json +++ b/tslint.json @@ -9,6 +9,7 @@ "array-type": [true, "generic"], "import-spacing": false, "interface-name": [true, "never-prefix"], + "max-line-length": [true, 90], "mocha-avoid-only": true, // Disabled until we can allow dynamically generated tests: From f367a9b05963a02f4f471e5e85c23112e2d25ef5 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 10:55:34 -0400 Subject: [PATCH 031/122] Move `private` method below `public` ones --- js/views/conversation_view.js | 1 - ts/components/conversation/media-gallery/MediaGallery.tsx | 8 ++++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 26214a7f57..90f47abac7 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -638,7 +638,6 @@ // events up to its parent elements in the DOM. this.closeMenu(); - // Next: // pull latest media // need a way for react component to request further data diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx index f4a267d718..0d24021dd2 100644 --- a/ts/components/conversation/media-gallery/MediaGallery.tsx +++ b/ts/components/conversation/media-gallery/MediaGallery.tsx @@ -82,10 +82,6 @@ export class MediaGallery extends React.Component { selectedTab: 'media', }; - private handleTabSelect = (event: TabSelectEvent): void => { - this.setState({selectedTab: event.type}); - } - public render() { const { selectedTab } = this.state; @@ -112,6 +108,10 @@ export class MediaGallery extends React.Component { ); } + private handleTabSelect = (event: TabSelectEvent): void => { + this.setState({selectedTab: event.type}); + } + private renderSections() { const { i18n, media, documents } = this.props; const { selectedTab } = this.state; From 3a8c3ccdab2db7878493ab923e61716f19c2ac05 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 11:23:38 -0400 Subject: [PATCH 032/122] Add `prettier` --- package.json | 1 + yarn.lock | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/package.json b/package.json index 47d2477215..3c3b1e1288 100644 --- a/package.json +++ b/package.json @@ -133,6 +133,7 @@ "node-sass-import-once": "^1.2.0", "nsp": "^3.2.1", "nyc": "^11.4.1", + "prettier": "1.12.0", "qs": "^6.5.1", "react-docgen-typescript": "^1.2.6", "react-styleguidist": "^7.0.1", diff --git a/yarn.lock b/yarn.lock index 8051b0430f..930fe84913 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6893,6 +6893,10 @@ preserve@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" +prettier@1.12.0: + version "1.12.0" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.12.0.tgz#d26fc5894b9230de97629b39cae225b503724ce8" + pretty-bytes@^1.0.2: version "1.0.4" resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-1.0.4.tgz#0a22e8210609ad35542f8c8d5d2159aff0751c84" From 99921ed84891bef48ae0a9918326da8918f75dd7 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 12:34:24 -0400 Subject: [PATCH 033/122] Enable strict `null` checks --- tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index ef472b2879..2e4f9d08b8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -24,7 +24,7 @@ /* Strict Type-Checking Options */ "strict": true, /* Enable all strict type-checking options. */ // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ - // "strictNullChecks": true, /* Enable strict null checks. */ + "strictNullChecks": true, /* Enable strict null checks. */ // "strictFunctionTypes": true, /* Enable strict checking of function types. */ // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ From 39d5f3c4136a1309b31a73f19c432342a8cef0a6 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 12:45:18 -0400 Subject: [PATCH 034/122] Enable strict type checking features --- tsconfig.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index 2e4f9d08b8..890c2b9f02 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,12 +23,12 @@ /* Strict Type-Checking Options */ "strict": true, /* Enable all strict type-checking options. */ - // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ + "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ "strictNullChecks": true, /* Enable strict null checks. */ - // "strictFunctionTypes": true, /* Enable strict checking of function types. */ - // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ - // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ - // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ + "strictFunctionTypes": true, /* Enable strict checking of function types. */ + "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ + "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ + "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ /* Additional Checks */ "noUnusedLocals": true, /* Report errors on unused locals. */ From 9858e0e6806de99b99760692a75d1c9210886169 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 15:34:36 -0400 Subject: [PATCH 035/122] Fix translation description --- _locales/en/messages.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 168fad9060..7bbe419904 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -667,7 +667,7 @@ }, "deleteAllDataProgress": { "message": "Disconnecting and deleting all data", - "description": "Text of the button that deletes all data" + "description": "Message shown to user when app is disconnected and data deleted" }, "notifications": { "message": "Notifications", From 04acdebe4829999d447b771f61c990a63df4bfbf Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 15:50:19 -0400 Subject: [PATCH 036/122] TSLint: Align various syntax elements --- tslint.json | 1 + 1 file changed, 1 insertion(+) diff --git a/tslint.json b/tslint.json index c0d3f4f1b2..a7dbb34503 100644 --- a/tslint.json +++ b/tslint.json @@ -6,6 +6,7 @@ ], "jsRules": {}, "rules": { + "align": [true, "arguments", "elements", "members", "parameters", "statements"], "array-type": [true, "generic"], "import-spacing": false, "interface-name": [true, "never-prefix"], From a8bca9b8eb9875f68ce4473e0d09f02c359f4aa8 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 15:50:55 -0400 Subject: [PATCH 037/122] TSLint: Enforce indentation with 2 spaces Not sure if this rule actually works. --- tslint.json | 1 + 1 file changed, 1 insertion(+) diff --git a/tslint.json b/tslint.json index a7dbb34503..e9e40d5be8 100644 --- a/tslint.json +++ b/tslint.json @@ -9,6 +9,7 @@ "align": [true, "arguments", "elements", "members", "parameters", "statements"], "array-type": [true, "generic"], "import-spacing": false, + "indent": [true, "spaces", 2], "interface-name": [true, "never-prefix"], "max-line-length": [true, 90], From 8edbd06e436e54b6e1dd92f937c10dab25f15593 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 15:51:09 -0400 Subject: [PATCH 038/122] TSLint: Enforce UNIX line breaks --- tslint.json | 1 + 1 file changed, 1 insertion(+) diff --git a/tslint.json b/tslint.json index e9e40d5be8..d0964aa596 100644 --- a/tslint.json +++ b/tslint.json @@ -11,6 +11,7 @@ "import-spacing": false, "indent": [true, "spaces", 2], "interface-name": [true, "never-prefix"], + "linebreak-style": [true, "LF"], "max-line-length": [true, 90], "mocha-avoid-only": true, From 56a50063929db48f13289bfcaba2506ce28a08bb Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 15:59:53 -0400 Subject: [PATCH 039/122] Remove duplicate `@types/lodash` dependency --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 3c3b1e1288..458658aa1c 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,6 @@ "@types/classnames": "^2.2.3", "@types/filesize": "^3.6.0", "@types/lodash": "^4.14.106", - "@types/lodash": "^4.14.106", "@types/mocha": "^5.0.0", "@types/qs": "^6.5.1", "@types/react": "^16.3.1", From 347fc8287aaac299e9a97eb80cbb86fff79b7a26 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 16:01:46 -0400 Subject: [PATCH 040/122] Add `yarn format` to autoformat code Uses Prettier under the hood. Requires opt-in via `@prettier` pragma: https://prettier.io/docs/en/options.html#require-pragma --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 458658aa1c..8d0a796b4b 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "jshint": "yarn grunt jshint", "lint": "yarn eslint && yarn grunt lint && yarn tslint", "tslint": "tslint --config tslint.json --format stylish --project .", + "format": "prettier --require-pragma --single-quote --write \"ts/**/*.ts\"", "transpile": "tsc", "clean-transpile": "rimraf ts/**/*.js ts/*.js", "open-coverage": "open coverage/lcov-report/index.html", From 2fae89f0e811b48dabc28f10d61ee5150fa8143e Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 16:07:42 -0400 Subject: [PATCH 041/122] Add trailing commas to autoformatted code --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8d0a796b4b..d442e7d128 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "jshint": "yarn grunt jshint", "lint": "yarn eslint && yarn grunt lint && yarn tslint", "tslint": "tslint --config tslint.json --format stylish --project .", - "format": "prettier --require-pragma --single-quote --write \"ts/**/*.ts\"", + "format": "prettier --require-pragma --single-quote --trailing-comma es5 --write \"ts/**/*.ts\"", "transpile": "tsc", "clean-transpile": "rimraf ts/**/*.js ts/*.js", "open-coverage": "open coverage/lcov-report/index.html", From 424965f8763ec451069062a5c319ae929c8d52c2 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 16:25:52 -0400 Subject: [PATCH 042/122] :art: Autoformat code --- ts/GoogleChrome.ts | 8 +- .../media-gallery/AttachmentListSection.tsx | 19 ++-- .../media-gallery/DocumentListEntry.tsx | 26 ++--- .../media-gallery/ImageThumbnail.tsx | 11 +-- .../media-gallery/LoadingIndicator.tsx | 3 + .../media-gallery/MediaGallery.tsx | 24 +++-- .../media-gallery/groupMessagesByDate.ts | 21 ++-- .../media-gallery/propTypes/Message.tsx | 3 + ts/missingCaseError.ts | 3 + .../media-gallery/groupMessagesByDate.ts | 10 +- ts/types/Attachment.ts | 4 +- ts/types/Conversation.ts | 23 +++-- ts/types/MIME.ts | 16 ++-- ts/types/Message.ts | 95 +++++++++++-------- .../message/initializeAttachmentMetadata.ts | 32 ++++--- 15 files changed, 158 insertions(+), 140 deletions(-) diff --git a/ts/GoogleChrome.ts b/ts/GoogleChrome.ts index 9d9429ca42..7d31c7249a 100644 --- a/ts/GoogleChrome.ts +++ b/ts/GoogleChrome.ts @@ -1,6 +1,8 @@ +/** + * @prettier + */ import * as MIME from './types/MIME'; - interface MIMETypeSupportMap { [key: string]: boolean; } @@ -24,7 +26,7 @@ const SUPPORTED_IMAGE_MIME_TYPES: MIMETypeSupportMap = { }; export const isImageTypeSupported = (mimeType: MIME.MIMEType): boolean => - SUPPORTED_IMAGE_MIME_TYPES[mimeType] === true; + SUPPORTED_IMAGE_MIME_TYPES[mimeType] === true; const SUPPORTED_VIDEO_MIME_TYPES: MIMETypeSupportMap = { 'video/mp4': true, @@ -34,4 +36,4 @@ const SUPPORTED_VIDEO_MIME_TYPES: MIMETypeSupportMap = { // See: https://www.chromium.org/audio-video export const isVideoTypeSupported = (mimeType: MIME.MIMEType): boolean => - SUPPORTED_VIDEO_MIME_TYPES[mimeType] === true; + SUPPORTED_VIDEO_MIME_TYPES[mimeType] === true; diff --git a/ts/components/conversation/media-gallery/AttachmentListSection.tsx b/ts/components/conversation/media-gallery/AttachmentListSection.tsx index 65c58aa957..1be2b0f9a6 100644 --- a/ts/components/conversation/media-gallery/AttachmentListSection.tsx +++ b/ts/components/conversation/media-gallery/AttachmentListSection.tsx @@ -1,3 +1,6 @@ +/** + * @prettier + */ import React from 'react'; import { DocumentListEntry } from './DocumentListEntry'; @@ -5,13 +8,11 @@ import { ImageThumbnail } from './ImageThumbnail'; import { Message } from './propTypes/Message'; import { missingCaseError } from '../../../missingCaseError'; - const styles = { container: { width: '100%', }, - header: { - }, + header: {}, itemContainer: { display: 'flex', flexDirection: 'row', @@ -32,18 +33,14 @@ export class AttachmentListSection extends React.Component { public renderItems() { const { i18n, messages, type } = this.props; - return messages.map((message) => { + return messages.map(message => { const { attachments } = message; const firstAttachment = attachments[0]; switch (type) { case 'media': return ( - + ); case 'documents': return ( @@ -67,9 +64,7 @@ export class AttachmentListSection extends React.Component { return (
      {header}
      -
      - {this.renderItems()} -
      +
      {this.renderItems()}
      ); } diff --git a/ts/components/conversation/media-gallery/DocumentListEntry.tsx b/ts/components/conversation/media-gallery/DocumentListEntry.tsx index 19c586c637..7b94ee960b 100644 --- a/ts/components/conversation/media-gallery/DocumentListEntry.tsx +++ b/ts/components/conversation/media-gallery/DocumentListEntry.tsx @@ -1,3 +1,6 @@ +/** + * @prettier + */ import React from 'react'; import moment from 'moment'; @@ -5,7 +8,6 @@ import formatFileSize from 'filesize'; // import { LoadingIndicator } from './LoadingIndicator'; - interface Props { fileName?: string; fileSize?: number; @@ -59,28 +61,20 @@ export class DocumentListEntry extends React.Component { // } return ( -
      +
      -
      +
      {fileName} - + {typeof fileSize === 'number' ? formatFileSize(fileSize) : ''}
      -
      +
      {moment(timestamp).format('ddd, MMM D, Y')}
      @@ -88,10 +82,6 @@ export class DocumentListEntry extends React.Component { } public render() { - return ( -
      - {this.renderContent()} -
      - ); + return
      {this.renderContent()}
      ; } } diff --git a/ts/components/conversation/media-gallery/ImageThumbnail.tsx b/ts/components/conversation/media-gallery/ImageThumbnail.tsx index 9a774373b2..afe802ed56 100644 --- a/ts/components/conversation/media-gallery/ImageThumbnail.tsx +++ b/ts/components/conversation/media-gallery/ImageThumbnail.tsx @@ -1,3 +1,6 @@ +/** + * @prettier + */ import React from 'react'; import { LoadingIndicator } from './LoadingIndicator'; @@ -27,7 +30,7 @@ const styles = { export class ImageThumbnail extends React.Component { public renderContent() { - const {/* i18n, */message } = this.props; + const { /* i18n, */ message } = this.props; if (!message.objectURL) { return ; @@ -45,10 +48,6 @@ export class ImageThumbnail extends React.Component { } public render() { - return ( -
      - {this.renderContent()} -
      - ); + return
      {this.renderContent()}
      ; } } diff --git a/ts/components/conversation/media-gallery/LoadingIndicator.tsx b/ts/components/conversation/media-gallery/LoadingIndicator.tsx index 349560a8ec..e2bfd4a856 100644 --- a/ts/components/conversation/media-gallery/LoadingIndicator.tsx +++ b/ts/components/conversation/media-gallery/LoadingIndicator.tsx @@ -1,3 +1,6 @@ +/** + * @prettier + */ import React from 'react'; export const LoadingIndicator = () => { diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx index 0d24021dd2..f5cf64b704 100644 --- a/ts/components/conversation/media-gallery/MediaGallery.tsx +++ b/ts/components/conversation/media-gallery/MediaGallery.tsx @@ -1,3 +1,6 @@ +/** + * @prettier + */ import React from 'react'; import moment from 'moment'; @@ -7,7 +10,6 @@ import { AttachmentListSection } from './AttachmentListSection'; import { groupMessagesByDate } from './groupMessagesByDate'; import { Message } from './propTypes/Message'; - type AttachmentType = 'media' | 'documents'; interface Props { @@ -58,13 +60,12 @@ const Tab = ({ onSelect, type, }: { - isSelected: boolean, - label: string, - onSelect?: (event: TabSelectEvent) => void, - type: AttachmentType, + isSelected: boolean; + label: string; + onSelect?: (event: TabSelectEvent) => void; + type: AttachmentType; }) => { - const handleClick = onSelect ? - () => onSelect({ type }) : undefined; + const handleClick = onSelect ? () => onSelect({ type }) : undefined; return (
      { public state: State = { selectedTab: 'media', @@ -101,16 +101,14 @@ export class MediaGallery extends React.Component { onSelect={this.handleTabSelect} />
      -
      - {this.renderSections()} -
      +
      {this.renderSections()}
      ); } private handleTabSelect = (event: TabSelectEvent): void => { - this.setState({selectedTab: event.type}); - } + this.setState({ selectedTab: event.type }); + }; private renderSections() { const { i18n, media, documents } = this.props; diff --git a/ts/components/conversation/media-gallery/groupMessagesByDate.ts b/ts/components/conversation/media-gallery/groupMessagesByDate.ts index f0d53824b4..c1c9fd1c07 100644 --- a/ts/components/conversation/media-gallery/groupMessagesByDate.ts +++ b/ts/components/conversation/media-gallery/groupMessagesByDate.ts @@ -1,18 +1,25 @@ +/** + * @prettier + */ import moment from 'moment'; -import { groupBy, sortBy } from 'lodash'; +import { compact, groupBy, sortBy } from 'lodash'; import { Message } from './propTypes/Message'; - -export const groupMessagesByDate = (timestamp: number, messages: Array): any => { +export const groupMessagesByDate = ( + timestamp: number, + messages: Array +): any => { const referenceDateTime = moment.utc(timestamp); const today = moment(referenceDateTime).startOf('day'); - const yesterday = moment(referenceDateTime).subtract(1, 'day').startOf('day'); + const yesterday = moment(referenceDateTime) + .subtract(1, 'day') + .startOf('day'); const thisWeek = moment(referenceDateTime).startOf('isoWeek'); const thisMonth = moment(referenceDateTime).startOf('month'); - const sorted = sortBy(messages, (message) => -message.received_at); - const annotations = sorted.map((message) => { + const sorted = sortBy(messages, message => -message.received_at); + const annotations = sorted.map(message => { const date = moment.utc(message.received_at); if (date.isAfter(today)) { @@ -42,7 +49,7 @@ export const groupMessagesByDate = (timestamp: number, messages: Array) } return { - order: (date.year() * 100) + date.month(), + order: date.year() * 100 + date.month(), label: 'yearMonth', message, }; diff --git a/ts/components/conversation/media-gallery/propTypes/Message.tsx b/ts/components/conversation/media-gallery/propTypes/Message.tsx index 209fc25652..6ca64618c3 100644 --- a/ts/components/conversation/media-gallery/propTypes/Message.tsx +++ b/ts/components/conversation/media-gallery/propTypes/Message.tsx @@ -1,3 +1,6 @@ +/** + * @prettier + */ export interface Message { id: string; body?: string; diff --git a/ts/missingCaseError.ts b/ts/missingCaseError.ts index c32999bac4..cadc49b6d3 100644 --- a/ts/missingCaseError.ts +++ b/ts/missingCaseError.ts @@ -1,3 +1,6 @@ +/** + * @prettier + */ // `missingCaseError` is useful for compile-time checking that all `case`s in // a `switch` statement have been handled, e.g. // diff --git a/ts/test/components/media-gallery/groupMessagesByDate.ts b/ts/test/components/media-gallery/groupMessagesByDate.ts index a44258e2a2..b74218686c 100644 --- a/ts/test/components/media-gallery/groupMessagesByDate.ts +++ b/ts/test/components/media-gallery/groupMessagesByDate.ts @@ -1,11 +1,11 @@ +/** + * @prettier + */ import 'mocha'; import { assert } from 'chai'; -import { groupMessagesByDate } from - '../../../components/conversation/media-gallery/groupMessagesByDate'; -import { Message } from - '../../../components/conversation/media-gallery/propTypes/Message'; - +import { groupMessagesByDate } from '../../../components/conversation/media-gallery/groupMessagesByDate'; +import { Message } from '../../../components/conversation/media-gallery/propTypes/Message'; const toMessage = (date: Date): Message => ({ id: date.toUTCString(), diff --git a/ts/types/Attachment.ts b/ts/types/Attachment.ts index 44138ae225..c33f6f8c54 100644 --- a/ts/types/Attachment.ts +++ b/ts/types/Attachment.ts @@ -1,9 +1,11 @@ +/** + * @prettier + */ import is from '@sindresorhus/is'; import * as GoogleChrome from '../GoogleChrome'; import { MIMEType } from './MIME'; - export interface Attachment { fileName?: string; contentType?: MIMEType; diff --git a/ts/types/Conversation.ts b/ts/types/Conversation.ts index e31b3b0a60..360b988f11 100644 --- a/ts/types/Conversation.ts +++ b/ts/types/Conversation.ts @@ -1,7 +1,9 @@ +/** + * @prettier + */ import is from '@sindresorhus/is'; import { Message } from './Message'; - interface ConversationLastMessageUpdate { lastMessage: string | null; timestamp: number | null; @@ -13,10 +15,10 @@ export const createLastMessageUpdate = ({ lastMessage, lastMessageNotificationText, }: { - currentLastMessageText: string | null, - currentTimestamp: number | null, - lastMessage: Message | null, - lastMessageNotificationText: string | null, + currentLastMessageText: string | null; + currentTimestamp: number | null; + lastMessage: Message | null; + lastMessageNotificationText: string | null; }): ConversationLastMessageUpdate => { if (lastMessage === null) { return { @@ -30,13 +32,14 @@ export const createLastMessageUpdate = ({ const isExpiringMessage = is.object(lastMessage.expirationTimerUpdate); const shouldUpdateTimestamp = !isVerifiedChangeMessage && !isExpiringMessage; - const newTimestamp = shouldUpdateTimestamp ? - lastMessage.sent_at : - currentTimestamp; + const newTimestamp = shouldUpdateTimestamp + ? lastMessage.sent_at + : currentTimestamp; const shouldUpdateLastMessageText = !isVerifiedChangeMessage; - const newLastMessageText = shouldUpdateLastMessageText ? - lastMessageNotificationText : currentLastMessageText; + const newLastMessageText = shouldUpdateLastMessageText + ? lastMessageNotificationText + : currentLastMessageText; return { lastMessage: newLastMessageText, diff --git a/ts/types/MIME.ts b/ts/types/MIME.ts index 3ac85dbfb9..a27cb658c5 100644 --- a/ts/types/MIME.ts +++ b/ts/types/MIME.ts @@ -1,14 +1,12 @@ +/** + * @prettier + */ export type MIMEType = string & { _mimeTypeBrand: any }; +export const isJPEG = (value: MIMEType): boolean => value === 'image/jpeg'; -export const isJPEG = (value: MIMEType): boolean => - value === 'image/jpeg'; +export const isImage = (value: MIMEType): boolean => value.startsWith('image/'); -export const isImage = (value: MIMEType): boolean => - value.startsWith('image/'); +export const isVideo = (value: MIMEType): boolean => value.startsWith('video/'); -export const isVideo = (value: MIMEType): boolean => - value.startsWith('video/'); - -export const isAudio = (value: MIMEType): boolean => - value.startsWith('audio/'); +export const isAudio = (value: MIMEType): boolean => value.startsWith('audio/'); diff --git a/ts/types/Message.ts b/ts/types/Message.ts index 4afe2dc84f..2b5828edbb 100644 --- a/ts/types/Message.ts +++ b/ts/types/Message.ts @@ -1,52 +1,63 @@ +/** + * @prettier + */ import { Attachment } from './Attachment'; +export type Message = IncomingMessage | OutgoingMessage | VerifiedChangeMessage; -export type Message - = IncomingMessage - | OutgoingMessage - | VerifiedChangeMessage; +export type IncomingMessage = Readonly< + { + type: 'incoming'; + // Required + attachments: Array; + id: string; + received_at: number; -export type IncomingMessage = Readonly<{ - type: 'incoming'; - // Required - attachments: Array; - id: string; - received_at: number; + // Optional + body?: string; + decrypted_at?: number; + errors?: Array; + flags?: number; + source?: string; + sourceDevice?: number; + } & SharedMessageProperties & + Message4 & + ExpirationTimerUpdate +>; - // Optional - body?: string; - decrypted_at?: number; - errors?: Array; - flags?: number; - source?: string; - sourceDevice?: number; -} & SharedMessageProperties & Message4 & ExpirationTimerUpdate>; +export type OutgoingMessage = Readonly< + { + type: 'outgoing'; -export type OutgoingMessage = Readonly<{ - type: 'outgoing'; + // Required + attachments: Array; + delivered: number; + delivered_to: Array; + destination: string; // PhoneNumber + expirationStartTimestamp: number; + id: string; + received_at: number; + sent: boolean; + sent_to: Array; // Array - // Required - attachments: Array; - delivered: number; - delivered_to: Array; - destination: string; // PhoneNumber - expirationStartTimestamp: number; - id: string; - received_at: number; - sent: boolean; - sent_to: Array; // Array + // Optional + body?: string; + expires_at?: number; + expireTimer?: number; + recipients?: Array; // Array + synced: boolean; + } & SharedMessageProperties & + Message4 & + ExpirationTimerUpdate +>; - // Optional - body?: string; - expires_at?: number; - expireTimer?: number; - recipients?: Array; // Array - synced: boolean; -} & SharedMessageProperties & Message4 & ExpirationTimerUpdate>; - -export type VerifiedChangeMessage = Readonly<{ - type: 'verified-change'; -} & SharedMessageProperties & Message4 & ExpirationTimerUpdate>; +export type VerifiedChangeMessage = Readonly< + { + type: 'verified-change'; + } & SharedMessageProperties & + Message4 & + ExpirationTimerUpdate +>; type SharedMessageProperties = Readonly<{ conversationId: string; @@ -59,7 +70,7 @@ type ExpirationTimerUpdate = Readonly<{ expireTimer: number; fromSync: boolean; source: string; // PhoneNumber - }>, + }>; }>; type Message4 = Readonly<{ diff --git a/ts/types/message/initializeAttachmentMetadata.ts b/ts/types/message/initializeAttachmentMetadata.ts index 49d0f35d62..084f1e1ade 100644 --- a/ts/types/message/initializeAttachmentMetadata.ts +++ b/ts/types/message/initializeAttachmentMetadata.ts @@ -1,20 +1,24 @@ +/** + * @prettier + */ import { partition } from 'lodash'; import * as Attachment from '../Attachment'; -import { Message } from '../message'; +import { Message } from '../Message'; +export const initializeAttachmentMetadata = async ( + message: Message +): Promise => { + const numAttachments = message.attachments.length; + const [numVisualMediaAttachments, numFileAttachments] = partition( + message.attachments, + Attachment.isVisualMedia + ).map(attachments => attachments.length); -export const initializeAttachmentMetadata = - async (message: Message): Promise => { - const numAttachments = message.attachments.length; - const [numVisualMediaAttachments, numFileAttachments] = - partition(message.attachments, Attachment.isVisualMedia) - .map((attachments) => attachments.length); - - return { - ...message, - numAttachments, - numVisualMediaAttachments, - numFileAttachments, - }; + return { + ...message, + numAttachments, + numVisualMediaAttachments, + numFileAttachments, }; +}; From dea56c00082a78cde60c7e3c6f20c94e8dfd99b3 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 16:26:08 -0400 Subject: [PATCH 043/122] Autoformat TSX files --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d442e7d128..130668c99f 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "jshint": "yarn grunt jshint", "lint": "yarn eslint && yarn grunt lint && yarn tslint", "tslint": "tslint --config tslint.json --format stylish --project .", - "format": "prettier --require-pragma --single-quote --trailing-comma es5 --write \"ts/**/*.ts\"", + "format": "prettier --require-pragma --single-quote --trailing-comma es5 --write \"ts/**/*.{ts,tsx}\"", "transpile": "tsc", "clean-transpile": "rimraf ts/**/*.js ts/*.js", "open-coverage": "open coverage/lcov-report/index.html", From b0fefdbb98674ab564806545f4d2411e9e6a8fe1 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 16:27:06 -0400 Subject: [PATCH 044/122] Implementing grouping messages by date --- .../media-gallery/MediaGallery.md | 35 +++- .../media-gallery/MediaGallery.tsx | 21 +-- .../media-gallery/groupMessagesByDate.ts | 170 ++++++++++++++---- .../media-gallery/groupMessagesByDate.ts | 121 ++++++------- 4 files changed, 232 insertions(+), 115 deletions(-) diff --git a/ts/components/conversation/media-gallery/MediaGallery.md b/ts/components/conversation/media-gallery/MediaGallery.md index cf862db7fa..16159c16e4 100644 --- a/ts/components/conversation/media-gallery/MediaGallery.md +++ b/ts/components/conversation/media-gallery/MediaGallery.md @@ -1,14 +1,16 @@ ```jsx -const YEAR_MS = 1 * 12 * 30 * 24 * 60 * 60 * 1000; +const DAY_MS = 24 * 60 * 60 * 1000; +const MONTH_MS = 30 * DAY_MS; +const YEAR_MS = 12 * MONTH_MS; const tokens = ['foo', 'bar', 'baz', 'qux', 'quux']; const fileExtensions = ['docx', 'pdf', 'txt', 'mp3', 'wmv', 'tiff']; -const createRandomMessage = (props) => { +const createRandomMessage = ({startTime, timeWindow} = {}) => (props) => { const now = Date.now(); const fileName = `${_.sample(tokens)}${_.sample(tokens)}.${_.sample(fileExtensions)}`; return { id: _.random(now).toString(), - received_at: _.random(now - YEAR_MS, now), + received_at: _.random(startTime, startTime + timeWindow), attachments: [{ data: null, fileName, @@ -21,9 +23,34 @@ const createRandomMessage = (props) => { }; }; +const createRandomMessages = ({startTime, timeWindow}) => + _.range(_.random(5, 10)).map(createRandomMessage({startTime, timeWindow})); + + const startTime = Date.now(); const messages = _.sortBy( - _.range(25).map(createRandomMessage), + [ + ...createRandomMessages({ + startTime, + timeWindow: DAY_MS, + }), + ...createRandomMessages({ + startTime: startTime - DAY_MS, + timeWindow: DAY_MS, + }), + ...createRandomMessages({ + startTime: startTime - 3 * DAY_MS, + timeWindow: 3 * DAY_MS, + }), + ...createRandomMessages({ + startTime: startTime - 30 * DAY_MS, + timeWindow: 15 * DAY_MS, + }), + ...createRandomMessages({ + startTime: startTime - 365 * DAY_MS, + timeWindow: 300 * DAY_MS, + }), + ], message => -message.received_at ); diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx index f5cf64b704..c12cf19a91 100644 --- a/ts/components/conversation/media-gallery/MediaGallery.tsx +++ b/ts/components/conversation/media-gallery/MediaGallery.tsx @@ -4,7 +4,6 @@ import React from 'react'; import moment from 'moment'; -import { map } from 'lodash'; import { AttachmentListSection } from './AttachmentListSection'; import { groupMessagesByDate } from './groupMessagesByDate'; @@ -123,23 +122,21 @@ export class MediaGallery extends React.Component { } const now = Date.now(); - const groups = groupMessagesByDate(now, messages); - return map(groups, (annotations) => { - const first = annotations[0]; - const date = moment(first.message.received_at); - - const header = first.label === 'yearMonth' - ? date.format(MONTH_FORMAT) - : i18n(first.label); - const groupMessages = map(annotations, 'message'); - + const sections = groupMessagesByDate(now, messages); + return sections.map(section => { + const first = section.messages[0]; + const date = moment(first.received_at); + const header = + section.type === 'yearMonth' + ? date.format(MONTH_FORMAT) + : i18n(section.type); return ( ); }); diff --git a/ts/components/conversation/media-gallery/groupMessagesByDate.ts b/ts/components/conversation/media-gallery/groupMessagesByDate.ts index c1c9fd1c07..845c9e37e6 100644 --- a/ts/components/conversation/media-gallery/groupMessagesByDate.ts +++ b/ts/components/conversation/media-gallery/groupMessagesByDate.ts @@ -5,11 +5,25 @@ import moment from 'moment'; import { compact, groupBy, sortBy } from 'lodash'; import { Message } from './propTypes/Message'; +// import { missingCaseError } from '../../../missingCaseError'; +type StaticSectionType = 'today' | 'yesterday' | 'thisWeek' | 'thisMonth'; +type YearMonthSectionType = 'yearMonth'; + +interface GenericSection { + type: T; + messages: Array; +} +type StaticSection = GenericSection; +type YearMonthSection = GenericSection & { + year: number; + month: number; +}; +export type Section = StaticSection | YearMonthSection; export const groupMessagesByDate = ( timestamp: number, messages: Array -): any => { +): Array
      => { const referenceDateTime = moment.utc(timestamp); const today = moment(referenceDateTime).startOf('day'); const yesterday = moment(referenceDateTime) @@ -18,42 +32,132 @@ export const groupMessagesByDate = ( const thisWeek = moment(referenceDateTime).startOf('isoWeek'); const thisMonth = moment(referenceDateTime).startOf('month'); - const sorted = sortBy(messages, message => -message.received_at); - const annotations = sorted.map(message => { - const date = moment.utc(message.received_at); + const sortedMessages = sortBy(messages, message => -message.received_at); + const messagesWithSection = sortedMessages.map( + withSection({ + today, + yesterday, + thisWeek, + thisMonth, + }) + ); + const groupedMessages = groupBy(messagesWithSection, 'type'); + const yearMonthMessages = Object.values( + groupBy(groupedMessages.yearMonth, 'order') + ).reverse(); + return compact([ + toSection(groupedMessages.today), + toSection(groupedMessages.yesterday), + toSection(groupedMessages.thisWeek), + toSection(groupedMessages.thisMonth), + ...yearMonthMessages.map(group => toSection(group)), + ]); +}; - if (date.isAfter(today)) { - return { - order: 0, - label: 'today', - message, - }; - } else if (date.isAfter(yesterday)) { - return { - order: 1, - label: 'yesterday', - message, - }; - } else if (date.isAfter(thisWeek)) { - return { - order: 2, - label: 'thisWeek', - message, - }; - } else if (date.isAfter(thisMonth)) { - return { - order: 3, - label: 'thisMonth', - message, - }; - } +const toSection = ( + messagesWithSection: Array | undefined +): Section | null => { + if (!messagesWithSection || messagesWithSection.length === 0) { + return null; + } + const firstMessageWithSection: MessageWithSection = messagesWithSection[0]; + if (!firstMessageWithSection) { + return null; + } + + const messages = messagesWithSection.map( + messageWithSection => messageWithSection.message + ); + switch (firstMessageWithSection.type) { + case 'today': + case 'yesterday': + case 'thisWeek': + case 'thisMonth': + return { + type: firstMessageWithSection.type, + messages: messages, + }; + case 'yearMonth': + return { + type: firstMessageWithSection.type, + year: firstMessageWithSection.year, + month: firstMessageWithSection.month, + messages, + }; + default: + // NOTE: Investigate why we get the following error: + // error TS2345: Argument of type 'any' is not assignable to parameter + // of type 'never'. + // return missingCaseError(firstMessageWithSection.type); + return null; + } +}; + +type GenericMessageWithSection = { + order: number; + type: T; + message: Message; +}; +type MessageWithStaticSection = GenericMessageWithSection; +type MessageWithYearMonthSection = GenericMessageWithSection< + YearMonthSectionType +> & { + year: number; + month: number; +}; +type MessageWithSection = + | MessageWithStaticSection + | MessageWithYearMonthSection; + +const withSection = ({ + today, + yesterday, + thisWeek, + thisMonth, +}: { + today: moment.Moment; + yesterday: moment.Moment; + thisWeek: moment.Moment; + thisMonth: moment.Moment; +}) => (message: Message): MessageWithSection => { + const messageReceivedDate = moment.utc(message.received_at); + if (messageReceivedDate.isAfter(today)) { return { - order: date.year() * 100 + date.month(), - label: 'yearMonth', + order: 0, + type: 'today', message, }; - }); + } + if (messageReceivedDate.isAfter(yesterday)) { + return { + order: 1, + type: 'yesterday', + message, + }; + } + if (messageReceivedDate.isAfter(thisWeek)) { + return { + order: 2, + type: 'thisWeek', + message, + }; + } + if (messageReceivedDate.isAfter(thisMonth)) { + return { + order: 3, + type: 'thisMonth', + message, + }; + } - return groupBy(annotations, 'label'); + const month: number = messageReceivedDate.month(); + const year: number = messageReceivedDate.year(); + return { + order: year * 100 + month, + type: 'yearMonth', + month, + year, + message, + }; }; diff --git a/ts/test/components/media-gallery/groupMessagesByDate.ts b/ts/test/components/media-gallery/groupMessagesByDate.ts index b74218686c..050e915125 100644 --- a/ts/test/components/media-gallery/groupMessagesByDate.ts +++ b/ts/test/components/media-gallery/groupMessagesByDate.ts @@ -2,9 +2,14 @@ * @prettier */ import 'mocha'; -import { assert } from 'chai'; -import { groupMessagesByDate } from '../../../components/conversation/media-gallery/groupMessagesByDate'; +import { assert } from 'chai'; +import { shuffle } from 'lodash'; + +import { + groupMessagesByDate, + Section, +} from '../../../components/conversation/media-gallery/groupMessagesByDate'; import { Message } from '../../../components/conversation/media-gallery/propTypes/Message'; const toMessage = (date: Date): Message => ({ @@ -16,7 +21,7 @@ const toMessage = (date: Date): Message => ({ describe('groupMessagesByDate', () => { it('should group messages', () => { const referenceTime = new Date('2018-04-12T18:00Z').getTime(); // Thu - const input: Array = [ + const input: Array = shuffle([ // Today toMessage(new Date('2018-04-12T12:00Z')), // Thu toMessage(new Date('2018-04-12T00:01Z')), // Thu @@ -32,110 +37,94 @@ describe('groupMessagesByDate', () => { // February 2011 toMessage(new Date('2011-02-28T23:59Z')), toMessage(new Date('2011-02-01T10:00Z')), - ]; + ]); - const expected = { - today: [ - { - order: 0, - label: 'today', - message: { + const expected: Array
      = [ + { + type: 'today', + messages: [ + { id: 'Thu, 12 Apr 2018 12:00:00 GMT', received_at: 1523534400000, attachments: [], }, - }, - { - order: 0, - label: 'today', - message: { + { id: 'Thu, 12 Apr 2018 00:01:00 GMT', received_at: 1523491260000, attachments: [], }, - }, - ], - yesterday: [ - { - order: 1, - label: 'yesterday', - message: { + ], + }, + { + type: 'yesterday', + messages: [ + { id: 'Wed, 11 Apr 2018 23:59:00 GMT', received_at: 1523491140000, attachments: [], }, - }, - ], - thisWeek: [ - { - order: 2, - label: 'thisWeek', - message: { + ], + }, + { + type: 'thisWeek', + messages: [ + { id: 'Mon, 09 Apr 2018 00:01:00 GMT', received_at: 1523232060000, attachments: [], }, - }, - ], - thisMonth: [ - { - order: 3, - label: 'thisMonth', - message: { + ], + }, + { + type: 'thisMonth', + messages: [ + { id: 'Sun, 08 Apr 2018 23:59:00 GMT', received_at: 1523231940000, attachments: [], }, - }, - { - order: 3, - label: 'thisMonth', - message: { + { id: 'Sun, 01 Apr 2018 00:01:00 GMT', received_at: 1522540860000, attachments: [], }, - }, - ], - yearMonth: [ - { - order: 201802, - label: 'yearMonth', - message: { + ], + }, + { + type: 'yearMonth', + year: 2018, + month: 2, + messages: [ + { id: 'Sat, 31 Mar 2018 23:59:00 GMT', received_at: 1522540740000, attachments: [], }, - }, - { - order: 201802, - label: 'yearMonth', - message: { + { id: 'Thu, 01 Mar 2018 14:00:00 GMT', received_at: 1519912800000, attachments: [], }, - }, - { - order: 201101, - label: 'yearMonth', - message: { + ], + }, + { + type: 'yearMonth', + year: 2011, + month: 1, + messages: [ + { id: 'Mon, 28 Feb 2011 23:59:00 GMT', received_at: 1298937540000, attachments: [], }, - }, - { - order: 201101, - label: 'yearMonth', - message: { + { id: 'Tue, 01 Feb 2011 10:00:00 GMT', received_at: 1296554400000, attachments: [], }, - }, - ], - }; + ], + }, + ]; const actual = groupMessagesByDate(referenceTime, input); assert.deepEqual(actual, expected); From ae4c74dd5bb3ea3cb26e727ebd11a66d360e6d83 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 16:27:38 -0400 Subject: [PATCH 045/122] Skip metadata initialization for `verified-change` messages --- ts/types/message/initializeAttachmentMetadata.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ts/types/message/initializeAttachmentMetadata.ts b/ts/types/message/initializeAttachmentMetadata.ts index 084f1e1ade..6cbeeda7a2 100644 --- a/ts/types/message/initializeAttachmentMetadata.ts +++ b/ts/types/message/initializeAttachmentMetadata.ts @@ -9,6 +9,10 @@ import { Message } from '../Message'; export const initializeAttachmentMetadata = async ( message: Message ): Promise => { + if (message.type === 'verified-change') { + return message; + } + const numAttachments = message.attachments.length; const [numVisualMediaAttachments, numFileAttachments] = partition( message.attachments, From a609c31a57f6ff13f5f851c0b77c971f9ad41285 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 16:47:35 -0400 Subject: [PATCH 046/122] Style attachment section headers --- .../conversation/media-gallery/AttachmentListSection.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/ts/components/conversation/media-gallery/AttachmentListSection.tsx b/ts/components/conversation/media-gallery/AttachmentListSection.tsx index 1be2b0f9a6..cefa308052 100644 --- a/ts/components/conversation/media-gallery/AttachmentListSection.tsx +++ b/ts/components/conversation/media-gallery/AttachmentListSection.tsx @@ -12,7 +12,11 @@ const styles = { container: { width: '100%', }, - header: {}, + header: { + fontSize: 14, + fontWeight: 'normal', + lineHeight: '28px', + } as React.CSSProperties, itemContainer: { display: 'flex', flexDirection: 'row', @@ -63,7 +67,7 @@ export class AttachmentListSection extends React.Component { return (
      -
      {header}
      +

      {header}

      {this.renderItems()}
      ); From 5ec8b1c6e155ac2ca65451d44934c7d62a377407 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 17:53:47 -0400 Subject: [PATCH 047/122] Add `@types/jquery` --- package.json | 1 + yarn.lock | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/package.json b/package.json index 130668c99f..9ae7038364 100644 --- a/package.json +++ b/package.json @@ -98,6 +98,7 @@ "@types/chai": "^4.1.2", "@types/classnames": "^2.2.3", "@types/filesize": "^3.6.0", + "@types/jquery": "^3.3.1", "@types/lodash": "^4.14.106", "@types/mocha": "^5.0.0", "@types/qs": "^6.5.1", diff --git a/yarn.lock b/yarn.lock index 930fe84913..ae725dd610 100644 --- a/yarn.lock +++ b/yarn.lock @@ -48,6 +48,10 @@ version "3.6.0" resolved "https://registry.yarnpkg.com/@types/filesize/-/filesize-3.6.0.tgz#5f1a25c7b4e3d5ee2bc63133d374d096b7008c8d" +"@types/jquery@^3.3.1": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.3.1.tgz#55758d44d422756d6329cbf54e6d41931d7ba28f" + "@types/lodash@^4.14.106": version "4.14.106" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.106.tgz#6093e9a02aa567ddecfe9afadca89e53e5dce4dd" From c46e1a151977fd4f27dcb77e8a9acda9d8c3beb0 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 17:54:53 -0400 Subject: [PATCH 048/122] Move top-level functions to `Signal.Util` --- preload.js | 1 + .../conversation/media-gallery/AttachmentListSection.tsx | 2 +- .../conversation/media-gallery/groupMessagesByDate.ts | 2 +- ts/types/Attachment.ts | 2 +- ts/{ => util}/GoogleChrome.ts | 2 +- ts/util/index.ts | 7 +++++++ ts/{ => util}/missingCaseError.ts | 0 7 files changed, 12 insertions(+), 4 deletions(-) rename ts/{ => util}/GoogleChrome.ts (96%) create mode 100644 ts/util/index.ts rename ts/{ => util}/missingCaseError.ts (100%) diff --git a/preload.js b/preload.js index 0bf24c7057..7af8059816 100644 --- a/preload.js +++ b/preload.js @@ -196,6 +196,7 @@ window.Signal.Types.Errors = require('./js/modules/types/errors'); window.Signal.Types.Message = Message; window.Signal.Types.MIME = require('./ts/types/MIME'); window.Signal.Types.Settings = require('./js/modules/types/settings'); +window.Signal.Util = require('./ts/util'); window.Signal.Views = {}; window.Signal.Views.Initialization = require('./js/modules/views/initialization'); diff --git a/ts/components/conversation/media-gallery/AttachmentListSection.tsx b/ts/components/conversation/media-gallery/AttachmentListSection.tsx index cefa308052..3a013f6d61 100644 --- a/ts/components/conversation/media-gallery/AttachmentListSection.tsx +++ b/ts/components/conversation/media-gallery/AttachmentListSection.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { DocumentListEntry } from './DocumentListEntry'; import { ImageThumbnail } from './ImageThumbnail'; import { Message } from './propTypes/Message'; -import { missingCaseError } from '../../../missingCaseError'; +import { missingCaseError } from '../../../util/missingCaseError'; const styles = { container: { diff --git a/ts/components/conversation/media-gallery/groupMessagesByDate.ts b/ts/components/conversation/media-gallery/groupMessagesByDate.ts index 845c9e37e6..fac79dcb3d 100644 --- a/ts/components/conversation/media-gallery/groupMessagesByDate.ts +++ b/ts/components/conversation/media-gallery/groupMessagesByDate.ts @@ -5,7 +5,7 @@ import moment from 'moment'; import { compact, groupBy, sortBy } from 'lodash'; import { Message } from './propTypes/Message'; -// import { missingCaseError } from '../../../missingCaseError'; +// import { missingCaseError } from '../../../util/missingCaseError'; type StaticSectionType = 'today' | 'yesterday' | 'thisWeek' | 'thisMonth'; type YearMonthSectionType = 'yearMonth'; diff --git a/ts/types/Attachment.ts b/ts/types/Attachment.ts index c33f6f8c54..fa4e091069 100644 --- a/ts/types/Attachment.ts +++ b/ts/types/Attachment.ts @@ -3,7 +3,7 @@ */ import is from '@sindresorhus/is'; -import * as GoogleChrome from '../GoogleChrome'; +import * as GoogleChrome from '../util/GoogleChrome'; import { MIMEType } from './MIME'; export interface Attachment { diff --git a/ts/GoogleChrome.ts b/ts/util/GoogleChrome.ts similarity index 96% rename from ts/GoogleChrome.ts rename to ts/util/GoogleChrome.ts index 7d31c7249a..0b652b297a 100644 --- a/ts/GoogleChrome.ts +++ b/ts/util/GoogleChrome.ts @@ -1,7 +1,7 @@ /** * @prettier */ -import * as MIME from './types/MIME'; +import * as MIME from '../types/MIME'; interface MIMETypeSupportMap { [key: string]: boolean; diff --git a/ts/util/index.ts b/ts/util/index.ts new file mode 100644 index 0000000000..9376b0e0b2 --- /dev/null +++ b/ts/util/index.ts @@ -0,0 +1,7 @@ +/** + * @prettier + */ +import * as GoogleChrome from './GoogleChrome'; +import { missingCaseError } from './missingCaseError'; + +export { GoogleChrome, missingCaseError }; diff --git a/ts/missingCaseError.ts b/ts/util/missingCaseError.ts similarity index 100% rename from ts/missingCaseError.ts rename to ts/util/missingCaseError.ts From 9d84b2f42074c9ed5060e022121ad55372c75828 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 21:47:06 -0400 Subject: [PATCH 049/122] Index messages with attachments using a boolean MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When indexing message attachment metadata using numeric indexes such as: ```javascript { conversationId: '+12223334455', received_at: 123, attachments: […], numAttachments: 2, }, { conversationId: '+12223334455', received_at: 456, attachments: [], numAttachments: 0, } { conversationId: '+12223334455', received_at: 789, attachments: [], numAttachments: 1, } ``` It creates an index as follows: ``` [conversationId, received_at, numAttachments] ['+12223334455', 123, 2] ['+12223334455', 456, 0] ['+12223334455', 789, 1] ``` This means a query such as… ``` lowerBound: ['+12223334455', 0, 1 ] upperBound: ['+12223334455', Number.MAX_VALUE, Number.MAX_VALUE] ``` …will return all three original entries because they span the `received_at` from `0` through `Number.MAX_VALUE`. One workaround is to index booleans using `1 | undefined` where `1` is included in the index and `undefined` is not, but that way we lose the ability to query for the `false` value. Instead, we flip adjust the index to `[conversationId, hasAttachments, received_at]` and can then query messages with attachments using ``` [conversationId, 1 /* hasAttachments */, 0 /* received_at */] [conversationId, 1 /* hasAttachments */, Number.MAX_VALUE /* received_at */] ``` --- js/modules/migrations/18/index.js | 8 ++++---- js/modules/types/message.js | 6 +++--- test/modules/types/message_test.js | 6 +++--- .../initializeAttachmentMetadata_test.ts | 6 +++--- ts/types/IndexedDB.ts | 12 ++++++++++++ ts/types/Message.ts | 11 ++++++----- .../message/initializeAttachmentMetadata.ts | 19 +++++++++++-------- 7 files changed, 42 insertions(+), 26 deletions(-) create mode 100644 ts/types/IndexedDB.ts diff --git a/js/modules/migrations/18/index.js b/js/modules/migrations/18/index.js index a1072f227e..c717474618 100644 --- a/js/modules/migrations/18/index.js +++ b/js/modules/migrations/18/index.js @@ -2,14 +2,14 @@ exports.run = (transaction) => { const messagesStore = transaction.objectStore('messages'); [ - 'numAttachments', - 'numVisualMediaAttachments', - 'numFileAttachments', + 'hasAttachments', + 'hasVisualMediaAttachments', + 'hasFileAttachments', ].forEach((name) => { console.log(`Create message attachment metadata index: '${name}'`); messagesStore.createIndex( name, - ['conversationId', 'received_at', name], + ['conversationId', name, 'received_at'], { unique: false } ); }); diff --git a/js/modules/types/message.js b/js/modules/types/message.js index 0e8c639789..6415822664 100644 --- a/js/modules/types/message.js +++ b/js/modules/types/message.js @@ -24,9 +24,9 @@ const PRIVATE = 'private'; // - Quotes: Write thumbnail data to disk and store relative path to it. // Version 5 // - Attachments: Track number and kind of attachments for media gallery -// - `numAttachments: Number` -// - `numVisualMediaAttachments: Number` (for media gallery ‘Media’ view) -// - `numFileAttachments: Number` (for media gallery ‘Documents’ view) +// - `hasAttachments?: 1 | undefined` +// - `hasVisualMediaAttachments?: 1 | undefined` (for media gallery ‘Media’ view) +// - `hasFileAttachments: ?1 | undefined` (for media gallery ‘Documents’ view) const INITIAL_SCHEMA_VERSION = 0; diff --git a/test/modules/types/message_test.js b/test/modules/types/message_test.js index 42e8c4c6c0..15f285813f 100644 --- a/test/modules/types/message_test.js +++ b/test/modules/types/message_test.js @@ -181,9 +181,9 @@ describe('Message', () => { fileName: 'test\uFFFDfig.exe', size: 1111, }], - numAttachments: 1, - numVisualMediaAttachments: 0, - numFileAttachments: 1, + hasAttachments: 1, + hasVisualMediaAttachments: undefined, + hasFileAttachments: 1, schemaVersion: Message.CURRENT_SCHEMA_VERSION, }; diff --git a/ts/test/types/message/initializeAttachmentMetadata_test.ts b/ts/test/types/message/initializeAttachmentMetadata_test.ts index c6b69d1987..2979f13f9f 100644 --- a/ts/test/types/message/initializeAttachmentMetadata_test.ts +++ b/ts/test/types/message/initializeAttachmentMetadata_test.ts @@ -38,9 +38,9 @@ describe('Message', () => { fileName: 'foo.jpg', size: 1111, }], - numAttachments: 1, - numVisualMediaAttachments: 1, - numFileAttachments: 0, + hasAttachments: 1, + hasVisualMediaAttachments: 1, + hasFileAttachments: undefined, }; const actual = await Message.initializeAttachmentMetadata(input); diff --git a/ts/types/IndexedDB.ts b/ts/types/IndexedDB.ts new file mode 100644 index 0000000000..43080c78b9 --- /dev/null +++ b/ts/types/IndexedDB.ts @@ -0,0 +1,12 @@ +/** + * @prettier + */ + +// IndexedDB doesn’t support boolean indexes so we map `true` to 1 and `false` +// to `0`. +// N.B. Using `undefined` allows excluding an entry from an index. Useful +// when index size is a consideration or one only needs to query for `true`. +export type IndexableBoolean = 1 | 0; + +export const toIndexableBoolean = (value: boolean): IndexableBoolean => + value ? 1 : 0; diff --git a/ts/types/Message.ts b/ts/types/Message.ts index 2b5828edbb..bb01ef089b 100644 --- a/ts/types/Message.ts +++ b/ts/types/Message.ts @@ -2,6 +2,7 @@ * @prettier */ import { Attachment } from './Attachment'; +import { IndexableBoolean } from './IndexedDB'; export type Message = IncomingMessage | OutgoingMessage | VerifiedChangeMessage; @@ -73,8 +74,8 @@ type ExpirationTimerUpdate = Readonly<{ }>; }>; -type Message4 = Readonly<{ - numAttachments?: number; - numVisualMediaAttachments?: number; - numFileAttachments?: number; -}>; +type Message4 = Partial>; diff --git a/ts/types/message/initializeAttachmentMetadata.ts b/ts/types/message/initializeAttachmentMetadata.ts index 6cbeeda7a2..697390f3b3 100644 --- a/ts/types/message/initializeAttachmentMetadata.ts +++ b/ts/types/message/initializeAttachmentMetadata.ts @@ -4,25 +4,28 @@ import { partition } from 'lodash'; import * as Attachment from '../Attachment'; +import * as IndexedDB from '../IndexedDB'; import { Message } from '../Message'; export const initializeAttachmentMetadata = async ( - message: Message + message: Message, ): Promise => { if (message.type === 'verified-change') { return message; } - const numAttachments = message.attachments.length; - const [numVisualMediaAttachments, numFileAttachments] = partition( + const hasAttachments = IndexedDB.toIndexableBoolean(message.attachments.length > 0); + const [hasVisualMediaAttachments, hasFileAttachments] = partition( message.attachments, - Attachment.isVisualMedia - ).map(attachments => attachments.length); + Attachment.isVisualMedia, + ) + .map((attachments) => attachments.length > 0) + .map(IndexedDB.toIndexableBoolean); return { ...message, - numAttachments, - numVisualMediaAttachments, - numFileAttachments, + hasAttachments, + hasVisualMediaAttachments, + hasFileAttachments, }; }; From e07458d886c75e7a9decd37c0a4863099dc5f41b Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 21:55:21 -0400 Subject: [PATCH 050/122] Add basic Backbone type definitions --- ts/types/backbone/Collection.ts | 11 +++++++++++ ts/types/backbone/Model.ts | 7 +++++++ 2 files changed, 18 insertions(+) create mode 100644 ts/types/backbone/Collection.ts create mode 100644 ts/types/backbone/Model.ts diff --git a/ts/types/backbone/Collection.ts b/ts/types/backbone/Collection.ts new file mode 100644 index 0000000000..e3ffe8139a --- /dev/null +++ b/ts/types/backbone/Collection.ts @@ -0,0 +1,11 @@ +/** + * @prettier + */ +import { Model } from './Model'; + +export interface Collection { + models: Array>; + // tslint:disable-next-line no-misused-new + new(): Collection; + fetch(options: object): JQuery.Deferred; +} diff --git a/ts/types/backbone/Model.ts b/ts/types/backbone/Model.ts new file mode 100644 index 0000000000..b1578608a2 --- /dev/null +++ b/ts/types/backbone/Model.ts @@ -0,0 +1,7 @@ +/** + * @prettier + */ + +export interface Model { + toJSON(): T; +} From 082ef98a568d1f1fd583a96d64dfc1c636d04d40 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 21:55:53 -0400 Subject: [PATCH 051/122] Add type definition for `deferredToPromise` --- js/modules/deferred_to_promise.d.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 js/modules/deferred_to_promise.d.ts diff --git a/js/modules/deferred_to_promise.d.ts b/js/modules/deferred_to_promise.d.ts new file mode 100644 index 0000000000..b4e87b0121 --- /dev/null +++ b/js/modules/deferred_to_promise.d.ts @@ -0,0 +1 @@ +export function deferredToPromise(deferred: JQuery.Deferred): Promise; From cd2a02a62651e28e6c93d1a5e4034b3edc120f80 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 22:06:55 -0400 Subject: [PATCH 052/122] Add TSLint Prettier overrides --- tslint.json | 27 +++++++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/tslint.json b/tslint.json index d0964aa596..79b5414351 100644 --- a/tslint.json +++ b/tslint.json @@ -8,11 +8,17 @@ "rules": { "align": [true, "arguments", "elements", "members", "parameters", "statements"], "array-type": [true, "generic"], + + // Preferred by Prettier: + "arrow-parens": [true, "ban-single-arg-parens"], + "import-spacing": false, "indent": [true, "spaces", 2], "interface-name": [true, "never-prefix"], "linebreak-style": [true, "LF"], - "max-line-length": [true, 90], + + // Ignore `import`s to allow Prettier formatting: + "max-line-length": [true, {"limit": 90, "ignore-pattern": "^import"}], "mocha-avoid-only": true, // Disabled until we can allow dynamically generated tests: @@ -31,8 +37,25 @@ "named-imports-order": "case-insensitive" }], - "quotemark": [true, "single", "jsx-double", "avoid-template", "avoid-escape"] + "quotemark": [true, "single", "jsx-double", "avoid-template", "avoid-escape"], + // Preferred by Prettier: + "semicolon": [true, "always", "ignore-bound-class-methods"], + + // Preferred by Prettier: + "trailing-comma": [ + true, + { + "singleline": "never", + "multiline": { + "objects": "always", + "arrays": "always", + "functions": "never", + "typeLiterals": "always" + }, + "esSpecCompliant": true + } + ] }, "rulesDirectory": [ "node_modules/tslint-microsoft-contrib" From 320a8d31c16c8ae07cc439aa4689865795f1680d Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 22:07:20 -0400 Subject: [PATCH 053/122] TSLint: Allow multiline JS in JSX for CSS-in-JS --- tslint.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/tslint.json b/tslint.json index 79b5414351..e6a8920b4f 100644 --- a/tslint.json +++ b/tslint.json @@ -15,6 +15,11 @@ "import-spacing": false, "indent": [true, "spaces", 2], "interface-name": [true, "never-prefix"], + + // Allows us to write inline `style`s. Revisit when we have a more sophisticated + // CSS-in-JS solution: + "jsx-no-multiline-js": false, + "linebreak-style": [true, "LF"], // Ignore `import`s to allow Prettier formatting: From 648a7ab1bbc1b6ab2245cfaac6735b659a195016 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 22:09:56 -0400 Subject: [PATCH 054/122] Autoformat using Prettier --- .../media-gallery/groupMessagesByDate.ts | 6 ++-- ts/test/html/index_test.ts | 2 +- ts/types/Message.ts | 28 +++++++++++-------- ts/types/backbone/Collection.ts | 2 +- .../message/initializeAttachmentMetadata.ts | 10 ++++--- 5 files changed, 27 insertions(+), 21 deletions(-) diff --git a/ts/components/conversation/media-gallery/groupMessagesByDate.ts b/ts/components/conversation/media-gallery/groupMessagesByDate.ts index fac79dcb3d..8f280d22f3 100644 --- a/ts/components/conversation/media-gallery/groupMessagesByDate.ts +++ b/ts/components/conversation/media-gallery/groupMessagesByDate.ts @@ -76,7 +76,7 @@ const toSection = ( case 'thisMonth': return { type: firstMessageWithSection.type, - messages: messages, + messages, }; case 'yearMonth': return { @@ -94,11 +94,11 @@ const toSection = ( } }; -type GenericMessageWithSection = { +interface GenericMessageWithSection { order: number; type: T; message: Message; -}; +} type MessageWithStaticSection = GenericMessageWithSection; type MessageWithYearMonthSection = GenericMessageWithSection< YearMonthSectionType diff --git a/ts/test/html/index_test.ts b/ts/test/html/index_test.ts index f2c4602a5c..87ffc84a94 100644 --- a/ts/test/html/index_test.ts +++ b/ts/test/html/index_test.ts @@ -57,7 +57,7 @@ describe('HTML', () => { }, ]; - TESTS.forEach((test) => { + TESTS.forEach(test => { (test.skipped ? it.skip : it)(`should handle ${test.name}`, () => { const preText = test.preText || 'Hello '; const postText = test.postText || ' World!'; diff --git a/ts/types/Message.ts b/ts/types/Message.ts index bb01ef089b..0be2060251 100644 --- a/ts/types/Message.ts +++ b/ts/types/Message.ts @@ -66,16 +66,20 @@ type SharedMessageProperties = Readonly<{ timestamp: number; }>; -type ExpirationTimerUpdate = Readonly<{ - expirationTimerUpdate?: Readonly<{ - expireTimer: number; - fromSync: boolean; - source: string; // PhoneNumber - }>; -}>; +type ExpirationTimerUpdate = Partial< + Readonly<{ + expirationTimerUpdate: Readonly<{ + expireTimer: number; + fromSync: boolean; + source: string; // PhoneNumber + }>; + }> +>; -type Message4 = Partial>; +type Message4 = Partial< + Readonly<{ + hasAttachments: IndexableBoolean; + hasVisualMediaAttachments: IndexableBoolean; + hasFileAttachments: IndexableBoolean; + }> +>; diff --git a/ts/types/backbone/Collection.ts b/ts/types/backbone/Collection.ts index e3ffe8139a..c67b2051f6 100644 --- a/ts/types/backbone/Collection.ts +++ b/ts/types/backbone/Collection.ts @@ -6,6 +6,6 @@ import { Model } from './Model'; export interface Collection { models: Array>; // tslint:disable-next-line no-misused-new - new(): Collection; + new (): Collection; fetch(options: object): JQuery.Deferred; } diff --git a/ts/types/message/initializeAttachmentMetadata.ts b/ts/types/message/initializeAttachmentMetadata.ts index 697390f3b3..251529695c 100644 --- a/ts/types/message/initializeAttachmentMetadata.ts +++ b/ts/types/message/initializeAttachmentMetadata.ts @@ -8,18 +8,20 @@ import * as IndexedDB from '../IndexedDB'; import { Message } from '../Message'; export const initializeAttachmentMetadata = async ( - message: Message, + message: Message ): Promise => { if (message.type === 'verified-change') { return message; } - const hasAttachments = IndexedDB.toIndexableBoolean(message.attachments.length > 0); + const hasAttachments = IndexedDB.toIndexableBoolean( + message.attachments.length > 0 + ); const [hasVisualMediaAttachments, hasFileAttachments] = partition( message.attachments, - Attachment.isVisualMedia, + Attachment.isVisualMedia ) - .map((attachments) => attachments.length > 0) + .map(attachments => attachments.length > 0) .map(IndexedDB.toIndexableBoolean); return { From e5d90775d0241726da16b183d92fedeed78a3dce Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Sun, 15 Apr 2018 03:05:16 -0400 Subject: [PATCH 055/122] Add `MapAsync` type definition --- ts/types/MapAsync.ts | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 ts/types/MapAsync.ts diff --git a/ts/types/MapAsync.ts b/ts/types/MapAsync.ts new file mode 100644 index 0000000000..538adfe9d3 --- /dev/null +++ b/ts/types/MapAsync.ts @@ -0,0 +1,4 @@ +/** + * @prettier + */ +export type MapAsync = (value: T) => Promise; From cad5e417f39c90a64b66a3e267e665d980fe6bee Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 22:14:58 -0400 Subject: [PATCH 056/122] Add `arrayBufferToObjectURL` module --- ts/util/arrayBufferToObjectURL.ts | 15 +++++++++++++++ ts/util/index.ts | 3 ++- 2 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 ts/util/arrayBufferToObjectURL.ts diff --git a/ts/util/arrayBufferToObjectURL.ts b/ts/util/arrayBufferToObjectURL.ts new file mode 100644 index 0000000000..29bdb9eca9 --- /dev/null +++ b/ts/util/arrayBufferToObjectURL.ts @@ -0,0 +1,15 @@ +/** + * @prettier + */ +import { MIMEType } from '../types/MIME'; + +export const arrayBufferToObjectURL = ({ + data, + type, +}: { + data: ArrayBuffer; + type: MIMEType; +}): string => { + const blob = new Blob([data], { type }); + return URL.createObjectURL(blob); +}; diff --git a/ts/util/index.ts b/ts/util/index.ts index 9376b0e0b2..03e5af3305 100644 --- a/ts/util/index.ts +++ b/ts/util/index.ts @@ -2,6 +2,7 @@ * @prettier */ import * as GoogleChrome from './GoogleChrome'; +import { arrayBufferToObjectURL } from './arrayBufferToObjectURL'; import { missingCaseError } from './missingCaseError'; -export { GoogleChrome, missingCaseError }; +export { arrayBufferToObjectURL, GoogleChrome, missingCaseError }; From 825980fbd13b08ee108cb440a31fe2a089a5b3b3 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 22:16:35 -0400 Subject: [PATCH 057/122] Add `Collection.fetchVisualMediaAttachments` --- ts/backbone/Conversation.ts | 44 +++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 ts/backbone/Conversation.ts diff --git a/ts/backbone/Conversation.ts b/ts/backbone/Conversation.ts new file mode 100644 index 0000000000..2d652029ad --- /dev/null +++ b/ts/backbone/Conversation.ts @@ -0,0 +1,44 @@ +/** + * @prettier + */ +import is from '@sindresorhus/is'; + +import { deferredToPromise } from '../../js/modules/deferred_to_promise'; +import { Collection as BackboneCollection } from '../types/backbone/Collection'; +import { Message } from '../types/Message'; + +export const fetchVisualMediaAttachments = async ({ + conversationId, + WhisperMessageCollection, +}: { + conversationId: string; + WhisperMessageCollection: BackboneCollection; +}): Promise> => { + if (!is.string(conversationId)) { + throw new TypeError("'conversationId' is required"); + } + + if (!is.object(WhisperMessageCollection)) { + throw new TypeError("'WhisperMessageCollection' is required"); + } + + const collection = new WhisperMessageCollection(); + const lowerReceivedAt = 0; + const upperReceivedAt = Number.MAX_VALUE; + const hasVisualMediaAttachments = 1; + await deferredToPromise( + collection.fetch({ + index: { + // 'hasVisualMediaAttachments' index on + // [conversationId, hasVisualMediaAttachments, received_at] + name: 'hasVisualMediaAttachments', + lower: [conversationId, hasVisualMediaAttachments, lowerReceivedAt], + upper: [conversationId, hasVisualMediaAttachments, upperReceivedAt], + order: 'desc', + }, + limit: 10, + }) + ); + + return collection.models.map(model => model.toJSON()); +}; From 27c4bf90e3c837f4f71bdd1f7a09fa751d9cda30 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 22:16:09 -0400 Subject: [PATCH 058/122] Add `Signal.Backbone` --- preload.js | 1 + ts/backbone/index.ts | 3 +++ 2 files changed, 4 insertions(+) create mode 100644 ts/backbone/index.ts diff --git a/preload.js b/preload.js index 7af8059816..e47f0dc39a 100644 --- a/preload.js +++ b/preload.js @@ -154,6 +154,7 @@ const { getPlaceholderMigrations } = const { IdleDetector } = require('./js/modules/idle_detector'); window.Signal = {}; +window.Signal.Backbone = require('./ts/backbone'); window.Signal.Backup = require('./js/modules/backup'); window.Signal.Crypto = require('./js/modules/crypto'); window.Signal.Database = require('./js/modules/database'); diff --git a/ts/backbone/index.ts b/ts/backbone/index.ts new file mode 100644 index 0000000000..431444a036 --- /dev/null +++ b/ts/backbone/index.ts @@ -0,0 +1,3 @@ +import * as Conversation from './Conversation'; + +export { Conversation }; From 2dc3877fd4c3e45f8c1ae37b2960ab49095bc07b Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Fri, 13 Apr 2018 22:16:57 -0400 Subject: [PATCH 059/122] Integrate visual media attachment gallery --- js/views/conversation_view.js | 47 +++++++++++++++++++++++++++++++++-- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 90f47abac7..960afe54f9 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -572,8 +572,51 @@ el[0].scrollIntoView(); }, - viewAllMedia() { - console.log('View All Media'); + async viewAllMedia() { + // We have to do this manually, since our React component will not propagate click + // events up to its parent elements in the DOM. + this.closeMenu(); + + // TODO + // + // - [x] Fetch visual media attachments + // - [ ] Fetch file attachments + // - [ ] Add mechanism to fetch more data + + const mediaWithoutAttachmentData = + await Signal.Backbone.Conversation.fetchVisualMediaAttachments({ + conversationId: this.model.get('id'), + WhisperMessageCollection: Whisper.MessageCollection, + }); + + const mediaWithAttachmentData = + await Promise.all(mediaWithoutAttachmentData.map(Signal.Migrations.loadMessage)); + + const withObjectURL = message => { + if (!message.attachments || message.attachments.length === 0) { + throw new TypeError('`message.attachments` cannot be empty'); + } + const attachment = message.attachments[0]; + const objectURL = Signal.Util.arrayBufferToObjectURL({ + data: attachment.data, + type: attachment.contentType, + }); + return Object.assign({}, message, {objectURL}); + } + const mediaWithObjectURLs = mediaWithAttachmentData.map(withObjectURL); + + const props = { + media: mediaWithObjectURLs, + documents: [], + }; + + const view = new Whisper.ReactWrapperView({ + Component: MediaGallery, + props, + onClose: () => this.resetPanel(), + }); + + this.listenBack(view); }, scrollToBottom() { From 45d89d1e44aaa84427491a86e0fa002bbd2fea2f Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Sat, 14 Apr 2018 20:09:11 -0400 Subject: [PATCH 060/122] Create `UserMessage` type Describes user visible messages that can have attachments. --- .../media-gallery/AttachmentListSection.tsx | 8 ++++++-- .../conversation/media-gallery/propTypes/Message.tsx | 1 - .../components/media-gallery/groupMessagesByDate.ts | 11 ----------- ts/types/Message.ts | 3 ++- 4 files changed, 8 insertions(+), 15 deletions(-) diff --git a/ts/components/conversation/media-gallery/AttachmentListSection.tsx b/ts/components/conversation/media-gallery/AttachmentListSection.tsx index 3a013f6d61..0032752308 100644 --- a/ts/components/conversation/media-gallery/AttachmentListSection.tsx +++ b/ts/components/conversation/media-gallery/AttachmentListSection.tsx @@ -44,12 +44,16 @@ export class AttachmentListSection extends React.Component { switch (type) { case 'media': return ( - + ); case 'documents': return ( ({ - id: date.toUTCString(), received_at: date.getTime(), attachments: [], }); @@ -44,12 +43,10 @@ describe('groupMessagesByDate', () => { type: 'today', messages: [ { - id: 'Thu, 12 Apr 2018 12:00:00 GMT', received_at: 1523534400000, attachments: [], }, { - id: 'Thu, 12 Apr 2018 00:01:00 GMT', received_at: 1523491260000, attachments: [], }, @@ -59,7 +56,6 @@ describe('groupMessagesByDate', () => { type: 'yesterday', messages: [ { - id: 'Wed, 11 Apr 2018 23:59:00 GMT', received_at: 1523491140000, attachments: [], }, @@ -69,7 +65,6 @@ describe('groupMessagesByDate', () => { type: 'thisWeek', messages: [ { - id: 'Mon, 09 Apr 2018 00:01:00 GMT', received_at: 1523232060000, attachments: [], }, @@ -79,12 +74,10 @@ describe('groupMessagesByDate', () => { type: 'thisMonth', messages: [ { - id: 'Sun, 08 Apr 2018 23:59:00 GMT', received_at: 1523231940000, attachments: [], }, { - id: 'Sun, 01 Apr 2018 00:01:00 GMT', received_at: 1522540860000, attachments: [], }, @@ -96,12 +89,10 @@ describe('groupMessagesByDate', () => { month: 2, messages: [ { - id: 'Sat, 31 Mar 2018 23:59:00 GMT', received_at: 1522540740000, attachments: [], }, { - id: 'Thu, 01 Mar 2018 14:00:00 GMT', received_at: 1519912800000, attachments: [], }, @@ -113,12 +104,10 @@ describe('groupMessagesByDate', () => { month: 1, messages: [ { - id: 'Mon, 28 Feb 2011 23:59:00 GMT', received_at: 1298937540000, attachments: [], }, { - id: 'Tue, 01 Feb 2011 10:00:00 GMT', received_at: 1296554400000, attachments: [], }, diff --git a/ts/types/Message.ts b/ts/types/Message.ts index 0be2060251..808f5cd129 100644 --- a/ts/types/Message.ts +++ b/ts/types/Message.ts @@ -4,7 +4,8 @@ import { Attachment } from './Attachment'; import { IndexableBoolean } from './IndexedDB'; -export type Message = IncomingMessage | OutgoingMessage | VerifiedChangeMessage; +export type Message = UserMessage | VerifiedChangeMessage; +export type UserMessage = IncomingMessage | OutgoingMessage; export type IncomingMessage = Readonly< { From 4ce0472b9ff092235c5a6617de0922cb4373f150 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Sat, 14 Apr 2018 20:09:52 -0400 Subject: [PATCH 061/122] Extract `Message.loadWithObjectURL` --- js/views/conversation_view.js | 29 +++-------- preload.js | 6 +++ ts/backbone/Conversation.ts | 2 +- .../media-gallery/propTypes/Message.tsx | 52 +++++++++++++++---- 4 files changed, 56 insertions(+), 33 deletions(-) diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 960afe54f9..040a0d437d 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -583,27 +583,14 @@ // - [ ] Fetch file attachments // - [ ] Add mechanism to fetch more data - const mediaWithoutAttachmentData = - await Signal.Backbone.Conversation.fetchVisualMediaAttachments({ - conversationId: this.model.get('id'), - WhisperMessageCollection: Whisper.MessageCollection, - }); - - const mediaWithAttachmentData = - await Promise.all(mediaWithoutAttachmentData.map(Signal.Migrations.loadMessage)); - - const withObjectURL = message => { - if (!message.attachments || message.attachments.length === 0) { - throw new TypeError('`message.attachments` cannot be empty'); - } - const attachment = message.attachments[0]; - const objectURL = Signal.Util.arrayBufferToObjectURL({ - data: attachment.data, - type: attachment.contentType, - }); - return Object.assign({}, message, {objectURL}); - } - const mediaWithObjectURLs = mediaWithAttachmentData.map(withObjectURL); + const media = await Signal.Backbone.Conversation.fetchVisualMediaAttachments({ + conversationId: this.model.get('id'), + WhisperMessageCollection: Whisper.MessageCollection, + }); + const loadMessages = Signal.Components.PropTypes.Message.loadWithObjectURL( + Signal.Migrations.loadMessage + ); + const mediaWithObjectURLs = await loadMessages(media); const props = { media: mediaWithObjectURLs, diff --git a/preload.js b/preload.js index e47f0dc39a..8b6eaa2a3c 100644 --- a/preload.js +++ b/preload.js @@ -166,8 +166,14 @@ const { MediaGallery } = require('./ts/components/conversation/media-gallery/MediaGallery'); const { Quote } = require('./ts/components/conversation/Quote'); +const PropTypesMessage = + require('./ts/components/conversation/media-gallery/propTypes/Message'); + window.Signal.Components = { MediaGallery, + PropTypes: { + Message: PropTypesMessage, + }, Quote, }; diff --git a/ts/backbone/Conversation.ts b/ts/backbone/Conversation.ts index 2d652029ad..f687d72fdc 100644 --- a/ts/backbone/Conversation.ts +++ b/ts/backbone/Conversation.ts @@ -3,8 +3,8 @@ */ import is from '@sindresorhus/is'; -import { deferredToPromise } from '../../js/modules/deferred_to_promise'; import { Collection as BackboneCollection } from '../types/backbone/Collection'; +import { deferredToPromise } from '../../js/modules/deferred_to_promise'; import { Message } from '../types/Message'; export const fetchVisualMediaAttachments = async ({ diff --git a/ts/components/conversation/media-gallery/propTypes/Message.tsx b/ts/components/conversation/media-gallery/propTypes/Message.tsx index c86a7e29f2..b37b1cba30 100644 --- a/ts/components/conversation/media-gallery/propTypes/Message.tsx +++ b/ts/components/conversation/media-gallery/propTypes/Message.tsx @@ -1,15 +1,45 @@ /** * @prettier */ -export interface Message { - body?: string; - received_at: number; - attachments: Array<{ - data?: ArrayBuffer; - fileName?: string; - size?: number; - }>; +import is from '@sindresorhus/is'; - // TODO: Revisit - objectURL?: string; -} +import { arrayBufferToObjectURL } from '../../../../util/arrayBufferToObjectURL'; +import { Attachment } from '../../../../types/Attachment'; +import { MapAsync } from '../../../../types/MapAsync'; +import { MIMEType } from '../../../../types/MIME'; + +export type Message = { + attachments: Array; + received_at: number; +} & { objectURL?: string }; + +const DEFAULT_CONTENT_TYPE: MIMEType = 'application/octet-stream' as MIMEType; + +export const loadWithObjectURL = (loadMessage: MapAsync) => async ( + media: Array +): Promise> => { + if (!is.function_(loadMessage)) { + throw new TypeError("'loadMessage' must be a function"); + } + if (!is.array(media)) { + throw new TypeError("'media' must be a function"); + } + + const mediaWithAttachmentData = await Promise.all(media.map(loadMessage)); + return mediaWithAttachmentData.map(withObjectURL); +}; + +const withObjectURL = (message: Message): Message => { + if (message.attachments.length === 0) { + throw new TypeError('`message.attachments` cannot be empty'); + } + const attachment = message.attachments[0]; + const objectURL = arrayBufferToObjectURL({ + data: attachment.data, + type: attachment.contentType || DEFAULT_CONTENT_TYPE, + }); + return { + ...message, + objectURL, + }; +}; From 0a4be2e0f40356d063217bcf061efdae5bee8493 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Sat, 14 Apr 2018 21:03:21 -0400 Subject: [PATCH 062/122] Remove unused `i18n` --- .../conversation/media-gallery/AttachmentListSection.tsx | 1 - ts/components/conversation/media-gallery/ImageThumbnail.tsx | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/ts/components/conversation/media-gallery/AttachmentListSection.tsx b/ts/components/conversation/media-gallery/AttachmentListSection.tsx index 0032752308..8a900de5b5 100644 --- a/ts/components/conversation/media-gallery/AttachmentListSection.tsx +++ b/ts/components/conversation/media-gallery/AttachmentListSection.tsx @@ -46,7 +46,6 @@ export class AttachmentListSection extends React.Component { return ( ); diff --git a/ts/components/conversation/media-gallery/ImageThumbnail.tsx b/ts/components/conversation/media-gallery/ImageThumbnail.tsx index afe802ed56..27fbf40a7f 100644 --- a/ts/components/conversation/media-gallery/ImageThumbnail.tsx +++ b/ts/components/conversation/media-gallery/ImageThumbnail.tsx @@ -6,9 +6,9 @@ import React from 'react'; import { LoadingIndicator } from './LoadingIndicator'; import { Message } from './propTypes/Message'; + interface Props { message: Message; - i18n: (value: string) => string; } const size = { @@ -30,7 +30,7 @@ const styles = { export class ImageThumbnail extends React.Component { public renderContent() { - const { /* i18n, */ message } = this.props; + const { message } = this.props; if (!message.objectURL) { return ; From 809e34b0f4092909e5eaf998c9ade851b9fb96a4 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Sat, 14 Apr 2018 21:08:16 -0400 Subject: [PATCH 063/122] Load 50 attachments for media gallery --- ts/backbone/Conversation.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/ts/backbone/Conversation.ts b/ts/backbone/Conversation.ts index f687d72fdc..84348bde9d 100644 --- a/ts/backbone/Conversation.ts +++ b/ts/backbone/Conversation.ts @@ -29,14 +29,12 @@ export const fetchVisualMediaAttachments = async ({ await deferredToPromise( collection.fetch({ index: { - // 'hasVisualMediaAttachments' index on - // [conversationId, hasVisualMediaAttachments, received_at] name: 'hasVisualMediaAttachments', lower: [conversationId, hasVisualMediaAttachments, lowerReceivedAt], upper: [conversationId, hasVisualMediaAttachments, upperReceivedAt], order: 'desc', }, - limit: 10, + limit: 50, }) ); From c6904476f4ae7ec2e3a1bcfd38d3e7cc8f7b21f8 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Sat, 14 Apr 2018 21:08:36 -0400 Subject: [PATCH 064/122] Improve `IndexableBoolean` type --- ts/types/IndexedDB.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/ts/types/IndexedDB.ts b/ts/types/IndexedDB.ts index 43080c78b9..150ad64316 100644 --- a/ts/types/IndexedDB.ts +++ b/ts/types/IndexedDB.ts @@ -6,7 +6,12 @@ // to `0`. // N.B. Using `undefined` allows excluding an entry from an index. Useful // when index size is a consideration or one only needs to query for `true`. -export type IndexableBoolean = 1 | 0; +export type IndexableBoolean = IndexableFalse | IndexableTrue; +type IndexableTrue = 1; +type IndexableFalse = 0; + +export const INDEXABLE_FALSE: IndexableFalse = 0; +export const INDEXABLE_TRUE: IndexableTrue = 1; export const toIndexableBoolean = (value: boolean): IndexableBoolean => - value ? 1 : 0; + value ? INDEXABLE_TRUE : INDEXABLE_FALSE; From 5d0469adefca5c95a14661cb7e821542e2c1b1c0 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Sat, 14 Apr 2018 21:09:02 -0400 Subject: [PATCH 065/122] Skip loading videos into memory for performance --- .../media-gallery/propTypes/Message.tsx | 43 ++++++++++++++++--- 1 file changed, 38 insertions(+), 5 deletions(-) diff --git a/ts/components/conversation/media-gallery/propTypes/Message.tsx b/ts/components/conversation/media-gallery/propTypes/Message.tsx index b37b1cba30..326fc0e597 100644 --- a/ts/components/conversation/media-gallery/propTypes/Message.tsx +++ b/ts/components/conversation/media-gallery/propTypes/Message.tsx @@ -2,7 +2,9 @@ * @prettier */ import is from '@sindresorhus/is'; +import { partition, sortBy } from 'lodash'; +import * as MIME from '../../../../types/MIME'; import { arrayBufferToObjectURL } from '../../../../util/arrayBufferToObjectURL'; import { Attachment } from '../../../../types/Attachment'; import { MapAsync } from '../../../../types/MapAsync'; @@ -16,24 +18,55 @@ export type Message = { const DEFAULT_CONTENT_TYPE: MIMEType = 'application/octet-stream' as MIMEType; export const loadWithObjectURL = (loadMessage: MapAsync) => async ( - media: Array + messages: Array ): Promise> => { if (!is.function_(loadMessage)) { throw new TypeError("'loadMessage' must be a function"); } - if (!is.array(media)) { - throw new TypeError("'media' must be a function"); + if (!is.array(messages)) { + throw new TypeError("'messages' must be an array"); } - const mediaWithAttachmentData = await Promise.all(media.map(loadMessage)); - return mediaWithAttachmentData.map(withObjectURL); + // Messages with video are too expensive to load into memory, so we don’t: + const [messagesWithVideo, messagesWithoutVideo] = partition( + messages, + hasVideoAttachment + ); + const loadedMessagesWithoutVideo = await Promise.all( + messagesWithoutVideo.map(loadMessage) + ); + const loadedMessages = sortBy( + [...messagesWithVideo, ...loadedMessagesWithoutVideo], + message => -message.received_at + ); + + return loadedMessages.map(withObjectURL); }; +const hasVideoAttachment = (message: Message): boolean => + message.attachments.some( + attachment => + !is.undefined(attachment.contentType) && + MIME.isVideo(attachment.contentType) + ); + 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') { + throw new TypeError('`attachment.contentType` is required'); + } + + if (MIME.isVideo(attachment.contentType)) { + return { + ...message, + objectURL: 'images/video.svg', + }; + } + const objectURL = arrayBufferToObjectURL({ data: attachment.data, type: attachment.contentType || DEFAULT_CONTENT_TYPE, From cb94d09ef99eb890d4c8d39bd8ede5bac64b12bf Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Sat, 14 Apr 2018 21:11:40 -0400 Subject: [PATCH 066/122] Rename media gallery items --- ...hmentListSection.tsx => AttachmentSection.tsx} | 15 +++++---------- .../{DocumentListEntry.md => DocumentListItem.md} | 8 ++++---- ...DocumentListEntry.tsx => DocumentListItem.tsx} | 2 +- .../conversation/media-gallery/MediaGallery.tsx | 4 ++-- .../{ImageThumbnail.tsx => MediaGridItem.tsx} | 3 +-- ts/util/missingCaseError.ts | 4 ++-- 6 files changed, 15 insertions(+), 21 deletions(-) rename ts/components/conversation/media-gallery/{AttachmentListSection.tsx => AttachmentSection.tsx} (80%) rename ts/components/conversation/media-gallery/{DocumentListEntry.md => DocumentListItem.md} (77%) rename ts/components/conversation/media-gallery/{DocumentListEntry.tsx => DocumentListItem.tsx} (96%) rename ts/components/conversation/media-gallery/{ImageThumbnail.tsx => MediaGridItem.tsx} (92%) diff --git a/ts/components/conversation/media-gallery/AttachmentListSection.tsx b/ts/components/conversation/media-gallery/AttachmentSection.tsx similarity index 80% rename from ts/components/conversation/media-gallery/AttachmentListSection.tsx rename to ts/components/conversation/media-gallery/AttachmentSection.tsx index 8a900de5b5..10a09f2a8a 100644 --- a/ts/components/conversation/media-gallery/AttachmentListSection.tsx +++ b/ts/components/conversation/media-gallery/AttachmentSection.tsx @@ -3,8 +3,8 @@ */ import React from 'react'; -import { DocumentListEntry } from './DocumentListEntry'; -import { ImageThumbnail } from './ImageThumbnail'; +import { DocumentListItem } from './DocumentListItem'; +import { MediaGridItem } from './MediaGridItem'; import { Message } from './propTypes/Message'; import { missingCaseError } from '../../../util/missingCaseError'; @@ -33,7 +33,7 @@ interface Props { messages: Array; } -export class AttachmentListSection extends React.Component { +export class AttachmentSection extends React.Component { public renderItems() { const { i18n, messages, type } = this.props; @@ -43,15 +43,10 @@ export class AttachmentListSection extends React.Component { switch (type) { case 'media': - return ( - - ); + return ; case 'documents': return ( - - - { +export class DocumentListItem extends React.Component { public renderContent() { const { fileName, fileSize, timestamp } = this.props; diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx index c12cf19a91..b2047be10c 100644 --- a/ts/components/conversation/media-gallery/MediaGallery.tsx +++ b/ts/components/conversation/media-gallery/MediaGallery.tsx @@ -5,7 +5,7 @@ import React from 'react'; import moment from 'moment'; -import { AttachmentListSection } from './AttachmentListSection'; +import { AttachmentSection } from './AttachmentSection'; import { groupMessagesByDate } from './groupMessagesByDate'; import { Message } from './propTypes/Message'; @@ -131,7 +131,7 @@ export class MediaGallery extends React.Component { ? date.format(MONTH_FORMAT) : i18n(section.type); return ( - { +export class MediaGridItem extends React.Component { public renderContent() { const { message } = this.props; diff --git a/ts/util/missingCaseError.ts b/ts/util/missingCaseError.ts index cadc49b6d3..9efeda3584 100644 --- a/ts/util/missingCaseError.ts +++ b/ts/util/missingCaseError.ts @@ -9,9 +9,9 @@ // const type: AttachmentType = selectedTab; // switch (type) { // case 'media': -// return ; +// return ; // case 'documents': -// return ; +// return ; // default: // return missingCaseError(type); // } From 4a5a2cb5c1b42b62b98d23c66e04f5a4e9fd8d14 Mon Sep 17 00:00:00 2001 From: Daniel Gasienica Date: Sat, 14 Apr 2018 23:27:03 -0400 Subject: [PATCH 067/122] Replace Backbone with React lightbox --- background.html | 10 +----- js/views/attachment_view.js | 29 +++++++++++----- js/views/inbox_view.js | 4 --- preload.js | 3 ++ stylesheets/_lightbox.scss | 66 +++++-------------------------------- stylesheets/_variables.scss | 2 ++ ts/components/Lightbox.tsx | 40 ++++++++++++++++++++++ 7 files changed, 75 insertions(+), 79 deletions(-) create mode 100644 ts/components/Lightbox.tsx diff --git a/background.html b/background.html index 98b8b3c044..a06ad0abc4 100644 --- a/background.html +++ b/background.html @@ -100,6 +100,7 @@
      +
      - -