feat: release v0.0.1

dist/react/video-player/components/with-blur/index.d.ts

@@ -0,0 +1,7 @@
+import { IWithObservationProps } from "../with-observation";
+export interface IWithBlurVideoPlayerProps extends IWithObservationProps {
+    withBlur?: boolean;
+}
+declare const WithBlur: ({ withBlur, onReady, children, ...props }: IWithBlurVideoPlayerProps) => import("react/jsx-runtime").JSX.Element;
+export default WithBlur;
+//# sourceMappingURL=index.d.ts.map

dist/react/video-player/components/with-blur/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react/video-player/components/with-blur/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAG5D,MAAM,WAAW,yBAA0B,SAAQ,qBAAqB;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,QAAQ,GAAI,2CAKf,yBAAyB,4CAiF3B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/react/video-player/components/with-blur/index.tsx"],"names":[],"mappings":"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"}

dist/react/video-player/components/with-blur/with-blur.css

@@ -0,0 +1,9 @@
+.video-js {
+	&.its-blur {
+		background-color: transparent;
+	}
+	&.with-blur {
+		background-color: transparent;
+		z-index: 2;
+	}
+}

dist/react/video-player/components/with-blur/with-blur.module.scss

@@ -0,0 +1,22 @@
+.videoMain {
+	max-width: 100%;
+	overflow: hidden;
+	object-fit: cover;
+	position: relative;
+	width: 100%;
+	justify-content: center;
+	align-items: center;
+	// max-height: 757px;
+}
+.videoBlur {
+	position: absolute;
+	left: 0;
+	object-position: center;
+	z-index: 1;
+	overflow: hidden;
+	width: 100%;
+	max-width: 100%;
+	height: 100%;
+	object-fit: cover;
+	filter: blur(40px);
+}