From ed30be5334d9e071c772065172d6777003ef1cad Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 26 Mar 2021 15:24:56 +1100 Subject: [PATCH] fix attachments loading for avatar and exporting files --- app/attachments.js | 2 +- js/modules/types/visual_attachment.js | 82 ++----- ts/components/Avatar.tsx | 229 ++++++++---------- .../AvatarPlaceHolder/AvatarPlaceHolder.tsx | 173 ++++++------- .../AvatarPlaceHolder/ClosedGroupAvatar.tsx | 24 +- ts/components/ContactListItem.tsx | 4 +- ts/components/ConversationListItem.tsx | 5 +- ts/components/EditProfileDialog.tsx | 9 +- ts/components/Lightbox.tsx | 86 ++++--- ts/components/MessageSearchResult.tsx | 4 +- ts/components/UserDetailsDialog.tsx | 6 +- .../conversation/ConversationHeader.tsx | 4 +- ts/components/conversation/Message.tsx | 70 +++--- ts/components/conversation/MessageDetail.tsx | 4 +- .../conversation/UpdateGroupNameDialog.tsx | 4 +- ts/components/session/ActionsPanel.tsx | 4 +- .../session/SessionMemberListItem.tsx | 4 +- .../conversation/SessionConversation.tsx | 12 +- .../SessionConversationManager.tsx | 4 - .../session/conversation/SessionRecording.tsx | 7 +- .../conversation/SessionRightPanel.tsx | 38 +-- ts/hooks/useEncryptedFileFetch.ts | 43 +--- .../crypto/DecryptedAttachmentsManager.ts | 56 ++++- ts/session/crypto/index.ts | 3 +- ts/types/Attachment.ts | 13 - 25 files changed, 428 insertions(+), 462 deletions(-) delete mode 100644 ts/components/session/conversation/SessionConversationManager.tsx diff --git a/app/attachments.js b/app/attachments.js index fe18e7cdc..403049185 100644 --- a/app/attachments.js +++ b/app/attachments.js @@ -46,7 +46,7 @@ exports.createReader = root => { if (!isString(relativePath)) { throw new TypeError("'relativePath' must be a string"); } - console.time(`readFile: ${relativePath}`); + console.warn(`readFile: ${relativePath}`); const absolutePath = path.join(root, relativePath); const normalized = path.normalize(absolutePath); if (!normalized.startsWith(root)) { diff --git a/js/modules/types/visual_attachment.js b/js/modules/types/visual_attachment.js index cd46030d8..e57a8a13d 100644 --- a/js/modules/types/visual_attachment.js +++ b/js/modules/types/visual_attachment.js @@ -9,10 +9,9 @@ const dataURLToBlobSync = require('blueimp-canvas-to-blob'); const fse = require('fs-extra'); const { blobToArrayBuffer } = require('blob-util'); -const { - arrayBufferToObjectURL, -} = require('../../../ts/util/arrayBufferToObjectURL'); + const AttachmentTS = require('../../../ts/types/Attachment'); +const DecryptedAttachmentsManager = require('../../../ts/session/crypto/DecryptedAttachmentsManager'); exports.blobToArrayBuffer = blobToArrayBuffer; @@ -30,16 +29,12 @@ exports.getImageDimensions = ({ objectUrl, logger }) => logger.error('getImageDimensions error', toLogFormat(error)); reject(error); }); - fse.readFile(objectUrl).then(buffer => { - AttachmentTS.decryptAttachmentBuffer(toArrayBuffer(buffer)).then( - decryptedData => { - //FIXME image/jpeg is hard coded - const srcData = `data:image/jpg;base64,${window.libsession.Utils.StringUtils.fromArrayBufferToBase64( - toArrayBuffer(decryptedData) - )}`; - image.src = srcData; - } - ); + //FIXME image/jpeg is hard coded + DecryptedAttachmentsManager.getDecryptedAttachmentUrl( + objectUrl, + 'image/jpg' + ).then(decryptedUrl => { + image.src = decryptedUrl; }); }); @@ -85,16 +80,11 @@ exports.makeImageThumbnail = ({ reject(error); }); - fse.readFile(objectUrl).then(buffer => { - AttachmentTS.decryptAttachmentBuffer(toArrayBuffer(buffer)).then( - decryptedData => { - //FIXME image/jpeg is hard coded - const srcData = `data:image/jpg;base64,${window.libsession.Utils.StringUtils.fromArrayBufferToBase64( - toArrayBuffer(decryptedData) - )}`; - image.src = srcData; - } - ); + DecryptedAttachmentsManager.getDecryptedAttachmentUrl( + objectUrl, + contentType + ).then(decryptedUrl => { + image.src = decryptedUrl; }); }); @@ -128,44 +118,16 @@ exports.makeVideoScreenshot = ({ reject(error); }); - video.src = objectUrl; - video.muted = true; - // for some reason, this is to be started, otherwise the generated thumbnail will be empty - video.play(); - }); - -exports.makeVideoThumbnail = async ({ - size, - videoObjectUrl, - logger, - contentType, -}) => { - let screenshotObjectUrl; - try { - const blob = await exports.makeVideoScreenshot({ - objectUrl: videoObjectUrl, - contentType, - logger, - }); - const data = await blobToArrayBuffer(blob); - screenshotObjectUrl = arrayBufferToObjectURL({ - data, - type: contentType, + DecryptedAttachmentsManager.getDecryptedAttachmentUrl( + objectUrl, + 'image/jpg' + ).then(decryptedUrl => { + video.src = decryptedUrl; + video.muted = true; + // for some reason, this is to be started, otherwise the generated thumbnail will be empty + video.play(); }); - - // We need to wait for this, otherwise the finally below will run first - const resultBlob = await exports.makeImageThumbnail({ - size, - objectUrl: screenshotObjectUrl, - contentType, - logger, - }); - - return resultBlob; - } finally { - exports.revokeObjectUrl(screenshotObjectUrl); - } -}; + }); exports.makeObjectUrl = (data, contentType) => { const blob = new Blob([data], { diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx index f6249fb35..cc46b2db9 100644 --- a/ts/components/Avatar.tsx +++ b/ts/components/Avatar.tsx @@ -1,145 +1,128 @@ -import React from 'react'; +import React, { useState } from 'react'; import classNames from 'classnames'; import { AvatarPlaceHolder, ClosedGroupAvatar } from './AvatarPlaceHolder'; import { ConversationAvatar } from './session/usingClosedConversationDetails'; +import { useEncryptedFileFetch } from '../hooks/useEncryptedFileFetch'; + +export enum AvatarSize { + XS = 28, + S = 36, + M = 48, + L = 64, + XL = 80, + HUGE = 300, +} -interface Props { +type Props = { avatarPath?: string; name?: string; // display name, profileName or phoneNumber, whatever is set first pubkey?: string; - size: number; + size: AvatarSize; memberAvatars?: Array; // this is added by usingClosedConversationDetails onAvatarClick?: () => void; -} - -interface State { - imageBroken: boolean; -} - -export class Avatar extends React.PureComponent { - public handleImageErrorBound: () => void; - public onAvatarClickBound: (e: any) => void; - - public constructor(props: Props) { - super(props); - - this.handleImageErrorBound = this.handleImageError.bind(this); - this.onAvatarClickBound = this.onAvatarClick.bind(this); - - this.state = { - imageBroken: false, - }; - } - - public handleImageError() { - window.log.warn( - 'Avatar: Image failed to load; failing over to placeholder' - ); - this.setState({ - imageBroken: true, - }); - } - - public renderIdenticon() { - const { size, name, pubkey } = this.props; - - const userName = name || '0'; - +}; + +const Identicon = (props: Props) => { + const { size, name, pubkey } = props; + const userName = name || '0'; + + return ( + + ); +}; + +const NoImage = (props: { + memberAvatars?: Array; + name?: string; + pubkey?: string; + size: AvatarSize; +}) => { + const { memberAvatars, size } = props; + // if no image but we have conversations set for the group, renders group members avatars + if (memberAvatars) { return ( - ); } - public renderImage() { - const { avatarPath, name } = this.props; - const { imageBroken } = this.state; + return ; +}; - if (!avatarPath || imageBroken) { - return null; - } +const AvatarImage = (props: { + avatarPath?: string; + name?: string; // display name, profileName or phoneNumber, whatever is set first + imageBroken: boolean; + handleImageError: () => any; +}) => { + const { avatarPath, name, imageBroken, handleImageError } = props; - return ( - {window.i18n('contactAvatarAlt', - ); + if (!avatarPath || imageBroken) { + return null; } - public renderNoImage() { - const { memberAvatars, size } = this.props; - // if no image but we have conversations set for the group, renders group members avatars - if (memberAvatars) { - return ( - - ); - } - - return this.renderIdenticon(); - } + return ( + {window.i18n('contactAvatarAlt', + ); +}; - public render() { - const { avatarPath, size, memberAvatars } = this.props; - const { imageBroken } = this.state; - const isClosedGroupAvatar = memberAvatars && memberAvatars.length; - const hasImage = avatarPath && !imageBroken && !isClosedGroupAvatar; - - if ( - size !== 28 && - size !== 36 && - size !== 48 && - size !== 64 && - size !== 80 && - size !== 300 - ) { - throw new Error(`Size ${size} is not supported!`); - } - const isClickable = !!this.props.onAvatarClick; +export const Avatar = (props: Props) => { + const { avatarPath, size, memberAvatars, name } = props; + const [imageBroken, setImageBroken] = useState(false); - return ( -
{ - this.onAvatarClickBound(e); - }} - role="button" - > - {hasImage ? this.renderImage() : this.renderNoImage()} -
+ const handleImageError = () => { + window.log.warn( + 'Avatar: Image failed to load; failing over to placeholder' ); - } - - private onAvatarClick(e: any) { - if (this.props.onAvatarClick) { - e.stopPropagation(); - this.props.onAvatarClick(); - } - } - - private getAvatarColors(): Array { - // const theme = window.Events.getThemedSettings(); - // defined in session-android as `profile_picture_placeholder_colors` - return ['#5ff8b0', '#26cdb9', '#f3c615', '#fcac5a']; - } - - private getAvatarBorderColor(): string { - return '#00000059'; // borderAvatarColor in themes.scss - } -} + setImageBroken(true); + }; + + // contentType is not important + const { urlToLoad } = useEncryptedFileFetch(avatarPath || '', ''); + + const isClosedGroupAvatar = memberAvatars && memberAvatars.length; + const hasImage = urlToLoad && !imageBroken && !isClosedGroupAvatar; + + const isClickable = !!props.onAvatarClick; + + return ( +
{ + e.stopPropagation(); + props.onAvatarClick?.(); + }} + role="button" + > + {hasImage ? ( + + ) : ( + + )} +
+ ); +}; diff --git a/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx b/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx index 8e7d1e8fd..e8accab54 100644 --- a/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx +++ b/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx @@ -1,85 +1,47 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { getInitials } from '../../util/getInitials'; -interface Props { +type Props = { diameter: number; name: string; pubkey?: string; colors: Array; borderColor: string; -} - -interface State { - sha512Seed?: string; -} - -export class AvatarPlaceHolder extends React.PureComponent { - public constructor(props: Props) { - super(props); - - this.state = { - sha512Seed: undefined, - }; - } - - public componentDidMount() { - const { pubkey } = this.props; - if (pubkey) { - void this.sha512(pubkey).then((sha512Seed: string) => { - this.setState({ sha512Seed }); - }); - } - } - - public componentDidUpdate(prevProps: Props, prevState: State) { - const { pubkey, name } = this.props; - if (pubkey === prevProps.pubkey && name === prevProps.name) { +}; + +const sha512FromPubkey = async (pubkey: string): Promise => { + // tslint:disable-next-line: await-promise + const buf = await crypto.subtle.digest( + 'SHA-512', + new TextEncoder().encode(pubkey) + ); + + // tslint:disable: prefer-template restrict-plus-operands + return Array.prototype.map + .call(new Uint8Array(buf), (x: any) => ('00' + x.toString(16)).slice(-2)) + .join(''); +}; + +export const AvatarPlaceHolder = (props: Props) => { + const { borderColor, colors, pubkey, diameter, name } = props; + const [sha512Seed, setSha512Seed] = useState(undefined as string | undefined); + useEffect(() => { + if (!pubkey) { + setSha512Seed(undefined); return; } - - if (pubkey) { - void this.sha512(pubkey).then((sha512Seed: string) => { - this.setState({ sha512Seed }); - }); - } - } - - public render() { - const { borderColor, colors, diameter, name } = this.props; - const diameterWithoutBorder = diameter - 2; - const viewBox = `0 0 ${diameter} ${diameter}`; - const r = diameter / 2; - const rWithoutBorder = diameterWithoutBorder / 2; - - if (!this.state.sha512Seed) { - // return grey circle - return ( - - - - - - ); - } - - const initial = getInitials(name)?.toLocaleUpperCase() || '0'; - const fontSize = diameter * 0.5; - - // Generate the seed simulate the .hashCode as Java - const hash = parseInt(this.state.sha512Seed.substring(0, 12), 16) || 0; - - const bgColorIndex = hash % colors.length; - - const bgColor = colors[bgColorIndex]; - + void sha512FromPubkey(pubkey).then(sha => { + setSha512Seed(sha); + }); + }, [pubkey, name]); + + const diameterWithoutBorder = diameter - 2; + const viewBox = `0 0 ${diameter} ${diameter}`; + const r = diameter / 2; + const rWithoutBorder = diameterWithoutBorder / 2; + + if (!sha512Seed) { + // return grey circle return ( @@ -87,38 +49,51 @@ export class AvatarPlaceHolder extends React.PureComponent { cx={r} cy={r} r={rWithoutBorder} - fill={bgColor} + fill="#d2d2d3" shapeRendering="geometricPrecision" stroke={borderColor} strokeWidth="1" /> - - {initial} - ); } - private async sha512(str: string) { - // tslint:disable-next-line: await-promise - const buf = await crypto.subtle.digest( - 'SHA-512', - new TextEncoder().encode(str) - ); - - // tslint:disable: prefer-template restrict-plus-operands - return Array.prototype.map - .call(new Uint8Array(buf), (x: any) => ('00' + x.toString(16)).slice(-2)) - .join(''); - } -} + const initial = getInitials(name)?.toLocaleUpperCase() || '0'; + const fontSize = diameter * 0.5; + + // Generate the seed simulate the .hashCode as Java + const hash = parseInt(sha512Seed.substring(0, 12), 16) || 0; + + const bgColorIndex = hash % colors.length; + + const bgColor = colors[bgColorIndex]; + + return ( + + + + + {initial} + + + + ); +}; diff --git a/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx b/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx index 31a8b2fea..298543b36 100644 --- a/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx +++ b/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Avatar } from '../Avatar'; +import { Avatar, AvatarSize } from '../Avatar'; import { LocalizerType } from '../../types/Util'; import { ConversationAvatar } from '../session/usingClosedConversationDetails'; @@ -10,19 +10,19 @@ interface Props { } export class ClosedGroupAvatar extends React.PureComponent { - public getClosedGroupAvatarsSize(size: number) { + public getClosedGroupAvatarsSize(size: AvatarSize): AvatarSize { // Always use the size directly under the one requested switch (size) { - case 36: - return 28; - case 48: - return 36; - case 64: - return 48; - case 80: - return 64; - case 300: - return 80; + case AvatarSize.S: + return AvatarSize.XS; + case AvatarSize.M: + return AvatarSize.S; + case AvatarSize.L: + return AvatarSize.M; + case AvatarSize.XL: + return AvatarSize.L; + case AvatarSize.HUGE: + return AvatarSize.XL; default: throw new Error( `Invalid size request for closed group avatar: ${size}` diff --git a/ts/components/ContactListItem.tsx b/ts/components/ContactListItem.tsx index da3ae1a87..8780007e2 100644 --- a/ts/components/ContactListItem.tsx +++ b/ts/components/ContactListItem.tsx @@ -1,7 +1,7 @@ import React from 'react'; import classNames from 'classnames'; -import { Avatar } from './Avatar'; +import { Avatar, AvatarSize } from './Avatar'; import { Emojify } from './conversation/Emojify'; import { LocalizerType } from '../types/Util'; @@ -26,7 +26,7 @@ export class ContactListItem extends React.Component { ); diff --git a/ts/components/ConversationListItem.tsx b/ts/components/ConversationListItem.tsx index 643b5fa46..9165f8917 100644 --- a/ts/components/ConversationListItem.tsx +++ b/ts/components/ConversationListItem.tsx @@ -3,7 +3,7 @@ import classNames from 'classnames'; import { isEmpty } from 'lodash'; import { contextMenu } from 'react-contexify'; -import { Avatar } from './Avatar'; +import { Avatar, AvatarSize } from './Avatar'; import { MessageBody } from './conversation/MessageBody'; import { Timestamp } from './conversation/Timestamp'; import { ContactName } from './conversation/ContactName'; @@ -69,7 +69,6 @@ class ConversationListItem extends React.PureComponent { memberAvatars, } = this.props; - const iconSize = 36; const userName = name || profileName || phoneNumber; return ( @@ -77,7 +76,7 @@ class ConversationListItem extends React.PureComponent { diff --git a/ts/components/EditProfileDialog.tsx b/ts/components/EditProfileDialog.tsx index 31ac2404a..709209cc4 100644 --- a/ts/components/EditProfileDialog.tsx +++ b/ts/components/EditProfileDialog.tsx @@ -2,7 +2,7 @@ import React from 'react'; import classNames from 'classnames'; import { QRCode } from 'react-qr-svg'; -import { Avatar } from './Avatar'; +import { Avatar, AvatarSize } from './Avatar'; import { SessionButton, @@ -262,7 +262,12 @@ export class EditProfileDialog extends React.Component { const userName = profileName || pubkey; return ( - + ); } diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx index 4f4ed11bf..afecb0fbe 100644 --- a/ts/components/Lightbox.tsx +++ b/ts/components/Lightbox.tsx @@ -12,10 +12,10 @@ import { SessionIconType, } from './session/icon'; import { Flex } from './session/Flex'; -import { DefaultTheme, useTheme } from 'styled-components'; +import { DefaultTheme } from 'styled-components'; // useCss has some issues on our setup. so import it directly // tslint:disable-next-line: no-submodule-imports -import useKey from 'react-use/lib/useKey'; +import useUnmount from 'react-use/lib/useUnmount'; import { useEncryptedFileFetch } from '../hooks/useEncryptedFileFetch'; import { darkTheme } from '../state/ducks/SessionTheme'; @@ -208,23 +208,58 @@ export const LightboxObject = ({ contentType, videoRef, onObjectClick, - playVideo, }: { objectURL: string; contentType: MIME.MIMEType; videoRef: React.MutableRefObject; onObjectClick: (event: any) => any; - playVideo: () => void; }) => { const { urlToLoad } = useEncryptedFileFetch(objectURL, contentType); const isImageTypeSupported = GoogleChrome.isImageTypeSupported(contentType); + + const playVideo = () => { + if (!videoRef) { + return; + } + + const { current } = videoRef; + if (!current) { + return; + } + + if (current.paused) { + void current.play(); + } else { + current.pause(); + } + }; + + const pauseVideo = () => { + if (!videoRef) { + return; + } + + const { current } = videoRef; + if (current) { + current.pause(); + } + }; + + // auto play video on showing a video attachment + useUnmount(() => { + pauseVideo(); + }); + if (isImageTypeSupported) { - return {window.i18n('lightboxImageAlt')}; + return {window.i18n('lightboxImageAlt')}; } const isVideoTypeSupported = GoogleChrome.isVideoTypeSupported(contentType); if (isVideoTypeSupported) { + if (urlToLoad) { + playVideo(); + } return ( ); } @@ -264,23 +299,6 @@ export const Lightbox = (props: Props) => { const theme = darkTheme; const { caption, contentType, objectURL, onNext, onPrevious, onSave } = props; - const playVideo = () => { - if (!videoRef) { - return; - } - - const { current } = videoRef; - if (!current) { - return; - } - - if (current.paused) { - void current.play(); - } else { - current.pause(); - } - }; - const onObjectClick = (event: any) => { event.stopPropagation(); props.close?.(); @@ -293,21 +311,16 @@ export const Lightbox = (props: Props) => { props.close?.(); }; - // auto play video on showing a video attachment - useEffect(() => { - playVideo(); - }, []); - return ( -
+
-
+
{!is.undefined(contentType) ? ( { contentType={contentType} videoRef={videoRef} onObjectClick={onObjectClick} - playVideo={playVideo} /> ) : null} {caption ?
{caption}
: null} diff --git a/ts/components/MessageSearchResult.tsx b/ts/components/MessageSearchResult.tsx index cf556a5c6..83b3629f8 100644 --- a/ts/components/MessageSearchResult.tsx +++ b/ts/components/MessageSearchResult.tsx @@ -1,7 +1,7 @@ import React from 'react'; import classNames from 'classnames'; -import { Avatar } from './Avatar'; +import { Avatar, AvatarSize } from './Avatar'; import { MessageBodyHighlight } from './MessageBodyHighlight'; import { Timestamp } from './conversation/Timestamp'; import { ContactName } from './conversation/ContactName'; @@ -110,7 +110,7 @@ class MessageSearchResultInner extends React.PureComponent { ); diff --git a/ts/components/UserDetailsDialog.tsx b/ts/components/UserDetailsDialog.tsx index 70276c53d..0c998f4af 100644 --- a/ts/components/UserDetailsDialog.tsx +++ b/ts/components/UserDetailsDialog.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Avatar } from './Avatar'; +import { Avatar, AvatarSize } from './Avatar'; import { SessionModal } from './session/SessionModal'; import { @@ -63,7 +63,9 @@ export class UserDetailsDialog extends React.Component { private renderAvatar() { const { avatarPath, pubkey, profileName } = this.props; - const size = this.state.isEnlargedImageShown ? 300 : 80; + const size = this.state.isEnlargedImageShown + ? AvatarSize.HUGE + : AvatarSize.XL; const userName = profileName || pubkey; return ( diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx index c6a28b013..e2a8e0df1 100644 --- a/ts/components/conversation/ConversationHeader.tsx +++ b/ts/components/conversation/ConversationHeader.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Avatar } from '../Avatar'; +import { Avatar, AvatarSize } from '../Avatar'; import { SessionIconButton, @@ -185,7 +185,7 @@ class ConversationHeaderInner extends React.Component { { this.onAvatarClick(phoneNumber); }} diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index 81c41f9c8..0194513ee 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -1,7 +1,7 @@ import React from 'react'; import classNames from 'classnames'; -import { Avatar } from '../Avatar'; +import { Avatar, AvatarSize } from '../Avatar'; import { Spinner } from '../Spinner'; import { MessageBody } from './MessageBody'; import { ImageGrid } from './ImageGrid'; @@ -13,6 +13,42 @@ import { Quote } from './Quote'; import H5AudioPlayer from 'react-h5-audio-player'; // import 'react-h5-audio-player/lib/styles.css'; +const AudioPlayerWithEncryptedFile = (props: { + src: string; + contentType: string; +}) => { + const theme = useTheme(); + const { urlToLoad } = useEncryptedFileFetch(props.src, props.contentType); + return ( + + ), + pause: ( + + ), + }} + /> + ); +}; + import { canDisplayImage, getExtensionForDisplay, @@ -34,12 +70,14 @@ import _ from 'lodash'; import { animation, contextMenu, Item, Menu } from 'react-contexify'; import uuid from 'uuid'; import { InView } from 'react-intersection-observer'; -import { withTheme } from 'styled-components'; +import { useTheme, withTheme } from 'styled-components'; import { MessageMetadata } from './message/MessageMetadata'; import { PubKey } from '../../session/types'; import { ToastUtils, UserUtils } from '../../session/utils'; import { ConversationController } from '../../session/conversations'; import { MessageRegularProps } from '../../models/messageType'; +import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch'; +import src from 'redux-promise-middleware'; // Same as MIN_WIDTH in ImageGrid.tsx const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = 200; @@ -208,31 +246,9 @@ class MessageInner extends React.PureComponent { e.stopPropagation(); }} > - - ), - pause: ( - - ), - }} + contentType={firstAttachment.contentType} />
); @@ -499,7 +515,7 @@ class MessageInner extends React.PureComponent { { onShowUserDetails(authorPhoneNumber); }} diff --git a/ts/components/conversation/MessageDetail.tsx b/ts/components/conversation/MessageDetail.tsx index e30b984b4..540e2c0be 100644 --- a/ts/components/conversation/MessageDetail.tsx +++ b/ts/components/conversation/MessageDetail.tsx @@ -2,7 +2,7 @@ import React from 'react'; import classNames from 'classnames'; import moment from 'moment'; -import { Avatar } from '../Avatar'; +import { Avatar, AvatarSize } from '../Avatar'; import { ContactName } from './ContactName'; import { Message } from './Message'; import { MessageRegularProps } from '../../models/messageType'; @@ -39,7 +39,7 @@ export class MessageDetail extends React.Component { ); diff --git a/ts/components/conversation/UpdateGroupNameDialog.tsx b/ts/components/conversation/UpdateGroupNameDialog.tsx index f8edfce46..2fdcaded2 100644 --- a/ts/components/conversation/UpdateGroupNameDialog.tsx +++ b/ts/components/conversation/UpdateGroupNameDialog.tsx @@ -3,7 +3,7 @@ import classNames from 'classnames'; import { SessionModal } from '../session/SessionModal'; import { SessionButton, SessionButtonColor } from '../session/SessionButton'; -import { Avatar } from '../Avatar'; +import { Avatar, AvatarSize } from '../Avatar'; import { DefaultTheme, withTheme } from 'styled-components'; interface Props { @@ -178,7 +178,7 @@ class UpdateGroupNameDialogInner extends React.Component {
{ return ( { ); diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx index 57073b6e8..8cefd6486 100644 --- a/ts/components/session/conversation/SessionConversation.tsx +++ b/ts/components/session/conversation/SessionConversation.tsx @@ -34,6 +34,7 @@ import { getPubkeysInPublicConversation, } from '../../../data/data'; import autoBind from 'auto-bind'; +import { getDecryptedAttachmentUrl } from '../../../session/crypto/DecryptedAttachmentsManager'; interface State { // Message sending progress @@ -478,7 +479,7 @@ export class SessionConversation extends React.Component { replyToMessage: this.replyToMessage, showMessageDetails: this.showMessageDetails, onClickAttachment: this.onClickAttachment, - onDownloadAttachment: this.downloadAttachment, + onDownloadAttachment: this.saveAttachment, messageContainerRef: this.messageContainerRef, onDeleteSelectedMessages: this.deleteSelectedMessages, }; @@ -923,13 +924,13 @@ export class SessionConversation extends React.Component { this.setState({ lightBoxOptions: undefined }); }} selectedIndex={selectedIndex} - onSave={this.downloadAttachment} + onSave={this.saveAttachment} /> ); } // THIS DOES NOT DOWNLOAD ANYTHING! it just saves it where the user wants - private downloadAttachment({ + private async saveAttachment({ attachment, message, index, @@ -939,7 +940,10 @@ export class SessionConversation extends React.Component { index?: number; }) { const { getAbsoluteAttachmentPath } = window.Signal.Migrations; - + attachment.url = await getDecryptedAttachmentUrl( + attachment.url, + attachment.contentType + ); save({ attachment, document, diff --git a/ts/components/session/conversation/SessionConversationManager.tsx b/ts/components/session/conversation/SessionConversationManager.tsx deleted file mode 100644 index 1ccab06e3..000000000 --- a/ts/components/session/conversation/SessionConversationManager.tsx +++ /dev/null @@ -1,4 +0,0 @@ -export function getTimestamp(asInt = false) { - const timestamp = Date.now() / 1000; - return asInt ? Math.floor(timestamp) : timestamp; -} diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx index 61806d783..30e58352c 100644 --- a/ts/components/session/conversation/SessionRecording.tsx +++ b/ts/components/session/conversation/SessionRecording.tsx @@ -2,8 +2,6 @@ import React from 'react'; import classNames from 'classnames'; import moment from 'moment'; -import { getTimestamp } from './SessionConversationManager'; - import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon'; import { SessionButton, @@ -57,6 +55,11 @@ interface State { updateTimerInterval: NodeJS.Timeout; } +function getTimestamp(asInt = false) { + const timestamp = Date.now() / 1000; + return asInt ? Math.floor(timestamp) : timestamp; +} + class SessionRecordingInner extends React.Component { private readonly visualisationRef: React.RefObject; private readonly visualisationCanvas: React.RefObject; diff --git a/ts/components/session/conversation/SessionRightPanel.tsx b/ts/components/session/conversation/SessionRightPanel.tsx index 208311e9b..5cfc486d7 100644 --- a/ts/components/session/conversation/SessionRightPanel.tsx +++ b/ts/components/session/conversation/SessionRightPanel.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon'; -import { Avatar } from '../../Avatar'; +import { Avatar, AvatarSize } from '../../Avatar'; import { SessionButton, SessionButtonColor, @@ -21,6 +21,7 @@ import { getMessagesWithFileAttachments, getMessagesWithVisualMediaAttachments, } from '../../../data/data'; +import { getDecryptedAttachmentUrl } from '../../../session/crypto/DecryptedAttachmentsManager'; interface Props { id: string; @@ -159,8 +160,8 @@ class SessionRightPanel extends React.Component { ), thumbnailObjectUrl: thumbnail ? window.Signal.Migrations.getAbsoluteAttachmentPath( - thumbnail.path - ) + thumbnail.path + ) : null, contentType: attachment.contentType, index, @@ -193,21 +194,24 @@ class SessionRightPanel extends React.Component { } ); - const saveAttachment = ({ attachment, message }: any = {}) => { + const saveAttachment = async ({ attachment, message }: any = {}) => { const timestamp = message.received_at; - attachment.url = - save({ - attachment, - document, - getAbsolutePath: window.Signal.Migrations.getAbsoluteAttachmentPath, - timestamp, - }); + attachment.url = await getDecryptedAttachmentUrl( + attachment.url, + attachment.contentType + ); + save({ + attachment, + document, + getAbsolutePath: window.Signal.Migrations.getAbsoluteAttachmentPath, + timestamp, + }); }; const onItemClick = ({ message, attachment, type }: any) => { switch (type) { case 'documents': { - saveAttachment({ message, attachment }); + void saveAttachment({ message, attachment }); break; } @@ -259,10 +263,10 @@ class SessionRightPanel extends React.Component { const leaveGroupString = isPublic ? window.i18n('leaveGroup') : isKickedFromGroup - ? window.i18n('youGotKickedFromGroup') - : left - ? window.i18n('youLeftTheGroup') - : window.i18n('leaveGroup'); + ? window.i18n('youGotKickedFromGroup') + : left + ? window.i18n('youLeftTheGroup') + : window.i18n('leaveGroup'); const disappearingMessagesOptions = timerOptions.map(option => { return { @@ -391,7 +395,7 @@ class SessionRightPanel extends React.Component { diff --git a/ts/hooks/useEncryptedFileFetch.ts b/ts/hooks/useEncryptedFileFetch.ts index 42d55f054..2919ff9a5 100644 --- a/ts/hooks/useEncryptedFileFetch.ts +++ b/ts/hooks/useEncryptedFileFetch.ts @@ -1,9 +1,6 @@ import { useEffect, useState } from 'react'; -import toArrayBuffer from 'to-arraybuffer'; -import * as fse from 'fs-extra'; -import { decryptAttachmentBuffer } from '../types/Attachment'; -const urlToDecryptedBlobMap = new Map(); +import { getDecryptedAttachmentUrl } from '../session/crypto/DecryptedAttachmentsManager'; export const useEncryptedFileFetch = (url: string, contentType: string) => { // tslint:disable-next-line: no-bitwise @@ -11,42 +8,8 @@ export const useEncryptedFileFetch = (url: string, contentType: string) => { const [loading, setLoading] = useState(true); async function fetchUrl() { - if (url.startsWith('blob:')) { - setUrlToLoad(url); - } else if ( - window.Signal.Migrations.attachmentsPath && - url.startsWith(window.Signal.Migrations.attachmentsPath) - ) { - // this is a file encoded by session on our current attachments path. - // we consider the file is encrypted. - // if it's not, the hook caller has to fallback to setting the img src as an url to the file instead and load it - - if (urlToDecryptedBlobMap.has(url)) { - // typescript does not realize that the has above makes sure the get is not undefined - setUrlToLoad(urlToDecryptedBlobMap.get(url) as string); - } else { - const encryptedFileContent = await fse.readFile(url); - const decryptedContent = await decryptAttachmentBuffer( - toArrayBuffer(encryptedFileContent) - ); - if (decryptedContent?.length) { - const arrayBuffer = decryptedContent.buffer; - const { makeObjectUrl } = window.Signal.Types.VisualAttachment; - - const obj = makeObjectUrl(arrayBuffer, contentType); - if (!urlToDecryptedBlobMap.has(url)) { - urlToDecryptedBlobMap.set(url, obj); - } - setUrlToLoad(obj); - } else { - // failed to decrypt, fallback to url image loading - setUrlToLoad(url); - } - } - } else { - // already a blob. - setUrlToLoad(url); - } + const decryptedUrl = await getDecryptedAttachmentUrl(url, contentType); + setUrlToLoad(decryptedUrl); setLoading(false); } diff --git a/ts/session/crypto/DecryptedAttachmentsManager.ts b/ts/session/crypto/DecryptedAttachmentsManager.ts index cf75f1e81..681d4dd79 100644 --- a/ts/session/crypto/DecryptedAttachmentsManager.ts +++ b/ts/session/crypto/DecryptedAttachmentsManager.ts @@ -1,5 +1,59 @@ +/** + * This file handles attachments for us. + * If the attachment filepath is an encrypted one. It will decrypt it, cache it, and return the blob url to it. + */ +import toArrayBuffer from 'to-arraybuffer'; +import * as fse from 'fs-extra'; +import { decryptAttachmentBuffer } from '../../types/Attachment'; +// FIXME. +// add a way to clean those from time to time (like every hours?) +// add a way to remove the blob when the attachment file path is removed (message removed?) +const urlToDecryptedBlobMap = new Map(); +export const getDecryptedAttachmentUrl = async ( + url: string, + contentType: string +): Promise => { + if (!url) { + return url; + } + if (url.startsWith('blob:')) { + return url; + } else if ( + window.Signal.Migrations.attachmentsPath && + url.startsWith(window.Signal.Migrations.attachmentsPath) + ) { + // this is a file encoded by session on our current attachments path. + // we consider the file is encrypted. + // if it's not, the hook caller has to fallback to setting the img src as an url to the file instead and load it + console.warn('url:', url, ' has:', urlToDecryptedBlobMap.has(url)); + if (urlToDecryptedBlobMap.has(url)) { + // typescript does not realize that the has above makes sure the get is not undefined + return urlToDecryptedBlobMap.get(url) as string; + } else { + const encryptedFileContent = await fse.readFile(url); + const decryptedContent = await decryptAttachmentBuffer( + toArrayBuffer(encryptedFileContent) + ); + if (decryptedContent?.length) { + const arrayBuffer = decryptedContent.buffer; + const { makeObjectUrl } = window.Signal.Types.VisualAttachment; + const obj = makeObjectUrl(arrayBuffer, contentType); + console.warn('makeObjectUrl: ', obj, contentType); -export const getDecryptedUrl \ No newline at end of file + if (!urlToDecryptedBlobMap.has(url)) { + urlToDecryptedBlobMap.set(url, obj); + } + return obj; + } else { + // failed to decrypt, fallback to url image loading + return url; + } + } + } else { + // Not sure what we got here. Just return the file. + return url; + } +}; diff --git a/ts/session/crypto/index.ts b/ts/session/crypto/index.ts index 374b95f92..7b66ba36f 100644 --- a/ts/session/crypto/index.ts +++ b/ts/session/crypto/index.ts @@ -1,6 +1,7 @@ import * as MessageEncrypter from './MessageEncrypter'; +import * as DecryptedAttachmentsManager from './DecryptedAttachmentsManager'; -export { MessageEncrypter }; +export { MessageEncrypter, DecryptedAttachmentsManager }; // libsodium-wrappers requires the `require` call to work // tslint:disable-next-line: no-require-imports diff --git a/ts/types/Attachment.ts b/ts/types/Attachment.ts index 734ea656a..fa923d9c0 100644 --- a/ts/types/Attachment.ts +++ b/ts/types/Attachment.ts @@ -418,15 +418,11 @@ export const getFileExtension = ( return attachment.contentType.split('/')[1]; } }; -let indexEncrypt = 0; export const encryptAttachmentBuffer = async (bufferIn: ArrayBuffer) => { if (!isArrayBuffer(bufferIn)) { throw new TypeError("'bufferIn' must be an array buffer"); } - const ourIndex = indexEncrypt; - indexEncrypt++; - console.time(`timer #*. encryptAttachmentBuffer ${ourIndex}`); const uintArrayIn = new Uint8Array(bufferIn); const sodium = await getSodium(); @@ -457,13 +453,10 @@ export const encryptAttachmentBuffer = async (bufferIn: ArrayBuffer) => { ); encryptedBufferWithHeader.set(header); encryptedBufferWithHeader.set(bufferOut, header.length); - console.timeEnd(`timer #*. encryptAttachmentBuffer ${ourIndex}`); return { encryptedBufferWithHeader, header, key }; }; -let indexDecrypt = 0; - export const decryptAttachmentBuffer = async ( bufferIn: ArrayBuffer, key: string = '0c5f7147b6d3239cbb5a418814cee1bfca2df5c94bffddf22ee37eea3ede972b' @@ -471,9 +464,6 @@ export const decryptAttachmentBuffer = async ( if (!isArrayBuffer(bufferIn)) { throw new TypeError("'bufferIn' must be an array buffer"); } - const ourIndex = indexDecrypt; - indexDecrypt++; - console.time(`timer .*# decryptAttachmentBuffer ${ourIndex}`); const sodium = await getSodium(); const header = new Uint8Array( @@ -494,7 +484,6 @@ export const decryptAttachmentBuffer = async ( state, encryptedBuffer ); - console.timeEnd(`timer .*# decryptAttachmentBuffer ${ourIndex}`); // we expect the final tag to be there. If not, we might have an issue with this file // maybe not encrypted locally? if ( @@ -503,8 +492,6 @@ export const decryptAttachmentBuffer = async ( return messageTag.message; } } catch (e) { - console.timeEnd(`timer .*# decryptAttachmentBuffer ${ourIndex}`); - window.log.warn('Failed to load the file as an encrypted one', e); } return new Uint8Array();