fix attachment pre-decrypting when out of view

pull/1884/head
audric 4 years ago
parent cdd11eee47
commit 1048042f7d

@ -12,7 +12,7 @@ import {
} from '../../types/Attachment';
import { Image } from './Image';
import { IsMessageVisibleContext } from './ReadableMessage';
import { IsMessageVisibleContext } from './message/MessageContent';
type Props = {
attachments: Array<AttachmentTypeWithPath>;

@ -1,5 +1,5 @@
import _, { noop } from 'lodash';
import React, { createContext, useCallback, useState } from 'react';
import React, { useCallback } from 'react';
import { InView } from 'react-intersection-observer';
import { useDispatch, useSelector } from 'react-redux';
import { getMessageById } from '../../data/data';
@ -42,14 +42,11 @@ const debouncedTriggerLoadMore = _.debounce(
100
);
export const IsMessageVisibleContext = createContext(false);
export const ReadableMessage = (props: ReadableMessageProps) => {
const { messageId, onContextMenu, className, receivedAt, isUnread } = props;
const isAppFocused = useSelector(getIsAppFocused);
const dispatch = useDispatch();
// onVisible={haveDoneFirstScrollProp ? onVisible : noop}
const selectedConversationKey = useSelector(getSelectedConversationKey);
const loadedMessagesLength = useSelector(getLoadedMessagesLength);
@ -59,8 +56,6 @@ export const ReadableMessage = (props: ReadableMessageProps) => {
const fetchingMore = useSelector(areMoreMessagesBeingFetched);
const shouldMarkReadWhenVisible = isUnread;
const [isMessageVisible, setMessageIsVisible] = useState(false);
const onVisible = useCallback(
// tslint:disable-next-line: cyclomatic-complexity
async (inView: boolean | Object) => {
@ -98,9 +93,6 @@ export const ReadableMessage = (props: ReadableMessageProps) => {
((inView as any).type === 'focus' && (inView as any).returnValue === true)) &&
isAppFocused
) {
if (isMessageVisible !== true) {
setMessageIsVisible(true);
}
if (shouldMarkReadWhenVisible) {
const found = await getMessageById(messageId);
@ -140,9 +132,7 @@ export const ReadableMessage = (props: ReadableMessageProps) => {
triggerOnce={false}
trackVisibility={true}
>
<IsMessageVisibleContext.Provider value={isMessageVisible}>
{props.children}
</IsMessageVisibleContext.Provider>
{props.children}
</InView>
);
};

@ -1,6 +1,7 @@
import classNames from 'classnames';
import moment from 'moment';
import React, { useCallback, useState } from 'react';
import React, { createContext, useCallback, useState } from 'react';
import { InView } from 'react-intersection-observer';
import { useSelector } from 'react-redux';
import _ from 'underscore';
import { MessageRenderingProps, QuoteClickOptions } from '../../../models/messageType';
@ -89,13 +90,27 @@ function onClickOnMessageInnerContainer(event: React.MouseEvent<HTMLDivElement>)
}
}
export const IsMessageVisibleContext = createContext(false);
export const MessageContent = (props: Props) => {
const contentProps = useSelector(state =>
getMessageContentSelectorProps(state as any, props.messageId)
);
const [isMessageVisible, setMessageIsVisible] = useState(false);
const [imageBroken, setImageBroken] = useState(false);
const onVisible = (inView: boolean | Object) => {
if (
inView === true ||
((inView as any).type === 'focus' && (inView as any).returnValue === true)
) {
if (isMessageVisible !== true) {
setMessageIsVisible(true);
}
}
};
const handleImageError = useCallback(() => {
setImageBroken(true);
}, [setImageBroken]);
@ -147,18 +162,28 @@ export const MessageContent = (props: Props) => {
onClick={onClickOnMessageInnerContainer}
title={toolTipTitle}
>
<MessageQuote messageId={props.messageId} onQuoteClick={props.onQuoteClick} />
<MessageAttachment
messageId={props.messageId}
imageBroken={imageBroken}
handleImageError={handleImageError}
/>
{hasContentAfterAttachmentAndQuote ? (
<Flex padding="10px">
<MessagePreview messageId={props.messageId} handleImageError={handleImageError} />
<MessageText messageId={props.messageId} />
</Flex>
) : null}
<InView
id={`inview-content-${props.messageId}`}
onChange={onVisible}
threshold={0}
rootMargin="500px 0px 500px 0px"
triggerOnce={false}
>
<IsMessageVisibleContext.Provider value={isMessageVisible}>
<MessageQuote messageId={props.messageId} onQuoteClick={props.onQuoteClick} />
<MessageAttachment
messageId={props.messageId}
imageBroken={imageBroken}
handleImageError={handleImageError}
/>
{hasContentAfterAttachmentAndQuote ? (
<Flex padding="10px">
<MessagePreview messageId={props.messageId} handleImageError={handleImageError} />
<MessageText messageId={props.messageId} />
</Flex>
) : null}
</IsMessageVisibleContext.Provider>
</InView>
</div>
);
};

Loading…
Cancel
Save