railbird/railbird-gql
10
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into loewy/rn-navigation

Browse Source
This commit is contained in:
Loewy
2024-02-01 11:42:50 -08:00
parent 6482d43af0 7f6a05c101
commit c882786726
18 changed files with 518 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
component/video/camera.tsx
View File

@@ -1,51 +1,71 @@
import React, { useCallback, useRef, useState } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { Camera, useCameraPermission, useCameraDevice, useCameraFormat, PhotoFile, VideoFile, CameraRuntimeError } 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,
// @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(false)
const camera = useRef<Camera>(null);
const { hasPermission, requestPermission } = useCameraPermission();
const [isCameraInitialized, setIsCameraInitialized] =
useState<boolean>(false);
const isForeground = useIsForeground()
const isForeground = useIsForeground();
const isFocused = useIsFocused();
const isActive = isForeground && isFocused
const isActive = isForeground && isFocused;
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 }
])
{ 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 (
<Text>
Camera not available. Does user have permissions: {hasPermission}
</Text>
);
}
return (
hasPermission && (
<View style={styles.container}>
@@ -57,30 +77,64 @@ export default function CameraScreen(): React.ReactElement {
onInitialized={onInitialized}
onError={onError}
video={true}
photo={false}
orientation='portrait' // TODO: #60
orientation={orientation} // TODO: #60
isActive={isActive}
/>
<RecordingButton
style={styles.captureButton}
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',
backgroundColor: "black",
},
captureButton: {
position: 'absolute',
alignSelf: 'center',
bottom: 20, // Should come from SafeAreaProvider
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
},
});

153
component/video/capture-button.tsx
View File

@@ -1,68 +1,89 @@
import React, { useCallback, useRef, useState } from 'react';
import { TouchableOpacity, StyleSheet, View } from 'react-native';
import React, { useCallback, useRef, useState } from "react";
import {
TouchableOpacity,
StyleSheet,
View,
StyleProp,
ViewStyle,
} from "react-native";
import { CameraRoll } from "@react-native-camera-roll/camera-roll";
// @ts-ignore
import { Camera } from "react-native-vision-camera/lib/typescript/Camera";
// @ts-ignore
import { VideoFile } from "react-native-vision-camera/lib/typescript/VideoFile";
interface RecordingButtonProps {
style: StyleProp<ViewStyle>;
camera: React.RefObject<Camera>;
// eslint-disable-next-line no-unused-vars
onMediaCaptured: (media: VideoFile, mediaType: string) => void;
enabled: boolean;
}
export const RecordingButton = ({ style, camera, onMediaCaptured, enabled }) => {
const isRecording = useRef(false)
export const RecordingButton: React.FC<RecordingButtonProps> = ({
style,
camera,
onMediaCaptured,
enabled,
}) => {
const isRecording = useRef(false);
// UseRef won't trigger a re-render
const [, setRecordingState] = useState(false);
const onStoppedRecording = useCallback(() => {
isRecording.current = false
setRecordingState(false)
console.log('stopped recording video!')
}, [])
isRecording.current = false;
setRecordingState(false);
console.log("stopped recording video!");
}, []);
const stopRecording = useCallback(async () => {
try {
if (camera.current === null) {
throw new Error('Camera ref is null!') // Error handling could be more graceful
throw new Error("Camera ref is null!"); // Error handling could be more graceful
}
console.log('calling stopRecording()...')
await camera.current.stopRecording()
console.log('called stopRecording()!')
console.log("calling stopRecording()...");
await camera.current.stopRecording();
console.log("called stopRecording()!");
} catch (e) {
console.error('failed to stop recording!', e)
console.error("failed to stop recording!", e);
}
}, [camera])
}, [camera]);
const startRecording = useCallback(() => {
try {
if (camera.current === null) {
throw new Error('Camera ref is null!') // Error handling could be more graceful
}
console.log('calling startRecording()...')
camera.current.startRecording({
onRecordingError: (error) => {
console.error('Recording failed!', error)
onStoppedRecording()
},
onRecordingFinished: async (video) => {
onMediaCaptured(video, 'video')
const path = video.path
await CameraRoll.saveAsset(`file://${path}`, {
type: 'video',
})
onStoppedRecording()
},
})
console.log('called startRecording()!')
isRecording.current = true
setRecordingState(true)
const startRecording = useCallback(() => {
try {
if (camera.current === null) {
throw new Error("Camera ref is null!"); // Error handling could be more graceful
}
console.log("calling startRecording()...");
camera.current.startRecording({
onRecordingError: (error) => {
console.error("Recording failed!", error);
onStoppedRecording();
},
onRecordingFinished: async (video) => {
onMediaCaptured(video, "video");
const path = video.path;
await CameraRoll.saveAsset(`file://${path}`, {
type: "video",
});
onStoppedRecording();
},
});
console.log("called startRecording()!");
isRecording.current = true;
setRecordingState(true);
} catch (e) {
console.error('failed to start recording!', e, 'camera')
}
}, [camera, onMediaCaptured, onStoppedRecording])
console.error("failed to start recording!", e, "camera");
}
}, [camera, onMediaCaptured, onStoppedRecording]);
const handlePress = () => {
if (isRecording.current) {
const handlePress = () => {
if (isRecording.current) {
stopRecording();
} else {
} else {
startRecording();
}
};
}
};
return (
<TouchableOpacity
@@ -70,34 +91,38 @@ const handlePress = () => {
onPress={handlePress}
disabled={!enabled}
>
<View style={isRecording.current ? styles.recordingSquare : styles.innerCircle} />
<View
style={
isRecording.current ? styles.recordingSquare : styles.innerCircle
}
/>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
captureButton: {
height: 80,
width: 80,
borderRadius: 40,
borderWidth: 3,
borderColor: 'white',
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
height: 80,
width: 80,
borderRadius: 40,
borderWidth: 3,
borderColor: "white",
backgroundColor: "transparent",
justifyContent: "center",
alignItems: "center",
},
innerCircle: {
height: 70,
width: 70,
borderRadius: 35,
backgroundColor: '#FF3B30',
height: 70,
width: 70,
borderRadius: 35,
backgroundColor: "#FF3B30",
},
recordingSquare: {
height: 40,
width: 40,
borderRadius: 10,
backgroundColor: '#FF3B30',
height: 40,
width: 40,
borderRadius: 10,
backgroundColor: "#FF3B30",
},
});
export default RecordingButton;
export default RecordingButton;