feat: migrated lightbox to modal state

ts/components/conversation/SessionConversation.tsx

@@ -34,7 +34,6 @@ import {
 import { updateConfirmModal } from '../../state/ducks/modalDialog';
 import { addStagedAttachmentsInConversation } from '../../state/ducks/stagedAttachments';
 import { MIME } from '../../types';
-import { AttachmentTypeWithPath } from '../../types/Attachment';
 import {
   THUMBNAIL_CONTENT_TYPE,
   getAudioDuration,
@@ -48,7 +47,6 @@ import { EmptyMessageView } from '../EmptyMessageView';
 import { SplitViewContainer } from '../SplitViewContainer';
 import { SessionButtonColor } from '../basic/SessionButton';
 import { InConversationCallContainer } from '../calling/InConversationCallContainer';
-import { LightboxGallery, MediaItemType } from '../lightbox/LightboxGallery';
 import { NoMessageInConversation } from './SubtleNotification';
 import { ConversationHeaderWithDetails } from './header/ConversationHeader';
 
@@ -63,10 +61,6 @@ const DEFAULT_JPEG_QUALITY = 0.85;
 interface State {
   isDraggingFile: boolean;
 }
-export interface LightBoxOptions {
-  media: Array<MediaItemType>;
-  attachment: AttachmentTypeWithPath;
-}
 
 interface Props {
   ourDisplayNameInProfile: string;
@@ -79,9 +73,6 @@ interface Props {
   hasOngoingCallWithFocusedConvo: boolean;
   htmlDirection: HTMLDirection;
 
-  // lightbox options
-  lightBoxOptions?: LightBoxOptions;
-
   stagedAttachments: Array<StagedAttachmentType>;
   isSelectedConvoInitialLoadingInProgress: boolean;
 }
@@ -238,7 +229,6 @@ export class SessionConversation extends Component<Props, State> {
       messagesProps,
       selectedMessages,
       isRightPanelShowing,
-      lightBoxOptions,
       isSelectedConvoInitialLoadingInProgress,
     } = this.props;
 
@@ -280,8 +270,6 @@ export class SessionConversation extends Component<Props, State> {
               onKeyDown={this.onKeyDown}
               role="navigation"
             >
-              {lightBoxOptions?.media && this.renderLightBox(lightBoxOptions)}
-
               <div className="conversation-messages">
                 <NoMessageInConversation />
 
@@ -357,14 +345,6 @@ export class SessionConversation extends Component<Props, State> {
     }
   }
 
-  private renderLightBox({ media, attachment }: LightBoxOptions) {
-    const selectedIndex =
-      media.length > 1
-        ? media.findIndex(mediaMessage => mediaMessage.attachment.path === attachment.path)
-        : 0;
-    return <LightboxGallery media={media} selectedIndex={selectedIndex} />;
-  }
-
   private async onChoseAttachments(attachmentsFileList: Array<File>) {
     if (!attachmentsFileList || attachmentsFileList.length === 0) {
       return;

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

@@ -3,10 +3,9 @@ import { useState } from 'react';
 
 import { useDisableDrag } from '../../../hooks/useDisableDrag';
 import { useEncryptedFileFetch } from '../../../hooks/useEncryptedFileFetch';
-import { showLightBox } from '../../../state/ducks/conversations';
+import { LightBoxOptions, updateLightBoxOptions } from '../../../state/ducks/modalDialog';
 import { isImageTypeSupported, isVideoTypeSupported } from '../../../util/GoogleChrome';
 import { MediaItemType } from '../../lightbox/LightboxGallery';
-import { LightBoxOptions } from '../SessionConversation';
 
 type Props = {
   mediaItem: MediaItemType;
@@ -104,7 +103,7 @@ export const MediaGridItem = (props: Props) => {
           attachment: props.mediaItem.attachment,
         };
 
-        window.inboxStore?.dispatch(showLightBox(lightBoxOptions));
+        window.inboxStore?.dispatch(updateLightBoxOptions(lightBoxOptions));
       }}
     >
       <MediaGridItemContent {...props} />

ts/components/conversation/message/message-content/MessageAttachment.tsx

@@ -5,11 +5,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { Data } from '../../../../data/data';
 import { MessageModelType, MessageRenderingProps } from '../../../../models/messageType';
-import {
+import { PropsForAttachment, toggleSelectedMessageId } from '../../../../state/ducks/conversations';
-  PropsForAttachment,
+import { LightBoxOptions, updateLightBoxOptions } from '../../../../state/ducks/modalDialog';
-  showLightBox,
-  toggleSelectedMessageId,
-} from '../../../../state/ducks/conversations';
 import { StateType } from '../../../../state/reducer';
 import { useMessageSelected } from '../../../../state/selectors';
 import {
@@ -28,10 +25,10 @@ import {
   isVideo,
 } from '../../../../types/Attachment';
 import { saveAttachmentToDisk } from '../../../../util/attachmentsUtil';
+import { MediaItemType } from '../../../lightbox/LightboxGallery';
 import { Spinner } from '../../../loading';
 import { AudioPlayerWithEncryptedFile } from '../../H5AudioPlayer';
 import { ImageGrid } from '../../ImageGrid';
-import { LightBoxOptions } from '../../SessionConversation';
 import { ClickToTrustSender } from './ClickToTrustSender';
 import { MessageHighlighter } from './MessageHighlighter';
 
@@ -244,7 +241,7 @@ export async function showLightboxFromAttachmentProps(
   const media = (msgAttachments || []).map(attachmentForMedia => {
     index++;
     const messageTimestamp =
-      found.get('timestamp') || found.get('serverTimestamp') || found.get('received_at');
+      found.get('timestamp') || found.get('serverTimestamp') || found.get('received_at') || -1;
 
     return {
       index: clone(index),
@@ -259,10 +256,10 @@ export async function showLightboxFromAttachmentProps(
 
   if (attachmentIsAttachmentTypeWithPath(selected)) {
     const lightBoxOptions: LightBoxOptions = {
-      media: media as any,
+      media,
       attachment: selected,
     };
-    window.inboxStore?.dispatch(showLightBox(lightBoxOptions));
+    window.inboxStore?.dispatch(updateLightBoxOptions(lightBoxOptions));
   } else {
     window.log.warn('Attachment is not of the right type');
   }
@@ -281,10 +278,10 @@ const onClickAttachment = async (onClickProps: {
   }
   const msgAttachments = found.getPropsForMessage().attachments;
 
-  const media = (msgAttachments || []).map(attachmentForMedia => {
+  const media: Array<MediaItemType> = (msgAttachments || []).map(attachmentForMedia => {
     index++;
     const messageTimestamp =
-      found.get('timestamp') || found.get('serverTimestamp') || found.get('received_at');
+      found.get('timestamp') || found.get('serverTimestamp') || found.get('received_at') || -1;
 
     return {
       index: clone(index),
@@ -299,10 +296,10 @@ const onClickAttachment = async (onClickProps: {
 
   if (attachmentIsAttachmentTypeWithPath(onClickProps.attachment)) {
     const lightBoxOptions: LightBoxOptions = {
-      media: media as any,
+      media,
       attachment: onClickProps.attachment,
     };
-    window.inboxStore?.dispatch(showLightBox(lightBoxOptions));
+    window.inboxStore?.dispatch(updateLightBoxOptions(lightBoxOptions));
   } else {
     window.log.warn('Attachment is not of the right type');
   }

ts/components/dialog/ModalContainer.tsx

@@ -10,6 +10,7 @@ import {
   getEnterPasswordModalState,
   getHideRecoveryPasswordModalState,
   getInviteContactModal,
+  getLightBoxOptions,
   getOnionPathDialog,
   getReactClearAllDialog,
   getReactListDialog,
@@ -19,6 +20,7 @@ import {
   getUpdateGroupNameModal,
   getUserDetailsModal,
 } from '../../state/selectors/modal';
+import { LightboxGallery } from '../lightbox/LightboxGallery';
 import { BanOrUnBanUserDialog } from './BanOrUnbanUserDialog';
 import { DeleteAccountModal } from './DeleteAccountModal';
 import { EditProfilePictureModal } from './EditProfilePictureModal';
@@ -57,6 +59,7 @@ export const ModalContainer = () => {
   const reactClearAllModalState = useSelector(getReactClearAllDialog);
   const editProfilePictureModalState = useSelector(getEditProfilePictureModalState);
   const hideRecoveryPasswordModalState = useSelector(getHideRecoveryPasswordModalState);
+  const lightBoxOptions = useSelector(getLightBoxOptions);
 
   return (
     <>
@@ -84,6 +87,7 @@ export const ModalContainer = () => {
       {hideRecoveryPasswordModalState && (
         <HideRecoveryPasswordDialog {...hideRecoveryPasswordModalState} />
       )}
+      {lightBoxOptions && <LightboxGallery {...lightBoxOptions} />}
     </>
   );
 };

ts/components/lightbox/Lightbox.tsx

@@ -6,7 +6,7 @@ import useUnmount from 'react-use/lib/useUnmount';
 import styled from 'styled-components';
 import { useDisableDrag } from '../../hooks/useDisableDrag';
 import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
-import { showLightBox } from '../../state/ducks/conversations';
+import { updateLightBoxOptions } from '../../state/ducks/modalDialog';
 import * as MIME from '../../types/MIME';
 import { assertUnreachable } from '../../types/sqlSharedTypes';
 import { GoogleChrome } from '../../util';
@@ -277,14 +277,14 @@ export const Lightbox = (props: Props) => {
 
   const onObjectClick = (event: any) => {
     event.stopPropagation();
-    dispatch(showLightBox(undefined));
+    dispatch(updateLightBoxOptions(null));
   };
 
   const onContainerClick = (event: MouseEvent<HTMLDivElement>) => {
     if (renderedRef && event.target === renderedRef.current) {
       return;
     }
-    dispatch(showLightBox(undefined));
+    dispatch(updateLightBoxOptions(null));
   };
 
   return (
@@ -309,7 +309,7 @@ export const Lightbox = (props: Props) => {
             <IconButton
               type="close"
               onClick={() => {
-                dispatch(showLightBox(undefined));
+                dispatch(updateLightBoxOptions(null));
               }}
             />
           </Flex>

ts/components/lightbox/LightboxGallery.tsx

@@ -4,7 +4,7 @@ import useKey from 'react-use/lib/useKey';
 
 import { Lightbox } from './Lightbox';
 
-import { showLightBox } from '../../state/ducks/conversations';
+import { updateLightBoxOptions } from '../../state/ducks/modalDialog';
 import { useSelectedConversationKey } from '../../state/selectors/selectedConversation';
 import { MIME } from '../../types';
 import { AttachmentTypeWithPath } from '../../types/Attachment';
@@ -23,11 +23,11 @@ export interface MediaItemType {
 
 type Props = {
   media: Array<MediaItemType>;
-  selectedIndex: number;
+  selectedIndex?: number;
 };
 
 export const LightboxGallery = (props: Props) => {
-  const { media } = props;
+  const { media, selectedIndex = -1 } = props;
   const [currentIndex, setCurrentIndex] = useState(-1);
   const selectedConversation = useSelectedConversationKey();
 
@@ -35,7 +35,7 @@ export const LightboxGallery = (props: Props) => {
 
   // just run once, when the component is mounted. It's to show the lightbox on the specified index at start.
   useEffect(() => {
-    setCurrentIndex(props.selectedIndex);
+    setCurrentIndex(selectedIndex);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -82,7 +82,7 @@ export const LightboxGallery = (props: Props) => {
   useKey(
     'Escape',
     () => {
-      dispatch(showLightBox(undefined));
+      dispatch(updateLightBoxOptions(null));
     },
     undefined,
     [currentIndex]

ts/state/ducks/conversations.ts

@@ -3,7 +3,6 @@ import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { omit, toNumber } from 'lodash';
 import { ReplyingToMessageProps } from '../../components/conversation/composition/CompositionBox';
 import { QuotedAttachmentType } from '../../components/conversation/message/message-content/quote/Quote';
-import { LightBoxOptions } from '../../components/conversation/SessionConversation';
 import { Data } from '../../data/data';
 import {
   ConversationInteractionStatus,
@@ -313,7 +312,6 @@ export type ConversationsStateType = {
   messageInfoId: string | undefined;
   showRightPanel: boolean;
   selectedMessageIds: Array<string>;
-  lightBox?: LightBoxOptions;
   quotedMessage?: ReplyingToMessageProps;
   areMoreMessagesBeingFetched: boolean;
 
@@ -869,7 +867,6 @@ const conversationsSlice = createSlice({
         showRightPanel: false,
         selectedMessageIds: [],
 
-        lightBox: undefined,
         messageInfoId: undefined,
         quotedMessage: undefined,
 
@@ -935,13 +932,6 @@ const conversationsSlice = createSlice({
       state.oldBottomMessageId = null;
       return state;
     },
-    showLightBox(
-      state: ConversationsStateType,
-      action: PayloadAction<LightBoxOptions | undefined>
-    ) {
-      state.lightBox = action.payload;
-      return state;
-    },
     showScrollToBottomButton(state: ConversationsStateType, action: PayloadAction<boolean>) {
       state.showScrollButton = action.payload;
       return state;
@@ -1141,7 +1131,6 @@ export const {
   addMessageIdToSelection,
   resetSelectedMessageIds,
   toggleSelectedMessageId,
-  showLightBox,
   quoteMessage,
   showScrollToBottomButton,
   quotedMessageToAnimate,

ts/state/ducks/modalDialog.tsx

@@ -2,6 +2,8 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { EnterPasswordModalProps } from '../../components/dialog/EnterPasswordModal';
 import { HideRecoveryPasswordDialogProps } from '../../components/dialog/HideRecoveryPasswordDialog';
 import { SessionConfirmDialogProps } from '../../components/dialog/SessionConfirm';
+import { MediaItemType } from '../../components/lightbox/LightboxGallery';
+import { AttachmentTypeWithPath } from '../../types/Attachment';
 import type { EditProfilePictureModalProps, PasswordAction } from '../../types/ReduxTypes';
 
 export type BanType = 'ban' | 'unban';
@@ -40,6 +42,12 @@ export type EditProfilePictureModalState = EditProfilePictureModalProps | null;
 
 export type HideRecoveryPasswordModalState = HideRecoveryPasswordDialogProps | null;
 
+export type LightBoxOptions = {
+  media: Array<MediaItemType>;
+  attachment: AttachmentTypeWithPath;
+  selectedIndex?: number;
+} | null;
+
 export type ModalState = {
   confirmModal: ConfirmModalState;
   inviteContactModal: InviteContactModalState;
@@ -59,6 +67,7 @@ export type ModalState = {
   reactClearAllModalState: ReactModalsState;
   editProfilePictureModalState: EditProfilePictureModalState;
   hideRecoveryPasswordModalState: HideRecoveryPasswordModalState;
+  lightBoxOptions: LightBoxOptions;
 };
 
 export const initialModalState: ModalState = {
@@ -80,6 +89,7 @@ export const initialModalState: ModalState = {
   reactClearAllModalState: null,
   editProfilePictureModalState: null,
   hideRecoveryPasswordModalState: null,
+  lightBoxOptions: null,
 };
 
 const ModalSlice = createSlice({
@@ -140,6 +150,23 @@ const ModalSlice = createSlice({
     updateHideRecoveryPasswordModel(state, action: PayloadAction<HideRecoveryPasswordModalState>) {
       return { ...state, hideRecoveryPasswordModalState: action.payload };
     },
+    updateLightBoxOptions(state, action: PayloadAction<LightBoxOptions>) {
+      const lightBoxOptions = action.payload;
+
+      if (lightBoxOptions) {
+        const { media, attachment } = lightBoxOptions;
+
+        if (attachment && media) {
+          const selectedIndex =
+            media.length > 1
+              ? media.findIndex(mediaMessage => mediaMessage.attachment.path === attachment.path)
+              : 0;
+          lightBoxOptions.selectedIndex = selectedIndex;
+        }
+      }
+
+      return { ...state, lightBoxOptions };
+    },
   },
 });
 
@@ -163,5 +190,6 @@ export const {
   updateReactClearAllModal,
   updateEditProfilePictureModel,
   updateHideRecoveryPasswordModel,
+  updateLightBoxOptions,
 } = actions;
 export const modalReducer = reducer;

ts/state/selectors/conversations.ts

@@ -22,7 +22,6 @@ import { MessageContentSelectorProps } from '../../components/conversation/messa
 import { MessageContentWithStatusSelectorProps } from '../../components/conversation/message/message-content/MessageContentWithStatus';
 import { MessageTextSelectorProps } from '../../components/conversation/message/message-content/MessageText';
 import { GenericReadableMessageSelectorProps } from '../../components/conversation/message/message-item/GenericReadableMessage';
-import { LightBoxOptions } from '../../components/conversation/SessionConversation';
 import { hasValidIncomingRequestValues } from '../../models/conversation';
 import { CONVERSATION_PRIORITIES, isOpenOrClosedGroup } from '../../models/conversationAttributes';
 import { getConversationController } from '../../session/conversations';
@@ -511,9 +510,6 @@ export const getSelectedMessageIds = (state: StateType): Array<string> =>
 export const getIsMessageSelectionMode = (state: StateType): boolean =>
   Boolean(getSelectedMessageIds(state).length);
 
-export const getLightBoxOptions = (state: StateType): LightBoxOptions | undefined =>
-  state.conversations.lightBox;
-
 export const getQuotedMessage = (state: StateType): ReplyingToMessageProps | undefined =>
   state.conversations.quotedMessage;
 

ts/state/selectors/modal.ts

@@ -11,6 +11,7 @@ import {
   EnterPasswordModalState,
   HideRecoveryPasswordModalState,
   InviteContactModalState,
+  LightBoxOptions,
   ModalState,
   OnionPathModalState,
   ReactModalsState,
@@ -115,3 +116,8 @@ export const getHideRecoveryPasswordModalState = createSelector(
   getModal,
   (state: ModalState): HideRecoveryPasswordModalState => state.hideRecoveryPasswordModalState
 );
+
+export const getLightBoxOptions = createSelector(
+  getModal,
+  (state: ModalState): LightBoxOptions => state.lightBoxOptions
+);

ts/state/smart/SessionConversation.ts

@@ -6,7 +6,6 @@ import { StateType } from '../reducer';
 import { getHasOngoingCallWithFocusedConvo } from '../selectors/call';
 import {
   getIsSelectedConvoInitialLoadingInProgress,
-  getLightBoxOptions,
   getSelectedConversation,
   getSelectedMessageIds,
   getSortedMessagesOfSelectedConversation,
@@ -31,7 +30,6 @@ const mapStateToProps = (state: StateType, ownProps: SmartSessionConversationOwn
     ourNumber: getOurNumber(state),
     isRightPanelShowing: isRightPanelShowing(state),
     selectedMessages: getSelectedMessageIds(state),
-    lightBoxOptions: getLightBoxOptions(state),
     stagedAttachments: getStagedAttachmentsForCurrentConversation(state),
     hasOngoingCallWithFocusedConvo: getHasOngoingCallWithFocusedConvo(state),
     isSelectedConvoInitialLoadingInProgress: getIsSelectedConvoInitialLoadingInProgress(state),