softbuilders-react-video-player 1.3.2 → 1.3.4

package/dist/index.mjs

@@ -31,11 +31,10 @@ var __objRest = (source, exclude) => {
 };
 
 // src/components/SoftBuildersVideoPlayer/index.tsx
-import { forwardRef as forwardRef2, memo, useEffect as useEffect16, useState as useState15 } from "react";
+import { memo, useEffect as useEffect16, useState as useState15 } from "react";
 
 // src/components/VideoPlayerComponent/index.tsx
 import {
-  forwardRef,
   Suspense,
   useEffect as useEffect15,
   useRef as useRef2,
@@ -628,8 +627,10 @@ var VolumeSlider = ({
       const currentVolume = (player == null ? void 0 : player.muted()) ? 0 : Number((player == null ? void 0 : player.volume()) || 0) * 100;
       setVolume(currentVolume);
     };
-    updateVolumeState();
-    player == null ? void 0 : player.on("volumechange", updateVolumeState);
+    if (player) {
+      updateVolumeState();
+      player == null ? void 0 : player.on("volumechange", updateVolumeState);
+    }
     return () => {
       player == null ? void 0 : player.off("volumechange", updateVolumeState);
     };
@@ -1879,76 +1880,118 @@ var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chap
     }
   }
 };
-var VideoPlayerComponent = forwardRef(
-  ({
-    id,
-    options,
-    notes,
-    chapters,
-    startTime = 0,
-    handleSaveNoteAction,
-    poster,
-    onPlay,
-    onPause,
-    disableNote,
-    childRef,
-    bottomRedBar = true,
-    noteButtonClick,
-    videoID,
-    isTrailer,
-    height
-  }, ref) => {
-    var _a;
-    const videoRef = useRef2(void 0);
-    const playerRef = useRef2(void 0);
-    const idRef = useRef2(void 0);
-    const [isReady, setIsReady] = useState14(false);
-    const [isPaused, setIsPaused] = useState14(!options.autoplay);
-    const [duration, setDuration] = useState14(1);
-    const [opacity, setOpacity] = useState14("0");
-    const [isControlBarPresent, setIsControlBarPresent] = useState14(true);
-    const [bgColor, setBgColor] = useState14("transparent");
-    const [isQualityMenuOpen, setIsQualityMenuOpen] = useState14(false);
-    const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState14(false);
-    const [isHovered, setIsHovered] = useState14(false);
-    const [isNoteOpen, setNoteOpen] = useState14(false);
-    const [heightValue, setHeightValue] = useState14(0);
-    const [isLoading, setIsloading] = useState14(false);
-    const onReady = (player) => {
-      if (playerRef) {
-        playerRef.current = player;
-        setIsReady(true);
-        player == null ? void 0 : player.currentTime(startTime);
-        player.on("waiting", () => {
-        });
-        player.on("dispose", () => {
-          videojs.log("player will dispose");
-          setIsReady(false);
-        });
-        player.on("loadedmetadata", () => {
-          const d = player.duration() || 0;
-          setDuration(d);
-        });
+var VideoPlayerComponent = ({
+  id,
+  options,
+  notes,
+  chapters,
+  startTime = 0,
+  handleSaveNoteAction,
+  poster,
+  onPlay,
+  onPause,
+  disableNote,
+  childRef,
+  bottomRedBar = true,
+  noteButtonClick,
+  videoID,
+  isTrailer,
+  height
+}) => {
+  var _a;
+  const videoRef = useRef2(void 0);
+  const playerRef = useRef2(void 0);
+  const idRef = useRef2(void 0);
+  const [isReady, setIsReady] = useState14(false);
+  const [isPaused, setIsPaused] = useState14(!options.autoplay);
+  const [duration, setDuration] = useState14(1);
+  const [opacity, setOpacity] = useState14("0");
+  const [isControlBarPresent, setIsControlBarPresent] = useState14(true);
+  const [bgColor, setBgColor] = useState14("transparent");
+  const [isQualityMenuOpen, setIsQualityMenuOpen] = useState14(false);
+  const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState14(false);
+  const [isHovered, setIsHovered] = useState14(false);
+  const [isNoteOpen, setNoteOpen] = useState14(false);
+  const [heightValue, setHeightValue] = useState14(0);
+  const [isLoading, setIsloading] = useState14(false);
+  const onReady = (player) => {
+    if (playerRef) {
+      playerRef.current = player;
+      setIsReady(true);
+      player == null ? void 0 : player.currentTime(startTime);
+      player.on("waiting", () => {
+      });
+      player.on("dispose", () => {
+        videojs.log("player will dispose");
+        setIsReady(false);
+      });
+      player.on("loadedmetadata", () => {
+        const d = player.duration() || 0;
+        setDuration(d);
+      });
+    }
+  };
+  useEffect15(() => {
+    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);
+      }
+      videoRef.current.appendChild(videoElement);
+      videoElement.style.width = "100%";
+      videoElement.style.height = "100%";
+      videoElement.style.objectFit = "cover";
+      playerRef.current = videojs(videoElement, options, () => {
+        onReady(playerRef.current);
+      });
+    }
+    return () => {
+      if (playerRef.current) {
+        idRef.current = options;
+        playerRef.current.dispose();
+        playerRef.current = void 0;
+        setTimeout(() => {
+          if (bigPlayButtonRoot[id]) {
+            bigPlayButtonRoot[id].unmount();
+            bigPlayButtonRoot[id] = void 0;
+          }
+          if (controlBarRoot[id]) {
+            controlBarRoot[id].unmount();
+            controlBarRoot[id] = void 0;
+          }
+        }, 0);
       }
     };
-    useEffect15(() => {
-      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);
-        }
-        videoRef.current.appendChild(videoElement);
-        videoElement.style.width = "100%";
-        videoElement.style.height = "100%";
-        videoElement.style.objectFit = "cover";
-        playerRef.current = videojs(videoElement, options, () => {
-          onReady(playerRef.current);
-        });
+  }, [id]);
+  useEffect15(() => {
+    if (playerRef.current) {
+      const myPlayer = playerRef.current.currentSources();
+      playerRef.current.src(options.sources);
+      playerRef.current.load();
+    }
+  }, [options.sources[0].type]);
+  useEffect15(() => {
+    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);
       }
-      return () => {
-        if (playerRef.current) {
+      videoRef.current.appendChild(videoElement);
+      videoElement.style.width = "100%";
+      videoElement.style.height = "100%";
+      videoElement.style.objectFit = "cover";
+      playerRef.current = videojs(videoElement, options, () => {
+        onReady(playerRef.current);
+      });
+    }
+    return () => {
+      var _a2, _b;
+      if (playerRef.current) {
+        if (!isEqual((_b = (_a2 = idRef == null ? void 0 : idRef.current) == null ? void 0 : _a2.sources) != null ? _b : "", options.sources)) {
           idRef.current = options;
           playerRef.current.dispose();
           playerRef.current = void 0;
@@ -1963,323 +2006,279 @@ var VideoPlayerComponent = forwardRef(
             }
           }, 0);
         }
-      };
-    }, [id]);
-    useEffect15(() => {
-      if (playerRef.current) {
-        const myPlayer = playerRef.current.currentSources();
-        playerRef.current.src(options.sources);
-        playerRef.current.load();
-      }
-    }, [options.sources[0].type]);
-    useEffect15(() => {
-      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);
-        }
-        videoRef.current.appendChild(videoElement);
-        videoElement.style.width = "100%";
-        videoElement.style.height = "100%";
-        videoElement.style.objectFit = "cover";
-        playerRef.current = videojs(videoElement, options, () => {
-          onReady(playerRef.current);
-        });
-      }
-      return () => {
-        var _a2, _b;
-        if (playerRef.current) {
-          if (!isEqual((_b = (_a2 = idRef == null ? void 0 : idRef.current) == null ? void 0 : _a2.sources) != null ? _b : "", options.sources)) {
-            idRef.current = options;
-            playerRef.current.dispose();
-            playerRef.current = void 0;
-            setTimeout(() => {
-              if (bigPlayButtonRoot[id]) {
-                bigPlayButtonRoot[id].unmount();
-                bigPlayButtonRoot[id] = void 0;
-              }
-              if (controlBarRoot[id]) {
-                controlBarRoot[id].unmount();
-                controlBarRoot[id] = void 0;
-              }
-            }, 0);
-          }
-        }
-      };
-    }, [options]);
-    useEffect15(() => {
-      if (playerRef.current) {
-        playerRef.current.currentTime(startTime);
       }
-    }, [startTime]);
-    useEffect15(() => {
-      if (playerRef.current && isReady) {
-        const currentTime = playerRef.current.currentTime() || 0;
-        if (isPaused) {
-          if (onPause) onPause(currentTime);
-        } else {
-          if (onPlay) onPlay(currentTime);
-        }
+    };
+  }, [options]);
+  useEffect15(() => {
+    if (playerRef.current) {
+      playerRef.current.currentTime(startTime);
+    }
+  }, [startTime]);
+  useEffect15(() => {
+    if (playerRef.current && isReady) {
+      const currentTime = playerRef.current.currentTime() || 0;
+      if (isPaused) {
+        if (onPause) onPause(currentTime);
+      } else {
+        if (onPlay) onPlay(currentTime);
       }
-    }, [isPaused]);
-    useEffect15(() => {
-      const controlBarTimeout = setTimeout(() => {
-        renderControlBar(
+    }
+  }, [isPaused]);
+  useEffect15(() => {
+    const controlBarTimeout = setTimeout(() => {
+      renderControlBar(
+        id,
+        playerRef.current,
+        isPaused,
+        setIsPaused,
+        duration,
+        notes,
+        chapters,
+        5,
+        handleSaveNoteAction,
+        opacity,
+        (e) => {
+          handlePlayerClick(e, true);
+        },
+        bgColor,
+        setIsQualityMenuOpen,
+        setIsSubtitleMenuOpen,
+        disableNote,
+        setNoteOpen,
+        noteButtonClick,
+        isTrailer
+      );
+    }, 0);
+    return () => clearTimeout(controlBarTimeout);
+  }, [
+    isPaused,
+    setIsPaused,
+    notes,
+    handleSaveNoteAction,
+    duration,
+    opacity,
+    isReady,
+    id,
+    (_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.isFullscreen_
+  ]);
+  useEffect15(() => {
+    if (isReady) {
+      const playButtonTimeout = setTimeout(() => {
+        renderBigPlayButton(
           id,
           playerRef.current,
           isPaused,
           setIsPaused,
-          duration,
-          notes,
-          chapters,
-          5,
-          handleSaveNoteAction,
           opacity,
-          (e) => {
-            handlePlayerClick(e, true);
-          },
-          bgColor,
-          setIsQualityMenuOpen,
-          setIsSubtitleMenuOpen,
-          disableNote,
-          setNoteOpen,
-          noteButtonClick,
-          isTrailer
+          height,
+          heightValue,
+          isLoading
         );
-      }, 0);
-      return () => clearTimeout(controlBarTimeout);
-    }, [
-      isPaused,
-      setIsPaused,
-      notes,
-      handleSaveNoteAction,
-      duration,
-      opacity,
-      isReady,
-      id,
-      (_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.isFullscreen_
-    ]);
-    useEffect15(() => {
-      if (isReady) {
-        const playButtonTimeout = setTimeout(() => {
-          renderBigPlayButton(
-            id,
-            playerRef.current,
-            isPaused,
-            setIsPaused,
-            opacity,
-            height,
-            heightValue,
-            isLoading
-          );
-        }, 500);
-        return () => clearTimeout(playButtonTimeout);
-      }
-    }, [isPaused, opacity, isReady, id, height, heightValue, isLoading]);
-    useEffect15(() => {
-      if (playerRef.current) {
-        const intervalId = setInterval(() => {
-          if (playerRef.current) setIsPaused(playerRef.current.paused());
-        }, 500);
-        return () => clearInterval(intervalId);
-      }
-    }, []);
-    const timeoutRef = useRef2(null);
-    useEffect15(() => {
-      if (isQualityMenuOpen || isSubtitleMenuOpen) {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-        }
-        setOpacity("100");
-      } else {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-        }
-        setOpacity("0");
-        timeoutRef.current = setTimeout(() => {
-          setIsControlBarPresent(false);
-        }, 3e3);
-      }
-    }, [isQualityMenuOpen, isSubtitleMenuOpen]);
-    useEffect15(() => {
-      if (isNoteOpen) {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-        }
-      } else {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-        }
-        timeoutRef.current = setTimeout(() => {
-          setIsControlBarPresent(false);
-        }, 3e3);
-      }
-    }, [isNoteOpen]);
-    const handlePlayerClick = async (e, isTimerOnly = false) => {
-      e.preventDefault();
+      }, 500);
+      return () => clearTimeout(playButtonTimeout);
+    }
+  }, [isPaused, opacity, isReady, id, height, heightValue, isLoading]);
+  useEffect15(() => {
+    if (playerRef.current) {
+      const intervalId = setInterval(() => {
+        if (playerRef.current) setIsPaused(playerRef.current.paused());
+      }, 500);
+      return () => clearInterval(intervalId);
+    }
+  }, []);
+  const timeoutRef = useRef2(null);
+  useEffect15(() => {
+    if (isQualityMenuOpen || isSubtitleMenuOpen) {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
       setOpacity("100");
-      setIsControlBarPresent(true);
+    } else {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      setOpacity("0");
       timeoutRef.current = setTimeout(() => {
-        setOpacity("0");
-        setBgColor("transparent");
         setIsControlBarPresent(false);
       }, 3e3);
-      if (isTimerOnly) {
-        return;
+    }
+  }, [isQualityMenuOpen, isSubtitleMenuOpen]);
+  useEffect15(() => {
+    if (isNoteOpen) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
       }
-      if (!isControlBarPresent) {
-        return;
+    } else {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
       }
-      if (playerRef.current) {
-        if (playerRef.current.paused()) {
-          try {
-            await playerRef.current.play();
-            setIsPaused(false);
-          } catch (error) {
-            console.error("Failed to play video:", error);
-          }
-        } else {
-          playerRef.current.pause();
-          setIsPaused(true);
-          if (onPause) onPause(playerRef.current.currentTime() || 0);
+      timeoutRef.current = setTimeout(() => {
+        setIsControlBarPresent(false);
+      }, 3e3);
+    }
+  }, [isNoteOpen]);
+  const handlePlayerClick = async (e, isTimerOnly = false) => {
+    e.preventDefault();
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setOpacity("100");
+    setIsControlBarPresent(true);
+    timeoutRef.current = setTimeout(() => {
+      setOpacity("0");
+      setBgColor("transparent");
+      setIsControlBarPresent(false);
+    }, 3e3);
+    if (isTimerOnly) {
+      return;
+    }
+    if (!isControlBarPresent) {
+      return;
+    }
+    if (playerRef.current) {
+      if (playerRef.current.paused()) {
+        try {
+          await playerRef.current.play();
+          setIsPaused(false);
+        } catch (error) {
+          console.error("Failed to play video:", error);
         }
+      } else {
+        playerRef.current.pause();
+        setIsPaused(true);
+        if (onPause) onPause(playerRef.current.currentTime() || 0);
       }
-    };
-    const videoRefs = useRef2(null);
-    useEffect15(() => {
-      const observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            var _a2, _b;
-            if (entry.isIntersecting === false) {
-              if (((_a2 = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a2.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);
-                }
+    }
+  };
+  const videoRefs = useRef2(null);
+  useEffect15(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          var _a2, _b;
+          if (entry.isIntersecting === false) {
+            if (((_a2 = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a2.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)
-        }
-      );
+          }
+        });
+      },
+      {
+        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.observe(videoRefs.current);
+        observer.unobserve(videoRef.current);
       }
-      return () => {
-        if (videoRefs.current) {
-          observer.unobserve(videoRef.current);
-        }
-      };
-    }, []);
-    const [timeSeeker, setTimeSeeker] = useState14("0");
-    useEffect15(() => {
-      const updateTimeSeeker = () => {
-        if (playerRef.current && isReady) {
-          const currentTime = playerRef.current.currentTime();
-          const duration2 = playerRef.current.duration();
-          if (duration2 && currentTime !== void 0) {
-            setTimeSeeker(`${currentTime / duration2 * 100}%`);
-          } else {
-            setTimeSeeker("0");
-          }
+    };
+  }, []);
+  const [timeSeeker, setTimeSeeker] = useState14("0");
+  useEffect15(() => {
+    const updateTimeSeeker = () => {
+      if (playerRef.current && isReady) {
+        const currentTime = playerRef.current.currentTime();
+        const duration2 = playerRef.current.duration();
+        if (duration2 && currentTime !== void 0) {
+          setTimeSeeker(`${currentTime / duration2 * 100}%`);
+        } else {
+          setTimeSeeker("0");
         }
-      };
-      const interval = setInterval(updateTimeSeeker, 500);
-      return () => clearInterval(interval);
-    }, [playerRef]);
-    const container = document.getElementById(`video-container-${id}`);
-    function handleWidthChange(height2) {
-      setHeightValue(height2);
+      }
+    };
+    const interval = setInterval(updateTimeSeeker, 500);
+    return () => clearInterval(interval);
+  }, [playerRef]);
+  const container = document.getElementById(`video-container-${id}`);
+  function handleWidthChange(height2) {
+    setHeightValue(height2);
+  }
+  const resizeObserver = new ResizeObserver((entries) => {
+    for (let entry of entries) {
+      const currentHeight = entry.contentRect.height;
+      handleWidthChange(currentHeight);
     }
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        const currentHeight = entry.contentRect.height;
-        handleWidthChange(currentHeight);
+  });
+  const controlBar = container == null ? void 0 : container.querySelector(".vjs-control-bar");
+  if (controlBar) {
+    resizeObserver.observe(controlBar);
+  }
+  function debounce(func, delay) {
+    let timeoutId;
+    return function(arg) {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
       }
+      timeoutId = setTimeout(() => {
+        func(arg);
+      }, delay);
+    };
+  }
+  if (playerRef.current) {
+    playerRef.current.on("waiting", function() {
+      debounce((arg) => setIsloading(arg), 300)(true);
     });
-    const controlBar = container == null ? void 0 : container.querySelector(".vjs-control-bar");
-    if (controlBar) {
-      resizeObserver.observe(controlBar);
-    }
-    function debounce(func, delay) {
-      let timeoutId;
-      return function(arg) {
-        if (timeoutId) {
-          clearTimeout(timeoutId);
+    playerRef.current.on("playing", function() {
+      debounce((arg) => setIsloading(arg), 300)(false);
+    });
+  }
+  return /* @__PURE__ */ jsx41(Fragment4, { children: /* @__PURE__ */ jsx41(
+    Suspense,
+    {
+      fallback: /* @__PURE__ */ jsx41(SkillamiIcon_default, { className: " sb-w-16 sb-h-16 sb-animate-spin sb-absolute -sb-top-2 -sb-right-2 " }),
+      children: /* @__PURE__ */ jsxs19(
+        "div",
+        {
+          ref: videoRefs,
+          id: `video-container-${id}`,
+          onMouseMove: () => {
+            !isNoteOpen ? handlePlayerClick(event, true) : "";
+          },
+          className: "sb-relative sb-rounded-md  sb-overflow-hidden sb-w-full sb-h-full sb-bottom-2 ",
+          onMouseEnter: () => setIsHovered(true),
+          onMouseLeave: () => setIsHovered(false),
+          children: [
+            bottomRedBar && /* @__PURE__ */ jsx41(
+              "div",
+              {
+                ref: childRef,
+                onClick: handlePlayerClick,
+                className: `sb-h-[3px] sb-transition-opacity sb-duration-500 sb-delay-400 sb-z-10 ease-in-out sb-border-spacing-x-2 sb-absolute sb-bg-[red] sb-bottom-0 ${opacity == "100" ? "sb-opacity-0" : "sb-opacity-100"}`,
+                style: {
+                  width: timeSeeker
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx41(
+              "div",
+              {
+                className: "hover:sb-cursor-pointer sb-w-full sb-h-full",
+                "data-vjs-player": true,
+                children: /* @__PURE__ */ jsx41(
+                  "div",
+                  {
+                    onClick: handlePlayerClick,
+                    ref: videoRef,
+                    className: "sb-h-full sb-w-full sb-relative"
+                  }
+                )
+              }
+            )
+          ]
         }
-        timeoutId = setTimeout(() => {
-          func(arg);
-        }, delay);
-      };
-    }
-    if (playerRef.current) {
-      playerRef.current.on("waiting", function() {
-        debounce((arg) => setIsloading(arg), 300)(true);
-      });
-      playerRef.current.on("playing", function() {
-        debounce((arg) => setIsloading(arg), 300)(false);
-      });
+      )
     }
-    return /* @__PURE__ */ jsx41(Fragment4, { children: /* @__PURE__ */ jsx41(
-      Suspense,
-      {
-        fallback: /* @__PURE__ */ jsx41(SkillamiIcon_default, { className: " sb-w-16 sb-h-16 sb-animate-spin sb-absolute -sb-top-2 -sb-right-2 " }),
-        children: /* @__PURE__ */ jsxs19(
-          "div",
-          {
-            ref: videoRefs,
-            id: `video-container-${id}`,
-            onMouseMove: () => {
-              !isNoteOpen ? handlePlayerClick(event, true) : "";
-            },
-            className: "sb-relative sb-rounded-md  sb-overflow-hidden sb-w-full sb-h-full sb-bottom-2 ",
-            onMouseEnter: () => setIsHovered(true),
-            onMouseLeave: () => setIsHovered(false),
-            children: [
-              bottomRedBar && /* @__PURE__ */ jsx41(
-                "div",
-                {
-                  ref: childRef,
-                  onClick: handlePlayerClick,
-                  className: `sb-h-[3px] sb-transition-opacity sb-duration-500 sb-delay-400 sb-z-10 ease-in-out sb-border-spacing-x-2 sb-absolute sb-bg-[red] sb-bottom-0 ${opacity == "100" ? "sb-opacity-0" : "sb-opacity-100"}`,
-                  style: {
-                    width: timeSeeker
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx41(
-                "div",
-                {
-                  className: "hover:sb-cursor-pointer sb-w-full sb-h-full",
-                  "data-vjs-player": true,
-                  children: /* @__PURE__ */ jsx41(
-                    "div",
-                    {
-                      onClick: handlePlayerClick,
-                      ref: videoRef,
-                      className: "sb-h-full sb-w-full sb-relative"
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        )
-      }
-    ) });
-  }
-);
+  ) });
+};
 var VideoPlayerComponent_default = VideoPlayerComponent;
 
 // src/components/SoftBuildersVideoPlayer/index.tsx
@@ -2296,89 +2295,89 @@ var DEFAULT_OPTIONS = {
   sources: [],
   tracks: []
 };
-var Component = forwardRef2(
-  ({
-    options,
-    notes,
-    chapters,
-    startTime = 0,
-    handleSaveNoteAction,
-    onPlay,
-    onPause,
-    isFocused = true,
-    disableNote,
-    childRef,
-    bottomRedBar,
-    noteButtonClick,
-    videoId,
-    isTrailer = false,
-    height
-  }) => {
-    options = __spreadProps(__spreadValues({}, options), {
-      responsive: true,
-      inactivityTimeout: 0,
-      fullscreen: {
-        navigationUI: "hide"
-      }
-    });
-    if (options.autoplay === void 0)
-      options.autoplay = DEFAULT_OPTIONS.autoplay;
-    if (options.controls === void 0)
-      options.controls = DEFAULT_OPTIONS.controls;
-    if (options.fluid === void 0) options.fluid = DEFAULT_OPTIONS.fluid;
-    if ((options == null ? void 0 : options.muted) === void 0) options.muted = DEFAULT_OPTIONS == null ? void 0 : DEFAULT_OPTIONS.muted;
-    if (options.height === void 0) options.height = DEFAULT_OPTIONS.height;
-    if (options.width === void 0) options.width = DEFAULT_OPTIONS.width;
-    const [tracks, setTracks] = useState15([]);
-    useEffect16(() => {
-    }, [isFocused]);
-    useEffect16(() => {
-      const getTracks = async () => {
-        const newTracks = [];
-        if (Array.isArray(options == null ? void 0 : options.tracks))
-          for (const [i, s] of options == null ? void 0 : options.tracks.entries()) {
-            let src = s.src;
-            if (s.memeType == "text/srt") {
-              src = await convertSRTtoVTT(s.src);
-            }
-            newTracks.push(__spreadProps(__spreadValues({}, s), {
-              src
-            }));
+var Component = ({
+  options,
+  notes,
+  chapters,
+  startTime = 0,
+  handleSaveNoteAction,
+  onPlay,
+  onPause,
+  isFocused = true,
+  disableNote,
+  childRef,
+  bottomRedBar,
+  noteButtonClick,
+  videoId,
+  isTrailer = false,
+  height
+}) => {
+  options = __spreadProps(__spreadValues({}, options), {
+    responsive: true,
+    inactivityTimeout: 0,
+    fullscreen: {
+      navigationUI: "hide"
+    }
+  });
+  if (options.autoplay === void 0)
+    options.autoplay = DEFAULT_OPTIONS.autoplay;
+  if (options.controls === void 0)
+    options.controls = DEFAULT_OPTIONS.controls;
+  if (options.fluid === void 0) options.fluid = DEFAULT_OPTIONS.fluid;
+  if ((options == null ? void 0 : options.muted) === void 0) options.muted = DEFAULT_OPTIONS == null ? void 0 : DEFAULT_OPTIONS.muted;
+  if (options.height === void 0) options.height = DEFAULT_OPTIONS.height;
+  if (options.width === void 0) options.width = DEFAULT_OPTIONS.width;
+  const [tracks, setTracks] = useState15([]);
+  useEffect16(() => {
+  }, [isFocused]);
+  useEffect16(() => {
+    const getTracks = async () => {
+      const newTracks = [];
+      if (Array.isArray(options == null ? void 0 : options.tracks)) {
+        for (const [i, s] of options == null ? void 0 : options.tracks.entries()) {
+          let src = s.src;
+          if (s.memeType == "text/srt") {
+            src = await convertSRTtoVTT(s.src);
           }
-        setTracks(newTracks);
-      };
-      getTracks();
-    }, [options == null ? void 0 : options.tracks]);
-    console.log("options:===. ", options);
-    const id = (Date.now() + Math.random() * 100).toString();
-    const [uuid, setUuid] = useState15("");
-    useEffect16(() => {
-      setUuid(uuidv4());
-    }, []);
-    return /* @__PURE__ */ jsx42(
-      VideoPlayerComponent_default,
-      {
-        id: uuid,
-        chapters,
-        options: __spreadProps(__spreadValues({}, options), { tracks }),
-        notes,
-        poster: "",
-        startTime,
-        handleSaveNoteAction,
-        disableNote,
-        onPause,
-        onPlay,
-        childRef,
-        bottomRedBar,
-        noteButtonClick,
-        isTrailer,
-        height
+          newTracks.push(__spreadProps(__spreadValues({}, s), {
+            src
+          }));
+        }
       }
-    );
-  }
-);
+      setTracks(newTracks);
+    };
+    getTracks();
+  }, [options == null ? void 0 : options.tracks]);
+  console.log("options:===. ", options);
+  const id = (Date.now() + Math.random() * 100).toString();
+  const [uuid, setUuid] = useState15("");
+  useEffect16(() => {
+    setUuid(uuidv4());
+  }, []);
+  return /* @__PURE__ */ jsx42(
+    VideoPlayerComponent_default,
+    {
+      id: uuid,
+      chapters,
+      options: __spreadProps(__spreadValues({}, options), { tracks }),
+      notes,
+      poster: "",
+      startTime,
+      handleSaveNoteAction,
+      disableNote,
+      onPause,
+      onPlay,
+      childRef,
+      bottomRedBar,
+      noteButtonClick,
+      isTrailer,
+      height
+    }
+  );
+};
 var SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
-  return isEqual2(prevProps.options, nextProps.options) && prevProps.options.sources[0].type === nextProps.options.sources[0].type && prevProps.notes === nextProps.notes && prevProps.chapters === nextProps.chapters && prevProps.startTime === nextProps.startTime && prevProps.height === nextProps.height;
+  var _a, _b, _c, _d, _e;
+  return isEqual2(prevProps.options, nextProps.options) && ((_b = (_a = prevProps == null ? void 0 : prevProps.options.sources) == null ? void 0 : _a[0]) == null ? void 0 : _b.type) === ((_e = (_d = (_c = nextProps == null ? void 0 : nextProps.options) == null ? void 0 : _c.sources) == null ? void 0 : _d[0]) == null ? void 0 : _e.type) && prevProps.notes === nextProps.notes && prevProps.chapters === nextProps.chapters && prevProps.startTime === nextProps.startTime && prevProps.height === nextProps.height;
 });
 var SoftBuildersVideoPlayer_default = SoftBuildersVideoPlayer;