feat: release v0.0.1

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

@@ -0,0 +1,74 @@
+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