import React, { useContext } from 'react'; import { Flex } from '../../basic/Flex'; import { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from '../icon'; import { ReplyingToMessageProps } from './SessionCompositionBox'; import styled, { DefaultTheme, ThemeContext } from 'styled-components'; import { getAlt, isAudio, isImageAttachment } from '../../../types/Attachment'; import { Image } from '../../conversation/Image'; import { AUDIO_MP3 } from '../../../types/MIME'; // tslint:disable: react-unused-props-and-state interface Props { quotedMessageProps: ReplyingToMessageProps; removeQuotedMessage: any; } const QuotedMessageComposition = styled.div` width: 100%; padding-inline-end: ${props => props.theme.common.margins.md}; padding-inline-start: ${props => props.theme.common.margins.md}; `; const QuotedMessageCompositionReply = styled.div` background: ${props => props.theme.colors.quoteBottomBarBackground}; border-radius: ${props => props.theme.common.margins.sm}; padding: ${props => props.theme.common.margins.xs}; box-shadow: ${props => props.theme.colors.sessionShadow}; margin: ${props => props.theme.common.margins.xs}; `; const Subtle = styled.div` overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; color: ${props => props.theme.colors.textColor}; `; const ReplyingTo = styled.div` color: ${props => props.theme.colors.textColor}; `; export const SessionQuotedMessageComposition = (props: Props) => { const { quotedMessageProps, removeQuotedMessage } = props; const theme = useContext(ThemeContext); const { text: body, attachments } = quotedMessageProps; const hasAttachments = attachments && attachments.length > 0; let hasImageAttachment = false; let firstImageAttachment; // we have to handle the case we are trying to reply to an audio message if (attachments?.length && attachments[0].contentType !== AUDIO_MP3 && attachments[0].thumbnail) { firstImageAttachment = attachments[0]; hasImageAttachment = true; } const hasAudioAttachment = hasAttachments && attachments && attachments.length > 0 && isAudio(attachments); return ( <QuotedMessageComposition theme={theme}> <Flex container={true} justifyContent="space-between" flexGrow={1} margin={theme.common.margins.xs} > <ReplyingTo>{window.i18n('replyingToMessage')}</ReplyingTo> <SessionIconButton iconType={SessionIconType.Exit} iconSize={SessionIconSize.Small} onClick={removeQuotedMessage} theme={theme} /> </Flex> <QuotedMessageCompositionReply> <Flex container={true} justifyContent="space-between" margin={theme.common.margins.xs}> <Subtle>{(hasAttachments && window.i18n('mediaMessage')) || body}</Subtle> {hasImageAttachment && ( <Image alt={getAlt(firstImageAttachment)} attachment={firstImageAttachment} height={100} width={100} curveTopLeft={true} curveTopRight={true} curveBottomLeft={true} curveBottomRight={true} url={firstImageAttachment.thumbnail.objectUrl} /> )} {hasAudioAttachment && ( <SessionIcon iconType={SessionIconType.Microphone} iconSize={SessionIconSize.Huge} theme={theme} /> )} </Flex> </QuotedMessageCompositionReply> </QuotedMessageComposition> ); };