From 30aab71db1374f34ce70eb80d9f57744c26d9fc4 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Thu, 23 Sep 2021 09:16:23 -0300
Subject: [PATCH] [FIX] Preserve voice message if recording is interrupted
 (#3397)

* https://github.com/RocketChat/Rocket.Chat.ReactNative/pull/3388/commits/7c259096713a73e4e39467b45298222ca16a9d5e

* Minor changes

Co-authored-by: Marco Jakobs <mj@jacotec.de>
---
 app/containers/MessageBox/RecordAudio.tsx | 56 +++++++++++++++++++----
 app/containers/MessageBox/styles.ts       |  3 +-
 2 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/app/containers/MessageBox/RecordAudio.tsx b/app/containers/MessageBox/RecordAudio.tsx
index cec55761f..fa6c509ef 100644
--- a/app/containers/MessageBox/RecordAudio.tsx
+++ b/app/containers/MessageBox/RecordAudio.tsx
@@ -63,20 +63,24 @@ export default class RecordAudio extends React.PureComponent<IMessageBoxRecordAu
 
 	private recording: any;
 
+	private LastDuration: number;
+
 	constructor(props: IMessageBoxRecordAudioProps) {
 		super(props);
 		this.isRecorderBusy = false;
+		this.LastDuration = 0;
 		this.state = {
 			isRecording: false,
+			isRecorderActive: false,
 			recordingDurationMillis: 0
 		};
 	}
 
 	componentDidUpdate() {
 		const { recordingCallback } = this.props;
-		const { isRecording } = this.state;
+		const { isRecorderActive } = this.state;
 
-		recordingCallback(isRecording);
+		recordingCallback(isRecorderActive);
 	}
 
 	componentWillUnmount() {
@@ -90,6 +94,10 @@ export default class RecordAudio extends React.PureComponent<IMessageBoxRecordAu
 		return formatTime(Math.floor(recordingDurationMillis / 1000));
 	}
 
+	get GetLastDuration() {
+		return formatTime(Math.floor(this.LastDuration / 1000));
+	}
+
 	isRecordingPermissionGranted = async () => {
 		try {
 			const permission = await Audio.getPermissionsAsync();
@@ -108,17 +116,20 @@ export default class RecordAudio extends React.PureComponent<IMessageBoxRecordAu
 			isRecording: status.isRecording,
 			recordingDurationMillis: status.durationMillis
 		});
+		this.LastDuration = status.durationMillis;
 	};
 
 	startRecordingAudio = async () => {
 		logEvent(events.ROOM_AUDIO_RECORD);
 		if (!this.isRecorderBusy) {
 			this.isRecorderBusy = true;
+			this.LastDuration = 0;
 			try {
 				const canRecord = await this.isRecordingPermissionGranted();
 				if (canRecord) {
 					await Audio.setAudioModeAsync(RECORDING_MODE);
 
+					this.setState({ isRecorderActive: true });
 					this.recording = new Audio.Recording();
 					await this.recording.prepareToRecordAsync(RECORDING_SETTINGS);
 					this.recording.setOnRecordingStatusUpdate(this.onRecordingStatusUpdate);
@@ -159,7 +170,7 @@ export default class RecordAudio extends React.PureComponent<IMessageBoxRecordAu
 			} catch (error) {
 				logEvent(events.ROOM_AUDIO_FINISH_F);
 			}
-			this.setState({ isRecording: false, recordingDurationMillis: 0 });
+			this.setState({ isRecording: false, isRecorderActive: false, recordingDurationMillis: 0 });
 			deactivateKeepAwake();
 			this.isRecorderBusy = false;
 		}
@@ -174,7 +185,7 @@ export default class RecordAudio extends React.PureComponent<IMessageBoxRecordAu
 			} catch (error) {
 				logEvent(events.ROOM_AUDIO_CANCEL_F);
 			}
-			this.setState({ isRecording: false, recordingDurationMillis: 0 });
+			this.setState({ isRecording: false, isRecorderActive: false, recordingDurationMillis: 0 });
 			deactivateKeepAwake();
 			this.isRecorderBusy = false;
 		}
@@ -182,9 +193,9 @@ export default class RecordAudio extends React.PureComponent<IMessageBoxRecordAu
 
 	render() {
 		const { theme } = this.props;
-		const { isRecording } = this.state;
+		const { isRecording, isRecorderActive } = this.state;
 
-		if (!isRecording) {
+		if (!isRecording && !isRecorderActive) {
 			return (
 				<BorderlessButton
 					onPress={this.startRecordingAudio}
@@ -198,6 +209,32 @@ export default class RecordAudio extends React.PureComponent<IMessageBoxRecordAu
 			);
 		}
 
+		if (!isRecording && isRecorderActive) {
+			return (
+				<View style={styles.recordingContent}>
+					<View style={styles.textArea}>
+						<BorderlessButton
+							onPress={this.cancelRecordingAudio}
+							// @ts-ignore
+							accessibilityLabel={I18n.t('Cancel_recording')}
+							accessibilityTraits='button'
+							style={styles.actionButton}>
+							<CustomIcon size={24} color={themes[theme].dangerColor} name='delete' />
+						</BorderlessButton>
+						<Text style={[styles.recordingDurationText, { color: themes[theme].titleText }]}>{this.GetLastDuration}</Text>
+					</View>
+					<BorderlessButton
+						onPress={this.finishRecordingAudio}
+						// @ts-ignore
+						accessibilityLabel={I18n.t('Finish_recording')}
+						accessibilityTraits='button'
+						style={styles.actionButton}>
+						<CustomIcon size={24} color={themes[theme].tintColor} name='send-filled' />
+					</BorderlessButton>
+				</View>
+			);
+		}
+
 		return (
 			<View style={styles.recordingContent}>
 				<View style={styles.textArea}>
@@ -207,9 +244,10 @@ export default class RecordAudio extends React.PureComponent<IMessageBoxRecordAu
 						accessibilityLabel={I18n.t('Cancel_recording')}
 						accessibilityTraits='button'
 						style={styles.actionButton}>
-						<CustomIcon size={24} color={themes[theme].dangerColor} name='close' />
+						<CustomIcon size={24} color={themes[theme].dangerColor} name='delete' />
 					</BorderlessButton>
-					<Text style={[styles.recordingCancelText, { color: themes[theme].titleText }]}>{this.duration}</Text>
+					<Text style={[styles.recordingDurationText, { color: themes[theme].titleText }]}>{this.duration}</Text>
+					<CustomIcon size={24} color={themes[theme].dangerColor} name='record' />
 				</View>
 				<BorderlessButton
 					onPress={this.finishRecordingAudio}
@@ -217,7 +255,7 @@ export default class RecordAudio extends React.PureComponent<IMessageBoxRecordAu
 					accessibilityLabel={I18n.t('Finish_recording')}
 					accessibilityTraits='button'
 					style={styles.actionButton}>
-					<CustomIcon size={24} color={themes[theme].successColor} name='check' />
+					<CustomIcon size={24} color={themes[theme].tintColor} name='send-filled' />
 				</BorderlessButton>
 			</View>
 		);
diff --git a/app/containers/MessageBox/styles.ts b/app/containers/MessageBox/styles.ts
index 8d934799f..6f4599090 100644
--- a/app/containers/MessageBox/styles.ts
+++ b/app/containers/MessageBox/styles.ts
@@ -139,7 +139,8 @@ export default StyleSheet.create({
 		flex: 1,
 		justifyContent: 'space-between'
 	},
-	recordingCancelText: {
+	recordingDurationText: {
+		width: 60,
 		fontSize: 16,
 		...sharedStyles.textRegular
 	},