railbird-gql/component/video/camera.tsx

141 lines
3.7 KiB
TypeScript

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