You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.5 KiB
TypeScript
108 lines
3.5 KiB
TypeScript
import React, { useCallback } from 'react';
|
|
import { Flex } from '../../basic/Flex';
|
|
import { SessionIcon, SessionIconButton, SessionIconType } from '../icon';
|
|
import styled, { useTheme } from 'styled-components';
|
|
import { getAlt, isAudio } from '../../../types/Attachment';
|
|
import { Image } from '../../conversation/Image';
|
|
import { AUDIO_MP3 } from '../../../types/MIME';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { getQuotedMessage } from '../../../state/selectors/conversations';
|
|
import { quoteMessage } from '../../../state/ducks/conversations';
|
|
|
|
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 = () => {
|
|
const theme = useTheme();
|
|
const quotedMessageProps = useSelector(getQuotedMessage);
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
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);
|
|
|
|
const removeQuotedMessage = useCallback(() => {
|
|
dispatch(quoteMessage(undefined));
|
|
}, []);
|
|
|
|
if (!quotedMessageProps?.id) {
|
|
return null;
|
|
}
|
|
|
|
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={'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}
|
|
url={firstImageAttachment.thumbnail.objectUrl}
|
|
/>
|
|
)}
|
|
|
|
{hasAudioAttachment && (
|
|
<SessionIcon iconType={SessionIconType.Microphone} iconSize={'huge'} theme={theme} />
|
|
)}
|
|
</Flex>
|
|
</QuotedMessageCompositionReply>
|
|
</QuotedMessageComposition>
|
|
);
|
|
};
|