Merge branch 'dev' into ripple-editing

1 files changed, 47 insertions, 0 deletions

diff --git a/apps/web/src/hooks/use-effect-preview.ts b/apps/web/src/hooks/use-effect-preview.ts
new file mode 100644
index 00000000..a84781e0
--- /dev/null
+++ b/apps/web/src/hooks/use-effect-preview.ts
@@ -0,0 +1,47 @@
+import { useEffect, useRef } from "react";
+import { effectPreviewService } from "@/services/renderer/effect-preview";
+import type { EffectParamValues } from "@/types/effects";
+
+export function useEffectPreview({
+	effectType,
+	params,
+	canvasRef,
+	isActive,
+}: {
+	effectType: string;
+	params: EffectParamValues;
+	canvasRef: React.RefObject<HTMLCanvasElement | null>;
+	isActive: boolean;
+}): void {
+	const requestRef = useRef<number>(0);
+
+	useEffect(() => {
+		if (!isActive) {
+			if (requestRef.current) {
+				cancelAnimationFrame(requestRef.current);
+				requestRef.current = 0;
+			}
+			return;
+		}
+
+		const loop = (): void => {
+			const canvas = canvasRef.current;
+			if (canvas) {
+				effectPreviewService.renderPreview({
+					effectType,
+					params,
+					targetCanvas: canvas,
+				});
+			}
+			requestRef.current = requestAnimationFrame(loop);
+		};
+
+		requestRef.current = requestAnimationFrame(loop);
+
+		return () => {
+			if (requestRef.current) {
+				cancelAnimationFrame(requestRef.current);
+			}
+		};
+	}, [effectType, params, canvasRef, isActive]);
+}