l-min-components 1.7.1474 → 1.7.1475

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.7.1474",
+  "version": "1.7.1475",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/video-player/index.jsx

@@ -44,6 +44,7 @@ const VideoPlayer2 = ({
 
   const playContainerRef = useRef();
   const videoRef = useRef();
+  const hlsRef = useRef(null);
   const { accessToken, generalData } = useContext(OutletContext);
 
   const accountId = generalData?.selectedAccount?.id;
@@ -154,8 +155,17 @@ const VideoPlayer2 = ({
       }
     };
 
+    const detachEvents = () => {
+      video?.removeEventListener("play", handlePlay);
+      video?.removeEventListener("pause", handlePause);
+      video?.removeEventListener("ended", handleEnded);
+      video?.removeEventListener("timeupdate", handleTimeUpdate);
+      video?.removeEventListener("waiting", handleWaiting);
+      video?.removeEventListener("canplay", handleCanPlay);
+    };
+
     if (!src && Hls.isSupported()) {
-      hls = new Hls({
+      hlsRef.current = new Hls({
         xhrSetup: function (xhr, url) {
           const modifiedURL = `${url}?_account=${accountId}`;
           xhr.open("GET", modifiedURL, true);
@@ -164,48 +174,54 @@ const VideoPlayer2 = ({
         lowLatencyMode: true,
       });
 
-      hls?.attachMedia(video);
-      hls?.on(Hls.Events.MEDIA_ATTACHED, () => {
-        hls?.loadSource(url);
+      hlsRef.current?.attachMedia(video);
+      hlsRef.current?.on(Hls.Events.MEDIA_ATTACHED, () => {
+        hlsRef.current?.loadSource(url);
       });
 
-      hls?.on(Hls.Events.LEVEL_SWITCHED, (val) => {
+      hlsRef.current?.on(Hls.Events.LEVEL_SWITCHED, (val) => {
         if (val === "hlsLevelSwitched") {
           setIsReady(true);
           setError(null);
         }
       });
-      hls?.on(Hls.Events.LEVEL_LOADING, (val) => {
+      hlsRef.current?.on(Hls.Events.LEVEL_LOADING, (val) => {
         if (val === "hlsLevelLoading") {
           setIsReady(false);
         }
       });
 
-      hls?.on(Hls.Events.BUFFER_STALLED, () => setIsBuffering(true));
-      hls?.on(Hls.Events.BUFFER_APPENDED, () => setIsBuffering(false));
-      hls?.on(Hls.Events.BUFFER_CREATED, (val) => {
+      hlsRef.current?.on(Hls.Events.BUFFER_STALLED, () => setIsBuffering(true));
+      hlsRef.current?.on(Hls.Events.BUFFER_APPENDED, () =>
+        setIsBuffering(false)
+      );
+      hlsRef.current?.on(Hls.Events.BUFFER_CREATED, (val) => {
         if (val === "hlsBufferCreated") {
           setIsBuffering(true);
         }
       });
 
-      hls?.on(Hls.Events.BUFFER_APPENDED, (val) => {
+      hlsRef.current?.on(Hls.Events.BUFFER_APPENDED, (val) => {
         if (val === "hlsBufferAppended") {
           setIsBuffering(false);
         }
       });
-
-      hls?.on(Hls.Events.ERROR, (event, data) => {
+      hlsRef.current?.on(Hls.Events.ERROR, (event, data) => {
         console.warn("HLS error", data);
         if (data.fatal) {
           setError(data);
           setIsReady(false);
           if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
-            hls?.startLoad();
+            hlsRef.current?.startLoad();
           } else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
-            hls?.recoverMediaError();
+            hlsRef.current?.recoverMediaError();
           } else {
-            hls?.destroy();
+            if (
+              hlsRef.current &&
+              typeof hlsRef.current.destroy === "function"
+            ) {
+              hlsRef.current?.destroy();
+            }
           }
         }
       });
@@ -221,12 +237,13 @@ const VideoPlayer2 = ({
       });
       video.load();
     }
-
     attachEvents();
     return () => {
-      if (hls) {
-        hls?.destroy();
+      if (hlsRef.current && typeof hlsRef.current.destroy === "function") {
+        hlsRef.current.destroy();
       }
+
+      detachEvents();
     };
   }, [url, accountId, accessToken, videoRef.current]);