feat: release v0.0.1

dist/react/video-player/components/with-blur/index.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useEffect, useRef, useState } from "react";
+import styles from "./with-blur.module.scss";
+const WithBlur = ({ withBlur = false, onReady, children, ...props }) => {
+    const canvasRef = useRef(null);
+    const [videoElement, setVideoElement] = useState(null);
+    const handlePlayerReady = (player) => {
+        if (onReady)
+            onReady(player);
+        const videoEl = player
+            .el()
+            ?.querySelector("video");
+        setVideoElement(videoEl);
+    };
+    useEffect(() => {
+        if (!withBlur || !videoElement || !canvasRef.current)
+            return;
+        const video = videoElement;
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        let animationFrameId;
+        let isAnimating = false;
+        const updateCanvas = () => {
+            if (!isAnimating)
+                return;
+            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+            animationFrameId = requestAnimationFrame(updateCanvas);
+        };
+        const startAnimation = () => {
+            if (!isAnimating && video.videoWidth && video.videoHeight) {
+                isAnimating = true;
+                canvas.width = video.videoWidth;
+                canvas.height = video.videoHeight;
+                updateCanvas();
+            }
+        };
+        const stopAnimation = () => {
+            isAnimating = false;
+            cancelAnimationFrame(animationFrameId);
+        };
+        const handlePlay = startAnimation;
+        const handleLoadedData = startAnimation;
+        const handleSeeked = startAnimation;
+        const handleLoadedMetadata = startAnimation; // Добавлен обработчик
+        video.addEventListener("loadeddata", handleLoadedData);
+        video.addEventListener("loadedmetadata", handleLoadedMetadata); // Новый обработчик
+        video.addEventListener("play", handlePlay);
+        video.addEventListener("seeked", handleSeeked);
+        video.addEventListener("pause", stopAnimation);
+        video.addEventListener("ended", stopAnimation);
+        // Попробовать запустить сразу, если размеры уже известны
+        startAnimation();
+        return () => {
+            stopAnimation();
+            video.removeEventListener("loadeddata", handleLoadedData);
+            video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+            video.removeEventListener("play", handlePlay);
+            video.removeEventListener("seeked", handleSeeked);
+            video.removeEventListener("pause", stopAnimation);
+            video.removeEventListener("ended", stopAnimation);
+        };
+    }, [withBlur, videoElement]);
+    return (_jsxs("div", { className: styles.videoMain, children: [withBlur && _jsx("canvas", { ref: canvasRef, className: styles.videoBlur }), cloneElement(children, {
+                ...props,
+                onReady: handlePlayerReady,
+                classNames: withBlur ? ["with-blur"] : [],
+            })] }));
+};
+export default WithBlur;
+//# sourceMappingURL=index.js.map