Close

component/video/camera.tsx

@@ -1,57 +1,68 @@
-import React, { useCallback, useRef, useState } from 'react'
-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'
+import React, { useCallback, useRef, useState } from "react";
+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<boolean>(false)
+  const camera = useRef<Camera>(null);
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const [isCameraInitialized, setIsCameraInitialized] =
+    useState<boolean>(false);
 
-  const isForeground: boolean = useIsForeground()
-  const isActive: boolean = isForeground // Should be combined with isFocused hook
+  const isForeground: boolean = useIsForeground();
+  const isActive: boolean = isForeground; // Should be combined with isFocused hook
 
   const onError = useCallback((error: CameraRuntimeError) => {
-    console.error(error)
-  }, [])
+    console.error(error);
+  }, []);
 
   const onInitialized = useCallback(() => {
-    console.log('Camera initialized!')
-    setIsCameraInitialized(true)
-  }, [])
+    console.log("Camera initialized!");
+    setIsCameraInitialized(true);
+  }, []);
 
-  const onMediaCaptured = useCallback(
-    (media: PhotoFile | VideoFile) => {
-      console.log(`Media captured! ${JSON.stringify(media)}`)
-    },
-    [],
-  )
+  const onMediaCaptured = useCallback((media: PhotoFile | VideoFile) => {
+    console.log(`Media captured! ${JSON.stringify(media)}`);
+  }, []);
 
   if (!hasPermission) {
-    requestPermission()
+    requestPermission();
     // Error handling in case they refuse to give permission
   }
 
-  const device = useCameraDevice('back')
+  const device = useCameraDevice("back");
   const format = useCameraFormat(device, [
     { videoResolution: { width: 3048, height: 2160 } },
-    { fps: 60 }
-  ]) // this sets as a target
+    { fps: 60 },
+  ]); // this sets as a target
 
   //Orientation detection
-  const [orientation, setOrientation] = useState<Orientation>('portrait');
+  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
+    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 (
+      <Text>
+        Camera not available. Does user have permissions: {hasPermission}
+      </Text>
+    );
   }
-  
   return (
     hasPermission && (
       <View style={styles.container}>
@@ -67,12 +78,22 @@ export default function CameraScreen(): React.ReactElement {
           isActive={isActive}
         />
         <RecordingButton
-          style={[styles.captureButton, orientation === 'portrait' ? styles.portrait : styles.landscape ]}
+          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 ]}>
+        <View
+          style={[
+            styles.button,
+            orientation === "portrait"
+              ? styles.togglePortrait
+              : styles.toggleLandscape,
+          ]}
+        >
           <Button
             title="Toggle Orientation"
             onPress={toggleOrientation}
@@ -82,35 +103,35 @@ export default function CameraScreen(): React.ReactElement {
         </View>
       </View>
     )
-  )
+  );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: 'black',
+    backgroundColor: "black",
   },
   captureButton: {
-    position: 'absolute',
-    alignSelf: 'center',
+    position: "absolute",
+    alignSelf: "center",
   },
   button: {
-    position: 'absolute',
-    alignSelf: 'center',
+    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
+    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
+    bottom: 20, // needs refined
   },
   landscape: {
-    bottom: '40%', // Should come from SafeAreaProvider
-    left: 20 // needs refined
-  }
-})
+    bottom: "40%", // Should come from SafeAreaProvider
+    left: 20, // needs refined
+  },
+});