-
Notifications
You must be signed in to change notification settings - Fork 10
/
App.js
135 lines (126 loc) · 3.23 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
import React, { Component } from 'react';
import {
StyleSheet,
View,
TextInput
} from 'react-native';
import { ButtonGroup, Button } from 'react-native-elements'
import { API, graphqlOperation } from 'aws-amplify'
var Sound = require('react-native-sound')
Sound.setCategory('Playback')
import codes from './codes'
import query from './query'
const buttons = [
'French',
'Portugese',
'Spanish',
'German'
]
export default class App extends Component {
state = {
index: 0,
codes,
sentence: '',
translatedText: '',
mp3Url: '',
loading: false
}
updateIndex = index => {
this.setState({ index })
}
onChangeText = (val) => {
this.setState({ sentence: val })
}
translate = async () => {
if (this.state.sentence === '') return
const code = codes[this.state.index].code
try {
this.setState({ loading: true })
const translation = await API.graphql(graphqlOperation(query, { sentence: this.state.sentence, code: code }))
const { sentence } = translation.data.getTranslatedSentence
const { translatedText } = translation.data.getTranslatedSentence
const mp3Url = `https://s3-{REGION}.amazonaws.com/{YOURBUCKETNAME}/${sentence}`
this.setState({ mp3Url})
this.setState({ translatedText })
await this.playSound()
this.setState({loading: false})
} catch (error) {
console.log('error translating : ', error)
this.setState({ loading: false })
}
}
playSound = () => {
const translate = new Sound(this.state.mp3Url, null, (error) => {
if (error) {
console.log('failed to load the sound', error);
return;
}
console.log('duration in seconds: ' + translate.getDuration() + 'number of channels: ' + translate.getNumberOfChannels());
translate.play((success) => {
if (success) {
console.log('successfully finished playing');
} else {
console.log('playback failed due to audio decoding errors');
translate.reset();
}
});
});
}
render() {
return (
<View style={styles.container}>
<ButtonGroup
onPress={this.updateIndex}
selectedIndex={this.state.index}
buttons={buttons}
/>
<TextInput
multiline
onChangeText={val => this.onChangeText(val)}
style={styles.input}
value={this.state.sentence}
placeholder='Text to translate'
/>
<TextInput
editable={false}
multiline
style={styles.input}
value={this.state.translatedText}
placeholder=''
/>
<Button
onPress={this.translate}
backgroundColor='#1E88E5'
title="Translate"
loading={this.state.loading}
/>
</View>
);
}
}
const styles = StyleSheet.create({
input: {
padding: 10,
paddingTop: 10,
backgroundColor: '#ededed',
height: 200,
margin: 10,
fontSize: 16,
marginTop: 5
},
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});