diff --git a/src/components/Attachment/hooks/useAudioController.ts b/src/components/Attachment/hooks/useAudioController.ts
index 206c28295..c453e7e44 100644
--- a/src/components/Attachment/hooks/useAudioController.ts
+++ b/src/components/Attachment/hooks/useAudioController.ts
@@ -64,6 +64,7 @@ export const useAudioController = ({
if (!audioRef.current) return;
try {
audioRef.current.pause();
+ setIsPlaying(false);
} catch (e) {
registerError(new Error(t('Failed to play the recording')));
}
diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx
index 18b337c35..e2d8bcd39 100644
--- a/src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx
+++ b/src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
import { AudioRecordingPreview } from './AudioRecordingPreview';
import { AudioRecordingInProgress } from './AudioRecordingInProgress';
import { MediaRecordingState } from '../classes';
@@ -19,6 +19,15 @@ export const AudioRecorder = () => {
const isUploadingFile = recording?.$internal?.uploadState === 'uploading';
+ const state = useMemo(
+ () => ({
+ paused: recordingState === MediaRecordingState.PAUSED,
+ recording: recordingState === MediaRecordingState.RECORDING,
+ stopped: recordingState === MediaRecordingState.STOPPED,
+ }),
+ [recordingState],
+ );
+
if (!recorder) return null;
return (
@@ -26,24 +35,25 @@ export const AudioRecorder = () => {
- {recording?.asset_url ? (
+ {state.stopped && recording?.asset_url ? (
- ) : (
+ ) : state.paused || state.recording ? (
- )}
+ ) : null}
- {recordingState === MediaRecordingState.PAUSED && (
+ {state.paused && (
)}
- {recordingState === MediaRecordingState.RECORDING && (
+ {state.recording && (
)}
- {recordingState === MediaRecordingState.STOPPED ? (
+ {state.stopped ? (