stream-chat-react
Version:
React components to create chat conversations or livestream style chat
50 lines (49 loc) • 2.53 kB
JavaScript
import React, { useEffect, useState } from 'react';
import { useTimeElapsed } from './hooks/useTimeElapsed';
import { useMessageInputContext } from '../../../context';
import { RecordingTimer } from './RecordingTimer';
const AudioRecordingWaveform = ({ maxDataPointsDrawn = 100 }) => {
const { recordingController: { recorder }, } = useMessageInputContext();
const [amplitudes, setAmplitudes] = useState([]);
useEffect(() => {
if (!recorder?.amplitudeRecorder)
return;
const amplitudesSubscription = recorder.amplitudeRecorder.amplitudes.subscribe(setAmplitudes);
return () => {
amplitudesSubscription.unsubscribe();
};
}, [recorder]);
if (!recorder)
return null;
return (React.createElement("div", { className: 'str-chat__waveform-box-container' },
React.createElement("div", { className: 'str-chat__audio_recorder__waveform-box' }, amplitudes.slice(-maxDataPointsDrawn).map((amplitude, i) => (React.createElement("div", { className: 'str-chat__wave-progress-bar__amplitude-bar', key: `amplitude-${i}-voice-recording`, style: {
'--str-chat__wave-progress-bar__amplitude-bar-height': amplitude
? amplitude * 100 + '%'
: '0%',
} }))))));
};
export const AudioRecordingInProgress = () => {
const { secondsElapsed, startCounter, stopCounter } = useTimeElapsed();
const { recordingController: { recorder }, } = useMessageInputContext();
useEffect(() => {
if (!recorder?.mediaRecorder)
return;
const { mediaRecorder } = recorder;
if (mediaRecorder.state === 'recording') {
startCounter();
}
mediaRecorder.addEventListener('start', startCounter);
mediaRecorder.addEventListener('resume', startCounter);
mediaRecorder.addEventListener('stop', stopCounter);
mediaRecorder.addEventListener('pause', stopCounter);
return () => {
mediaRecorder.removeEventListener('start', startCounter);
mediaRecorder.removeEventListener('resume', startCounter);
mediaRecorder.removeEventListener('stop', stopCounter);
mediaRecorder.removeEventListener('pause', stopCounter);
};
}, [recorder, startCounter, stopCounter]);
return (React.createElement(React.Fragment, null,
React.createElement(RecordingTimer, { durationSeconds: secondsElapsed }),
React.createElement(AudioRecordingWaveform, null)));
};