feat: release v0.0.1

dist/react/video-player/components/with-cover/index.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import { IWithLoadingVideoPlayerProps } from "../with-loader";
+export interface IWithCoverVideoPlayerProps extends IWithLoadingVideoPlayerProps {
+    cover?: ReactNode | null;
+    forceHover?: boolean;
+}
+declare const WithCover: ({ cover, children, onReady, options, forceHover, ...props }: IWithCoverVideoPlayerProps) => import("react/jsx-runtime").JSX.Element;
+export default WithCover;
+//# sourceMappingURL=index.d.ts.map

dist/react/video-player/components/with-cover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react/video-player/components/with-cover/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEb,SAAS,EAIT,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,4BAA4B,EAAE,MAAM,gBAAgB,CAAC;AAE9D,MAAM,WAAW,0BAChB,SAAQ,4BAA4B;IACpC,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAID,QAAA,MAAM,SAAS,GAAI,6DAOhB,0BAA0B,4CAiG5B,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/react/video-player/components/with-cover/index.tsx"],"names":[],"mappings":"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"}

dist/react/video-player/components/with-cover/with-cover.module.scss

@@ -0,0 +1,10 @@
+.cover {
+	object-position: center;
+	object-fit: cover;
+	z-index: 3;
+	overflow: hidden;
+	width: 100%;
+	max-width: 100%;
+	height: 100%;
+	max-height: 100%;
+}