Merge pull request #232 from ajinkyapandetekdi/all-1.3-feedback-change

Issueid #231949 feat: Show loading until next content is not loaded
Sunbird-ALL · Dec 20, 2024 · 588a916 · 588a916
2 parents a63217d + 7fc647e
commit 588a916
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 42 deletions.
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,19 @@
+.loader {
+  width: 250px;
+  height: 20px;
+  margin-top: 80px;
+  border-radius: 20px;
+  background:
+    linear-gradient(rgb(80, 216, 1) 0 0) 0/0% no-repeat lightblue;
+  animation: l2 1s infinite steps(10);
+}
+
+@keyframes l2 {
+  100% {
+    background-size: 110%
+  }
+}
+
 .hide {
   display: none;
 }

diff --git a/src/utils/AudioCompare.js b/src/utils/AudioCompare.js
@@ -1,17 +1,19 @@
 import React, { useState, useEffect, useRef } from "react";
 import RecordRTC from "recordrtc";
-import { Box } from "@mui/material";
+import { Box, CircularProgress } from "@mui/material";
 import { ListenButton, RetryIcon, SpeakButton, StopButton } from "./constants";
 import RecordVoiceVisualizer from "./RecordVoiceVisualizer";
 import playButton from "../../src/assets/listen.png";
 import pauseButton from "../../src/assets/pause.png";
+import PropTypes from "prop-types";
 
 const AudioRecorder = (props) => {
   const [isRecording, setIsRecording] = useState(false);
   const [status, setStatus] = useState("");
   const [audioBlob, setAudioBlob] = useState(null);
   const recorderRef = useRef(null);
   const mediaStreamRef = useRef(null);
+  const [showLoader, setShowLoader] = useState(false);
 
   useEffect(() => {
     // Cleanup when component unmounts
@@ -26,12 +28,12 @@ const AudioRecorder = (props) => {
   }, []);
 
   const startRecording = async () => {
-    setStatus("recording");
-    if (props.setEnableNext) {
-      props.setEnableNext(false);
-    }
     try {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      if (props.setEnableNext) {
+        props.setEnableNext(false);
+      }
+      setStatus("recording");
       mediaStreamRef.current = stream;
 
       // Use RecordRTC with specific configurations to match the blob structure
@@ -53,29 +55,29 @@ const AudioRecorder = (props) => {
   };
 
   const stopRecording = () => {
-    setStatus("inactive");
-    if (recorderRef.current) {
-      recorderRef.current.stopRecording(() => {
-        const blob = recorderRef.current.getBlob();
-
-        if (blob) {
-          setAudioBlob(blob);
-          saveBlob(blob); // Persist the blob
-        } else {
-          console.error("Failed to retrieve audio blob.");
-        }
-
-        // Stop the media stream
-        if (mediaStreamRef.current) {
-          mediaStreamRef.current.getTracks().forEach((track) => track.stop());
-        }
+    setShowLoader(true);
+    const timeoutId = setTimeout(() => {
+      setShowLoader(false);
+      setStatus("inactive");
+      if (recorderRef.current) {
+        recorderRef.current.stopRecording(() => {
+          const blob = recorderRef.current.getBlob();
+          if (blob) {
+            setAudioBlob(blob);
+            saveBlob(blob);
+          } else {
+            console.error("Failed to retrieve audio blob.");
+          }
+          if (mediaStreamRef.current) {
+            mediaStreamRef.current.getTracks().forEach((track) => track.stop());
+          }
+          setIsRecording(false);
+          props.setEnableNext?.(true);
+        });
+      }
+    }, 1000);
 
-        setIsRecording(false);
-      });
-    }
-    if (props.setEnableNext) {
-      props.setEnableNext(true);
-    }
+    return () => clearTimeout(timeoutId);
   };
 
   const saveBlob = (blob) => {
@@ -104,9 +106,13 @@ const AudioRecorder = (props) => {
                 >
                   <StopButton />
                 </Box>
-                <Box style={{ marginTop: "50px", marginBottom: "50px" }}>
-                  <RecordVoiceVisualizer />
-                </Box>
+                {showLoader ? (
+                  <div className="loader"></div>
+                ) : (
+                  <Box style={{ marginTop: "50px", marginBottom: "50px" }}>
+                    <RecordVoiceVisualizer />
+                  </Box>
+                )}
               </div>
             );
           } else {
@@ -119,7 +125,8 @@ const AudioRecorder = (props) => {
                 }}
                 className="game-action-button"
               >
-                {props?.originalText &&
+                {props.enableAfterLoad &&
+                  props?.originalText &&
                   (!props.dontShowListen || props.recordedAudio) && (
                     <>
                       {!props.isShowCase && (
@@ -175,17 +182,24 @@ const AudioRecorder = (props) => {
                   )}
 
                 <div>
-                  {props?.originalText && !props.showOnlyListen && (
-                    <Box
-                      marginLeft={
-                        !props.dontShowListen || props.recordedAudio
-                          ? "32px"
-                          : "0px"
-                      }
-                      sx={{ cursor: "pointer" }}
-                      onClick={startRecording}
-                    >
-                      {!props.recordedAudio ? <SpeakButton /> : <RetryIcon />}
+                  {props.enableAfterLoad ? (
+                    props?.originalText &&
+                    !props.showOnlyListen && (
+                      <Box
+                        marginLeft={
+                          !props.dontShowListen || props.recordedAudio
+                            ? "32px"
+                            : "0px"
+                        }
+                        sx={{ cursor: "pointer" }}
+                        onClick={startRecording}
+                      >
+                        {!props.recordedAudio ? <SpeakButton /> : <RetryIcon />}
+                      </Box>
+                    )
+                  ) : (
+                    <Box sx={{ display: "flex" }}>
+                      <CircularProgress size="3rem" sx={{ color: "#E15404" }} />
                     </Box>
                   )}
                 </div>
@@ -198,4 +212,11 @@ const AudioRecorder = (props) => {
   );
 };
 
+AudioRecorder.propTypes = {
+  enableAfterLoad: PropTypes.bool,
+  showOnlyListen: PropTypes.bool,
+  recordedAudio: PropTypes.string,
+  originalText: PropTypes.string,
+};
+
 export default AudioRecorder;
diff --git a/src/utils/VoiceAnalyser.js b/src/utils/VoiceAnalyser.js
@@ -63,6 +63,7 @@ function VoiceAnalyser(props) {
   const [pauseAudio, setPauseAudio] = useState(false);
   const [recordedAudio, setRecordedAudio] = useState("");
   const [recordedAudioBase64, setRecordedAudioBase64] = useState("");
+  const [enableAfterLoad, setEnableAfterLoad] = useState(false);
   const [audioPermission, setAudioPermission] = useState(null);
   const [apiResponse, setApiResponse] = useState("");
   const [currentIndex, setCurrentIndex] = useState();
@@ -274,10 +275,19 @@ function VoiceAnalyser(props) {
         const lang = getLocalData("lang") || "ta";
         fetchASROutput(lang, recordedAudioBase64);
         setLoader(true);
+        setEnableAfterLoad(false);
+      } else {
+        alert("please record again");
       }
     }
   }, [props.isNextButtonCalled]);
 
+  useEffect(() => {
+    if (props.originalText) {
+      setEnableAfterLoad(true);
+    }
+  }, [props.originalText]);
+
   useEffect(() => {
     if (recordedAudioBase64 !== "") {
       if (props.setIsNextButtonCalled) {
@@ -695,6 +705,7 @@ function VoiceAnalyser(props) {
                     setEnableNext={props.setEnableNext}
                     showOnlyListen={props.showOnlyListen}
                     setOpenMessageDialog={props.setOpenMessageDialog}
+                    enableAfterLoad={enableAfterLoad}
                   />
                   {/* <RecordVoiceVisualizer /> */}
                 </>