129 lines
3.3 KiB
JavaScript
129 lines
3.3 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { View, SafeAreaView, Platform, PermissionsAndroid, Text } from 'react-native';
|
|
import { AudioRecorder, AudioUtils } from 'react-native-audio';
|
|
import Icon from 'react-native-vector-icons/MaterialIcons';
|
|
import styles from './styles';
|
|
|
|
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 propTypes = {
|
|
onFinish: PropTypes.func.isRequired
|
|
}
|
|
|
|
static async permission() {
|
|
if (Platform.OS !== 'android') {
|
|
return true;
|
|
}
|
|
|
|
const rationale = {
|
|
title: 'Microphone Permission',
|
|
message: 'Rocket Chat needs access to your microphone so you can send audio message.'
|
|
};
|
|
|
|
const result = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, rationale);
|
|
return result === true || result === PermissionsAndroid.RESULTS.GRANTED;
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
|
|
this.recordingCanceled = false;
|
|
this.state = {
|
|
currentTime: '00:00'
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
const audioPath = `${ AudioUtils.CachesDirectoryPath }/${ Date.now() }.aac`;
|
|
|
|
AudioRecorder.prepareRecordingAtPath(audioPath, {
|
|
SampleRate: 22050,
|
|
Channels: 1,
|
|
AudioQuality: 'Low',
|
|
AudioEncoding: 'aac'
|
|
});
|
|
|
|
AudioRecorder.onProgress = (data) => {
|
|
this.setState({
|
|
currentTime: _formatTime(Math.floor(data.currentTime))
|
|
});
|
|
};
|
|
//
|
|
AudioRecorder.onFinished = (data) => {
|
|
if (!this.recordingCanceled && Platform.OS === 'ios') {
|
|
this._finishRecording(data.status === 'OK', data.audioFileURL);
|
|
}
|
|
};
|
|
AudioRecorder.startRecording();
|
|
}
|
|
|
|
_finishRecording(didSucceed, filePath) {
|
|
if (!didSucceed) {
|
|
return this.props.onFinish && this.props.onFinish(didSucceed);
|
|
}
|
|
|
|
const path = filePath.startsWith('file://') ? filePath.split('file://')[1] : filePath;
|
|
const fileInfo = {
|
|
type: 'audio/aac',
|
|
store: 'Uploads',
|
|
path
|
|
};
|
|
return this.props.onFinish && this.props.onFinish(fileInfo);
|
|
}
|
|
|
|
finishAudioMessage = async() => {
|
|
try {
|
|
const filePath = await AudioRecorder.stopRecording();
|
|
if (Platform.OS === 'android') {
|
|
this._finishRecording(true, filePath);
|
|
}
|
|
} catch (err) {
|
|
this._finishRecording(false);
|
|
console.error(err);
|
|
}
|
|
}
|
|
|
|
cancelAudioMessage = async() => {
|
|
this.recordingCanceled = true;
|
|
await AudioRecorder.stopRecording();
|
|
return this._finishRecording(false);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<SafeAreaView
|
|
key='messagebox-recording'
|
|
testID='messagebox-recording'
|
|
style={styles.textBox}
|
|
>
|
|
<View style={[styles.textArea, { backgroundColor: '#F6F7F9' }]}>
|
|
<Icon
|
|
style={[styles.actionButtons, { color: 'red' }]}
|
|
name='clear'
|
|
key='clear'
|
|
accessibilityLabel='Cancel recording'
|
|
accessibilityTraits='button'
|
|
onPress={this.cancelAudioMessage}
|
|
/>
|
|
<Text key='currentTime' style={[styles.textBoxInput, { width: 50, height: 60 }]}>{this.state.currentTime}</Text>
|
|
<Icon
|
|
style={[styles.actionButtons, { color: 'green' }]}
|
|
name='check'
|
|
key='check'
|
|
accessibilityLabel='Finish recording'
|
|
accessibilityTraits='button'
|
|
onPress={this.finishAudioMessage}
|
|
/>
|
|
</View>
|
|
</SafeAreaView>);
|
|
}
|
|
}
|