74 lines
2.9 KiB
JavaScript
74 lines
2.9 KiB
JavaScript
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
||
|
|
import { cloneElement, useEffect, useRef, useState, } from "react";
|
||
|
|
import { isMobile } from "react-device-detect";
|
||
|
|
import PlayerExtension from "../player-extension";
|
||
|
|
const HOVER_DELAY = 350; // milliseconds
|
||
|
|
const WithCover = ({ cover, children, onReady, options, forceHover = false, ...props }) => {
|
||
|
|
const [showPlayer, setShowPlayer] = useState(false);
|
||
|
|
const [playerPlaying, setPlayerPlaying] = useState(false);
|
||
|
|
const hoverTimer = useRef(null);
|
||
|
|
const isHovering = useRef(false);
|
||
|
|
const handleMouseEnter = () => {
|
||
|
|
if (isMobile || !cover)
|
||
|
|
return;
|
||
|
|
isHovering.current = true;
|
||
|
|
hoverTimer.current = setTimeout(() => {
|
||
|
|
if (isHovering.current) {
|
||
|
|
setShowPlayer(true);
|
||
|
|
}
|
||
|
|
}, HOVER_DELAY);
|
||
|
|
};
|
||
|
|
const handleMouseLeave = () => {
|
||
|
|
if (isMobile || !cover)
|
||
|
|
return;
|
||
|
|
isHovering.current = false;
|
||
|
|
if (hoverTimer.current) {
|
||
|
|
clearTimeout(hoverTimer.current);
|
||
|
|
hoverTimer.current = null;
|
||
|
|
}
|
||
|
|
setShowPlayer(false);
|
||
|
|
setPlayerPlaying(false);
|
||
|
|
};
|
||
|
|
useEffect(() => {
|
||
|
|
return () => {
|
||
|
|
if (hoverTimer.current) {
|
||
|
|
clearTimeout(hoverTimer.current);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
useEffect(() => {
|
||
|
|
if (isMobile || !cover)
|
||
|
|
return;
|
||
|
|
if (forceHover) {
|
||
|
|
handleMouseEnter();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
handleMouseLeave();
|
||
|
|
}
|
||
|
|
}, [forceHover, cover]);
|
||
|
|
return (_jsx(PlayerExtension, { className: props.className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: _jsxs("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [cover && typeof cover !== "string" && (_jsx("div", { style: {
|
||
|
|
display: playerPlaying ? "none" : "block",
|
||
|
|
position: "absolute",
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
}, children: cover })), (showPlayer || !cover || typeof cover === "string") && (_jsx("div", { style: {
|
||
|
|
// display: playerPlaying ? "block" : "none",
|
||
|
|
position: "relative",
|
||
|
|
}, children: cloneElement(children, {
|
||
|
|
...props,
|
||
|
|
options: {
|
||
|
|
...options,
|
||
|
|
poster: typeof cover === "string" ? cover : options?.poster,
|
||
|
|
},
|
||
|
|
onReady: (player) => {
|
||
|
|
player.subscribeToPlayStart(() => {
|
||
|
|
setPlayerPlaying(true);
|
||
|
|
});
|
||
|
|
onReady?.(player);
|
||
|
|
},
|
||
|
|
}) }))] }) }));
|
||
|
|
};
|
||
|
|
export default WithCover;
|
||
|
|
//# sourceMappingURL=index.js.map
|