Merge pull request #1067 from AI4Bharat/test-validation-4

add loader until audio is loaded
AI4Bharat · Jul 2, 2024 · 9de0050 · 9de0050
2 parents 550a012 + 6342c0c
commit 9de0050
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 17 deletions.
diff --git a/src/ui/pages/container/CL-Transcription/AllAudioTranscriptionLandingPage.jsx b/src/ui/pages/container/CL-Transcription/AllAudioTranscriptionLandingPage.jsx
@@ -16,7 +16,7 @@ import {
   Typography,
   Grid,
   Button,
-  Slider, Stack
+  Slider, Stack, CircularProgress
 } from "@mui/material";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import Timeline from "./TimeLine";
@@ -495,14 +495,13 @@ const AllAudioTranscriptionLandingPage = () => {
                 </Tooltip>
               </Grid>
             </Grid>
-            {audioURL &&
+            {audioURL ?
              <AudioPanel
                setCurrentTime={setCurrentTime}
                setPlaying={setPlaying}
                taskData={taskData}
                audioUrl={audioURL}
-             />
-             } 
+              /> : <Grid style={{ padding: "0px 20px 0px 20px" }}><audio controls preload='none' className={classes.videoPlayer}/></Grid>}
             <Grid container spacing={1} sx={{ pt: 1, pl: 2, pr : 3}} justifyContent="flex-end">
              <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center" justifyContent="flex-end" width="fit-content">
                 <Typography fontSize={14} fontWeight={"medium"} color="#555">
@@ -730,7 +729,7 @@ const AllAudioTranscriptionLandingPage = () => {
         position="fixed"
         bottom={1}
       >
-        {audioURL && (waveSurfer ? <Timeline2 key={taskDetails?.data?.audio_url} details={taskDetails} waveformSettings={waveSurferWaveformSettings}/> : <Timeline currentTime={currentTime} playing={playing} taskID={taskData?.id} waveformSettings={waveformSettings} />)}
+        {audioURL ? (waveSurfer ? <Timeline2 key={taskDetails?.data?.audio_url} details={taskDetails} waveformSettings={waveSurferWaveformSettings}/> : <Timeline currentTime={currentTime} playing={playing} taskID={taskData?.id} waveformSettings={waveformSettings} />) : <div style={{marginLeft:"49%", marginBottom:"2%"}}><CircularProgress/></div>}
       </Grid>
     </>
   );

diff --git a/src/ui/pages/container/CL-Transcription/AudioTranscriptionLandingPage.jsx b/src/ui/pages/container/CL-Transcription/AudioTranscriptionLandingPage.jsx
@@ -19,7 +19,7 @@ import {
   Typography,
   Grid,
   Button,
-  Slider, Stack
+  Slider, Stack, CircularProgress
 } from "@mui/material";
 import WidgetsOutlinedIcon from "@mui/icons-material/WidgetsOutlined";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
@@ -949,15 +949,15 @@ useEffect(() => {
               filterMessage={filterMessage}
               taskData={taskData}
             />
-            {audioURL && <AudioPanel
+            {audioURL ? <AudioPanel
               setCurrentTime={setCurrentTime}
               setPlaying={setPlaying}
               handleAnnotationClick={handleAnnotationClick}
               onNextAnnotation={onNextAnnotation}
               AnnotationsTaskDetails={AnnotationsTaskDetails}
               taskData={taskData}
               audioUrl={audioURL}
-            />}
+            /> : <Grid style={{ padding: "0px 20px 0px 20px" }}><audio controls preload='none' className={classes.videoPlayer}/></Grid>}
             <Grid container spacing={1} sx={{ pt: 1, pl: 2, pr : 3}} justifyContent="flex-end">
              <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center" justifyContent="flex-end" width="fit-content">
                 <Typography fontSize={14} fontWeight={"medium"} color="#555">
@@ -1233,7 +1233,7 @@ useEffect(() => {
         bottom={1}
       // style={fullscreen ? { visibility: "hidden" } : {}}
       >
-        {audioURL && (waveSurfer ? <Timeline2 key={taskDetails?.data?.audio_url} details={taskDetails} waveformSettings={waveSurferWaveformSettings}/> : <Timeline currentTime={currentTime} playing={playing} taskID={taskData?.id} waveformSettings={waveformSettings}/>)} 
+        {audioURL ? (waveSurfer ? <Timeline2 key={taskDetails?.data?.audio_url} details={taskDetails} waveformSettings={waveSurferWaveformSettings}/> : <Timeline currentTime={currentTime} playing={playing} taskID={taskData?.id} waveformSettings={waveformSettings}/>) : <div style={{marginLeft:"49%", marginBottom:"2%"}}><CircularProgress/></div>} 
       </Grid>
     </>
   );

diff --git a/src/ui/pages/container/CL-Transcription/ReviewAudioTranscriptionLandingPage.jsx b/src/ui/pages/container/CL-Transcription/ReviewAudioTranscriptionLandingPage.jsx
@@ -20,7 +20,7 @@ import {
   Grid,
   Button,
   TextField,
-  Slider, Stack
+  Slider, Stack, CircularProgress
 } from "@mui/material";
 import WidgetsOutlinedIcon from "@mui/icons-material/WidgetsOutlined";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
@@ -1148,14 +1148,14 @@ useEffect(() => {
               disableButton={disableButton}
               anchorEl={anchorEl} setAnchorEl={setAnchorEl}
             />
-            {audioURL && <AudioPanel
+            {audioURL ? <AudioPanel
               setCurrentTime={setCurrentTime}
               setPlaying={setPlaying}
               onNextAnnotation={onNextAnnotation}
               AnnotationsTaskDetails={AnnotationsTaskDetails}
               taskData={taskDetailList}
               audioUrl={audioURL}
-            />}
+            /> : <Grid style={{ padding: "0px 20px 0px 20px" }}><audio controls preload='none'className={classes.videoPlayer}/></Grid>}
             <Grid container spacing={1} sx={{ pt: 1, pl: 2, pr : 3}} justifyContent="flex-end">
              <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center" justifyContent="flex-end" width="fit-content">
                 <Typography fontSize={14} fontWeight={"medium"} color="#555">
@@ -1456,7 +1456,7 @@ useEffect(() => {
         bottom={1}
       // style={fullscreen ? { visibility: "hidden" } : {}}
       >
-        {audioURL && (waveSurfer ? <Timeline2 key={taskDetails?.data?.audio_url} details={taskDetails} waveformSettings={waveSurferWaveformSettings}/> : <Timeline currentTime={currentTime} playing={playing}  taskID={taskDetailList} waveformSettings={waveformSettings}/>)}
+        {audioURL ? (waveSurfer ? <Timeline2 key={taskDetails?.data?.audio_url} details={taskDetails} waveformSettings={waveSurferWaveformSettings}/> : <Timeline currentTime={currentTime} playing={playing}  taskID={taskDetailList} waveformSettings={waveformSettings}/>) : <div style={{marginLeft:"49%", marginBottom:"2%"}}><CircularProgress/></div>}
       </Grid>
     </>
   );

diff --git a/src/ui/pages/container/CL-Transcription/SuperCheckerAudioTranscriptionLandingPage.jsx b/src/ui/pages/container/CL-Transcription/SuperCheckerAudioTranscriptionLandingPage.jsx
@@ -20,7 +20,7 @@ import {
   Grid,
   Button,
   TextField,
-  Slider, Stack
+  Slider, Stack, CircularProgress
 } from "@mui/material";
 import WidgetsOutlinedIcon from "@mui/icons-material/WidgetsOutlined";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
@@ -993,7 +993,7 @@ useEffect(() => {
               anchorEl={anchorEl}
               setAnchorEl={setAnchorEl}
             />
-            {audioURL && 
+            {audioURL ?
             <AudioPanel
               setCurrentTime={setCurrentTime}
               setPlaying={setPlaying}
@@ -1002,7 +1002,7 @@ useEffect(() => {
               AnnotationsTaskDetails={AnnotationsTaskDetails}
               taskData={taskDetailList}
               audioUrl={audioURL}
-            />}
+            /> : <Grid style={{ padding: "0px 20px 0px 20px" }}><audio controls preload='none' className={classes.videoPlayer}/></Grid>}
             <Grid container spacing={1} sx={{ pt: 1, pl: 2, pr : 3}} justifyContent="flex-end">
              <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center" justifyContent="flex-end" width="fit-content">
                 <Typography fontSize={14} fontWeight={"medium"} color="#555">
@@ -1274,7 +1274,7 @@ useEffect(() => {
         bottom={1}
         // style={fullscreen ? { visibility: "hidden" } : {}}
       >
-        {audioURL && (waveSurfer ? <Timeline2 key={taskDetails?.data?.audio_url} details={taskDetails} waveformSettings={waveSurferWaveformSettings}/> : <Timeline currentTime={currentTime} playing={playing} taskID={taskDetailList} waveformSettings={waveformSettings} />)}
+        {audioURL ? (waveSurfer ? <Timeline2 key={taskDetails?.data?.audio_url} details={taskDetails} waveformSettings={waveSurferWaveformSettings}/> : <Timeline currentTime={currentTime} playing={playing} taskID={taskDetailList} waveformSettings={waveformSettings} />) : <div style={{marginLeft:"49%", marginBottom:"2%"}}><CircularProgress/></div>}
       </Grid>
     </>
   );