self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-11-27 08:21:03 +02:00
Code Issues Releases Activity

Mobile: Added Front Camera toggle when taking a picture (#1913)

Browse Source 
* added front camera support

* added front camera button and logic
This commit is contained in:
oskar 2019-10-03 23:23:43 +02:00 committed by Laurent Cozic
parent 74c2bbc2f0
commit 4a88343372
1 changed files with 40 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
ReactNativeClient/lib/components/CameraView.js
View File

@ -11,16 +11,30 @@ class CameraView extends Component {
this.state = {
snapping: false,
camera: RNCamera.Constants.Type.back,
};
this.back_onPress = this.back_onPress.bind(this);
this.photo_onPress = this.photo_onPress.bind(this);
this.reverse_onPress = this.reverse_onPress.bind(this);
}
back_onPress() {
if (this.props.onCancel) this.props.onCancel();
}
reverse_onPress() {
if (this.state.camera == RNCamera.Constants.Type.back) {
this.setState({
camera: RNCamera.Constants.Type.front,
});
} else if (this.state.camera == RNCamera.Constants.Type.front) {
this.setState({
camera: RNCamera.Constants.Type.back,
});
}
}
async photo_onPress() {
if (!this.camera || !this.props.onPhoto) return;
@ -47,7 +61,7 @@ class CameraView extends Component {
ref={ref => {
this.camera = ref;
}}
type={RNCamera.Constants.Type.back}
type={this.state.camera}
captureAudio={false}
androidCameraPermissionOptions={{
title: _('Permission to use camera'),
@ -70,18 +84,31 @@ class CameraView extends Component {
</View>
</TouchableOpacity>
</View>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-end', flexDirection: 'row' }}>
<TouchableOpacity onPress={this.photo_onPress}>
<View style={{ marginBottom: 20, borderRadius: 90, width: 90, height: 90, backgroundColor: '#ffffffaa', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<Icon
name={photoIcon}
style={{
fontSize: 60,
color: 'black',
}}
/>
</View>
</TouchableOpacity>
<View style={{ flex: 1, alignItems: 'flex-end', flexDirection: 'row', width: '100%' }}>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity onPress={this.reverse_onPress} style={{width: '35%', marginLeft: 20}}>
<View style={{borderRadius: 32, width: 60, height: 60, backgroundColor: '#ffffffaa', justifyContent: 'center', alignItems: 'center', alignSelf: 'baseline' }}>
<Icon
name="md-reverse-camera"
style={{
fontSize: 40,
color: 'black',
}}
/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this.photo_onPress} style={{width: '65%'}}>
<View style={{ marginBottom: 20, borderRadius: 90, width: 90, height: 90, backgroundColor: '#ffffffaa', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<Icon
name={photoIcon}
style={{
fontSize: 60,
color: 'black',
}}
/>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</RNCamera>