mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
fix: use StyledMessageHighlighter in MessageAttachment only when it is rendered
This commit is contained in:
parent
01ae43d7d0
commit
d888999543
2 changed files with 30 additions and 22 deletions
|
@ -31,6 +31,7 @@ import { LightBoxOptions } from '../../SessionConversation';
|
|||
import { ClickToTrustSender } from './ClickToTrustSender';
|
||||
import styled from 'styled-components';
|
||||
import classNames from 'classnames';
|
||||
import { StyledMessageHighlighter } from './MessageContent';
|
||||
|
||||
export type MessageAttachmentSelectorProps = Pick<
|
||||
MessageRenderingProps,
|
||||
|
@ -48,10 +49,13 @@ type Props = {
|
|||
messageId: string;
|
||||
imageBroken: boolean;
|
||||
handleImageError: () => void;
|
||||
highlight?: boolean;
|
||||
};
|
||||
// tslint:disable: use-simple-attributes
|
||||
|
||||
const StyledAttachmentContainer = styled.div<{ messageDirection: MessageModelType }>`
|
||||
const StyledAttachmentContainer = styled.div<{
|
||||
messageDirection: MessageModelType;
|
||||
}>`
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
@ -61,10 +65,11 @@ const StyledAttachmentContainer = styled.div<{ messageDirection: MessageModelTyp
|
|||
|
||||
// tslint:disable-next-line max-func-body-length cyclomatic-complexity
|
||||
export const MessageAttachment = (props: Props) => {
|
||||
const { messageId, imageBroken, handleImageError } = props;
|
||||
const { messageId, imageBroken, handleImageError, highlight = false } = props;
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const attachmentProps = useSelector(state => getMessageAttachmentProps(state as any, messageId));
|
||||
|
||||
const multiSelectMode = useSelector(isMessageSelectionMode);
|
||||
const onClickOnImageGrid = useCallback(
|
||||
(attachment: AttachmentTypeWithPath | AttachmentType) => {
|
||||
|
@ -116,6 +121,7 @@ export const MessageAttachment = (props: Props) => {
|
|||
if (!attachments || !attachments[0]) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const firstAttachment = attachments[0];
|
||||
const displayImage = canDisplayImage(attachments);
|
||||
|
||||
|
@ -130,18 +136,22 @@ export const MessageAttachment = (props: Props) => {
|
|||
(isVideo(attachments) && hasVideoScreenshot(attachments)))
|
||||
) {
|
||||
return (
|
||||
<StyledAttachmentContainer messageDirection={direction}>
|
||||
<ImageGrid
|
||||
attachments={attachments}
|
||||
onError={handleImageError}
|
||||
onClickAttachment={onClickOnImageGrid}
|
||||
/>
|
||||
</StyledAttachmentContainer>
|
||||
<StyledMessageHighlighter highlight={highlight}>
|
||||
<StyledAttachmentContainer messageDirection={direction}>
|
||||
<ImageGrid
|
||||
attachments={attachments}
|
||||
onError={handleImageError}
|
||||
onClickAttachment={onClickOnImageGrid}
|
||||
/>
|
||||
</StyledAttachmentContainer>
|
||||
</StyledMessageHighlighter>
|
||||
);
|
||||
}
|
||||
|
||||
if (!firstAttachment.pending && !firstAttachment.error && isAudio(attachments)) {
|
||||
return (
|
||||
<div
|
||||
<StyledMessageHighlighter
|
||||
highlight={highlight}
|
||||
role="main"
|
||||
onClick={(e: any) => {
|
||||
if (multiSelectMode) {
|
||||
|
@ -150,21 +160,20 @@ export const MessageAttachment = (props: Props) => {
|
|||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}}
|
||||
style={{ padding: 'var(--margins-xs) 0px' }}
|
||||
>
|
||||
<AudioPlayerWithEncryptedFile
|
||||
src={firstAttachment.url}
|
||||
contentType={firstAttachment.contentType}
|
||||
messageId={messageId}
|
||||
/>
|
||||
</div>
|
||||
</StyledMessageHighlighter>
|
||||
);
|
||||
}
|
||||
const { pending, fileName, fileSize, contentType } = firstAttachment;
|
||||
const extension = getExtensionForDisplay({ contentType, fileName });
|
||||
|
||||
return (
|
||||
<div className="module-message__generic-attachment">
|
||||
<StyledMessageHighlighter highlight={highlight} className="module-message__generic-attachment">
|
||||
{pending ? (
|
||||
<div className="module-message__generic-attachment__spinner-container">
|
||||
<Spinner size="small" />
|
||||
|
@ -200,7 +209,7 @@ export const MessageAttachment = (props: Props) => {
|
|||
{fileSize}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</StyledMessageHighlighter>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -62,7 +62,7 @@ const opacityAnimation = keyframes`
|
|||
}
|
||||
`;
|
||||
|
||||
const StyledMessageHighlighter = styled.div<{
|
||||
export const StyledMessageHighlighter = styled.div<{
|
||||
highlight: boolean;
|
||||
}>`
|
||||
${props =>
|
||||
|
@ -187,13 +187,12 @@ export const MessageContent = (props: Props) => {
|
|||
</StyledMessageOpaqueContent>
|
||||
)}
|
||||
{!isDeleted && (
|
||||
<StyledMessageHighlighter highlight={highlight}>
|
||||
<MessageAttachment
|
||||
messageId={props.messageId}
|
||||
imageBroken={imageBroken}
|
||||
handleImageError={handleImageError}
|
||||
/>
|
||||
</StyledMessageHighlighter>
|
||||
<MessageAttachment
|
||||
messageId={props.messageId}
|
||||
imageBroken={imageBroken}
|
||||
handleImageError={handleImageError}
|
||||
highlight={highlight}
|
||||
/>
|
||||
)}
|
||||
</IsMessageVisibleContext.Provider>
|
||||
</InView>
|
||||
|
|
Loading…
Reference in a new issue