Merge branch 'develop' into pie_chart_project_analytics

AI4Bharat · Feb 6, 2024 · b558c83 · b558c83
2 parents ee0ab7b + 0274d87
commit b558c83
Show file tree

Hide file tree

Showing 9 changed files with 523 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",
     "textarea-caret": "^3.1.0",
+    "wavesurfer.js": "^7.7.1",
     "web-vitals": "^2.1.4",
     "wfplayer": "^2.2.6"
   },

diff --git a/src/ui/pages/component/CL-Transcription/SettingsButtonComponent.jsx b/src/ui/pages/component/CL-Transcription/SettingsButtonComponent.jsx
@@ -61,6 +61,8 @@ const SettingsButtonComponent = ({
   handleInfoButtonClick,
   advancedWaveformSettings,
   setAdvancedWaveformSettings,
+  waveSurfer,
+  setWaveSurfer,
   pauseOnType,
   setPauseOnType,
   annotationId,
@@ -185,6 +187,19 @@ const SettingsButtonComponent = ({
             }
           />
         </MenuItem>
+        <MenuItem>
+          <FormControlLabel
+            label="WaveSurfer"
+            control={
+              <Checkbox
+                checked={waveSurfer}
+                onChange={() => {
+                  setWaveSurfer(!waveSurfer);
+                }}
+              />
+            }
+          />
+        </MenuItem>
         <MenuItem>
         <Popup contentStyle={{
           width: "300px",

diff --git a/src/ui/pages/container/CL-Transcription/AllAudioTranscriptionLandingPage.jsx b/src/ui/pages/container/CL-Transcription/AllAudioTranscriptionLandingPage.jsx
@@ -20,6 +20,7 @@ import {
 } from "@mui/material";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import Timeline from "./TimeLine";
+import Timeline2 from './wavesurfer';
 import AudioPanel from "./AudioPanel";
 import AudioTranscriptionLandingStyle from "../../../styles/AudioTranscriptionLandingStyle";
 import APITransport from "../../../../redux/actions/apitransport/apitransport";
@@ -332,6 +333,46 @@ const AllAudioTranscriptionLandingPage = () => {
   })
   }, [wave, waveColor, backgroundColor, paddingColor, cursor, cursorColor, progress, progressColor, grid, gridColor, ruler, rulerColor, scrollbar, scrollbarColor, rulerAtTop, scrollable, duration, padding, pixelRatio, waveScale, waveSize, wavWorker]);
 
+  const [waveSurfer, setWaveSurfer] = useState(false);
+  const [waveSurferHeight, setWaveSurferHeigth] = useState(128);
+  const [waveSurferMinPxPerSec, setWaveSurferMinPxPerSec] = useState(100);
+  const [waveSurferWaveColor, setWaveSurferWaveColor] = useState('#ff4e00');
+  const [waveSurferProgressColor, setWaveSurferProgressColor] = useState("#dd5e98");
+  const [waveSurferCursorColor, setWaveSurferCursorColor] = useState("#ddd5e9");
+  const [waveSurferCursorWidth, setWaveSurferCursorWidth] = useState(1);
+  const [waveSurferBarWidth, setWaveSurferBarWidth] = useState(2);
+  const [waveSurferBarGap, setWaveSurferBarGap] = useState(0);
+  const [waveSurferBarRadius, setWaveSurferBarRadius] = useState(0);
+  const [waveSurferBarHeight, setWaveSurferBarHeight] = useState(1);
+
+  const [waveSurferWaveformSettings, setWaveSurferWaveformSettings] = useState({
+    "height": waveSurferHeight,
+    "minPxPerSec": waveSurferMinPxPerSec,
+    "waveColor": waveSurferWaveColor,
+    "progressColor": waveSurferProgressColor,
+    "cursorColor": waveSurferCursorColor,
+    "cursorWidth": waveSurferCursorWidth,
+    "barWidth": waveSurferBarWidth,
+    "barGap": waveSurferBarGap,
+    "barRadius": waveSurferBarRadius,
+    "barHeight": waveSurferBarHeight
+  });
+
+  useEffect(() => {
+    setWaveSurferWaveformSettings({
+      "height": waveSurferHeight,
+      "minPxPerSec": waveSurferMinPxPerSec,
+      "waveColor": waveSurferWaveColor,
+      "progressColor": waveSurferProgressColor,
+      "cursorColor": waveSurferCursorColor,
+      "cursorWidth": waveSurferCursorWidth,
+      "barWidth": waveSurferBarWidth,
+      "barGap": waveSurferBarGap,
+      "barRadius": waveSurferBarRadius,
+      "barHeight": waveSurferBarHeight
+    })
+  }, [waveSurferHeight, waveSurferMinPxPerSec, waveSurferWaveColor, waveSurferProgressColor, waveSurferCursorColor, waveSurferCursorWidth, waveSurferBarWidth, waveSurferBarGap, waveSurferBarRadius, waveSurferBarHeight])
+
   useEffect(() => {
     if (showNotes === true) {
       setAdvancedWaveformSettings(false);
@@ -580,31 +621,56 @@ const AllAudioTranscriptionLandingPage = () => {
                 height: "max-content"
               }}
             >
-              <table style={{ width: "100%", textAlign: 'center', fontSize: 'large' }}>
-                <tr>
-                  <td>Wave:&nbsp;&nbsp;<input type='checkbox' checked={wave} onChange={() => { setWave(!wave) }}></input>&nbsp;&nbsp;<input type='color' style={{ width: "25px", padding: "0px" }} value={waveColor} onChange={(e) => { setWaveColor(e.target.value) }}></input></td>
-                  <td>Background:&nbsp;&nbsp;<input type='color' style={{ width: "25px", padding: "0px" }} value={backgroundColor} onChange={(e) => { setBackgroundColor(e.target.value) }}></input></td>
-                  <td colSpan={2}>Padding:&nbsp;&nbsp;<input type='color' style={{ width: "25px", padding: "0px" }} value={paddingColor} onChange={(e) => { setPaddingColor(e.target.value) }}></input></td>
-                  <td>Cursor:&nbsp;&nbsp;<input type='checkbox' checked={cursor} onChange={() => { setCursor(!cursor) }}></input>&nbsp;&nbsp;<input type='color' style={{ width: "25px", padding: "0px" }} value={cursorColor} onChange={(e) => { setCursorColor(e.target.value) }}></input></td>
-                  <td>Progress:&nbsp;&nbsp;<input type='checkbox' checked={progress} onChange={() => { setProgress(!progress) }}></input>&nbsp;&nbsp;<input type='color' style={{ width: "25px", padding: "0px" }} value={progressColor} onChange={(e) => { setProgressColor(e.target.value) }}></input></td>
-                </tr>
-                <tr>
-                  <td>Grid:&nbsp;&nbsp;<input type='checkbox' checked={grid} onChange={() => { setGrid(!grid) }}></input>&nbsp;&nbsp;<input type='color' style={{ width: "25px", padding: "0px" }} value={gridColor} onChange={(e) => { setGridColor(e.target.value) }}></input></td>
-                  <td>Ruler:&nbsp;&nbsp;<input type='checkbox' checked={ruler} onChange={() => { setRuler(!ruler) }}></input>&nbsp;&nbsp;<input type='color' style={{ width: "25px", padding: "0px" }} value={rulerColor} onChange={(e) => { setRulerColor(e.target.value) }}></input></td>
-                  <td colSpan={2}>Scrollbar:&nbsp;&nbsp;<input type='checkbox' checked={scrollbar} onChange={() => { setScrollbar(!scrollbar) }}></input>&nbsp;&nbsp;<input type='color' style={{ width: "25px", padding: "0px" }} value={scrollbarColor} onChange={(e) => { setScrollbarColor(e.target.value) }}></input></td>
-                  <td>Ruler At Top:&nbsp;&nbsp;<input type='checkbox' checked={rulerAtTop} onChange={() => { setRulerAtTop(!rulerAtTop) }}></input></td>
-                  <td>Scrollable:&nbsp;&nbsp;<input type='checkbox' checked={scrollable} onChange={() => { setScrollable(!scrollable) }}></input></td>
-                  <td>Wav worker:&nbsp;&nbsp;<input type='checkbox' checked={wavWorker} onChange={() => {setWavWorker(!wavWorker)}}></input></td>
-                </tr>
-                <tr>
-                  <td colSpan={2}>Padding:&nbsp;&nbsp;<input type='range' min={0} max={20} step={1} value={padding} onChange={(e) => { setPadding(e.target.value) }}></input>&nbsp;{padding}</td>
-                  <td colSpan={2}>Pixel Ratio:&nbsp;&nbsp;<input type='range' min={1} max={2} step={1} value={pixelRatio} onChange={(e) => { setPixelRatio(e.target.value) }}></input>&nbsp;{pixelRatio}</td>
-                </tr>
-                <tr>
-                  <td colSpan={3}>Wave Scale:&nbsp;&nbsp;<input type='range' min={0.1} max={2} step={0.1} value={waveScale} onChange={(e) => { setWaveScale(e.target.value) }}></input>&nbsp;{waveScale}</td>
-                  <td colSpan={3}>Wave Size:&nbsp;&nbsp;<input type='range' min={1} max={10} step={1} value={waveSize} onChange={(e) => { setWaveSize(e.target.value) }}></input>&nbsp;{waveSize}</td>
-                </tr>
-              </table>
+                <table style={{width: "100%", textAlign: 'center', fontSize: 'large'}}>
+                  { waveSurfer ? 
+                  <>
+                  <tr>
+                    <td colSpan={2}>Height:&nbsp;&nbsp;<input type='range' min={10} max={512} step={1} value={waveSurferHeight} onChange={(e) => {setWaveSurferHeigth(e.target.value)}}></input></td>
+                    {/* <td>Width:&nbsp;&nbsp;<input type='range' min={10} max={2000} step={1} value={waveSurferWidth} onChange={(e) => {setWaveSurferWidth(e.target.value)}}></input></td> */}
+                    <td colSpan={2}>Min PX Per Sec:&nbsp;&nbsp;<input type='range' min={1} max={1000} step={1} value={waveSurferMinPxPerSec} onChange={(e) => {setWaveSurferMinPxPerSec(e.target.value)}}></input></td>
+                  </tr>
+                  <tr>
+                    <td>Wave Color:&nbsp;&nbsp;<input type='color' style={{width: "25px", padding: "0px"}} value={waveSurferWaveColor} onChange={(e) => {setWaveSurferWaveColor(e.target.value)}}></input></td>
+                    <td>Progress Color:&nbsp;&nbsp;<input type='color' style={{width: "25px", padding: "0px"}} value={waveSurferProgressColor} onChange={(e) => {setWaveSurferProgressColor(e.target.value)}}></input></td>
+                    <td>Cursor Color:&nbsp;&nbsp;<input type='color' style={{width: "25px", padding: "0px"}} value={waveSurferCursorColor} onChange={(e) => {setWaveSurferCursorColor(e.target.value)}}></input></td>
+                    <td>Cursor Width:&nbsp;&nbsp;<input type='range' min={0} max={10} step={1} value={waveSurferCursorWidth} onChange={(e) => {setWaveSurferCursorWidth(e.target.value)}}></input></td>
+                  </tr>
+                  <tr>
+                    <td>Bar Width:&nbsp;&nbsp;<input type='range' min={1} max={30} step={1} value={waveSurferBarWidth} onChange={(e) => {setWaveSurferBarWidth(e.target.value)}}></input></td>
+                    <td>Bar Gap:&nbsp;&nbsp;<input type='range' min={1} max={30} step={1} value={waveSurferBarGap} onChange={(e) => {setWaveSurferBarGap(e.target.value)}}></input></td>
+                    <td>Bar Radius:&nbsp;&nbsp;<input type='range' min={1} max={30} step={1} value={waveSurferBarRadius} onChange={(e) => {setWaveSurferBarRadius(e.target.value)}}></input></td>
+                    <td>Bar Height:&nbsp;&nbsp;<input type='range' min={0.1} max={4} step={0.1} value={waveSurferBarHeight} onChange={(e) => {setWaveSurferBarHeight(e.target.value)}}></input></td>
+                  </tr>
+                  </>
+                  :
+                  <>
+                  <tr>
+                    <td>Wave:&nbsp;&nbsp;<input type='checkbox' checked={wave} onChange={() => {setWave(!wave)}}></input>&nbsp;&nbsp;<input type='color' style={{width: "25px", padding: "0px"}} value={waveColor} onChange={(e) => {setWaveColor(e.target.value)}}></input></td>
+                    <td>Background:&nbsp;&nbsp;<input type='color' style={{width: "25px", padding: "0px"}} value={backgroundColor} onChange={(e) => {setBackgroundColor(e.target.value)}}></input></td>
+                    <td colSpan={2}>Padding:&nbsp;&nbsp;<input type='color' style={{width: "25px", padding: "0px"}} value={paddingColor} onChange={(e) => {setPaddingColor(e.target.value)}}></input></td>
+                    <td>Cursor:&nbsp;&nbsp;<input type='checkbox' checked={cursor} onChange={() => {setCursor(!cursor)}}></input>&nbsp;&nbsp;<input type='color' style={{width: "25px", padding: "0px"}} value={cursorColor} onChange={(e) => {setCursorColor(e.target.value)}}></input></td>
+                    <td>Progress:&nbsp;&nbsp;<input type='checkbox' checked={progress} onChange={() => {setProgress(!progress)}}></input>&nbsp;&nbsp;<input type='color' style={{width: "25px", padding: "0px"}} value={progressColor} onChange={(e) => {setProgressColor(e.target.value)}}></input></td>
+                  </tr>
+                  <tr>
+                    <td>Grid:&nbsp;&nbsp;<input type='checkbox' checked={grid} onChange={() => {setGrid(!grid)}}></input>&nbsp;&nbsp;<input type='color' style={{width: "25px", padding: "0px"}} value={gridColor} onChange={(e) => {setGridColor(e.target.value)}}></input></td>
+                    <td>Ruler:&nbsp;&nbsp;<input type='checkbox' checked={ruler} onChange={() => {setRuler(!ruler)}}></input>&nbsp;&nbsp;<input type='color' style={{width: "25px", padding: "0px"}} value={rulerColor} onChange={(e) => {setRulerColor(e.target.value)}}></input></td>
+                    <td colSpan={2}>Scrollbar:&nbsp;&nbsp;<input type='checkbox' checked={scrollbar} onChange={() => {setScrollbar(!scrollbar)}}></input>&nbsp;&nbsp;<input type='color' style={{width: "25px", padding: "0px"}} value={scrollbarColor} onChange={(e) => {setScrollbarColor(e.target.value)}}></input></td>
+                    <td>Ruler At Top:&nbsp;&nbsp;<input type='checkbox' checked={rulerAtTop} onChange={() => {setRulerAtTop(!rulerAtTop)}}></input></td>
+                    <td>Scrollable:&nbsp;&nbsp;<input type='checkbox' checked={scrollable} onChange={() => {setScrollable(!scrollable)}}></input></td>
+                    <td>Wav worker:&nbsp;&nbsp;<input type='checkbox' checked={wavWorker} onChange={() => {setWavWorker(!wavWorker)}}></input></td>
+
+                  </tr>
+                  <tr>
+                    <td colSpan={2}>Padding:&nbsp;&nbsp;<input type='range' min={0} max={20} step={1} value={padding} onChange={(e) => {setPadding(e.target.value)}}></input>&nbsp;{padding}</td>
+                    <td colSpan={2}>Pixel Ratio:&nbsp;&nbsp;<input type='range' min={1} max={2} step={1} value={pixelRatio} onChange={(e) => {setPixelRatio(e.target.value)}}></input>&nbsp;{pixelRatio}</td>
+                  </tr>
+                  <tr>
+                    <td colSpan={3}>Wave Scale:&nbsp;&nbsp;<input type='range' min={0.1} max={2} step={0.1} value={waveScale} onChange={(e) => {setWaveScale(e.target.value)}}></input>&nbsp;{waveScale}</td>
+                    <td colSpan={3}>Wave Size:&nbsp;&nbsp;<input type='range' min={1} max={10} step={1} value={waveSize} onChange={(e) => {setWaveSize(e.target.value)}}></input>&nbsp;{waveSize}</td>
+                  </tr>
+                  </>
+                  }
+                </table>
             </div>
           </Box>
         </Grid>
@@ -620,6 +686,8 @@ const AllAudioTranscriptionLandingPage = () => {
             handleStdTranscriptionSettings={setStdTranscriptionSettings}
             advancedWaveformSettings={advancedWaveformSettings}
             setAdvancedWaveformSettings={setAdvancedWaveformSettings}
+            waveSurfer={waveSurfer}
+            setWaveSurfer={setWaveSurfer}
             annotationId={annotations[0]?.id}
           />
         </Grid>
@@ -630,7 +698,7 @@ const AllAudioTranscriptionLandingPage = () => {
         position="fixed"
         bottom={1}
       >
-        <Timeline currentTime={currentTime} playing={playing} taskID={taskData?.id} waveformSettings={waveformSettings} />
+        {waveSurfer ? <Timeline2 details={taskDetails} waveformSettings={waveSurferWaveformSettings}/> : <Timeline currentTime={currentTime} playing={playing} taskID={taskData?.id} waveformSettings={waveformSettings} />}
       </Grid>
     </>
   );