railbird-gql/component/video/camera.tsx

import React, { useCallback, useRef, useState } from "react";
import { Button, StyleSheet, Text, View } from "react-native";
import {
  Camera,
  useCameraPermission,
  useCameraDevice,
  useCameraFormat,
  PhotoFile,
  VideoFile,
  CameraRuntimeError,
  Orientation,
  // @ts-ignore
} from "react-native-vision-camera";
import { RecordingButton } from "./capture-button";
import { useIsForeground } from "./is-foreground";
import { useIsFocused } from '@react-navigation/native'

export default function CameraScreen(): React.ReactElement {
  const camera = useRef<Camera>(null);
  const { hasPermission, requestPermission } = useCameraPermission();
  const [isCameraInitialized, setIsCameraInitialized] = useState<boolean>(false);

  const isForeground = useIsForeground();
  const isFocused = useIsFocused();
  const isActive = isForeground && isFocused;

  const onError = useCallback((error: CameraRuntimeError) => {
    console.error(error);
  }, []);

  const onInitialized = useCallback(() => {
    console.log("Camera initialized!");
    setIsCameraInitialized(true);
  }, []);

  const onMediaCaptured = useCallback((media: PhotoFile | VideoFile) => {
    console.log(`Media captured! ${JSON.stringify(media)}`);
  }, []);

  if (!hasPermission) {
    requestPermission();
    // Error handling in case they refuse to give permission
  }

  const device = useCameraDevice("back");
  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) {
    console.log(device)
    return (
      <Text>
        Camera not available. Does user have permissions: {hasPermission}
      </Text>
    );
  }
  return (
    hasPermission && (
      <View style={styles.container}>
        <Camera
          ref={camera}
          style={StyleSheet.absoluteFill}
          device={device}
          format={format}
          onInitialized={onInitialized}
          onError={onError}
          video={true}
          orientation={orientation} // TODO: #60
          isActive={isActive}
        />
        <RecordingButton
          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>
    )
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "black",
  },
  captureButton: {
    position: "absolute",
    alignSelf: "center",
  },
  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
  },
});