@hyperstream/videoplayer 0.1.7 → 0.1.8

package/dist/index.js

@@ -15191,6 +15191,7 @@ 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: [
@@ -15452,6 +15453,7 @@ 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%"
           },
@@ -15809,6 +15811,7 @@ 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)), {
@@ -18124,6 +18127,7 @@ 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",
@@ -18258,7 +18262,10 @@ var PosterOverlay = (0, import_react30.memo)(function PosterOverlay2({
       transition: { duration: 0.3 },
       className: "absolute inset-0 z-50 cursor-pointer",
       style: { backgroundColor: "black" },
-      onClick: onPlay,
+      onClick: (e) => {
+        e.stopPropagation();
+        onPlay();
+      },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "img",
@@ -19572,6 +19579,7 @@ 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"
       },
@@ -20122,6 +20130,7 @@ 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)(
@@ -22029,7 +22038,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", 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", 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: [
     /* @__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: [
@@ -26331,7 +26340,8 @@ function SimpleVideoPlayer({
     if (!showControls) {
       viewDispatch(viewActions.setShowControls(true));
     }
-  }, [showControls]);
+    togglePlay();
+  }, [showControls, togglePlay]);
   useKeyboardShortcuts({
     containerRef,
     togglePlay,