Merge pull request #925 from AI4Bharat/waveSurfer

make wavesurfer cursor line more prominent
AI4Bharat · Feb 22, 2024 · 073cfaf · 073cfaf
2 parents dc2c995 + 54ec8bf
commit 073cfaf
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 4 deletions.
diff --git a/src/ui/pages/container/CL-Transcription/AllAudioTranscriptionLandingPage.jsx b/src/ui/pages/container/CL-Transcription/AllAudioTranscriptionLandingPage.jsx
@@ -338,7 +338,7 @@ const AllAudioTranscriptionLandingPage = () => {
   const [waveSurferMinPxPerSec, setWaveSurferMinPxPerSec] = useState(100);
   const [waveSurferWaveColor, setWaveSurferWaveColor] = useState('#ff4e00');
   const [waveSurferProgressColor, setWaveSurferProgressColor] = useState("#dd5e98");
-  const [waveSurferCursorColor, setWaveSurferCursorColor] = useState("#ddd5e9");
+  const [waveSurferCursorColor, setWaveSurferCursorColor] = useState("#935ae8");
   const [waveSurferCursorWidth, setWaveSurferCursorWidth] = useState(1);
   const [waveSurferBarWidth, setWaveSurferBarWidth] = useState(2);
   const [waveSurferBarGap, setWaveSurferBarGap] = useState(0);

diff --git a/src/ui/pages/container/CL-Transcription/AudioTranscriptionLandingPage.jsx b/src/ui/pages/container/CL-Transcription/AudioTranscriptionLandingPage.jsx
@@ -796,7 +796,7 @@ 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 [waveSurferCursorColor, setWaveSurferCursorColor] = useState("#935ae8");
 const [waveSurferCursorWidth, setWaveSurferCursorWidth] = useState(1);
 const [waveSurferBarWidth, setWaveSurferBarWidth] = useState(2);
 const [waveSurferBarGap, setWaveSurferBarGap] = useState(0);

diff --git a/src/ui/pages/container/CL-Transcription/ReviewAudioTranscriptionLandingPage.jsx b/src/ui/pages/container/CL-Transcription/ReviewAudioTranscriptionLandingPage.jsx
@@ -993,7 +993,7 @@ 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 [waveSurferCursorColor, setWaveSurferCursorColor] = useState("#935ae8");
 const [waveSurferCursorWidth, setWaveSurferCursorWidth] = useState(1);
 const [waveSurferBarWidth, setWaveSurferBarWidth] = useState(2);
 const [waveSurferBarGap, setWaveSurferBarGap] = useState(0);

diff --git a/src/ui/pages/container/CL-Transcription/SuperCheckerAudioTranscriptionLandingPage.jsx b/src/ui/pages/container/CL-Transcription/SuperCheckerAudioTranscriptionLandingPage.jsx
@@ -841,7 +841,7 @@ 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 [waveSurferCursorColor, setWaveSurferCursorColor] = useState("#935ae8");
 const [waveSurferCursorWidth, setWaveSurferCursorWidth] = useState(1);
 const [waveSurferBarWidth, setWaveSurferBarWidth] = useState(2);
 const [waveSurferBarGap, setWaveSurferBarGap] = useState(0);

diff --git a/src/ui/pages/container/CL-Transcription/wavesurfer.jsx b/src/ui/pages/container/CL-Transcription/wavesurfer.jsx
@@ -87,6 +87,9 @@ const Timeline2 = ({ details, waveformSettings }) => {
         mediaControls: true,
         url: details?.data?.audio_url,
         hideScrollbar: true,
+        autoCenter: true,
+        autoScroll: true,
+        cursorWidth: 2,
         media: document.querySelector('audio'),
         plugins: [
           // Minimap.create({
@@ -140,6 +143,9 @@ const Timeline2 = ({ details, waveformSettings }) => {
         mediaControls: true,
         url: details?.data?.audio_url,
         hideScrollbar: true,
+        autoCenter: true,
+        autoScroll: true,
+        cursorWidth: 2,
         media: document.querySelector('audio'),
         plugins: [
           // Minimap.create({