@hyperstream/videoplayer 0.1.8 → 0.1.10

package/dist/index.js

@@ -15191,7 +15191,6 @@ var init_SettingsMenu = __esm({
             absolute z-30 w-56 max-h-80 overflow-y-auto bg-black/90 border border-white/20 backdrop-blur-sm rounded-lg shadow-2xl
             ${isFullscreen ? "bottom-20 right-4" : "bottom-16 right-4"}
           `,
-          onClick: (e) => e.stopPropagation(),
           children: menuLevel === "main" ? (
             // Main Menu
             /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "p-2", children: [
@@ -15453,7 +15452,6 @@ var init_DockPanel = __esm({
             border-l border-white/20 shadow-2xl flex flex-col z-20
             ${containerWidth < 768 ? "w-full" : containerWidth < 1024 ? "w-[50%]" : "w-[30%]"}
           `,
-          onClick: (e) => e.stopPropagation(),
           style: {
             height: showControls ? `calc(100% - ${containerWidth < 640 ? "60px" : "80px"})` : "100%"
           },
@@ -15811,7 +15809,6 @@ var init_PopupOverlay = __esm({
             activePopup,
             ((_g = activePopupStyles.overlay) == null ? void 0 : _g.padding) || "12px"
           )),
-          onClick: (e) => e.stopPropagation(),
           children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
             motion.div,
             __spreadProps(__spreadValues({}, getPopupAnimationConfig(activePopup)), {
@@ -18127,7 +18124,6 @@ var ErrorDisplay = (0, import_react28.memo)(function ErrorDisplay2({
       animate: { opacity: 1 },
       exit: { opacity: 0 },
       className: "absolute inset-0 flex items-center justify-center z-30 bg-black/90",
-      onClick: (e) => e.stopPropagation(),
       children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-center px-6 max-w-md", children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
@@ -18262,10 +18258,7 @@ var PosterOverlay = (0, import_react30.memo)(function PosterOverlay2({
       transition: { duration: 0.3 },
       className: "absolute inset-0 z-50 cursor-pointer",
       style: { backgroundColor: "black" },
-      onClick: (e) => {
-        e.stopPropagation();
-        onPlay();
-      },
+      onClick: onPlay,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "img",
@@ -19579,7 +19572,6 @@ function ControlBar({
       exit: { opacity: 0, y: 20 },
       transition: { duration: 0.25, ease: "easeOut" },
       className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/95 via-black/70 to-transparent backdrop-blur-md",
-      onClick: (e) => e.stopPropagation(),
       style: {
         padding: containerWidth < 400 ? "8px" : containerWidth < 640 ? "12px" : "16px"
       },
@@ -20130,7 +20122,6 @@ var PasswordDialog = (0, import_react35.memo)(function PasswordDialog2({
           animate: { scale: 1, opacity: 1 },
           exit: { scale: 0.9, opacity: 0 },
           className: "w-full max-w-sm mx-4",
-          onClick: (e) => e.stopPropagation(),
           children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "bg-gray-900/95 backdrop-blur-md rounded-xl shadow-2xl border border-white/10 p-6", children: [
             /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "text-center mb-6", children: [
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -20569,17 +20560,29 @@ function usePipMonitor({
   const [isPictureInPicture, setIsPictureInPicture] = (0, import_react40.useState)(false);
   const [isSupported, setIsSupported] = (0, import_react40.useState)(false);
   const [canActivate, setCanActivate] = (0, import_react40.useState)(false);
+  const [videoElement, setVideoElement] = (0, import_react40.useState)(null);
   const onEnterPipRef = (0, import_react40.useRef)(onEnterPip);
   const onLeavePipRef = (0, import_react40.useRef)(onLeavePip);
   onEnterPipRef.current = onEnterPip;
   onLeavePipRef.current = onLeavePip;
   (0, import_react40.useEffect)(() => {
-    const video = videoRef.current;
-    const supported = isPipSupported() && video && "requestPictureInPicture" in video;
-    setIsSupported(!!supported);
+    setIsSupported(isPipSupported());
+  }, []);
+  (0, import_react40.useEffect)(() => {
+    if (videoRef.current) {
+      setVideoElement(videoRef.current);
+      return;
+    }
+    const interval = setInterval(() => {
+      if (videoRef.current) {
+        setVideoElement(videoRef.current);
+        clearInterval(interval);
+      }
+    }, 100);
+    return () => clearInterval(interval);
   }, [videoRef]);
   (0, import_react40.useEffect)(() => {
-    const video = videoRef.current;
+    const video = videoElement;
     if (!video || !isSupported || !enabled) return;
     const handleEnterPip = () => {
       var _a;
@@ -20597,9 +20600,9 @@ function usePipMonitor({
       video.removeEventListener("enterpictureinpicture", handleEnterPip);
       video.removeEventListener("leavepictureinpicture", handleLeavePip);
     };
-  }, [videoRef, isSupported, enabled]);
+  }, [videoElement, isSupported, enabled]);
   (0, import_react40.useEffect)(() => {
-    const video = videoRef.current;
+    const video = videoElement;
     if (!video || !isSupported) {
       setCanActivate(false);
       return;
@@ -20618,7 +20621,7 @@ function usePipMonitor({
       video.removeEventListener("loadeddata", updateCanActivate);
       video.removeEventListener("canplay", updateCanActivate);
     };
-  }, [videoRef, isSupported]);
+  }, [videoElement, isSupported]);
   const enterPip = (0, import_react40.useCallback)(() => __async(null, null, function* () {
     const video = videoRef.current;
     if (!video || !canActivate) return;
@@ -22038,7 +22041,7 @@ function UpNextOverlay({
   const maxSeconds = 10;
   const percentage = Math.max(0, Math.min(100, displaySeconds / maxSeconds * 100));
   const strokeDasharray = `${percentage} 100`;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute right-6 bottom-[80px] z-[60] animate-in fade-in slide-in-from-bottom-4 duration-300", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "bg-black/80 backdrop-blur-md border border-white/10 rounded-xl p-4 shadow-2xl flex items-center gap-4 w-[320px] transition-all hover:bg-black/90", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute right-6 bottom-[80px] z-[60] animate-in fade-in slide-in-from-bottom-4 duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "bg-black/80 backdrop-blur-md border border-white/10 rounded-xl p-4 shadow-2xl flex items-center gap-4 w-[320px] transition-all hover:bg-black/90", children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative w-16 h-16 shrink-0 flex items-center justify-center rounded-lg bg-white/5 overflow-hidden group cursor-pointer", onClick: onPlayNext, children: [
       thumbnailUrl ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("img", { src: thumbnailUrl, alt: nextVideoTitle, className: "w-full h-full object-cover opacity-60 group-hover:opacity-40 transition-opacity" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute inset-0 bg-white/5 group-hover:bg-white/10 transition-colors" }),
       /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("svg", { className: "absolute inset-0 w-full h-full -rotate-90 pointer-events-none", viewBox: "0 0 36 36", children: [
@@ -26340,8 +26343,7 @@ function SimpleVideoPlayer({
     if (!showControls) {
       viewDispatch(viewActions.setShowControls(true));
     }
-    togglePlay();
-  }, [showControls, togglePlay]);
+  }, [showControls]);
   useKeyboardShortcuts({
     containerRef,
     togglePlay,