railbird-gql/component/video/capture-button.tsx

129 lines
3.1 KiB
TypeScript
Raw Normal View History

2024-02-03 20:30:00 -07:00
import { CameraRoll } from "@react-native-camera-roll/camera-roll";
2024-02-01 00:58:23 -07:00
import React, { useCallback, useRef, useState } from "react";
import {
2024-02-03 20:30:00 -07:00
StyleProp,
2024-02-01 00:58:23 -07:00
StyleSheet,
2024-02-03 20:30:00 -07:00
TouchableOpacity,
2024-02-01 00:58:23 -07:00
View,
ViewStyle,
} from "react-native";
// @ts-ignore
import { Camera } from "react-native-vision-camera/lib/typescript/Camera";
// @ts-ignore
import { VideoFile } from "react-native-vision-camera/lib/typescript/VideoFile";
2024-01-30 18:05:43 -07:00
interface RecordingButtonProps {
2024-02-01 00:58:23 -07:00
style: StyleProp<ViewStyle>;
camera: React.RefObject<Camera>;
// eslint-disable-next-line no-unused-vars
onMediaCaptured: (media: VideoFile, mediaType: string) => void;
enabled: boolean;
2024-01-30 18:05:43 -07:00
}
2024-02-01 00:58:23 -07:00
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(() => {
2024-02-01 00:58:23 -07:00
isRecording.current = false;
setRecordingState(false);
console.log("stopped recording video!");
}, []);
const stopRecording = useCallback(async () => {
try {
if (camera.current === null) {
2024-02-01 00:58:23 -07:00
throw new Error("Camera ref is null!"); // Error handling could be more graceful
}
2024-02-01 00:58:23 -07:00
console.log("calling stopRecording()...");
await camera.current.stopRecording();
console.log("called stopRecording()!");
} catch (e) {
2024-02-01 00:58:23 -07:00
console.error("failed to stop recording!", e);
}
2024-02-01 00:58:23 -07:00
}, [camera]);
2024-02-01 00:58:23 -07:00
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) {
2024-02-01 00:58:23 -07:00
console.error("failed to start recording!", e, "camera");
}
}, [camera, onMediaCaptured, onStoppedRecording]);
2024-02-01 00:58:23 -07:00
const handlePress = () => {
if (isRecording.current) {
stopRecording();
2024-02-01 00:58:23 -07:00
} else {
startRecording();
2024-02-01 00:58:23 -07:00
}
};
return (
<TouchableOpacity
style={[styles.captureButton, style]}
onPress={handlePress}
disabled={!enabled}
>
2024-02-01 00:58:23 -07:00
<View
style={
isRecording.current ? styles.recordingSquare : styles.innerCircle
}
/>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
captureButton: {
2024-02-01 00:58:23 -07:00
height: 80,
width: 80,
borderRadius: 40,
borderWidth: 3,
borderColor: "white",
backgroundColor: "transparent",
justifyContent: "center",
alignItems: "center",
},
innerCircle: {
2024-02-01 00:58:23 -07:00
height: 70,
width: 70,
borderRadius: 35,
backgroundColor: "#FF3B30",
},
recordingSquare: {
2024-02-01 00:58:23 -07:00
height: 40,
width: 40,
borderRadius: 10,
backgroundColor: "#FF3B30",
},
});
2024-02-01 00:58:23 -07:00
export default RecordingButton;