Merge pull request 'Camera Orientation Toggling' (#63) from loewy/camera-orientation-toggle into master

Reviewed-on: railbird/rn-playground#63
Reviewed-by: Ivan Malison <ivanmalison@gmail.com>

component/video/camera.tsx

@@ -1,16 +1,16 @@
 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'
 
 export default function CameraScreen(): React.ReactElement {
   const camera = useRef<Camera>(null)
   const { hasPermission, requestPermission } = useCameraPermission()
-  const [isCameraInitialized, setIsCameraInitialized] = useState(false)
+  const [isCameraInitialized, setIsCameraInitialized] = useState<boolean>(false)
 
-  const isForeground = useIsForeground()
-  const isActive = isForeground
+  const isForeground: boolean = useIsForeground()
+  const isActive: boolean = isForeground // Should be combined with isFocused hook
 
   const onError = useCallback((error: CameraRuntimeError) => {
     console.error(error)
@@ -37,12 +37,21 @@ export default function CameraScreen(): React.ReactElement {
   const format = useCameraFormat(device, [
     { videoResolution: { width: 3048, height: 2160 } },
     { fps: 60 }
-  ])
+  ]) // this sets as a target
+
+  //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, // needs refined
+  },
+  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 // needs refined
+  },
+  landscape: {
+    bottom: '40%', // Should come from SafeAreaProvider
+    left: 20 // needs refined
+  }
 })

component/video/capture-button.tsx

@@ -1,10 +1,19 @@
 import React, { useCallback, useRef, useState } from 'react';
-import { TouchableOpacity, StyleSheet, View } from 'react-native';
+import { TouchableOpacity, StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
 import { CameraRoll } from "@react-native-camera-roll/camera-roll";
+import { Camera } from 'react-native-vision-camera/lib/typescript/Camera';
+import { VideoFile } from 'react-native-vision-camera/lib/typescript/VideoFile';
+
+interface RecordingButtonProps {
+  style: StyleProp<ViewStyle>;
+  camera: React.RefObject<Camera>;
+  // eslint-disable-next-line no-unused-vars
+  onMediaCaptured: (media: VideoFile, mediaType: string) => void;
+  enabled: boolean;
+}
 
 
-export const RecordingButton = ({ style, camera, onMediaCaptured, enabled }) => {
-
+export const RecordingButton: React.FC<RecordingButtonProps> = ({ style, camera, onMediaCaptured, enabled }) => {
 	const isRecording = useRef(false)
 	// UseRef won't trigger a re-render
 	const [, setRecordingState] = useState(false);