37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { useLayoutEffect, useMemo, useRef } from '../lib/teact/teact';
|
|
|
|
import cycleRestrict from '../util/cycleRestrict';
|
|
import { MAX_WORKERS, requestMediaWorker } from '../util/launchMediaWorkers';
|
|
|
|
const RADIUS = 7;
|
|
|
|
let lastWorkerIndex = -1;
|
|
|
|
export default function useOffscreenCanvasBlur(
|
|
thumbData?: string, // data URI or blob URL
|
|
isDisabled = false,
|
|
radius = RADIUS,
|
|
) {
|
|
// eslint-disable-next-line no-null/no-null
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
const workerIndex = useMemo(() => cycleRestrict(MAX_WORKERS, ++lastWorkerIndex), []);
|
|
const offscreenRef = useRef<OffscreenCanvas>();
|
|
|
|
useLayoutEffect(() => {
|
|
if (!thumbData || isDisabled || offscreenRef.current) return;
|
|
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
|
|
offscreenRef.current = canvas.transferControlToOffscreen();
|
|
|
|
requestMediaWorker({
|
|
name: 'offscreen-canvas:blurThumb',
|
|
args: [offscreenRef.current, thumbData, radius],
|
|
transferables: [offscreenRef.current],
|
|
}, workerIndex);
|
|
}, [thumbData, isDisabled, radius, workerIndex]);
|
|
|
|
return canvasRef;
|
|
}
|