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

component/video/camera.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useRef, useState } from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { Camera, useCameraPermission, useCameraDevice, useCameraFormat, PhotoFile, VideoFile, CameraRuntimeError } from 'react-native-vision-camera'
+import { Button, StyleSheet, Text, View } from 'react-native'
+import { Camera, useCameraPermission, useCameraDevice, useCameraFormat, PhotoFile, VideoFile, CameraRuntimeError, Orientation } from 'react-native-vision-camera'
 import { RecordingButton } from './capture-button'
 import { useIsForeground } from './is-foreground'
 
@@ -39,10 +39,19 @@ export default function CameraScreen(): React.ReactElement {
     { 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) {
     return <Text>Camera not available. Does user have permissions:  {hasPermission}</Text>
   }
-
+  
   return (
     hasPermission && (
       <View style={styles.container}>
@@ -54,18 +63,24 @@ export default function CameraScreen(): React.ReactElement {
           onInitialized={onInitialized}
           onError={onError}
           video={true}
-          photo={false}
-          orientation='portrait' // TODO: #60
+          orientation={orientation} // TODO: #60
           isActive={isActive}
         />
         <RecordingButton
-          style={styles.captureButton}
+          style={[styles.captureButton, orientation === 'portrait' ? styles.portrait : styles.landscape ]}
           camera={camera}
           onMediaCaptured={onMediaCaptured}
           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>
-      
     )
   )
 }
@@ -78,6 +93,24 @@ const styles = StyleSheet.create({
   captureButton: {
     position: 'absolute',
     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
+  }
 })