jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Manual download of attachments with no blurHash

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
stylesheets/_modules.scss
View File

@ -5021,11 +5021,17 @@ button.module-conversation-details__action-button {
align-items: center;
display: flex;
justify-content: center;
background-color: $color-gray-75;
border-radius: 48px;
height: 48px;
width: 48px;
@include light-theme {
background-color: $color-gray-65;
}
@include dark-theme {
background-color: $color-gray-75;
}
&:after {
content: '';
height: 17px;

8
ts/background.ts
View File

@ -326,7 +326,7 @@ type WhatIsThis = import('./window.d').WhatIsThis;
window.Events = {
getDeviceName: () => window.textsecure.storage.user.getDeviceName(),
getThemeSetting: () =>
getThemeSetting: (): 'light' | 'dark' | 'system' =>
window.storage.get(
'theme-setting',
window.platform === 'darwin' ? 'system' : 'light'
@ -751,6 +751,7 @@ type WhatIsThis = import('./window.d').WhatIsThis;
platform: window.platform,
i18n: window.i18n,
interactionMode: window.getInteractionMode(),
theme: window.Events.getThemeSetting(),
},
};
@ -2162,6 +2163,11 @@ type WhatIsThis = import('./window.d').WhatIsThis;
if (view) {
view.applyTheme();
}
const theme = window.Events.getThemeSetting();
window.reduxActions.user.userChanged({
theme: theme === 'system' ? window.systemTheme : theme,
});
}
const FIVE_MINUTES = 5 * 60 * 1000;

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;

14
ts/state/ducks/user.ts
View File

@ -4,7 +4,7 @@
import { trigger } from '../../shims/events';
import { NoopActionType } from './noop';
import { LocalizerType } from '../../types/Util';
import { LocalizerType, ThemeType } from '../../types/Util';
// State
@ -19,6 +19,7 @@ export type UserStateType = {
regionCode: string;
i18n: LocalizerType;
interactionMode: 'mouse' | 'keyboard';
theme: ThemeType;
};
// Actions
@ -31,6 +32,7 @@ type UserChangedActionType = {
ourNumber?: string;
regionCode?: string;
interactionMode?: 'mouse' | 'keyboard';
theme?: ThemeType;
};
};
@ -45,10 +47,11 @@ export const actions = {
function userChanged(attributes: {
interactionMode?: 'mouse' | 'keyboard';
ourConversationId: string;
ourNumber: string;
ourUuid: string;
regionCode: string;
ourConversationId?: string;
ourNumber?: string;
ourUuid?: string;
regionCode?: string;
theme?: ThemeType;
}): UserChangedActionType {
return {
type: 'USER_CHANGED',
@ -78,6 +81,7 @@ export function getEmptyState(): UserStateType {
regionCode: 'missing',
platform: 'missing',
interactionMode: 'mouse',
theme: ThemeType.light,
i18n: () => 'missing',
};
}

7
ts/state/selectors/user.ts
View File

@ -3,7 +3,7 @@
import { createSelector } from 'reselect';
import { LocalizerType } from '../../types/Util';
import { LocalizerType, ThemeType } from '../../types/Util';
import { StateType } from '../reducer';
import { UserStateType } from '../ducks/user';
@ -59,3 +59,8 @@ export const getTempPath = createSelector(
getUser,
(state: UserStateType): string => state.tempPath
);
export const getTheme = createSelector(
getUser,
(state: UserStateType): ThemeType => state.theme
);

3
ts/state/smart/TimelineItem.tsx
View File

@ -8,7 +8,7 @@ import { mapDispatchToProps } from '../actions';
import { StateType } from '../reducer';
import { TimelineItem } from '../../components/conversation/TimelineItem';
import { getIntl } from '../selectors/user';
import { getIntl, getTheme } from '../selectors/user';
import {
getMessageSelector,
getSelectedMessage,
@ -47,6 +47,7 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
isSelected,
renderContact,
i18n: getIntl(state),
theme: getTheme(state),
};
};

2
ts/types/Attachment.ts
View File

@ -170,7 +170,7 @@ export function isVideoAttachment(
}
export function hasNotDownloaded(attachment?: AttachmentType): boolean {
return Boolean(attachment && !attachment.url && attachment.blurHash);
return Boolean(attachment && !attachment.url);
}
export function hasVideoBlurHash(attachments?: Array<AttachmentType>): boolean {

5
ts/types/Util.ts
View File

@ -24,3 +24,8 @@ export type LocalizerType = (
key: string,
values?: Array<string | null> | ReplacementValuesType
) => string;
export enum ThemeType {
'light' = 'light',
'dark' = 'dark',
}