l-min-components 1.7.1537 → 1.7.1539

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.7.1537",
+  "version": "1.7.1539",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/reportsComponents/reportQuestions/components/response.jsx

@@ -78,9 +78,7 @@ const Response = ({
                 {fallbackMessage ||
                   (isAiWordFlow && !defaultError
                     ? "Analysis unavailable. We couldn’t generate it this time."
-                    : isPersonal
-                    ? "No response was provided for this question."
-                    : "No response was provided by the student for this question.")}
+                    : "No response was provided for this question.")}
               </p>
 
               {rightIcon && (goodFallback ? <GoodCheck /> : <Redx />)}

package/src/components/video-player/icons/zoomIn.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+const ZoomInIcon = ({ onClick }) => {
+  return (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      onClick={onClick}
+    >
+      <path
+        d="M2.5 4.81065V2.40625M2.5 2.40625H5M2.5 2.40625L5.625 5.41176M12.5 4.81065V2.40625M12.5 2.40625H10M12.5 2.40625L9.375 5.41176M2.5 9.61946V12.0239M2.5 12.0239H5M2.5 12.0239L5.625 9.01836M12.5 12.0239L9.375 9.01836M12.5 12.0239V9.61946M12.5 12.0239H10"
+        stroke="#4A4D4D"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ZoomInIcon;

package/src/components/video-player/icons/zoomOut.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const ZoomOutIcon = ({ onClick }) => {
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 13 13"
+      fill="none"
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.875 5.40991V2.4044H8.75L6.25 0L3.75 2.4044H5.625V5.40991H2.5V3.60661L0 6.01101L2.5 8.41542V6.61211H5.625V9.61762H3.75L6.25 12.022L8.75 9.61762H6.875V6.61211H10V8.41542L12.5 6.01101L10 3.60661V5.40991H6.875Z"
+        fill="#323232"
+      />
+    </svg>
+  );
+};
+
+export default ZoomOutIcon;

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

@@ -5,11 +5,11 @@ import {
   useContext,
   useMemo,
   useCallback,
-} from 'react';
-import { OutletContext } from '../AppMainLayout';
-import FullPageLoader from '../fullPageLoader';
-import screenfull from 'screenfull';
-import Hls from 'hls.js';
+} from "react";
+import { OutletContext } from "../AppMainLayout";
+import FullPageLoader from "../fullPageLoader";
+import screenfull from "screenfull";
+import Hls from "hls.js";
 import {
   ErrorMessage,
   LoadingScreen,
@@ -23,17 +23,21 @@ import PauseIcon from "./icons/pause";
 import errorImage from "./icons/laptop-book.png";
 import useTranslation from "../../hooks/useTranslation.jsx";
 import wordStore from "../../mc/wordStore.json";
+import ZoomInIcon from "./icons/zoomIn.jsx";
+import ZoomOutIcon from "./icons/zoomOut.jsx";
 const VideoPlayer2 = ({
   width,
-  height = '360px',
+  height = "360px",
   style,
   hideRange,
   controlSize,
   src,
   streamUrl,
   small,
+  onFullModeClick,
 }) => {
   const { findText } = useTranslation(wordStore);
+  const [isFullscreen, setIsFullScreen] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
   const [isSeeking, setIsSeeking] = useState(false);
   const [isBuffering, setIsBuffering] = useState(false);
@@ -55,8 +59,8 @@ const VideoPlayer2 = ({
     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(':');
+      .map((v) => (v < 10 ? "0" + v : v))
+      .join(":");
   }, []);
   const play = useCallback(() => {
     if (videoRef?.current && isReady) {
@@ -69,10 +73,17 @@ const VideoPlayer2 = ({
     }
   }, [isReady, videoRef?.current]);
   const handleFullScreen = useCallback(() => {
-    if (screenfull.isEnabled) {
-      screenfull.toggle(playContainerRef.current);
+    if (onFullModeClick) {
+      setIsFullScreen((prev) => {
+        onFullModeClick?.(!prev);
+        return !prev;
+      });
+    } else {
+      if (screenfull.isEnabled) {
+        screenfull.toggle(playContainerRef.current);
+      }
     }
-  }, [playContainerRef?.current]);
+  }, [playContainerRef?.current, isFullscreen]);
   const handleProgress = useCallback(() => {
     if (count > 3) {
       setHideController(true);
@@ -133,29 +144,29 @@ const VideoPlayer2 = ({
       setIsReady(true);
     };
     const attachEvents = () => {
-      video?.addEventListener('play', handlePlay);
-      video?.addEventListener('pause', handlePause);
-      video?.addEventListener('ended', handleEnded);
-      video?.addEventListener('timeupdate', handleTimeUpdate);
+      video?.addEventListener("play", handlePlay);
+      video?.addEventListener("pause", handlePause);
+      video?.addEventListener("ended", handleEnded);
+      video?.addEventListener("timeupdate", handleTimeUpdate);
       // video?.addEventListener("waiting", handleWaiting);
       if (streamUrl && !src) {
-        video?.addEventListener('canplay', handleCanPlay);
+        video?.addEventListener("canplay", handleCanPlay);
       }
     };
     const detachEvents = () => {
-      video?.removeEventListener('play', handlePlay);
-      video?.removeEventListener('pause', handlePause);
-      video?.removeEventListener('ended', handleEnded);
-      video?.removeEventListener('timeupdate', handleTimeUpdate);
+      video?.removeEventListener("play", handlePlay);
+      video?.removeEventListener("pause", handlePause);
+      video?.removeEventListener("ended", handleEnded);
+      video?.removeEventListener("timeupdate", handleTimeUpdate);
       // video?.removeEventListener("waiting", handleWaiting);
-      video?.removeEventListener('canplay', handleCanPlay);
+      video?.removeEventListener("canplay", handleCanPlay);
     };
     if (!src && Hls.isSupported()) {
       hlsRef.current = new Hls({
         xhrSetup: function (xhr, url) {
           const modifiedURL = `${url}?_account=${accountId}`;
-          xhr.open('GET', modifiedURL, true);
-          xhr.setRequestHeader('Authorization', `Bearer ${accessToken}`);
+          xhr.open("GET", modifiedURL, true);
+          xhr.setRequestHeader("Authorization", `Bearer ${accessToken}`);
         },
         lowLatencyMode: true,
       });
@@ -164,32 +175,32 @@ const VideoPlayer2 = ({
         hlsRef.current?.loadSource(url);
       });
       hlsRef.current?.on(Hls.Events.LEVEL_SWITCHED, (val) => {
-        if (val === 'hlsLevelSwitched') {
-          setIsReady(true);
-          setError(null);
-        }
+        // setIsReady(true);
+        // setError(null);
+        // if (val === "hlsLevelSwitched") {
+        // }
       });
       hlsRef.current?.on(Hls.Events.LEVEL_LOADING, (val) => {
-        if (val === 'hlsLevelLoading') {
+        if (val === "hlsLevelLoading") {
           setIsReady(false);
         }
       });
       hlsRef.current?.on(Hls.Events.BUFFER_STALLED, () => setIsBuffering(true));
       hlsRef.current?.on(Hls.Events.BUFFER_APPENDED, () =>
-        setIsBuffering(false),
+        setIsBuffering(false)
       );
       hlsRef.current?.on(Hls.Events.BUFFER_CREATED, (val) => {
-        if (val === 'hlsBufferCreated') {
+        if (val === "hlsBufferCreated") {
           setIsBuffering(true);
         }
       });
       hlsRef.current?.on(Hls.Events.BUFFER_APPENDED, (val) => {
-        if (val === 'hlsBufferAppended') {
+        if (val === "hlsBufferAppended") {
           setIsBuffering(false);
         }
       });
       hlsRef.current?.on(Hls.Events.ERROR, (event, data) => {
-        console.warn('HLS error', data);
+        console.warn("HLS error", data);
         if (data.fatal) {
           setError(data);
           setIsReady(false);
@@ -200,7 +211,7 @@ const VideoPlayer2 = ({
           } else {
             if (
               hlsRef.current &&
-              typeof hlsRef.current.destroy === 'function' &&
+              typeof hlsRef.current.destroy === "function" &&
               !error
             ) {
               hlsRef.current?.destroy();
@@ -209,14 +220,14 @@ const VideoPlayer2 = ({
           }
         }
       });
-    } else if (video.canPlayType('application/vnd.apple.mpegurl') && !src) {
+    } else if (video.canPlayType("application/vnd.apple.mpegurl") && !src) {
       video.src = url;
-      video.addEventListener('loadedmetadata', () => {
+      video.addEventListener("loadedmetadata", () => {
         setIsReady(true);
       });
     } else {
       video.src = src;
-      video.addEventListener('loadedmetadata', () => {
+      video.addEventListener("loadedmetadata", () => {
         setIsReady(true);
       });
       video.load();
@@ -225,7 +236,7 @@ const VideoPlayer2 = ({
     return () => {
       if (
         hlsRef.current &&
-        typeof hlsRef.current?.destroy === 'function' &&
+        typeof hlsRef.current?.destroy === "function" &&
         !error
       ) {
         hlsRef.current?.destroy();
@@ -234,6 +245,14 @@ const VideoPlayer2 = ({
       detachEvents();
     };
   }, [url, accountId, accessToken, videoRef.current, error]);
+
+  useEffect(() => {
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        setIsFullScreen(screenfull.isFullscreen);
+      });
+    }
+  }, []);
   return (
     <VideoPlayerContainer
       ref={playContainerRef}
@@ -246,7 +265,7 @@ const VideoPlayer2 = ({
         <ErrorMessage
           width={width}
           height={height}
-          className={small ? 'small' : undefined}
+          className={small ? "small" : undefined}
         >
           <div>
             <img src={errorImage} alt="" />
@@ -285,21 +304,31 @@ const VideoPlayer2 = ({
           <VideoController hide={hideController} size={controlSize}>
             {!hideRange && (
               <RangeContainer>
-                <p className="range-text">
-                  {formatTime(progress?.currentTime || 0)} /{' '}
-                  {formatTime(progress?.duration || 0)}
-                </p>
-                <input
-                  type="range"
-                  min={0}
-                  max={100}
-                  className="range"
-                  onChange={handleSeekChange}
-                  onMouseDown={handleSeekMouseDown}
-                  onMouseUp={handleSeekMouseUp}
-                  value={(rangeProgress || 0) * 100}
-                />
-                <VideoScreenIcon onClick={handleFullScreen} />
+                <div className="range_body">
+                  <p className="range-text duration_text">
+                    {formatTime(progress?.currentTime || 0)}
+                  </p>
+                  <input
+                    type="range"
+                    min={0}
+                    max={100}
+                    className="range"
+                    onChange={handleSeekChange}
+                    onMouseDown={handleSeekMouseDown}
+                    onMouseUp={handleSeekMouseUp}
+                    value={(rangeProgress || 0) * 100}
+                  />
+                  <p className="range-text">
+                    {formatTime(progress?.duration || 0)}
+                  </p>
+                </div>
+
+                {isFullscreen ? (
+                  <ZoomOutIcon onClick={handleFullScreen} />
+                ) : (
+                  <ZoomInIcon onClick={handleFullScreen} />
+                )}
+                {/* <VideoScreenIcon onClick={handleFullScreen} /> */}
               </RangeContainer>
             )}
             {isReady &&

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

@@ -48,14 +48,26 @@ export const RangeContainer = styled.div`
   background: #fff;
   display: flex;
   align-items: center;
-  padding: 6.5px 12.5px;
+  padding: 0 12.5px;
+  height: 15px;
   gap: 15px;
   position: relative;
+  max-width: 543px;
+  width: 100%;
+  margin: 0 auto;
+  .range_body {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+  }
   .range-text {
-    position: absolute;
     color: #b0dcdc;
     font-size: 10px;
-    left: 40px;
+    color: #636666;
+    &.duration_text {
+      color: #00c2c2;
+    }
   }
   svg {
     cursor: pointer;
@@ -65,18 +77,21 @@ export const RangeContainer = styled.div`
     flex: 1;
     width: 100%;
     display: block;
+    height: 4px;
     -webkit-appearance: none;
     appearance: none;
     overflow: hidden;
     cursor: pointer;
+    background-color: transparent;
+
     &::-webkit-slider-runnable-track {
-      height: 15px;
+      height: 4px;
       background: rgba(198, 204, 204, 0.4);
       border-radius: 16px;
     }
 
     &::-moz-range-track {
-      height: 15px;
+      height: 4px;
       background: rgba(198, 204, 204, 0.4);
       border-radius: 16px;
     }
@@ -84,8 +99,8 @@ export const RangeContainer = styled.div`
     &::-webkit-slider-thumb {
       -webkit-appearance: none;
       appearance: none;
-      height: 15px;
-      width: 15px;
+      height: 4px;
+      width: 4px;
       background-color: #099;
       border-radius: 50%;
       border: 2px solid #099;
@@ -93,12 +108,12 @@ export const RangeContainer = styled.div`
     }
 
     &::-moz-range-thumb {
-      height: 15px;
-      width: 15px;
-      background-color: #099;
+      height: 4px;
+      width: 6px;
+      background-color: #00c2c2;
       border-radius: 50%;
-      border: 1px solid #099;
-      box-shadow: -9999px 0 0 9993px #099;
+      border: 1px solid #009999;
+      box-shadow: -9999px 0 0 9993px #009999;
     }
   }
   /* .range::-webkit-slider-thumb {