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
|