stream-chat-react
Version:
React components to create chat conversations or livestream style chat
35 lines (34 loc) • 1.75 kB
JavaScript
import React, { useEffect } from 'react';
import { PauseIcon, PlayIcon } from '../../MessageInput/icons';
import { RecordingTimer } from './RecordingTimer';
import { WaveProgressBar } from '../../Attachment';
import { useAudioPlayer } from '../../AudioPlayback';
import { useStateStore } from '../../../store';
const audioPlayerStateSelector = (state) => ({
isPlaying: state.isPlaying,
progress: state.progressPercent,
secondsElapsed: state.secondsElapsed,
});
export const AudioRecordingPreview = ({ durationSeconds, mimeType, src, waveformData, }) => {
const audioPlayer = useAudioPlayer({
durationSeconds,
mimeType,
src,
waveformData,
});
const { isPlaying, progress, secondsElapsed } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
const displayedDuration = secondsElapsed || durationSeconds;
useEffect(() => {
audioPlayer?.cancelScheduledRemoval();
return () => {
audioPlayer?.scheduleRemoval();
};
}, [audioPlayer]);
if (!audioPlayer)
return;
return (React.createElement(React.Fragment, null,
React.createElement("button", { className: 'str-chat__audio_recorder__toggle-playback-button', "data-testid": 'audio-recording-preview-toggle-play-btn', onClick: audioPlayer.togglePlay }, isPlaying ? React.createElement(PauseIcon, null) : React.createElement(PlayIcon, null)),
React.createElement(RecordingTimer, { durationSeconds: displayedDuration }),
React.createElement("div", { className: 'str-chat__wave-progress-bar__track-container' },
React.createElement(WaveProgressBar, { progress: progress, seek: audioPlayer.seek, waveformData: waveformData || [] }))));
};