46 lines
2.4 KiB
JavaScript
46 lines
2.4 KiB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
|
||
import React, { useCallback, useRef, useState } from "react";
|
||
import styles from "./with-mouse-events.module.scss";
|
||
export const WithMouseEvents = ({ children, onMouseEnter, onMouseLeave, onClick, onReady, ...props }) => {
|
||
const [player, setPlayer] = useState(null);
|
||
const mouseHoverTimeoutRef = useRef(null); // Реф для хранения таймера
|
||
const isHoveredRef = useRef(false); // Реф для отслеживания состояния наведения
|
||
const handlePlayer = useCallback((player) => {
|
||
setPlayer(player);
|
||
onReady && onReady(player);
|
||
}, []);
|
||
// Обработчик клика на область видео
|
||
const handleClick = useCallback((e) => {
|
||
if (onClick) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
onClick(player);
|
||
}
|
||
}, [onClick, player]);
|
||
// Обработчик наведения на видео
|
||
const handleMouseEnter = useCallback(() => {
|
||
// Устанавливаем флаг, что мышь наведена
|
||
isHoveredRef.current = true;
|
||
// Запускаем таймер на 1 секунды
|
||
mouseHoverTimeoutRef.current = setTimeout(() => {
|
||
// Проверяем, что курсор все еще находится на видео
|
||
if (isHoveredRef.current) {
|
||
onMouseEnter && onMouseEnter(player);
|
||
}
|
||
}, 1);
|
||
}, [onMouseEnter, player]);
|
||
// Обработчик убирания курсора с видео
|
||
const handleMouseLeave = useCallback(() => {
|
||
// Сбрасываем флаг, что мышь не наведена
|
||
isHoveredRef.current = false;
|
||
// Очищаем таймер, если курсор убран до его срабатывания
|
||
if (mouseHoverTimeoutRef.current) {
|
||
clearTimeout(mouseHoverTimeoutRef.current);
|
||
mouseHoverTimeoutRef.current = null;
|
||
}
|
||
// Останавливаем видео, если оно было запущено
|
||
onMouseLeave && onMouseLeave(player);
|
||
}, [onMouseLeave, player]);
|
||
return (_jsx("div", { className: styles.videoArea, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, children: React.cloneElement(children, { ...props, onReady: handlePlayer }) }));
|
||
};
|
||
//# sourceMappingURL=index.js.map
|