fix lightbox for single attachment display and download

js/models/messages.js

@@ -620,11 +620,6 @@
         onShowDetail: () => this.trigger('show-message-detail', this),
         onDelete: () => this.trigger('delete', this),
         onClickLinkPreview: url => this.trigger('navigate-to', url),
-        onClickAttachment: attachment =>
-          this.trigger('show-lightbox', {
-            attachment,
-            message: this,
-          }),
 
         onDownload: isDangerous =>
           this.trigger('download', {

ts/components/session/conversation/SessionConversation.tsx

@@ -16,7 +16,7 @@ import { SessionRightPanelWithDetails } from './SessionRightPanel';
 import { SessionTheme } from '../../../state/ducks/SessionTheme';
 import { DefaultTheme } from 'styled-components';
 import { SessionConversationMessagesList } from './SessionConversationMessagesList';
-import { LightboxGallery } from '../../LightboxGallery';
+import { LightboxGallery, MediaItemType } from '../../LightboxGallery';
 import { Message } from '../../conversation/media-gallery/types/Message';
 
 import { AttachmentType } from '../../../types/Attachment';
@@ -121,12 +121,13 @@ export class SessionConversation extends React.Component<Props, State> {
     this.deleteSelectedMessages = this.deleteSelectedMessages.bind(this);
 
     this.replyToMessage = this.replyToMessage.bind(this);
+    this.onClickAttachment = this.onClickAttachment.bind(this);
     this.getMessages = this.getMessages.bind(this);
 
     // Keyboard navigation
     this.onKeyDown = this.onKeyDown.bind(this);
 
-    this.showLightBox = this.showLightBox.bind(this);
+    this.renderLightBox = this.renderLightBox.bind(this);
 
     const conversationModel = window.ConversationController.getOrThrow(
       this.state.conversationKey
@@ -224,7 +225,7 @@ export class SessionConversation extends React.Component<Props, State> {
             {showMessageDetails && <>&nbsp</>}
           </div>
 
-          {lightBoxOptions?.media && this.showLightBox(lightBoxOptions)}
+          {lightBoxOptions?.media && this.renderLightBox(lightBoxOptions)}
 
           <div className="conversation-messages">
             <SessionConversationMessagesList {...messagesListProps} />
@@ -489,6 +490,7 @@ export class SessionConversation extends React.Component<Props, State> {
       getMessages: this.getMessages,
       replyToMessage: this.replyToMessage,
       doneInitialScroll: this.state.doneInitialScroll,
+      onClickAttachment: this.onClickAttachment,
     };
   }
 
@@ -787,6 +789,20 @@ export class SessionConversation extends React.Component<Props, State> {
     }
   }
 
+  private onClickAttachment(attachment: any, message: any) {
+    const lightBoxOptions = {
+      media: [
+        {
+          objectURL: attachment.url,
+          contentType: attachment.contentType,
+          attachment,
+        },
+      ],
+      attachment,
+    };
+    this.setState({ lightBoxOptions });
+  }
+
   // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   // ~~~~~~~~~~~ KEYBOARD NAVIGATION ~~~~~~~~~~~~
   // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -830,11 +846,20 @@ export class SessionConversation extends React.Component<Props, State> {
     // }
   }
 
-  private showLightBox(lightboxOptions: any) {
-    const { media, attachment } = lightboxOptions;
-    const selectedIndex = media.findIndex(
-      (mediaMessage: any) => mediaMessage.attachment.path === attachment.path
-    );
+  private renderLightBox({
+    media,
+    attachment,
+  }: {
+    media: Array<MediaItemType>;
+    attachment: any;
+  }) {
+    const selectedIndex =
+      media.length > 1
+        ? media.findIndex(
+            (mediaMessage: any) =>
+              mediaMessage.attachment.path === attachment.path
+          )
+        : 0;
     return (
       <LightboxGallery
         media={media}
@@ -847,7 +872,7 @@ export class SessionConversation extends React.Component<Props, State> {
     );
   }
 
-  // THIS DOES NOT DOWNLOAD ANYTHING!
+  // THIS DOES NOT DOWNLOAD ANYTHING! it just saves it where the user wants
   private downloadAttachment({
     attachment,
     message,
@@ -863,7 +888,7 @@ export class SessionConversation extends React.Component<Props, State> {
       attachment,
       document,
       getAbsolutePath: getAbsoluteAttachmentPath,
-      timestamp: message.received_at || Date.now(),
+      timestamp: message?.received_at || Date.now(),
     });
   }
 }

ts/components/session/conversation/SessionConversationMessagesList.tsx

@@ -29,6 +29,7 @@ interface Props {
     interval: number
   ) => Promise<{ previousTopMessage: string }>;
   replyToMessage: (messageId: number) => Promise<void>;
+  onClickAttachment: (attachment: any, message: any) => void;
 }
 
 export class SessionConversationMessagesList extends React.Component<
@@ -135,6 +136,7 @@ export class SessionConversationMessagesList extends React.Component<
           // in a series of messages from the same user
           item = messageProps
             ? this.renderMessage(
+                message,
                 messageProps,
                 message.firstMessageOfSeries,
                 multiSelectMode
@@ -156,6 +158,7 @@ export class SessionConversationMessagesList extends React.Component<
   }
 
   public renderMessage(
+    message: any,
     messageProps: any,
     firstMessageOfSeries: boolean,
     multiSelectMode: boolean
@@ -176,6 +179,11 @@ export class SessionConversationMessagesList extends React.Component<
       void this.props.replyToMessage(messageId);
     };
 
+    messageProps.onClickAttachment = (attachment: any) => {
+      this.props.onClickAttachment(attachment, messageProps);
+    };
+    // messageProps.onDownload = ()
+
     return <Message {...messageProps} />;
   }