softbuilders-react-video-player 1.1.22 → 1.1.24

package/dist/components/VideoPlayerComponent/index.js

@@ -22,7 +22,7 @@ const renderBigPlayButton = (id, player, isPaused, setIsPaused) => {
     }
 };
 let controlBarRoot = {};
-const renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction) => {
+const 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");
@@ -31,6 +31,7 @@ const renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, ch
                 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(_jsx(SoftBuildersVideoPlayerProvider, { children: _jsx(ControlBar, { id: id, player: player, isPaused: isPaused, setIsPaused: setIsPaused, duration: duration, notes: notes, chapters: chapters, seekStep: seekStep, handleSaveNoteAction: handleSaveNoteAction }) }));
@@ -43,11 +44,12 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
     const [isReady, setIsReady] = useState(false);
     const [isPaused, setIsPaused] = useState(!options.autoplay);
     const [duration, setDuration] = useState(1);
+    const [opacity, setOpacity] = useState("0");
     const onReady = (player) => {
         if (playerRef) {
             playerRef.current = player;
             setIsReady(true);
-            player.currentTime(startTime);
+            player === null || player === void 0 ? void 0 : player.currentTime(startTime);
             player.on("waiting", () => { });
             player.on("dispose", () => {
                 videojs.log("player will dispose");
@@ -62,6 +64,7 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
     useEffect(() => {
         if (!playerRef.current) {
             const videoElement = document.createElement("video-js");
+            videoElement.setAttribute("playsinline", "true");
             videoElement.classList.add("vjs-big-play-centered");
             // Set the poster attribute here
             if (poster) {
@@ -105,7 +108,7 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
     useEffect(() => {
         if (isReady) {
             const controlBarTimeout = setTimeout(() => {
-                renderControlBar(id, playerRef.current, isPaused, setIsPaused, duration, notes, chapters, 5, handleSaveNoteAction);
+                renderControlBar(id, playerRef.current, isPaused, setIsPaused, duration, notes, chapters, 5, handleSaveNoteAction, opacity);
             }, 500);
             return () => clearTimeout(controlBarTimeout);
         }
@@ -119,6 +122,7 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
         isReady,
         handleSaveNoteAction,
         duration,
+        opacity,
     ]);
     useEffect(() => {
         if (isReady) {
@@ -137,13 +141,42 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
             return () => clearInterval(intervalId);
         }
     }, []);
-    const handlePlayerClick = (e) => {
+    useEffect(() => {
+        return () => {
+            if (playerRef.current) {
+                playerRef.current.dispose();
+                playerRef.current = undefined;
+                // Cleanup play button and control bar renders
+                if (bigPlayButtonRoot[id]) {
+                    bigPlayButtonRoot[id].unmount();
+                    bigPlayButtonRoot[id] = undefined;
+                }
+                if (controlBarRoot[id]) {
+                    controlBarRoot[id].unmount();
+                    controlBarRoot[id] = undefined;
+                }
+            }
+        };
+    }, []);
+    const timeoutRef = useRef(null);
+    const handlePlayerClick = async (e) => {
         e.preventDefault();
-        console.log("all");
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        setOpacity("100");
+        timeoutRef.current = setTimeout(() => {
+            setOpacity("0");
+        }, 5000);
         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();
@@ -153,7 +186,36 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
             }
         }
     };
-    return (_jsx("div", { id: `video-container-${id}`, className: "sb-relative sb-rounded-md sb-overflow-hidden", children: _jsx("div", { className: "hover:sb-cursor-pointer", "data-vjs-player": true, style: {
+    const videoRefs = useRef(null); // Create a reference for the element
+    useEffect(() => {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                var _a, _b;
+                if (entry.isIntersecting === false) {
+                    if (((_a = playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) === null || _a === void 0 ? void 0 : _a.paused()) === false) {
+                        try {
+                            (_b = playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) === null || _b === void 0 ? 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); // Start observing the component
+        }
+        return () => {
+            if (videoRefs.current) {
+                observer.unobserve(videoRef.current); // Clean up the observer when the component unmounts
+            }
+        };
+    }, []);
+    return (_jsx("div", { ref: videoRefs, id: `video-container-${id}`, className: "sb-relative sb-rounded-md sb-overflow-hidden", children: _jsx("div", { className: "hover:sb-cursor-pointer", "data-vjs-player": true, style: {
                 height: "100%", // Adjust height as needed
                 position: "relative",
             }, children: _jsx("div", { onClick: handlePlayerClick, ref: videoRef }) }) }));

package/dist/components/VideoPlayerComponent/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VideoPlayerComponent/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AACxC,OAAO,OAAO,MAAM,UAAU,CAAC;AAE/B,OAAO,4BAA4B,CAAC;AACpC,OAAO,UAAU,MAAM,eAAe,CAAC;AAMvC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,+BAA+B,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,IAAI,iBAAiB,GAEjB,EAAE,CAAC;AACP,MAAM,mBAAmB,GAAG,CAC1B,EAAU,EACV,MAA0B,EAC1B,QAAiB,EACjB,WAA0D,EAC1D,EAAE;IACF,MAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;IACnE,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,OAAO,GAAQ,SAAS,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QACrE,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC;gBAC3B,iBAAiB,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,OAAsB,CAAC,CAAC;YACtE,CAAC;YACD,iBAAiB,CAAC,EAAE,CAAC,CAAC,MAAM,CAC1B,KAAC,aAAa,IACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;QACJ,CAAC;IACH,CAAC;AACH,CAAC,CAAC;AACF,IAAI,cAAc,GAEd,EAAE,CAAC;AACP,MAAM,gBAAgB,GAAG,CACvB,EAAU,EACV,MAA0B,EAC1B,QAAiB,EACjB,WAA0D,EAC1D,QAAgB,EAChB,KAAoC,EACpC,QAA0C,EAC1C,WAAmB,CAAC,EACpB,oBAAiE,EACjE,EAAE;IACF,MAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;IACnE,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,OAAO,GAAQ,SAAS,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACjE,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC;gBACxB,cAAc,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,OAAsB,CAAC,CAAC;YACnE,CAAC;YACD,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/B,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC9B,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,UAAU,CAAC;YACtC,cAAc,CAAC,EAAE,CAAC,CAAC,MAAM,CACvB,KAAC,+BAA+B,cAC9B,KAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,oBAAoB,EAAE,oBAAoB,GAC1C,GAC8B,CACnC,CAAC;QACJ,CAAC;IACH,CAAC;AACH,CAAC,CAAC;AAYF,MAAM,oBAAoB,GAAG,CAAK,EAChC,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,CAAC,EACb,oBAAoB,EACpB,MAAM,EACN,MAAM,EACN,OAAO,GACE,EAAE,EAAE;IACb,MAAM,QAAQ,GAAG,MAAM,CAAM,SAAS,CAAC,CAAC;IACxC,MAAM,SAAS,GAAG,MAAM,CAAqB,SAAS,CAAC,CAAC;IACxD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC5D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,CAAC,MAAc,EAAE,EAAE;QACjC,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;YAC3B,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;YAC9B,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;YAC/B,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE;gBACxB,OAAO,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC;gBACnC,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC,CAAC,CAAC;YACH,MAAM,CAAC,EAAE,CAAC,gBAAgB,EAAE,GAAG,EAAE;gBAC/B,MAAM,CAAC,GAAG,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;gBACjC,WAAW,CAAC,CAAC,CAAC,CAAC;YACjB,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,CAAC;IACF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YACvB,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YACxD,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;YACpD,gCAAgC;YAChC,IAAI,MAAM,EAAE,CAAC;gBACX,YAAY,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YAC9C,CAAC;YACD,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;YAC3C,SAAS,CAAC,OAAO,GAAG,OAAO,CAAC,YAAY,EAAE,OAAO,EAAE,GAAG,EAAE;gBACtD,OAAO,CAAC,SAAS,CAAC,OAAiB,CAAC,CAAC;YACvC,CAAC,CAAC,CAAC;QACL,CAAC;QACD,OAAO,GAAG,EAAE;YACV,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACtB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;gBAC5B,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC;gBAC9B,UAAU,CAAC,GAAG,EAAE;oBACd,IAAI,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC;wBAC1B,iBAAiB,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;wBAChC,iBAAiB,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;oBACpC,CAAC;oBACD,IAAI,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC;wBACvB,cAAc,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;wBAC7B,cAAc,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;oBACjC,CAAC;gBACH,CAAC,EAAE,CAAC,CAAC,CAAC;YACR,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,mCAAmC;IAC1D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,OAAO,IAAI,OAAO,EAAE,CAAC;YACjC,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;YACzD,IAAI,QAAQ,EAAE,CAAC;gBACb,IAAI,OAAO;oBAAE,OAAO,CAAC,WAAW,CAAC,CAAC;YACpC,CAAC;iBAAM,CAAC;gBACN,IAAI,MAAM;oBAAE,MAAM,CAAC,WAAW,CAAC,CAAC;YAClC,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IACxB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,iBAAiB,GAAG,UAAU,CAAC,GAAG,EAAE;gBACxC,gBAAgB,CACd,EAAE,EACF,SAAS,CAAC,OAAO,EACjB,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,CAAC,EACD,oBAAoB,CACrB,CAAC;YACJ,CAAC,EAAE,GAAG,CAAC,CAAC;YACR,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC,EAAE;QACD,EAAE;QACF,SAAS;QACT,QAAQ;QACR,WAAW;QACX,KAAK;QACL,QAAQ;QACR,OAAO;QACP,oBAAoB;QACpB,QAAQ;KACT,CAAC,CAAC;IACH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,iBAAiB,GAAG,UAAU,CAAC,GAAG,EAAE;gBACxC,mBAAmB,CAAC,EAAE,EAAE,SAAS,CAAC,OAAO,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;YACpE,CAAC,EAAE,GAAG,CAAC,CAAC;YACR,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;gBAClC,IAAI,SAAS,CAAC,OAAO;oBAAE,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;YACjE,CAAC,EAAE,GAAG,CAAC,CAAC;YACR,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,iBAAiB,GAAG,CAAC,CAAM,EAAE,EAAE;QACnC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACnB,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,IAAI,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC;gBAC/B,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;gBACzB,WAAW,CAAC,KAAK,CAAC,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBAC1B,WAAW,CAAC,IAAI,CAAC,CAAC;gBAClB,IAAI,OAAO;oBAAE,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;YAC7D,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IACF,OAAO,CACL,cACE,EAAE,EAAE,mBAAmB,EAAE,EAAE,EAC3B,SAAS,EAAC,8CAA8C,YAExD,cACE,SAAS,EAAC,yBAAyB,2BAGnC,KAAK,EAAE;gBACL,MAAM,EAAE,MAAM,EAAE,0BAA0B;gBAC1C,QAAQ,EAAE,UAAU;aACrB,YAED,cAAK,OAAO,EAAE,iBAAiB,EAAE,GAAG,EAAE,QAAQ,GAAI,GAC9C,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VideoPlayerComponent/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/VideoPlayerComponent/index.tsx

@@ -13,6 +13,7 @@ import "./style/style.css";
 import "../../styles/tailwind.css";
 import { SoftBuildersVideoPlayerProvider } from "./provider";
 import BigPlayButton from "../BigPlayButton";
+import { set } from "video.js/dist/types/tech/middleware";
 let bigPlayButtonRoot: {
   [key: string]: ReactDOM.Root | undefined;
 } = {};
@@ -51,7 +52,8 @@ const renderControlBar = <T,>(
   notes: SoftBuildersVideoPlayerNote[],
   chapters: SoftBuildersVideoPlayerChapter[],
   seekStep: number = 5,
-  handleSaveNoteAction?: (time: number, note: string) => Promise<T>
+  handleSaveNoteAction?: (time: number, note: string) => Promise<T>,
+  opacity: string = "0"
 ) => {
   const container = document.getElementById(`video-container-${id}`);
   if (container) {
@@ -61,6 +63,7 @@ const renderControlBar = <T,>(
         controlBarRoot[id] = ReactDOM.createRoot(element as HTMLElement);
       }
       element.style.display = "flex";
+      element.style.opacity = opacity;
       element.style.height = "100%";
       element.style.alignItems = "flex-end";
       controlBarRoot[id].render(
@@ -108,11 +111,12 @@ const VideoPlayerComponent = <T,>({
   const [isReady, setIsReady] = useState(false);
   const [isPaused, setIsPaused] = useState(!options.autoplay);
   const [duration, setDuration] = useState(1);
+  const [opacity, setOpacity] = useState("0");
   const onReady = (player: Player) => {
     if (playerRef) {
       playerRef.current = player;
       setIsReady(true);
-      player.currentTime(startTime);
+      player?.currentTime(startTime);
       player.on("waiting", () => {});
       player.on("dispose", () => {
         videojs.log("player will dispose");
@@ -127,6 +131,8 @@ const VideoPlayerComponent = <T,>({
   useEffect(() => {
     if (!playerRef.current) {
       const videoElement = document.createElement("video-js");
+      videoElement.setAttribute("playsinline", "true");
+
       videoElement.classList.add("vjs-big-play-centered");
       // Set the poster attribute here
       if (poster) {
@@ -164,6 +170,7 @@ const VideoPlayerComponent = <T,>({
       }
     }
   }, [isPaused, isReady]);
+
   useEffect(() => {
     if (isReady) {
       const controlBarTimeout = setTimeout(() => {
@@ -176,7 +183,8 @@ const VideoPlayerComponent = <T,>({
           notes,
           chapters,
           5,
-          handleSaveNoteAction
+          handleSaveNoteAction,
+          opacity
         );
       }, 500);
       return () => clearTimeout(controlBarTimeout);
@@ -191,6 +199,7 @@ const VideoPlayerComponent = <T,>({
     isReady,
     handleSaveNoteAction,
     duration,
+    opacity,
   ]);
   useEffect(() => {
     if (isReady) {
@@ -208,13 +217,42 @@ const VideoPlayerComponent = <T,>({
       return () => clearInterval(intervalId);
     }
   }, []);
-  const handlePlayerClick = (e: any) => {
+  useEffect(() => {
+    return () => {
+      if (playerRef.current) {
+        playerRef.current.dispose();
+        playerRef.current = undefined;
+        // Cleanup play button and control bar renders
+        if (bigPlayButtonRoot[id]) {
+          bigPlayButtonRoot[id].unmount();
+          bigPlayButtonRoot[id] = undefined;
+        }
+        if (controlBarRoot[id]) {
+          controlBarRoot[id].unmount();
+          controlBarRoot[id] = undefined;
+        }
+      }
+    };
+  }, []);
+  const timeoutRef = useRef<any>(null);
+  const handlePlayerClick = async (e: any) => {
     e.preventDefault();
-    console.log("all");
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setOpacity("100");
+    timeoutRef.current = setTimeout(() => {
+      setOpacity("0");
+    }, 5000);
+
     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);
@@ -222,8 +260,43 @@ const VideoPlayerComponent = <T,>({
       }
     }
   };
+  const videoRefs = useRef<HTMLDivElement>(null); // Create a reference for the element
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting === false) {
+            if (playerRef?.current?.paused() === false) {
+              try {
+                playerRef?.current?.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); // Start observing the component
+    }
+
+    return () => {
+      if (videoRefs.current) {
+        observer.unobserve(videoRef.current); // Clean up the observer when the component unmounts
+      }
+    };
+  }, []);
+
   return (
     <div
+      ref={videoRefs}
       id={`video-container-${id}`}
       className="sb-relative sb-rounded-md sb-overflow-hidden"
     >

package/dist/components/VideoPlayerComponent/style/style.css

@@ -4,6 +4,7 @@
 }
 .vjs-control-bar{
   justify-content: center;
+  transition: opacity 0.5s ease-in-out;
 }
 .video-js .vjs-big-play-button {
   background-color: transparent;

package/dist/components/VolumeSlider/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import Slider from "../Slider";
 import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
 import { MuteIcon, UnmuteIcon } from "../../images";
@@ -11,11 +11,18 @@ const VolumeSlider = ({ width = 0, setIsSeeking }) => {
     useEffect(() => {
         setVolume((player === null || player === void 0 ? void 0 : player.muted()) ? 0 : Number(player === null || player === void 0 ? void 0 : player.volume()) * 100 || 0);
     }, [player]);
+    const timeoutRef = React.useRef(null);
     const toggleVisiblity = (e) => {
         e.preventDefault();
         e.stopPropagation();
         setIsSeeking(isVisible);
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
         setVisible((prev) => !prev);
+        timeoutRef.current = setTimeout(() => {
+            setVisible(false);
+        }, 5000);
     };
     const handleValueChange = (e) => {
         e.preventDefault();
@@ -30,9 +37,11 @@ const VolumeSlider = ({ width = 0, setIsSeeking }) => {
             player === null || player === void 0 ? void 0 : player.muted(false);
         }
     };
-    return (_jsxs("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`, children: [_jsx("div", { className: `sb-flex sb-relative ${width < 400 ? "" : ""} sb-top-1 sb-items-end`, onClick: toggleVisiblity, children: volume === 0 || (player === null || player === void 0 ? void 0 : player.muted()) ? (_jsx(MuteIcon, { className: `sb-w-3 sb-h-3 ${width < 400 ? " " : ""}  sb-h-5 sb-w-5` })) : (_jsx(UnmuteIcon, { className: `sb-w-3 sb-h-3 ${width < 400 ? "" : ""} sb-h-5 sb-w-5` })) }), _jsx("div", { className: "sb-flex  sb-items-center sb-justify-center", children: _jsx("div", { className: `sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible
+    return (_jsxs("div", { 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: [_jsx("div", { className: `sb-flex sb-relative ${width < 400 ? "-sb-top-1" : "sb-top-1"}  `, onClick: toggleVisiblity, children: volume === 0 || (player === null || player === void 0 ? void 0 : player.muted()) ? (_jsx(MuteIcon, { className: `sb-w-3 sb-h-3 ${width < 400 ? " " : ""}  sb-h-5 sb-w-5` })) : (_jsx(UnmuteIcon, { className: `sb-w-3 sb-h-3 ${width < 400 ? "" : ""} sb-h-5 sb-w-5` })) }), _jsx("div", { className: "sb-flex  sb-items-center sb-justify-center", children: _jsx("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 " : ""}`, children: _jsx(Slider, { value: volume, handleValueChange: handleValueChange, min: MIN, max: MAX, className: "!sb-w-16" }) }) })] }));
+                        : "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: _jsx(Slider, { value: volume, handleValueChange: handleValueChange, min: MIN, max: MAX, className: "!sb-w-16" }) }) })] }));
 };
 export default VolumeSlider;
 //# sourceMappingURL=index.js.map

package/dist/components/VolumeSlider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VolumeSlider/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VolumeSlider/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/VolumeSlider/index.tsx

@@ -15,11 +15,19 @@ const VolumeSlider = ({ width = 0, setIsSeeking }: Props) => {
   useEffect(() => {
     setVolume(player?.muted() ? 0 : Number(player?.volume()) * 100 || 0);
   }, [player]);
+  const timeoutRef = React.useRef<any>(null);
+
   const toggleVisiblity = (e: any) => {
     e.preventDefault();
     e.stopPropagation();
     setIsSeeking(isVisible);
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
     setVisible((prev) => !prev);
+    timeoutRef.current = setTimeout(() => {
+      setVisible(false);
+    }, 5000);
   };
   const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     e.preventDefault();
@@ -35,15 +43,17 @@ const VolumeSlider = ({ width = 0, setIsSeeking }: Props) => {
   };
   return (
     <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`}
     >
       {/* Mute/Unmute Icon */}
       <div
         className={`sb-flex sb-relative ${
-          width < 400 ? "" : ""
-        } sb-top-1 sb-items-end`}
+          width < 400 ? "-sb-top-1" : "sb-top-1"
+        }  `}
         onClick={toggleVisiblity}
       >
         {volume === 0 || player?.muted() ? (
@@ -64,7 +74,11 @@ const VolumeSlider = ({ width = 0, setIsSeeking }: Props) => {
             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 ${
+          }  ${
+            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 " : ""
           }`}
         >

package/dist/index.css

@@ -41,6 +41,7 @@ input[type=range]::-moz-range-thumb {
 }
 .vjs-control-bar {
   justify-content: center;
+  transition: opacity 0.5s ease-in-out;
 }
 .video-js .vjs-big-play-button {
   background-color: transparent;
@@ -421,6 +422,15 @@ video {
 .sb-relative {
   position: relative;
 }
+.\!sb-top-8 {
+  top: 2rem !important;
+}
+.-sb-left-9 {
+  left: -2.25rem;
+}
+.-sb-top-1 {
+  top: -0.25rem;
+}
 .sb-bottom-10 {
   bottom: 2.5rem;
 }
@@ -526,8 +536,8 @@ video {
 .sb-w-5 {
   width: 1.25rem;
 }
-.sb-w-\[0px\] {
-  width: 0px;
+.sb-w-\[100px\] {
+  width: 100px;
 }
 .sb-w-\[150px\] {
   width: 150px;
@@ -538,6 +548,9 @@ video {
 .sb-w-\[22px\] {
   width: 22px;
 }
+.sb-w-\[90px\] {
+  width: 90px;
+}
 .sb-w-full {
   width: 100%;
 }
@@ -549,10 +562,6 @@ 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-y-9 {
-  --tw-translate-y: -2.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%;
   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));
@@ -561,6 +570,10 @@ video {
   --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));
 }
+.sb-translate-y-1 {
+  --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-rotate-90 {
   --tw-rotate: -90deg;
   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));
@@ -569,6 +582,10 @@ video {
   --tw-rotate: 0deg;
   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-rotate-90 {
+  --tw-rotate: 90deg;
+  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-transform {
   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));
 }
@@ -595,20 +612,20 @@ video {
 .sb-flex-col-reverse {
   flex-direction: column-reverse;
 }
+.\!sb-items-start {
+  align-items: flex-start !important;
+}
 .sb-items-start {
   align-items: flex-start;
 }
-.\!sb-items-end {
-  align-items: flex-end !important;
-}
 .sb-items-end {
   align-items: flex-end;
 }
 .sb-items-center {
   align-items: center;
 }
-.sb-justify-start {
-  justify-content: flex-start;
+.\!sb-justify-start {
+  justify-content: flex-start !important;
 }
 .sb-justify-center {
   justify-content: center;
@@ -697,6 +714,10 @@ video {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
 }
+.sb-py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
 .sb-py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -708,6 +729,9 @@ video {
 .sb-pb-2 {
   padding-bottom: 0.5rem;
 }
+.sb-pt-2 {
+  padding-top: 0.5rem;
+}
 .sb-text-left {
   text-align: left;
 }

package/dist/index.d.mts

@@ -43,7 +43,8 @@ type Props<T = any> = {
     handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
     onPlay?: (time: number) => void;
     onPause?: (time: number) => void;
+    isFocused?: boolean;
 };
-declare const SoftBuildersVideoPlayer: React.MemoExoticComponent<(<T>({ options, notes, chapters, startTime, handleSaveNoteAction, onPlay, onPause, }: Props<T>) => react_jsx_runtime.JSX.Element)>;
+declare const SoftBuildersVideoPlayer: React.MemoExoticComponent<(<T>({ options, notes, chapters, startTime, handleSaveNoteAction, onPlay, onPause, isFocused, }: Props<T>) => react_jsx_runtime.JSX.Element)>;
 
 export { type SoftBuildersVideoPlayerChapter, type SoftBuildersVideoPlayerNote, type SoftBuildersVideoPlayerOptions, type SoftBuildersVideoPlayerSource, type SoftBuildersVideoPlayerTrack, SoftBuildersVideoPlayer as default };