softbuilders-react-video-player 1.1.68 → 1.1.70

package/dist/index.css

@@ -460,21 +460,33 @@ video {
 .sb-left-1\/2 {
   left: 50%;
 }
+.sb-left-full {
+  left: 100%;
+}
 .sb-right-0 {
   right: 0px;
 }
+.sb-right-full {
+  right: 100%;
+}
 .sb-top-0 {
   top: 0px;
 }
 .sb-top-1 {
   top: 0.25rem;
 }
+.sb-top-1\/2 {
+  top: 50%;
+}
 .sb-top-2 {
   top: 0.5rem;
 }
 .sb-top-\[27\%\] {
   top: 27%;
 }
+.sb-top-full {
+  top: 100%;
+}
 .sb-z-10 {
   z-index: 10;
 }
@@ -484,6 +496,9 @@ video {
 .sb-z-30 {
   z-index: 30;
 }
+.sb-z-50 {
+  z-index: 50;
+}
 .sb-col-span-3 {
   grid-column: span 3 / span 3;
 }
@@ -499,9 +514,18 @@ video {
 .sb-ml-0 {
   margin-left: 0px;
 }
+.sb-ml-2 {
+  margin-left: 0.5rem;
+}
 .sb-mr-0 {
   margin-right: 0px;
 }
+.sb-mr-2 {
+  margin-right: 0.5rem;
+}
+.sb-mt-2 {
+  margin-top: 0.5rem;
+}
 .sb-flex {
   display: flex;
 }
@@ -575,6 +599,10 @@ video {
   --tw-border-spacing-x: 0.5rem;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
+.-sb-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .-sb-translate-y-0 {
   --tw-translate-y: -0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -583,8 +611,8 @@ video {
   --tw-translate-y: -0.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.sb--translate-x-1\/2 {
-  --tw-translate-x: -50%;
+.-sb-translate-y-1\/2 {
+  --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 .sb-translate-y-0 {
@@ -669,8 +697,8 @@ video {
 .sb-overflow-hidden {
   overflow: hidden;
 }
-.sb-whitespace-nowrap {
-  white-space: nowrap;
+.sb-rounded {
+  border-radius: 0.25rem;
 }
 .sb-rounded-full {
   border-radius: 9999px;
@@ -700,6 +728,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 0 0 / var(--tw-bg-opacity));
 }
+.sb-bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
 .sb-bg-orange-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 115 22 / var(--tw-bg-opacity));
@@ -731,6 +763,10 @@ video {
   padding-left: 1rem !important;
   padding-right: 1rem !important;
 }
+.sb-px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 .sb-px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -763,6 +799,10 @@ video {
 .sb-text-center {
   text-align: center;
 }
+.sb-text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
 .sb-font-bold {
   font-weight: 700;
 }
@@ -784,6 +824,14 @@ video {
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.sb-shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .sb-backdrop-blur-lg {
   --tw-backdrop-blur: blur(16px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

package/dist/index.mjs

@@ -610,7 +610,9 @@ var MenuButton = ({
   onClick,
   setNoteOpen,
   noteButtonClick,
-  disablePopUp = false
+  disablePopUp = false,
+  onMouseEnter,
+  onMouseLeave
 }) => {
   const [isOpen, setIsOpen] = useState3(false);
   const buttonRef = useRef(null);
@@ -634,35 +636,43 @@ var MenuButton = ({
   useEffect3(() => {
     setNoteOpen && setNoteOpen(isOpen);
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs5("div", { className: "sb-relative  sb-flex sb-items-end", children: [
-    /* @__PURE__ */ jsx20(
-      "button",
-      {
-        ref: buttonRef,
-        onClick: (e) => {
-          isOpen && e.stopPropagation();
-          toggleMenu();
-          onClick && onClick(e, !isOpen);
-          noteButtonClick && noteButtonClick(!isOpen);
-        },
-        "aria-haspopup": "true",
-        "aria-expanded": isOpen,
-        "aria-label": "Open menu",
-        children: buttonContent
-      }
-    ),
-    !disablePopUp && isOpen && /* @__PURE__ */ jsx20(
-      "div",
-      {
-        ref: menuRef,
-        role: "menu",
-        "aria-orientation": "vertical",
-        "aria-labelledby": "Open menu",
-        className: `sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10 ${classContainer}`,
-        children: menuContent
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      onMouseEnter,
+      onMouseLeave,
+      className: "sb-relative  sb-flex sb-items-end",
+      children: [
+        /* @__PURE__ */ jsx20(
+          "button",
+          {
+            ref: buttonRef,
+            onClick: (e) => {
+              isOpen && e.stopPropagation();
+              toggleMenu();
+              onClick && onClick(e, !isOpen);
+              noteButtonClick && noteButtonClick(!isOpen);
+            },
+            "aria-haspopup": "true",
+            "aria-expanded": isOpen,
+            "aria-label": "Open menu",
+            children: buttonContent
+          }
+        ),
+        !disablePopUp && isOpen && /* @__PURE__ */ jsx20(
+          "div",
+          {
+            ref: menuRef,
+            role: "menu",
+            "aria-orientation": "vertical",
+            "aria-labelledby": "Open menu",
+            className: `sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10 ${classContainer}`,
+            children: menuContent
+          }
+        )
+      ]
+    }
+  );
 };
 var MenuButton_default = MenuButton;
 
@@ -791,7 +801,9 @@ var CreateNoteMenu = ({
   handleSaveNoteAction,
   width,
   setNoteOpen,
-  noteButtonClick
+  noteButtonClick,
+  onMouseEnter,
+  onMouseLeave
 }) => {
   const { player } = useSoftBuildersVideoPlayerContext();
   const [note, setNote] = useState5("");
@@ -810,6 +822,8 @@ var CreateNoteMenu = ({
   return /* @__PURE__ */ jsx22(
     MenuButton_default,
     {
+      onMouseEnter,
+      onMouseLeave,
       disablePopUp: true,
       noteButtonClick,
       setNoteOpen,
@@ -861,9 +875,26 @@ import { useEffect as useEffect5, useState as useState6 } from "react";
 
 // src/components/Tooltip/index.tsx
 import { jsx as jsx23 } from "react/jsx-runtime";
-var Tooltip = ({ open, children }) => {
+var Tooltip = ({
+  open,
+  children,
+  position = "top"
+}) => {
   if (!open) return null;
-  return /* @__PURE__ */ jsx23("div", { className: "sb-absolute sb-bottom-full sb-mb-2 sb-left-1/2 sb-transform sb--translate-x-1/2 sb-z-10 sb-whitespace-nowrap", children });
+  console.log("tool tip");
+  const positionClasses = {
+    top: "sb-bottom-full sb-left-1/2 sb-transform -sb-translate-x-1/2 sb-mb-2",
+    bottom: "sb-top-full sb-left-1/2 sb-transform -sb-translate-x-1/2 sb-mt-2",
+    left: "sb-right-full sb-top-1/2 sb-transform -sb-translate-y-1/2 sb-mr-2",
+    right: "sb-left-full sb-top-1/2 sb-transform -sb-translate-y-1/2 sb-ml-2"
+  };
+  return /* @__PURE__ */ jsx23(
+    "div",
+    {
+      className: `sb-relative sb-bg-black sb-text-white sb-text-sm sb-px-2 sb-py-1 sb-rounded sb-shadow-md sb-z-50 ${positionClasses[position]}`,
+      children
+    }
+  );
 };
 var Tooltip_default = Tooltip;
 
@@ -1150,7 +1181,12 @@ var SubtitleOption = ({
     }
   );
 };
-var SubtitleMenu = ({ width, onClick }) => {
+var SubtitleMenu = ({
+  width,
+  onClick,
+  onMouseEnter,
+  onMouseLeave
+}) => {
   const { player } = useSoftBuildersVideoPlayerContext();
   const [closeMenuFunction, setCloseMenuFunction] = useState11(void 0);
   const [subtitles, setSubtitles] = useState11([]);
@@ -1175,6 +1211,8 @@ var SubtitleMenu = ({ width, onClick }) => {
   return /* @__PURE__ */ jsx32(
     MenuButton_default,
     {
+      onMouseEnter,
+      onMouseLeave,
       onClick: (e, isOpen) => {
         onClick && onClick(e, isOpen);
       },
@@ -1253,6 +1291,16 @@ var ControlBar = ({
   };
   const [volumeSliderToggler, setVolumeToggler] = useState12(false);
   const container = document.getElementById(`video-container-${id}`);
+  const [isToolTip, setIsToolTip] = useState12({
+    sub: false,
+    seekForward: false,
+    seekBackward: false,
+    play: false,
+    pause: false,
+    volume: false,
+    quality: false,
+    fullScreen: false
+  });
   function handleWidthChange(width2) {
     setWidth(width2);
   }
@@ -1349,6 +1397,8 @@ var ControlBar = ({
         disableNote && /* @__PURE__ */ jsx33(
           CreateNoteMenu_default,
           {
+            onMouseEnter: () => setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { note: true })),
+            onMouseLeave: () => setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { note: false })),
             handleSaveNoteAction,
             width,
             setNoteOpen,
@@ -1363,6 +1413,11 @@ var ControlBar = ({
         /* @__PURE__ */ jsx33(
           SubtitleMenu_default,
           {
+            onMouseEnter: () => {
+              console.log("get well");
+              setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { sub: true }));
+            },
+            onMouseLeave: () => setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { sub: false })),
             width,
             onClick: (e, isOpen) => {
               setVolumeToggler(!volumeSliderToggler);
@@ -1542,8 +1597,6 @@ var VideoPlayerComponent = forwardRef(
       }
       return () => {
         if (playerRef.current) {
-          playerRef.current.dispose();
-          playerRef.current = void 0;
           setTimeout(() => {
             if (bigPlayButtonRoot[id]) {
               bigPlayButtonRoot[id].unmount();
@@ -1697,6 +1750,7 @@ var VideoPlayerComponent = forwardRef(
       if (playerRef.current) {
         if (playerRef.current.paused()) {
           try {
+            startTime && playerRef.current.currentTime(startTime);
             await playerRef.current.play();
             setIsPaused(false);
           } catch (error) {