From 2a5f513ebc2333d470d149f94d97bd5dded79702 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Tue, 24 Apr 2018 17:15:50 -0400
Subject: [PATCH 01/47] Organize `global`s

---
 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 067ece5386..21f876017c 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -8,9 +8,9 @@
 
 /* global extension: false */
 /* global i18n: false */
+/* global Signal: false */
 /* global storage: false */
 /* global Whisper: false */
-/* global Signal: false */
 
 // eslint-disable-next-line func-names
 (function () {

From 3a8582ee166c2959ea655876828d68208e067e59 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Wed, 25 Apr 2018 10:49:39 -0400
Subject: [PATCH 02/47] Re-enable media gallery access

---
 background.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/background.html b/background.html
index 0a5665df31..7bdbf5f874 100644
--- a/background.html
+++ b/background.html
@@ -160,8 +160,7 @@
               <button class='hamburger' alt='conversation menu'></button>
               <ul class='menu-list'>
                   <li class='disappearing-messages'>{{ disappearing-messages }}</li>
-                  <!-- TODO: Enable once media gallerys ships: -->
-                  <!-- <li class='view-all-media'>{{ view-all-media }}</li> -->
+                  <li class='view-all-media'>{{ view-all-media }}</li>
                   {{#group}}
                       <li class='show-members'>{{ show-members }}</li>
                       <!-- <li class='update-group'>Update group</li> -->

From 96c44094e335183e5be3565d80aa75da74565b83 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Wed, 25 Apr 2018 11:14:38 -0400
Subject: [PATCH 03/47] Implement `Conversation.fetchFileAttachments`

---
 ts/backbone/Conversation.ts | 45 ++++++++++++++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 5 deletions(-)

diff --git a/ts/backbone/Conversation.ts b/ts/backbone/Conversation.ts
index 20dc2acfe8..09209410ac 100644
--- a/ts/backbone/Conversation.ts
+++ b/ts/backbone/Conversation.ts
@@ -5,14 +5,49 @@ import is from '@sindresorhus/is';
 
 import { Collection as BackboneCollection } from '../types/backbone/Collection';
 import { deferredToPromise } from '../../js/modules/deferred_to_promise';
+import { IndexableBoolean } from '../types/IndexedDB';
 import { Message } from '../types/Message';
 
+const DEFAULT_FETCH_COUNT = 50;
+
 export const fetchVisualMediaAttachments = async ({
   conversationId,
   WhisperMessageCollection,
 }: {
   conversationId: string;
   WhisperMessageCollection: BackboneCollection<Message>;
+}): Promise<Array<Message>> =>
+  fetchFromAttachmentsIndex({
+    name: 'hasVisualMediaAttachments',
+    conversationId,
+    WhisperMessageCollection,
+    count: DEFAULT_FETCH_COUNT,
+  });
+
+export const fetchFileAttachments = async ({
+  conversationId,
+  WhisperMessageCollection,
+}: {
+  conversationId: string;
+  WhisperMessageCollection: BackboneCollection<Message>;
+}): Promise<Array<Message>> =>
+  fetchFromAttachmentsIndex({
+    name: 'hasFileAttachments',
+    conversationId,
+    WhisperMessageCollection,
+    count: DEFAULT_FETCH_COUNT,
+  });
+
+const fetchFromAttachmentsIndex = async ({
+  name,
+  conversationId,
+  WhisperMessageCollection,
+  count,
+}: {
+  name: 'hasVisualMediaAttachments' | 'hasFileAttachments';
+  conversationId: string;
+  WhisperMessageCollection: BackboneCollection<Message>;
+  count: number;
 }): Promise<Array<Message>> => {
   if (!is.string(conversationId)) {
     throw new TypeError("'conversationId' is required");
@@ -25,16 +60,16 @@ export const fetchVisualMediaAttachments = async ({
   const collection = new WhisperMessageCollection();
   const lowerReceivedAt = 0;
   const upperReceivedAt = Number.MAX_VALUE;
-  const hasVisualMediaAttachments = 1;
+  const condition: IndexableBoolean = 1;
   await deferredToPromise(
     collection.fetch({
       index: {
-        name: 'hasVisualMediaAttachments',
-        lower: [conversationId, lowerReceivedAt, hasVisualMediaAttachments],
-        upper: [conversationId, upperReceivedAt, hasVisualMediaAttachments],
+        name,
+        lower: [conversationId, lowerReceivedAt, condition],
+        upper: [conversationId, upperReceivedAt, condition],
         order: 'desc',
       },
-      limit: 50,
+      limit: count,
     })
   );
 

From 37d73accdebd49dd407dae8091d18fe4a6f99010 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Wed, 25 Apr 2018 11:14:53 -0400
Subject: [PATCH 04/47] =?UTF-8?q?Show=20=E2=80=98Documents=E2=80=99=20tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ts/components/conversation/media-gallery/MediaGallery.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx
index a720ce046b..17db10b0ec 100644
--- a/ts/components/conversation/media-gallery/MediaGallery.tsx
+++ b/ts/components/conversation/media-gallery/MediaGallery.tsx
@@ -95,14 +95,12 @@ export class MediaGallery extends React.Component<Props, State> {
             isSelected={selectedTab === 'media'}
             onSelect={this.handleTabSelect}
           />
-          {/* Disable for MVP:
           <Tab
             label="Documents"
             type="documents"
             isSelected={selectedTab === 'documents'}
             onSelect={this.handleTabSelect}
           />
-          */}
         </div>
         <div style={styles.attachmentsContainer}>{this.renderSections()}</div>
       </div>

From f8119be97bf71a54f2bb39244e60c9d7ec509704 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Wed, 25 Apr 2018 11:15:12 -0400
Subject: [PATCH 05/47] Include videos in media gallery

---
 .../conversation/media-gallery/propTypes/Message.tsx     | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/ts/components/conversation/media-gallery/propTypes/Message.tsx b/ts/components/conversation/media-gallery/propTypes/Message.tsx
index a72e4a44da..73431ec59a 100644
--- a/ts/components/conversation/media-gallery/propTypes/Message.tsx
+++ b/ts/components/conversation/media-gallery/propTypes/Message.tsx
@@ -29,14 +29,15 @@ export const loadWithObjectURL = (loadMessage: MapAsync<Message>) => async (
   }
 
   // Messages with video are too expensive to load into memory, so we don’t:
-  const [, messagesWithoutVideo] = partition(messages, hasVideoAttachment);
+  const [messagesWithVideo, messagesWithoutVideo] = partition(
+    messages,
+    hasVideoAttachment
+  );
   const loadedMessagesWithoutVideo: Array<Message> = await Promise.all(
     messagesWithoutVideo.map(loadMessage)
   );
   const loadedMessages = sortBy(
-    // // Only show images for MVP:
-    // [...messagesWithVideo, ...loadedMessagesWithoutVideo],
-    loadedMessagesWithoutVideo,
+    [...messagesWithVideo, ...loadedMessagesWithoutVideo],
     message => -message.received_at
   );
 

From 954433366eddbb7464d21eeda400e1fbd6775c8d Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Wed, 25 Apr 2018 11:16:16 -0400
Subject: [PATCH 06/47] Load documents for media gallery

---
 js/views/conversation_view.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index 21f876017c..945488a846 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -577,17 +577,24 @@
       //   events up to its parent elements in the DOM.
       this.closeMenu();
 
-      const media = await Signal.Backbone.Conversation.fetchVisualMediaAttachments({
-        conversationId: this.model.get('id'),
-        WhisperMessageCollection: Whisper.MessageCollection,
+      const conversationId = this.model.get('id');
+      const WhisperMessageCollection = Whisper.MessageCollection;
+      const rawMedia = await Signal.Backbone.Conversation.fetchVisualMediaAttachments({
+        conversationId,
+        WhisperMessageCollection,
       });
+      const documents = await Signal.Backbone.Conversation.fetchFileAttachments({
+        conversationId,
+        WhisperMessageCollection,
+      });
+
       const loadMessages = Signal.Components.PropTypes.Message
         .loadWithObjectURL(Signal.Migrations.loadMessage);
-      const mediaWithObjectURLs = await loadMessages(media);
+      const media = await loadMessages(rawMedia);
 
       const mediaGalleryProps = {
-        media: mediaWithObjectURLs,
-        documents: [],
+        media,
+        documents,
         onItemClick: ({ message }) => {
           const lightboxProps = {
             imageURL: message.objectURL,

From 3727205606fb562dd1de683de8e4f307aa1b3463 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Wed, 25 Apr 2018 13:24:48 -0400
Subject: [PATCH 07/47] Organize ESLint file list

---
 .eslintignore | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 6ffa7ebf62..898e6ddb61 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -23,16 +23,16 @@ ts/**/*.js
 !js/logging.js
 !js/models/conversations.js
 !js/models/messages.js
-!test/backup_test.js
 !js/views/attachment_view.js
-!js/views/conversation_view.js
-!js/views/conversation_search_view.js
 !js/views/backbone_wrapper_view.js
+!js/views/conversation_search_view.js
+!js/views/conversation_view.js
 !js/views/debug_log_view.js
 !js/views/file_input_view.js
 !js/views/inbox_view.js
 !js/views/message_view.js
 !js/views/settings_view.js
+!test/backup_test.js
 !libtextsecure/message_receiver.js
 !main.js
 !preload.js

From 4a5e61eaf4a0faa811fd491531c2e0fe360aac53 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Wed, 25 Apr 2018 13:27:28 -0400
Subject: [PATCH 08/47] Implement `Attachment.save`

---
 ts/test/types/Attachment_test.ts | 60 ++++++++++++++++++++++++++++++++
 ts/types/Attachment.ts           | 56 +++++++++++++++++++++++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 ts/test/types/Attachment_test.ts

diff --git a/ts/test/types/Attachment_test.ts b/ts/test/types/Attachment_test.ts
new file mode 100644
index 0000000000..343373d4ba
--- /dev/null
+++ b/ts/test/types/Attachment_test.ts
@@ -0,0 +1,60 @@
+/**
+ * @prettier
+ */
+import 'mocha';
+import { assert } from 'chai';
+
+import * as Attachment from '../../types/Attachment';
+import { MIMEType } from '../../types/MIME';
+// @ts-ignore
+import { stringToArrayBuffer } from '../../../js/modules/string_to_array_buffer';
+
+describe('Attachment', () => {
+  describe('getFileExtension', () => {
+    it('should return file extension from content type', () => {
+      const input: Attachment.Attachment = {
+        data: stringToArrayBuffer('foo'),
+        contentType: 'image/gif' as MIMEType,
+      };
+      assert.strictEqual(Attachment.getFileExtension(input), 'gif');
+    });
+
+    it('should return file extension for QuickTime videos', () => {
+      const input: Attachment.Attachment = {
+        data: stringToArrayBuffer('foo'),
+        contentType: 'video/quicktime' as MIMEType,
+      };
+      assert.strictEqual(Attachment.getFileExtension(input), 'mov');
+    });
+  });
+
+  describe('getSuggestedFilename', () => {
+    context('for attachment with filename', () => {
+      it('should return existing filename if present', () => {
+        const attachment: Attachment.Attachment = {
+          fileName: 'funny-cat.mov',
+          data: stringToArrayBuffer('foo'),
+          contentType: 'video/quicktime' as MIMEType,
+        };
+        const actual = Attachment.getSuggestedFilename({ attachment });
+        const expected = 'funny-cat.mov';
+        assert.strictEqual(actual, expected);
+      });
+    });
+    context('for attachment without filename', () => {
+      it('should generate a filename based on timestamp', () => {
+        const attachment: Attachment.Attachment = {
+          data: stringToArrayBuffer('foo'),
+          contentType: 'video/quicktime' as MIMEType,
+        };
+        const timestamp = new Date(new Date(0).getTimezoneOffset() * 60 * 1000);
+        const actual = Attachment.getSuggestedFilename({
+          attachment,
+          timestamp,
+        });
+        const expected = 'signal-attachment-1970-01-01-000000.mov';
+        assert.strictEqual(actual, expected);
+      });
+    });
+  });
+});
diff --git a/ts/types/Attachment.ts b/ts/types/Attachment.ts
index fa4e091069..b714215571 100644
--- a/ts/types/Attachment.ts
+++ b/ts/types/Attachment.ts
@@ -2,8 +2,10 @@
  * @prettier
  */
 import is from '@sindresorhus/is';
+import moment from 'moment';
 
 import * as GoogleChrome from '../util/GoogleChrome';
+import { arrayBufferToObjectURL } from '../util/arrayBufferToObjectURL';
 import { MIMEType } from './MIME';
 
 export interface Attachment {
@@ -23,6 +25,8 @@ export interface Attachment {
   // flags?: number;
 }
 
+const SAVE_CONTENT_TYPE = 'application/octet-stream' as MIMEType;
+
 export const isVisualMedia = (attachment: Attachment): boolean => {
   const { contentType } = attachment;
 
@@ -34,3 +38,55 @@ export const isVisualMedia = (attachment: Attachment): boolean => {
   const isSupportedVideoType = GoogleChrome.isVideoTypeSupported(contentType);
   return isSupportedImageType || isSupportedVideoType;
 };
+
+export const save = ({
+  attachment,
+  timestamp,
+}: {
+  attachment: Attachment;
+  timestamp?: number;
+}): void => {
+  const url = arrayBufferToObjectURL({
+    data: attachment.data,
+    type: SAVE_CONTENT_TYPE,
+  });
+  const anchorElement = document.createElement('a');
+  anchorElement.href = url;
+  anchorElement.download = getSuggestedFilename({ attachment, timestamp });
+  anchorElement.click();
+  URL.revokeObjectURL(url);
+};
+
+export const getSuggestedFilename = ({
+  attachment,
+  timestamp,
+}: {
+  attachment: Attachment;
+  timestamp?: number | Date;
+}): string => {
+  if (attachment.fileName) {
+    return attachment.fileName;
+  }
+
+  const prefix = 'signal-attachment';
+  const suffix = timestamp
+    ? moment(timestamp).format('-YYYY-MM-DD-HHmmss')
+    : '';
+  const fileType = getFileExtension(attachment);
+  const extension = fileType ? `.${fileType}` : '';
+  return `${prefix}${suffix}${extension}`;
+};
+
+export const getFileExtension = (attachment: Attachment): string | null => {
+  if (!attachment.contentType) {
+    return null;
+  }
+
+  switch (attachment.contentType) {
+    case 'video/quicktime':
+      return 'mov';
+    default:
+      // TODO: Use better MIME --> file extension mapping:
+      return attachment.contentType.split('/')[1];
+  }
+};

From 9a76d4bcf8883c2bdd6a1fae7a46a3a58f3aa664 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Wed, 25 Apr 2018 13:28:28 -0400
Subject: [PATCH 09/47] Whitelist `assert` global for tests

---
 test/.eslintrc.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/test/.eslintrc.js b/test/.eslintrc.js
index 30f27856c8..375e170fbd 100644
--- a/test/.eslintrc.js
+++ b/test/.eslintrc.js
@@ -6,6 +6,10 @@ module.exports = {
     browser: true,
   },
 
+  globals: {
+    assert: true
+  },
+
   parserOptions: {
     sourceType: 'script',
   },

From 41fe50553f7d64b1abe8b7ddc155053be53f256b Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Wed, 25 Apr 2018 13:29:34 -0400
Subject: [PATCH 10/47] Replace Backbone `saveFile` with `Attachment.save`

---
 .eslintignore                      |  1 +
 js/views/attachment_view.js        | 30 ++--------
 preload.js                         |  1 +
 test/views/attachment_view_test.js | 93 +++++++++++++-----------------
 4 files changed, 45 insertions(+), 80 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 898e6ddb61..79b6e678a6 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -33,6 +33,7 @@ ts/**/*.js
 !js/views/message_view.js
 !js/views/settings_view.js
 !test/backup_test.js
+!test/views/attachment_view_test.js
 !libtextsecure/message_receiver.js
 !main.js
 !preload.js
diff --git a/js/views/attachment_view.js b/js/views/attachment_view.js
index 209140159b..c19e4ebf44 100644
--- a/js/views/attachment_view.js
+++ b/js/views/attachment_view.js
@@ -2,7 +2,6 @@
 /* global _: false */
 /* global Backbone: false */
 /* global filesize: false */
-/* global moment: false */
 
 /* global i18n: false */
 /* global Signal: false */
@@ -103,12 +102,6 @@
 
       this.remove();
     },
-    getFileType() {
-      switch (this.model.contentType) {
-        case 'video/quicktime': return 'mov';
-        default: return this.model.contentType.split('/')[1];
-      }
-    },
     onClick() {
       if (!this.isImage()) {
         this.saveFile();
@@ -182,26 +175,11 @@
 
       return i18n('unnamedFile');
     },
-    suggestedName() {
-      if (this.model.fileName) {
-        return this.model.fileName;
-      }
-
-      let suggestion = 'signal';
-      if (this.timestamp) {
-        suggestion += moment(this.timestamp).format('-YYYY-MM-DD-HHmmss');
-      }
-      const fileType = this.getFileType();
-      if (fileType) {
-        suggestion += `.${fileType}`;
-      }
-      return suggestion;
-    },
     saveFile() {
-      const url = window.URL.createObjectURL(this.blob, { type: 'octet/stream' });
-      const a = $('<a>').attr({ href: url, download: this.suggestedName() });
-      a[0].click();
-      window.URL.revokeObjectURL(url);
+      Signal.Types.AttachmentTS.save({
+        attachment: this.model,
+        timestamp: this.timestamp,
+      });
     },
     render() {
       if (!this.isImage()) {
diff --git a/preload.js b/preload.js
index ad3a0687a0..9316fe7780 100644
--- a/preload.js
+++ b/preload.js
@@ -201,6 +201,7 @@ window.Signal.Startup = require('./js/modules/startup');
 
 window.Signal.Types = {};
 window.Signal.Types.Attachment = Attachment;
+window.Signal.Types.AttachmentTS = require('./ts/types/Attachment');
 window.Signal.Types.Conversation = require('./ts/types/Conversation');
 window.Signal.Types.Errors = require('./js/modules/types/errors');
 
diff --git a/test/views/attachment_view_test.js b/test/views/attachment_view_test.js
index 68aaf92678..afbd4c99a0 100644
--- a/test/views/attachment_view_test.js
+++ b/test/views/attachment_view_test.js
@@ -1,59 +1,44 @@
-describe('AttachmentView', function() {
+/* global assert: false */
 
-  describe('with arbitrary files', function() {
-      it('should render a file view', function() {
-        var attachment = {
-          contentType: 'unused',
-          size: 1232
-        };
-        var view = new Whisper.AttachmentView({model: attachment}).render();
-        assert.match(view.el.innerHTML, /fileView/);
-      });
-      it('should display the filename if present', function() {
-        var attachment = {
-          fileName: 'foo.txt',
-          contentType: 'unused',
-          size: 1232,
-        };
-        var view = new Whisper.AttachmentView({model: attachment}).render();
-        assert.match(view.el.innerHTML, /foo.txt/);
-      });
-      it('should render a file size', function() {
-        var attachment = {
-          size: 1232,
-          contentType: 'unused'
-        };
-        var view = new Whisper.AttachmentView({model: attachment}).render();
-        assert.match(view.el.innerHTML, /1.2 KB/);
-      });
-  });
-  it('should render an image for images', function() {
-    var now = new Date().getTime();
-    var attachment = { contentType: 'image/png', data: 'grumpy cat' };
-    var view = new Whisper.AttachmentView({model: attachment, timestamp: now}).render();
-    assert.equal(view.el.firstChild.tagName, "IMG");
-  });
+/* global Whisper: false */
 
-  it('should display a filename', function() {
-    var epoch = new Date((new Date(0)).getTimezoneOffset() * 60 * 1000);
-    var attachment = { contentType: 'image/png', data: 'grumpy cat' };
-    var result = new Whisper.AttachmentView({
+'use strict';
+
+describe('AttachmentView', () => {
+  describe('with arbitrary files', () => {
+    it('should render a file view', () => {
+      const attachment = {
+        contentType: 'unused',
+        size: 1232,
+      };
+      const view = new Whisper.AttachmentView({ model: attachment }).render();
+      assert.match(view.el.innerHTML, /fileView/);
+    });
+    it('should display the filename if present', () => {
+      const attachment = {
+        fileName: 'foo.txt',
+        contentType: 'unused',
+        size: 1232,
+      };
+      const view = new Whisper.AttachmentView({ model: attachment }).render();
+      assert.match(view.el.innerHTML, /foo.txt/);
+    });
+    it('should render a file size', () => {
+      const attachment = {
+        size: 1232,
+        contentType: 'unused',
+      };
+      const view = new Whisper.AttachmentView({ model: attachment }).render();
+      assert.match(view.el.innerHTML, /1.2 KB/);
+    });
+  });
+  it('should render an image for images', () => {
+    const now = new Date().getTime();
+    const attachment = { contentType: 'image/png', data: 'grumpy cat' };
+    const view = new Whisper.AttachmentView({
       model: attachment,
-      timestamp: epoch
-    }).suggestedName();
-
-    var expected = '1970-01-01-000000';
-    assert(result === 'signal-' + expected + '.png');
-  });
-  it('should auto-generate a filename', function() {
-    var epoch = new Date((new Date(0)).getTimezoneOffset() * 60 * 1000);
-    var attachment = { contentType: 'image/png', data: 'grumpy cat' };
-    var result = new Whisper.AttachmentView({
-      model: attachment,
-      timestamp: epoch
-    }).suggestedName();
-
-    var expected = '1970-01-01-000000';
-    assert(result === 'signal-' + expected + '.png');
+      timestamp: now,
+    }).render();
+    assert.equal(view.el.firstChild.tagName, 'IMG');
   });
 });

From b27fdd1559988e524cdc47771a1c15348f2bc07b Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Wed, 25 Apr 2018 16:33:54 -0400
Subject: [PATCH 11/47] Use `pointer` cursor for `DocumentListItem`

---
 ts/components/conversation/media-gallery/DocumentListItem.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ts/components/conversation/media-gallery/DocumentListItem.tsx b/ts/components/conversation/media-gallery/DocumentListItem.tsx
index 8646d3a2a4..b9fb845997 100644
--- a/ts/components/conversation/media-gallery/DocumentListItem.tsx
+++ b/ts/components/conversation/media-gallery/DocumentListItem.tsx
@@ -23,6 +23,7 @@ const styles = {
     borderBottomStyle: 'solid',
   },
   itemContainer: {
+    cursor: 'pointer',
     display: 'flex',
     flexDirection: 'row',
     flexWrap: 'nowrap',

From 8ca5a391af8da8b99e32204bd1a5dd7f40bdc96d Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Wed, 25 Apr 2018 16:34:29 -0400
Subject: [PATCH 12/47] arrayBufferToObjectURL: Ensure `data` is `ArrayBuffer`

---
 ts/util/arrayBufferToObjectURL.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/ts/util/arrayBufferToObjectURL.ts b/ts/util/arrayBufferToObjectURL.ts
index 29bdb9eca9..f9c58c8d24 100644
--- a/ts/util/arrayBufferToObjectURL.ts
+++ b/ts/util/arrayBufferToObjectURL.ts
@@ -1,6 +1,8 @@
 /**
  * @prettier
  */
+import is from '@sindresorhus/is';
+
 import { MIMEType } from '../types/MIME';
 
 export const arrayBufferToObjectURL = ({
@@ -10,6 +12,10 @@ export const arrayBufferToObjectURL = ({
   data: ArrayBuffer;
   type: MIMEType;
 }): string => {
+  if (!is.arrayBuffer(data)) {
+    throw new TypeError('`data` must be an ArrayBuffer');
+  }
+
   const blob = new Blob([data], { type });
   return URL.createObjectURL(blob);
 };

From b74b7612551c6e3180478f90882fc3bdbf3553e1 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Wed, 25 Apr 2018 16:42:08 -0400
Subject: [PATCH 13/47] Implement click to save for document list

---
 js/views/conversation_view.js                 | 47 ++++++++++++-------
 preload.js                                    |  8 ++--
 .../media-gallery/AttachmentSection.tsx       | 11 +++--
 .../media-gallery/MediaGallery.tsx            |  7 ++-
 .../media-gallery/MediaGridItem.tsx           |  2 +-
 .../media-gallery/events/ItemClickEvent.tsx   |  8 ----
 .../media-gallery/groupMessagesByDate.ts      |  2 +-
 .../media-gallery/types/AttachmentType.ts     |  4 ++
 .../media-gallery/types/ItemClickEvent.tsx    | 10 ++++
 .../{propTypes => types}/Message.tsx          |  0
 .../media-gallery/groupMessagesByDate.ts      |  2 +-
 11 files changed, 61 insertions(+), 40 deletions(-)
 delete mode 100644 ts/components/conversation/media-gallery/events/ItemClickEvent.tsx
 create mode 100644 ts/components/conversation/media-gallery/types/AttachmentType.ts
 create mode 100644 ts/components/conversation/media-gallery/types/ItemClickEvent.tsx
 rename ts/components/conversation/media-gallery/{propTypes => types}/Message.tsx (100%)

diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index 945488a846..6c5a37d6d6 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -588,29 +588,44 @@
         WhisperMessageCollection,
       });
 
-      const loadMessages = Signal.Components.PropTypes.Message
+      const loadMessages = Signal.Components.Types.Message
         .loadWithObjectURL(Signal.Migrations.loadMessage);
       const media = await loadMessages(rawMedia);
 
-      const mediaGalleryProps = {
-        media,
-        documents,
-        onItemClick: ({ message }) => {
-          const lightboxProps = {
-            imageURL: message.objectURL,
-          };
-          this.lightboxView = new Whisper.ReactWrapperView({
-            Component: Signal.Components.Lightbox,
-            props: lightboxProps,
-            onClose: () => Signal.Backbone.Views.Lightbox.hide(),
-          });
-          Signal.Backbone.Views.Lightbox.show(this.lightboxView.el);
-        },
+      const onItemClick = async ({ message, type }) => {
+        switch (type) {
+          case 'documents': {
+            const loadedMessage = await Signal.Migrations.loadMessage(message);
+            const attachment = loadedMessage.attachments[0];
+            const timestamp = loadedMessage.received_at;
+            Signal.Types.AttachmentTS.save({ attachment, timestamp });
+            break;
+          }
+
+          case 'media': {
+            this.lightboxView = new Whisper.ReactWrapperView({
+              Component: Signal.Components.Lightbox,
+              props: {
+                imageURL: message.objectURL,
+              },
+              onClose: () => Signal.Backbone.Views.Lightbox.hide(),
+            });
+            Signal.Backbone.Views.Lightbox.show(this.lightboxView.el);
+            break;
+          }
+
+          default:
+            throw new TypeError(`Unknown attachment type: '${type}'`);
+        }
       };
 
       const view = new Whisper.ReactWrapperView({
         Component: Signal.Components.MediaGallery,
-        props: mediaGalleryProps,
+        props: {
+          documents,
+          media,
+          onItemClick,
+        },
         onClose: () => this.resetPanel(),
       });
 
diff --git a/preload.js b/preload.js
index 9316fe7780..d64af85736 100644
--- a/preload.js
+++ b/preload.js
@@ -169,14 +169,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');
+const MediaGalleryMessage =
+  require('./ts/components/conversation/media-gallery/types/Message');
 
 window.Signal.Components = {
   Lightbox,
   MediaGallery,
-  PropTypes: {
-    Message: PropTypesMessage,
+  Types: {
+    Message: MediaGalleryMessage,
   },
   Quote,
 };
diff --git a/ts/components/conversation/media-gallery/AttachmentSection.tsx b/ts/components/conversation/media-gallery/AttachmentSection.tsx
index d625692dba..1f0ee74435 100644
--- a/ts/components/conversation/media-gallery/AttachmentSection.tsx
+++ b/ts/components/conversation/media-gallery/AttachmentSection.tsx
@@ -3,10 +3,11 @@
  */
 import React from 'react';
 
+import { AttachmentType } from './types/AttachmentType';
 import { DocumentListItem } from './DocumentListItem';
-import { ItemClickEvent } from './events/ItemClickEvent';
+import { ItemClickEvent } from './types/ItemClickEvent';
 import { MediaGridItem } from './MediaGridItem';
-import { Message } from './propTypes/Message';
+import { Message } from './types/Message';
 import { missingCaseError } from '../../../util/missingCaseError';
 
 const styles = {
@@ -30,7 +31,7 @@ const styles = {
 interface Props {
   i18n: (value: string) => string;
   header?: string;
-  type: 'media' | 'documents';
+  type: AttachmentType;
   messages: Array<Message>;
   onItemClick?: (event: ItemClickEvent) => void;
 }
@@ -82,11 +83,11 @@ export class AttachmentSection extends React.Component<Props, {}> {
   }
 
   private createClickHandler = (message: Message) => () => {
-    const { onItemClick } = this.props;
+    const { onItemClick, type } = this.props;
     if (!onItemClick) {
       return;
     }
 
-    onItemClick({ message });
+    onItemClick({ type, message });
   };
 }
diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx
index 17db10b0ec..7a1a1b18c4 100644
--- a/ts/components/conversation/media-gallery/MediaGallery.tsx
+++ b/ts/components/conversation/media-gallery/MediaGallery.tsx
@@ -6,11 +6,10 @@ import React from 'react';
 import moment from 'moment';
 
 import { AttachmentSection } from './AttachmentSection';
+import { AttachmentType } from './types/AttachmentType';
 import { groupMessagesByDate } from './groupMessagesByDate';
-import { ItemClickEvent } from './events/ItemClickEvent';
-import { Message } from './propTypes/Message';
-
-type AttachmentType = 'media' | 'documents';
+import { ItemClickEvent } from './types/ItemClickEvent';
+import { Message } from './types/Message';
 
 interface Props {
   documents: Array<Message>;
diff --git a/ts/components/conversation/media-gallery/MediaGridItem.tsx b/ts/components/conversation/media-gallery/MediaGridItem.tsx
index 1dd5aeb394..bbb5db27a9 100644
--- a/ts/components/conversation/media-gallery/MediaGridItem.tsx
+++ b/ts/components/conversation/media-gallery/MediaGridItem.tsx
@@ -3,7 +3,7 @@
  */
 import React from 'react';
 
-import { Message } from './propTypes/Message';
+import { Message } from './types/Message';
 
 interface Props {
   message: Message;
diff --git a/ts/components/conversation/media-gallery/events/ItemClickEvent.tsx b/ts/components/conversation/media-gallery/events/ItemClickEvent.tsx
deleted file mode 100644
index a53e0c2bb8..0000000000
--- a/ts/components/conversation/media-gallery/events/ItemClickEvent.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @prettier
- */
-import { Message } from '../propTypes/Message';
-
-export interface ItemClickEvent {
-  message: Message;
-}
diff --git a/ts/components/conversation/media-gallery/groupMessagesByDate.ts b/ts/components/conversation/media-gallery/groupMessagesByDate.ts
index 02fc6ea39a..7b34d22501 100644
--- a/ts/components/conversation/media-gallery/groupMessagesByDate.ts
+++ b/ts/components/conversation/media-gallery/groupMessagesByDate.ts
@@ -4,7 +4,7 @@
 import moment from 'moment';
 import { compact, groupBy, sortBy } from 'lodash';
 
-import { Message } from './propTypes/Message';
+import { Message } from './types/Message';
 // import { missingCaseError } from '../../../util/missingCaseError';
 
 type StaticSectionType = 'today' | 'yesterday' | 'thisWeek' | 'thisMonth';
diff --git a/ts/components/conversation/media-gallery/types/AttachmentType.ts b/ts/components/conversation/media-gallery/types/AttachmentType.ts
new file mode 100644
index 0000000000..1bd5deba9c
--- /dev/null
+++ b/ts/components/conversation/media-gallery/types/AttachmentType.ts
@@ -0,0 +1,4 @@
+/**
+ * @prettier
+ */
+export type AttachmentType = 'media' | 'documents';
diff --git a/ts/components/conversation/media-gallery/types/ItemClickEvent.tsx b/ts/components/conversation/media-gallery/types/ItemClickEvent.tsx
new file mode 100644
index 0000000000..1bb410aa95
--- /dev/null
+++ b/ts/components/conversation/media-gallery/types/ItemClickEvent.tsx
@@ -0,0 +1,10 @@
+/**
+ * @prettier
+ */
+import { AttachmentType } from './AttachmentType';
+import { Message } from './Message';
+
+export interface ItemClickEvent {
+  message: Message;
+  type: AttachmentType;
+}
diff --git a/ts/components/conversation/media-gallery/propTypes/Message.tsx b/ts/components/conversation/media-gallery/types/Message.tsx
similarity index 100%
rename from ts/components/conversation/media-gallery/propTypes/Message.tsx
rename to ts/components/conversation/media-gallery/types/Message.tsx
diff --git a/ts/test/components/media-gallery/groupMessagesByDate.ts b/ts/test/components/media-gallery/groupMessagesByDate.ts
index 050e915125..85ed5e499e 100644
--- a/ts/test/components/media-gallery/groupMessagesByDate.ts
+++ b/ts/test/components/media-gallery/groupMessagesByDate.ts
@@ -10,7 +10,7 @@ import {
   groupMessagesByDate,
   Section,
 } from '../../../components/conversation/media-gallery/groupMessagesByDate';
-import { Message } from '../../../components/conversation/media-gallery/propTypes/Message';
+import { Message } from '../../../components/conversation/media-gallery/types/Message';
 
 const toMessage = (date: Date): Message => ({
   id: date.toUTCString(),

From b86f9c0be87c23a5857c449912bcf3acb81b5fbf Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Wed, 25 Apr 2018 16:45:02 -0400
Subject: [PATCH 14/47] Allow saving of attachments from media gallery lightbox

---
 js/views/conversation_view.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index 6c5a37d6d6..b00b430bb3 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -592,13 +592,17 @@
         .loadWithObjectURL(Signal.Migrations.loadMessage);
       const media = await loadMessages(rawMedia);
 
+      const saveAttachment = async ({ message } = {}) => {
+        const loadedMessage = await Signal.Migrations.loadMessage(message);
+        const attachment = loadedMessage.attachments[0];
+        const timestamp = loadedMessage.received_at;
+        Signal.Types.AttachmentTS.save({ attachment, timestamp });
+      };
+
       const onItemClick = async ({ message, type }) => {
         switch (type) {
           case 'documents': {
-            const loadedMessage = await Signal.Migrations.loadMessage(message);
-            const attachment = loadedMessage.attachments[0];
-            const timestamp = loadedMessage.received_at;
-            Signal.Types.AttachmentTS.save({ attachment, timestamp });
+            saveAttachment({ message });
             break;
           }
 
@@ -607,6 +611,7 @@
               Component: Signal.Components.Lightbox,
               props: {
                 imageURL: message.objectURL,
+                onSave: () => saveAttachment({ message }),
               },
               onClose: () => Signal.Backbone.Views.Lightbox.hide(),
             });

From 6ee56b8445b24df667636db866b868d986ae4663 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Wed, 25 Apr 2018 18:02:27 -0400
Subject: [PATCH 15/47] Remove newlines

---
 ts/types/MIME.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/ts/types/MIME.ts b/ts/types/MIME.ts
index a27cb658c5..7439a8a66c 100644
--- a/ts/types/MIME.ts
+++ b/ts/types/MIME.ts
@@ -4,9 +4,6 @@
 export type MIMEType = string & { _mimeTypeBrand: any };
 
 export const isJPEG = (value: MIMEType): boolean => value === 'image/jpeg';
-
 export const isImage = (value: MIMEType): boolean => value.startsWith('image/');
-
 export const isVideo = (value: MIMEType): boolean => value.startsWith('video/');
-
 export const isAudio = (value: MIMEType): boolean => value.startsWith('audio/');

From ac04f0648a724b7da5e29db033fdb0275ed846fc Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Wed, 25 Apr 2018 18:15:24 -0400
Subject: [PATCH 16/47] Load more documents than media

---
 js/views/conversation_view.js |  7 +++++++
 ts/backbone/Conversation.ts   | 10 ++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index b00b430bb3..956a9ede16 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -577,14 +577,21 @@
       //   events up to its parent elements in the DOM.
       this.closeMenu();
 
+      // We fetch more documents than media as they don’t require to be loaded
+      // into memory right away. Revisit this once we have infinite scrolling:
+      const DEFAULT_MEDIA_FETCH_COUNT = 50;
+      const DEFAULT_DOCUMENTS_FETCH_COUNT = 150;
+
       const conversationId = this.model.get('id');
       const WhisperMessageCollection = Whisper.MessageCollection;
       const rawMedia = await Signal.Backbone.Conversation.fetchVisualMediaAttachments({
         conversationId,
+        count: DEFAULT_MEDIA_FETCH_COUNT,
         WhisperMessageCollection,
       });
       const documents = await Signal.Backbone.Conversation.fetchFileAttachments({
         conversationId,
+        count: DEFAULT_DOCUMENTS_FETCH_COUNT,
         WhisperMessageCollection,
       });
 
diff --git a/ts/backbone/Conversation.ts b/ts/backbone/Conversation.ts
index 09209410ac..bd868d9e04 100644
--- a/ts/backbone/Conversation.ts
+++ b/ts/backbone/Conversation.ts
@@ -8,34 +8,36 @@ import { deferredToPromise } from '../../js/modules/deferred_to_promise';
 import { IndexableBoolean } from '../types/IndexedDB';
 import { Message } from '../types/Message';
 
-const DEFAULT_FETCH_COUNT = 50;
-
 export const fetchVisualMediaAttachments = async ({
   conversationId,
+  count,
   WhisperMessageCollection,
 }: {
   conversationId: string;
+  count: number;
   WhisperMessageCollection: BackboneCollection<Message>;
 }): Promise<Array<Message>> =>
   fetchFromAttachmentsIndex({
     name: 'hasVisualMediaAttachments',
     conversationId,
     WhisperMessageCollection,
-    count: DEFAULT_FETCH_COUNT,
+    count,
   });
 
 export const fetchFileAttachments = async ({
   conversationId,
+  count,
   WhisperMessageCollection,
 }: {
   conversationId: string;
+  count: number;
   WhisperMessageCollection: BackboneCollection<Message>;
 }): Promise<Array<Message>> =>
   fetchFromAttachmentsIndex({
     name: 'hasFileAttachments',
     conversationId,
     WhisperMessageCollection,
-    count: DEFAULT_FETCH_COUNT,
+    count,
   });
 
 const fetchFromAttachmentsIndex = async ({

From 45d6c7a5a8a3a642475e2d3bcfeaa4a5b9603010 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Wed, 25 Apr 2018 18:15:57 -0400
Subject: [PATCH 17/47] Implement video support in lightbox

---
 js/views/attachment_view.js                   |  3 +-
 js/views/conversation_view.js                 | 15 +++---
 ts/components/Lightbox.md                     |  3 +-
 ts/components/Lightbox.tsx                    | 53 +++++++++++++++----
 .../media-gallery/types/Message.tsx           | 11 ++--
 5 files changed, 61 insertions(+), 24 deletions(-)

diff --git a/js/views/attachment_view.js b/js/views/attachment_view.js
index c19e4ebf44..84d7fab35e 100644
--- a/js/views/attachment_view.js
+++ b/js/views/attachment_view.js
@@ -109,7 +109,8 @@
       }
 
       const props = {
-        imageURL: this.objectUrl,
+        objectURL: this.objectUrl,
+        contentType: this.model.contentType,
         onSave: () => this.saveFile(),
         // implicit: `close`
       };
diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index 956a9ede16..aa5c738ec5 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -600,25 +600,28 @@
       const media = await loadMessages(rawMedia);
 
       const saveAttachment = async ({ message } = {}) => {
-        const loadedMessage = await Signal.Migrations.loadMessage(message);
-        const attachment = loadedMessage.attachments[0];
-        const timestamp = loadedMessage.received_at;
+        const attachment = message.attachments[0];
+        const timestamp = message.received_at;
         Signal.Types.AttachmentTS.save({ attachment, timestamp });
       };
 
       const onItemClick = async ({ message, type }) => {
+        const loadedMessage = Signal.Components.Types.Message
+          .withObjectURL(await Signal.Migrations.loadMessage(message));
         switch (type) {
           case 'documents': {
-            saveAttachment({ message });
+            saveAttachment({ message: loadedMessage });
             break;
           }
 
           case 'media': {
+            const attachment = loadedMessage.attachments[0];
             this.lightboxView = new Whisper.ReactWrapperView({
               Component: Signal.Components.Lightbox,
               props: {
-                imageURL: message.objectURL,
-                onSave: () => saveAttachment({ message }),
+                objectURL: loadedMessage.objectURL,
+                contentType: attachment.contentType,
+                onSave: () => saveAttachment({ message: loadedMessage }),
               },
               onClose: () => Signal.Backbone.Views.Lightbox.hide(),
             });
diff --git a/ts/components/Lightbox.md b/ts/components/Lightbox.md
index a5fbd148e6..4bc11546d2 100644
--- a/ts/components/Lightbox.md
+++ b/ts/components/Lightbox.md
@@ -3,7 +3,8 @@ const noop = () => {};
 
 <div style={{position: 'relative', width: '100%', height: 500}}>
   <Lightbox
-    imageURL="https://placekitten.com/800/600"
+    objectURL="https://placekitten.com/800/600"
+    contentType="image/jpeg"
     onNext={noop}
     onPrevious={noop}
     onSave={noop}
diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx
index 993f6ebeb7..8121d7ec52 100644
--- a/ts/components/Lightbox.tsx
+++ b/ts/components/Lightbox.tsx
@@ -4,13 +4,18 @@
 import React from 'react';
 
 import classNames from 'classnames';
+import is from '@sindresorhus/is';
+
+import * as GoogleChrome from '../util/GoogleChrome';
+import * as MIME from '../types/MIME';
 
 interface Props {
   close: () => void;
-  imageURL?: string;
+  objectURL: string;
+  contentType: MIME.MIMEType | undefined;
   onNext?: () => void;
   onPrevious?: () => void;
-  onSave: () => void;
+  onSave?: () => void;
 }
 
 const styles = {
@@ -67,7 +72,7 @@ export class Lightbox extends React.Component<Props, {}> {
   }
 
   public render() {
-    const { imageURL } = this.props;
+    const { contentType, objectURL } = this.props;
     return (
       <div
         style={styles.container}
@@ -75,11 +80,9 @@ export class Lightbox extends React.Component<Props, {}> {
         ref={this.setContainerRef}
       >
         <div style={styles.objectContainer}>
-          <img
-            style={styles.image}
-            src={imageURL}
-            onClick={this.onImageClick}
-          />
+          {!is.undefined(contentType)
+            ? this.renderObject({ objectURL, contentType })
+            : null}
         </div>
         <div style={styles.controls}>
           <IconButton type="close" onClick={this.onClose} />
@@ -97,6 +100,38 @@ export class Lightbox extends React.Component<Props, {}> {
     );
   }
 
+  private renderObject = ({
+    objectURL,
+    contentType,
+  }: {
+    objectURL: string;
+    contentType: MIME.MIMEType;
+  }) => {
+    const isImage = GoogleChrome.isImageTypeSupported(contentType);
+    if (isImage) {
+      return (
+        <img
+          style={styles.image}
+          src={objectURL}
+          onClick={this.onObjectClick}
+        />
+      );
+    }
+
+    const isVideo = GoogleChrome.isVideoTypeSupported(contentType);
+    if (isVideo) {
+      return (
+        <video controls>
+          <source src={objectURL} />
+        </video>
+      );
+    }
+
+    // tslint:disable-next-line no-console
+    console.log('Lightbox: Unexpected content type', { contentType });
+    return null;
+  };
+
   private setContainerRef = (value: HTMLDivElement) => {
     this.containerRef = value;
   };
@@ -125,7 +160,7 @@ export class Lightbox extends React.Component<Props, {}> {
     this.onClose();
   };
 
-  private onImageClick = (event: React.MouseEvent<HTMLImageElement>) => {
+  private onObjectClick = (event: React.MouseEvent<HTMLImageElement>) => {
     event.stopPropagation();
     this.onClose();
   };
diff --git a/ts/components/conversation/media-gallery/types/Message.tsx b/ts/components/conversation/media-gallery/types/Message.tsx
index 73431ec59a..4b47504bd7 100644
--- a/ts/components/conversation/media-gallery/types/Message.tsx
+++ b/ts/components/conversation/media-gallery/types/Message.tsx
@@ -8,7 +8,6 @@ import * as MIME from '../../../../types/MIME';
 import { arrayBufferToObjectURL } from '../../../../util/arrayBufferToObjectURL';
 import { Attachment } from '../../../../types/Attachment';
 import { MapAsync } from '../../../../types/MapAsync';
-import { MIMEType } from '../../../../types/MIME';
 
 export type Message = {
   id: string;
@@ -16,8 +15,6 @@ export type Message = {
   received_at: number;
 } & { objectURL?: string };
 
-const DEFAULT_CONTENT_TYPE: MIMEType = 'application/octet-stream' as MIMEType;
-
 export const loadWithObjectURL = (loadMessage: MapAsync<Message>) => async (
   messages: Array<Message>
 ): Promise<Array<Message>> => {
@@ -51,17 +48,17 @@ const hasVideoAttachment = (message: Message): boolean =>
       MIME.isVideo(attachment.contentType)
   );
 
-const withObjectURL = (message: Message): Message => {
+export const withObjectURL = (message: Message): Message => {
   if (message.attachments.length === 0) {
     throw new TypeError('`message.attachments` cannot be empty');
   }
 
   const attachment = message.attachments[0];
-  if (typeof attachment.contentType === 'undefined') {
+  if (is.undefined(attachment.contentType)) {
     throw new TypeError('`attachment.contentType` is required');
   }
 
-  if (MIME.isVideo(attachment.contentType)) {
+  if (is.undefined(attachment.data) && MIME.isVideo(attachment.contentType)) {
     return {
       ...message,
       objectURL: 'images/video.svg',
@@ -70,7 +67,7 @@ const withObjectURL = (message: Message): Message => {
 
   const objectURL = arrayBufferToObjectURL({
     data: attachment.data,
-    type: attachment.contentType || DEFAULT_CONTENT_TYPE,
+    type: attachment.contentType,
   });
   return {
     ...message,

From b3d043853729513adcfa3d6749a9571e58ff82bd Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Wed, 25 Apr 2018 18:20:47 -0400
Subject: [PATCH 18/47] Show hand cursor on media grid items

---
 ts/components/conversation/media-gallery/MediaGridItem.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ts/components/conversation/media-gallery/MediaGridItem.tsx b/ts/components/conversation/media-gallery/MediaGridItem.tsx
index bbb5db27a9..1a69314b4f 100644
--- a/ts/components/conversation/media-gallery/MediaGridItem.tsx
+++ b/ts/components/conversation/media-gallery/MediaGridItem.tsx
@@ -17,6 +17,7 @@ const size = {
 const styles = {
   container: {
     ...size,
+    cursor: 'pointer',
     backgroundColor: '#f3f3f3',
     marginRight: 4,
     marginBottom: 4,

From 43e19f3b0641b4d74a72d1b360c359b3eb5bc0c6 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 11:18:24 -0400
Subject: [PATCH 19/47] Prevent default event on icon button clicks

---
 ts/components/Lightbox.tsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx
index 8121d7ec52..6dc3373778 100644
--- a/ts/components/Lightbox.tsx
+++ b/ts/components/Lightbox.tsx
@@ -54,9 +54,25 @@ interface IconButtonProps {
   type: 'save' | 'close' | 'previous' | 'next';
   onClick?: () => void;
 }
-const IconButton = ({ onClick, type }: IconButtonProps) => (
-  <a href="#" onClick={onClick} className={classNames('iconButton', type)} />
-);
+
+const IconButton = ({ onClick, type }: IconButtonProps) => {
+  const clickHandler = (event: React.MouseEvent<HTMLAnchorElement>): void => {
+    event.preventDefault();
+    if (!onClick) {
+      return;
+    }
+
+    onClick();
+  };
+
+  return (
+    <a
+      href="#"
+      onClick={clickHandler}
+      className={classNames('iconButton', type)}
+    />
+  );
+};
 
 export class Lightbox extends React.Component<Props, {}> {
   private containerRef: HTMLDivElement | null = null;

From fb8d4e2421aaa966153c94704d06b7d40d1d88be Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 11:19:19 -0400
Subject: [PATCH 20/47] Implement basic lightbox with gallery support

---
 ts/components/LightboxGallery.md  | 16 +++++++
 ts/components/LightboxGallery.tsx | 79 +++++++++++++++++++++++++++++++
 2 files changed, 95 insertions(+)
 create mode 100644 ts/components/LightboxGallery.md
 create mode 100644 ts/components/LightboxGallery.tsx

diff --git a/ts/components/LightboxGallery.md b/ts/components/LightboxGallery.md
new file mode 100644
index 0000000000..2f2cd91c0c
--- /dev/null
+++ b/ts/components/LightboxGallery.md
@@ -0,0 +1,16 @@
+```js
+const noop = () => {};
+
+const items = [
+  { objectURL: 'https://placekitten.com/800/600', contentType: 'image/jpeg' },
+  { objectURL: 'https://placekitten.com/900/600', contentType: 'image/jpeg' },
+  { objectURL: 'https://placekitten.com/1000/800', contentType: 'image/jpeg' },
+];
+
+<div style={{position: 'relative', width: '100%', height: 500}}>
+  <LightboxGallery
+    items={items}
+    onSave={noop}
+  />
+</div>
+```
diff --git a/ts/components/LightboxGallery.tsx b/ts/components/LightboxGallery.tsx
new file mode 100644
index 0000000000..a08b6bef38
--- /dev/null
+++ b/ts/components/LightboxGallery.tsx
@@ -0,0 +1,79 @@
+/**
+ * @prettier
+ */
+import React from 'react';
+
+import * as MIME from '../types/MIME';
+import { Lightbox } from './Lightbox';
+
+interface Item {
+  objectURL: string;
+  contentType: MIME.MIMEType | undefined;
+}
+
+interface Props {
+  close: () => void;
+  items: Array<Item>;
+  // onNext?: () => void;
+  // onPrevious?: () => void;
+  onSave?: () => void;
+  selectedIndex: number;
+}
+
+interface State {
+  selectedIndex: number;
+}
+
+export class LightboxGallery extends React.Component<Props, State> {
+  public static defaultProps: Partial<Props> = {
+    selectedIndex: 0,
+  };
+
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      selectedIndex: this.props.selectedIndex,
+    };
+  }
+
+  public render() {
+    const { close, items, onSave } = this.props;
+    const { selectedIndex } = this.state;
+
+    const selectedItem: Item = items[selectedIndex];
+
+    const firstIndex = 0;
+    const onPrevious =
+      selectedIndex > firstIndex ? this.handlePrevious : undefined;
+
+    const lastIndex = items.length - 1;
+    const onNext = selectedIndex < lastIndex ? this.handleNext : undefined;
+
+    return (
+      <Lightbox
+        close={close}
+        onPrevious={onPrevious}
+        onNext={onNext}
+        onSave={onSave}
+        objectURL={selectedItem.objectURL}
+        contentType={selectedItem.contentType}
+      />
+    );
+  }
+
+  private handlePrevious = () => {
+    this.setState(prevState => ({
+      selectedIndex: Math.max(prevState.selectedIndex - 1, 0),
+    }));
+  };
+
+  private handleNext = () => {
+    this.setState((prevState, props) => ({
+      selectedIndex: Math.min(
+        prevState.selectedIndex + 1,
+        props.items.length - 1
+      ),
+    }));
+  };
+}

From 4c0c55082f630e64faa3ff4411f33ca818d88334 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 11:50:54 -0400
Subject: [PATCH 21/47] Move navigation controls to the bottom

---
 stylesheets/_lightbox.scss       |  1 -
 ts/components/Lightbox.tsx       | 71 +++++++++++++++++++++++++-------
 ts/components/LightboxGallery.md |  5 ++-
 3 files changed, 60 insertions(+), 17 deletions(-)

diff --git a/stylesheets/_lightbox.scss b/stylesheets/_lightbox.scss
index 9938974900..213e39853d 100644
--- a/stylesheets/_lightbox.scss
+++ b/stylesheets/_lightbox.scss
@@ -19,7 +19,6 @@
   background: transparent;
   width: 50px;
   height: 50px;
-  margin-bottom: 10px;
 
   display: inline-block;
   cursor: pointer;
diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx
index 6dc3373778..c8a1cbf389 100644
--- a/ts/components/Lightbox.tsx
+++ b/ts/components/Lightbox.tsx
@@ -21,14 +21,21 @@ interface Props {
 const styles = {
   container: {
     display: 'flex',
-    flexDirection: 'row',
+    flexDirection: 'column',
     position: 'absolute',
     left: 0,
     right: 0,
     top: 0,
     bottom: 0,
     backgroundColor: 'rgba(0, 0, 0, 0.9)',
-    padding: 40,
+  } as React.CSSProperties,
+  mainContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    paddingTop: 40,
+    paddingLeft: 40,
+    paddingRight: 40,
+    paddingBottom: 0,
   } as React.CSSProperties,
   objectContainer: {
     flexGrow: 1,
@@ -48,14 +55,31 @@ const styles = {
     flexDirection: 'column',
     marginLeft: 10,
   } as React.CSSProperties,
+  navigationContainer: {
+    flexShrink: 0,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: 10,
+  } as React.CSSProperties,
+  saveButton: {
+    marginTop: 10,
+  },
+  iconButtonPlaceholder: {
+    // Dimensions match `.iconButton`:
+    display: 'inline-block',
+    width: 50,
+    height: 50,
+  },
 };
 
 interface IconButtonProps {
-  type: 'save' | 'close' | 'previous' | 'next';
   onClick?: () => void;
+  style?: React.CSSProperties;
+  type: 'save' | 'close' | 'previous' | 'next';
 }
 
-const IconButton = ({ onClick, type }: IconButtonProps) => {
+const IconButton = ({ onClick, style, type }: IconButtonProps) => {
   const clickHandler = (event: React.MouseEvent<HTMLAnchorElement>): void => {
     event.preventDefault();
     if (!onClick) {
@@ -70,10 +94,15 @@ const IconButton = ({ onClick, type }: IconButtonProps) => {
       href="#"
       onClick={clickHandler}
       className={classNames('iconButton', type)}
+      style={style}
     />
   );
 };
 
+const IconButtonPlaceholder = () => (
+  <div style={styles.iconButtonPlaceholder} />
+);
+
 export class Lightbox extends React.Component<Props, {}> {
   private containerRef: HTMLDivElement | null = null;
 
@@ -95,22 +124,34 @@ export class Lightbox extends React.Component<Props, {}> {
         onClick={this.onContainerClick}
         ref={this.setContainerRef}
       >
-        <div style={styles.objectContainer}>
-          {!is.undefined(contentType)
-            ? this.renderObject({ objectURL, contentType })
-            : null}
+        <div style={styles.mainContainer}>
+          <div style={styles.objectContainer}>
+            {!is.undefined(contentType)
+              ? this.renderObject({ objectURL, contentType })
+              : null}
+          </div>
+          <div style={styles.controls}>
+            <IconButton type="close" onClick={this.onClose} />
+            {this.props.onSave ? (
+              <IconButton
+                type="save"
+                onClick={this.props.onSave}
+                style={styles.saveButton}
+              />
+            ) : null}
+          </div>
         </div>
-        <div style={styles.controls}>
-          <IconButton type="close" onClick={this.onClose} />
-          {this.props.onSave ? (
-            <IconButton type="save" onClick={this.props.onSave} />
-          ) : null}
+        <div style={styles.navigationContainer}>
           {this.props.onPrevious ? (
             <IconButton type="previous" onClick={this.props.onPrevious} />
-          ) : null}
+          ) : (
+            <IconButtonPlaceholder />
+          )}
           {this.props.onNext ? (
             <IconButton type="next" onClick={this.props.onNext} />
-          ) : null}
+          ) : (
+            <IconButtonPlaceholder />
+          )}
         </div>
       </div>
     );
diff --git a/ts/components/LightboxGallery.md b/ts/components/LightboxGallery.md
index 2f2cd91c0c..66f90e0dc5 100644
--- a/ts/components/LightboxGallery.md
+++ b/ts/components/LightboxGallery.md
@@ -4,7 +4,10 @@ const noop = () => {};
 const items = [
   { objectURL: 'https://placekitten.com/800/600', contentType: 'image/jpeg' },
   { objectURL: 'https://placekitten.com/900/600', contentType: 'image/jpeg' },
-  { objectURL: 'https://placekitten.com/1000/800', contentType: 'image/jpeg' },
+  { objectURL: 'https://placekitten.com/980/800', contentType: 'image/jpeg' },
+  { objectURL: 'https://placekitten.com/656/540', contentType: 'image/jpeg' },
+  { objectURL: 'https://placekitten.com/762/400', contentType: 'image/jpeg' },
+  { objectURL: 'https://placekitten.com/920/620', contentType: 'image/jpeg' },
 ];
 
 <div style={{position: 'relative', width: '100%', height: 500}}>

From 307ab0d3a5bcb5099009a5fb5c45307d897dccf3 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 15:26:49 -0400
Subject: [PATCH 22/47] Extract `saveURLAsFile`

---
 ts/util/saveURLAsFile.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 ts/util/saveURLAsFile.ts

diff --git a/ts/util/saveURLAsFile.ts b/ts/util/saveURLAsFile.ts
new file mode 100644
index 0000000000..90bc99273f
--- /dev/null
+++ b/ts/util/saveURLAsFile.ts
@@ -0,0 +1,17 @@
+/**
+ * @prettier
+ */
+export const saveURLAsFile = ({
+  filename,
+  url,
+  document,
+}: {
+  filename: string;
+  url: string;
+  document: Document;
+}): void => {
+  const anchorElement = document.createElement('a');
+  anchorElement.href = url;
+  anchorElement.download = filename;
+  anchorElement.click();
+};

From 3df8c22e44f25306bb63f4a05c68821fb983eb6e Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 15:56:31 -0400
Subject: [PATCH 23/47] Alphabetize `Message` properties

---
 js/models/messages.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/models/messages.js b/js/models/messages.js
index 46464f1427..770e811b20 100644
--- a/js/models/messages.js
+++ b/js/models/messages.js
@@ -561,14 +561,14 @@
           }
         }
         message.set({
-          schemaVersion: dataMessage.schemaVersion,
+          attachments: dataMessage.attachments,
           body: dataMessage.body,
           conversationId: conversation.id,
-          attachments: dataMessage.attachments,
-          quote: dataMessage.quote,
           decrypted_at: now,
-          flags: dataMessage.flags,
           errors: [],
+          flags: dataMessage.flags,
+          quote: dataMessage.quote,
+          schemaVersion: dataMessage.schemaVersion,
         });
         if (type === 'outgoing') {
           const receipts = Whisper.DeliveryReceipts.forMessage(conversation, message);

From 36c609c2c3ac8d10beda04ff186b343e5c828190 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 15:56:54 -0400
Subject: [PATCH 24/47] Persist `has*Attachments` properties for incoming
 messages

---
 js/models/messages.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/js/models/messages.js b/js/models/messages.js
index 770e811b20..06652a43e4 100644
--- a/js/models/messages.js
+++ b/js/models/messages.js
@@ -567,6 +567,9 @@
           decrypted_at: now,
           errors: [],
           flags: dataMessage.flags,
+          hasAttachments: dataMessage.hasAttachments,
+          hasFileAttachments: dataMessage.hasFileAttachments,
+          hasVisualMediaAttachments: dataMessage.hasVisualMediaAttachments,
           quote: dataMessage.quote,
           schemaVersion: dataMessage.schemaVersion,
         });

From 394d2f0bff0ce471ca2b6cfdfef32bdc679b8655 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 16:19:35 -0400
Subject: [PATCH 25/47] Fix type signature

---
 app/attachments.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/attachments.js b/app/attachments.js
index cdbf724e4f..5703b22640 100644
--- a/app/attachments.js
+++ b/app/attachments.js
@@ -114,7 +114,7 @@ exports.createName = () => {
   return buffer.toString('hex');
 };
 
-//      getRelativePath :: String -> IO Path
+//      getRelativePath :: String -> Path
 exports.getRelativePath = (name) => {
   if (!isString(name)) {
     throw new TypeError("'name' must be a string");

From 21db2e71823a32c63d2805c26e253271569fe0b0 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 16:42:10 -0400
Subject: [PATCH 26/47] Use `saveURLAsFile`

---
 js/views/attachment_view.js | 1 +
 ts/types/Attachment.ts      | 9 +++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/js/views/attachment_view.js b/js/views/attachment_view.js
index 84d7fab35e..ac6c4f49cb 100644
--- a/js/views/attachment_view.js
+++ b/js/views/attachment_view.js
@@ -179,6 +179,7 @@
     saveFile() {
       Signal.Types.AttachmentTS.save({
         attachment: this.model,
+        document,
         timestamp: this.timestamp,
       });
     },
diff --git a/ts/types/Attachment.ts b/ts/types/Attachment.ts
index b714215571..770f1bcbd0 100644
--- a/ts/types/Attachment.ts
+++ b/ts/types/Attachment.ts
@@ -5,6 +5,7 @@ import is from '@sindresorhus/is';
 import moment from 'moment';
 
 import * as GoogleChrome from '../util/GoogleChrome';
+import { saveURLAsFile } from '../util/saveURLAsFile';
 import { arrayBufferToObjectURL } from '../util/arrayBufferToObjectURL';
 import { MIMEType } from './MIME';
 
@@ -41,19 +42,19 @@ export const isVisualMedia = (attachment: Attachment): boolean => {
 
 export const save = ({
   attachment,
+  document,
   timestamp,
 }: {
   attachment: Attachment;
+  document: Document;
   timestamp?: number;
 }): void => {
   const url = arrayBufferToObjectURL({
     data: attachment.data,
     type: SAVE_CONTENT_TYPE,
   });
-  const anchorElement = document.createElement('a');
-  anchorElement.href = url;
-  anchorElement.download = getSuggestedFilename({ attachment, timestamp });
-  anchorElement.click();
+  const filename = getSuggestedFilename({ attachment, timestamp });
+  saveURLAsFile({ url, filename, document });
   URL.revokeObjectURL(url);
 };
 

From 9451dc5e4146228fc5a2f93de54ee8e77bbf6c3e Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 16:47:05 -0400
Subject: [PATCH 27/47] Define `AttachmentSchemaVersion3`

---
 ts/types/Attachment.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/ts/types/Attachment.ts b/ts/types/Attachment.ts
index 770f1bcbd0..e9b287547b 100644
--- a/ts/types/Attachment.ts
+++ b/ts/types/Attachment.ts
@@ -9,7 +9,7 @@ import { saveURLAsFile } from '../util/saveURLAsFile';
 import { arrayBufferToObjectURL } from '../util/arrayBufferToObjectURL';
 import { MIMEType } from './MIME';
 
-export interface Attachment {
+export type Attachment = {
   fileName?: string;
   contentType?: MIMEType;
   size?: number;
@@ -24,6 +24,10 @@ export interface Attachment {
   // key?: ArrayBuffer;
   // digest?: ArrayBuffer;
   // flags?: number;
+} & Partial<AttachmentSchemaVersion3>;
+
+interface AttachmentSchemaVersion3 {
+  path: string;
 }
 
 const SAVE_CONTENT_TYPE = 'application/octet-stream' as MIMEType;

From e2a2165d9ccf5eab27b2d6da3b33d8199fb857a9 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 16:49:10 -0400
Subject: [PATCH 28/47] Remove lightbox on unload

---
 js/views/conversation_view.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index aa5c738ec5..4a63737f7e 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -282,6 +282,9 @@
       if (this.quoteView) {
         this.quoteView.remove();
       }
+      if (this.lightboxView) {
+        this.lightboxView.remove();
+      }
       if (this.panels && this.panels.length) {
         for (let i = 0, max = this.panels.length; i < max; i += 1) {
           const panel = this.panels[i];

From f56dc09d019140e630d55fd1fc43e9afd2c4a960 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 16:50:19 -0400
Subject: [PATCH 29/47] Add `getAbsoluteAttachmentPath`

---
 app/attachments.js | 4 ++++
 preload.js         | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/app/attachments.js b/app/attachments.js
index 5703b22640..8ce961b491 100644
--- a/app/attachments.js
+++ b/app/attachments.js
@@ -123,3 +123,7 @@ exports.getRelativePath = (name) => {
   const prefix = name.slice(0, 2);
   return path.join(prefix, name);
 };
+
+//      createAbsolutePathGetter :: RoothPath -> RelativePath -> AbsolutePath
+exports.createAbsolutePathGetter = rootPath => relativePath =>
+  path.join(rootPath, relativePath);
diff --git a/preload.js b/preload.js
index d64af85736..60fb78e0b0 100644
--- a/preload.js
+++ b/preload.js
@@ -136,6 +136,7 @@ window.moment.locale(locale);
 
 // ES2015+ modules
 const attachmentsPath = Attachments.getPath(app.getPath('userData'));
+const getAbsoluteAttachmentPath = Attachments.createAbsolutePathGetter(attachmentsPath);
 const deleteAttachmentData = Attachments.createDeleter(attachmentsPath);
 const readAttachmentData = Attachments.createReader(attachmentsPath);
 const writeNewAttachmentData = Attachments.createWriterForNew(attachmentsPath);
@@ -187,6 +188,7 @@ window.Signal.Migrations.deleteAttachmentData =
 window.Signal.Migrations.getPlaceholderMigrations = getPlaceholderMigrations;
 window.Signal.Migrations.writeMessageAttachments =
   Message.createAttachmentDataWriter(writeExistingAttachmentData);
+window.Signal.Migrations.getAbsoluteAttachmentPath = getAbsoluteAttachmentPath;
 window.Signal.Migrations.loadAttachmentData = loadAttachmentData;
 window.Signal.Migrations.loadMessage = Message.createAttachmentLoader(loadAttachmentData);
 window.Signal.Migrations.Migrations0DatabaseWithAttachmentData =

From 407c77395bc2e0ffa6769874c846498dd6f36f9a Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 16:54:43 -0400
Subject: [PATCH 30/47] Add explicit boolean

---
 ts/components/Lightbox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx
index c8a1cbf389..a274b9ba86 100644
--- a/ts/components/Lightbox.tsx
+++ b/ts/components/Lightbox.tsx
@@ -178,7 +178,7 @@ export class Lightbox extends React.Component<Props, {}> {
     const isVideo = GoogleChrome.isVideoTypeSupported(contentType);
     if (isVideo) {
       return (
-        <video controls>
+        <video controls={true}>
           <source src={objectURL} />
         </video>
       );

From e1b620602de816ba9bf17e0fe9d1135fa0ffc5e1 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 16:48:08 -0400
Subject: [PATCH 31/47] Display attachments from disk

---
 js/views/attachment_view.js       |  1 +
 js/views/conversation_view.js     | 33 ++++++++++++++----------
 preload.js                        |  2 ++
 ts/components/Lightbox.tsx        | 14 +++++-----
 ts/components/LightboxGallery.tsx | 43 +++++++++++++++++++++++--------
 ts/types/Attachment.ts            | 12 ++++++---
 6 files changed, 70 insertions(+), 35 deletions(-)

diff --git a/js/views/attachment_view.js b/js/views/attachment_view.js
index ac6c4f49cb..b71a68aa7e 100644
--- a/js/views/attachment_view.js
+++ b/js/views/attachment_view.js
@@ -180,6 +180,7 @@
       Signal.Types.AttachmentTS.save({
         attachment: this.model,
         document,
+        getAbsolutePath: Signal.Migrations.getAbsoluteAttachmentPath,
         timestamp: this.timestamp,
       });
     },
diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index 4a63737f7e..86402b0e45 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -282,8 +282,8 @@
       if (this.quoteView) {
         this.quoteView.remove();
       }
-      if (this.lightboxView) {
-        this.lightboxView.remove();
+      if (this.lightboxGalleryView) {
+        this.lightboxGalleryView.remove();
       }
       if (this.panels && this.panels.length) {
         for (let i = 0, max = this.panels.length; i < max; i += 1) {
@@ -598,6 +598,7 @@
         WhisperMessageCollection,
       });
 
+      // NOTE: Could we show grid previews from disk as well?
       const loadMessages = Signal.Components.Types.Message
         .loadWithObjectURL(Signal.Migrations.loadMessage);
       const media = await loadMessages(rawMedia);
@@ -605,30 +606,36 @@
       const saveAttachment = async ({ message } = {}) => {
         const attachment = message.attachments[0];
         const timestamp = message.received_at;
-        Signal.Types.AttachmentTS.save({ attachment, timestamp });
+        Signal.Types.AttachmentTS.save({
+          attachment,
+          document,
+          getAbsolutePath: Signal.Migrations.getAbsoluteAttachmentPath,
+          timestamp,
+        });
       };
 
       const onItemClick = async ({ message, type }) => {
-        const loadedMessage = Signal.Components.Types.Message
-          .withObjectURL(await Signal.Migrations.loadMessage(message));
         switch (type) {
           case 'documents': {
-            saveAttachment({ message: loadedMessage });
+            saveAttachment({ message });
             break;
           }
 
           case 'media': {
-            const attachment = loadedMessage.attachments[0];
-            this.lightboxView = new Whisper.ReactWrapperView({
-              Component: Signal.Components.Lightbox,
+            const selectedIndex = media.findIndex(mediaMessage =>
+              mediaMessage.id === message.id);
+            const { getAbsoluteAttachmentPath } = Signal.Migrations;
+            this.lightboxGalleryView = new Whisper.ReactWrapperView({
+              Component: Signal.Components.LightboxGallery,
               props: {
-                objectURL: loadedMessage.objectURL,
-                contentType: attachment.contentType,
-                onSave: () => saveAttachment({ message: loadedMessage }),
+                getAbsoluteAttachmentPath,
+                messages: media,
+                onSave: () => saveAttachment({ message }),
+                selectedIndex,
               },
               onClose: () => Signal.Backbone.Views.Lightbox.hide(),
             });
-            Signal.Backbone.Views.Lightbox.show(this.lightboxView.el);
+            Signal.Backbone.Views.Lightbox.show(this.lightboxGalleryView.el);
             break;
           }
 
diff --git a/preload.js b/preload.js
index 60fb78e0b0..d25a5b467d 100644
--- a/preload.js
+++ b/preload.js
@@ -166,6 +166,7 @@ window.Signal.Logs = require('./js/modules/logs');
 
 // React components
 const { Lightbox } = require('./ts/components/Lightbox');
+const { LightboxGallery } = require('./ts/components/LightboxGallery');
 const { MediaGallery } =
   require('./ts/components/conversation/media-gallery/MediaGallery');
 const { Quote } = require('./ts/components/conversation/Quote');
@@ -175,6 +176,7 @@ const MediaGalleryMessage =
 
 window.Signal.Components = {
   Lightbox,
+  LightboxGallery,
   MediaGallery,
   Types: {
     Message: MediaGalleryMessage,
diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx
index a274b9ba86..7a72ff6237 100644
--- a/ts/components/Lightbox.tsx
+++ b/ts/components/Lightbox.tsx
@@ -117,7 +117,7 @@ export class Lightbox extends React.Component<Props, {}> {
   }
 
   public render() {
-    const { contentType, objectURL } = this.props;
+    const { contentType, objectURL, onNext, onPrevious, onSave } = this.props;
     return (
       <div
         style={styles.container}
@@ -132,23 +132,23 @@ export class Lightbox extends React.Component<Props, {}> {
           </div>
           <div style={styles.controls}>
             <IconButton type="close" onClick={this.onClose} />
-            {this.props.onSave ? (
+            {onSave ? (
               <IconButton
                 type="save"
-                onClick={this.props.onSave}
+                onClick={onSave}
                 style={styles.saveButton}
               />
             ) : null}
           </div>
         </div>
         <div style={styles.navigationContainer}>
-          {this.props.onPrevious ? (
-            <IconButton type="previous" onClick={this.props.onPrevious} />
+          {onPrevious ? (
+            <IconButton type="previous" onClick={onPrevious} />
           ) : (
             <IconButtonPlaceholder />
           )}
-          {this.props.onNext ? (
-            <IconButton type="next" onClick={this.props.onNext} />
+          {onNext ? (
+            <IconButton type="next" onClick={onNext} />
           ) : (
             <IconButtonPlaceholder />
           )}
diff --git a/ts/components/LightboxGallery.tsx b/ts/components/LightboxGallery.tsx
index a08b6bef38..ae6a822a24 100644
--- a/ts/components/LightboxGallery.tsx
+++ b/ts/components/LightboxGallery.tsx
@@ -5,18 +5,18 @@ import React from 'react';
 
 import * as MIME from '../types/MIME';
 import { Lightbox } from './Lightbox';
+import { Message } from './conversation/media-gallery/types/Message';
 
 interface Item {
-  objectURL: string;
+  objectURL?: string;
   contentType: MIME.MIMEType | undefined;
 }
 
 interface Props {
   close: () => void;
-  items: Array<Item>;
-  // onNext?: () => void;
-  // onPrevious?: () => void;
-  onSave?: () => void;
+  getAbsoluteAttachmentPath: (relativePath: string) => string;
+  messages: Array<Message>;
+  onSave?: ({ message }: { message: Message }) => void;
   selectedIndex: number;
 }
 
@@ -24,6 +24,11 @@ interface State {
   selectedIndex: number;
 }
 
+const messageToItem = (message: Message): Item => ({
+  objectURL: message.attachments[0].path,
+  contentType: message.attachments[0].contentType,
+});
+
 export class LightboxGallery extends React.Component<Props, State> {
   public static defaultProps: Partial<Props> = {
     selectedIndex: 0,
@@ -38,25 +43,30 @@ export class LightboxGallery extends React.Component<Props, State> {
   }
 
   public render() {
-    const { close, items, onSave } = this.props;
+    const { close, getAbsoluteAttachmentPath, messages, onSave } = this.props;
     const { selectedIndex } = this.state;
 
-    const selectedItem: Item = items[selectedIndex];
+    const selectedMessage: Message = messages[selectedIndex];
+    const selectedItem = messageToItem(selectedMessage);
 
     const firstIndex = 0;
     const onPrevious =
       selectedIndex > firstIndex ? this.handlePrevious : undefined;
 
-    const lastIndex = items.length - 1;
+    const lastIndex = messages.length - 1;
     const onNext = selectedIndex < lastIndex ? this.handleNext : undefined;
 
+    const objectURL = selectedItem.objectURL
+      ? getAbsoluteAttachmentPath(selectedItem.objectURL)
+      : 'images/video.svg';
+
     return (
       <Lightbox
         close={close}
         onPrevious={onPrevious}
         onNext={onNext}
-        onSave={onSave}
-        objectURL={selectedItem.objectURL}
+        onSave={onSave ? this.handleSave : undefined}
+        objectURL={objectURL}
         contentType={selectedItem.contentType}
       />
     );
@@ -72,8 +82,19 @@ export class LightboxGallery extends React.Component<Props, State> {
     this.setState((prevState, props) => ({
       selectedIndex: Math.min(
         prevState.selectedIndex + 1,
-        props.items.length - 1
+        props.messages.length - 1
       ),
     }));
   };
+
+  private handleSave = () => {
+    const { messages, onSave } = this.props;
+    if (!onSave) {
+      return;
+    }
+
+    const { selectedIndex } = this.state;
+    const message = messages[selectedIndex];
+    onSave({ message });
+  };
 }
diff --git a/ts/types/Attachment.ts b/ts/types/Attachment.ts
index e9b287547b..55351a5ebf 100644
--- a/ts/types/Attachment.ts
+++ b/ts/types/Attachment.ts
@@ -47,16 +47,20 @@ export const isVisualMedia = (attachment: Attachment): boolean => {
 export const save = ({
   attachment,
   document,
+  getAbsolutePath,
   timestamp,
 }: {
   attachment: Attachment;
   document: Document;
+  getAbsolutePath: (relativePath: string) => string;
   timestamp?: number;
 }): void => {
-  const url = arrayBufferToObjectURL({
-    data: attachment.data,
-    type: SAVE_CONTENT_TYPE,
-  });
+  const url = !is.undefined(attachment.path)
+    ? getAbsolutePath(attachment.path)
+    : arrayBufferToObjectURL({
+        data: attachment.data,
+        type: SAVE_CONTENT_TYPE,
+      });
   const filename = getSuggestedFilename({ attachment, timestamp });
   saveURLAsFile({ url, filename, document });
   URL.revokeObjectURL(url);

From ea49f7a3b6e06284777a5aae70b6761f6d585663 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 17:25:16 -0400
Subject: [PATCH 32/47] Implement keyboard navigation for `Lightbox`

---
 ts/components/Lightbox.tsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx
index 7a72ff6237..a17df22e95 100644
--- a/ts/components/Lightbox.tsx
+++ b/ts/components/Lightbox.tsx
@@ -203,11 +203,28 @@ export class Lightbox extends React.Component<Props, {}> {
   };
 
   private onKeyUp = (event: KeyboardEvent) => {
-    if (event.key !== 'Escape') {
-      return;
-    }
+    const { onClose } = this;
+    const { onNext, onPrevious } = this.props;
+    switch (event.key) {
+      case 'Escape':
+        onClose();
+        break;
 
-    this.onClose();
+      case 'ArrowLeft':
+        if (onPrevious) {
+          onPrevious();
+        }
+        break;
+
+      case 'ArrowRight':
+        if (onNext) {
+          onNext();
+        }
+        break;
+
+      default:
+        break;
+    }
   };
 
   private onContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {

From 78f15b654d92bb83eaf9ec359b762bb01b0d15bf Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 17:52:43 -0400
Subject: [PATCH 33/47] Add `EmptyState` component

---
 .../conversation/media-gallery/EmptyState.md  |  5 ++++
 .../conversation/media-gallery/EmptyState.tsx | 29 +++++++++++++++++++
 ts/components/styles/Colors.ts                |  4 +++
 3 files changed, 38 insertions(+)
 create mode 100644 ts/components/conversation/media-gallery/EmptyState.md
 create mode 100644 ts/components/conversation/media-gallery/EmptyState.tsx
 create mode 100644 ts/components/styles/Colors.ts

diff --git a/ts/components/conversation/media-gallery/EmptyState.md b/ts/components/conversation/media-gallery/EmptyState.md
new file mode 100644
index 0000000000..d89fd3e87b
--- /dev/null
+++ b/ts/components/conversation/media-gallery/EmptyState.md
@@ -0,0 +1,5 @@
+```js
+<div style={{position: 'relative', width: '100%', height: 300}}>
+  <EmptyState label="You have no attachments with media"/>
+</div>
+```
diff --git a/ts/components/conversation/media-gallery/EmptyState.tsx b/ts/components/conversation/media-gallery/EmptyState.tsx
new file mode 100644
index 0000000000..17af206773
--- /dev/null
+++ b/ts/components/conversation/media-gallery/EmptyState.tsx
@@ -0,0 +1,29 @@
+/**
+ * @prettier
+ */
+import React from 'react';
+
+import * as Colors from '../../styles/Colors';
+
+interface Props {
+  label: string;
+}
+
+const styles = {
+  container: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexGrow: 1,
+
+    fontSize: 28,
+    color: Colors.TEXT_SECONDARY,
+  } as React.CSSProperties,
+};
+
+export class EmptyState extends React.Component<Props, {}> {
+  public render() {
+    const { label } = this.props;
+    return <div style={styles.container}>{label}</div>;
+  }
+}
diff --git a/ts/components/styles/Colors.ts b/ts/components/styles/Colors.ts
new file mode 100644
index 0000000000..bcc7f814f5
--- /dev/null
+++ b/ts/components/styles/Colors.ts
@@ -0,0 +1,4 @@
+/**
+ * @prettier
+ */
+export const TEXT_SECONDARY = '#bbb';

From b284e7c682a010b37dd9cc07b0466911f7354a0e Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 19:04:27 -0400
Subject: [PATCH 34/47] Remove unnecessary newline

---
 styleguide.config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/styleguide.config.js b/styleguide.config.js
index aaa7e2d535..30c620634d 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -113,7 +113,6 @@ module.exports = {
         {
           src: 'js/expiring_messages.js',
         },
-
         {
           src: 'js/chromium.js',
         },

From 4d01264c0974b734c4162b304f5b3f094ff78bd7 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 19:06:13 -0400
Subject: [PATCH 35/47] Fix layout of media gallery

---
 stylesheets/_conversation.scss                | 11 ++++--
 .../media-gallery/MediaGallery.tsx            | 34 ++++++++++++++-----
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index ec59049974..f916b86121 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -78,10 +78,13 @@
     }
   }
 
-  .panel {
+  .panel,
+  .react-wrapper {
     height: calc(100% - #{$header-height});
     overflow-y: scroll;
+  }
 
+  .panel {
     .container {
       padding-top: 20px;
       max-width: 750px;
@@ -89,11 +92,15 @@
       padding: 20px;
     }
   }
-  .main.panel {
+
+  .main.panel,
+  .react-wrapper {
     display: flex;
     flex-direction: column;
     overflow: initial;
+  }
 
+  .main.panel {
     .discussion-container {
       flex-grow: 1;
       position: relative;
diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx
index 7a1a1b18c4..7d45ec737e 100644
--- a/ts/components/conversation/media-gallery/MediaGallery.tsx
+++ b/ts/components/conversation/media-gallery/MediaGallery.tsx
@@ -33,9 +33,18 @@ const tabStyle = {
 };
 
 const styles = {
-  tabContainer: {
-    cursor: 'pointer',
+  container: {
     display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    width: '100%',
+    height: '100%',
+  } as React.CSSProperties,
+  tabContainer: {
+    display: 'flex',
+    flexGrow: 0,
+    flexShrink: 0,
+    cursor: 'pointer',
     width: '100%',
   },
   tab: {
@@ -45,9 +54,17 @@ const styles = {
       borderBottom: '2px solid #08f',
     },
   },
-  attachmentsContainer: {
+  contentContainer: {
+    display: 'flex',
+    flexGrow: 1,
+    overflowY: 'auto',
     padding: 20,
-  },
+  } as React.CSSProperties,
+  sectionContainer: {
+    display: 'flex',
+    flexGrow: 1,
+    flexDirection: 'column',
+  } as React.CSSProperties,
 };
 
 interface TabSelectEvent {
@@ -86,7 +103,7 @@ export class MediaGallery extends React.Component<Props, State> {
     const { selectedTab } = this.state;
 
     return (
-      <div>
+      <div style={styles.container}>
         <div style={styles.tabContainer}>
           <Tab
             label="Media"
@@ -101,7 +118,7 @@ export class MediaGallery extends React.Component<Props, State> {
             onSelect={this.handleTabSelect}
           />
         </div>
-        <div style={styles.attachmentsContainer}>{this.renderSections()}</div>
+        <div style={styles.contentContainer}>{this.renderSections()}</div>
       </div>
     );
   }
@@ -122,8 +139,7 @@ export class MediaGallery extends React.Component<Props, State> {
     }
 
     const now = Date.now();
-    const sections = groupMessagesByDate(now, messages);
-    return sections.map(section => {
+    const sections = groupMessagesByDate(now, messages).map(section => {
       const first = section.messages[0];
       const date = moment(first.received_at);
       const header =
@@ -141,5 +157,7 @@ export class MediaGallery extends React.Component<Props, State> {
         />
       );
     });
+
+    return <div style={styles.sectionContainer}>{sections}</div>;
   }
 }

From fa45656e8e753c5a9996e8fc68801f7adba5076c Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 19:06:48 -0400
Subject: [PATCH 36/47] Wire up media gallery empty state

---
 _locales/en/messages.json                        |  8 ++++++++
 .../conversation/media-gallery/MediaGallery.md   | 14 ++++++++++++++
 .../conversation/media-gallery/MediaGallery.tsx  | 16 +++++++++++++++-
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 7bbe419904..5f8877d0ff 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -326,10 +326,18 @@
       "message": "Media",
       "description": "Header of the default pane in the media gallery, showing images and videos"
     },
+    "mediaEmptyState": {
+      "message": "You don’t have any media in this conversation",
+      "description": "Message shown to user in the media gallery when there are no messages with media attachments (images or video)"
+    },
     "documents": {
       "message": "Documents",
       "description": "Header of the secondary pane in the media gallery, showing every non-media attachment"
     },
+    "documentsEmptyState": {
+      "message": "You don’t have any documents in this conversation",
+      "description": "Message shown to user in the media gallery when there are no messages with document attachments (anything other than images or video)"
+    },
     "messageCaption": {
       "message": "Message caption",
       "description": "Prefix of attachment alt tags in the media gallery"
diff --git a/ts/components/conversation/media-gallery/MediaGallery.md b/ts/components/conversation/media-gallery/MediaGallery.md
index ca6e3a6277..7291171448 100644
--- a/ts/components/conversation/media-gallery/MediaGallery.md
+++ b/ts/components/conversation/media-gallery/MediaGallery.md
@@ -1,3 +1,17 @@
+### Empty states for missing media and documents
+
+```
+<div style={{width: '100%', height: 300}}>
+  <MediaGallery
+    i18n={window.i18n}
+    media={[]}
+    documents={[]}
+  />
+</div>
+```
+
+### Media gallery with media and documents
+
 ```jsx
 const DAY_MS = 24 * 60 * 60 * 1000;
 const MONTH_MS = 30 * DAY_MS;
diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx
index 7d45ec737e..8f06c70351 100644
--- a/ts/components/conversation/media-gallery/MediaGallery.tsx
+++ b/ts/components/conversation/media-gallery/MediaGallery.tsx
@@ -7,9 +7,11 @@ import moment from 'moment';
 
 import { AttachmentSection } from './AttachmentSection';
 import { AttachmentType } from './types/AttachmentType';
+import { EmptyState } from './EmptyState';
 import { groupMessagesByDate } from './groupMessagesByDate';
 import { ItemClickEvent } from './types/ItemClickEvent';
 import { Message } from './types/Message';
+import { missingCaseError } from '../../../util/missingCaseError';
 
 interface Props {
   documents: Array<Message>;
@@ -135,7 +137,19 @@ export class MediaGallery extends React.Component<Props, State> {
     const type = selectedTab;
 
     if (!messages || messages.length === 0) {
-      return null;
+      const label = (() => {
+        switch (type) {
+          case 'media':
+            return i18n('mediaEmptyState');
+
+          case 'documents':
+            return i18n('documentsEmptyState');
+
+          default:
+            throw missingCaseError(type);
+        }
+      })();
+      return <EmptyState data-test="EmptyState" label={label} />;
     }
 
     const now = Date.now();

From 9ca6fd64984c0c7e77c77fc1b9cd2058833f26c5 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 19:13:05 -0400
Subject: [PATCH 37/47] Center lightbox navigation controls

---
 ts/components/Lightbox.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx
index a17df22e95..896a79a23e 100644
--- a/ts/components/Lightbox.tsx
+++ b/ts/components/Lightbox.tsx
@@ -18,6 +18,9 @@ interface Props {
   onSave?: () => void;
 }
 
+const CONTROLS_WIDTH = 50;
+const CONTROLS_SPACING = 10;
+
 const styles = {
   container: {
     display: 'flex',
@@ -32,6 +35,7 @@ const styles = {
   mainContainer: {
     display: 'flex',
     flexDirection: 'row',
+    flexGrow: 1,
     paddingTop: 40,
     paddingLeft: 40,
     paddingRight: 40,
@@ -49,11 +53,17 @@ const styles = {
     maxHeight: '100%',
     objectFit: 'contain',
   } as React.CSSProperties,
+  controlsOffsetPlaceholder: {
+    width: CONTROLS_WIDTH,
+    marginRight: CONTROLS_SPACING,
+    flexShrink: 0,
+  },
   controls: {
+    width: CONTROLS_WIDTH,
     flexShrink: 0,
     display: 'flex',
     flexDirection: 'column',
-    marginLeft: 10,
+    marginLeft: CONTROLS_SPACING,
   } as React.CSSProperties,
   navigationContainer: {
     flexShrink: 0,
@@ -125,6 +135,7 @@ export class Lightbox extends React.Component<Props, {}> {
         ref={this.setContainerRef}
       >
         <div style={styles.mainContainer}>
+          <div style={styles.controlsOffsetPlaceholder} />
           <div style={styles.objectContainer}>
             {!is.undefined(contentType)
               ? this.renderObject({ objectURL, contentType })

From 86e48a5713d0b56a419ceb27267dd607d16a1016 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 20:09:48 -0400
Subject: [PATCH 38/47] Implement background migration using index

---
 js/background.js | 37 ++++++++++++++++++++++++++++---------
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/js/background.js b/js/background.js
index 846fda7d13..4f5003035e 100644
--- a/js/background.js
+++ b/js/background.js
@@ -90,18 +90,37 @@
   storage.fetch();
 
   const idleDetector = new IdleDetector();
+  let isMigrationWithIndexComplete = false;
+  let isMigrationWithoutIndexComplete = false;
   idleDetector.on('idle', async () => {
     const NUM_MESSAGES_PER_BATCH = 1;
-    const database = Migrations0DatabaseWithAttachmentData.getDatabase();
-    const batch = await MessageDataMigrator.processNextBatchWithoutIndex({
-      databaseName: database.name,
-      minDatabaseVersion: database.version,
-      numMessagesPerBatch: NUM_MESSAGES_PER_BATCH,
-      upgradeMessageSchema,
-    });
-    console.log('Upgrade message schema:', batch);
 
-    if (batch.done) {
+    if (!isMigrationWithIndexComplete) {
+      const batchWithIndex = await MessageDataMigrator.processNext({
+        BackboneMessage: Whisper.Message,
+        BackboneMessageCollection: Whisper.MessageCollection,
+        numMessagesPerBatch: NUM_MESSAGES_PER_BATCH,
+        upgradeMessageSchema,
+      });
+      console.log('Upgrade message schema (with index):', batchWithIndex);
+      isMigrationWithIndexComplete = batchWithIndex.done;
+    }
+
+    if (!isMigrationWithoutIndexComplete) {
+      const database = Migrations0DatabaseWithAttachmentData.getDatabase();
+      const batchWithoutIndex = await MessageDataMigrator.processNextBatchWithoutIndex({
+        databaseName: database.name,
+        minDatabaseVersion: database.version,
+        numMessagesPerBatch: NUM_MESSAGES_PER_BATCH,
+        upgradeMessageSchema,
+      });
+      console.log('Upgrade message schema (without index):', batchWithoutIndex);
+      isMigrationWithoutIndexComplete = batchWithoutIndex.done;
+    }
+
+    const areAllMigrationsComplete = isMigrationWithIndexComplete &&
+      isMigrationWithoutIndexComplete;
+    if (areAllMigrationsComplete) {
       idleDetector.stop();
     }
   });

From d00fb560b01537d98aa5d47e34fdba0a8c25832f Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 20:20:19 -0400
Subject: [PATCH 39/47] Avoid exposing `AttachmentTS`

---
 js/modules/types/attachment.js | 3 +++
 js/views/attachment_view.js    | 2 +-
 js/views/conversation_view.js  | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/js/modules/types/attachment.js b/js/modules/types/attachment.js
index cb67b7f1da..7dba7b828e 100644
--- a/js/modules/types/attachment.js
+++ b/js/modules/types/attachment.js
@@ -1,5 +1,6 @@
 const is = require('@sindresorhus/is');
 
+const AttachmentTS = require('../../../ts/types/Attachment');
 const MIME = require('../../../ts/types/MIME');
 const { arrayBufferToBlob, blobToArrayBuffer, dataURLToBlob } = require('blob-util');
 const { autoOrientImage } = require('../auto_orient_image');
@@ -163,3 +164,5 @@ exports.deleteData = (deleteAttachmentData) => {
     await deleteAttachmentData(attachment.path);
   };
 };
+
+exports.save = AttachmentTS.save;
diff --git a/js/views/attachment_view.js b/js/views/attachment_view.js
index b71a68aa7e..e3e6dbfd45 100644
--- a/js/views/attachment_view.js
+++ b/js/views/attachment_view.js
@@ -177,7 +177,7 @@
       return i18n('unnamedFile');
     },
     saveFile() {
-      Signal.Types.AttachmentTS.save({
+      Signal.Types.Attachment.save({
         attachment: this.model,
         document,
         getAbsolutePath: Signal.Migrations.getAbsoluteAttachmentPath,
diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index 86402b0e45..704ba03f53 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -606,7 +606,7 @@
       const saveAttachment = async ({ message } = {}) => {
         const attachment = message.attachments[0];
         const timestamp = message.received_at;
-        Signal.Types.AttachmentTS.save({
+        Signal.Types.Attachment.save({
           attachment,
           document,
           getAbsolutePath: Signal.Migrations.getAbsoluteAttachmentPath,

From 55569adfb0c3def8705852516eafa2b5bf5a71af Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 20:27:03 -0400
Subject: [PATCH 40/47] Fix media gallery layout in iOS theme

---
 stylesheets/_ios.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/stylesheets/_ios.scss b/stylesheets/_ios.scss
index d6452c2460..f5a1a33057 100644
--- a/stylesheets/_ios.scss
+++ b/stylesheets/_ios.scss
@@ -80,7 +80,8 @@ $ios-border-color: rgba(0,0,0,0.1);
     .avatar { display: none; }
   }
 
-  .conversation .panel {
+  .conversation .panel,
+  .conversation .react-wrapper {
     position: absolute;
     top: $header-height;
     bottom: 0;

From b8d20052e10692edba0184650c74834c3d818173 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Mon, 30 Apr 2018 11:00:38 -0400
Subject: [PATCH 41/47] Remove unnecessary `AttachmentTS` reference

---
 preload.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/preload.js b/preload.js
index d25a5b467d..0822678c24 100644
--- a/preload.js
+++ b/preload.js
@@ -205,7 +205,6 @@ window.Signal.Startup = require('./js/modules/startup');
 
 window.Signal.Types = {};
 window.Signal.Types.Attachment = Attachment;
-window.Signal.Types.AttachmentTS = require('./ts/types/Attachment');
 window.Signal.Types.Conversation = require('./ts/types/Conversation');
 window.Signal.Types.Errors = require('./js/modules/types/errors');
 

From c6599d2e14245012c57f2d1a10f4f8c64b5c1dee Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Mon, 30 Apr 2018 11:01:00 -0400
Subject: [PATCH 42/47] Add another permutation of `EmptyState`

---
 ts/components/conversation/media-gallery/EmptyState.md | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/ts/components/conversation/media-gallery/EmptyState.md b/ts/components/conversation/media-gallery/EmptyState.md
index d89fd3e87b..e6382357df 100644
--- a/ts/components/conversation/media-gallery/EmptyState.md
+++ b/ts/components/conversation/media-gallery/EmptyState.md
@@ -1,5 +1,11 @@
 ```js
-<div style={{position: 'relative', width: '100%', height: 300}}>
-  <EmptyState label="You have no attachments with media"/>
+<div style={{ position: "relative", width: "100%", height: 300 }}>
+    <EmptyState label="You have no attachments with media" />
+</div>
+```
+
+```js
+<div style={{ position: "relative", width: "100%", height: 500 }}>
+    <EmptyState label="You have no documents with media" />
 </div>
 ```

From 110b58230b01f9b99f3616f752f6525993caa98c Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Mon, 30 Apr 2018 11:01:57 -0400
Subject: [PATCH 43/47] Only revoke object URLs we created

---
 ts/types/Attachment.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ts/types/Attachment.ts b/ts/types/Attachment.ts
index 55351a5ebf..3578f1b4e2 100644
--- a/ts/types/Attachment.ts
+++ b/ts/types/Attachment.ts
@@ -55,6 +55,7 @@ export const save = ({
   getAbsolutePath: (relativePath: string) => string;
   timestamp?: number;
 }): void => {
+  const isObjectURLRequired = is.undefined(attachment.path);
   const url = !is.undefined(attachment.path)
     ? getAbsolutePath(attachment.path)
     : arrayBufferToObjectURL({
@@ -63,7 +64,9 @@ export const save = ({
       });
   const filename = getSuggestedFilename({ attachment, timestamp });
   saveURLAsFile({ url, filename, document });
-  URL.revokeObjectURL(url);
+  if (isObjectURLRequired) {
+    URL.revokeObjectURL(url);
+  }
 };
 
 export const getSuggestedFilename = ({

From fccbf70d570b25ebd7db5c73e92f3a8dc424b57d Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Mon, 30 Apr 2018 11:59:26 -0400
Subject: [PATCH 44/47] Pre-process media for `LightboxGallery`

---
 js/views/conversation_view.js     | 13 +++++++++----
 ts/components/LightboxGallery.tsx |  9 +++------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index 704ba03f53..44bbf87477 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -603,13 +603,14 @@
         .loadWithObjectURL(Signal.Migrations.loadMessage);
       const media = await loadMessages(rawMedia);
 
+      const { getAbsoluteAttachmentPath } = Signal.Migrations;
       const saveAttachment = async ({ message } = {}) => {
         const attachment = message.attachments[0];
         const timestamp = message.received_at;
         Signal.Types.Attachment.save({
           attachment,
           document,
-          getAbsolutePath: Signal.Migrations.getAbsoluteAttachmentPath,
+          getAbsolutePath: getAbsoluteAttachmentPath,
           timestamp,
         });
       };
@@ -622,14 +623,18 @@
           }
 
           case 'media': {
+            const mediaWithObjectURL = media.map(mediaMessage =>
+              Object.assign(
+                {},
+                mediaMessage,
+                { objectURL: getAbsoluteAttachmentPath(mediaMessage.attachments[0].path) }
+              ));
             const selectedIndex = media.findIndex(mediaMessage =>
               mediaMessage.id === message.id);
-            const { getAbsoluteAttachmentPath } = Signal.Migrations;
             this.lightboxGalleryView = new Whisper.ReactWrapperView({
               Component: Signal.Components.LightboxGallery,
               props: {
-                getAbsoluteAttachmentPath,
-                messages: media,
+                messages: mediaWithObjectURL,
                 onSave: () => saveAttachment({ message }),
                 selectedIndex,
               },
diff --git a/ts/components/LightboxGallery.tsx b/ts/components/LightboxGallery.tsx
index ae6a822a24..39b7b4eb06 100644
--- a/ts/components/LightboxGallery.tsx
+++ b/ts/components/LightboxGallery.tsx
@@ -14,7 +14,6 @@ interface Item {
 
 interface Props {
   close: () => void;
-  getAbsoluteAttachmentPath: (relativePath: string) => string;
   messages: Array<Message>;
   onSave?: ({ message }: { message: Message }) => void;
   selectedIndex: number;
@@ -25,7 +24,7 @@ interface State {
 }
 
 const messageToItem = (message: Message): Item => ({
-  objectURL: message.attachments[0].path,
+  objectURL: message.objectURL,
   contentType: message.attachments[0].contentType,
 });
 
@@ -43,7 +42,7 @@ export class LightboxGallery extends React.Component<Props, State> {
   }
 
   public render() {
-    const { close, getAbsoluteAttachmentPath, messages, onSave } = this.props;
+    const { close, messages, onSave } = this.props;
     const { selectedIndex } = this.state;
 
     const selectedMessage: Message = messages[selectedIndex];
@@ -56,9 +55,7 @@ export class LightboxGallery extends React.Component<Props, State> {
     const lastIndex = messages.length - 1;
     const onNext = selectedIndex < lastIndex ? this.handleNext : undefined;
 
-    const objectURL = selectedItem.objectURL
-      ? getAbsoluteAttachmentPath(selectedItem.objectURL)
-      : 'images/video.svg';
+    const objectURL = selectedItem.objectURL || 'images/alert-outline.svg';
 
     return (
       <Lightbox

From d5fdf50fae320ae00263b4fe9970c7de34237ace Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Mon, 30 Apr 2018 13:52:00 -0400
Subject: [PATCH 45/47] Remove unused reference

---
 js/background.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/js/background.js b/js/background.js
index 4f5003035e..b0bed30fd1 100644
--- a/js/background.js
+++ b/js/background.js
@@ -17,10 +17,7 @@
     const { IdleDetector, MessageDataMigrator } = Signal.Workflow;
     const { Errors, Message } = window.Signal.Types;
     const { upgradeMessageSchema } = window.Signal.Migrations;
-    const {
-        Migrations0DatabaseWithAttachmentData,
-        Migrations1DatabaseWithoutAttachmentData,
-    } = window.Signal.Migrations;
+    const { Migrations0DatabaseWithAttachmentData } = window.Signal.Migrations;
     const { Views } = window.Signal;
 
     // Implicitly used in `indexeddb-backbonejs-adapter`:

From 6671228028f3774e68601073f17d1f173db5c24c Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Mon, 30 Apr 2018 13:53:07 -0400
Subject: [PATCH 46/47] :art: Format using ESLint

---
 js/background.js | 51 ++++++++++++++++++++++++++----------------------
 1 file changed, 28 insertions(+), 23 deletions(-)

diff --git a/js/background.js b/js/background.js
index b0bed30fd1..f30ec497cd 100644
--- a/js/background.js
+++ b/js/background.js
@@ -384,33 +384,38 @@
       storage,
     });
     console.log('Sync read receipt configuration status:', status);
-    /* eslint-disable */
 
-        if (firstRun === true && deviceId != '1') {
-            if (!storage.get('theme-setting') && textsecure.storage.get('userAgent') === 'OWI') {
-                storage.put('theme-setting', 'ios');
-                onChangeTheme();
-            }
-            var syncRequest = new textsecure.SyncRequest(textsecure.messaging, messageReceiver);
-            Whisper.events.trigger('contactsync:begin');
-            syncRequest.addEventListener('success', function() {
-                console.log('sync successful');
-                storage.put('synced_at', Date.now());
-                Whisper.events.trigger('contactsync');
-            });
-            syncRequest.addEventListener('timeout', function() {
-                console.log('sync timed out');
-                Whisper.events.trigger('contactsync');
-            });
+    if (firstRun === true && deviceId !== '1') {
+      const hasThemeSetting = Boolean(storage.get('theme-setting'));
+      if (!hasThemeSetting && textsecure.storage.get('userAgent') === 'OWI') {
+        storage.put('theme-setting', 'ios');
+        onChangeTheme();
+      }
+      const syncRequest = new textsecure.SyncRequest(
+        textsecure.messaging,
+        messageReceiver
+      );
+      Whisper.events.trigger('contactsync:begin');
+      syncRequest.addEventListener('success', () => {
+        console.log('sync successful');
+        storage.put('synced_at', Date.now());
+        Whisper.events.trigger('contactsync');
+      });
+      syncRequest.addEventListener('timeout', () => {
+        console.log('sync timed out');
+        Whisper.events.trigger('contactsync');
+      });
 
-            if (Whisper.Import.isComplete()) {
-              textsecure.messaging.sendRequestConfigurationSyncMessage().catch(function(e) {
-                console.log(e);
-              });
-            }
-        }
+      if (Whisper.Import.isComplete()) {
+        textsecure.messaging.sendRequestConfigurationSyncMessage().catch((e) => {
+          console.log(e);
+        });
+      }
     }
 
+  }
+  /* eslint-disable */
+
     function onChangeTheme() {
         var view = window.owsDesktopApp.appView;
         if (view) {

From 50a0048bf2b1f1e620ca820289089ae05503c4fe Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Mon, 30 Apr 2018 13:53:39 -0400
Subject: [PATCH 47/47] Skip attachment migration for new users

---
 js/background.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/js/background.js b/js/background.js
index f30ec497cd..4a5ed347cc 100644
--- a/js/background.js
+++ b/js/background.js
@@ -133,7 +133,6 @@
         first = false;
 
         ConversationController.load().then(start, start);
-        idleDetector.start();
     });
 
     Whisper.events.on('shutdown', function() {
@@ -413,6 +412,16 @@
       }
     }
 
+    storage.onready(async () => {
+      const shouldSkipAttachmentMigrationForNewUsers = firstRun === true;
+      if (shouldSkipAttachmentMigrationForNewUsers) {
+        const database = Migrations0DatabaseWithAttachmentData.getDatabase();
+        const connection =
+          await Signal.Database.open(database.name, database.version);
+        await Signal.Settings.markAttachmentMigrationComplete(connection);
+      }
+      idleDetector.start();
+    });
   }
   /* eslint-disable */