@uppy/audio/lib/RecordingScreen.js

Uppy plugin that records audio using the device’s microphone.

import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
import { useEffect, useRef } from 'preact/hooks';
import AudioSourceSelect, {} from './AudioSourceSelect.js';
import AudioOscilloscope from './audio-oscilloscope/index.js';
import DiscardButton from './DiscardButton.js';
import RecordButton from './RecordButton.js';
import RecordingLength from './RecordingLength.js';
import SubmitButton from './SubmitButton.js';
export default function RecordingScreen(props) {
    const { stream, recordedAudio, onStop, recording, supportsRecording, audioSources, showAudioSourceDropdown, onSubmit, i18n, onStartRecording, onStopRecording, onDiscardRecordedAudio, recordingLengthSeconds, } = props;
    const canvasEl = useRef(null);
    const oscilloscope = useRef();
    // componentDidMount / componentDidUnmount
    useEffect(() => {
        return () => {
            oscilloscope.current = null;
            onStop();
        };
    }, [onStop]);
    // componentDidUpdate
    useEffect(() => {
        if (!recordedAudio) {
            oscilloscope.current = new AudioOscilloscope(canvasEl.current, {
                canvas: {
                    width: 600,
                    height: 600,
                },
                canvasContext: {
                    lineWidth: 2,
                    fillStyle: 'rgb(0,0,0)',
                    strokeStyle: 'green',
                },
            });
            oscilloscope.current.draw();
            if (stream) {
                const audioContext = new AudioContext();
                const source = audioContext.createMediaStreamSource(stream);
                oscilloscope.current.addSource(source);
            }
        }
    }, [recordedAudio, stream]);
    const hasRecordedAudio = recordedAudio != null;
    const shouldShowRecordButton = !hasRecordedAudio && supportsRecording;
    const shouldShowAudioSourceDropdown = showAudioSourceDropdown &&
        !hasRecordedAudio &&
        audioSources &&
        audioSources.length > 1;
    return (_jsxs("div", { className: "uppy-Audio-container", children: [_jsx("div", { className: "uppy-Audio-audioContainer", children: hasRecordedAudio ? (
                // biome-ignore lint/a11y/useMediaCaption: ...
                _jsx("audio", { className: "uppy-Audio-player", controls: true, src: recordedAudio })) : (_jsx("canvas", { ref: canvasEl, className: "uppy-Audio-canvas" })) }), _jsxs("div", { className: "uppy-Audio-footer", children: [_jsx("div", { className: "uppy-Audio-audioSourceContainer", children: shouldShowAudioSourceDropdown ? AudioSourceSelect(props) : null }), _jsxs("div", { className: "uppy-Audio-buttonContainer", children: [shouldShowRecordButton && (_jsx(RecordButton, { recording: recording, onStartRecording: onStartRecording, onStopRecording: onStopRecording, i18n: i18n })), hasRecordedAudio && _jsx(SubmitButton, { onSubmit: onSubmit, i18n: i18n }), hasRecordedAudio && (_jsx(DiscardButton, { onDiscard: onDiscardRecordedAudio, i18n: i18n }))] }), _jsx("div", { className: "uppy-Audio-recordingLength", children: !hasRecordedAudio && (_jsx(RecordingLength, { recordingLengthSeconds: recordingLengthSeconds })) })] })] }));
}