keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

fix: show loading state until image is decrypted and can be mounted

Browse Source
pull/3170/head
yougotwill 8 months ago
parent 45d1791cdf
commit 737dbd45c1
6 changed files with 148 additions and 72 deletions
Show Stats Download Patch File Download Diff File

83
ts/components/conversation/Image.tsx
Unescape Escape View File

@ -1,17 +1,20 @@
import classNames from 'classnames';
import { useCallback } from 'react';
import { useCallback, useEffect, useState } from 'react';
import styled from 'styled-components';
import { isNumber } from 'lodash';
import { useDisableDrag } from '../../hooks/useDisableDrag';
import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
import { AttachmentType, AttachmentTypeWithPath } from '../../types/Attachment';
import { Spinner } from '../loading';
import { MessageModelType } from '../../models/messageType';
import { MessageGenericAttachment } from './message/message-content/MessageGenericAttachment';
import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
type Props = {
alt: string;
attachment: AttachmentTypeWithPath | AttachmentType;
url: string | undefined; // url is undefined if the message is not visible yet
imageBroken?: boolean;
height?: number | string;
width?: number | string;
@ -26,10 +29,14 @@ type Props = {
forceSquare?: boolean;
dropShadow?: boolean;
attachmentIndex?: number;
direction?: MessageModelType;
highlight?: boolean;
onClick?: (attachment: AttachmentTypeWithPath | AttachmentType) => void;
onClickClose?: (attachment: AttachmentTypeWithPath | AttachmentType) => void;
onError?: () => void;
timestamp?: number;
};
const StyledOverlay = styled.div<Pick<Props, 'darkOverlay' | 'softCorners'>>`
@ -46,6 +53,7 @@ export const Image = (props: Props) => {
const {
alt,
attachment,
imageBroken,
closeButton,
darkOverlay,
height: _height,
@ -58,35 +66,78 @@ export const Image = (props: Props) => {
forceSquare,
dropShadow,
attachmentIndex,
direction,
highlight,
url,
width: _width,
timestamp,
} = props;
const disableDrag = useDisableDrag();
const { loading, urlToLoad } = useEncryptedFileFetch(
url,
attachment.contentType,
false,
timestamp
);
const { caption } = attachment || { caption: null };
let { pending } = attachment || { pending: true };
if (!url) {
// force pending to true if the url is undefined, so we show a loader while decrypting the attachemtn
pending = true;
}
const [pending, setPending] = useState<boolean>(attachment.pending || !url || true);
const [mounted, setMounted] = useState<boolean>(
(!loading || !pending) && urlToLoad === undefined
);
const canClick = onClick && !pending;
const role = canClick ? 'button' : undefined;
const { loading, urlToLoad } = useEncryptedFileFetch(url || '', attachment.contentType, false);
// data will be url if loading is finished and '' if not
const srcData = !loading ? urlToLoad : '';
const onErrorUrlFilterering = useCallback(() => {
if (!loading && !pending && !url && onError) {
if (mounted && url && urlToLoad === '' && onError) {
onError();
setPending(false);
}
}, [loading, pending, url, onError]);
}, [mounted, onError, url, urlToLoad]);
const width = isNumber(_width) ? `${_width}px` : _width;
const height = isNumber(_height) ? `${_height}px` : _height;
useEffect(() => {
if (mounted && url === '') {
setPending(false);
onErrorUrlFilterering();
window.log.debug(
`WIP: [Image] timestamp ${timestamp} fail url ${url !== '' ? url : 'empty'} urlToLoad ${urlToLoad !== '' ? urlToLoad : 'empty'} loading ${loading} pending ${pending} imageBroken ${imageBroken}`
);
}
if (mounted && imageBroken && urlToLoad === '') {
setPending(false);
onErrorUrlFilterering();
window.log.debug(
`WIP: [Image] timestamp ${timestamp} fail url ${url !== '' ? url : 'empty'} urlToLoad ${urlToLoad !== '' ? urlToLoad : 'empty'} loading ${loading} pending ${pending} imageBroken ${imageBroken}`
);
}
if (url) {
setPending(false);
setMounted(!loading && !pending);
window.log.debug(
`WIP: [Image] timestamp ${timestamp} success url ${url !== '' ? url : 'empty'} urlToLoad ${urlToLoad !== '' ? urlToLoad : 'empty'} loading ${loading} pending ${pending} imageBroken ${imageBroken}`
);
}
}, [imageBroken, loading, mounted, onErrorUrlFilterering, pending, timestamp, url, urlToLoad]);
if (mounted && imageBroken) {
return (
<MessageGenericAttachment
attachment={attachment as AttachmentTypeWithPath}
pending={false}
highlight={!!highlight}
selected={!!dropShadow} // dropshadow is selected
direction={direction}
/>
);
}
return (
<div
role={role}
@ -110,7 +161,7 @@ export const Image = (props: Props) => {
}}
data-attachmentindex={attachmentIndex}
>
{pending || loading ? (
{!mounted || loading || pending ? (
<div
className="module-image__loading-placeholder"
style={{
@ -140,7 +191,7 @@ export const Image = (props: Props) => {
width: forceSquare ? width : '',
height: forceSquare ? height : '',
}}
src={srcData}
src={urlToLoad}
onDragStart={disableDrag}
/>
)}
@ -169,7 +220,7 @@ export const Image = (props: Props) => {
className="module-image__close-button"
/>
) : null}
{!(pending || loading) && playIconOverlay ? (
{!pending && playIconOverlay ? (
<div className="module-image__play-overlay__circle">
<div className="module-image__play-overlay__icon" />
</div>

41
ts/components/conversation/ImageGrid.tsx
Unescape Escape View File

@ -10,13 +10,19 @@ import {
} from '../../types/Attachment';
import { useIsMessageVisible } from '../../contexts/isMessageVisibleContext';
import { useMessageSelected } from '../../state/selectors';
import {
useMessageDirection,
useMessageSelected,
useMessageTimestamp,
} from '../../state/selectors';
import { THUMBNAIL_SIDE } from '../../types/attachments/VisualAttachment';
import { Image } from './Image';
type Props = {
attachments: Array<AttachmentTypeWithPath>;
onError: () => void;
imageBroken: boolean;
highlight: boolean;
onClickAttachment?: (attachment: AttachmentTypeWithPath | AttachmentType) => void;
messageId?: string;
};
@ -33,22 +39,27 @@ const Row = (
renderedSize: number;
startIndex: number;
totalAttachmentsCount: number;
selected: boolean;
}
) => {
const {
attachments,
imageBroken,
highlight,
onError,
renderedSize,
startIndex,
onClickAttachment,
totalAttachmentsCount,
selected,
messageId,
} = props;
const isMessageVisible = useIsMessageVisible();
const moreMessagesOverlay = totalAttachmentsCount > 3;
const moreMessagesOverlayText = moreMessagesOverlay ? `+${totalAttachmentsCount - 3}` : undefined;
const selected = useMessageSelected(messageId);
const direction = useMessageDirection(messageId);
const timestamp = useMessageTimestamp(messageId);
return (
<>
{attachments.map((attachment, index) => {
@ -64,11 +75,15 @@ const Row = (
url={isMessageVisible ? getThumbnailUrl(attachment) : undefined}
attachmentIndex={startIndex + index}
onClick={onClickAttachment}
imageBroken={imageBroken}
highlight={highlight}
onError={onError}
softCorners={true}
darkOverlay={showOverlay}
overlayText={showOverlay ? moreMessagesOverlayText : undefined}
dropShadow={selected}
direction={direction}
timestamp={timestamp}
/>
);
})}
@ -77,9 +92,7 @@ const Row = (
};
export const ImageGrid = (props: Props) => {
const { attachments, onError, onClickAttachment, messageId } = props;
const selected = useMessageSelected(messageId);
const { attachments, imageBroken, highlight, onError, onClickAttachment, messageId } = props;
if (!attachments || !attachments.length) {
return null;
@ -90,12 +103,14 @@ export const ImageGrid = (props: Props) => {
<StyledImageGrid flexDirection={'row'}>
<Row
attachments={attachments.slice(0, 1)}
imageBroken={imageBroken}
highlight={highlight}
onError={onError}
onClickAttachment={onClickAttachment}
renderedSize={THUMBNAIL_SIDE}
startIndex={0}
totalAttachmentsCount={attachments.length}
selected={selected}
messageId={messageId}
/>
</StyledImageGrid>
);
@ -107,12 +122,14 @@ export const ImageGrid = (props: Props) => {
<StyledImageGrid flexDirection={'row'}>
<Row
attachments={attachments.slice(0, 2)}
imageBroken={imageBroken}
highlight={highlight}
onError={onError}
onClickAttachment={onClickAttachment}
renderedSize={THUMBNAIL_SIDE}
startIndex={0}
totalAttachmentsCount={attachments.length}
selected={selected}
messageId={messageId}
/>
</StyledImageGrid>
);
@ -125,23 +142,27 @@ export const ImageGrid = (props: Props) => {
<StyledImageGrid flexDirection={'row'}>
<Row
attachments={attachments.slice(0, 1)}
imageBroken={imageBroken}
highlight={highlight}
onError={onError}
onClickAttachment={onClickAttachment}
renderedSize={THUMBNAIL_SIDE}
startIndex={0}
totalAttachmentsCount={attachments.length}
selected={selected}
messageId={messageId}
/>
<StyledImageGrid flexDirection={'column'}>
<Row
attachments={attachments.slice(1, 3)}
imageBroken={imageBroken}
highlight={highlight}
onError={onError}
onClickAttachment={onClickAttachment}
renderedSize={columnImageSide}
startIndex={1}
totalAttachmentsCount={attachments.length}
selected={selected}
messageId={messageId}
/>
</StyledImageGrid>
</StyledImageGrid>

9
ts/components/conversation/message/message-content/MessageAttachment.tsx
Unescape Escape View File

@ -15,8 +15,6 @@ import {
import {
AttachmentType,
AttachmentTypeWithPath,
hasImage,
hasVideoScreenshot,
isAudio,
isImage,
isVideo,
@ -128,14 +126,12 @@ export const MessageAttachment = (props: Props) => {
return <ClickToTrustSender messageId={messageId} />;
}
if (
(isImage(attachments) && hasImage(attachments)) ||
(isVideo(attachments) && hasVideoScreenshot(attachments))
) {
if (isImage(attachments) || isVideo(attachments)) {
// we use the carousel in the detail view
if (isDetailView) {
return null;
}
return (
<MessageHighlighter highlight={highlight}>
<StyledImageGridContainer messageDirection={direction}>
@ -177,6 +173,7 @@ export const MessageAttachment = (props: Props) => {
return (
<MessageGenericAttachment
attachment={firstAttachment}
pending={firstAttachment.pending}
direction={direction}
highlight={highlight}
selected={selected}

8
ts/components/conversation/message/message-content/MessageContent.tsx
Unescape Escape View File

@ -21,7 +21,6 @@ import {
getShouldHighlightMessage,
} from '../../../../state/selectors/conversations';
import { useSelectedIsPrivate } from '../../../../state/selectors/selectedConversation';
import { canDisplayImagePreview } from '../../../../types/Attachment';
import { MessageAttachment } from './MessageAttachment';
import { MessageAvatar } from './MessageAvatar';
import { MessageHighlighter } from './MessageHighlighter';
@ -147,17 +146,12 @@ export const MessageContent = (props: Props) => {
return null;
}
const { direction, text, timestamp, serverTimestamp, previews, quote, attachments } =
contentProps;
const { direction, text, timestamp, serverTimestamp, previews, quote } = contentProps;
const hasContentBeforeAttachment = !isEmpty(previews) || !isEmpty(quote) || !isEmpty(text);
const toolTipTitle = moment(serverTimestamp || timestamp).format('llll');
window.log.debug(
`WIP: [MessageAttachment] ${props.messageId} timestamp ${timestamp} imageBroken ${imageBroken} display ${canDisplayImagePreview(attachments)} attachments.contentType ${attachments?.[0].contentType || 'none'}`
);
return (
<StyledMessageContent
className={classNames('module-message__container', `module-message__container--${direction}`)}

75
ts/hooks/useEncryptedFileFetch.ts
Unescape Escape View File

@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
import {
getAlreadyDecryptedMediaUrl,
@ -6,40 +6,55 @@ import {
} from '../session/crypto/DecryptedAttachmentsManager';
import { perfEnd, perfStart } from '../session/utils/Performance';
export const useEncryptedFileFetch = (url: string, contentType: string, isAvatar: boolean) => {
const [urlToLoad, setUrlToLoad] = useState('');
const [loading, setLoading] = useState(false);
const mountedRef = useRef(true);
export const useEncryptedFileFetch = (
url: string | undefined,
contentType: string,
isAvatar: boolean,
timestamp?: number
) => {
const [urlToLoad, setUrlToLoad] = useState<string | undefined>(undefined);
const [loading, setLoading] = useState(true);
const alreadyDecrypted = url ? getAlreadyDecryptedMediaUrl(url) : '';
const fetchUrl = useCallback(
async (mediaUrl: string | undefined) => {
if (alreadyDecrypted || !mediaUrl) {
window.log.debug(
`WIP: [Image] timestamp ${timestamp} alreadyDecrypted ${alreadyDecrypted !== '' ? alreadyDecrypted : 'empty'} mediaUrl ${mediaUrl !== '' ? mediaUrl : 'empty'}`
);
if (alreadyDecrypted) {
setUrlToLoad(alreadyDecrypted);
setLoading(false);
}
return;
}
const alreadyDecrypted = getAlreadyDecryptedMediaUrl(url);
setLoading(true);
useEffect(() => {
async function fetchUrl() {
perfStart(`getDecryptedMediaUrl-${url}`);
const decryptedUrl = await getDecryptedMediaUrl(url, contentType, isAvatar);
perfEnd(`getDecryptedMediaUrl-${url}`, `getDecryptedMediaUrl-${url}`);
try {
perfStart(`getDecryptedMediaUrl-${mediaUrl}`);
const decryptedUrl = await getDecryptedMediaUrl(mediaUrl, contentType, isAvatar);
perfEnd(`getDecryptedMediaUrl-${mediaUrl}`, `getDecryptedMediaUrl-${mediaUrl}`);
window.log.debug(
`WIP: [Image] timestamp ${timestamp} decryptedUrl ${decryptedUrl !== '' ? decryptedUrl : 'empty'}`
);
if (mountedRef.current) {
setUrlToLoad(decryptedUrl);
} catch (error) {
window.log.error(`WIP: [Image] timestamp ${timestamp} error ${error}`);
setUrlToLoad('');
} finally {
setLoading(false);
}
}
if (alreadyDecrypted) {
return;
}
setLoading(true);
mountedRef.current = true;
void fetchUrl();
// eslint-disable-next-line consistent-return
return () => {
mountedRef.current = false;
};
}, [url, alreadyDecrypted, contentType, isAvatar]);
if (alreadyDecrypted) {
return { urlToLoad: alreadyDecrypted, loading: false };
}
},
[alreadyDecrypted, contentType, isAvatar, timestamp]
);
useEffect(() => {
void fetchUrl(url);
}, [fetchUrl, url]);
return { urlToLoad, loading };
};

4
ts/session/crypto/DecryptedAttachmentsManager.ts
Unescape Escape View File

@ -10,7 +10,6 @@
*
*/
import path from 'path';
import { reject } from 'lodash';
import * as fse from 'fs-extra';
@ -114,7 +113,7 @@ export const getDecryptedMediaUrl = async (
urlToDecryptingPromise.set(
url,
new Promise(async resolve => {
new Promise(async (resolve, reject) => {
// window.log.debug('about to read and decrypt file :', url, path.isAbsolute(url));
try {
const absUrl = path.isAbsolute(url) ? url : getAbsoluteAttachmentPath(url);
@ -149,7 +148,6 @@ export const getDecryptedMediaUrl = async (
}
})
);
return urlToDecryptingPromise.get(url) as Promise<string>;
}
// Not sure what we got here. Just return the file.

Write Preview
Loading…
Cancel
Save