Display attachments from disk

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