Display attachments from disk

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 />
           )}

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

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