From f372fb897e522049f45a07d61bc650c8de18ae02 Mon Sep 17 00:00:00 2001
From: aaronshiel <ashiel408@gmail.com>
Date: Tue, 3 Oct 2023 17:12:32 -0700
Subject: [PATCH] restrict user to recording time in config

---
 client/src/api.ts                             |  3 ++
 .../src/components/record/video-recorder.tsx  | 45 +++++++++++++++++--
 client/src/types-gql.ts                       |  1 +
 3 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/client/src/api.ts b/client/src/api.ts
index 09f357f8..149c6be4 100644
--- a/client/src/api.ts
+++ b/client/src/api.ts
@@ -360,6 +360,7 @@ export async function fetchUsers(
                   disableThumbnailRecommendation
                   disableLevelProgressDisplay
                   completeSubjectsNotificationText
+                  recordTimeLimitSeconds
                 }
                 orgPermissions {
                   orgId
@@ -1080,6 +1081,7 @@ export async function fetchMentorById(
             disableThumbnailRecommendation
             disableLevelProgressDisplay
             completeSubjectsNotificationText
+            recordTimeLimitSeconds
           }
           orgPermissions {
             orgId
@@ -1256,6 +1258,7 @@ export async function fetchMentorConfig(
             disableThumbnailRecommendation
             disableLevelProgressDisplay
             completeSubjectsNotificationText
+            recordTimeLimitSeconds
           }
       }
     `,
diff --git a/client/src/components/record/video-recorder.tsx b/client/src/components/record/video-recorder.tsx
index 07eb2095..125a389c 100644
--- a/client/src/components/record/video-recorder.tsx
+++ b/client/src/components/record/video-recorder.tsx
@@ -16,6 +16,8 @@ import { UseWithRecordState } from "types";
 import PermCameraMicIcon from "@mui/icons-material/PermCameraMic";
 import { useWithVideoSegmentation } from "components/record/video-segmentation";
 import { useWithImage } from "hooks/graphql/use-with-image";
+import { MentorConfig } from "types-gql";
+import useActiveMentor from "store/slices/mentor/useActiveMentor";
 
 function VideoRecorder(props: {
   classes: Record<string, string>;
@@ -53,6 +55,10 @@ function VideoRecorder(props: {
     : "video/mp4";
   const videoSaveMimeType = isVirtualBgMentor ? "video/webm" : "video/mp4";
   const videoSaveName = isVirtualBgMentor ? "video.webm" : "video.mp4";
+  const { getData } = useActiveMentor();
+  const mentorConfig: MentorConfig | undefined = getData(
+    (m) => m.data?.mentorConfig
+  );
 
   //Using refs to access states variables in event handler
   const recordStopCountdownRef = useRef(recordStopCountdown);
@@ -129,12 +135,18 @@ function VideoRecorder(props: {
   useEffect(() => {
     if (
       !recordState.isRecording ||
-      !recordState?.curAnswer?.minVideoLength ||
+      (!recordState?.curAnswer?.minVideoLength &&
+        !mentorConfig?.recordTimeLimitSeconds) ||
       autoStoppingIdle
     ) {
       return;
     }
-    if (recordDurationCounter > recordState?.curAnswer?.minVideoLength) {
+    if (
+      (recordState?.curAnswer?.minVideoLength &&
+        recordDurationCounter > recordState.curAnswer.minVideoLength) ||
+      (mentorConfig &&
+        recordDurationCounter > mentorConfig.recordTimeLimitSeconds)
+    ) {
       setAutoStoppingIdle(true);
       beginStopRecordingCountdown();
     }
@@ -289,6 +301,14 @@ function VideoRecorder(props: {
       : null
   );
 
+  function getMinSecondText(minSeconds: number): string {
+    const minutes = Math.trunc(minSeconds / 60);
+    const seconds = Math.trunc(minSeconds % 60);
+    return `${minutes > 0 ? minutes + " min" : ""}${
+      minutes > 0 && seconds > 0 ? " and " : ""
+    }${seconds > 0 ? seconds + " sec" : ""}`;
+  }
+
   function getRecordTimeText(recordTime: number): string {
     const minutes = Math.trunc(recordTime / 60);
     const seconds = Math.trunc(recordTime % 60);
@@ -298,7 +318,7 @@ function VideoRecorder(props: {
       Number(seconds / 10) < 1
         ? `0${seconds.toString()}`
         : `${seconds.toString()}`;
-    return `${minutesString}:${secondsString}`;
+    return `${minutesString}m:${secondsString}s`;
   }
 
   const backgroundImageStyling: React.CSSProperties = isVirtualBgMentor
@@ -321,6 +341,25 @@ function VideoRecorder(props: {
             : "visible",
       }}
     >
+      {mentorConfig?.recordTimeLimitSeconds ||
+      recordState.curAnswer?.minVideoLength ? (
+        <Typography
+          data-cy="instruction"
+          style={{
+            textAlign: "center",
+            visibility: cameraIsOn ? "inherit" : "hidden",
+          }}
+        >
+          <b>Note:</b> You may record a video up to{" "}
+          {getMinSecondText(
+            recordState.curAnswer?.minVideoLength != undefined
+              ? recordState.curAnswer?.minVideoLength
+              : mentorConfig?.recordTimeLimitSeconds || 0
+          )}{" "}
+          long.
+        </Typography>
+      ) : undefined}
+
       <Typography
         data-cy="instruction"
         style={{
diff --git a/client/src/types-gql.ts b/client/src/types-gql.ts
index 4d81b8c0..f1d7169e 100644
--- a/client/src/types-gql.ts
+++ b/client/src/types-gql.ts
@@ -68,6 +68,7 @@ export interface MentorConfig {
   disableThumbnailRecommendation: boolean;
   disableLevelProgressDisplay: boolean;
   completeSubjectsNotificationText: string;
+  recordTimeLimitSeconds: number;
 }
 
 export interface MentorGQL {