relink lightbox from signal to our app

js/views/conversation_view.js

@@ -1245,22 +1245,6 @@
       });
     },
 
-    // THIS DOES NOT DOWNLOAD ANYTHING!
-    downloadAttachment({ attachment, message, isDangerous }) {
-      if (isDangerous) {
-        const toast = new Whisper.DangerousFileTypeToast();
-        toast.$el.appendTo(this.$el);
-        toast.render();
-        return;
-      }
-      Signal.Types.Attachment.save({
-        attachment,
-        document,
-        getAbsolutePath: getAbsoluteAttachmentPath,
-        timestamp: message.get ? message.get('sent_at') : message.sent_at,
-      });
-    },
-
     deleteSelectedMessages() {
       const ourPubkey = textsecure.storage.user.getNumber();
       const selected = Array.from(this.model.selectedMessages);

ts/components/Lightbox.tsx

@@ -8,8 +8,6 @@ import is from '@sindresorhus/is';
 import * as GoogleChrome from '../util/GoogleChrome';
 import * as MIME from '../types/MIME';
 
-import { LocalizerType } from '../types/Util';
-
 const Colors = {
   TEXT_SECONDARY: '#bbb',
   ICON_SECONDARY: '#ccc',
@@ -26,7 +24,6 @@ const colorSVG = (url: string, color: string) => {
 interface Props {
   close: () => void;
   contentType: MIME.MIMEType | undefined;
-  i18n: LocalizerType;
   objectURL: string;
   caption?: string;
   onNext?: () => void;
@@ -41,12 +38,15 @@ const styles = {
   container: {
     display: 'flex',
     flexDirection: 'column',
-    position: 'absolute',
+    position: 'fixed',
+    width: '100vw',
+    height: '100vh',
     left: 0,
+    zIndex: 5,
     right: 0,
     top: 0,
     bottom: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
   } as React.CSSProperties,
   mainContainer: {
     display: 'flex',
@@ -218,7 +218,6 @@ export class Lightbox extends React.Component<Props> {
       onNext,
       onPrevious,
       onSave,
-      i18n,
     } = this.props;
 
     return (
@@ -232,7 +231,7 @@ export class Lightbox extends React.Component<Props> {
           <div style={styles.controlsOffsetPlaceholder} />
           <div style={styles.objectContainer}>
             {!is.undefined(contentType)
-              ? this.renderObject({ objectURL, contentType, i18n })
+              ? this.renderObject({ objectURL, contentType })
               : null}
             {caption ? <div style={styles.caption}>{caption}</div> : null}
           </div>
@@ -266,17 +265,15 @@ export class Lightbox extends React.Component<Props> {
   private readonly renderObject = ({
     objectURL,
     contentType,
-    i18n,
   }: {
     objectURL: string;
     contentType: MIME.MIMEType;
-    i18n: LocalizerType;
   }) => {
     const isImageTypeSupported = GoogleChrome.isImageTypeSupported(contentType);
     if (isImageTypeSupported) {
       return (
         <img
-          alt={i18n('lightboxImageAlt')}
+          alt={window.i18n('lightboxImageAlt')}
           style={styles.object}
           src={objectURL}
           onClick={this.onObjectClick}

ts/components/LightboxGallery.tsx

@@ -8,7 +8,6 @@ import { Lightbox } from './Lightbox';
 import { Message } from './conversation/media-gallery/types/Message';
 
 import { AttachmentType } from '../types/Attachment';
-import { LocalizerType } from '../types/Util';
 
 export interface MediaItemType {
   objectURL?: string;
@@ -21,7 +20,6 @@ export interface MediaItemType {
 
 interface Props {
   close: () => void;
-  i18n: LocalizerType;
   media: Array<MediaItemType>;
   onSave?: (options: {
     attachment: AttachmentType;
@@ -49,7 +47,7 @@ export class LightboxGallery extends React.Component<Props, State> {
   }
 
   public render() {
-    const { close, media, onSave, i18n } = this.props;
+    const { close, media, onSave } = this.props;
     const { selectedIndex } = this.state;
 
     const selectedMedia = media[selectedIndex];
@@ -75,7 +73,6 @@ export class LightboxGallery extends React.Component<Props, State> {
         objectURL={objectURL}
         caption={captionCallback}
         contentType={selectedMedia.contentType}
-        i18n={i18n}
       />
     );
   }

ts/components/session/conversation/SessionConversation.tsx

@@ -6,8 +6,6 @@ import classNames from 'classnames';
 
 import { SessionCompositionBox } from './SessionCompositionBox';
 
-import { getTimestamp } from './SessionConversationManager';
-
 import { Constants } from '../../../session';
 import { SessionKeyVerification } from '../SessionKeyVerification';
 import _ from 'lodash';
@@ -18,6 +16,10 @@ import { SessionRightPanelWithDetails } from './SessionRightPanel';
 import { SessionTheme } from '../../../state/ducks/SessionTheme';
 import { DefaultTheme } from 'styled-components';
 import { SessionConversationMessagesList } from './SessionConversationMessagesList';
+import { LightboxGallery } from '../../LightboxGallery';
+import { Message } from '../../conversation/media-gallery/types/Message';
+
+import { AttachmentType } from '../../../types/Attachment';
 
 interface State {
   conversationKey: string;
@@ -54,6 +56,9 @@ interface State {
   // quoted message
   quotedMessageTimestamp?: number;
   quotedMessageProps?: any;
+
+  // lightbox options
+  lightBoxOptions?: any;
 }
 
 interface Props {
@@ -121,6 +126,8 @@ export class SessionConversation extends React.Component<Props, State> {
     // Keyboard navigation
     this.onKeyDown = this.onKeyDown.bind(this);
 
+    this.showLightBox = this.showLightBox.bind(this);
+
     const conversationModel = window.ConversationController.getOrThrow(
       this.state.conversationKey
     );
@@ -161,6 +168,7 @@ export class SessionConversation extends React.Component<Props, State> {
       showRecordingView,
       showOptionsPane,
       quotedMessageProps,
+      lightBoxOptions,
     } = this.state;
     const selectionMode = !!this.state.selectedMessages.length;
 
@@ -216,6 +224,8 @@ export class SessionConversation extends React.Component<Props, State> {
             {showMessageDetails && <>&nbsp</>}
           </div>
 
+          {lightBoxOptions?.media && this.showLightBox(lightBoxOptions)}
+
           <div className="conversation-messages">
             <SessionConversationMessagesList {...messagesListProps} />
 
@@ -541,7 +551,7 @@ export class SessionConversation extends React.Component<Props, State> {
       },
 
       onShowLightBox: (lightBoxOptions = {}) => {
-        conversation.showChannelLightbox(lightBoxOptions);
+        this.setState({ lightBoxOptions });
       },
     };
   }
@@ -819,4 +829,41 @@ export class SessionConversation extends React.Component<Props, State> {
     //   default:
     // }
   }
+
+  private showLightBox(lightboxOptions: any) {
+    const { media, attachment } = lightboxOptions;
+    const selectedIndex = media.findIndex(
+      (mediaMessage: any) => mediaMessage.attachment.path === attachment.path
+    );
+    return (
+      <LightboxGallery
+        media={media}
+        close={() => {
+          this.setState({ lightBoxOptions: undefined });
+        }}
+        selectedIndex={selectedIndex}
+        onSave={this.downloadAttachment}
+      />
+    );
+  }
+
+  // THIS DOES NOT DOWNLOAD ANYTHING!
+  private downloadAttachment({
+    attachment,
+    message,
+    index,
+  }: {
+    attachment: AttachmentType;
+    message: Message;
+    index: number;
+  }) {
+    const { getAbsoluteAttachmentPath } = window.Signal.Migrations;
+
+    window.Signal.Types.Attachment.save({
+      attachment,
+      document,
+      getAbsolutePath: getAbsoluteAttachmentPath,
+      timestamp: message.received_at || Date.now(),
+    });
+  }
 }

ts/components/session/conversation/SessionRightPanel.tsx

@@ -132,7 +132,6 @@ class SessionRightPanel extends React.Component<Props, State> {
       }
     }
 
-    // tslint:disable-next-line: underscore-consistent-invocation
     const media = _.flatten(
       rawMedia.map((message: { attachments: any }) => {
         const { attachments } = message;