stream-chat-react
Version:
React components to create chat conversations or livestream style chat
42 lines (41 loc) • 2.94 kB
JavaScript
import React, { useEffect } from 'react';
import { PlayButton } from '../../Attachment';
import { RecordingTimer } from '../../MediaRecorder';
import { CloseIcon, LoadingIndicatorIcon, RetryIcon } from '../icons';
import { FileIcon } from '../../ReactFileUtilities';
import { useTranslationContext } from '../../../context';
import { useAudioPlayer } from '../../AudioPlayback';
import { useStateStore } from '../../../store';
const audioPlayerStateSelector = (state) => ({
isPlaying: state.isPlaying,
secondsElapsed: state.secondsElapsed,
});
export const VoiceRecordingPreview = ({ attachment, handleRetry, removeAttachments, }) => {
const { t } = useTranslationContext();
const audioPlayer = useAudioPlayer({
mimeType: attachment.mime_type,
src: attachment.asset_url,
});
const { isPlaying, secondsElapsed } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
useEffect(() => {
audioPlayer?.cancelScheduledRemoval();
return () => {
audioPlayer?.scheduleRemoval();
};
}, [audioPlayer]);
if (!audioPlayer)
return null;
return (React.createElement("div", { className: 'str-chat__attachment-preview-voice-recording', "data-testid": 'attachment-preview-voice-recording' },
React.createElement(PlayButton, { isPlaying: !!isPlaying, onClick: audioPlayer.togglePlay }),
React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: attachment.localMetadata?.uploadState === 'uploading', onClick: () => attachment.localMetadata?.id && removeAttachments([attachment.localMetadata.id]), type: 'button' },
React.createElement(CloseIcon, null)),
['blocked', 'failed'].includes(attachment.localMetadata?.uploadState) &&
!!handleRetry && (React.createElement("button", { "aria-label": t('aria/Retry upload'), className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: () => handleRetry(attachment) },
React.createElement(RetryIcon, null))),
React.createElement("div", { className: 'str-chat__attachment-preview-metadata' },
React.createElement("div", { className: 'str-chat__attachment-preview-file-name', title: attachment.title }, attachment.title),
typeof attachment.duration !== 'undefined' && (React.createElement(RecordingTimer, { durationSeconds: secondsElapsed || attachment.duration })),
attachment.localMetadata?.uploadState === 'uploading' && (React.createElement(LoadingIndicatorIcon, { size: 17 }))),
React.createElement("div", { className: 'str-chat__attachment-preview-file-icon' },
React.createElement(FileIcon, { filename: attachment.title, mimeType: attachment.mime_type }))));
};