Open media gallery item in lightbox

js/views/conversation_view.js

@@ -592,14 +592,25 @@
       );
       const mediaWithObjectURLs = await loadMessages(media);
 
-      const props = {
+      const mediaGalleryProps = {
         media: mediaWithObjectURLs,
         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 view = new Whisper.ReactWrapperView({
         Component: MediaGallery,
-        props,
+        props: mediaGalleryProps,
         onClose: () => this.resetPanel(),
       });
 

ts/components/conversation/media-gallery/AttachmentSection.tsx

@@ -4,6 +4,7 @@
 import React from 'react';
 
 import { DocumentListItem } from './DocumentListItem';
+import { ItemClickEvent } from './events/ItemClickEvent';
 import { MediaGridItem } from './MediaGridItem';
 import { Message } from './propTypes/Message';
 import { missingCaseError } from '../../../util/missingCaseError';
@@ -31,19 +32,27 @@ interface Props {
   header?: string;
   type: 'media' | 'documents';
   messages: Array<Message>;
+  onItemClick?: (event: ItemClickEvent) => void;
 }
 
 export class AttachmentSection extends React.Component<Props, {}> {
-  public renderItems() {
+  private renderItems() {
     const { i18n, messages, type } = this.props;
 
     return messages.map(message => {
       const { attachments } = message;
       const firstAttachment = attachments[0];
 
+      const onClick = this.createClickHandler(message);
       switch (type) {
         case 'media':
-          return <MediaGridItem key={message.received_at} message={message} />;
+          return (
+            <MediaGridItem
+              key={message.received_at}
+              message={message}
+              onClick={onClick}
+            />
+          );
         case 'documents':
           return (
             <DocumentListItem
@@ -52,6 +61,7 @@ export class AttachmentSection extends React.Component<Props, {}> {
               fileSize={firstAttachment.size}
               fileName={firstAttachment.fileName}
               timestamp={message.received_at}
+              onClick={onClick}
             />
           );
         default:
@@ -60,6 +70,15 @@ export class AttachmentSection extends React.Component<Props, {}> {
     });
   }
 
+  private createClickHandler = (message: Message) => () => {
+    const { onItemClick } = this.props;
+    if (!onItemClick) {
+      return;
+    }
+
+    onItemClick({ message });
+  };
+
   public render() {
     const { header } = this.props;
 

ts/components/conversation/media-gallery/DocumentListItem.tsx

@@ -12,6 +12,7 @@ interface Props {
   fileName?: string;
   fileSize?: number;
   i18n: (key: string, values?: Array<string>) => string;
+  onClick?: () => void;
   timestamp: number;
 }
 
@@ -61,7 +62,7 @@ export class DocumentListItem extends React.Component<Props, {}> {
     // }
 
     return (
-      <div style={styles.itemContainer}>
+      <div style={styles.itemContainer} onClick={this.props.onClick}>
         <img
           src="images/file.svg"
           width="48"

ts/components/conversation/media-gallery/MediaGallery.tsx

@@ -7,6 +7,7 @@ import moment from 'moment';
 
 import { AttachmentSection } from './AttachmentSection';
 import { groupMessagesByDate } from './groupMessagesByDate';
+import { ItemClickEvent } from './events/ItemClickEvent';
 import { Message } from './propTypes/Message';
 
 type AttachmentType = 'media' | 'documents';
@@ -15,6 +16,7 @@ interface Props {
   documents: Array<Message>;
   i18n: (key: string, values?: Array<string>) => string;
   media: Array<Message>;
+  onItemClick?: (event: ItemClickEvent) => void;
 }
 
 interface State {
@@ -110,7 +112,7 @@ export class MediaGallery extends React.Component<Props, State> {
   };
 
   private renderSections() {
-    const { i18n, media, documents } = this.props;
+    const { i18n, media, documents, onItemClick } = this.props;
     const { selectedTab } = this.state;
 
     const messages = selectedTab === 'media' ? media : documents;
@@ -137,6 +139,7 @@ export class MediaGallery extends React.Component<Props, State> {
           i18n={i18n}
           type={type}
           messages={section.messages}
+          onItemClick={onItemClick}
         />
       );
     });

ts/components/conversation/media-gallery/MediaGridItem.tsx

@@ -8,6 +8,7 @@ import { Message } from './propTypes/Message';
 
 interface Props {
   message: Message;
+  onClick?: () => void;
 }
 
 const size = {
@@ -47,6 +48,10 @@ export class MediaGridItem extends React.Component<Props, {}> {
   }
 
   public render() {
-    return <div style={styles.container}>{this.renderContent()}</div>;
+    return (
+      <div style={styles.container} onClick={this.props.onClick}>
+        {this.renderContent()}
+      </div>
+    );
   }
 }