add button to change orientation of camera -- passed to props -- needs to be set up
This commit is contained in:
parent
f4cf600d22
commit
63ef099dc3
@ -1,6 +1,6 @@
|
|||||||
import React, { useCallback, useRef, useState } from 'react'
|
import React, { useCallback, useRef, useState } from 'react'
|
||||||
import { StyleSheet, Text, View } from 'react-native'
|
import { Button, StyleSheet, Text, View } from 'react-native'
|
||||||
import { Camera, useCameraPermission, useCameraDevice, useCameraFormat, PhotoFile, VideoFile, CameraRuntimeError } from 'react-native-vision-camera'
|
import { Camera, useCameraPermission, useCameraDevice, useCameraFormat, PhotoFile, VideoFile, CameraRuntimeError, Orientation } from 'react-native-vision-camera'
|
||||||
import { RecordingButton } from './capture-button'
|
import { RecordingButton } from './capture-button'
|
||||||
import { useIsForeground } from './is-foreground'
|
import { useIsForeground } from './is-foreground'
|
||||||
|
|
||||||
@ -39,6 +39,15 @@ export default function CameraScreen(): React.ReactElement {
|
|||||||
{ fps: 60 }
|
{ fps: 60 }
|
||||||
])
|
])
|
||||||
|
|
||||||
|
//Orientation detection
|
||||||
|
const [orientation, setOrientation] = useState<Orientation>('portrait');
|
||||||
|
|
||||||
|
const toggleOrientation = () => {
|
||||||
|
setOrientation(currentOrientation =>
|
||||||
|
currentOrientation === 'landscape-left' ? 'portrait' : 'landscape-left' // Can adjust this and the type to match what we want
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
if (device === null) {
|
if (device === null) {
|
||||||
return <Text>Camera not available. Does user have permissions: {hasPermission}</Text>
|
return <Text>Camera not available. Does user have permissions: {hasPermission}</Text>
|
||||||
}
|
}
|
||||||
@ -54,18 +63,24 @@ export default function CameraScreen(): React.ReactElement {
|
|||||||
onInitialized={onInitialized}
|
onInitialized={onInitialized}
|
||||||
onError={onError}
|
onError={onError}
|
||||||
video={true}
|
video={true}
|
||||||
photo={false}
|
orientation={orientation} // TODO: #60
|
||||||
orientation='portrait' // TODO: #60
|
|
||||||
isActive={isActive}
|
isActive={isActive}
|
||||||
/>
|
/>
|
||||||
<RecordingButton
|
<RecordingButton
|
||||||
style={styles.captureButton}
|
style={[styles.captureButton, orientation === 'portrait' ? styles.portrait : styles.landscape ]}
|
||||||
camera={camera}
|
camera={camera}
|
||||||
onMediaCaptured={onMediaCaptured}
|
onMediaCaptured={onMediaCaptured}
|
||||||
enabled={isCameraInitialized}
|
enabled={isCameraInitialized}
|
||||||
/>
|
/>
|
||||||
|
<View style={[styles.button, orientation === 'portrait' ? styles.togglePortrait : styles.toggleLandscape ]}>
|
||||||
|
<Button
|
||||||
|
title="Toggle Orientation"
|
||||||
|
onPress={toggleOrientation}
|
||||||
|
color="#841584"
|
||||||
|
accessibilityLabel="Toggle camera orientation"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -78,6 +93,24 @@ const styles = StyleSheet.create({
|
|||||||
captureButton: {
|
captureButton: {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
alignSelf: 'center',
|
alignSelf: 'center',
|
||||||
bottom: 20, // Should come from SafeAreaProvider
|
|
||||||
},
|
},
|
||||||
|
button: {
|
||||||
|
position: 'absolute',
|
||||||
|
alignSelf: 'center',
|
||||||
|
},
|
||||||
|
togglePortrait: {
|
||||||
|
bottom: 110, // Adjust this as needed
|
||||||
|
},
|
||||||
|
toggleLandscape: {
|
||||||
|
transform: [{ rotate: '90deg' }],
|
||||||
|
bottom: '43%', // Should come from SafeAreaProvider, hardcoded right now, should roughly appear above the button
|
||||||
|
left: 50 // needs refined
|
||||||
|
},
|
||||||
|
portrait: {
|
||||||
|
bottom: 20
|
||||||
|
},
|
||||||
|
landscape: {
|
||||||
|
bottom: '40%', // Should come from SafeAreaProvider
|
||||||
|
left: 20 // needs refined
|
||||||
|
}
|
||||||
})
|
})
|
Loading…
Reference in New Issue
Block a user