feat: release v0.0.1

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

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./with-lazy.module.scss";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import PlayerExtension from "../player-extension";
+import { debounce, throttle } from "lodash";
+const WithLazy = ({ lazy = false, children, onShow, ...props }) => {
+    const containerRef = useRef(null);
+    const [visible, setIsVisible] = useState(true);
+    const show = useCallback((player) => {
+        if (!visible) {
+            setIsVisible(true);
+            onShow && onShow(player);
+        }
+    }, [onShow, visible]);
+    // Debounce для задержки выгрузки видео
+    const debouncedHide = useCallback(debounce(() => {
+        visible && setIsVisible(false);
+    }, 5000), // задержка в миллисекундах
+    [visible]);
+    // Throttle для обработки видимости
+    const handleVisibility = throttle((entry) => {
+        debouncedHide.cancel();
+        if (entry.isIntersecting && !visible) {
+            setIsVisible(true);
+            show(null);
+        }
+        else if (!entry.isIntersecting && visible) {
+            debouncedHide();
+        }
+    }, 200);
+    useEffect(() => {
+        const container = containerRef.current;
+        const observer = new IntersectionObserver(([entry]) => handleVisibility(entry), {
+            threshold: 0,
+        });
+        if (container && lazy) {
+            observer.observe(container);
+        }
+        return () => {
+            if (container) {
+                observer.unobserve(container);
+            }
+            handleVisibility.cancel();
+        };
+    }, [handleVisibility, lazy]);
+    return (_jsx(PlayerExtension, { className: styles.lazyHolder, conteinerRef: containerRef, children: visible && React.cloneElement(children, { ...props, onShow }) }));
+};
+export default WithLazy;
+//# sourceMappingURL=index.js.map