l-min-components 1.7.1474 → 1.7.1476

package/package.json

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

package/src/components/header/account-dropdown.jsx

@@ -38,21 +38,30 @@ const AccountDropdown = (props) => {
   }, [props?.selectedAccount]);
 
   const handleRedirectFunc = ({ type, id }) => {
+    // optimize the use of this base later because it's redeclared on multiple files
+    const base = `${
+      window.location.hostname.includes("localhost") ||
+      window.location.hostname.includes("staging")
+        ? `https://559staging.learngual.${
+            window.location.hostname.includes(".ca") ? "ca" : "com"
+          }`
+        : `https://www.learngual.${
+            window.location.hostname.includes(".ca") ? "ca" : "com"
+          }`
+    }`;
     if (window.location.port) {
       window.location.href = `${window.location.protocol}//${
         window.location.hostname
       }:${window.location.port}/${type?.toLowerCase()}`;
     } else {
-      window.location.href = `${window.location.protocol}//${
-        window.location.hostname
-      }/${type?.toLowerCase()}`;
+      window.location.href = `${base}/${type?.toLowerCase()}`;
     }
     // //console.log(id, "bam");
   };
 
   // console.log(props?.selectedAccount, "selected");
 
-  const [isLoading, setIsLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(false);
 
   return (
     <>
@@ -129,12 +138,12 @@ const AccountDropdown = (props) => {
                             : ""
                         }`}
                         onClick={() => {
-                          setIsLoading(true)
+                          setIsLoading(true);
 
                           deleteCookies([
                             "defaultAccountType",
                             "defaultAccountID",
-                            "activeDeveloperAccount"
+                            "activeDeveloperAccount",
                           ]);
 
                           props?.setSelectedAccount(developerItem);
@@ -185,12 +194,12 @@ const AccountDropdown = (props) => {
                           : ""
                       }`}
                       onClick={() => {
-                        setIsLoading(true)
+                        setIsLoading(true);
 
                         deleteCookies([
                           "defaultAccountType",
                           "defaultAccountID",
-                          "activeDeveloperAccount"
+                          "activeDeveloperAccount",
                         ]);
                         props?.setSelectedAccount(instructorItem);
                         setTimeout(() => {
@@ -233,8 +242,12 @@ const AccountDropdown = (props) => {
                         : ""
                     }`}
                     onClick={() => {
-                      setIsLoading(true)
-                      deleteCookies(["defaultAccountType", "defaultAccountID", "activeDeveloperAccount"]);
+                      setIsLoading(true);
+                      deleteCookies([
+                        "defaultAccountType",
+                        "defaultAccountID",
+                        "activeDeveloperAccount",
+                      ]);
                       props?.setSelectedAccount(enterpriseItem);
                       setTimeout(() => {
                         handleRedirectFunc(enterpriseItem);
@@ -275,10 +288,11 @@ const AccountDropdown = (props) => {
                           : ""
                       }`}
                       onClick={() => {
-                        setIsLoading(true)
+                        setIsLoading(true);
                         deleteCookies([
                           "defaultAccountType",
-                          "defaultAccountID","activeDeveloperAccount"
+                          "defaultAccountID",
+                          "activeDeveloperAccount",
                         ]);
                         props?.setSelectedAccount(personalItem);
                         setTimeout(() => {
@@ -323,7 +337,7 @@ const AccountDropdown = (props) => {
           </button>
         </AccountDropdownFooter>
       </AccountDropdownLayout>
-      {isLoading&&<FullPageLoader hasBackground fixed={true} />}
+      {isLoading && <FullPageLoader hasBackground fixed={true} />}
     </>
   );
 };

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]);