l-min-components 1.0.387 → 1.0.392

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.387",
+  "version": "1.0.392",
   "type": "module",
   "files": [
     "src/assets",
@@ -35,9 +35,11 @@
     "react-input-emoji": "^5.3.1",
     "react-mic": "^12.4.6",
     "react-modal": "^3.16.1",
+    "react-player": "^2.13.0",
     "react-router-dom": "^6.8.2",
     "react-toastify": "^9.1.3",
     "react-tooltip": "^5.10.1",
+    "screenfull": "^6.0.2",
     "slate": "^0.94.0",
     "slate-history": "^0.93.0",
     "slate-react": "^0.94.0",

package/src/components/AppMainLayout/index.jsx

@@ -39,6 +39,7 @@ const AppMainLayout = () => {
   const [sideMenuLayout, setSideMenuLayout] = useState(true);
   const [defaultAcct, setDefaultAcct] = useState("");
   const [centerLayoutStyle, setCenterLayoutStyle] = useState({});
+  const [hideAffilicates, setHideAffilicates] = useState(false);
   const [affiliatesActive, setAffiliatesActive] = useState(false);
 
   useEffect(() => {
@@ -86,6 +87,7 @@ const AppMainLayout = () => {
         centerLayoutStyle,
         setCenterLayoutStyle,
         // return true if instructor affiliates is Active
+        setHideAffilicates,
         affiliatesActive,
       }}
     >
@@ -123,11 +125,14 @@ const AppMainLayout = () => {
             )}
           </LeftLayout>
           <CenterLayout isOpen={isOpen} style={centerLayoutStyle}>
-          {window.location.pathname.includes("instructor") && 
-            !window.location.pathname.includes("enterprise") &&
-            !window.location.pathname.includes("manage-teams") && (
-              <InstructorAccountSwitcher setAccountType={setAffiliatesActive} />
-            )}
+            {window.location.pathname.includes("instructor") &&
+              !window.location.pathname.includes("enterprise") &&
+              !window.location.pathname.includes("manage-teams") &&
+              !hideAffilicates && (
+                <InstructorAccountSwitcher
+                  setAccountType={setAffiliatesActive}
+                />
+              )}
 
             <Outlet />
           </CenterLayout>

package/src/components/index.js

@@ -33,4 +33,5 @@ export { default as TextEditor } from "./textEditor";
 export { default as MessageAddon } from "./messageAddon/messages";
 export { default as InstructorAccountSwitcher } from "./instructorAccountSwitcher";
 export { default as InstructorRightBar } from "./fileRightBar/instructorRightBar";
-export { default as EnterpriseRightBar } from "./fileRightBar/enterpriseRightBar";
+export { default as VideoPlayer } from "./videoPlayer";
+export { default as EnterpriseRightBar } from "./fileRightBar/enterpriseRightBar";

package/src/components/instructorAccountSwitcher/index.jsx

@@ -75,7 +75,7 @@ const InstructorAccountSwitcher = ({ setAccountType }) => {
           </ExpiryModalContent>
         </ExpiryModal>
       )}
-      <Container>
+      <Container className="instructor_account_switcher">
         <div className="left">
           {switchValue !== "affiliates" && (
             <p onClick={() => setExpiryFlow("expiry")}>Frank Language Expert</p>

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

@@ -0,0 +1,23 @@
+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/videoPlayer/icons/playVideoIcon.jsx

@@ -0,0 +1,18 @@
+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/videoPlayer/icons/videoScreenIcon.jsx

@@ -0,0 +1,47 @@
+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/videoPlayer/index.jsx

@@ -0,0 +1,170 @@
+import { useState, useRef, useEffect } 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,
+  style,
+  src,
+  hideRange,
+  showPrompts,
+  controlSize,
+}) => {
+  const [player, setPlayer] = useState({
+    playing: false,
+    played: 0,
+    seeking: false,
+  });
+  const [hideController, setHideController] = useState(false);
+  const [count, setCount] = useState(0);
+  const playContainerRef = useRef();
+  const playerRef = useRef();
+  const { playing, played, seeking } = player;
+
+  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 = () => {
+    setPlayer({ ...player, playing: !player.playing });
+  };
+
+  const handleFullScreen = () => {
+    screenfull.toggle(playContainerRef.current);
+  };
+
+  const handleProgess = (changeState) => {
+    if (count > 3) {
+      setHideController(true);
+      setCount(0);
+    }
+    if (!hideController) {
+      setCount(count + 1);
+    }
+    if (seeking === false) {
+      setPlayer({ ...player, ...changeState });
+    }
+  };
+
+  const handleSeek = (e) => {
+    setPlayer({ ...player, played: parseFloat(e.target?.value / 100) });
+  };
+  const handleSeekMouseDown = () => {
+    setPlayer({ ...player, seeking: true });
+  };
+  const handleSeekMouseUp = (e) => {
+    setPlayer({ ...player, seeking: false });
+    playerRef.current?.seekTo(e.target?.value / 100);
+  };
+
+  const handleMouseMove = () => {
+    setHideController(false);
+    setCount(0);
+  };
+
+  const calcShowPrompts = () => {
+    if (player?.playedSeconds) {
+      return Math.floor((player.playedSeconds * 100) / player.loadedSeconds);
+    }
+  };
+  const currentValue = playerRef?.current?.getCurrentTime();
+  const durrationValue = playerRef.current?.getDuration();
+  useEffect(() => {
+    if (currentValue && durrationValue) {
+      if (currentValue === durrationValue) {
+        setTimeout(() => {
+          setPlayer({ ...player, playing: false });
+          setHideController(false);
+          setCount(0);
+        }, 500);
+      }
+    }
+  }, [currentValue, durrationValue, player]);
+
+  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={playing}
+        onProgress={handleProgess}
+      />
+      <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={played * 100}
+            />
+            <VideoScreenIcon onClick={handleFullScreen} />
+          </RangeContainer>
+        )}
+        <div className="play_pause_wrap" onClick={handlePlayPause}>
+          {playing ? <PauseIcon fill="#fff" /> : <PlayIcon fill="#fff" />}
+        </div>
+      </VideoController>
+    </VideoPlayerContainer>
+  );
+};
+
+export default VideoPlayer;

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

@@ -0,0 +1,149 @@
+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;
+      }
+    }
+  }
+`;