railbird-gql/component/video/camera.tsx

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

export default function CameraScreen({
	route,
	navigation,
}): React.ReactElement {
	// TODO: #73 Does this need to be passed to Camera component?
	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
	const { gameType, tableSize, tags, location } = route.params;
	// LOG for params -- Remove when no longer needed
	// Note: camelCased value being passed, change on record.tsx if you want a different value format
	console.log(gameType, tableSize, tags, location);

	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)}`);
	}, []);

	const onVideoChunkReady = useCallback((event) => {
		console.log(`Chunk ready in react-native`, event.nativeEvent);
	}, []);

	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
		);
	};

	// Replace with error handling
	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}
					// @ts-ignore
					onVideoChunkReady={onVideoChunkReady}
					video={true}
					orientation={orientation} // TODO: #60
					isActive={isActive}
				/>
				<View
					style={
						orientation === "portrait"
							? styles.goBackPortrait
							: styles.goBackLandscape
					}
				>
					<Button title="Go back" onPress={() => navigation.goBack()} />
				</View>
				<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
	},
	goBackPortrait: {
		position: "absolute",
		top: 20, // or wherever you want the button to be positioned in portrait
		left: 20, // or wherever you want the button to be positioned in portrait
	},
	goBackLandscape: {
		position: "absolute",
		top: 40,
		right: 20,
		transform: [{ rotate: "90deg" }],
	},
});