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