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

Do not download media if in call

Browse source
This commit is contained in:
Josh Perez 2021-01-29 17:58:28 -05:00 • committed by GitHub
parent d22add261b
commit a096220990
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 274 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

19
ts/components/Spinner.tsx
View file

@ -17,18 +17,25 @@ export const SpinnerDirections = [
export type SpinnerDirection = typeof SpinnerDirections[number];
export type Props = {
moduleClassName?: string;
direction?: SpinnerDirection;
size?: string;
svgSize: SpinnerSvgSize;
direction?: SpinnerDirection;
};
export const Spinner = ({ size, svgSize, direction }: Props): JSX.Element => (
export const Spinner = ({
moduleClassName,
size,
svgSize,
direction,
}: Props): JSX.Element => (
<div
className={classNames(
'module-spinner__container',
`module-spinner__container--${svgSize}`,
direction ? `module-spinner__container--${direction}` : null,
direction ? `module-spinner__container--${svgSize}-${direction}` : null
direction ? `module-spinner__container--${svgSize}-${direction}` : null,
moduleClassName ? `${moduleClassName}__container` : null
)}
style={{
height: size,
@ -40,7 +47,8 @@ export const Spinner = ({ size, svgSize, direction }: Props): JSX.Element => (
'module-spinner__circle',
`module-spinner__circle--${svgSize}`,
direction ? `module-spinner__circle--${direction}` : null,
direction ? `module-spinner__circle--${svgSize}-${direction}` : null
direction ? `module-spinner__circle--${svgSize}-${direction}` : null,
moduleClassName ? `${moduleClassName}__circle` : null
)}
/>
<div
@ -48,7 +56,8 @@ export const Spinner = ({ size, svgSize, direction }: Props): JSX.Element => (
'module-spinner__arc',
`module-spinner__arc--${svgSize}`,
direction ? `module-spinner__arc--${direction}` : null,
direction ? `module-spinner__arc--${svgSize}-${direction}` : null
direction ? `module-spinner__arc--${svgSize}-${direction}` : null,
moduleClassName ? `${moduleClassName}__arc` : null
)}
/>
</div>

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

@ -121,6 +121,20 @@ story.add('Pending', () => {
return <Image {...props} />;
});
story.add('Pending w/blurhash', () => {
const props = createProps();
props.attachment.pending = true;
return (
<Image
{...props}
blurHash="LDA,FDBnm+I=p{tkIUI;~UkpELV]"
width={300}
height={400}
/>
);
});
story.add('Curved Corners', () => {
const props = createProps({
curveBottomLeft: true,
@ -176,6 +190,7 @@ story.add('Blurhash', () => {
return <Image {...props} />;
});
story.add('Missing Image', () => {
const defaultProps = createProps();
const props = {

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

@ -7,7 +7,7 @@ import { Blurhash } from 'react-blurhash';
import { Spinner } from '../Spinner';
import { LocalizerType } from '../../types/Util';
import { AttachmentType } from '../../types/Attachment';
import { AttachmentType, hasNotDownloaded } from '../../types/Attachment';
export type Props = {
alt: string;
@ -44,10 +44,10 @@ export type Props = {
export class Image extends React.Component<Props> {
private canClick() {
const { onClick, attachment, url } = this.props;
const { onClick, attachment, blurHash, url } = this.props;
const { pending } = attachment || { pending: true };
return Boolean(onClick && !pending && url);
return Boolean(onClick && !pending && (url || blurHash));
}
public handleClick = (event: React.MouseEvent): void => {
@ -87,6 +87,46 @@ export class Image extends React.Component<Props> {
}
};
public renderPending = (): JSX.Element => {
const { blurHash, height, i18n, width } = this.props;
if (blurHash) {
return (
<div className="module-image__download-pending">
<Blurhash
hash={blurHash}
width={width}
height={height}
style={{ display: 'block' }}
/>
<div className="module-image__download-pending--spinner-container">
<div
className="module-image__download-pending--spinner"
title={i18n('loading')}
>
<Spinner moduleClassName="module-image-spinner" svgSize="small" />
</div>
</div>
</div>
);
}
return (
<div
className="module-image__loading-placeholder"
style={{
height: `${height}px`,
width: `${width}px`,
lineHeight: `${height}px`,
textAlign: 'center',
}}
title={i18n('loading')}
>
<Spinner svgSize="normal" />
</div>
);
};
public render(): JSX.Element {
const {
alt,
@ -116,19 +156,20 @@ export class Image extends React.Component<Props> {
const { caption, pending } = attachment || { caption: null, pending: true };
const canClick = this.canClick();
const imgNotDownloaded = hasNotDownloaded(attachment);
const overlayClassName = classNames(
'module-image__border-overlay',
noBorder ? null : 'module-image__border-overlay--with-border',
canClick ? 'module-image__border-overlay--with-click-handler' : null,
curveTopLeft ? 'module-image--curved-top-left' : null,
curveTopRight ? 'module-image--curved-top-right' : null,
curveBottomLeft ? 'module-image--curved-bottom-left' : null,
curveBottomRight ? 'module-image--curved-bottom-right' : null,
smallCurveTopLeft ? 'module-image--small-curved-top-left' : null,
softCorners ? 'module-image--soft-corners' : null,
darkOverlay ? 'module-image__border-overlay--dark' : null
);
const overlayClassName = classNames('module-image__border-overlay', {
'module-image__border-overlay--with-border': !noBorder,
'module-image__border-overlay--with-click-handler': canClick,
'module-image--curved-top-left': curveTopLeft,
'module-image--curved-top-right': curveTopRight,
'module-image--curved-bottom-left': curveBottomLeft,
'module-image--curved-bottom-right': curveBottomRight,
'module-image--small-curved-top-left': smallCurveTopLeft,
'module-image--soft-corners': softCorners,
'module-image__border-overlay--dark': darkOverlay,
'module-image--not-downloaded': imgNotDownloaded,
});
const overlay = canClick ? (
// Not sure what this button does.
@ -139,7 +180,9 @@ export class Image extends React.Component<Props> {
onClick={this.handleClick}
onKeyDown={this.handleKeyDown}
tabIndex={tabIndex}
/>
>
{imgNotDownloaded ? <i /> : null}
</button>
) : null;
/* eslint-disable no-nested-ternary */
@ -157,18 +200,7 @@ export class Image extends React.Component<Props> {
)}
>
{pending ? (
<div
className="module-image__loading-placeholder"
style={{
height: `${height}px`,
width: `${width}px`,
lineHeight: `${height}px`,
textAlign: 'center',
}}
title={i18n('loading')}
>
<Spinner svgSize="normal" />
</div>
this.renderPending()
) : url ? (
<img
onError={onError}

1
ts/components/conversation/Message.stories.tsx
View file

@ -75,6 +75,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
isTapToView: overrideProps.isTapToView,
isTapToViewError: overrideProps.isTapToViewError,
isTapToViewExpired: overrideProps.isTapToViewExpired,
kickOffAttachmentDownload: action('kickOffAttachmentDownload'),
openConversation: action('openConversation'),
openLink: action('openLink'),
previews: overrideProps.previews || [],

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

@ -35,6 +35,8 @@ import {
getGridDimensions,
getImageDimensions,
hasImage,
hasNotDownloaded,
hasVideoBlurHash,
hasVideoScreenshot,
isAudio,
isImage,
@ -162,6 +164,10 @@ export type PropsActions = {
}) => void;
showContactModal: (contactId: string) => void;
kickOffAttachmentDownload: (options: {
attachment: AttachmentType;
messageId: string;
}) => void;
showVisualAttachment: (options: {
attachment: AttachmentType;
messageId: string;
@ -657,6 +663,7 @@ export class Message extends React.PureComponent<Props, State> {
direction,
i18n,
id,
kickOffAttachmentDownload,
quote,
showVisualAttachment,
isSticker,
@ -680,7 +687,8 @@ export class Message extends React.PureComponent<Props, State> {
displayImage &&
!imageBroken &&
((isImage(attachments) && hasImage(attachments)) ||
(isVideo(attachments) && hasVideoScreenshot(attachments)))
(isVideo(attachments) &&
(hasVideoBlurHash(attachments) || hasVideoScreenshot(attachments))))
) {
const prefix = isSticker ? 'sticker' : 'attachment';
const bottomOverlay = !isSticker && !collapseMetadata;
@ -713,7 +721,11 @@ export class Message extends React.PureComponent<Props, State> {
onError={this.handleImageError}
tabIndex={tabIndex}
onClick={attachment => {
showVisualAttachment({ attachment, messageId: id });
if (hasNotDownloaded(attachment)) {
kickOffAttachmentDownload({ attachment, messageId: id });
} else {
showVisualAttachment({ attachment, messageId: id });
}
}}
/>
</div>
@ -1517,7 +1529,8 @@ export class Message extends React.PureComponent<Props, State> {
return (
displayImage &&
((isImage(attachments) && hasImage(attachments)) ||
(isVideo(attachments) && hasVideoScreenshot(attachments)))
(isVideo(attachments) &&
(hasVideoBlurHash(attachments) || hasVideoScreenshot(attachments))))
);
}
@ -1922,6 +1935,7 @@ export class Message extends React.PureComponent<Props, State> {
id,
isTapToView,
isTapToViewExpired,
kickOffAttachmentDownload,
openConversation,
showContactDetail,
showVisualAttachment,
@ -1953,6 +1967,24 @@ export class Message extends React.PureComponent<Props, State> {
return;
}
if (
!imageBroken &&
attachments &&
attachments.length > 0 &&
!isAttachmentPending &&
(isImage(attachments) || isVideo(attachments)) &&
hasNotDownloaded(attachments[0])
) {
event.preventDefault();
event.stopPropagation();
const attachment = attachments[0];
kickOffAttachmentDownload({ attachment, messageId: id });
return;
}
if (
!imageBroken &&
attachments &&
@ -1960,7 +1992,8 @@ export class Message extends React.PureComponent<Props, State> {
!isAttachmentPending &&
canDisplayImage(attachments) &&
((isImage(attachments) && hasImage(attachments)) ||
(isVideo(attachments) && hasVideoScreenshot(attachments)))
(isVideo(attachments) &&
(hasVideoBlurHash(attachments) || hasVideoScreenshot(attachments))))
) {
event.preventDefault();
event.stopPropagation();

1
ts/components/conversation/MessageDetail.stories.tsx
View file

@ -33,6 +33,7 @@ const defaultMessage: MessageProps = {
i18n,
id: 'my-message',
interactionMode: 'keyboard',
kickOffAttachmentDownload: action('kickOffAttachmentDownload'),
openConversation: () => null,
openLink: () => null,
previews: [],

1
ts/components/conversation/Quote.stories.tsx
View file

@ -36,6 +36,7 @@ const defaultMessageProps: MessagesProps = {
i18n,
id: 'messageId',
interactionMode: 'keyboard',
kickOffAttachmentDownload: () => null,
openConversation: () => null,
openLink: () => null,
previews: [],

1
ts/components/conversation/Timeline.stories.tsx
View file

@ -231,6 +231,7 @@ const actions = () => ({
openConversation: action('openConversation'),
showContactDetail: action('showContactDetail'),
showContactModal: action('showContactModal'),
kickOffAttachmentDownload: action('kickOffAttachmentDownload'),
showVisualAttachment: action('showVisualAttachment'),
downloadAttachment: action('downloadAttachment'),
displayTapToViewMessage: action('displayTapToViewMessage'),

1
ts/components/conversation/TimelineItem.stories.tsx
View file

@ -45,6 +45,7 @@ const getDefaultProps = () => ({
retrySend: action('retrySend'),
deleteMessage: action('deleteMessage'),
deleteMessageForEveryone: action('deleteMessageForEveryone'),
kickOffAttachmentDownload: action('kickOffAttachmentDownload'),
showMessageDetail: action('showMessageDetail'),
openConversation: action('openConversation'),
showContactDetail: action('showContactDetail'),