reflector/app/components/record.js

export default function Record(props) {
    let mediaRecorder = null; // mediaRecorder instance

    const startRecording = () => {
        navigator.mediaDevices.getUserMedia({ audio: true })
            .then(stream => {
                mediaRecorder = new MediaRecorder(stream);
                mediaRecorder.start();
                props.onRecord(true);
            });
    };

    const stopRecording = () => {
        if (mediaRecorder) {
            mediaRecorder.stop();
            props.onRecord(false);
        }
    };

    return (
        <div className="flex flex-col justify-center h-screen">
            <div className="text-center py-6 mt-10">
                <h1 className="text-5xl font-bold text-blue-500">Reflector</h1>
                <p className="text-gray-500">Capture The Signal, Not The Noise</p>
            </div>

            <div className="flex flex-col items-center justify-center flex-grow -mt-10">
                {!props.isRecording ? (
                    <button
                        onClick={startRecording}
                        className="px-4 py-2 mb-4 text-2xl font-bold text-white bg-blue-500 rounded"
                    >
                        Record
                    </button>
                ) : (
                    <button
                        onClick={stopRecording}
                        className="px-4 py-2 mb-4 text-2xl font-bold text-red-500 rounded"
                    >
                        Stop
                    </button>
                )}
            </div>
        </div>
    )
}