bigbuffet-rw/app/soapbox/features/ui/components/image-loader.tsx

166 lines
4 KiB
TypeScript
Raw Normal View History

import clsx from 'clsx';
import React from 'react';
2022-10-12 13:27:26 -07:00
import ZoomableImage from './zoomable-image';
2020-03-27 13:59:38 -07:00
2022-10-12 14:23:16 -07:00
type EventRemover = () => void;
2020-03-27 13:59:38 -07:00
2022-10-12 14:23:16 -07:00
interface IImageLoader {
alt?: string
src: string
previewSrc?: string
width?: number
height?: number
onClick?: React.MouseEventHandler
2022-10-12 14:23:16 -07:00
}
class ImageLoader extends React.PureComponent<IImageLoader> {
2020-03-27 13:59:38 -07:00
static defaultProps = {
alt: '',
width: null,
height: null,
};
state = {
loading: true,
error: false,
width: null,
2023-01-05 09:55:08 -08:00
};
2020-03-27 13:59:38 -07:00
2022-10-12 14:23:16 -07:00
removers: EventRemover[] = [];
canvas: HTMLCanvasElement | null = null;
_canvasContext: CanvasRenderingContext2D | null = null;
2020-03-27 13:59:38 -07:00
get canvasContext() {
if (!this.canvas) {
return null;
}
this._canvasContext = this._canvasContext || this.canvas.getContext('2d');
return this._canvasContext;
}
componentDidMount() {
2020-03-27 13:59:38 -07:00
this.loadImage(this.props);
}
2022-10-12 14:23:16 -07:00
componentDidUpdate(prevProps: IImageLoader) {
if (prevProps.src !== this.props.src) {
this.loadImage(this.props);
2020-03-27 13:59:38 -07:00
}
}
componentWillUnmount() {
2020-03-27 13:59:38 -07:00
this.removeEventListeners();
}
2022-10-12 14:23:16 -07:00
loadImage(props: IImageLoader) {
2020-03-27 13:59:38 -07:00
this.removeEventListeners();
this.setState({ loading: true, error: false });
Promise.all([
props.previewSrc && this.loadPreviewCanvas(props),
this.hasSize() && this.loadOriginalImage(props),
].filter(Boolean))
.then(() => {
this.setState({ loading: false, error: false });
this.clearPreviewCanvas();
})
.catch(() => this.setState({ loading: false, error: true }));
}
2022-10-12 14:23:16 -07:00
loadPreviewCanvas = ({ previewSrc, width, height }: IImageLoader) => new Promise<void>((resolve, reject) => {
2020-03-27 13:59:38 -07:00
const image = new Image();
const removeEventListeners = () => {
image.removeEventListener('error', handleError);
image.removeEventListener('load', handleLoad);
};
const handleError = () => {
removeEventListeners();
reject();
};
const handleLoad = () => {
removeEventListeners();
2022-10-12 14:23:16 -07:00
this.canvasContext?.drawImage(image, 0, 0, width || 0, height || 0);
2020-03-27 13:59:38 -07:00
resolve();
};
image.addEventListener('error', handleError);
image.addEventListener('load', handleLoad);
2022-10-12 14:23:16 -07:00
image.src = previewSrc || '';
2020-03-27 13:59:38 -07:00
this.removers.push(removeEventListeners);
2023-01-05 09:55:08 -08:00
});
2020-03-27 13:59:38 -07:00
clearPreviewCanvas() {
2022-10-12 14:23:16 -07:00
if (this.canvas && this.canvasContext) {
const { width, height } = this.canvas;
this.canvasContext.clearRect(0, 0, width, height);
}
2020-03-27 13:59:38 -07:00
}
2022-10-12 14:23:16 -07:00
loadOriginalImage = ({ src }: IImageLoader) => new Promise<void>((resolve, reject) => {
2020-03-27 13:59:38 -07:00
const image = new Image();
const removeEventListeners = () => {
image.removeEventListener('error', handleError);
image.removeEventListener('load', handleLoad);
};
const handleError = () => {
removeEventListeners();
reject();
};
const handleLoad = () => {
removeEventListeners();
resolve();
};
image.addEventListener('error', handleError);
image.addEventListener('load', handleLoad);
image.src = src;
this.removers.push(removeEventListeners);
});
removeEventListeners() {
2020-03-27 13:59:38 -07:00
this.removers.forEach(listeners => listeners());
this.removers = [];
}
hasSize() {
2020-03-27 13:59:38 -07:00
const { width, height } = this.props;
return typeof width === 'number' && typeof height === 'number';
}
2022-10-12 14:23:16 -07:00
setCanvasRef = (c: HTMLCanvasElement) => {
2020-03-27 13:59:38 -07:00
this.canvas = c;
if (c) this.setState({ width: c.offsetWidth });
2023-01-05 09:55:08 -08:00
};
2020-03-27 13:59:38 -07:00
render() {
2020-03-27 13:59:38 -07:00
const { alt, src, width, height, onClick } = this.props;
const { loading } = this.state;
const className = clsx('image-loader', {
2020-03-27 13:59:38 -07:00
'image-loader--loading': loading,
'image-loader--amorphous': !this.hasSize(),
});
return (
<div className={className}>
{loading ? (
<canvas
className='image-loader__preview-canvas'
ref={this.setCanvasRef}
width={width}
height={height}
/>
) : (
<ZoomableImage
alt={alt}
src={src}
onClick={onClick}
/>
)}
</div>
);
}
}
2022-10-12 14:23:16 -07:00
export default ImageLoader;