softbuilders-react-video-player 1.3.2 → 1.3.4

package/dist/components/VideoPlayerComponent/index.tsx

@@ -140,88 +140,141 @@ export type Props<T = any> = {
   isTrailer?: boolean;
   height?: number;
 };
-const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
-  (
-    {
-      id,
-      options,
-      notes,
-      chapters,
-      startTime = 0,
-      handleSaveNoteAction,
-      poster,
-      onPlay,
-      onPause,
-      disableNote,
-      childRef,
-      bottomRedBar = true,
-      noteButtonClick,
-      videoID,
-      isTrailer,
-      height,
-    }: Props,
-    ref: any
-  ) => {
-    const videoRef = useRef<any>(undefined);
-    const playerRef = useRef<Player | undefined>(undefined);
-    const idRef = useRef<any | undefined>(undefined);
-
-    const [isReady, setIsReady] = useState(false);
-    const [isPaused, setIsPaused] = useState(!options.autoplay);
-    const [duration, setDuration] = useState(1);
-    const [opacity, setOpacity] = useState("0");
-    const [isControlBarPresent, setIsControlBarPresent] = useState(true);
-    const [bgColor, setBgColor] = useState("transparent");
-    const [isQualityMenuOpen, setIsQualityMenuOpen] = useState(false);
-    const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState(false);
-    const [isHovered, setIsHovered] = useState(false);
-    const [isNoteOpen, setNoteOpen] = useState(false);
-    const [heightValue, setHeightValue] = useState<number>(0);
-    const [isLoading, setIsloading] = useState<boolean>(false);
-
-    const onReady = (player: Player) => {
-      if (playerRef) {
-        playerRef.current = player;
-        setIsReady(true);
-
-        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);
-        });
+const VideoPlayerComponent = ({
+  id,
+  options,
+  notes,
+  chapters,
+  startTime = 0,
+  handleSaveNoteAction,
+  poster,
+  onPlay,
+  onPause,
+  disableNote,
+  childRef,
+  bottomRedBar = true,
+  noteButtonClick,
+  videoID,
+  isTrailer,
+  height,
+}: Props) => {
+  const videoRef = useRef<any>(undefined);
+  const playerRef = useRef<Player | undefined>(undefined);
+  const idRef = useRef<any | undefined>(undefined);
+
+  const [isReady, setIsReady] = useState(false);
+  const [isPaused, setIsPaused] = useState(!options.autoplay);
+  const [duration, setDuration] = useState(1);
+  const [opacity, setOpacity] = useState("0");
+  const [isControlBarPresent, setIsControlBarPresent] = useState(true);
+  const [bgColor, setBgColor] = useState("transparent");
+  const [isQualityMenuOpen, setIsQualityMenuOpen] = useState(false);
+  const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isNoteOpen, setNoteOpen] = useState(false);
+  const [heightValue, setHeightValue] = useState<number>(0);
+  const [isLoading, setIsloading] = useState<boolean>(false);
+
+  const onReady = (player: Player) => {
+    if (playerRef) {
+      playerRef.current = player;
+      setIsReady(true);
+
+      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);
+      });
+    }
+  };
+  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) {
+        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 as Player);
+      });
+    }
+    return () => {
+      if (playerRef.current) {
+        idRef.current = options;
+        playerRef.current.dispose();
+        playerRef.current = undefined;
+
+        setTimeout(() => {
+          if (bigPlayButtonRoot[id]) {
+            bigPlayButtonRoot[id].unmount();
+            bigPlayButtonRoot[id] = undefined;
+          }
+          if (controlBarRoot[id]) {
+            controlBarRoot[id].unmount();
+            controlBarRoot[id] = undefined;
+          }
+        }, 0);
+
+        // setTimeout(() => {
+        //   if (bigPlayButtonRoot[id]) {
+        //     bigPlayButtonRoot[id].unmount();
+        //     bigPlayButtonRoot[id] = undefined;
+        //   }
+        //   if (controlBarRoot[id]) {
+        //     controlBarRoot[id].unmount();
+        //     controlBarRoot[id] = undefined;
+        //   }
+        // }, 0);
       }
     };
-    useEffect(() => {
-      if (!playerRef.current) {
-        const videoElement = document.createElement("video-js");
+  }, [id]);
 
-        videoElement.setAttribute("playsinline", "true");
+  useEffect(() => {
+    if (playerRef.current) {
+      const myPlayer = playerRef.current.currentSources();
+      playerRef.current.src(options.sources);
+      playerRef.current.load();
+    }
+  }, [options.sources[0].type]);
+  useEffect(() => {
+    if (!playerRef.current) {
+      const videoElement = document.createElement("video-js");
 
-        videoElement.classList.add("vjs-big-play-centered");
-        // Set the poster attribute here
-        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 as Player);
-        });
+      videoElement.setAttribute("playsinline", "true");
+
+      videoElement.classList.add("vjs-big-play-centered");
+      // Set the poster attribute here
+      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 as Player);
+      });
+    }
+    return () => {
+      if (playerRef.current) {
+        if (!isEqual(idRef?.current?.sources ?? "", options.sources)) {
           idRef.current = options;
           playerRef.current.dispose();
           playerRef.current = undefined;
-
           setTimeout(() => {
             if (bigPlayButtonRoot[id]) {
               bigPlayButtonRoot[id].unmount();
@@ -232,386 +285,329 @@ const VideoPlayerComponent = forwardRef<HTMLDivElement, Props<any>>(
               controlBarRoot[id] = undefined;
             }
           }, 0);
-
-          // setTimeout(() => {
-          //   if (bigPlayButtonRoot[id]) {
-          //     bigPlayButtonRoot[id].unmount();
-          //     bigPlayButtonRoot[id] = undefined;
-          //   }
-          //   if (controlBarRoot[id]) {
-          //     controlBarRoot[id].unmount();
-          //     controlBarRoot[id] = undefined;
-          //   }
-          // }, 0);
         }
-      };
-    }, [id]);
-
-    useEffect(() => {
-      if (playerRef.current) {
-        const myPlayer = playerRef.current.currentSources();
-        playerRef.current.src(options.sources);
-        playerRef.current.load();
-      }
-    }, [options.sources[0].type]);
-    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) {
-          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 as Player);
-        });
+        // setTimeout(() => {
+        //   if (bigPlayButtonRoot[id]) {
+        //     bigPlayButtonRoot[id].unmount();
+        //     bigPlayButtonRoot[id] = undefined;
+        //   }
+        //   if (controlBarRoot[id]) {
+        //     controlBarRoot[id].unmount();
+        //     controlBarRoot[id] = undefined;
+        //   }
+        // }, 0);
       }
-      return () => {
-        if (playerRef.current) {
-          if (!isEqual(idRef?.current?.sources ?? "", options.sources)) {
-            idRef.current = options;
-            playerRef.current.dispose();
-            playerRef.current = undefined;
-            setTimeout(() => {
-              if (bigPlayButtonRoot[id]) {
-                bigPlayButtonRoot[id].unmount();
-                bigPlayButtonRoot[id] = undefined;
-              }
-              if (controlBarRoot[id]) {
-                controlBarRoot[id].unmount();
-                controlBarRoot[id] = undefined;
-              }
-            }, 0);
-          }
-
-          // setTimeout(() => {
-          //   if (bigPlayButtonRoot[id]) {
-          //     bigPlayButtonRoot[id].unmount();
-          //     bigPlayButtonRoot[id] = undefined;
-          //   }
-          //   if (controlBarRoot[id]) {
-          //     controlBarRoot[id].unmount();
-          //     controlBarRoot[id] = undefined;
-          //   }
-          // }, 0);
-        }
-      };
-    }, [options]);
-    // Added poster to dependency array
+    };
+  }, [options]);
+  // Added poster to dependency array
 
-    useEffect(() => {
-      if (playerRef.current) {
-        playerRef.current.currentTime(startTime);
-      }
-    }, [startTime]);
-    useEffect(() => {
-      if (playerRef.current && isReady) {
-        const currentTime = playerRef.current.currentTime() || 0;
-        if (isPaused) {
-          if (onPause) onPause(currentTime);
-        } else {
-          if (onPlay) onPlay(currentTime);
-        }
+  useEffect(() => {
+    if (playerRef.current) {
+      playerRef.current.currentTime(startTime);
+    }
+  }, [startTime]);
+  useEffect(() => {
+    if (playerRef.current && isReady) {
+      const currentTime = playerRef.current.currentTime() || 0;
+      if (isPaused) {
+        if (onPause) onPause(currentTime);
+      } else {
+        if (onPlay) onPlay(currentTime);
       }
-    }, [isPaused]);
-
-    useEffect(() => {
-      const controlBarTimeout = setTimeout(() => {
-        renderControlBar(
+    }
+  }, [isPaused]);
+
+  useEffect(() => {
+    const controlBarTimeout = setTimeout(() => {
+      renderControlBar(
+        id,
+        playerRef.current,
+        isPaused,
+        setIsPaused,
+        duration,
+        notes,
+        chapters,
+        5,
+        handleSaveNoteAction,
+        opacity,
+        (e: any) => {
+          handlePlayerClick(e, true);
+        },
+        bgColor,
+        setIsQualityMenuOpen,
+        setIsSubtitleMenuOpen,
+        disableNote,
+        setNoteOpen,
+        noteButtonClick,
+        isTrailer
+      );
+    }, 0);
+    return () => clearTimeout(controlBarTimeout);
+  }, [
+    isPaused,
+    setIsPaused,
+    notes,
+    handleSaveNoteAction,
+    duration,
+    opacity,
+    isReady,
+    id,
+    playerRef?.current?.isFullscreen_,
+  ]);
+  useEffect(() => {
+    if (isReady) {
+      const playButtonTimeout = setTimeout(() => {
+        renderBigPlayButton(
           id,
           playerRef.current,
           isPaused,
           setIsPaused,
-          duration,
-          notes,
-          chapters,
-          5,
-          handleSaveNoteAction,
           opacity,
-          (e: any) => {
-            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,
-      playerRef?.current?.isFullscreen_,
-    ]);
-    useEffect(() => {
-      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]);
-    useEffect(() => {
-      if (playerRef.current) {
-        const intervalId = setInterval(() => {
-          if (playerRef.current) setIsPaused(playerRef.current.paused());
-        }, 500);
-        return () => clearInterval(intervalId);
+      }, 500);
+      return () => clearTimeout(playButtonTimeout);
+    }
+  }, [isPaused, opacity, isReady, id, height, heightValue, isLoading]);
+  useEffect(() => {
+    if (playerRef.current) {
+      const intervalId = setInterval(() => {
+        if (playerRef.current) setIsPaused(playerRef.current.paused());
+      }, 500);
+      return () => clearInterval(intervalId);
+    }
+  }, []);
+  // 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);
+  useEffect(() => {
+    if (isQualityMenuOpen || isSubtitleMenuOpen) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
       }
-    }, []);
-    // 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);
-    useEffect(() => {
-      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);
-        }, 3000);
+      setOpacity("100");
+    } else {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
       }
-    }, [isQualityMenuOpen, isSubtitleMenuOpen]);
-    useEffect(() => {
-      if (isNoteOpen) {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-        }
-      } else {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-        }
+      setOpacity("0");
 
-        timeoutRef.current = setTimeout(() => {
-          setIsControlBarPresent(false);
-        }, 3000);
+      timeoutRef.current = setTimeout(() => {
+        setIsControlBarPresent(false);
+      }, 3000);
+    }
+  }, [isQualityMenuOpen, isSubtitleMenuOpen]);
+  useEffect(() => {
+    if (isNoteOpen) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
       }
-    }, [isNoteOpen]);
-
-    const handlePlayerClick = async (e: any, isTimerOnly = false) => {
-      e.preventDefault();
+    } else {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
-      setOpacity("100");
-      setIsControlBarPresent(true);
-      // setBgColor("rgba(200, 200, 200, 0.5)");
-      // not using now
+
       timeoutRef.current = setTimeout(() => {
-        setOpacity("0");
-        setBgColor("transparent");
         setIsControlBarPresent(false);
       }, 3000);
-      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);
+    }
+  }, [isNoteOpen]);
+
+  const handlePlayerClick = async (e: any, isTimerOnly = false) => {
+    e.preventDefault();
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setOpacity("100");
+    setIsControlBarPresent(true);
+    // setBgColor("rgba(200, 200, 200, 0.5)");
+    // not using now
+    timeoutRef.current = setTimeout(() => {
+      setOpacity("0");
+      setBgColor("transparent");
+      setIsControlBarPresent(false);
+    }, 3000);
+    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 = 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);
-                }
+    }
+  };
+  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)
-        }
-      );
+          }
+        });
+      },
+      {
+        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.observe(videoRefs.current); // Start observing the component
+        observer.unobserve(videoRef.current); // Clean up the observer when the component unmounts
       }
+    };
+  }, []);
 
-      return () => {
-        if (videoRefs.current) {
-          observer.unobserve(videoRef.current); // Clean up the observer when the component unmounts
-        }
-      };
-    }, []);
-
-    const [timeSeeker, setTimeSeeker] = useState<string>("0");
-    useEffect(() => {
-      const updateTimeSeeker = () => {
-        if (playerRef.current && isReady) {
-          const currentTime = playerRef.current.currentTime();
-          const duration = playerRef.current.duration();
-
-          if (duration && currentTime !== undefined) {
-            setTimeSeeker(`${(currentTime / duration) * 100}%`);
-          } else {
-            setTimeSeeker("0");
-          }
+  const [timeSeeker, setTimeSeeker] = useState<string>("0");
+  useEffect(() => {
+    const updateTimeSeeker = () => {
+      if (playerRef.current && isReady) {
+        const currentTime = playerRef.current.currentTime();
+        const duration = playerRef.current.duration();
+
+        if (duration && currentTime !== undefined) {
+          setTimeSeeker(`${(currentTime / duration) * 100}%`);
+        } else {
+          setTimeSeeker("0");
         }
-      };
+      }
+    };
+
+    const interval = setInterval(updateTimeSeeker, 500); // Update every 500ms
 
-      const interval = setInterval(updateTimeSeeker, 500); // Update every 500ms
+    return () => clearInterval(interval); // Cleanup interval on unmount
+  }, [playerRef]);
 
-      return () => clearInterval(interval); // Cleanup interval on unmount
-    }, [playerRef]);
+  const container = document.getElementById(`video-container-${id}`);
 
-    const container = document.getElementById(`video-container-${id}`);
+  function handleWidthChange(height: any) {
+    setHeightValue(height);
+  }
 
-    function handleWidthChange(height: any) {
-      setHeightValue(height);
+  const resizeObserver = new ResizeObserver((entries) => {
+    for (let entry of entries) {
+      const currentHeight = entry.contentRect.height;
+      handleWidthChange(currentHeight); // Call the action when width changes
     }
+  });
 
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        const currentHeight = entry.contentRect.height;
-        handleWidthChange(currentHeight); // Call the action when width changes
+  // Start observing the element
+  const controlBar = container?.querySelector(".vjs-control-bar");
+  if (controlBar) {
+    resizeObserver.observe(controlBar);
+  }
+  function debounce(
+    func: (arg: boolean) => void, // The function type should accept a boolean argument
+    delay: number
+  ) {
+    let timeoutId: any;
+
+    return function (arg: boolean) {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
       }
-    });
 
-    // Start observing the element
-    const controlBar = container?.querySelector(".vjs-control-bar");
-    if (controlBar) {
-      resizeObserver.observe(controlBar);
-    }
-    function debounce(
-      func: (arg: boolean) => void, // The function type should accept a boolean argument
-      delay: number
-    ) {
-      let timeoutId: any;
-
-      return function (arg: boolean) {
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-
-        timeoutId = setTimeout(() => {
-          func(arg);
-        }, delay);
-      };
-    }
+      timeoutId = setTimeout(() => {
+        func(arg);
+      }, delay);
+    };
+  }
 
-    if (playerRef.current) {
-      playerRef.current.on("waiting", function () {
-        debounce((arg) => setIsloading(arg), 300)(true);
-      });
+  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 (
-      <>
-        <Suspense
-          fallback={
-            <SvgSkillamiIcon className=" sb-w-16 sb-h-16 sb-animate-spin sb-absolute -sb-top-2 -sb-right-2 "></SvgSkillamiIcon>
-          }
+    playerRef.current.on("playing", function () {
+      debounce((arg) => setIsloading(arg), 300)(false);
+    });
+  }
+  return (
+    <>
+      <Suspense
+        fallback={
+          <SvgSkillamiIcon className=" sb-w-16 sb-h-16 sb-animate-spin sb-absolute -sb-top-2 -sb-right-2 "></SvgSkillamiIcon>
+        }
+      >
+        <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)}
         >
+          {bottomRedBar && (
+            <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,
+              }}
+            ></div>
+          )}
           <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)}
+            className="hover:sb-cursor-pointer sb-w-full sb-h-full"
+            // Attach click event
+            data-vjs-player
           >
-            {bottomRedBar && (
-              <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,
-                }}
-              ></div>
-            )}
             <div
-              className="hover:sb-cursor-pointer sb-w-full sb-h-full"
-              // Attach click event
-              data-vjs-player
-            >
-              <div
-                onClick={handlePlayerClick}
-                ref={videoRef}
-                className="sb-h-full sb-w-full sb-relative"
-              ></div>
-            </div>
+              onClick={handlePlayerClick}
+              ref={videoRef}
+              className="sb-h-full sb-w-full sb-relative"
+            ></div>
           </div>
-        </Suspense>
-      </>
-    );
-  }
-);
+        </div>
+      </Suspense>
+    </>
+  );
+};
+
 export default VideoPlayerComponent;