l-min-components 1.0.431 → 1.0.437

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.431",
+  "version": "1.0.437",
   "type": "module",
   "files": [
     "src/assets",
@@ -19,7 +19,7 @@
     "classnames": "^2.3.2",
     "emoji-picker-react": "^4.4.10",
     "js-cookie": "^3.0.5",
-    "l-min-components": "^1.0.220",
+    "l-min-components": "1.0.435",
     "moment": "^2.29.4",
     "prop-types": "^15.8.1",
     "rc-progress": "^3.5.1",

package/src/components/AppMainLayout/index.jsx

@@ -169,15 +169,17 @@ const AppMainLayout = () => {
                 ) : window.location.pathname.includes("personal/dashboard") ? (
                   <PersonalRightBar />
                 ) : window.location.pathname.includes("personal/addons") ? (
-                  <InstructorRightBar personal /> 
-                )  : window.location.pathname.includes("personal/courses") ? (
-                  <InstructorRightBar personal /> 
-                )  : window.location.pathname.includes("personal/library/selectlanguage") ? (
-                  <InstructorRightBar personal /> 
+                  <InstructorRightBar personal />
+                ) : window.location.pathname.includes("personal/courses") ? (
+                  <InstructorRightBar personal />
+                ) : window.location.pathname.includes(
+                    "personal/library/selectlanguage",
+                  ) ? (
+                  <InstructorRightBar personal />
                 ) : window.location.pathname.includes("personal/library") ? (
-                  <PersonalRightBar personalLibrary  />
+                  <PersonalRightBar personalLibrary />
                 ) : window.location.pathname.includes("personal/reports") ? (
-                  <PersonalRightBar personalReport /> 
+                  <PersonalRightBar personalReport />
                 ) : window.location.pathname.includes("instructor") &&
                   !window.location.pathname.includes("manage-teams") &&
                   !window.location.pathname.includes("file-manager") ? (

package/src/components/index.js

@@ -35,3 +35,4 @@ export { default as InstructorAccountSwitcher } from "./instructorAccountSwitche
 export { default as InstructorRightBar } from "./fileRightBar/instructorRightBar";
 export { default as VideoPlayer } from "./videoPlayer";
 export { default as EnterpriseRightBar } from "./fileRightBar/enterpriseRightBar";
+export { StreamVideoPlayer } from "./streamVideoPlayer";

package/src/components/streamVideoPlayer/icons/pause.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+const PauseIcon = ({ fill, onClick }) => {
+  return (
+    <svg
+      onClick={onClick}
+      width="800px"
+      height="800px"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2 6C2 4.11438 2 3.17157 2.58579 2.58579C3.17157 2 4.11438 2 6 2C7.88562 2 8.82843 2 9.41421 2.58579C10 3.17157 10 4.11438 10 6V18C10 19.8856 10 20.8284 9.41421 21.4142C8.82843 22 7.88562 22 6 22C4.11438 22 3.17157 22 2.58579 21.4142C2 20.8284 2 19.8856 2 18V6Z"
+        fill={fill || "#1C274C"}
+      />
+      <path
+        d="M14 6C14 4.11438 14 3.17157 14.5858 2.58579C15.1716 2 16.1144 2 18 2C19.8856 2 20.8284 2 21.4142 2.58579C22 3.17157 22 4.11438 22 6V18C22 19.8856 22 20.8284 21.4142 21.4142C20.8284 22 19.8856 22 18 22C16.1144 22 15.1716 22 14.5858 21.4142C14 20.8284 14 19.8856 14 18V6Z"
+        fill={fill || "#1C274C"}
+      />
+    </svg>
+  );
+};
+
+export default PauseIcon;

package/src/components/streamVideoPlayer/icons/playVideoIcon.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+const PlayVideoIcon = () => {
+  return (
+    <svg
+      width="23"
+      height="23"
+      viewBox="0 0 23 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0.632812 11.2832V6.72359C0.632812 1.06246 4.86949 -1.25578 10.0537 1.57478L14.2362 3.8546L18.4187 6.13442C23.6029 8.96499 23.6029 13.6015 18.4187 16.432L14.2362 18.7119L10.0537 20.9917C4.86949 23.8223 0.632812 21.504 0.632812 15.8429V11.2832Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default PlayVideoIcon;

package/src/components/streamVideoPlayer/icons/videoScreenIcon.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+const VideoScreenIcon = ({ onClick }) => {
+  return (
+    <svg
+      onClick={onClick}
+      width="17"
+      height="16"
+      viewBox="0 0 17 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.4297 1.82031H11.7593C13.7538 1.82031 15.0834 3.07845 15.0834 4.96567V6.22381"
+        stroke="#7C8080"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M1.78711 6.22381V4.96567C1.78711 3.07845 3.11674 1.82031 5.11117 1.82031H6.4408"
+        stroke="#7C8080"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.4297 14.4035H11.7593C13.7538 14.4035 15.0834 13.1454 15.0834 11.2581V10"
+        stroke="#7C8080"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M1.78711 10V11.2581C1.78711 13.1454 3.11674 14.4035 5.11117 14.4035H6.4408"
+        stroke="#7C8080"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default VideoScreenIcon;

package/src/components/streamVideoPlayer/index.jsx

@@ -0,0 +1,212 @@
+import { useState, useRef, useEffect, useContext } from "react";
+// import { OutletContext } from "l-min-components/src/components";
+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";
+
+const StreamVideoPlayer = ({
+  width,
+  height = "360px",
+  style,
+  hideRange,
+  showPrompts,
+  controlSize,
+  videoId,
+  accountId = "7d5529dcf5",
+}) => {
+  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 playerRef = useRef();
+  const { accessToken } = useContext(OutletContext);
+  const [isReady, setIsReady] = useState(false);
+  console.log(accessToken, "//////////////////////////");
+
+  useEffect(() => {
+    setUrl(
+      `https://dev-117782726-api.learngual.com/media/v1/streams/files/${
+        videoId || "9145e2471cc84f3bac25f4ed8a5f583f"
+      }/stream/`,
+    );
+  }, [videoId]);
+
+  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?.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 && (
+        <LoadingScreen>
+          <LoaderCustom zoom={0.5} />
+        </LoadingScreen>
+      )}
+
+      <ReactPlayer
+        width="100%"
+        ref={playerRef}
+        height="100%"
+        url={url}
+        // muted={true}
+        playing={isPlaying}
+        onProgress={handleProgess}
+        onEnded={() => {
+          setIsPlayering(false);
+          setHideController(false);
+          setCount(0);
+          setProgress({ ...progress, played: 1 });
+        }}
+        config={{
+          file: {
+            forceHLS: true,
+            hlsOptions: {
+              xhrSetup: function (xhr, url) {
+                const modifiedURL = `${url}?_account=${accountId}`;
+                xhr.open("GET", modifiedURL, true);
+                xhr.setRequestHeader("Authorization", `Bearer ${accessToken}`);
+              },
+            },
+          },
+          hls: {
+            enableLowInitialLatency: true,
+            smoothQualityChange: true,
+            startLevel: 0,
+          },
+        }}
+      />
+
+      <VideoController hide={hideController} size={controlSize}>
+        {(!hideRange || !isReady) && (
+          <RangeContainer>
+            <p>
+              {currentTime} / {duration}
+            </p>
+            <input
+              type="range"
+              name=""
+              id=""
+              className="range"
+              min={0}
+              max={100}
+              onChange={handleSeek}
+              onMouseDown={handleSeekMouseDown}
+              onMouseUp={handleSeekMouseUp}
+              value={
+                progress?.played >= 0 ? Math.round(progress?.played * 100) : 100
+              }
+            />
+            <VideoScreenIcon onClick={handleFullScreen} />
+          </RangeContainer>
+        )}
+        {isReady && (
+          <div className="play_pause_wrap" onClick={handlePlayPause}>
+            {isPlaying ? <PauseIcon fill="#fff" /> : <PlayIcon fill="#fff" />}
+          </div>
+        )}
+      </VideoController>
+    </VideoPlayerContainer>
+  );
+};
+
+export default StreamVideoPlayer;

package/src/components/streamVideoPlayer/index.styled.jsx

@@ -0,0 +1,161 @@
+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 {
+    object-fit: contain;
+  }
+`;
+
+export const VideoController = styled.div`
+  position: absolute;
+  padding: 22px 26px;
+  z-index: 2;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  visibility: ${({ hide }) => (hide ? "hidden" : "visible")};
+  .play_pause_wrap {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 64px;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 50%;
+    cursor: pointer;
+
+    svg {
+      width: 30px;
+      height: 30px;
+    }
+  }
+`;
+
+export const RangeContainer = styled.div`
+  border-radius: 16.5px;
+  width: 100%;
+  height: 29.307px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  padding: 6.5px 12.5px;
+  gap: 15px;
+  position: relative;
+  p {
+    position: absolute;
+    color: #b0dcdc;
+    font-size: 10px;
+    left: 40px;
+  }
+  svg {
+    cursor: pointer;
+  }
+  .range {
+    border-radius: 9px;
+    flex: 1;
+    -webkit-appearance: none;
+    appearance: none;
+    overflow: hidden;
+    &::-webkit-slider-runnable-track {
+      height: 15px;
+      background: rgba(198, 204, 204, 0.4);
+      border-radius: 16px;
+    }
+
+    &::-moz-range-track {
+      height: 15px;
+      background: rgba(198, 204, 204, 0.4);
+      border-radius: 16px;
+    }
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      height: 15px;
+      width: 15px;
+      background-color: #099;
+      border-radius: 50%;
+      border: 2px solid #099;
+      box-shadow: -9999px 0 0 9993px #099;
+    }
+
+    &::-moz-range-thumb {
+      height: 15px;
+      width: 15px;
+      background-color: #099;
+      border-radius: 50%;
+      border: 1px solid #099;
+      box-shadow: -9999px 0 0 9993px #099;
+    }
+  }
+  /* .range::-webkit-slider-thumb {
+    box-shadow: 0 0 9999px ;
+    border-radius: 9999px;
+  } */
+`;
+
+export const VideoPrompts = styled.div`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 20px;
+  z-index: 30;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  div {
+    cursor: pointer;
+    border-radius: 0px 8px 8px 0px;
+    background: #fff;
+    height: 48px;
+    min-width: 220px;
+    padding: 2px 18px;
+    border-radius: 0px 8px 8px 0px;
+    width: fit-content;
+    &:nth-child(2) {
+      border-radius: 8px 0px 0px 8px;
+    }
+    p {
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 22px;
+      &:nth-child(1) {
+        color: #00c2c2;
+        &::before {
+          content: "";
+          display: inline-block;
+          border-radius: 50%;
+          width: 12px;
+          height: 12px;
+          background-color: #00c2c2;
+          margin-right: 7px;
+        }
+      }
+      &:nth-child(2) {
+        color: #febf10;
+      }
+    }
+  }
+`;
+
+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/streamVideoPlayer/loader/index.jsx

@@ -0,0 +1,34 @@
+import Loader from "../../loader";
+import styled from "styled-components";
+
+const LoaderCustom = ({ zoom = 0.3, color = "#00c2c2", position }) => {
+  return (
+    <Container
+      positionValue={
+        position === "left"
+          ? "flex-start"
+          : position === "right"
+          ? "flex-end"
+          : "center"
+      }
+    >
+      <Loader
+        color={color}
+        zoom={zoom}
+        style={{
+          textAlign: "center",
+        }}
+      />
+    </Container>
+  );
+};
+
+export default LoaderCustom;
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: ${({ positionValue }) => positionValue};
+  align-items: center;
+`;

package/src/components/videoPlayer/index.styled.jsx

@@ -1,10 +1,9 @@
 import styled from "styled-components";
-import React from "react";
+
 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 {