@ -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 { getMessage DetailsViewProps } from '../../../../../state/selectors/conversations' ;
import { getMessage InfoId } 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/se ction';
import { useSelectedConversationKey } from '../../../../../state/selectors/se le ctedConversa tion';
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 - 2 xl ) 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 || ! message Info || ! 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
Audric Ackermann
1 year ago
committed by
GitHub