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.
100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
import React, { useCallback } from 'react';
|
|
import { Flex } from '../../basic/Flex';
|
|
import { SessionIcon, SessionIconButton } from '../icon';
|
|
import styled 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: var(--margins-md);
|
|
padding-inline-start: var(--margins-md);
|
|
`;
|
|
|
|
const QuotedMessageCompositionReply = styled.div`
|
|
background: var(--color-quote-bottom-bar-background);
|
|
border-radius: var(--margins-sm);
|
|
padding: var(--margins-xs);
|
|
box-shadow: var(--color-session-shadow);
|
|
margin: var(--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: var(--color-text);
|
|
`;
|
|
|
|
const ReplyingTo = styled.div`
|
|
color: var(--color-text);
|
|
`;
|
|
|
|
export const SessionQuotedMessageComposition = () => {
|
|
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>
|
|
<Flex
|
|
container={true}
|
|
justifyContent="space-between"
|
|
flexGrow={1}
|
|
margin={'var(--margins-xs)'}
|
|
>
|
|
<ReplyingTo>{window.i18n('replyingToMessage')}</ReplyingTo>
|
|
<SessionIconButton iconType="exit" iconSize={'small'} onClick={removeQuotedMessage} />
|
|
</Flex>
|
|
<QuotedMessageCompositionReply>
|
|
<Flex container={true} justifyContent="space-between" margin={'var(--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="microphone" iconSize="huge" />}
|
|
</Flex>
|
|
</QuotedMessageCompositionReply>
|
|
</QuotedMessageComposition>
|
|
);
|
|
};
|