From 8867e533630ff0ae3249afe25778d2c6d398af00 Mon Sep 17 00:00:00 2001 From: Ishvinder Sethi Date: Thu, 4 Jul 2024 10:57:57 +0530 Subject: [PATCH] Revert "Revert "use shoonya-backend for audio data"" --- .../AllAudioTranscriptionLandingPage.jsx | 40 +++++++++++++++---- .../container/CL-Transcription/AudioPanel.jsx | 5 ++- .../AudioTranscriptionLandingPage.jsx | 32 +++++++++++++-- .../ReviewAudioTranscriptionLandingPage.jsx | 35 +++++++++++++--- ...erCheckerAudioTranscriptionLandingPage.jsx | 34 ++++++++++++++-- .../container/CL-Transcription/wavesurfer.jsx | 3 -- 6 files changed, 124 insertions(+), 25 deletions(-) diff --git a/src/ui/pages/container/CL-Transcription/AllAudioTranscriptionLandingPage.jsx b/src/ui/pages/container/CL-Transcription/AllAudioTranscriptionLandingPage.jsx index fed12b78e..afc7dadf6 100644 --- a/src/ui/pages/container/CL-Transcription/AllAudioTranscriptionLandingPage.jsx +++ b/src/ui/pages/container/CL-Transcription/AllAudioTranscriptionLandingPage.jsx @@ -41,6 +41,7 @@ import ArrowRightIcon from "@mui/icons-material/ArrowRight"; import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import getTaskAssignedUsers from '../../../../utils/getTaskAssignedUsers'; import LightTooltip from "../../component/common/Tooltip"; +import configs from '../../../../config/config'; const AllAudioTranscriptionLandingPage = () => { const classes = AudioTranscriptionLandingStyle(); @@ -84,6 +85,7 @@ const AllAudioTranscriptionLandingPage = () => { const [advancedWaveformSettings, setAdvancedWaveformSettings] = useState(false); const [assignedUsers, setAssignedUsers] = useState(null); const [waveSurfer, setWaveSurfer] = useState(true); + const [audioURL, setAudioURL] = useState(""); const handleCollapseClick = () => { !showNotes && setShowStdTranscript(false); @@ -113,11 +115,32 @@ const AllAudioTranscriptionLandingPage = () => { }); } else { setTaskData(resp); - if (resp?.data?.audio_duration < 700){ + if (resp?.data?.audio_duration < 1000){ setWaveSurfer(false); }else{ setWaveSurfer(true); } + const fetchAudioData = await fetch(String(resp?.data?.audio_url).replace("https://asr-transcription.objectstore.e2enetworks.net/", `${configs.BASE_URL_AUTO}/task/get_audio_file/?audio_url=`), { + method: "GET", + headers: ProjectObj.getHeaders().headers + }) + if (!fetchAudioData.ok){ + setAudioURL(resp?.data?.audio_url) + }else{ + try { + var base64data = await fetchAudioData.json(); + var binaryData = atob(base64data); + var buffer = new ArrayBuffer(binaryData.length); + var view = new Uint8Array(buffer); + for (var i = 0; i < binaryData.length; i++) { + view[i] = binaryData.charCodeAt(i); + } + var blob = new Blob([view], { type: 'audio/mpeg' }); + setAudioURL(URL.createObjectURL(blob)); + } catch { + setAudioURL(resp?.data?.audio_url) + } + } } setLoading(false); }; @@ -472,11 +495,14 @@ const AllAudioTranscriptionLandingPage = () => { - + {audioURL && + + } @@ -704,7 +730,7 @@ const AllAudioTranscriptionLandingPage = () => { position="fixed" bottom={1} > - {waveSurfer ? : } + {audioURL && (waveSurfer ? : )} ); diff --git a/src/ui/pages/container/CL-Transcription/AudioPanel.jsx b/src/ui/pages/container/CL-Transcription/AudioPanel.jsx index 99f60dc3a..e61dc8c63 100644 --- a/src/ui/pages/container/CL-Transcription/AudioPanel.jsx +++ b/src/ui/pages/container/CL-Transcription/AudioPanel.jsx @@ -15,7 +15,8 @@ import APITransport from "../../../../redux/actions/apitransport/apitransport"; const AudioPanel = memo( ({ setCurrentTime, setPlaying, - taskData + taskData, + audioUrl }) => { const classes = AudioTranscriptionLandingStyle(); const dispatch = useDispatch(); @@ -67,7 +68,7 @@ const AudioPanel = memo( ({ id ="audio-panel" controls controlsList="nodownload" - src={TaskDetails?.data?.audio_url} + src={audioUrl} preload="metadata" type="audio" // style={{ diff --git a/src/ui/pages/container/CL-Transcription/AudioTranscriptionLandingPage.jsx b/src/ui/pages/container/CL-Transcription/AudioTranscriptionLandingPage.jsx index cbbca2b5f..7650b6c5d 100644 --- a/src/ui/pages/container/CL-Transcription/AudioTranscriptionLandingPage.jsx +++ b/src/ui/pages/container/CL-Transcription/AudioTranscriptionLandingPage.jsx @@ -48,6 +48,7 @@ import ArrowRightIcon from "@mui/icons-material/ArrowRight"; import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import getTaskAssignedUsers from '../../../../utils/getTaskAssignedUsers'; import LightTooltip from "../../component/common/Tooltip"; +import configs from '../../../../config/config'; const AudioTranscriptionLandingPage = () => { const classes = AudioTranscriptionLandingStyle(); @@ -112,6 +113,7 @@ const AudioTranscriptionLandingPage = () => { const [autoSave, setAutoSave] = useState(true); const [waveSurfer, setWaveSurfer] = useState(true); const [autoSaveTrigger, setAutoSaveTrigger] = useState(false); + const [audioURL, setAudioURL] = useState(""); // useEffect(() => { // let intervalId; @@ -288,11 +290,32 @@ const AudioTranscriptionLandingPage = () => { }); } else { setTaskData(resp); - if (resp?.data?.audio_duration < 700){ + if (resp?.data?.audio_duration < 1000){ setWaveSurfer(false); }else{ setWaveSurfer(true); } + const fetchAudioData = await fetch(String(resp?.data?.audio_url).replace("https://asr-transcription.objectstore.e2enetworks.net/", `${configs.BASE_URL_AUTO}/task/get_audio_file/?audio_url=`), { + method: "GET", + headers: ProjectObj.getHeaders().headers + }) + if (!fetchAudioData.ok){ + setAudioURL(resp?.data?.audio_url) + }else{ + try { + var base64data = await fetchAudioData.json(); + var binaryData = atob(base64data); + var buffer = new ArrayBuffer(binaryData.length); + var view = new Uint8Array(buffer); + for (var i = 0; i < binaryData.length; i++) { + view[i] = binaryData.charCodeAt(i); + } + var blob = new Blob([view], { type: 'audio/mpeg' }); + setAudioURL(URL.createObjectURL(blob)); + } catch { + setAudioURL(resp?.data?.audio_url) + } + } } setLoading(false); }; @@ -926,14 +949,15 @@ useEffect(() => { filterMessage={filterMessage} taskData={taskData} /> - + audioUrl={audioURL} + />} @@ -1209,7 +1233,7 @@ useEffect(() => { bottom={1} // style={fullscreen ? { visibility: "hidden" } : {}} > - {waveSurfer ? : } + {audioURL && (waveSurfer ? : )} ); diff --git a/src/ui/pages/container/CL-Transcription/ReviewAudioTranscriptionLandingPage.jsx b/src/ui/pages/container/CL-Transcription/ReviewAudioTranscriptionLandingPage.jsx index 7b7dc3c8c..52b2ef09e 100644 --- a/src/ui/pages/container/CL-Transcription/ReviewAudioTranscriptionLandingPage.jsx +++ b/src/ui/pages/container/CL-Transcription/ReviewAudioTranscriptionLandingPage.jsx @@ -49,6 +49,7 @@ import ArrowRightIcon from "@mui/icons-material/ArrowRight"; import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import getTaskAssignedUsers from '../../../../utils/getTaskAssignedUsers'; import LightTooltip from "../../component/common/Tooltip" +import configs from '../../../../config/config'; const ReviewAudioTranscriptionLandingPage = () => { const classes = AudioTranscriptionLandingStyle(); @@ -116,6 +117,7 @@ const ReviewAudioTranscriptionLandingPage = () => { const [autoSave, setAutoSave] = useState(true); const [waveSurfer, setWaveSurfer] = useState(true); const [autoSaveTrigger, setAutoSaveTrigger] = useState(false); + const [audioURL, setAudioURL] = useState(""); // useEffect(() => { // let intervalId; @@ -304,11 +306,33 @@ const ReviewAudioTranscriptionLandingPage = () => { variant: "error", }); }else{setTaskDetailList(resp); - if (resp?.data?.audio_duration < 700){ + if (resp?.data?.audio_duration < 1000){ setWaveSurfer(false); }else{ setWaveSurfer(true); - }} + } + const fetchAudioData = await fetch(String(resp?.data?.audio_url).replace("https://asr-transcription.objectstore.e2enetworks.net/", `${configs.BASE_URL_AUTO}/task/get_audio_file/?audio_url=`), { + method: "GET", + headers: ProjectObj.getHeaders().headers + }) + if (!fetchAudioData.ok){ + setAudioURL(resp?.data?.audio_url) + }else{ + try { + var base64data = await fetchAudioData.json(); + var binaryData = atob(base64data); + var buffer = new ArrayBuffer(binaryData.length); + var view = new Uint8Array(buffer); + for (var i = 0; i < binaryData.length; i++) { + view[i] = binaryData.charCodeAt(i); + } + var blob = new Blob([view], { type: 'audio/mpeg' }); + setAudioURL(URL.createObjectURL(blob)); + } catch { + setAudioURL(resp?.data?.audio_url) + } + } + } setLoading(false); }; @@ -1124,13 +1148,14 @@ useEffect(() => { disableButton={disableButton} anchorEl={anchorEl} setAnchorEl={setAnchorEl} /> - + audioUrl={audioURL} + />} @@ -1431,7 +1456,7 @@ useEffect(() => { bottom={1} // style={fullscreen ? { visibility: "hidden" } : {}} > - {waveSurfer ? : } + {audioURL && (waveSurfer ? : )} ); diff --git a/src/ui/pages/container/CL-Transcription/SuperCheckerAudioTranscriptionLandingPage.jsx b/src/ui/pages/container/CL-Transcription/SuperCheckerAudioTranscriptionLandingPage.jsx index 1c379dbe8..40f16a257 100644 --- a/src/ui/pages/container/CL-Transcription/SuperCheckerAudioTranscriptionLandingPage.jsx +++ b/src/ui/pages/container/CL-Transcription/SuperCheckerAudioTranscriptionLandingPage.jsx @@ -49,6 +49,7 @@ import ArrowRightIcon from "@mui/icons-material/ArrowRight"; import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import getTaskAssignedUsers from '../../../../utils/getTaskAssignedUsers'; import LightTooltip from "../../component/common/Tooltip"; +import configs from '../../../../config/config'; const SuperCheckerAudioTranscriptionLandingPage = () => { const classes = AudioTranscriptionLandingStyle(); @@ -114,6 +115,7 @@ const SuperCheckerAudioTranscriptionLandingPage = () => { const [autoSave, setAutoSave] = useState(true); const [waveSurfer, setWaveSurfer] = useState(false); const [autoSaveTrigger, setAutoSaveTrigger] = useState(false); + const [audioURL, setAudioURL] = useState(""); // useEffect(() => { // let intervalId; @@ -225,11 +227,33 @@ const SuperCheckerAudioTranscriptionLandingPage = () => { variant: "error", }); }else{setTaskDetailList(resp); - if (resp?.data?.audio_duration < 700){ + if (resp?.data?.audio_duration < 1000){ setWaveSurfer(false); }else{ setWaveSurfer(true); - }} + } + const fetchAudioData = await fetch(String(resp?.data?.audio_url).replace("https://asr-transcription.objectstore.e2enetworks.net/", `${configs.BASE_URL_AUTO}/task/get_audio_file/?audio_url=`), { + method: "GET", + headers: ProjectObj.getHeaders().headers + }) + if (!fetchAudioData.ok){ + setAudioURL(resp?.data?.audio_url) + }else{ + try { + var base64data = await fetchAudioData.json(); + var binaryData = atob(base64data); + var buffer = new ArrayBuffer(binaryData.length); + var view = new Uint8Array(buffer); + for (var i = 0; i < binaryData.length; i++) { + view[i] = binaryData.charCodeAt(i); + } + var blob = new Blob([view], { type: 'audio/mpeg' }); + setAudioURL(URL.createObjectURL(blob)); + } catch { + setAudioURL(resp?.data?.audio_url) + } + } + } setLoading(false); }; @@ -969,6 +993,7 @@ useEffect(() => { anchorEl={anchorEl} setAnchorEl={setAnchorEl} /> + {audioURL && { onNextAnnotation={onNextAnnotation} AnnotationsTaskDetails={AnnotationsTaskDetails} taskData={taskDetailList} - /> + audioUrl={audioURL} + />} @@ -1248,7 +1274,7 @@ useEffect(() => { bottom={1} // style={fullscreen ? { visibility: "hidden" } : {}} > - {waveSurfer ? : } + {audioURL && (waveSurfer ? : )} ); diff --git a/src/ui/pages/container/CL-Transcription/wavesurfer.jsx b/src/ui/pages/container/CL-Transcription/wavesurfer.jsx index 2b4979dbc..03dd5b221 100644 --- a/src/ui/pages/container/CL-Transcription/wavesurfer.jsx +++ b/src/ui/pages/container/CL-Transcription/wavesurfer.jsx @@ -84,7 +84,6 @@ const Timeline2 = ({ key, details, waveformSettings }) => { barRadius: waveformSettings.barRadius, barHeight: waveformSettings.barHeight, mediaControls: true, - url: details?.data?.audio_url, hideScrollbar: true, autoCenter: true, autoScroll: true, @@ -115,7 +114,6 @@ const Timeline2 = ({ key, details, waveformSettings }) => { miniMap.current = WaveSurfer.create({ container: document.querySelector('#minimap'), height: '20', - url: details?.data?.audio_url, hideScrollbar: true, mediaControls: true, media: document.querySelector('audio'), @@ -190,7 +188,6 @@ const Timeline2 = ({ key, details, waveformSettings }) => { miniMap.current = WaveSurfer.create({ container: document.querySelector('#minimap'), height: '20', - url: details?.data?.audio_url, mediaControls: true, media: document.querySelector('audio'), hideScrollbar: true,