softbuilders-react-video-player 1.2.24 → 1.3.1

package/dist/index.mjs

@@ -727,33 +727,33 @@ var VolumeSlider = ({
   return /* @__PURE__ */ jsxs7(
     "div",
     {
-      className: `sb-flex ${isVisible ? "" : ""}  ${width > 400 && !isTrailer ? "sb-flex-col-reverse" : `sb-flex-col ${isTrailer ? "sb-justify-start" : ""}`} sb-items-center sb-gap-1 sb-h-full`,
+      className: `sb-flex ${isVisible ? "" : ""}  ${(width > 400 || (player == null ? void 0 : player.isFullscreen_) === true) && !isTrailer ? "sb-flex-col-reverse" : `sb-flex-col ${isTrailer ? "sb-justify-start" : ""}`} sb-items-center sb-gap-1 sb-h-full`,
       children: [
         /* @__PURE__ */ jsx24(
           "div",
           {
-            className: `sb-flex sb-relative ${width < 400 || isTrailer ? "-sb-top-1" : "sb-top-1"}`,
+            className: `sb-flex sb-relative ${width < 400 && (player == null ? void 0 : player.isFullscreen_) === false || isTrailer ? "-sb-top-1" : "sb-top-1"}`,
             onClick: toggleVisibility,
             onDoubleClick: handleDoubleClick,
             children: volume == 0 || (player == null ? void 0 : player.muted()) ? /* @__PURE__ */ jsx24(
               VolumeMute_default,
               {
-                className: `sb-w-3 sb-h-3 ${width < 400 || isTrailer ? "" : ""} sb-h-5 sb-w-5`
+                className: `sb-w-3 sb-h-3 ${width < 400 && (player == null ? void 0 : player.isFullscreen_) === false || isTrailer ? "" : ""} sb-h-5 sb-w-5`
               }
             ) : volume < 25 ? /* @__PURE__ */ jsx24(
               VolumeVLow_default,
               {
-                className: `sb-w-3 sb-h-3 ${width < 400 || isTrailer ? "" : ""} sb-h-5 sb-w-5`
+                className: `sb-w-3 sb-h-3 ${width < 400 && (player == null ? void 0 : player.isFullscreen_) === false || isTrailer ? "" : ""} sb-h-5 sb-w-5`
               }
             ) : volume < 50 ? /* @__PURE__ */ jsx24(
               VolumeLow_default,
               {
-                className: `sb-w-3 sb-h-3 ${width < 400 || isTrailer ? "" : ""} sb-h-5 sb-w-5`
+                className: `sb-w-3 sb-h-3 ${width < 400 && (player == null ? void 0 : player.isFullscreen_) === false || isTrailer ? "" : ""} sb-h-5 sb-w-5`
               }
             ) : /* @__PURE__ */ jsx24(
               VolumeHigh_default,
               {
-                className: `sb-w-3 sb-h-3 ${width < 400 || isTrailer ? "" : ""} sb-h-5 sb-w-5`
+                className: `sb-w-3 sb-h-3 ${width < 400 && (player == null ? void 0 : player.isFullscreen_) === false || isTrailer ? "" : ""} sb-h-5 sb-w-5`
               }
             )
           }
@@ -761,7 +761,7 @@ var VolumeSlider = ({
         /* @__PURE__ */ jsx24("div", { className: "sb-flex  sb-items-center sb-justify-center", children: /* @__PURE__ */ jsx24(
           "div",
           {
-            className: `  sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible ? "sb-w-[22px] sb-opacity-100 sb-visible" : "sb-w-[22px] sb-opacity-0 sb-invisible"} ${width > 400 && !isTrailer ? "-sb-rotate-90 -sb-translate-y-1" : "sb-rotate-90 sb-translate-y-1"} sb-relative`,
+            className: `  sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible ? "sb-w-[22px] sb-opacity-100 sb-visible" : "sb-w-[22px] sb-opacity-0 sb-invisible"} ${(width > 400 || (player == null ? void 0 : player.isFullscreen_) === true) && !isTrailer ? "-sb-rotate-90 -sb-translate-y-1" : "sb-rotate-90 sb-translate-y-1"} sb-relative`,
             children: /* @__PURE__ */ jsx24(
               Slider_default,
               {
@@ -865,7 +865,7 @@ var MenuButton = ({
 var MenuButton_default = MenuButton;
 
 // src/components/QualityMenu/index.tsx
-import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
 var QualityOption = ({
   isSelected,
   quality,
@@ -873,10 +873,11 @@ var QualityOption = ({
   width,
   isTrailer
 }) => {
+  const { player } = useSoftBuildersVideoPlayerContext();
   return /* @__PURE__ */ jsx26(
     "button",
     {
-      className: `hover:sb-text-orange-500 ${width > 400 && !isTrailer ? "sb-p-2" : "sp-pb-1"}`,
+      className: `hover:sb-text-orange-500 ${(width > 400 || (player == null ? void 0 : player.isFullscreen_) === true) && !isTrailer ? "sb-p-2" : "sp-pb-1"}`,
       onClick: (e) => {
         e.stopPropagation();
         onClick(e);
@@ -885,10 +886,10 @@ var QualityOption = ({
         /* @__PURE__ */ jsx26("div", { className: "sb-col-span-3", children: isSelected ? /* @__PURE__ */ jsx26(
           CheckedIcon_default,
           {
-            className: `${width > 400 && !isTrailer ? "sb-w-5 sb-h-5" : "sb-w-3 sb-h-3"}`
+            className: `${(width > 400 || (player == null ? void 0 : player.isFullscreen_) === true) && !isTrailer ? "sb-w-5 sb-h-5" : "sb-w-3 sb-h-3"}`
           }
         ) : /* @__PURE__ */ jsx26("div", {}) }),
-        /* @__PURE__ */ jsx26("p", { className: "sb-text-left sb-col-span-9", children: quality == null ? void 0 : quality.label })
+        /* @__PURE__ */ jsx26("p", { className: "sb-text-left sb-col-span-9", children: quality.height })
       ] })
     }
   );
@@ -901,9 +902,7 @@ var QualityMenu = ({
 }) => {
   const { player } = useSoftBuildersVideoPlayerContext();
   const [closeMenuFunction, setCloseMenuFunction] = useState4(void 0);
-  const [qualities, setQualities] = useState4(
-    []
-  );
+  const [qualities, setQualities] = useState4([]);
   const [currentQualitySrc, setCurrentQualitySrc] = useState4("Auto");
   useEffect4(() => {
     if (player) {
@@ -911,7 +910,10 @@ var QualityMenu = ({
       const qs = JSON.parse(
         JSON.stringify(sources)
       );
-      setQualities(qs);
+      const qualityLevels = player == null ? void 0 : player.qualityLevels();
+      setQualities(qualityLevels.levels_);
+      console.log("qualityLevels.levels_: ", qualityLevels.levels_.length);
+      setQualities((pre) => [...pre, { width: "auto", height: "auto" }]);
       const source = player == null ? void 0 : player.currentSource();
       const quality = JSON.parse(
         JSON.stringify(source)
@@ -922,18 +924,45 @@ var QualityMenu = ({
       }
     }
   }, [player]);
+  function setQualityByHeight(height) {
+    if (player) {
+      const qualityLevels = player == null ? void 0 : player.qualityLevels();
+      for (let i = 0; i < qualityLevels.length; i++) {
+        const level = qualityLevels[i];
+        level.enabled = level.height === height;
+      }
+    }
+  }
+  function setAutoQuality() {
+    if (player) {
+      const qualityLevels = player.qualityLevels();
+      let highestQuality = null;
+      for (let i = 0; i < qualityLevels.length; i++) {
+        const level = qualityLevels[i];
+        if (!highestQuality || level.height > highestQuality.height) {
+          highestQuality = level;
+        }
+      }
+      if (highestQuality) {
+        for (let i = 0; i < qualityLevels.length; i++) {
+          const level = qualityLevels[i];
+          level.enabled = level === highestQuality;
+        }
+      }
+    }
+  }
   return /* @__PURE__ */ jsx26(
     MenuButton_default,
     {
-      classContainer: `${width < 400 || isTrailer ? "!sb-top-8 -sb-left-9" : ""}`,
+      classContainer: `${width < 400 && (player == null ? void 0 : player.isFullscreen_) === false || isTrailer ? "!sb-top-8 -sb-left-9" : ""}`,
       onClick: (e, isOpen) => {
         onClick && onClick(e, isOpen);
       },
       buttonContent: /* @__PURE__ */ jsx26(SettingsIcon_default, { className: "sb-w-3 sb-h-3" }),
-      menuContent: /* @__PURE__ */ jsx26(
+      menuContent: /* @__PURE__ */ jsx26(Fragment, { children: (qualities == null ? void 0 : qualities.length) > 1 && /* @__PURE__ */ jsx26(
         "div",
         {
-          className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50  ${width > 400 && !isTrailer ? "sb-w-[150px] sb-py-5" : "sb-w-[90px] sb-items-center sb-justify-center sb-py-1"}`,
+          className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50  ${(width > 400 || (player == null ? void 0 : player.isFullscreen_) === true) && !isTrailer ? "sb-w-[150px] sb-py-5" : "sb-w-[90px] sb-items-center sb-justify-center sb-py-1"}`,
           children: /* @__PURE__ */ jsxs9("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
             /* @__PURE__ */ jsxs9(
               "div",
@@ -963,26 +992,20 @@ var QualityMenu = ({
                 {
                   width,
                   isTrailer,
-                  isSelected: currentQualitySrc === (q == null ? void 0 : q.label),
+                  isSelected: currentQualitySrc === (q == null ? void 0 : q.height),
                   quality: q,
                   onClick: (e) => {
-                    const source = qualities.find(
-                      (_q) => (q == null ? void 0 : q.label) == (_q == null ? void 0 : _q.label)
-                    );
-                    if (source && source.src != currentQualitySrc) {
-                      const currentTime = player == null ? void 0 : player.currentTime();
-                      setCurrentQualitySrc(source == null ? void 0 : source.label);
-                    }
+                    q.height != "auto" ? setQualityByHeight(q.height) : setAutoQuality();
                     closeMenuFunction && closeMenuFunction();
                     setIsModalChanged(false);
                   }
                 },
-                `quality-${q == null ? void 0 : q.label}-${i}`
+                q.width
               );
             }) })
           ] })
         }
-      ),
+      ) }),
       close: (fn) => {
         setCloseMenuFunction(() => fn);
       }
@@ -1332,7 +1355,7 @@ var TimeSliderContainer_default = TimeSliderContainer;
 
 // src/components/BufferTracker/index.tsx
 import { useEffect as useEffect10 } from "react";
-import { Fragment, jsx as jsx35 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx35 } from "react/jsx-runtime";
 var BufferTracker = () => {
   const { player, setDownloadedBufferTimeufferTime } = useSoftBuildersVideoPlayerContext();
   useEffect10(() => {
@@ -1341,13 +1364,13 @@ var BufferTracker = () => {
     }, 1e3);
     return () => clearInterval(intervalId);
   }, [player]);
-  return /* @__PURE__ */ jsx35(Fragment, {});
+  return /* @__PURE__ */ jsx35(Fragment2, {});
 };
 var BufferTracker_default = BufferTracker;
 
 // src/components/CurrentTimeTracker/index.tsx
 import { useEffect as useEffect11 } from "react";
-import { Fragment as Fragment2, jsx as jsx36 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx36 } from "react/jsx-runtime";
 var CurrentTimeTracker = () => {
   const { setCurrentTime, player } = useSoftBuildersVideoPlayerContext();
   useEffect11(() => {
@@ -1356,7 +1379,7 @@ var CurrentTimeTracker = () => {
     }, 500);
     return () => clearInterval(intervalId);
   }, [player]);
-  return /* @__PURE__ */ jsx36(Fragment2, {});
+  return /* @__PURE__ */ jsx36(Fragment3, {});
 };
 var CurrentTimeTracker_default = CurrentTimeTracker;
 
@@ -1419,12 +1442,12 @@ var SubtitleMenu = ({
       onClick: (e, isOpen) => {
         onClick && onClick(e, isOpen);
       },
-      classContainer: `${width < 400 || isTrailer ? "!sb-top-8 -sb-left-9" : ""}`,
+      classContainer: `${width < 400 && (player == null ? void 0 : player.isFullscreen_) === false || isTrailer ? "!sb-top-8 -sb-left-9" : ""}`,
       buttonContent: /* @__PURE__ */ jsx37(SubIcon_default, { className: "sb-w-4 sb-h-4 sb-text-white " }),
       menuContent: /* @__PURE__ */ jsx37(
         "div",
         {
-          className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 ${width > 400 && !isTrailer ? "sb-w-[150px] sb-py-5" : "sb-w-[90px] sb-items-center sb-justify-center sb-py-1"}`,
+          className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 ${(width > 400 || (player == null ? void 0 : player.isFullscreen_) === true) && !isTrailer ? "sb-w-[150px] sb-py-5" : "sb-w-[90px] sb-items-center sb-justify-center sb-py-1"}`,
           children: /* @__PURE__ */ jsxs15("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
             /* @__PURE__ */ jsxs15("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-center sb-justify-center", children: [
               /* @__PURE__ */ jsx37(
@@ -1474,7 +1497,8 @@ var TooltipModal = ({
   children,
   isLeft = false,
   width = 0,
-  isModalChanged
+  isModalChanged,
+  player
 }) => {
   const [isOpen, setIsOpen] = useState12(false);
   const showTooltip = () => setIsOpen(true);
@@ -1500,7 +1524,7 @@ var TooltipModal = ({
         isOpen && /* @__PURE__ */ jsx38(
           "div",
           {
-            className: `sb-tooltip-modal sb-text-orange-900 sb-my-2 ${width > 400 ? "!sb-bottom-[105%]" : "!sb-top-[105%]"}`,
+            className: `sb-tooltip-modal sb-text-orange-900 sb-my-2 ${width > 400 || (player == null ? void 0 : player.isFullscreen_) === true ? "!sb-bottom-[105%]" : "!sb-top-[105%]"}`,
             style: {
               position: "absolute",
               left: !isLeft ? "-100%" : "100%",
@@ -1577,19 +1601,22 @@ var ControlBar = ({
   return /* @__PURE__ */ jsxs17(
     "div",
     {
-      className: ` !sb-px-4 sb-flex sb-pt-2 sb-justify-center sb-gap-3 sb-w-full sb-h-full  ${width > 400 && !isTrailer ? "sb-absolute sb-bottom-1 sb-items-end sb-mb-1 sb-pb-2 " : "sb-items-start"} sb-pb-2`,
+      className: ` !sb-px-4 sb-flex sb-pt-2 sb-justify-center sb-gap-3 sb-w-full sb-h-full  ${(width > 400 || (player == null ? void 0 : player.isFullscreen_) === true) && !isTrailer ? "sb-absolute sb-bottom-1 sb-items-end sb-mb-1 sb-pb-2 " : "sb-items-start"} sb-pb-2`,
       children: [
         /* @__PURE__ */ jsx39(BufferTracker_default, {}),
         /* @__PURE__ */ jsx39(CurrentTimeTracker_default, {}),
         !isTrailer && /* @__PURE__ */ jsx39(
           "button",
           {
-            onClick: () => {
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
               seek(-seekStep);
             },
             children: /* @__PURE__ */ jsx39(
               GlobalTooltip_default,
               {
+                player,
                 width,
                 content: /* @__PURE__ */ jsx39("p", { children: "Backward 5 sec" }),
                 isLeft: true,
@@ -1601,6 +1628,7 @@ var ControlBar = ({
         /* @__PURE__ */ jsx39("button", { onClick: togglePlay, children: /* @__PURE__ */ jsx39(
           GlobalTooltip_default,
           {
+            player,
             width,
             content: /* @__PURE__ */ jsx39("p", { children: isPaused ? "Play" : "pause" }),
             isLeft: true,
@@ -1612,11 +1640,13 @@ var ControlBar = ({
           {
             onClick: (e) => {
               e.preventDefault();
+              e.stopPropagation();
               seek(seekStep);
             },
             children: /* @__PURE__ */ jsx39(
               GlobalTooltip_default,
               {
+                player,
                 width,
                 content: /* @__PURE__ */ jsx39("p", { children: "Forward 5 sec" }),
                 isLeft: true,
@@ -1630,16 +1660,16 @@ var ControlBar = ({
         /* @__PURE__ */ jsx39(
           "div",
           {
-            className: `${width < 400 && !isTrailer ? "sb-flex-1 sb-ml-0 sb-mr-0" : "sb-w-full"}`,
+            className: `${width < 400 && !isTrailer && (player == null ? void 0 : player.isFullscreen_) === false ? "sb-flex-1 sb-ml-0 sb-mr-0" : "sb-w-full"}`,
             children: /* @__PURE__ */ jsxs17(
               "div",
               {
-                style: width < 400 && !isTrailer ? {
+                style: width < 400 && !isTrailer && (player == null ? void 0 : player.isFullscreen_) === false ? {
                   width: `${width * 0.9}px`,
                   left: "5%",
                   top: "90%"
                 } : { width: "98%" },
-                className: `flex gap-2 ${width < 400 && !isTrailer ? "absolute sb-top-1" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] `,
+                className: `flex gap-2 ${width < 400 && !isTrailer && (player == null ? void 0 : player.isFullscreen_) === false ? "absolute sb-top-1" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] `,
                 children: [
                   /* @__PURE__ */ jsx39(CurrentTimeLabel_default, {}),
                   /* @__PURE__ */ jsx39(TimeSliderContainer_default, { chapters, notes }),
@@ -1663,6 +1693,7 @@ var ControlBar = ({
         /* @__PURE__ */ jsx39(
           GlobalTooltip_default,
           {
+            player,
             isModalChanged,
             width,
             content: /* @__PURE__ */ jsx39("p", { children: "Quality" }),
@@ -1681,22 +1712,30 @@ var ControlBar = ({
             )
           }
         ),
-        disableNote && /* @__PURE__ */ jsx39(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx39("p", { children: "Create note" }), children: /* @__PURE__ */ jsx39(
-          CreateNoteMenu_default,
+        disableNote && /* @__PURE__ */ jsx39(
+          GlobalTooltip_default,
           {
-            handleSaveNoteAction,
+            player,
             width,
-            setNoteOpen,
-            noteButtonClick: (e) => {
-              noteButtonClick && noteButtonClick({
-                time: Number((player == null ? void 0 : player.currentTime()) || 0),
-                isOpen: e
-              });
-              player == null ? void 0 : player.pause();
-            }
+            content: /* @__PURE__ */ jsx39("p", { children: "Create note" }),
+            children: /* @__PURE__ */ jsx39(
+              CreateNoteMenu_default,
+              {
+                handleSaveNoteAction,
+                width,
+                setNoteOpen,
+                noteButtonClick: (e) => {
+                  noteButtonClick && noteButtonClick({
+                    time: Number((player == null ? void 0 : player.currentTime()) || 0),
+                    isOpen: e
+                  });
+                  player == null ? void 0 : player.pause();
+                }
+              }
+            )
           }
-        ) }),
-        /* @__PURE__ */ jsx39(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx39("p", { children: "Subtitle" }), children: /* @__PURE__ */ jsx39(
+        ),
+        /* @__PURE__ */ jsx39(GlobalTooltip_default, { player, width, content: /* @__PURE__ */ jsx39("p", { children: "Subtitle" }), children: /* @__PURE__ */ jsx39(
           SubtitleMenu_default,
           {
             isTrailer,
@@ -1707,7 +1746,7 @@ var ControlBar = ({
             }
           }
         ) }),
-        /* @__PURE__ */ jsx39(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx39("p", { children: "Full screen" }), children: /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx39(GlobalTooltip_default, { player, width, content: /* @__PURE__ */ jsx39("p", { children: "Full screen" }), children: /* @__PURE__ */ jsx39(
           "button",
           {
             onClick: (e) => {
@@ -1763,7 +1802,7 @@ var BigPlayButton = ({
 var BigPlayButton_default = BigPlayButton;
 
 // src/components/VideoPlayerComponent/index.tsx
-import { Fragment as Fragment3, jsx as jsx41, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx41, jsxs as jsxs19 } from "react/jsx-runtime";
 var bigPlayButtonRoot = {};
 var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100", height, heightValue, isLoading) => {
   const container = document.getElementById(`video-container-${id}`);
@@ -1853,6 +1892,7 @@ var VideoPlayerComponent = forwardRef(
     isTrailer,
     height
   }, ref) => {
+    var _a;
     const videoRef = useRef2(void 0);
     const playerRef = useRef2(void 0);
     const idRef = useRef2(void 0);
@@ -1919,6 +1959,13 @@ var VideoPlayerComponent = forwardRef(
         }
       };
     }, [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");
@@ -1936,9 +1983,9 @@ var VideoPlayerComponent = forwardRef(
         });
       }
       return () => {
-        var _a, _b;
+        var _a2, _b;
         if (playerRef.current) {
-          if (!isEqual((_b = (_a = idRef == null ? void 0 : idRef.current) == null ? void 0 : _a.sources) != null ? _b : "", options.sources)) {
+          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;
@@ -2005,7 +2052,8 @@ var VideoPlayerComponent = forwardRef(
       duration,
       opacity,
       isReady,
-      id
+      id,
+      (_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.isFullscreen_
     ]);
     useEffect15(() => {
       if (isReady) {
@@ -2101,9 +2149,9 @@ var VideoPlayerComponent = forwardRef(
       const observer = new IntersectionObserver(
         (entries) => {
           entries.forEach((entry) => {
-            var _a, _b;
+            var _a2, _b;
             if (entry.isIntersecting === false) {
-              if (((_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.paused()) === 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);
@@ -2177,7 +2225,7 @@ var VideoPlayerComponent = forwardRef(
         debounce((arg) => setIsloading(arg), 300)(false);
       });
     }
-    return /* @__PURE__ */ jsx41(Fragment3, { children: /* @__PURE__ */ jsx41(
+    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 " }),
@@ -2295,6 +2343,7 @@ var Component = forwardRef2(
       };
       getTracks();
     }, [options == null ? void 0 : options.tracks]);
+    console.log("options:===. ", options);
     const id = (Date.now() + Math.random() * 100).toString();
     const [uuid, setUuid] = useState15("");
     useEffect16(() => {
@@ -2323,7 +2372,7 @@ var Component = forwardRef2(
   }
 );
 var SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
-  return isEqual2(prevProps.options, nextProps.options) && prevProps.notes === nextProps.notes && prevProps.chapters === nextProps.chapters && prevProps.startTime === nextProps.startTime && prevProps.height === nextProps.height;
+  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 SoftBuildersVideoPlayer_default = SoftBuildersVideoPlayer;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "softbuilders-react-video-player",
   "description": "Standalone video player component",
-  "version": "1.2.24",
+  "version": "1.3.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -27,7 +27,8 @@
     "lodash": "^4.17.21",
     "typescript": "^5.6.2",
     "uuid": "^11.0.2",
-    "video.js": "^8.18.0"
+    "video.js": "^8.18.0",
+    "videojs-contrib-quality-levels": "^4.1.0"
   },
   "devDependencies": {
     "@svgr/cli": "^8.1.0",