railbird-gql/component/video/camera.tsx

178 lines
4.6 KiB
TypeScript
Raw Normal View History

2024-02-03 20:30:00 -07:00
import { useIsFocused } from "@react-navigation/native";
2024-01-31 22:45:00 -07:00
import React, { useCallback, useRef, useState } from "react";
import { Button, StyleSheet, Text, View } from "react-native";
import {
Camera,
CameraRuntimeError,
Orientation,
2024-02-03 20:30:00 -07:00
PhotoFile,
VideoFile,
useCameraDevice,
useCameraFormat,
useCameraPermission,
2024-01-31 22:45:00 -07:00
} 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
}
2024-02-01 19:43:44 -07:00
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" }],
},
2024-01-31 22:45:00 -07:00
});