72 lines
3.1 KiB
JavaScript
72 lines
3.1 KiB
JavaScript
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
|