Skip to content

Commit

Permalink
Merge pull request #916 from AI4Bharat/waveSurfer
Browse files Browse the repository at this point in the history
  • Loading branch information
@ishvindersethi22
ishvindersethi22 authored Feb 13, 2024
2 parents 034df6a + e39ef1c commit fa175ed
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 39 deletions.
2 changes: 1 addition & 1 deletion src/ui/pages/container/CL-Transcription/AllAudioTranscriptionLandingPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -333,7 +333,7 @@ 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 [waveSurfer, setWaveSurfer] = useState(true);
const [waveSurferHeight, setWaveSurferHeigth] = useState(128);
const [waveSurferMinPxPerSec, setWaveSurferMinPxPerSec] = useState(100);
const [waveSurferWaveColor, setWaveSurferWaveColor] = useState('#ff4e00');
Expand Down
2 changes: 1 addition & 1 deletion src/ui/pages/container/CL-Transcription/AudioTranscriptionLandingPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -791,7 +791,7 @@ useEffect(() => {
})
}, [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 [waveSurfer, setWaveSurfer] = useState(true);
const [waveSurferHeight, setWaveSurferHeigth] = useState(128);
const [waveSurferMinPxPerSec, setWaveSurferMinPxPerSec] = useState(100);
const [waveSurferWaveColor, setWaveSurferWaveColor] = useState('#ff4e00');
Expand Down
2 changes: 1 addition & 1 deletion src/ui/pages/container/CL-Transcription/ReviewAudioTranscriptionLandingPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -988,7 +988,7 @@ useEffect(() => {
})
}, [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 [waveSurfer, setWaveSurfer] = useState(true);
const [waveSurferHeight, setWaveSurferHeigth] = useState(128);
const [waveSurferMinPxPerSec, setWaveSurferMinPxPerSec] = useState(100);
const [waveSurferWaveColor, setWaveSurferWaveColor] = useState('#ff4e00');
Expand Down
2 changes: 1 addition & 1 deletion src/ui/pages/container/CL-Transcription/SuperCheckerAudioTranscriptionLandingPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -836,7 +836,7 @@ useEffect(() => {
})
}, [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 [waveSurfer, setWaveSurfer] = useState(true);
const [waveSurferHeight, setWaveSurferHeigth] = useState(128);
const [waveSurferMinPxPerSec, setWaveSurferMinPxPerSec] = useState(100);
const [waveSurferWaveColor, setWaveSurferWaveColor] = useState('#ff4e00');
Expand Down
138 changes: 103 additions & 35 deletions src/ui/pages/container/CL-Transcription/wavesurfer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ import DT from "duration-time-conversion";

const Timeline2 = ({ details, waveformSettings }) => {
const waveSurf = useRef(null);
const miniMap = useRef(null);
const regions = useRef(null);
const miniMapRegions = useRef(null);
const result = useSelector((state) => state.commonReducer?.subtitles);
const player = useSelector((state) => state.commonReducer?.player);
const [currentSubs, setCurrentSubs] = useState([]);
Expand Down Expand Up @@ -42,19 +44,38 @@ const Timeline2 = ({ details, waveformSettings }) => {
hideScrollbar: true,
media: document.querySelector('audio'),
plugins: [
Minimap.create({
height: 20,
waveColor: '#ddd',
progressColor: '#999',
insertPosition: 'beforeBegin',
}),
// Minimap.create({
// height: 20,
// waveColor: '#ddd',
// progressColor: '#999',
// insertPosition: 'beforeBegin',
// }),
TimelinePlugin.create({
insertPosition: 'beforebegin',
timeInterval: 0.2,
primaryLabelInterval: 5,
secondaryLabelInterval: 1,
style: {
fontSize: '10px',
color: '#2D5B88',
},
}),
],
});
regions.current = waveSurf.current.registerPlugin(RegionsPlugin.create());
}
}, [details])
if (details?.data?.audio_url !== undefined && miniMap.current === null) {
miniMap.current = WaveSurfer.create({
container: document.querySelector('#minimap'),
height: '20',
url: details?.data?.audio_url,
hideScrollbar: true,
mediaControls: true,
media: document.querySelector('audio'),
});
miniMapRegions.current = miniMap.current.registerPlugin(RegionsPlugin.create());
}
}, [details]);

useEffect(() => {
if (details?.data?.audio_url !== undefined && waveSurf.current !== null) {
Expand All @@ -76,37 +97,73 @@ const Timeline2 = ({ details, waveformSettings }) => {
hideScrollbar: true,
media: document.querySelector('audio'),
plugins: [
Minimap.create({
height: 20,
waveColor: '#ddd',
progressColor: '#999',
insertPosition: 'beforeBegin',
}),
// Minimap.create({
// height: 20,
// waveColor: '#ddd',
// progressColor: '#999',
// insertPosition: 'beforeBegin',
// }),
TimelinePlugin.create({
insertPosition: 'beforebegin',
timeInterval: 0.2,
primaryLabelInterval: 5,
secondaryLabelInterval: 1,
style: {
fontSize: '10px',
color: '#2D5B88',
},
}),
],
});
regions.current = waveSurf.current.registerPlugin(RegionsPlugin.create());
if (currentSubs){
waveSurf.current.on('decode', () => {
currentSubs?.map((sub, key) => {
regions.current.addRegion({
start: sub.startTime,
end: sub.endTime,
content: sub.text,
drag: false,
resize: true,
})
currentSubs?.map((sub) => {
regions.current.addRegion({
id: sub.id,
start: sub.startTime,
end: sub.endTime,
content: sub.text,
drag: false,
resize: true,
contentEditable: true,
color: sub.speaker_id === "Speaker 1"
? "rgb(0, 87, 158, 0.2)"
: sub.speaker_id === "Speaker 0"
? "rgb(123, 29, 0, 0.2)"
: "rgb(0, 0, 0, 0.6)",
})
})
})
}
if (details?.data?.audio_url !== undefined && miniMap.current === null) {
miniMap.current.destroy();
miniMap.current = WaveSurfer.create({
container: document.querySelector('#minimap'),
height: '20',
url: details?.data?.audio_url,
mediaControls: true,
media: document.querySelector('audio'),
hideScrollbar: true,
});
miniMapRegions.current = miniMap.current.registerPlugin(RegionsPlugin.create());
miniMap.current.on('decode', () => {
currentSubs?.map((sub) => {
miniMapRegions.current.addRegion({
start: sub.startTime,
end: sub.endTime,
color: sub.text === ""
? "rgb(255, 0, 0, 0.5)"
: "rgb(0, 255, 0, 0.5)",
})
})
})
}
}, [waveformSettings])

useEffect(() => {
if (details?.data !== undefined && waveSurf.current !== null) {
regions.current.clearRegions();
currentSubs?.map((sub, key) => {
if (details?.data !== undefined && waveSurf.current !== null && miniMap.current !== null && regions.current !== null && miniMapRegions.current !== null) {
regions.current.clearRegions();
currentSubs?.map((sub) => {
regions.current.addRegion({
id: sub.id,
start: sub.startTime,
Expand All @@ -116,10 +173,20 @@ const Timeline2 = ({ details, waveformSettings }) => {
resize: true,
contentEditable: true,
color: sub.speaker_id === "Speaker 1"
? "rgb(0, 87, 158, 0.2)"
: sub.speaker_id === "Speaker 0"
? "rgb(123, 29, 0, 0.2)"
: "rgb(0, 0, 0, 0.6)",
? "rgb(0, 87, 158, 0.2)"
: sub.speaker_id === "Speaker 0"
? "rgb(123, 29, 0, 0.2)"
: "rgb(0, 0, 0, 0.6)",
})
})
miniMapRegions.current.clearRegions();
currentSubs?.map((sub) => {
miniMapRegions.current.addRegion({
start: sub.startTime,
end: sub.endTime,
color: sub.text === ""
? "rgb(255, 0, 0, 0.5)"
: "rgb(0, 255, 0, 0.5)",
})
})
}
Expand Down Expand Up @@ -150,18 +217,19 @@ const Timeline2 = ({ details, waveformSettings }) => {
if (waveSurf !== null && regions.current !== null) {
regions.current.on('region-updated', (region) => {
let currentSubsCopy = currentSubs;
currentSubsCopy[region.id -1].text = region?.content?.innerHTML;
currentSubsCopy[region.id -1].start_time = DT.d2t(region.start);
currentSubsCopy[region.id -1].end_time = DT.d2t(region.end);
currentSubsCopy[region.id - 1].text = region?.content?.innerHTML;
currentSubsCopy[region.id - 1].start_time = DT.d2t(region.start);
currentSubsCopy[region.id - 1].end_time = DT.d2t(region.end);
updateSub(currentSubsCopy);
player.play();
})
}

return (
<>
<div style={{ paddingLeft: "20px", paddingRight: "20px" }} id="waveform"></div>
</>
<>
<div style={{paddingLeft: "20px", paddingRight:"20px"}} id="minimap"></div>
<div style={{ paddingLeft: "20px", paddingRight: "20px" }} id="waveform"></div>
</>
);
};

Expand Down

0 comments on commit fa175ed

Please sign in to comment.