l-min-components 1.0.407 → 1.0.412

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.407",
+  "version": "1.0.412",
   "type": "module",
   "files": [
     "src/assets",
@@ -35,7 +35,7 @@
     "react-input-emoji": "^5.3.1",
     "react-mic": "^12.4.6",
     "react-modal": "^3.16.1",
-    "react-player": "^2.13.0",
+    "react-player": "2.12.0",
     "react-router-dom": "^6.8.2",
     "react-toastify": "^9.1.3",
     "react-tooltip": "^5.10.1",

package/src/components/AppMainLayout/index.jsx

@@ -82,7 +82,7 @@ const AppMainLayout = () => {
         break;
       }
     }
-    setAccessToken(cookieValue)
+    setAccessToken(cookieValue);
   }, [defaultAcct]);
 
   return (
@@ -109,7 +109,7 @@ const AppMainLayout = () => {
         // return true if instructor affiliates is Active
         setHideAffilicates,
         affiliatesActive,
-        accessToken
+        accessToken,
       }}
     >
       <Layout
@@ -161,24 +161,24 @@ const AppMainLayout = () => {
 
           {rightLayout && !coming && (
             <RightLayout>
-              {
-                window.location.pathname.includes("enterprise")
-                  && !window.location.pathname.includes("file-manager")
-                ? <EnterpriseRightBar/>
-                : window.location.pathname.includes("personal")
-                ? <InstructorRightBar /> 
-                :  window.location.pathname.includes("instructor") 
-                  && !window.location.pathname.includes("manage-teams") 
-                  && !window.location.pathname.includes("file-manager")
-                ? <InstructorRightBar /> 
-                :  window.location.pathname.includes("developer")
-                ? <Banner />
-                : <Banner />
-                }
+              {rightComponent ??
+                (window.location.pathname.includes("enterprise") &&
+                !window.location.pathname.includes("file-manager") ? (
+                  <EnterpriseRightBar />
+                ) : window.location.pathname.includes("personal") ? (
+                  <InstructorRightBar />
+                ) : window.location.pathname.includes("instructor") &&
+                  !window.location.pathname.includes("manage-teams") &&
+                  !window.location.pathname.includes("file-manager") ? (
+                  <InstructorRightBar />
+                ) : window.location.pathname.includes("developer") ? (
+                  <Banner />
+                ) : (
+                  <Banner />
+                ))}
 
               {/* {rightComponent ?? <Banner />} */}
-              
-             </RightLayout>
+            </RightLayout>
           )}
         </MainLayout>
       </Layout>

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

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

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

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

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

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

package/src/components/videoPlayer/index.jsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, React } from "react";
 import screenfull from "screenfull";
 import {
   RangeContainer,
@@ -13,23 +13,20 @@ import PauseIcon from "./icons/pause";
 
 const VideoPlayer = ({
   width,
-  height,
+  height = "360px",
   style,
   src,
   hideRange,
   showPrompts,
   controlSize,
 }) => {
-  const [player, setPlayer] = useState({
-    playing: false,
-    played: 0,
-    seeking: false,
-  });
+  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 { playing, played, seeking } = player;
 
   const format = (secs) => {
     const sec_num = parseInt(secs, 10);
@@ -43,7 +40,7 @@ const VideoPlayer = ({
   };
 
   const handlePlayPause = () => {
-    setPlayer({ ...player, playing: !player.playing });
+    setIsPlayering(!isPlaying);
   };
 
   const handleFullScreen = () => {
@@ -58,19 +55,19 @@ const VideoPlayer = ({
     if (!hideController) {
       setCount(count + 1);
     }
-    if (seeking === false) {
-      setPlayer({ ...player, ...changeState });
+    if (isSeeking === false) {
+      setProgress(changeState);
     }
   };
 
   const handleSeek = (e) => {
-    setPlayer({ ...player, played: parseFloat(e.target?.value / 100) });
+    setProgress({ ...progress, played: parseFloat(e.target?.value / 100) });
   };
   const handleSeekMouseDown = () => {
-    setPlayer({ ...player, seeking: true });
+    setIsSeeking(true);
   };
   const handleSeekMouseUp = (e) => {
-    setPlayer({ ...player, seeking: false });
+    setIsSeeking(true);
     playerRef.current?.seekTo(e.target?.value / 100);
   };
 
@@ -80,23 +77,12 @@ const VideoPlayer = ({
   };
 
   const calcShowPrompts = () => {
-    if (player?.playedSeconds) {
-      return Math.floor((player.playedSeconds * 100) / player.loadedSeconds);
+    if (progress?.playedSeconds) {
+      return Math.floor(
+        (progress.playedSeconds * 100) / progress.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())
@@ -135,8 +121,14 @@ const VideoPlayer = ({
           "https://joy1.videvo.net/videvo_files/video/free/video0474/small_watermarked/_import_61ea3dd6ab62a0.19123787_preview.mp4"
         }
         // muted={true}
-        playing={playing}
+        playing={isPlaying}
         onProgress={handleProgess}
+        onEnded={() => {
+          setIsPlayering(false);
+          setHideController(false);
+          setCount(0);
+          setProgress({ ...progress, played: 1 });
+        }}
       />
       <VideoController hide={hideController} size={controlSize}>
         {!hideRange && (
@@ -146,19 +138,21 @@ const VideoPlayer = ({
             </p>
             <input
               type="range"
+              name=""
+              id=""
               className="range"
               min={0}
               max={100}
               onChange={handleSeek}
               onMouseDown={handleSeekMouseDown}
               onMouseUp={handleSeekMouseUp}
-              value={played * 100}
+              value={Math.round(progress?.played * 100)}
             />
             <VideoScreenIcon onClick={handleFullScreen} />
           </RangeContainer>
         )}
         <div className="play_pause_wrap" onClick={handlePlayPause}>
-          {playing ? <PauseIcon fill="#fff" /> : <PlayIcon fill="#fff" />}
+          {isPlaying ? <PauseIcon fill="#fff" /> : <PlayIcon fill="#fff" />}
         </div>
       </VideoController>
     </VideoPlayerContainer>