import React from 'react'; import { SessionIcon, SessionIconButton } from '../icon'; import styled from 'styled-components'; import { useDispatch, useSelector } from 'react-redux'; import { quoteMessage } from '../../state/ducks/conversations'; import { getQuotedMessage } from '../../state/selectors/conversations'; import { getAlt, isAudio } from '../../types/Attachment'; import { AUDIO_MP3 } from '../../types/MIME'; import { Flex } from '../basic/Flex'; import { Image } from '../../../ts/components/conversation/Image'; // tslint:disable-next-line: no-submodule-imports import useKey from 'react-use/lib/useKey'; import { getAbsoluteAttachmentPath } from '../../types/MessageAttachment'; const QuotedMessageComposition = styled(Flex)` border-top: 1px solid var(--border-color); `; const QuotedMessageCompositionReply = styled(Flex)` border-left: 3px solid var(--primary-color); `; const Subtle = styled.div` overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; color: var(--text-primary-color); `; const StyledImage = styled.div` div { border-radius: 4px; overflow: hidden; } `; const StyledText = styled(Flex)` margin: 0 0 0 var(--margins-sm); p { font-weight: bold; margin: 0; } `; export const SessionQuotedMessageComposition = () => { const quotedMessageProps = useSelector(getQuotedMessage); const dispatch = useDispatch(); const { author, attachments, text: quoteText } = quotedMessageProps || {}; const hasAttachments = attachments && attachments.length > 0 && attachments[0]; const firstImageAttachment = hasAttachments && attachments[0].contentType !== AUDIO_MP3 && attachments[0].thumbnail ? attachments[0] : undefined; const hasAudio = hasAttachments && isAudio(attachments); const hasAudioAttachment = hasAudio !== false && hasAudio !== undefined && hasAudio !== ''; const removeQuotedMessage = () => { dispatch(quoteMessage(undefined)); }; useKey('Escape', removeQuotedMessage, undefined, []); if (!author || !quotedMessageProps?.id) { return null; } return ( <QuotedMessageComposition container={true} justifyContent="space-between" alignItems="center" width={'100%'} flexGrow={1} padding={'var(--margins-md)'} > <QuotedMessageCompositionReply container={true} justifyContent="flex-start" alignItems={'center'} > {firstImageAttachment && ( <StyledImage> <Image alt={getAlt(firstImageAttachment)} attachment={firstImageAttachment} height={100} width={100} url={getAbsoluteAttachmentPath((firstImageAttachment as any).thumbnail.path)} softCorners={false} /> </StyledImage> )} <StyledText container={true} flexDirection="column" justifyContent={'center'} alignItems={'flex-start'} > <p>{author}</p> <Subtle> {(firstImageAttachment && window.i18n('mediaMessage')) || (quoteText !== '' && quoteText)} </Subtle> </StyledText> {hasAudioAttachment && <SessionIcon iconType="microphone" iconSize="huge" />} </QuotedMessageCompositionReply> <SessionIconButton iconType="exit" iconSize="small" onClick={removeQuotedMessage} /> </QuotedMessageComposition> ); };