selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-22 13:19:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

www: use a service worker to download the mp3 and add authorization header

Browse Source
This commit is contained in:
Mathieu Virbel
2023-11-10 18:24:26 +01:00
committed by Mathieu Virbel
parent c255b41475
commit 1c11b328b3
4 changed files with 70 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
www/app/[domain]/transcripts/recorder.tsx
View File

@@ -29,7 +29,8 @@ type RecorderProps = {
waveform?: AudioWaveform | null;
isPastMeeting: boolean;
transcriptId?: string | null;
mp3Blob?: Blob | null;
media?: HTMLMediaElement | null;
mediaDuration?: number | null;
};
export default function Recorder(props: RecorderProps) {
@@ -103,6 +104,11 @@ export default function Recorder(props: RecorderProps) {
// Waveform setup
useEffect(() => {
if (waveformRef.current) {
// XXX duration is required to prevent recomputing peaks from audio
// However, the current waveform returns only the peaks, and no duration
// And the backend does not save duration properly.
// So at the moment, we deduct the duration from the topics.
// This is not ideal, but it works for now.
const _wavesurfer = WaveSurfer.create({
container: waveformRef.current,
peaks: props.waveform?.data,
@@ -110,6 +116,7 @@ export default function Recorder(props: RecorderProps) {
autoCenter: true,
barWidth: 2,
height: "auto",
duration: props.mediaDuration || 1,
...waveSurferStyles.player,
});
@@ -139,8 +146,8 @@ export default function Recorder(props: RecorderProps) {
if (props.isPastMeeting) _wavesurfer.toggleInteraction(true);
if (props.mp3Blob) {
_wavesurfer.loadBlob(props.mp3Blob);
if (props.media) {
_wavesurfer.setMediaElement(props.media);
}
setWavesurfer(_wavesurfer);
@@ -156,9 +163,9 @@ export default function Recorder(props: RecorderProps) {
useEffect(() => {
if (!wavesurfer) return;
if (!props.mp3Blob) return;
wavesurfer.loadBlob(props.mp3Blob);
}, [props.mp3Blob, wavesurfer]);
if (!props.media) return;
wavesurfer.setMediaElement(props.media);
}, [props.media, wavesurfer]);
useEffect(() => {
topicsRef.current = props.topics;
@@ -282,8 +289,6 @@ export default function Recorder(props: RecorderProps) {
if (!record) return;
if (destinationStream !== null) return console.log("already recording");
console.log("startTabRecording");
// connect mic audio (microphone)
const micStream = await getCurrentStream();
if (!micStream) {