49 lines
1.9 KiB
JavaScript
49 lines
1.9 KiB
JavaScript
|
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
|