l-min-components 1.0.1117 → 1.0.1121

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.1117",
+  "version": "1.0.1121",
   "type": "module",
   "files": [
     "src/assets",
@@ -24,6 +24,7 @@
     "draft-js": "^0.11.7",
     "draftjs-to-html": "^0.9.1",
     "emoji-picker-react": "^4.12.0",
+    "hls.js": "^1.5.20",
     "html-to-draftjs": "^1.5.0",
     "i": "^0.3.7",
     "iso-639-1": "^3.1.2",

package/src/components/index.js

@@ -39,7 +39,6 @@ export { default as EnterpriseRightBar } from "./fileRightBar/enterpriseRightBar
 export { default as FullPageLoader } from "./fullPageLoader";
 export { default as AdminAppMainLayout } from "./AdminAppMainLayout";
 export { default as PaginationComponent } from "./paginate";
-export { default as VideoPlayer } from "./video-player";
 export { default as AdminLogin } from "./AdminLogin";
 export { default as AdminResetPassword } from "./AdminResetPassword";
 export { default as AdminChangePassword } from "./AdminResetPassword/change-password";
@@ -54,3 +53,4 @@ export { default as MobileLayout } from "./mobileLayout";
 export { default as useTranslation } from "../hooks/useTranslation";
 export { default as ImageComponent } from "./ImageComponent";
 export { default as DeveloperBanner } from "./banner/developerBanner";
+export { default as VideoPlayer } from "./video-player";

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

@@ -1,66 +1,53 @@
-import React, { useState, useRef, useEffect, useContext } from "react";
+import {
+  useState,
+  useRef,
+  useEffect,
+  useContext,
+  useMemo,
+  useCallback,
+} from "react";
 import { OutletContext } from "../AppMainLayout";
+import FullPageLoader from "../fullPageLoader";
 import screenfull from "screenfull";
+import Hls from "hls.js";
 import {
   LoadingScreen,
   RangeContainer,
   VideoController,
   VideoPlayerContainer,
-  VideoPrompts,
 } from "./index.styled";
-import ReactPlayer from "react-player";
 import VideoScreenIcon from "./icons/videoScreenIcon";
 import PlayIcon from "./icons/playVideoIcon";
 import PauseIcon from "./icons/pause";
-// import LoaderCustom from "../loader";
-import FullPageLoader from "../fullPageLoader";
 
-/**
- *
- * @param {object} props
- * @param {string} props.width - Width of the player in px
- * @param {string} props.height - Height of the player in px
- * @param {React.CSSProperties} props.style - Player container style
- * @param {boolean} props.hideRange - To hide the range controller
- * @param {boolean} props.showPrompts - show next and prev controller
- * @param {string} props.src - Video source url
- * @param {string} props.streamUrl - Stream video url
- * @param {string} props.thumbnailSrc - Thumbnail url
- * @returns {JSX.Element}
- */
 const VideoPlayer = ({
   width,
   height = "360px",
   style,
   hideRange,
   showPrompts,
+  controlSize,
   src,
   streamUrl,
-  thumbnailSrc,
+  small,
 }) => {
-  const [isPlaying, setIsPlayering] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
   const [isSeeking, setIsSeeking] = useState(false);
+  const [error, setError] = useState(null);
   const [progress, setProgress] = useState();
   const [hideController, setHideController] = useState(false);
   const [count, setCount] = useState(0);
-  const playContainerRef = useRef();
-  const [url, setUrl] = useState(null);
-  const [image, setImage] = useState(null);
-  const playerRef = useRef();
-  const { accessToken } = useContext(OutletContext);
   const [isReady, setIsReady] = useState(false);
   const [rangeProgress, setRangeProgress] = useState(0);
 
-  useEffect(() => {
-    if (src || streamUrl) {
-      setUrl(src ? src : `https://dev-117782726-api.learngual.com${streamUrl}`);
-    }
-    if (thumbnailSrc) {
-      setImage(thumbnailSrc);
-    }
-  }, [streamUrl, thumbnailSrc, src]);
+  const playContainerRef = useRef();
+  const videoRef = useRef();
+  const { accessToken, generalData } = useContext(OutletContext);
 
-  const format = (secs) => {
+  const accountId = generalData?.selectedAccount?.id;
+  const url = useMemo(() => src || `${streamUrl}`, [src, streamUrl]);
+
+  const formatTime = useCallback((secs) => {
     const sec_num = parseInt(secs, 10);
     const hours = Math.floor(sec_num / 3600);
     const minutes = Math.floor(sec_num / 60) % 60;
@@ -69,18 +56,22 @@ const VideoPlayer = ({
     return [hours, minutes, seconds]
       .map((v) => (v < 10 ? "0" + v : v))
       .join(":");
-  };
+  }, []);
 
-  const handlePlayPause = () => {
-    setIsPlayering(!isPlaying);
-    setImage(null);
-  };
+  const handlePlayPause = useCallback(() => {
+    setIsPlaying((prev) => !prev);
+    if (videoRef.current) {
+      isPlaying ? videoRef.current.pause() : videoRef.current.play();
+    }
+  }, [isPlaying]);
 
-  const handleFullScreen = () => {
-    screenfull.toggle(playContainerRef.current);
-  };
+  const handleFullScreen = useCallback(() => {
+    if (screenfull.isEnabled) {
+      screenfull.toggle(playContainerRef.current);
+    }
+  }, []);
 
-  const handleProgress = (progress) => {
+  const handleProgress = useCallback(() => {
     if (count > 3) {
       setHideController(true);
       setCount(0);
@@ -88,11 +79,15 @@ const VideoPlayer = ({
     if (!hideController) {
       setCount(count + 1);
     }
-    if (!isSeeking) {
-      setRangeProgress(progress?.played);
-      setProgress(progress);
+    if (videoRef?.current) {
+      const currentTime = videoRef.current.currentTime;
+      const duration = videoRef.current.duration;
+      const played = currentTime / duration;
+
+      setRangeProgress(played);
+      setProgress({ played, currentTime, duration });
     }
-  };
+  }, [isSeeking, count, hideController]);
 
   const handleSeekChange = (e) => {
     const value = parseFloat(e.target.value) / 100;
@@ -101,7 +96,9 @@ const VideoPlayer = ({
 
   const handleSeekMouseUp = () => {
     setIsSeeking(false);
-    playerRef.current?.seekTo(rangeProgress, "fraction");
+    if (videoRef.current) {
+      videoRef.current.currentTime = rangeProgress * videoRef.current.duration;
+    }
   };
 
   const handleSeekMouseDown = () => {
@@ -113,29 +110,56 @@ const VideoPlayer = ({
     setCount(0);
   };
 
-  const calcShowPrompts = () => {
-    if (progress?.playedSeconds) {
-      return Math.floor(
-        (progress.playedSeconds * 100) / progress.loadedSeconds,
-      );
+  useEffect(() => {
+    let hls;
+
+    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}`);
+          },
+        });
+        hls.loadSource(url);
+        hls.attachMedia(videoRef.current);
+
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          setIsReady(true);
+          setError(null);
+        });
+
+        hls.on(Hls.Events.ERROR, (event, data) => {
+          if (data?.response?.code === 400) {
+            setError("This resource is being processed, please try again late");
+          }
+        });
+      } 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);
+        }
+      }
     }
-  };
-
-  const currentTime = playerRef.current?.getCurrentTime()
-    ? format(playerRef.current?.getCurrentTime())
-    : "00:00:00";
 
-  const duration = playerRef.current?.getDuration()
-    ? format(playerRef.current?.getDuration())
-    : "00:00:00";
-
-  useEffect(() => {
-    if (progress?.loaded) {
-      setIsReady(true);
-    } else {
+    return () => {
+      if (hls) {
+        hls.destroy();
+      }
       setIsReady(false);
-    }
-  }, [progress?.loaded]);
+    };
+  }, [url, accountId, accessToken, videoRef?.current]);
 
   return (
     <VideoPlayerContainer
@@ -145,72 +169,37 @@ const VideoPlayer = ({
       height={height}
       onMouseMove={handleMouseMove}
     >
-      {showPrompts && calcShowPrompts() > 80 && (
-        <VideoPrompts>
-          <div>
-            <p>Continue watching</p>
-            <p>Previuos Part (Lesson 1)</p>
-          </div>
-          <div>
-            <p>Continue watching</p>
-            <p>Next Part (Lesson 6)</p>
-          </div>
-        </VideoPrompts>
-      )}
-      {!isReady && !image && (
+      {!isReady && (
         <LoadingScreen>
-          {/* <LoaderCustom zoom={0.5} /> */}
-          <FullPageLoader isSectionLoader loaderWidth={300} />
+          <FullPageLoader
+            isSectionLoader
+            hasBackground
+            loaderWidth={small ? 150 : 200}
+            loaderHeight={small ? 150 : 200}
+            zIndex={5}
+          />
+
+          {error && <p className={`error ${small ? "sm" : ""}`}>{error}</p>}
         </LoadingScreen>
       )}
-      <ReactPlayer
+
+      <video
+        ref={videoRef}
         width="100%"
-        ref={playerRef}
         height="100%"
-        url={url}
-        // muted={true}
-        step="any"
-        light={image}
-        playing={isPlaying}
-        onProgress={handleProgress}
-        onEnded={() => {
-          setIsPlayering(false);
-          setHideController(false);
-          setCount(0);
-          setProgress({ ...progress, played: 1 });
+        onTimeUpdate={handleProgress}
+        controls={false}
+        onCanPlay={() => {
+          setIsReady(true);
         }}
-        config={
-          streamUrl
-            ? {
-                file: {
-                  forceHLS: true,
-                  hlsOptions: {
-                    xhrSetup: function (xhr, url) {
-                      if (accessToken) {
-                        const modifiedURL = `${url}?_account=7d5529dcf5`;
-                        xhr.open("GET", modifiedURL, true);
-                        xhr.setRequestHeader(
-                          "Authorization",
-                          `Bearer ${accessToken}`,
-                        );
-                      }
-                    },
-                  },
-                },
-                hls: {
-                  enableLowInitialLatency: true,
-                  smoothQualityChange: true,
-                  startLevel: 0,
-                },
-              }
-            : { file: null, hls: null }
-        }
       />
-      <VideoController hide={hideController}>
-        {!hideRange && (!image || !isReady) && (
+
+      <VideoController hide={hideController} size={controlSize}>
+        {!hideRange && (
           <RangeContainer>
             <p>
-              {currentTime} / {duration}
+              {formatTime(progress?.currentTime || 0)} /{" "}
+              {formatTime(progress?.duration || 0)}
             </p>
             <input
               type="range"
@@ -225,7 +214,7 @@ const VideoPlayer = ({
             <VideoScreenIcon onClick={handleFullScreen} />
           </RangeContainer>
         )}
-        {(isReady || image) && (
+        {isReady && (
           <div className="play_pause_wrap" onClick={handlePlayPause}>
             {isPlaying ? <PauseIcon fill="#fff" /> : <PlayIcon fill="#fff" />}
           </div>

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

@@ -63,9 +63,12 @@ export const RangeContainer = styled.div`
   .range {
     border-radius: 9px;
     flex: 1;
+    width: 100%;
+    display: block;
     -webkit-appearance: none;
     appearance: none;
     overflow: hidden;
+    cursor: pointer;
     &::-webkit-slider-runnable-track {
       height: 15px;
       background: rgba(198, 204, 204, 0.4);
@@ -156,6 +159,23 @@ export const LoadingScreen = styled.div`
   bottom: 0;
   z-index: 40;
   background-color: rgba(0, 0, 0, 0.05);
-  display: grid;
-  place-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  align-items: center;
+  gap: 12px;
+  .error {
+    color: #f95454;
+    text-align: center;
+    padding: 0 16px;
+    font-size: 14px;
+    font-style: italic;
+    font-weight: 500;
+    margin-bottom: 100px;
+    &.sm {
+      font-size: 12px;
+      margin-bottom: 16px;
+    }
+  }
 `;