softbuilders-react-video-player 1.1.21 → 1.1.23

package/dist/index.mjs

@@ -538,12 +538,12 @@ var VolumeSlider = ({ width = 0, setIsSeeking }) => {
   return /* @__PURE__ */ jsxs4(
     "div",
     {
-      className: `sb-flex ${isVisible ? "" : "-sb-ml-2"}  sb-flex-col-reverse ${false ? "!sb-flex-row !sb-items-end " : ""} sb-items-center sb-justify-start sb-gap-1 sb-h-full`,
+      className: `sb-flex ${isVisible ? "" : "-sb-ml-2"}  ${width > 400 ? "sb-flex-col-reverse  " : "sb-flex-col !sb-justify-start"} ${false ? "!sb-flex-row !sb-items-start " : ""} sb-items-center sb-gap-1 sb-h-full`,
       children: [
         /* @__PURE__ */ jsx19(
           "div",
           {
-            className: `sb-flex sb-relative ${width < 400 ? "" : ""} sb-top-1 sb-items-end`,
+            className: `sb-flex sb-relative ${width < 400 ? "-sb-top-1" : "sb-top-1"}  `,
             onClick: toggleVisiblity,
             children: volume === 0 || (player == null ? void 0 : player.muted()) ? /* @__PURE__ */ jsx19(
               MuteIcon_default,
@@ -561,7 +561,7 @@ var VolumeSlider = ({ width = 0, setIsSeeking }) => {
         /* @__PURE__ */ jsx19("div", { className: "sb-flex  sb-items-center sb-justify-center", children: /* @__PURE__ */ jsx19(
           "div",
           {
-            className: `sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible ? "sb-w-[22px] sb-opacity-100 sb-visible" : "sb-w-0 sb-opacity-0 sb-invisible"}  -sb-rotate-90 -sb-translate-y-1 sb-relative ${false ? "sb-static sb-w-16 sb-rotate-0 sb-translate-y-0 " : ""}`,
+            className: `sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible ? "sb-w-[22px] sb-opacity-100 sb-visible" : "sb-w-0 sb-opacity-0 sb-invisible"}  ${width > 400 ? "-sb-rotate-90 -sb-translate-y-1" : "sb-rotate-90 sb-translate-y-1"} sb-relative ${false ? "sb-static sb-w-16 sb-rotate-0 sb-translate-y-0 " : ""}`,
             children: /* @__PURE__ */ jsx19(
               Slider_default,
               {
@@ -586,7 +586,12 @@ import { useEffect as useEffect4, useState as useState4 } from "react";
 // src/components/MenuButton/index.tsx
 import { useCallback, useEffect as useEffect3, useRef, useState as useState3 } from "react";
 import { jsx as jsx20, jsxs as jsxs5 } from "react/jsx-runtime";
-var MenuButton = ({ buttonContent, menuContent, close }) => {
+var MenuButton = ({
+  buttonContent,
+  menuContent,
+  close,
+  classContainer
+}) => {
   const [isOpen, setIsOpen] = useState3(false);
   const buttonRef = useRef(null);
   const menuRef = useRef(null);
@@ -611,7 +616,10 @@ var MenuButton = ({ buttonContent, menuContent, close }) => {
       "button",
       {
         ref: buttonRef,
-        onClick: toggleMenu,
+        onClick: (e) => {
+          e.stopPropagation();
+          toggleMenu();
+        },
         "aria-haspopup": "true",
         "aria-expanded": isOpen,
         "aria-label": "Open menu",
@@ -625,7 +633,7 @@ var MenuButton = ({ buttonContent, menuContent, close }) => {
         role: "menu",
         "aria-orientation": "vertical",
         "aria-labelledby": "Open menu",
-        className: "sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10",
+        className: `sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10 ${classContainer}`,
         children: menuContent
       }
     )
@@ -638,14 +646,27 @@ import { jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
 var QualityOption = ({
   isSelected,
   quality,
-  onClick
+  onClick,
+  width
 }) => {
-  return /* @__PURE__ */ jsx21("button", { className: "hover:sb-text-orange-500 sb-p-2", onClick, children: /* @__PURE__ */ jsxs6("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [
-    /* @__PURE__ */ jsx21("div", { className: "sb-col-span-3", children: isSelected ? /* @__PURE__ */ jsx21(CheckedIcon_default, { className: "sb-w-5 sb-h-5" }) : /* @__PURE__ */ jsx21("div", {}) }),
-    /* @__PURE__ */ jsx21("p", { className: "sb-text-left sb-col-span-9", children: quality.label })
-  ] }) });
+  return /* @__PURE__ */ jsx21(
+    "button",
+    {
+      className: `hover:sb-text-orange-500 ${width > 400 ? "sb-p-2" : "sp-pb-1"}`,
+      onClick,
+      children: /* @__PURE__ */ jsxs6("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [
+        /* @__PURE__ */ jsx21("div", { className: "sb-col-span-3", children: isSelected ? /* @__PURE__ */ jsx21(
+          CheckedIcon_default,
+          {
+            className: `${width > 400 ? "sb-w-5 sb-h-5" : "sb-w-3 sb-h-3"}`
+          }
+        ) : /* @__PURE__ */ jsx21("div", {}) }),
+        /* @__PURE__ */ jsx21("p", { className: "sb-text-left sb-col-span-9", children: quality.label })
+      ] })
+    }
+  );
 };
-var QualityMenu = ({}) => {
+var QualityMenu = ({ width }) => {
   const { player } = useSoftBuildersVideoPlayerContext();
   const [closeMenuFunction, setCloseMenuFunction] = useState4(void 0);
   const [qualities, setQualities] = useState4(
@@ -654,12 +675,12 @@ var QualityMenu = ({}) => {
   const [currentQualitySrc, setCurrentQualitySrc] = useState4(void 0);
   useEffect4(() => {
     if (player) {
-      const sources = player.currentSources();
+      const sources = player == null ? void 0 : player.currentSources();
       const qs = JSON.parse(
         JSON.stringify(sources)
       );
       setQualities(qs);
-      const source = player.currentSource();
+      const source = player == null ? void 0 : player.currentSource();
       const quality = JSON.parse(
         JSON.stringify(source)
       );
@@ -669,47 +690,61 @@ var QualityMenu = ({}) => {
   return /* @__PURE__ */ jsx21(
     MenuButton_default,
     {
+      classContainer: `${width < 400 ? "!sb-top-8 -sb-left-9" : ""}`,
       buttonContent: /* @__PURE__ */ jsx21(SettingsIcon_default, { className: "sb-w-3 sb-h-3" }),
-      menuContent: /* @__PURE__ */ jsx21("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[150px]", children: /* @__PURE__ */ jsxs6("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
-        /* @__PURE__ */ jsxs6("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start sb-relative sb-top-2", children: [
-          /* @__PURE__ */ jsx21(
-            "button",
-            {
-              onClick: () => {
-                if (closeMenuFunction) {
-                  closeMenuFunction();
-                }
-              },
-              className: "hover:sb-scale-150",
-              children: /* @__PURE__ */ jsx21(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
-            }
-          ),
-          /* @__PURE__ */ jsx21("h3", { children: "Quality" })
-        ] }),
-        /* @__PURE__ */ jsx21("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
-        /* @__PURE__ */ jsx21("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start ", children: qualities.map((q, i) => {
-          return /* @__PURE__ */ jsx21(
-            QualityOption,
-            {
-              isSelected: currentQualitySrc === q.src,
-              quality: q,
-              onClick: () => {
-                const source = qualities.find(
-                  (_q) => q.label == _q.label
-                );
-                if (source && source.src != currentQualitySrc) {
-                  player == null ? void 0 : player.src(source.src);
-                  const currentTime = player == null ? void 0 : player.currentTime();
-                  setCurrentQualitySrc(source.src);
-                  player == null ? void 0 : player.currentTime(currentTime);
-                  player == null ? void 0 : player.play();
-                }
+      menuContent: /* @__PURE__ */ jsx21(
+        "div",
+        {
+          className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50  ${width > 400 ? "sb-w-[150px] sb-py-5" : "sb-w-[90px] sb-items-center sb-justify-center sb-py-1"}`,
+          children: /* @__PURE__ */ jsxs6("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
+            /* @__PURE__ */ jsxs6(
+              "div",
+              {
+                className: `sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start sb-relative sb-top-2`,
+                children: [
+                  /* @__PURE__ */ jsx21(
+                    "button",
+                    {
+                      onClick: () => {
+                        if (closeMenuFunction) {
+                          closeMenuFunction();
+                        }
+                      },
+                      className: "hover:sb-scale-150",
+                      children: /* @__PURE__ */ jsx21(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx21("h3", { children: "Quality" })
+                ]
               }
-            },
-            `quality-${q.label}-${i}`
-          );
-        }) })
-      ] }) }),
+            ),
+            /* @__PURE__ */ jsx21("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
+            /* @__PURE__ */ jsx21("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start ", children: qualities.map((q, i) => {
+              return /* @__PURE__ */ jsx21(
+                QualityOption,
+                {
+                  width,
+                  isSelected: currentQualitySrc === q.src,
+                  quality: q,
+                  onClick: () => {
+                    const source = qualities.find(
+                      (_q) => q.label == _q.label
+                    );
+                    if (source && source.src != currentQualitySrc) {
+                      player == null ? void 0 : player.src(source.src);
+                      const currentTime = player == null ? void 0 : player.currentTime();
+                      setCurrentQualitySrc(source.src);
+                      player == null ? void 0 : player.currentTime(currentTime);
+                      player == null ? void 0 : player.play();
+                    }
+                  }
+                },
+                `quality-${q.label}-${i}`
+              );
+            }) })
+          ] })
+        }
+      ),
       close: (fn) => {
         setCloseMenuFunction(() => fn);
       }
@@ -1046,12 +1081,22 @@ var SubtitleOption = ({
   subtitle,
   onClick
 }) => {
-  return /* @__PURE__ */ jsx32("button", { className: "hover:sb-text-orange-500 sb-p-2", onClick, children: /* @__PURE__ */ jsxs12("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [
-    /* @__PURE__ */ jsx32("div", { className: "sb-col-span-3", children: isSelected ? /* @__PURE__ */ jsx32(CheckedIcon_default, { className: "sb-w-5 sb-h-5" }) : /* @__PURE__ */ jsx32("div", {}) }),
-    /* @__PURE__ */ jsx32("p", { className: "sb-text-left sb-col-span-9", children: subtitle.label })
-  ] }) });
+  return /* @__PURE__ */ jsx32(
+    "button",
+    {
+      className: "hover:sb-text-orange-500 sb-p-2",
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+      },
+      children: /* @__PURE__ */ jsxs12("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [
+        /* @__PURE__ */ jsx32("div", { className: "sb-col-span-3", children: isSelected ? /* @__PURE__ */ jsx32(CheckedIcon_default, { className: "sb-w-5 sb-h-5" }) : /* @__PURE__ */ jsx32("div", {}) }),
+        /* @__PURE__ */ jsx32("p", { className: "sb-text-left sb-col-span-9", children: subtitle.label })
+      ] })
+    }
+  );
 };
-var SubtitleMenu = ({}) => {
+var SubtitleMenu = ({ width }) => {
   const { player } = useSoftBuildersVideoPlayerContext();
   const [closeMenuFunction, setCloseMenuFunction] = useState11(void 0);
   const [subtitles, setSubtitles] = useState11([]);
@@ -1076,38 +1121,45 @@ var SubtitleMenu = ({}) => {
   return /* @__PURE__ */ jsx32(
     MenuButton_default,
     {
+      classContainer: `${width < 400 ? "!sb-top-8 -sb-left-9" : ""}`,
       buttonContent: /* @__PURE__ */ jsx32(SubIcon_default, { className: "sb-w-4 sb-h-4 sb-text-white " }),
-      menuContent: /* @__PURE__ */ jsx32("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[150px]", children: /* @__PURE__ */ jsxs12("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
-        /* @__PURE__ */ jsxs12("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start", children: [
-          /* @__PURE__ */ jsx32(
-            "button",
-            {
-              onClick: () => {
-                if (closeMenuFunction) {
-                  closeMenuFunction();
+      menuContent: /* @__PURE__ */ jsx32(
+        "div",
+        {
+          className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 ${width > 400 ? "sb-w-[150px] sb-py-5" : "sb-w-[90px] sb-items-center sb-justify-center sb-py-1"}`,
+          children: /* @__PURE__ */ jsxs12("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
+            /* @__PURE__ */ jsxs12("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start", children: [
+              /* @__PURE__ */ jsx32(
+                "button",
+                {
+                  onClick: () => {
+                    if (closeMenuFunction) {
+                      closeMenuFunction();
+                    }
+                  },
+                  className: "hover:sb-scale-150",
+                  children: /* @__PURE__ */ jsx32(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
                 }
-              },
-              className: "hover:sb-scale-150",
-              children: /* @__PURE__ */ jsx32(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
-            }
-          ),
-          /* @__PURE__ */ jsx32("h3", { children: "Subtitle" })
-        ] }),
-        /* @__PURE__ */ jsx32("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
-        /* @__PURE__ */ jsx32("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start", children: subtitles.map((q, i) => {
-          return /* @__PURE__ */ jsx32(
-            SubtitleOption,
-            {
-              isSelected: q.mode === "showing",
-              subtitle: q,
-              onClick: () => {
-                handleSelectSubtitle(q);
-              }
-            },
-            `subtitle-${q.label}-${i}`
-          );
-        }) })
-      ] }) }),
+              ),
+              /* @__PURE__ */ jsx32("h3", { children: "Subtitle" })
+            ] }),
+            /* @__PURE__ */ jsx32("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
+            /* @__PURE__ */ jsx32("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start", children: subtitles.map((q, i) => {
+              return /* @__PURE__ */ jsx32(
+                SubtitleOption,
+                {
+                  isSelected: q.mode === "showing",
+                  subtitle: q,
+                  onClick: () => {
+                    handleSelectSubtitle(q);
+                  }
+                },
+                `subtitle-${q.label}-${i}`
+              );
+            }) })
+          ] })
+        }
+      ),
       close: (fn) => {
         setCloseMenuFunction(() => fn);
       }
@@ -1160,70 +1212,79 @@ var ControlBar = ({
   useEffect13(() => {
     setDuration(duration);
   }, [duration]);
-  return /* @__PURE__ */ jsxs13("div", { className: " sb-px-2 sb-flex  sb-justify-center sb-gap-3 sb-w-full sb-h-full sb-items-end sb-pb-2", children: [
-    /* @__PURE__ */ jsx33(BufferTracker_default, {}),
-    /* @__PURE__ */ jsx33(CurrentTimeTracker_default, {}),
-    /* @__PURE__ */ jsx33(
-      "button",
-      {
-        onClick: () => {
-          seek(-seekStep);
-        },
-        children: /* @__PURE__ */ jsx33(BackwardIcon_default, { className: "sb-w-3 sb-h-3" })
-      }
-    ),
-    /* @__PURE__ */ jsx33("button", { onClick: togglePlay, children: isPaused ? /* @__PURE__ */ jsx33(PlayIcon_default, { className: "sb-w-3 sb-h-3" }) : /* @__PURE__ */ jsx33(PauseIcon_default, { className: "sb-w-3 sb-h-3" }) }),
-    /* @__PURE__ */ jsx33(
-      "button",
-      {
-        onClick: (e) => {
-          e.preventDefault();
-          seek(seekStep);
-        },
-        children: /* @__PURE__ */ jsx33(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
-      }
-    ),
-    (isSeeking || width > 400) && /* @__PURE__ */ jsx33(
-      "div",
-      {
-        className: `${width < 400 ? "sb-w-[0px] sb-ml-0 sb-mr-0" : "sb-w-full"}`,
-        children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: ` sb-px-2 sb-flex sb-pt-2 sb-justify-center sb-gap-3 sb-w-full sb-h-full ${width > 400 ? "sb-items-end" : "sb-items-start"} sb-pb-2`,
+      children: [
+        /* @__PURE__ */ jsx33(BufferTracker_default, {}),
+        /* @__PURE__ */ jsx33(CurrentTimeTracker_default, {}),
+        /* @__PURE__ */ jsx33(
+          "button",
+          {
+            onClick: () => {
+              seek(-seekStep);
+            },
+            children: /* @__PURE__ */ jsx33(BackwardIcon_default, { className: "sb-w-3 sb-h-3" })
+          }
+        ),
+        /* @__PURE__ */ jsx33("button", { onClick: togglePlay, children: isPaused ? /* @__PURE__ */ jsx33(PlayIcon_default, { className: "sb-w-3 sb-h-3" }) : /* @__PURE__ */ jsx33(PauseIcon_default, { className: "sb-w-3 sb-h-3" }) }),
+        /* @__PURE__ */ jsx33(
+          "button",
+          {
+            onClick: (e) => {
+              e.preventDefault();
+              seek(seekStep);
+            },
+            children: /* @__PURE__ */ jsx33(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
+          }
+        ),
+        // isSeeking ||
+        // width > 400 &&
+        /* @__PURE__ */ jsx33(
           "div",
           {
-            style: width < 400 ? {
-              width: `${width * 0.8}px`,
-              left: "10%"
-            } : { width: "100%" },
-            className: `flex gap-2 ${width < 400 ? "absolute -sb-translate-y-9" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500`,
-            children: [
-              /* @__PURE__ */ jsx33(CurrentTimeLabel_default, {}),
-              /* @__PURE__ */ jsx33(TimeSliderContainer_default, { chapters, notes }),
-              /* @__PURE__ */ jsx33("p", { children: durationFormater(duration) })
-            ]
+            className: `${width < 400 ? "sb-w-[100px] sb-ml-0 sb-mr-0" : "sb-w-full"}`,
+            children: /* @__PURE__ */ jsxs13(
+              "div",
+              {
+                style: width < 400 ? {
+                  width: `${width * 0.9}px`,
+                  left: "5%",
+                  top: "90%"
+                } : { width: "100%" },
+                className: `flex gap-2 ${width < 400 ? "absolute sb-top-1" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500`,
+                children: [
+                  /* @__PURE__ */ jsx33(CurrentTimeLabel_default, {}),
+                  /* @__PURE__ */ jsx33(TimeSliderContainer_default, { chapters, notes }),
+                  /* @__PURE__ */ jsx33("p", { children: durationFormater(duration) })
+                ]
+              }
+            )
           }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx33("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx33(VolumeSlider_default, { width, setIsSeeking: (val) => setIsSeeking(val) }) }),
-    /* @__PURE__ */ jsx33(QualityMenu_default, {}),
-    /* @__PURE__ */ jsx33(
-      "button",
-      {
-        onClick: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          if (player == null ? void 0 : player.isFullscreen()) {
-            player == null ? void 0 : player.exitFullscreen();
-          } else {
-            player == null ? void 0 : player.requestFullscreen();
+        ),
+        /* @__PURE__ */ jsx33("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx33(VolumeSlider_default, { width, setIsSeeking: (val) => setIsSeeking(val) }) }),
+        /* @__PURE__ */ jsx33(QualityMenu_default, { width }),
+        handleSaveNoteAction && /* @__PURE__ */ jsx33(CreateNoteMenu_default, { handleSaveNoteAction }),
+        /* @__PURE__ */ jsx33(SubtitleMenu_default, { width }),
+        /* @__PURE__ */ jsx33(
+          "button",
+          {
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              if (player == null ? void 0 : player.isFullscreen()) {
+                player == null ? void 0 : player.exitFullscreen();
+              } else {
+                player == null ? void 0 : player.requestFullscreen();
+              }
+            },
+            children: /* @__PURE__ */ jsx33(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
           }
-        },
-        children: /* @__PURE__ */ jsx33(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
-      }
-    ),
-    handleSaveNoteAction && /* @__PURE__ */ jsx33(CreateNoteMenu_default, { handleSaveNoteAction }),
-    /* @__PURE__ */ jsx33(SubtitleMenu_default, {})
-  ] });
+        )
+      ]
+    }
+  );
 };
 var ControlBar_default = ControlBar;
 
@@ -1271,7 +1332,7 @@ var renderBigPlayButton = (id, player, isPaused, setIsPaused) => {
   }
 };
 var controlBarRoot = {};
-var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction) => {
+var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction, opacity = "0") => {
   const container = document.getElementById(`video-container-${id}`);
   if (container) {
     const element = container.querySelector(".vjs-control-bar");
@@ -1280,6 +1341,7 @@ var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chap
         controlBarRoot[id] = ReactDOM.createRoot(element);
       }
       element.style.display = "flex";
+      element.style.opacity = opacity;
       element.style.height = "100%";
       element.style.alignItems = "flex-end";
       controlBarRoot[id].render(
@@ -1317,11 +1379,12 @@ var VideoPlayerComponent = ({
   const [isReady, setIsReady] = useState13(false);
   const [isPaused, setIsPaused] = useState13(!options.autoplay);
   const [duration, setDuration] = useState13(1);
+  const [opacity, setOpacity] = useState13("0");
   const onReady = (player) => {
     if (playerRef) {
       playerRef.current = player;
       setIsReady(true);
-      player.currentTime(startTime);
+      player == null ? void 0 : player.currentTime(startTime);
       player.on("waiting", () => {
       });
       player.on("dispose", () => {
@@ -1337,6 +1400,7 @@ var VideoPlayerComponent = ({
   useEffect14(() => {
     if (!playerRef.current) {
       const videoElement = document.createElement("video-js");
+      videoElement.setAttribute("playsinline", "true");
       videoElement.classList.add("vjs-big-play-centered");
       if (poster) {
         videoElement.setAttribute("poster", poster);
@@ -1385,7 +1449,8 @@ var VideoPlayerComponent = ({
           notes,
           chapters,
           5,
-          handleSaveNoteAction
+          handleSaveNoteAction,
+          opacity
         );
       }, 500);
       return () => clearTimeout(controlBarTimeout);
@@ -1399,7 +1464,8 @@ var VideoPlayerComponent = ({
     chapters,
     isReady,
     handleSaveNoteAction,
-    duration
+    duration,
+    opacity
   ]);
   useEffect14(() => {
     if (isReady) {
@@ -1417,13 +1483,40 @@ var VideoPlayerComponent = ({
       return () => clearInterval(intervalId);
     }
   }, []);
-  const handlePlayerClick = (e) => {
+  useEffect14(() => {
+    return () => {
+      if (playerRef.current) {
+        playerRef.current.dispose();
+        playerRef.current = void 0;
+        if (bigPlayButtonRoot[id]) {
+          bigPlayButtonRoot[id].unmount();
+          bigPlayButtonRoot[id] = void 0;
+        }
+        if (controlBarRoot[id]) {
+          controlBarRoot[id].unmount();
+          controlBarRoot[id] = void 0;
+        }
+      }
+    };
+  }, []);
+  const timeoutRef = useRef2(null);
+  const handlePlayerClick = async (e) => {
     e.preventDefault();
-    console.log("all");
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setOpacity("100");
+    setTimeout(() => {
+      setOpacity("0");
+    }, 5e3);
     if (playerRef.current) {
       if (playerRef.current.paused()) {
-        playerRef.current.play();
-        setIsPaused(false);
+        try {
+          await playerRef.current.play();
+          setIsPaused(false);
+        } catch (error) {
+          console.error("Failed to play video:", error);
+        }
       } else {
         playerRef.current.pause();
         setIsPaused(true);
@@ -1431,9 +1524,42 @@ var VideoPlayerComponent = ({
       }
     }
   };
+  const videoRefs = useRef2(null);
+  useEffect14(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          var _a, _b;
+          if (entry.isIntersecting === false) {
+            if (((_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.paused()) === false) {
+              try {
+                (_b = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _b.pause();
+                setIsPaused(true);
+              } catch (error) {
+                console.error("Failed to play video:", error);
+              }
+            }
+          }
+        });
+      },
+      {
+        threshold: 0.1
+        // The amount of the component that must be visible (0.1 means 10% visible)
+      }
+    );
+    if (videoRefs.current) {
+      observer.observe(videoRefs.current);
+    }
+    return () => {
+      if (videoRefs.current) {
+        observer.unobserve(videoRef.current);
+      }
+    };
+  }, []);
   return /* @__PURE__ */ jsx35(
     "div",
     {
+      ref: videoRefs,
       id: `video-container-${id}`,
       className: "sb-relative sb-rounded-md sb-overflow-hidden",
       children: /* @__PURE__ */ jsx35(
@@ -1473,7 +1599,8 @@ var Component = ({
   startTime = 0,
   handleSaveNoteAction,
   onPlay,
-  onPause
+  onPause,
+  isFocused = true
 }) => {
   options = __spreadProps(__spreadValues({}, options), {
     responsive: true,
@@ -1491,6 +1618,9 @@ var Component = ({
   if (options.height === void 0) options.height = DEFAULT_OPTIONS.height;
   if (options.width === void 0) options.width = DEFAULT_OPTIONS.width;
   const [tracks, setTracks] = useState14([]);
+  useEffect15(() => {
+    console.log(isFocused, "isF");
+  }, [isFocused]);
   useEffect15(() => {
     const getTracks = async () => {
       const newTracks = [];