Rocket.Chat.ReactNative/app/containers/MessageBox/Recording.js

import React from 'react';
import PropTypes from 'prop-types';
import {
	View, PermissionsAndroid, Text
} from 'react-native';
import { AudioRecorder, AudioUtils } from 'react-native-audio';
import { BorderlessButton } from 'react-native-gesture-handler';
import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake';
import RNFetchBlob from 'rn-fetch-blob';

import styles from './styles';
import I18n from '../../i18n';
import { isIOS, isAndroid } from '../../utils/deviceInfo';
import { CustomIcon } from '../../lib/Icons';
import { themes } from '../../constants/colors';
import SafeAreaView from '../SafeAreaView';

export const _formatTime = function(seconds) {
	let minutes = Math.floor(seconds / 60);
	seconds %= 60;
	if (minutes < 10) { minutes = `0${ minutes }`; }
	if (seconds < 10) { seconds = `0${ seconds }`; }
	return `${ minutes }:${ seconds }`;
};

export default class extends React.PureComponent {
	static async permission() {
		if (!isAndroid) {
			return true;
		}

		const rationale = {
			title: I18n.t('Microphone_Permission'),
			message: I18n.t('Microphone_Permission_Message')
		};

		const result = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, rationale);
		return result === true || result === PermissionsAndroid.RESULTS.GRANTED;
	}

	static propTypes = {
		theme: PropTypes.string,
		onFinish: PropTypes.func.isRequired
	}

	constructor() {
		super();

		this.recordingCanceled = false;
		this.recording = true;
		this.name = `${ Date.now() }.aac`;
		this.state = {
			currentTime: '00:00'
		};
	}

	componentDidMount() {
		const audioPath = `${ AudioUtils.CachesDirectoryPath }/${ this.name }`;

		AudioRecorder.prepareRecordingAtPath(audioPath, {
			SampleRate: 22050,
			Channels: 1,
			AudioQuality: 'Low',
			AudioEncoding: 'aac',
			OutputFormat: 'aac_adts'
		});

		AudioRecorder.onProgress = (data) => {
			this.setState({
				currentTime: _formatTime(Math.floor(data.currentTime))
			});
		};
		//
		AudioRecorder.onFinished = (data) => {
			if (!this.recordingCanceled && isIOS) {
				this.finishRecording(data.status === 'OK', data.audioFileURL, data.audioFileSize);
			}
		};
		AudioRecorder.startRecording();

		activateKeepAwake();
	}

	componentWillUnmount() {
		if (this.recording) {
			this.cancelAudioMessage();
		}

		deactivateKeepAwake();
	}

	finishRecording = (didSucceed, filePath, size) => {
		const { onFinish } = this.props;
		if (!didSucceed) {
			return onFinish && onFinish(didSucceed);
		}
		if (isAndroid) {
			filePath = filePath.startsWith('file://') ? filePath : `file://${ filePath }`;
		}
		const fileInfo = {
			name: this.name,
			mime: 'audio/aac',
			type: 'audio/aac',
			store: 'Uploads',
			path: filePath,
			size
		};
		return onFinish && onFinish(fileInfo);
	}

	finishAudioMessage = async() => {
		try {
			this.recording = false;
			const filePath = await AudioRecorder.stopRecording();
			if (isAndroid) {
				const data = await RNFetchBlob.fs.stat(decodeURIComponent(filePath));
				this.finishRecording(true, filePath, data.size);
			}
		} catch (err) {
			this.finishRecording(false);
		}
	}

	cancelAudioMessage = async() => {
		this.recording = false;
		this.recordingCanceled = true;
		await AudioRecorder.stopRecording();
		return this.finishRecording(false);
	}

	render() {
		const { currentTime } = this.state;
		const { theme } = this.props;

		return (
			<SafeAreaView
				testID='messagebox-recording'
				theme={theme}
				style={[
					styles.textBox,
					{ borderTopColor: themes[theme].borderColor }
				]}
			>
				<View style={[styles.textArea, { backgroundColor: themes[theme].messageboxBackground }]}>
					<BorderlessButton
						onPress={this.cancelAudioMessage}
						accessibilityLabel={I18n.t('Cancel_recording')}
						accessibilityTraits='button'
						style={styles.actionButton}
					>
						<CustomIcon
							size={22}
							color={themes[theme].dangerColor}
							name='Cross'
						/>
					</BorderlessButton>
					<Text key='currentTime' style={[styles.textBoxInput, { color: themes[theme].titleText }]}>{currentTime}</Text>
					<BorderlessButton
						onPress={this.finishAudioMessage}
						accessibilityLabel={I18n.t('Finish_recording')}
						accessibilityTraits='button'
						style={styles.actionButton}
					>
						<CustomIcon
							size={22}
							color={themes[theme].successColor}
							name='check'
						/>
					</BorderlessButton>
				</View>
			</SafeAreaView>
		);
	}
}