From f5fad4e1616e33e6130a8e9ea62200d1e7c0f665 Mon Sep 17 00:00:00 2001
From: Neil Agarwal <neil@neilagarwal.me>
Date: Sun, 23 Aug 2020 03:19:29 +0530
Subject: [PATCH] fix: code review #1 (1)

---
 app/containers/MessageBox/RecordAudio.js | 35 ++++++++++--------------
 app/containers/MessageBox/styles.js      | 20 +++++++-------
 app/i18n/locales/en.js                   |  3 ++
 3 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/app/containers/MessageBox/RecordAudio.js b/app/containers/MessageBox/RecordAudio.js
index ecae5150f5..937b3a9e4d 100644
--- a/app/containers/MessageBox/RecordAudio.js
+++ b/app/containers/MessageBox/RecordAudio.js
@@ -47,17 +47,11 @@ const RECORDING_MODE = {
 	interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
 	interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX
 };
-const RECORDING_MINIMUM_DURATION = 300;		// Cancel if recording < this duration (in ms)
-const RECORDING_DEFER_END_IOS = 300;		// Ms to wait before ending the recording (ios).
-const RECORDING_DEFER_END_ANDROID = 400;	// Ms to wait before ending the recording (android).
-const RECORDING_TOOLTIP_DURATION = 1500;	// Duration to show recording tooltip (in ms)
-const RECORDING_CANCEL_DISTANCE = -120;		// Swipe left gesture to cancel recording
-const RECORDING_PERSIST_DISTANCE = -80;		// Swipe up gesture to persist recording
-
-const RECORDING_TOOLTIP_TEXT = 'Hold to record. Release to send';
-const RECORDING_SLIDE_TO_CANCEL_TEXT = 'Slide to cancel';
-const RECORDING_CANCEL_BUTTON_TEXT = 'Cancel';
-
+const RECORDING_MINIMUM_DURATION = 300;	// Cancel if recording < this duration (in ms)
+const RECORDING_DEFER_END = isIOS ? 300 : 400; // Ms to wait before ending the recording
+const RECORDING_TOOLTIP_DURATION = 1500; // Duration to show recording tooltip (in ms)
+const RECORDING_CANCEL_DISTANCE = -120; // Swipe left gesture to cancel recording
+const RECORDING_PERSIST_DISTANCE = -80; // Swipe up gesture to persist recording
 
 const formatTime = function(seconds) {
 	let minutes = Math.floor(seconds / 60);
@@ -179,7 +173,7 @@ class RecordAudio extends React.PureComponent {
 					cond(greaterThan(sub(longPressClock, longPressStartTime), RECORDING_MINIMUM_DURATION), [
 						call([], this.finishRecordingAudio)
 					], [
-						call([], () => this.cancelRecordingAndShowTooltip(RECORDING_DEFER_END_IOS))
+						call([], () => this.cancelRecordingAndShowTooltip(RECORDING_DEFER_END))
 					])
 				])
 			])
@@ -219,7 +213,7 @@ class RecordAudio extends React.PureComponent {
 						cond(greaterThan(sub(longPressClock, longPressStartTime), RECORDING_MINIMUM_DURATION), [
 							call([], this.finishRecordingAudio)
 						], [
-							call([], () => this.cancelRecordingAndShowTooltip(RECORDING_DEFER_END_ANDROID))
+							call([], () => this.cancelRecordingAndShowTooltip(RECORDING_DEFER_END))
 						])
 					])
 				])
@@ -372,7 +366,7 @@ class RecordAudio extends React.PureComponent {
 								}]}
 							>
 								<Text style={{ color: themes[theme].bodyText }}>
-									{RECORDING_TOOLTIP_TEXT}
+									{I18n.t('Recording_tooltip')}
 								</Text>
 							</View>
 
@@ -396,18 +390,18 @@ class RecordAudio extends React.PureComponent {
 											style={styles.recordingCancelButton}
 										>
 											<Text style={[styles.cancelRecordingText, { color: themes[theme].tintColor }]}>
-												{RECORDING_CANCEL_BUTTON_TEXT}
+												{I18n.t('Recording_cancel_button')}
 											</Text>
 										</RectButton>
 									</View>
 								) : (
 									<Animated.View style={[styles.recordingSlideToCancel, { transform: [{ translateX: this._cancelTranslationX }] }]}>
-										<CustomIcon name='chevron-left' size={30} color={themes[theme].auxiliaryTintColor} />
+										<CustomIcon name='chevron-left' size={32} color={themes[theme].auxiliaryTintColor} />
 										<Text style={[styles.cancelRecordingText, {
 											color: themes[theme].auxiliaryText
 										}]}
 										>
-											{RECORDING_SLIDE_TO_CANCEL_TEXT}
+											{I18n.t('Recording_slide_to_cancel')}
 										</Text>
 									</Animated.View>
 								)
@@ -417,7 +411,7 @@ class RecordAudio extends React.PureComponent {
 				}
 
 				{
-					isRecordingPersisted && <SendButton theme={theme} onPress={this.finishRecordingAudio} />
+					isRecordingPersisted ? <SendButton theme={theme} onPress={this.finishRecordingAudio} /> : null
 				}
 
 				<PanGestureHandler
@@ -443,11 +437,12 @@ class RecordAudio extends React.PureComponent {
 										accessibilityTraits='button'
 									>
 										<CustomIcon style={{ zIndex: 1 }} name='microphone' size={23} color={buttonIconColor} />
-										<View style={{ position: 'absolute' }}>
+										<View style={styles.recordingButtonBubbleContainer}>
 											<Animated.View
 												style={[styles.recordingButtonBubble, {
 													backgroundColor: themes[theme].tintColor,
-													transform: [{ scale: this._buttonGrow }]
+													width: this._buttonGrow,
+													height: this._buttonGrow
 												}]}
 											/>
 										</View>
diff --git a/app/containers/MessageBox/styles.js b/app/containers/MessageBox/styles.js
index af09f8d5bf..2b1075b739 100644
--- a/app/containers/MessageBox/styles.js
+++ b/app/containers/MessageBox/styles.js
@@ -105,7 +105,7 @@ export default StyleSheet.create({
 		maxHeight: SCROLLVIEW_MENTION_HEIGHT
 	},
 	buttonsWhitespace: {
-		width: 15
+		width: 16
 	},
 	recordingContent: {
 		flexDirection: 'row',
@@ -119,15 +119,14 @@ export default StyleSheet.create({
 	recordingTooltipContainer: {
 		position: 'absolute',
 		bottom: '120%',
-		right: 14,
+		right: 16,
 		zIndex: 10
 	},
 	recordingTooltip: {
 		alignSelf: 'flex-end',
-		padding: 10,
+		padding: 12,
 		borderRadius: 4,
-		borderWidth: 1,
-		opacity: 0.96
+		borderWidth: 1
 	},
 	recordingSlideToCancel: {
 		flexDirection: 'row',
@@ -136,18 +135,19 @@ export default StyleSheet.create({
 	},
 	recordingDurationText: {
 		textAlignVertical: 'center',
-		fontSize: 17,
-		margin: 10,
+		fontSize: 16,
+		margin: 12,
 		letterSpacing: 0,
 		...sharedStyles.textRegular
 	},
 	recordingButtonBubble: {
-		width: 1,
-		height: 1,
 		borderRadius: 200
 	},
 	recordingCancelButton: {
 		paddingVertical: 12,
-		paddingHorizontal: 6
+		paddingHorizontal: 4
+	},
+	recordingButtonBubbleContainer: {
+		position: 'absolute'
 	}
 });
diff --git a/app/i18n/locales/en.js b/app/i18n/locales/en.js
index ef35a18a7b..58bd73927e 100644
--- a/app/i18n/locales/en.js
+++ b/app/i18n/locales/en.js
@@ -392,6 +392,9 @@ export default {
 	Read_Receipt: 'Read Receipt',
 	Receive_Group_Mentions: 'Receive Group Mentions',
 	Receive_Group_Mentions_Info: 'Receive @all and @here mentions',
+	Recording_tooltip: 'Hold to record. Release to send',
+	Recording_slide_to_cancel: 'Slide to cancel',
+	Recording_cancel_button: 'Cancel',
 	Register: 'Register',
 	Repeat_Password: 'Repeat Password',
 	Replied_on: 'Replied on:',