l-min-components 1.0.523 → 1.0.528

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.523",
+  "version": "1.0.528",
   "type": "module",
   "files": [
     "src/assets",
@@ -25,6 +25,7 @@
     "moment": "^2.29.4",
     "npm": "^10.2.5",
     "prop-types": "^15.8.1",
+    "rc-pagination": "^4.0.4",
     "rc-progress": "^3.5.1",
     "rc-slider": "^10.1.1",
     "rc-tooltip": "^6.0.1",
@@ -41,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

@@ -35,5 +35,7 @@ export { default as InstructorAccountSwitcher } from "./instructorAccountSwitche
 export { default as InstructorRightBar } from "./fileRightBar/instructorRightBar";
 
 export { default as EnterpriseRightBar } from "./fileRightBar/enterpriseRightBar";
-export { default as FullPageLoader } from "./fullPageLoader"
-export { default as AdminAppMainLayout } from "./AdminAppMainLayout"
+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/paginate/index.jsx

@@ -0,0 +1,100 @@
+import { styled } from "styled-components";
+import Pagination from "rc-pagination";
+
+/**
+ *
+ * @param {object} props
+ * @param {number} props.current - Current page
+ * @param {number} props.totalPage - The number of items rendered in a page
+ * @param {number} props.totalItem -The complete total number of item
+ * @param {Function} props.onChange - A function that set the current page
+ * @param {React.CSSProperties} props.style
+ * @returns {JSX.Element}
+ */
+const Paginate = ({ current, totalPage, totalItem, onChange, style }) => {
+  return (
+    <Container style={style}>
+      <Pagination
+        onChange={onChange}
+        current={current}
+        total={totalItem}
+        pageSize={totalPage || 1}
+        nextIcon={() => "Next"}
+        prevIcon={() => "Prev"}
+        jumpNextIcon={() => <More />}
+        showLessItems
+        jumpPrevIcon={() => <More />}
+      />
+    </Container>
+  );
+};
+
+const More = () => {
+  return (
+    <svg
+      width="11"
+      height="4"
+      viewBox="0 0 11 4"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.86 3.09C1.54 3.09 1.275 2.985 1.065 2.775C0.855 2.555 0.75 2.285 0.75 1.965C0.75 1.645 0.855 1.38 1.065 1.17C1.275 0.95 1.54 0.84 1.86 0.84C2.18 0.84 2.445 0.95 2.655 1.17C2.865 1.38 2.97 1.645 2.97 1.965C2.97 2.285 2.865 2.555 2.655 2.775C2.445 2.985 2.18 3.09 1.86 3.09ZM5.5807 3.09C5.2607 3.09 4.9957 2.985 4.7857 2.775C4.5757 2.555 4.4707 2.285 4.4707 1.965C4.4707 1.645 4.5757 1.38 4.7857 1.17C4.9957 0.95 5.2607 0.84 5.5807 0.84C5.9007 0.84 6.1657 0.95 6.3757 1.17C6.5857 1.38 6.6907 1.645 6.6907 1.965C6.6907 2.285 6.5857 2.555 6.3757 2.775C6.1657 2.985 5.9007 3.09 5.5807 3.09ZM9.30141 3.09C8.98141 3.09 8.71641 2.985 8.50641 2.775C8.29641 2.555 8.19141 2.285 8.19141 1.965C8.19141 1.645 8.29641 1.38 8.50641 1.17C8.71641 0.95 8.98141 0.84 9.30141 0.84C9.62141 0.84 9.88641 0.95 10.0964 1.17C10.3064 1.38 10.4114 1.645 10.4114 1.965C10.4114 2.285 10.3064 2.555 10.0964 2.775C9.88641 2.985 9.62141 3.09 9.30141 3.09Z"
+        fill="black"
+      />
+    </svg>
+  );
+};
+
+export default Paginate;
+
+export const Container = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  ul {
+    display: flex;
+    list-style: none;
+    gap: 17px;
+    li {
+      cursor: pointer;
+      display: flex;
+      width: 40px;
+      height: 40px;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50px;
+      border: 1px solid #dfe5e5;
+      background: #f5f7f7;
+      font-size: 15px;
+      font-weight: 700;
+      color: #4a4d4d;
+
+      &.rc-pagination-prev,
+      &.rc-pagination-next {
+        width: 76px;
+      }
+      &.rc-pagination-item-active {
+        background: #febf10;
+        a {
+          color: #fff;
+        }
+      }
+      &.rc-pagination-jump-next,
+      &.rc-pagination-jump-prev {
+        background: transparent;
+        width: 12px;
+        border: none;
+        font-size: 15px;
+        font-weight: 700;
+      }
+      &.rc-pagination-disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      &.rc-pagination-options {
+        display: none;
+      }
+    }
+  }
+`;

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;