add button to change orientation of camera -- passed to props -- needs to be set up

This commit is contained in:
Loewy 2024-01-30 16:35:11 -08:00
parent f4cf600d22
commit 63ef099dc3

View File

@ -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,10 +39,19 @@ 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>
} }
return ( return (
hasPermission && ( hasPermission && (
<View style={styles.container}> <View style={styles.container}>
@ -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
}
}) })