fix attachments loading for avatar and exporting files
Audric Ackermann
4 years ago
parent
def03c8baa
commit
ed30be5334
@ -1,145 +1,128 @@
|
|||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
|
||||||
import { AvatarPlaceHolder, ClosedGroupAvatar } from './AvatarPlaceHolder';
|
import { AvatarPlaceHolder, ClosedGroupAvatar } from './AvatarPlaceHolder';
|
||||||
import { ConversationAvatar } from './session/usingClosedConversationDetails';
|
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;
|
avatarPath?: string;
|
||||||
name?: string; // display name, profileName or phoneNumber, whatever is set first
|
name?: string; // display name, profileName or phoneNumber, whatever is set first
|
||||||
pubkey?: string;
|
pubkey?: string;
|
||||||
size: number;
|
size: AvatarSize;
|
||||||
memberAvatars?: Array<ConversationAvatar>; // this is added by usingClosedConversationDetails
|
memberAvatars?: Array<ConversationAvatar>; // this is added by usingClosedConversationDetails
|
||||||
onAvatarClick?: () => void;
|
onAvatarClick?: () => void;
|
||||||
}
|
};
|
||||||
|
|
||||||
interface State {
|
const Identicon = (props: Props) => {
|
||||||
imageBroken: boolean;
|
const { size, name, pubkey } = props;
|
||||||
}
|
const userName = name || '0';
|
||||||
|
|
||||||
export class Avatar extends React.PureComponent<Props, State> {
|
return (
|
||||||
public handleImageErrorBound: () => void;
|
<AvatarPlaceHolder
|
||||||
public onAvatarClickBound: (e: any) => void;
|
diameter={size}
|
||||||
|
name={userName}
|
||||||
public constructor(props: Props) {
|
pubkey={pubkey}
|
||||||
super(props);
|
colors={['#5ff8b0', '#26cdb9', '#f3c615', '#fcac5a']}
|
||||||
|
borderColor={'#00000059'}
|
||||||
this.handleImageErrorBound = this.handleImageError.bind(this);
|
/>
|
||||||
this.onAvatarClickBound = this.onAvatarClick.bind(this);
|
);
|
||||||
|
};
|
||||||
this.state = {
|
|
||||||
imageBroken: false,
|
const NoImage = (props: {
|
||||||
};
|
memberAvatars?: Array<ConversationAvatar>;
|
||||||
}
|
name?: string;
|
||||||
|
pubkey?: string;
|
||||||
public handleImageError() {
|
size: AvatarSize;
|
||||||
window.log.warn(
|
}) => {
|
||||||
'Avatar: Image failed to load; failing over to placeholder'
|
const { memberAvatars, size } = props;
|
||||||
);
|
// if no image but we have conversations set for the group, renders group members avatars
|
||||||
this.setState({
|
if (memberAvatars) {
|
||||||
imageBroken: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
public renderIdenticon() {
|
|
||||||
const { size, name, pubkey } = this.props;
|
|
||||||
|
|
||||||
const userName = name || '0';
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AvatarPlaceHolder
|
<ClosedGroupAvatar
|
||||||
diameter={size}
|
size={size}
|
||||||
name={userName}
|
memberAvatars={memberAvatars}
|
||||||
pubkey={pubkey}
|
i18n={window.i18n}
|
||||||
colors={this.getAvatarColors()}
|
|
||||||
borderColor={this.getAvatarBorderColor()}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
public renderImage() {
|
return <Identicon {...props} />;
|
||||||
const { avatarPath, name } = this.props;
|
};
|
||||||
const { imageBroken } = this.state;
|
|
||||||
|
|
||||||
if (!avatarPath || imageBroken) {
|
const AvatarImage = (props: {
|
||||||
return null;
|
avatarPath?: string;
|
||||||
}
|
name?: string; // display name, profileName or phoneNumber, whatever is set first
|
||||||
|
imageBroken: boolean;
|
||||||
|
handleImageError: () => any;
|
||||||
|
}) => {
|
||||||
|
const { avatarPath, name, imageBroken, handleImageError } = props;
|
||||||
|
|
||||||
return (
|
if (!avatarPath || imageBroken) {
|
||||||
<img
|
return null;
|
||||||
onError={this.handleImageErrorBound}
|
|
||||||
alt={window.i18n('contactAvatarAlt', [name])}
|
|
||||||
src={avatarPath}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public renderNoImage() {
|
return (
|
||||||
const { memberAvatars, size } = this.props;
|
<img
|
||||||
// if no image but we have conversations set for the group, renders group members avatars
|
onError={handleImageError}
|
||||||
if (memberAvatars) {
|
alt={window.i18n('contactAvatarAlt', [name])}
|
||||||
return (
|
src={avatarPath}
|
||||||
<ClosedGroupAvatar
|
/>
|
||||||
size={size}
|
);
|
||||||
memberAvatars={memberAvatars}
|
};
|
||||||
i18n={window.i18n}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.renderIdenticon();
|
|
||||||
}
|
|
||||||
|
|
||||||
public render() {
|
export const Avatar = (props: Props) => {
|
||||||
const { avatarPath, size, memberAvatars } = this.props;
|
const { avatarPath, size, memberAvatars, name } = props;
|
||||||
const { imageBroken } = this.state;
|
const [imageBroken, setImageBroken] = useState(false);
|
||||||
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;
|
|
||||||
|
|
||||||
return (
|
const handleImageError = () => {
|
||||||
<div
|
window.log.warn(
|
||||||
className={classNames(
|
'Avatar: Image failed to load; failing over to placeholder'
|
||||||
'module-avatar',
|
|
||||||
`module-avatar--${size}`,
|
|
||||||
hasImage ? 'module-avatar--with-image' : 'module-avatar--no-image',
|
|
||||||
isClickable && 'module-avatar-clickable'
|
|
||||||
)}
|
|
||||||
onClick={e => {
|
|
||||||
this.onAvatarClickBound(e);
|
|
||||||
}}
|
|
||||||
role="button"
|
|
||||||
>
|
|
||||||
{hasImage ? this.renderImage() : this.renderNoImage()}
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
setImageBroken(true);
|
||||||
|
};
|
||||||
private onAvatarClick(e: any) {
|
|
||||||
if (this.props.onAvatarClick) {
|
// contentType is not important
|
||||||
e.stopPropagation();
|
const { urlToLoad } = useEncryptedFileFetch(avatarPath || '', '');
|
||||||
this.props.onAvatarClick();
|
|
||||||
}
|
const isClosedGroupAvatar = memberAvatars && memberAvatars.length;
|
||||||
}
|
const hasImage = urlToLoad && !imageBroken && !isClosedGroupAvatar;
|
||||||
|
|
||||||
private getAvatarColors(): Array<string> {
|
const isClickable = !!props.onAvatarClick;
|
||||||
// const theme = window.Events.getThemedSettings();
|
|
||||||
// defined in session-android as `profile_picture_placeholder_colors`
|
return (
|
||||||
return ['#5ff8b0', '#26cdb9', '#f3c615', '#fcac5a'];
|
<div
|
||||||
}
|
className={classNames(
|
||||||
|
'module-avatar',
|
||||||
private getAvatarBorderColor(): string {
|
`module-avatar--${size}`,
|
||||||
return '#00000059'; // borderAvatarColor in themes.scss
|
hasImage ? 'module-avatar--with-image' : 'module-avatar--no-image',
|
||||||
}
|
isClickable && 'module-avatar-clickable'
|
||||||
}
|
)}
|
||||||
|
onClick={e => {
|
||||||
|
e.stopPropagation();
|
||||||
|
props.onAvatarClick?.();
|
||||||
|
}}
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
{hasImage ? (
|
||||||
|
<AvatarImage
|
||||||
|
avatarPath={urlToLoad}
|
||||||
|
imageBroken={imageBroken}
|
||||||
|
name={name}
|
||||||
|
handleImageError={handleImageError}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<NoImage {...props} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|||||||
@ -1,4 +0,0 @@
|
|||||||
export function getTimestamp(asInt = false) {
|
|
||||||
const timestamp = Date.now() / 1000;
|
|
||||||
return asInt ? Math.floor(timestamp) : timestamp;
|
|
||||||
}
|
|
||||||
@ -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<string, string>();
|
||||||
|
|
||||||
|
export const getDecryptedAttachmentUrl = async (
|
||||||
|
url: string,
|
||||||
|
contentType: string
|
||||||
|
): Promise<string> => {
|
||||||
|
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
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue