From bf77b6ccc3cbdbe2a61cbb56e93a0df24850651d Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <reinaldonetof@hotmail.com>
Date: Thu, 10 Aug 2023 15:55:40 -0300
Subject: [PATCH] added the audio rate

---
 .../message/Components/Audio/AudioRate.tsx    | 25 +++++++++++++++++++
 .../message/Components/Audio/index.tsx        |  7 +++++-
 .../message/Components/Audio/styles.ts        | 13 ++++++++++
 app/lib/constants/colors.ts                   |  9 +++++++
 4 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 app/containers/message/Components/Audio/AudioRate.tsx

diff --git a/app/containers/message/Components/Audio/AudioRate.tsx b/app/containers/message/Components/Audio/AudioRate.tsx
new file mode 100644
index 000000000..955fdd5f3
--- /dev/null
+++ b/app/containers/message/Components/Audio/AudioRate.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { Text } from 'react-native';
+
+import styles from './styles';
+import { useTheme } from '../../../../theme';
+import Touchable from '../../Touchable';
+
+const AudioRate = ({ onChange }: { onChange: (value: number) => void }) => {
+	const [rate, setRate] = useState(1.0);
+	const { colors } = useTheme();
+
+	const onPress = () => {
+		const nextRate = rate === 2.0 ? 0.5 : rate + 0.5;
+		setRate(nextRate);
+		onChange(nextRate);
+	};
+
+	return (
+		<Touchable onPress={onPress} style={[styles.containerAudioRate, { backgroundColor: colors.audioRateBackground }]}>
+			<Text style={[styles.audioRateText, { color: colors.audioRateText }]}>{rate}x</Text>
+		</Touchable>
+	);
+};
+
+export default AudioRate;
diff --git a/app/containers/message/Components/Audio/index.tsx b/app/containers/message/Components/Audio/index.tsx
index 220a67303..31eea7823 100644
--- a/app/containers/message/Components/Audio/index.tsx
+++ b/app/containers/message/Components/Audio/index.tsx
@@ -19,6 +19,7 @@ import { fetchAutoDownloadEnabled } from '../../../../lib/methods/autoDownloadPr
 import styles from './styles';
 import Slider from './Slider';
 import Loading from './Loading';
+import AudioRate from './AudioRate';
 
 interface IButton {
 	loading: boolean;
@@ -129,6 +130,10 @@ const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessage
 		}
 	};
 
+	const setRate = async (value = 1.0) => {
+		await sound.current?.setRateAsync(value, true);
+	};
+
 	const handleDownload = async () => {
 		setLoading(true);
 		try {
@@ -249,7 +254,7 @@ const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessage
 			>
 				<Button disabled={isReply} loading={loading} paused={paused} cached={cached} onPress={onPress} />
 				<Slider sound={sound.current} thumbColor={thumbColor} onEndCallback={onEnd} />
-				<View style={{ width: 36, height: 24, backgroundColor: '#999', borderRadius: 4, marginRight: 16 }} />
+				<AudioRate onChange={setRate} />
 			</View>
 		</>
 	);
diff --git a/app/containers/message/Components/Audio/styles.ts b/app/containers/message/Components/Audio/styles.ts
index 4d8ff7782..6355d911e 100644
--- a/app/containers/message/Components/Audio/styles.ts
+++ b/app/containers/message/Components/Audio/styles.ts
@@ -50,6 +50,19 @@ const styles = StyleSheet.create({
 		width: 12,
 		borderRadius: 6,
 		zIndex: 3
+	},
+	containerAudioRate: {
+		width: 36,
+		height: 24,
+		borderRadius: 4,
+		marginRight: 16,
+		justifyContent: 'center',
+		alignItems: 'center',
+		overflow: 'hidden'
+	},
+	audioRateText: {
+		fontSize: 14,
+		...sharedStyles.textBold
 	}
 });
 
diff --git a/app/lib/constants/colors.ts b/app/lib/constants/colors.ts
index cb75c9651..4a9bddf1a 100644
--- a/app/lib/constants/colors.ts
+++ b/app/lib/constants/colors.ts
@@ -102,6 +102,9 @@ export const colors = {
 		overlayColor: '#1F2329B2',
 		audioPlayerPrimary: '#156FF5',
 		audioPlayerSecondary: '#CBCED1',
+		audioRateBackground: '#E4E7EA',
+		audioRateText: '#1F2329',
+		audioTimeText: '#2F343D',
 		...mentions,
 		...callButtons
 	},
@@ -181,6 +184,9 @@ export const colors = {
 		overlayColor: '#1F2329B2',
 		audioPlayerPrimary: '#3976D1',
 		audioPlayerSecondary: '#404754',
+		audioRateBackground: '#353B45',
+		audioRateText: '#E4E7EA',
+		audioTimeText: '#E4E7EA',
 		...mentions,
 		...callButtons
 	},
@@ -260,6 +266,9 @@ export const colors = {
 		overlayColor: '#1F2329B2',
 		audioPlayerPrimary: '#3976D1',
 		audioPlayerSecondary: '#404754',
+		audioRateBackground: '#353B45',
+		audioRateText: '#E4E7EA',
+		audioTimeText: '#E4E7EA',
 		...mentions,
 		...callButtons
 	}