l-min-components 1.0.525 → 1.0.528

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.525",
+  "version": "1.0.528",
   "type": "module",
   "files": [
     "src/assets",
@@ -42,6 +42,7 @@
     "react-lottie": "^1.2.4",
     "react-mic": "^12.4.6",
     "react-modal": "^3.16.1",
+    "react-player": "^2.14.1",
     "react-router-dom": "^6.8.2",
     "react-toastify": "^9.1.3",
     "react-tooltip": "^5.10.1",

package/src/components/index.js

@@ -38,3 +38,4 @@ 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";

package/src/components/{videoPlayer → video-player}/icons/pause.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 const PauseIcon = ({ fill, onClick }) => {
   return (
     <svg

package/src/components/{videoPlayer → video-player}/icons/playVideoIcon.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 const PlayVideoIcon = () => {
   return (
     <svg

package/src/components/{videoPlayer → video-player}/icons/videoScreenIcon.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 const VideoScreenIcon = ({ onClick }) => {
   return (
     <svg

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

@@ -0,0 +1,238 @@
+import React, { useState, useRef, useEffect, useContext } from "react";
+import { OutletContext } from "../AppMainLayout";
+import screenfull from "screenfull";
+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,
+  src,
+  streamUrl,
+  thumbnailSrc,
+}) => {
+  const [isPlaying, setIsPlayering] = useState(false);
+  const [isSeeking, setIsSeeking] = useState(false);
+  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 format = (secs) => {
+    const sec_num = parseInt(secs, 10);
+    const hours = Math.floor(sec_num / 3600);
+    const minutes = Math.floor(sec_num / 60) % 60;
+    const seconds = sec_num % 60;
+
+    return [hours, minutes, seconds]
+      .map((v) => (v < 10 ? "0" + v : v))
+      .join(":");
+  };
+
+  const handlePlayPause = () => {
+    setIsPlayering(!isPlaying);
+    setImage(null);
+  };
+
+  const handleFullScreen = () => {
+    screenfull.toggle(playContainerRef.current);
+  };
+
+  const handleProgress = (progress) => {
+    if (count > 3) {
+      setHideController(true);
+      setCount(0);
+    }
+    if (!hideController) {
+      setCount(count + 1);
+    }
+    if (!isSeeking) {
+      setRangeProgress(progress?.played);
+      setProgress(progress);
+    }
+  };
+
+  const handleSeekChange = (e) => {
+    const value = parseFloat(e.target.value) / 100;
+    setRangeProgress(value);
+  };
+
+  const handleSeekMouseUp = () => {
+    setIsSeeking(false);
+    playerRef.current?.seekTo(rangeProgress, "fraction");
+  };
+
+  const handleSeekMouseDown = () => {
+    setIsSeeking(true);
+  };
+
+  const handleMouseMove = () => {
+    setHideController(false);
+    setCount(0);
+  };
+
+  const calcShowPrompts = () => {
+    if (progress?.playedSeconds) {
+      return Math.floor(
+        (progress.playedSeconds * 100) / progress.loadedSeconds,
+      );
+    }
+  };
+
+  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 {
+      setIsReady(false);
+    }
+  }, [progress?.loaded]);
+
+  return (
+    <VideoPlayerContainer
+      ref={playContainerRef}
+      style={style}
+      width={width}
+      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 && (
+        <LoadingScreen>
+          {/* <LoaderCustom zoom={0.5} /> */}
+          <FullPageLoader isSectionLoader loaderWidth={300} />
+        </LoadingScreen>
+      )}
+      <ReactPlayer
+        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 });
+        }}
+        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) && (
+          <RangeContainer>
+            <p>
+              {currentTime} / {duration}
+            </p>
+            <input
+              type="range"
+              min={0}
+              max={100}
+              className="range"
+              onChange={handleSeekChange}
+              onMouseDown={handleSeekMouseDown}
+              onMouseUp={handleSeekMouseUp}
+              value={rangeProgress * 100}
+            />
+            <VideoScreenIcon onClick={handleFullScreen} />
+          </RangeContainer>
+        )}
+        {(isReady || image) && (
+          <div className="play_pause_wrap" onClick={handlePlayPause}>
+            {isPlaying ? <PauseIcon fill="#fff" /> : <PlayIcon fill="#fff" />}
+          </div>
+        )}
+      </VideoController>
+    </VideoPlayerContainer>
+  );
+};
+
+export default VideoPlayer;

package/src/components/{videoPlayer → video-player}/index.styled.jsx

@@ -1,9 +1,10 @@
-import styled from "styled-components";
+import { styled } from "styled-components";
 
 export const VideoPlayerContainer = styled.div`
   position: relative;
   border-radius: 24px;
   overflow: hidden;
+  /* background: #f5f7f7; */
   width: ${({ width }) => (width ? width : "auto")};
   height: ${({ height }) => (height ? height : "auto")};
   video {
@@ -146,3 +147,15 @@ export const VideoPrompts = styled.div`
     }
   }
 `;
+
+export const LoadingScreen = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 40;
+  background-color: rgba(0, 0, 0, 0.05);
+  display: grid;
+  place-items: center;
+`;

package/src/components/videoPlayer/index.jsx

@@ -1,163 +0,0 @@
-import React from "react";
-import { useState, useRef } from "react";
-import screenfull from "screenfull";
-import {
-  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";
-
-const VideoPlayer = ({
-  width,
-  height = "360px",
-  style,
-  src,
-  hideRange,
-  showPrompts,
-  controlSize,
-}) => {
-  const [isPlaying, setIsPlayering] = useState(false);
-  const [isSeeking, setIsSeeking] = useState(false);
-  const [progress, setProgress] = useState();
-  const [hideController, setHideController] = useState(false);
-  const [count, setCount] = useState(0);
-  const playContainerRef = useRef();
-  const playerRef = useRef();
-
-  const format = (secs) => {
-    const sec_num = parseInt(secs, 10);
-    const hours = Math.floor(sec_num / 3600);
-    const minutes = Math.floor(sec_num / 60) % 60;
-    const seconds = sec_num % 60;
-
-    return [hours, minutes, seconds]
-      .map((v) => (v < 10 ? "0" + v : v))
-      .join(":");
-  };
-
-  const handlePlayPause = () => {
-    setIsPlayering(!isPlaying);
-  };
-
-  const handleFullScreen = () => {
-    screenfull.toggle(playContainerRef.current);
-  };
-
-  const handleProgess = (changeState) => {
-    if (count > 3) {
-      setHideController(true);
-      setCount(0);
-    }
-    if (!hideController) {
-      setCount(count + 1);
-    }
-    if (isSeeking === false) {
-      setProgress(changeState);
-    }
-  };
-
-  const handleSeek = (e) => {
-    setProgress({ ...progress, played: parseFloat(e.target?.value / 100) });
-  };
-  const handleSeekMouseDown = () => {
-    setIsSeeking(true);
-  };
-  const handleSeekMouseUp = (e) => {
-    setIsSeeking(true);
-    playerRef.current?.seekTo(e.target?.value / 100);
-  };
-
-  const handleMouseMove = () => {
-    setHideController(false);
-    setCount(0);
-  };
-
-  const calcShowPrompts = () => {
-    if (progress?.playedSeconds) {
-      return Math.floor(
-        (progress.playedSeconds * 100) / progress.loadedSeconds
-      );
-    }
-  };
-
-  const currentTime = playerRef.current
-    ? format(playerRef.current?.getCurrentTime())
-    : "00:00:00";
-
-  const duration = playerRef.current
-    ? format(playerRef.current?.getDuration())
-    : "00:00:00";
-
-  return (
-    <VideoPlayerContainer
-      ref={playContainerRef}
-      style={style}
-      width={width}
-      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>
-      )}
-      <ReactPlayer
-        width="100%"
-        ref={playerRef}
-        height="100%"
-        url={
-          src ||
-          "https://joy1.videvo.net/videvo_files/video/free/video0474/small_watermarked/_import_61ea3dd6ab62a0.19123787_preview.mp4"
-        }
-        // muted={true}
-        playing={isPlaying}
-        onProgress={handleProgess}
-        onEnded={() => {
-          setIsPlayering(false);
-          setHideController(false);
-          setCount(0);
-          setProgress({ ...progress, played: 1 });
-        }}
-      />
-      <VideoController hide={hideController} size={controlSize}>
-        {!hideRange && (
-          <RangeContainer>
-            <p>
-              {currentTime} / {duration}
-            </p>
-            <input
-              type="range"
-              name=""
-              id=""
-              className="range"
-              min={0}
-              max={100}
-              onChange={handleSeek}
-              onMouseDown={handleSeekMouseDown}
-              onMouseUp={handleSeekMouseUp}
-              value={Math.round(progress?.played * 100)}
-            />
-            <VideoScreenIcon onClick={handleFullScreen} />
-          </RangeContainer>
-        )}
-        <div className="play_pause_wrap" onClick={handlePlayPause}>
-          {isPlaying ? <PauseIcon fill="#fff" /> : <PlayIcon fill="#fff" />}
-        </div>
-      </VideoController>
-    </VideoPlayerContainer>
-  );
-};
-
-export default VideoPlayer;