55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import { useLayoutEffect, useMemo, useRef } from '../lib/teact/teact';
|
|
|
|
import { requestMutation } from '../lib/fasterdom/fasterdom';
|
|
import cycleRestrict from '../util/cycleRestrict';
|
|
import { preloadImage } from '../util/files';
|
|
import { MAX_WORKERS, requestMediaWorker } from '../util/launchMediaWorkers';
|
|
import useLastCallback from './useLastCallback';
|
|
|
|
const RADIUS_RATIO = 0.1; // Use 10% of the smallest dimension as the blur radius
|
|
|
|
let lastWorkerIndex = -1;
|
|
|
|
export default function useOffscreenCanvasBlur(
|
|
thumbData?: string, // data URI or blob URL
|
|
isDisabled = false,
|
|
) {
|
|
// eslint-disable-next-line no-null/no-null
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
const workerIndex = useMemo(() => cycleRestrict(MAX_WORKERS, ++lastWorkerIndex), []);
|
|
const offscreenRef = useRef<OffscreenCanvas>();
|
|
|
|
const blurThumb = useLastCallback(async (canvas: HTMLCanvasElement, uri: string) => {
|
|
const image = await preloadImage(uri);
|
|
if (!image) {
|
|
return;
|
|
}
|
|
|
|
requestMutation(() => {
|
|
canvas.width = image.width;
|
|
canvas.height = image.height;
|
|
|
|
offscreenRef.current = canvas.transferControlToOffscreen();
|
|
|
|
const radius = Math.ceil(Math.min(image.width, image.height) * RADIUS_RATIO);
|
|
|
|
requestMediaWorker({
|
|
name: 'offscreen-canvas:blurThumb',
|
|
args: [offscreenRef.current, uri, radius],
|
|
transferables: [offscreenRef.current],
|
|
}, workerIndex);
|
|
});
|
|
});
|
|
|
|
useLayoutEffect(() => {
|
|
if (!thumbData || isDisabled || offscreenRef.current) return;
|
|
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
|
|
blurThumb(canvas, thumbData);
|
|
}, [blurThumb, isDisabled, thumbData]);
|
|
|
|
return canvasRef;
|
|
}
|