mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Manual download of attachments with no blurHash

Browse source
This commit is contained in:
Josh Perez 2021-02-11 20:50:11 -05:00 • committed by GitHub
parent ed786898fb
commit 34285054f6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 117 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

28
ts/components/conversation/Image.stories.tsx
View file

@ -10,6 +10,7 @@ import { storiesOf } from '@storybook/react';
import { pngUrl } from '../../storybook/Fixtures';
import { Image, Props } from './Image';
import { IMAGE_PNG } from '../../types/MIME';
import { ThemeType } from '../../types/Util';
import { setup as setupI18n } from '../../../js/modules/i18n';
import enMessages from '../../../_locales/en/messages.json';
@ -56,6 +57,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
),
softCorners: boolean('softCorners', overrideProps.softCorners || false),
tabIndex: number('tabIndex', overrideProps.tabIndex || 0),
theme: text('theme', overrideProps.theme || 'light') as ThemeType,
url: text('url', overrideProps.url || pngUrl),
width: number('width', overrideProps.width || 100),
});
@ -191,6 +193,32 @@ story.add('Blurhash', () => {
return <Image {...props} />;
});
story.add('undefined blurHash (light)', () => {
const defaultProps = createProps();
const props = {
...defaultProps,
blurHash: undefined,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
url: undefined as any,
theme: ThemeType.light,
};
return <Image {...props} />;
});
story.add('undefined blurHash (dark)', () => {
const defaultProps = createProps();
const props = {
...defaultProps,
blurHash: undefined,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
url: undefined as any,
theme: ThemeType.dark,
};
return <Image {...props} />;
});
story.add('Missing Image', () => {
const defaultProps = createProps();
const props = {

18
ts/components/conversation/Image.tsx
View file

@ -6,7 +6,7 @@ import classNames from 'classnames';
import { Blurhash } from 'react-blurhash';
import { Spinner } from '../Spinner';
import { LocalizerType } from '../../types/Util';
import { LocalizerType, ThemeType } from '../../types/Util';
import { AttachmentType, hasNotDownloaded } from '../../types/Attachment';
export type Props = {
@ -37,6 +37,7 @@ export type Props = {
blurHash?: string;
i18n: LocalizerType;
theme?: ThemeType;
onClick?: (attachment: AttachmentType) => void;
onClickClose?: (attachment: AttachmentType) => void;
onError?: () => void;
@ -44,10 +45,10 @@ export type Props = {
export class Image extends React.Component<Props> {
private canClick() {
const { onClick, attachment, blurHash, url } = this.props;
const { onClick, attachment } = this.props;
const { pending } = attachment || { pending: true };
return Boolean(onClick && !pending && (url || blurHash));
return Boolean(onClick && !pending);
}
public handleClick = (event: React.MouseEvent): void => {
@ -150,6 +151,7 @@ export class Image extends React.Component<Props> {
smallCurveTopLeft,
softCorners,
tabIndex,
theme,
url,
width = 0,
} = this.props;
@ -158,6 +160,12 @@ export class Image extends React.Component<Props> {
const canClick = this.canClick();
const imgNotDownloaded = hasNotDownloaded(attachment);
const defaulBlurHash =
theme === ThemeType.dark
? 'L05OQnoffQofoffQfQfQfQfQfQfQ'
: 'L1Q]+w-;fQ-;~qfQfQfQfQfQfQfQ';
const resolvedBlurHash = blurHash || defaulBlurHash;
const overlayClassName = classNames('module-image__border-overlay', {
'module-image__border-overlay--with-border': !noBorder,
'module-image__border-overlay--with-click-handler': canClick,
@ -210,9 +218,9 @@ export class Image extends React.Component<Props> {
width={width}
src={url}
/>
) : blurHash ? (
) : resolvedBlurHash ? (
<Blurhash
hash={blurHash}
hash={resolvedBlurHash}
width={width}
height={height}
style={{ display: 'block' }}

19
ts/components/conversation/ImageGrid.tsx
View file

@ -16,7 +16,7 @@ import {
import { Image } from './Image';
import { LocalizerType } from '../../types/Util';
import { LocalizerType, ThemeType } from '../../types/Util';
export type Props = {
attachments: Array<AttachmentType>;
@ -28,6 +28,7 @@ export type Props = {
tabIndex?: number;
i18n: LocalizerType;
theme?: ThemeType;
onError: () => void;
onClick?: (attachment: AttachmentType) => void;
@ -42,6 +43,7 @@ export const ImageGrid = ({
onError,
onClick,
tabIndex,
theme,
withContentAbove,
withContentBelow,
}: Props): JSX.Element | null => {
@ -75,6 +77,7 @@ export const ImageGrid = ({
<Image
alt={getAlt(attachments[0], i18n)}
i18n={i18n}
theme={theme}
blurHash={attachments[0].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={isSticker}
@ -102,6 +105,7 @@ export const ImageGrid = ({
<Image
alt={getAlt(attachments[0], i18n)}
i18n={i18n}
theme={theme}
attachment={attachments[0]}
blurHash={attachments[0].blurHash}
bottomOverlay={withBottomOverlay}
@ -118,6 +122,7 @@ export const ImageGrid = ({
<Image
alt={getAlt(attachments[1], i18n)}
i18n={i18n}
theme={theme}
blurHash={attachments[1].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={false}
@ -141,6 +146,7 @@ export const ImageGrid = ({
<Image
alt={getAlt(attachments[0], i18n)}
i18n={i18n}
theme={theme}
blurHash={attachments[0].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={false}
@ -158,6 +164,7 @@ export const ImageGrid = ({
<Image
alt={getAlt(attachments[1], i18n)}
i18n={i18n}
theme={theme}
blurHash={attachments[1].blurHash}
curveTopRight={curveTopRight}
height={99}
@ -171,6 +178,7 @@ export const ImageGrid = ({
<Image
alt={getAlt(attachments[2], i18n)}
i18n={i18n}
theme={theme}
blurHash={attachments[2].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={false}
@ -196,6 +204,7 @@ export const ImageGrid = ({
<Image
alt={getAlt(attachments[0], i18n)}
i18n={i18n}
theme={theme}
blurHash={attachments[0].blurHash}
curveTopLeft={curveTopLeft}
noBorder={false}
@ -210,6 +219,7 @@ export const ImageGrid = ({
<Image
alt={getAlt(attachments[1], i18n)}
i18n={i18n}
theme={theme}
blurHash={attachments[1].blurHash}
curveTopRight={curveTopRight}
playIconOverlay={isVideoAttachment(attachments[1])}
@ -226,6 +236,7 @@ export const ImageGrid = ({
<Image
alt={getAlt(attachments[2], i18n)}
i18n={i18n}
theme={theme}
blurHash={attachments[2].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={false}
@ -241,6 +252,7 @@ export const ImageGrid = ({
<Image
alt={getAlt(attachments[3], i18n)}
i18n={i18n}
theme={theme}
blurHash={attachments[3].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={false}
@ -271,6 +283,7 @@ export const ImageGrid = ({
<Image
alt={getAlt(attachments[0], i18n)}
i18n={i18n}
theme={theme}
blurHash={attachments[0].blurHash}
curveTopLeft={curveTopLeft}
attachment={attachments[0]}
@ -284,6 +297,7 @@ export const ImageGrid = ({
<Image
alt={getAlt(attachments[1], i18n)}
i18n={i18n}
theme={theme}
blurHash={attachments[1].blurHash}
curveTopRight={curveTopRight}
playIconOverlay={isVideoAttachment(attachments[1])}
@ -299,6 +313,7 @@ export const ImageGrid = ({
<Image
alt={getAlt(attachments[2], i18n)}
i18n={i18n}
theme={theme}
blurHash={attachments[2].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={isSticker}
@ -314,6 +329,7 @@ export const ImageGrid = ({
<Image
alt={getAlt(attachments[3], i18n)}
i18n={i18n}
theme={theme}
blurHash={attachments[3].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={isSticker}
@ -328,6 +344,7 @@ export const ImageGrid = ({
<Image
alt={getAlt(attachments[4], i18n)}
i18n={i18n}
theme={theme}
blurHash={attachments[4].blurHash}
bottomOverlay={withBottomOverlay}
noBorder={isSticker}

29
ts/components/conversation/Message.tsx
View file

@ -36,7 +36,6 @@ import {
getImageDimensions,
hasImage,
hasNotDownloaded,
hasVideoBlurHash,
hasVideoScreenshot,
isAudio,
isImage,
@ -47,7 +46,7 @@ import { ContactType } from '../../types/Contact';
import { getIncrement } from '../../util/timer';
import { isFileDangerous } from '../../util/isFileDangerous';
import { BodyRangesType, LocalizerType } from '../../types/Util';
import { BodyRangesType, LocalizerType, ThemeType } from '../../types/Util';
import { ColorType } from '../../types/Colors';
import { createRefMerger } from '../_util';
import { emojiToData } from '../emoji/lib';
@ -141,6 +140,7 @@ export type PropsData = {
export type PropsHousekeeping = {
i18n: LocalizerType;
theme?: ThemeType;
disableMenu?: boolean;
disableScroll?: boolean;
collapseMetadata?: boolean;
@ -675,7 +675,9 @@ export class Message extends React.PureComponent<Props, State> {
showVisualAttachment,
isSticker,
text,
theme,
} = this.props;
const { imageBroken } = this.state;
if (!attachments || !attachments[0]) {
@ -693,9 +695,7 @@ export class Message extends React.PureComponent<Props, State> {
if (
displayImage &&
!imageBroken &&
((isImage(attachments) && hasImage(attachments)) ||
(isVideo(attachments) &&
(hasVideoBlurHash(attachments) || hasVideoScreenshot(attachments))))
(isImage(attachments) || isVideo(attachments))
) {
const prefix = isSticker ? 'sticker' : 'attachment';
const bottomOverlay = !isSticker && !collapseMetadata;
@ -725,6 +725,7 @@ export class Message extends React.PureComponent<Props, State> {
stickerSize={STICKER_SIZE}
bottomOverlay={bottomOverlay}
i18n={i18n}
theme={theme}
onError={this.handleImageError}
tabIndex={tabIndex}
onClick={attachment => {
@ -783,7 +784,11 @@ export class Message extends React.PureComponent<Props, State> {
event.stopPropagation();
event.preventDefault();
if (!firstAttachment.url) {
if (hasNotDownloaded(firstAttachment)) {
kickOffAttachmentDownload({
attachment: firstAttachment,
messageId: id,
});
return;
}
@ -841,6 +846,7 @@ export class Message extends React.PureComponent<Props, State> {
openLink,
previews,
quote,
theme,
} = this.props;
// Attachments take precedence over Link Previews
@ -885,6 +891,7 @@ export class Message extends React.PureComponent<Props, State> {
withContentBelow
onError={this.handleImageError}
i18n={i18n}
theme={theme}
/>
) : null}
<div className="module-message__link-preview__content">
@ -1546,12 +1553,7 @@ export class Message extends React.PureComponent<Props, State> {
if (attachments && attachments.length) {
const displayImage = canDisplayImage(attachments);
return (
displayImage &&
((isImage(attachments) && hasImage(attachments)) ||
(isVideo(attachments) &&
(hasVideoBlurHash(attachments) || hasVideoScreenshot(attachments))))
);
return displayImage && (isImage(attachments) || isVideo(attachments));
}
if (previews && previews.length) {
@ -2012,8 +2014,7 @@ export class Message extends React.PureComponent<Props, State> {
!isAttachmentPending &&
canDisplayImage(attachments) &&
((isImage(attachments) && hasImage(attachments)) ||
(isVideo(attachments) &&
(hasVideoBlurHash(attachments) || hasVideoScreenshot(attachments))))
(isVideo(attachments) && hasVideoScreenshot(attachments)))
) {
event.preventDefault();
event.stopPropagation();

8
ts/components/conversation/TimelineItem.tsx
View file

@ -2,7 +2,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { LocalizerType } from '../../types/Util';
import { LocalizerType, ThemeType } from '../../types/Util';
import {
Message,
@ -126,6 +126,7 @@ type PropsLocalType = {
selectMessage: (messageId: string, conversationId: string) => unknown;
renderContact: SmartContactRendererType;
i18n: LocalizerType;
theme?: ThemeType;
};
type PropsActionsType = MessageActionsType &
@ -145,6 +146,7 @@ export class TimelineItem extends React.PureComponent<PropsType> {
isSelected,
item,
i18n,
theme,
messageSizeChanged,
renderContact,
returnToActiveCall,
@ -159,7 +161,9 @@ export class TimelineItem extends React.PureComponent<PropsType> {
}
if (item.type === 'message') {
return <Message {...this.props} {...item.data} i18n={i18n} />;
return (
<Message {...this.props} {...item.data} i18n={i18n} theme={theme} />
);
}
let notification;