fix: close messageInfo when message not in redux store

ts/components/conversation/SessionConversation.tsx

@@ -76,7 +76,6 @@ interface Props {
   selectedConversation?: ReduxConversationType;
   messagesProps: Array<SortedMessageModelProps>;
   selectedMessages: Array<string>;
-  showMessageDetails: boolean;
   isRightPanelShowing: boolean;
   hasOngoingCallWithFocusedConvo: boolean;
   htmlDirection: HTMLDirection;

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

@@ -22,7 +22,7 @@ import { MessageRenderingProps } from '../../../../models/messageType';
 import { pushUnblockToSend } from '../../../../session/utils/Toast';
 import {
   openRightPanel,
-  showMessageDetailsView,
+  showMessageInfoView,
   toggleSelectedMessageId,
 } from '../../../../state/ducks/conversations';
 import { setRightOverlayMode } from '../../../../state/ducks/section';
@@ -173,8 +173,7 @@ export const showMessageInfoOverlay = async ({
 }) => {
   const found = await Data.getMessageById(messageId);
   if (found) {
-    const messageDetailsProps = await found.getPropsForMessageDetail();
-    dispatch(showMessageDetailsView(messageDetailsProps));
+    dispatch(showMessageInfoView(messageId));
     dispatch(
       setRightOverlayMode({
         type: 'message_info',

ts/components/conversation/message/reactions/Reaction.tsx

@@ -1,10 +1,9 @@
 import React, { ReactElement, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { useMouse } from 'react-use';
 import styled from 'styled-components';
+import { useRightOverlayMode } from '../../../../hooks/useUI';
 import { isUsAnySogsFromCache } from '../../../../session/apis/open_group_api/sogsv3/knownBlindedkeys';
 import { UserUtils } from '../../../../session/utils';
-import { getRightOverlayMode } from '../../../../state/selectors/section';
 import { useIsMessageSelectionMode } from '../../../../state/selectors/selectedConversation';
 import { THEME_GLOBALS } from '../../../../themes/globals';
 import { SortedReactionList } from '../../../../types/Reaction';
@@ -79,7 +78,7 @@ export const Reaction = (props: ReactionProps): ReactElement => {
     handlePopupClick,
   } = props;
 
-  const rightOverlayMode = useSelector(getRightOverlayMode);
+  const rightOverlayMode = useRightOverlayMode();
   const isMessageSelection = useIsMessageSelectionMode();
   const reactionsMap = (reactions && Object.fromEntries(reactions)) || {};
   const senders = reactionsMap[emoji]?.senders || [];

ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx

@@ -1,27 +1,40 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 // tslint:disable-next-line: no-submodule-imports
 import useKey from 'react-use/lib/useKey';
-import { closeMessageDetailsView, closeRightPanel } from '../../../../../state/ducks/conversations';
+import { PropsForAttachment, closeRightPanel } from '../../../../../state/ducks/conversations';
 import { resetRightOverlayMode, setRightOverlayMode } from '../../../../../state/ducks/section';
-import { getMessageDetailsViewProps } from '../../../../../state/selectors/conversations';
+import { getMessageInfoId } from '../../../../../state/selectors/conversations';
 import { Flex } from '../../../../basic/Flex';
 import { Header, HeaderTitle, StyledScrollContainer } from '../components';
 
+import { Data } from '../../../../../data/data';
+import { useRightOverlayMode } from '../../../../../hooks/useUI';
 import {
   replyToMessage,
   resendMessage,
 } from '../../../../../interactions/conversationInteractions';
 import { deleteMessagesById } from '../../../../../interactions/conversations/unsendingInteractions';
 import {
+  useMessageAttachments,
+  useMessageDirection,
   useMessageIsDeletable,
   useMessageQuote,
+  useMessageSender,
+  useMessageServerTimestamp,
   useMessageText,
+  useMessageTimestamp,
 } from '../../../../../state/selectors';
-import { getRightOverlayMode } from '../../../../../state/selectors/section';
+import { useSelectedConversationKey } from '../../../../../state/selectors/selectedConversation';
 import { canDisplayImage } from '../../../../../types/Attachment';
+import { isAudio } from '../../../../../types/MIME';
+import {
+  getAudioDuration,
+  getVideoDuration,
+} from '../../../../../types/attachments/VisualAttachment';
+import { GoogleChrome } from '../../../../../util';
 import { saveAttachmentToDisk } from '../../../../../util/attachmentsUtil';
 import { SpacerLG, SpacerMD, SpacerXL } from '../../../../basic/Text';
 import { PanelButtonGroup, PanelIconButton } from '../../../../buttons';
@@ -78,36 +91,134 @@ const StyledMessageDetail = styled.div`
   padding: var(--margins-sm) var(--margins-2xl) var(--margins-lg);
 `;
 
-export const OverlayMessageInfo = () => {
-  const rightOverlayMode = useSelector(getRightOverlayMode);
-  const messageDetailProps = useSelector(getMessageDetailsViewProps);
-  const isDeletable = useMessageIsDeletable(messageDetailProps?.messageId);
+type MessageInfoProps = {
+  errors: Array<Error>;
+  attachments: Array<PropsForAttachment>;
+};
+
+async function getPropsForMessageInfo(
+  messageId: string | undefined,
+  attachments: Array<PropsForAttachment>
+): Promise<MessageInfoProps | null> {
+  if (!messageId) {
+    return null;
+  }
+  const found = await Data.getMessageById(messageId);
+  const attachmentsWithMediaDetails: Array<PropsForAttachment> = [];
+  if (found) {
+    // process attachments so we have the fileSize, url and screenshots
+    for (let i = 0; i < attachments.length; i++) {
+      const props = found.getPropsForAttachment(attachments[i]);
+      if (
+        props?.contentType &&
+        GoogleChrome.isVideoTypeSupported(props?.contentType) &&
+        !props.duration &&
+        props.url
+      ) {
+        // eslint-disable-next-line no-await-in-loop
+        const duration = await getVideoDuration({
+          objectUrl: props.url,
+          contentType: props.contentType,
+        });
+        attachmentsWithMediaDetails.push({
+          ...props,
+          duration,
+        });
+      } else if (props?.contentType && isAudio(props.contentType) && !props.duration && props.url) {
+        // eslint-disable-next-line no-await-in-loop
+        const duration = await getAudioDuration({
+          objectUrl: props.url,
+          contentType: props.contentType,
+        });
+
+        attachmentsWithMediaDetails.push({
+          ...props,
+          duration,
+        });
+      } else if (props) {
+        attachmentsWithMediaDetails.push(props);
+      }
+    }
+
+    // This will make the error message for outgoing key errors a bit nicer
+    const errors = (found.get('errors') || []).map((error: any) => {
+      return error;
+    });
+
+    const toRet: MessageInfoProps = {
+      errors,
+      attachments: attachmentsWithMediaDetails,
+    };
+
+    return toRet;
+  }
+  return null;
+}
 
+function useMessageInfo(messageId: string | undefined) {
+  const [details, setDetails] = useState<MessageInfoProps | null>(null);
+
+  const fromState = useMessageAttachments(messageId);
+
+  // this is not ideal, but also doesn't seem to create any performance issue at the moment.
+  // TODO: ideally, we'd want to save the attachment duration anytime we save one to the disk (incoming/outgoing), and just retrieve it from the redux state here.
+  useEffect(() => {
+    let mounted = true;
+    // eslint-disable-next-line more/no-then
+    void getPropsForMessageInfo(messageId, fromState || [])
+      .then(result => {
+        if (mounted) {
+          setDetails(result);
+        }
+      })
+      .catch(window.log.error);
+
+    return () => {
+      mounted = false;
+    };
+  }, [fromState, messageId]);
+
+  return details;
+}
+
+export const OverlayMessageInfo = () => {
   const dispatch = useDispatch();
 
-  useKey('Escape', () => {
+  const rightOverlayMode = useRightOverlayMode();
+  const messageId = useSelector(getMessageInfoId);
+  const messageInfo = useMessageInfo(messageId);
+  const isDeletable = useMessageIsDeletable(messageId);
+  const direction = useMessageDirection(messageId);
+  const timestamp = useMessageTimestamp(messageId);
+  const serverTimestamp = useMessageServerTimestamp(messageId);
+  const sender = useMessageSender(messageId);
+
+  // we close the right panel when switching conversation so the convoId of that message is always the selectedConversationKey
+  // is always the currently selected conversation
+  const convoId = useSelectedConversationKey();
+
+  const closePanel = useCallback(() => {
     dispatch(closeRightPanel());
     dispatch(resetRightOverlayMode());
-    dispatch(closeMessageDetailsView());
-  });
+  }, [dispatch]);
+
+  useKey('Escape', closePanel);
+
+  // close the panel if the messageInfo is associated with a deleted message
+  useEffect(() => {
+    if (!sender) {
+      closePanel();
+    }
+  }, [sender, closePanel]);
 
-  if (!rightOverlayMode || !messageDetailProps) {
+  if (!rightOverlayMode || !messageInfo || !convoId || !messageId || !sender) {
     return null;
   }
 
   const { params } = rightOverlayMode;
   const visibleAttachmentIndex = params?.visibleAttachmentIndex || 0;
 
-  const {
-    convoId,
-    messageId,
-    sender,
-    attachments,
-    timestamp,
-    serverTimestamp,
-    errors,
-    direction,
-  } = messageDetailProps;
+  const { errors, attachments } = messageInfo;
 
   const hasAttachments = attachments && attachments.length > 0;
   const supportsAttachmentCarousel = canDisplayImage(attachments);
@@ -140,14 +251,7 @@ export const OverlayMessageInfo = () => {
   return (
     <StyledScrollContainer>
       <Flex container={true} flexDirection={'column'} alignItems={'center'}>
-        <Header
-          hideBackButton={true}
-          closeButtonOnClick={() => {
-            dispatch(closeRightPanel());
-            dispatch(resetRightOverlayMode());
-            dispatch(closeMessageDetailsView());
-          }}
-        >
+        <Header hideBackButton={true} closeButtonOnClick={closePanel}>
           <HeaderTitle>{window.i18n('messageInfo')}</HeaderTitle>
         </Header>
         <StyledMessageDetailContainer>
@@ -178,7 +282,7 @@ export const OverlayMessageInfo = () => {
                 <SpacerMD />
               </>
             )}
-            <MessageInfo />
+            <MessageInfo messageId={messageId} errors={messageInfo.errors} />
             <SpacerLG />
             <PanelButtonGroup style={{ margin: '0' }}>
               <PanelIconButton

ts/components/conversation/right-panel/overlay/message-info/components/MessageInfo.tsx

@@ -2,10 +2,16 @@ import { ipcRenderer } from 'electron';
 import { isEmpty } from 'lodash';
 import moment from 'moment';
 import React from 'react';
-import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { MessageFrom } from '.';
-import { getMessageDetailsViewProps } from '../../../../../../state/selectors/conversations';
+import {
+  useMessageDirection,
+  useMessageReceivedAt,
+  useMessageSender,
+  useMessageServerTimestamp,
+  useMessageTimestamp,
+} from '../../../../../../state/selectors';
+
 import { Flex } from '../../../../../basic/Flex';
 import { SpacerSM } from '../../../../../basic/Text';
 
@@ -51,16 +57,18 @@ const showDebugLog = () => {
   ipcRenderer.send('show-debug-log');
 };
 
-export const MessageInfo = () => {
-  const messageDetailProps = useSelector(getMessageDetailsViewProps);
+export const MessageInfo = ({ messageId, errors }: { messageId: string; errors: Array<Error> }) => {
+  const sender = useMessageSender(messageId);
+  const direction = useMessageDirection(messageId);
+  const sentAt = useMessageTimestamp(messageId);
+  const serverTimestamp = useMessageServerTimestamp(messageId);
+  const receivedAt = useMessageReceivedAt(messageId);
 
-  if (!messageDetailProps) {
+  if (!messageId || !sender) {
     return null;
   }
 
-  const { errors, receivedAt, sentAt, direction, sender } = messageDetailProps;
-
-  const sentAtStr = `${moment(sentAt).format(formatTimestamps)}`;
+  const sentAtStr = `${moment(serverTimestamp || sentAt).format(formatTimestamps)}`;
   const receivedAtStr = `${moment(receivedAt).format(formatTimestamps)}`;
 
   const hasError = !isEmpty(errors);