@hyperstream/videoplayer 0.1.8 → 0.1.10

package/dist/index.mjs

@@ -15177,7 +15177,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__ */ jsxs11("div", { className: "p-2", children: [
@@ -15439,7 +15438,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%"
           },
@@ -15797,7 +15795,6 @@ var init_PopupOverlay = __esm({
             activePopup,
             ((_g = activePopupStyles.overlay) == null ? void 0 : _g.padding) || "12px"
           )),
-          onClick: (e) => e.stopPropagation(),
           children: /* @__PURE__ */ jsxs13(
             motion.div,
             __spreadProps(__spreadValues({}, getPopupAnimationConfig(activePopup)), {
@@ -18112,7 +18109,6 @@ var ErrorDisplay = memo3(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__ */ jsxs3("div", { className: "text-center px-6 max-w-md", children: [
         /* @__PURE__ */ jsx9(
           "div",
@@ -18247,10 +18243,7 @@ var PosterOverlay = memo4(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__ */ jsx11(
           "img",
@@ -19570,7 +19563,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"
       },
@@ -20121,7 +20113,6 @@ var PasswordDialog = memo6(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__ */ jsxs9("div", { className: "bg-gray-900/95 backdrop-blur-md rounded-xl shadow-2xl border border-white/10 p-6", children: [
             /* @__PURE__ */ jsxs9("div", { className: "text-center mb-6", children: [
               /* @__PURE__ */ jsx23(
@@ -20560,17 +20551,29 @@ function usePipMonitor({
   const [isPictureInPicture, setIsPictureInPicture] = useState9(false);
   const [isSupported, setIsSupported] = useState9(false);
   const [canActivate, setCanActivate] = useState9(false);
+  const [videoElement, setVideoElement] = useState9(null);
   const onEnterPipRef = useRef14(onEnterPip);
   const onLeavePipRef = useRef14(onLeavePip);
   onEnterPipRef.current = onEnterPip;
   onLeavePipRef.current = onLeavePip;
   useEffect13(() => {
-    const video = videoRef.current;
-    const supported = isPipSupported() && video && "requestPictureInPicture" in video;
-    setIsSupported(!!supported);
+    setIsSupported(isPipSupported());
+  }, []);
+  useEffect13(() => {
+    if (videoRef.current) {
+      setVideoElement(videoRef.current);
+      return;
+    }
+    const interval = setInterval(() => {
+      if (videoRef.current) {
+        setVideoElement(videoRef.current);
+        clearInterval(interval);
+      }
+    }, 100);
+    return () => clearInterval(interval);
   }, [videoRef]);
   useEffect13(() => {
-    const video = videoRef.current;
+    const video = videoElement;
     if (!video || !isSupported || !enabled) return;
     const handleEnterPip = () => {
       var _a;
@@ -20588,9 +20591,9 @@ function usePipMonitor({
       video.removeEventListener("enterpictureinpicture", handleEnterPip);
       video.removeEventListener("leavepictureinpicture", handleLeavePip);
     };
-  }, [videoRef, isSupported, enabled]);
+  }, [videoElement, isSupported, enabled]);
   useEffect13(() => {
-    const video = videoRef.current;
+    const video = videoElement;
     if (!video || !isSupported) {
       setCanActivate(false);
       return;
@@ -20609,7 +20612,7 @@ function usePipMonitor({
       video.removeEventListener("loadeddata", updateCanActivate);
       video.removeEventListener("canplay", updateCanActivate);
     };
-  }, [videoRef, isSupported]);
+  }, [videoElement, isSupported]);
   const enterPip = useCallback12(() => __async(null, null, function* () {
     const video = videoRef.current;
     if (!video || !canActivate) return;
@@ -22029,7 +22032,7 @@ function UpNextOverlay({
   const maxSeconds = 10;
   const percentage = Math.max(0, Math.min(100, displaySeconds / maxSeconds * 100));
   const strokeDasharray = `${percentage} 100`;
-  return /* @__PURE__ */ jsx25("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__ */ jsxs10("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__ */ jsx25("div", { className: "absolute right-6 bottom-[80px] z-[60] animate-in fade-in slide-in-from-bottom-4 duration-300", children: /* @__PURE__ */ jsxs10("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__ */ jsxs10("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__ */ jsx25("img", { src: thumbnailUrl, alt: nextVideoTitle, className: "w-full h-full object-cover opacity-60 group-hover:opacity-40 transition-opacity" }) : /* @__PURE__ */ jsx25("div", { className: "absolute inset-0 bg-white/5 group-hover:bg-white/10 transition-colors" }),
       /* @__PURE__ */ jsxs10("svg", { className: "absolute inset-0 w-full h-full -rotate-90 pointer-events-none", viewBox: "0 0 36 36", children: [
@@ -26331,8 +26334,7 @@ function SimpleVideoPlayer({
     if (!showControls) {
       viewDispatch(viewActions.setShowControls(true));
     }
-    togglePlay();
-  }, [showControls, togglePlay]);
+  }, [showControls]);
   useKeyboardShortcuts({
     containerRef,
     togglePlay,