Do not download media if in call

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

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}