l-min-components 1.7.1362 → 1.7.1364

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -321,7 +321,7 @@ const AppMainLayout = ({ children }) => {
 
   const handleGetStorageSummary = async () => {
     const accountType = generalData?.selectedAccount?.type?.toLowerCase();
-    if (accountType) {
+    if (accountType === "enterprise" || accountType === "instructor") {
       const res = await handleGetFileStorageSummary(accountType);
       res?.data && setStorageSummary({ ...res?.data, results: undefined });
     }

package/src/components/useVideoPlayer/index.jsx

@@ -0,0 +1,142 @@
+import { useEffect, useRef, useState } from "react";
+import Hls from "hls.js";
+
+import { OutletContext } from "../AppMainLayout";
+
+const useVideoPlayer = ({ src, streamSrc }) => {
+  const videoRef = useRef(null);
+  const [isReady, setIsReady] = useState(false);
+  const [isBuffering, setIsBuffering] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [error, setError] = useState(null);
+  const [progress, setProgress] = useState({ currentTime: 0, duration: 0 });
+  const { accessToken, generalData } = useContext(OutletContext);
+
+  const accountId = generalData?.selectedAccount?.id;
+
+  const url = src || streamSrc;
+
+  const play = () => {
+    if (videoRef.current && isReady) {
+      videoRef.current.play();
+    }
+  };
+
+  const pause = () => {
+    if (videoRef.current && isReady) {
+      videoRef.current.pause();
+    }
+  };
+
+  const stop = () => {
+    if (videoRef.current && isReady) {
+      videoRef.current.pause();
+      videoRef.current.currentTime = 0;
+    }
+  };
+
+  useEffect(() => {
+    const video = videoRef.current;
+    let hls;
+
+    const handlePlay = () => setIsPlaying(true);
+    const handlePause = () => setIsPlaying(false);
+    const handleEnded = () => setIsPlaying(false);
+    const handleTimeUpdate = () => {
+      setProgress({
+        currentTime: video.currentTime,
+        duration: video.duration,
+      });
+    };
+
+    const handleWaiting = () => setIsBuffering(true);
+    const handleCanPlay = () => {
+      setIsBuffering(false);
+      setIsReady(true);
+    };
+
+    const attachEvents = () => {
+      video.addEventListener("play", handlePlay);
+      video.addEventListener("pause", handlePause);
+      video.addEventListener("ended", handleEnded);
+      video.addEventListener("timeupdate", handleTimeUpdate);
+      video.addEventListener("waiting", handleWaiting);
+      video.addEventListener("canplay", handleCanPlay);
+    };
+
+    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({
+        xhrSetup: function (xhr, url) {
+          const modifiedURL = `${url}?_account=${accountId}`;
+          xhr.open("GET", modifiedURL, true);
+          xhr.setRequestHeader("Authorization", `Bearer ${accessToken}`);
+        },
+        lowLatencyMode: true,
+      });
+
+      hls.attachMedia(video);
+      hls.loadSource(url);
+
+      hls.on(Hls.Events.MANIFEST_PARSED, () => {
+        setIsReady(true);
+        setError(null);
+      });
+
+      hls.on(Hls.Events.BUFFER_STALLED, () => setIsBuffering(true));
+      hls.on(Hls.Events.BUFFER_APPENDED, () => setIsBuffering(false));
+
+      hls.on(Hls.Events.ERROR, (event, data) => {
+        console.warn("HLS error", data);
+        setError(data);
+        if (data.fatal) {
+          if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
+            hls.startLoad();
+          } else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
+            hls.recoverMediaError();
+          } else {
+            hls.destroy();
+          }
+        }
+      });
+    } else if (video.canPlayType("application/vnd.apple.mpegurl") && !src) {
+      video.src = url;
+      video.addEventListener("loadedmetadata", () => {
+        setIsReady(true);
+      });
+    } else {
+      video.src = src;
+      video.load();
+      setIsReady(true);
+    }
+
+    attachEvents();
+
+    return () => {
+      if (hls) hls.destroy();
+      detachEvents();
+    };
+  }, [src, streamSrc, accountId, accessToken]);
+
+  return {
+    videoRef,
+    isReady,
+    isPlaying,
+    isBuffering,
+    progress,
+    error,
+    play,
+    pause,
+    stop,
+  };
+};
+
+export default useVideoPlayer;

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

@@ -22,7 +22,7 @@ import PlayIcon from "./icons/playVideoIcon";
 import PauseIcon from "./icons/pause";
 import errorImage from "./icons/laptop-book.png";
 
-const VideoPlayer = ({
+const VideoPlayer2 = ({
   width,
   height = "360px",
   style,
@@ -60,18 +60,23 @@ const VideoPlayer = ({
       .join(":");
   }, []);
 
-  const handlePlayPause = useCallback(() => {
-    setIsPlaying((prev) => !prev);
-    if (videoRef.current) {
-      isPlaying ? videoRef.current.pause() : videoRef.current.play();
+  const play = useCallback(() => {
+    if (videoRef?.current && isReady) {
+      videoRef.current.play();
     }
-  }, [isPlaying]);
+  }, [isReady, videoRef?.current]);
+
+  const pause = useCallback(() => {
+    if (videoRef?.current && isReady) {
+      videoRef.current.pause();
+    }
+  }, [isReady, videoRef?.current]);
 
   const handleFullScreen = useCallback(() => {
     if (screenfull.isEnabled) {
       screenfull.toggle(playContainerRef.current);
     }
-  }, []);
+  }, [playContainerRef?.current]);
 
   const handleProgress = useCallback(() => {
     if (count > 3) {
@@ -98,7 +103,7 @@ const VideoPlayer = ({
 
   const handleSeekMouseUp = () => {
     setIsSeeking(false);
-    if (videoRef.current) {
+    if (videoRef?.current) {
       videoRef.current.currentTime = rangeProgress * videoRef.current.duration;
     }
   };
@@ -113,64 +118,127 @@ const VideoPlayer = ({
   };
 
   useEffect(() => {
+    const video = videoRef?.current;
+    if (!video) return null;
     let hls;
-    setError(false);
-    if (videoRef.current && accountId) {
-      if (!src && streamUrl && Hls.isSupported()) {
-        hls = new Hls({
-          xhrSetup: function (xhr, url) {
-            const modifiedURL = `${url}?_account=${accountId}`;
-            xhr.open("GET", modifiedURL, true);
-            xhr.setRequestHeader("Authorization", `Bearer ${accessToken}`);
-          },
 
-          lowLatencyMode: true,
-        });
+    const handlePlay = () => setIsPlaying(true);
+    const handlePause = () => setIsPlaying(false);
+    const handleEnded = () => setIsPlaying(false);
+    const handleTimeUpdate = () => {
+      const currentTime = video.currentTime;
+      const duration = video.duration;
+
+      const played = currentTime / duration;
+      setProgress({
+        currentTime,
+        duration,
+        played,
+      });
+    };
+
+    const handleWaiting = () => setIsBuffering(true);
+    const handleCanPlay = () => {
+      setIsBuffering(false);
+      setIsReady(true);
+    };
+
+    const attachEvents = () => {
+      video.addEventListener("play", handlePlay);
+      video.addEventListener("pause", handlePause);
+      video.addEventListener("ended", handleEnded);
+      video.addEventListener("timeupdate", handleTimeUpdate);
+      video.addEventListener("waiting", handleWaiting);
+      if (streamUrl && !src) {
+        video.addEventListener("canplay", handleCanPlay);
+      }
+    };
+
+    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({
+        xhrSetup: function (xhr, url) {
+          const modifiedURL = `${url}?_account=${accountId}`;
+          xhr.open("GET", modifiedURL, true);
+          xhr.setRequestHeader("Authorization", `Bearer ${accessToken}`);
+        },
+        lowLatencyMode: true,
+      });
+
+      hls.attachMedia(video);
+      hls.on(Hls.Events.MEDIA_ATTACHED, () => {
         hls.loadSource(url);
-        hls.attachMedia(videoRef.current);
+      });
 
-        hls.on(Hls?.Events?.MANIFEST_PARSED, () => {
+      hls.on(Hls.Events.LEVEL_SWITCHED, (val) => {
+        if (val === "hlsLevelSwitched") {
           setIsReady(true);
           setError(null);
-        });
+        }
+      });
+      hls.on(Hls.Events.LEVEL_LOADING, (val) => {
+        if (val === "hlsLevelLoading") {
+          setIsReady(false);
+        }
+      });
 
-        hls.on(Hls?.Events?.BUFFER_STALLED, () => {
+      hls.on(Hls.Events.BUFFER_STALLED, () => setIsBuffering(true));
+      hls.on(Hls.Events.BUFFER_APPENDED, () => setIsBuffering(false));
+      hls.on(Hls.Events.BUFFER_CREATED, (val) => {
+        if (val === "hlsBufferCreated") {
           setIsBuffering(true);
-        });
+        }
+      });
 
-        hls.on(Hls?.Events?.BUFFER_APPENDED, () => {
+      hls.on(Hls.Events.BUFFER_APPENDED, (val) => {
+        if (val === "hlsBufferAppended") {
           setIsBuffering(false);
-        });
-
-        hls.on(Hls.Events.ERROR, (event, data) => {
-          console.log(data, "errorr....", event);
-          // setError(true);
-        });
-      } else if (
-        videoRef.current.canPlayType("application/vnd.apple.mpegurl") &&
-        !src
-      ) {
-        videoRef.current.src = url;
-        videoRef.current.addEventListener("loadedmetadata", () => {
-          setIsReady(true);
-        });
-      } else {
-        if (videoRef.current && src) {
-          videoRef.current.src = src;
+        }
+      });
 
-          videoRef.current.load();
-          setIsReady(true);
+      hls.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();
+          } else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
+            hls.recoverMediaError();
+          } else {
+            hls.destroy();
+          }
         }
-      }
+      });
+    } else if (video.canPlayType("application/vnd.apple.mpegurl") && !src) {
+      video.src = url;
+      video.addEventListener("loadedmetadata", () => {
+        setIsReady(true);
+      });
+    } else {
+      video.src = src;
+      video.addEventListener("loadedmetadata", () => {
+        setIsReady(true);
+      });
+      video.load();
     }
 
+    attachEvents();
     return () => {
-      if (hls) {
+      if (hls && typeof hls.destroy === "function") {
         hls.destroy();
       }
-      setIsReady(false);
+      detachEvents();
     };
-  }, [url, accountId, accessToken, videoRef?.current]);
+  }, [url, accountId, accessToken, videoRef.current]);
 
   return (
     <VideoPlayerContainer
@@ -193,7 +261,7 @@ const VideoPlayer = ({
         </ErrorMessage>
       ) : (
         <>
-          {!isReady && (
+          {(!isReady || isBuffering) && (
             <LoadingScreen>
               <FullPageLoader
                 isSectionLoader
@@ -202,8 +270,6 @@ const VideoPlayer = ({
                 loaderHeight={small ? 150 : 200}
                 zIndex={5}
               />
-
-              {error && <p className={`error ${small ? "sm" : ""}`}>{error}</p>}
             </LoadingScreen>
           )}
 
@@ -242,15 +308,16 @@ const VideoPlayer = ({
                 <VideoScreenIcon onClick={handleFullScreen} />
               </RangeContainer>
             )}
-            {isReady && (
-              <div className="play_pause_wrap" onClick={handlePlayPause}>
-                {isPlaying ? (
+            {isReady &&
+              (isPlaying ? (
+                <div className="play_pause_wrap" onClick={pause}>
                   <PauseIcon fill="#fff" />
-                ) : (
+                </div>
+              ) : (
+                <div className="play_pause_wrap" onClick={play}>
                   <PlayIcon fill="#fff" />
-                )}
-              </div>
-            )}
+                </div>
+              ))}
           </VideoController>
         </>
       )}
@@ -258,4 +325,4 @@ const VideoPlayer = ({
   );
 };
 
-export default VideoPlayer;
+export default VideoPlayer2;