diff --git a/component/video/camera.tsx b/component/video/camera.tsx index 45f10a2..86fef1f 100644 --- a/component/video/camera.tsx +++ b/component/video/camera.tsx @@ -9,6 +9,7 @@ import { VideoFile, CameraRuntimeError, Orientation, + // @ts-ignore } from "react-native-vision-camera"; import { RecordingButton } from "./capture-button"; import { useIsForeground } from "./is-foreground"; diff --git a/component/video/capture-button.tsx b/component/video/capture-button.tsx index 35aaa4c..331f708 100644 --- a/component/video/capture-button.tsx +++ b/component/video/capture-button.tsx @@ -1,77 +1,89 @@ -import React, { useCallback, useRef, useState } from 'react'; -import { TouchableOpacity, StyleSheet, View, StyleProp, ViewStyle } 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"; -import { Camera } from 'react-native-vision-camera/lib/typescript/Camera'; -import { VideoFile } from 'react-native-vision-camera/lib/typescript/VideoFile'; +// @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; - camera: React.RefObject; - // eslint-disable-next-line no-unused-vars - onMediaCaptured: (media: VideoFile, mediaType: string) => void; - enabled: boolean; + style: StyleProp; + camera: React.RefObject; + // eslint-disable-next-line no-unused-vars + onMediaCaptured: (media: VideoFile, mediaType: string) => void; + enabled: boolean; } - -export const RecordingButton: React.FC = ({ style, camera, onMediaCaptured, enabled }) => { - const isRecording = useRef(false) +export const RecordingButton: React.FC = ({ + 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 ( { onPress={handlePress} disabled={!enabled} > - + ); }; 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; \ No newline at end of file +export default RecordingButton; diff --git a/package.json b/package.json index 837fc48..caebbba 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,8 @@ "start": "cp .env.development .env && expo start", "android": "expo run:android", "ios": "expo run:ios", - "run:android": "expo run:android", - "run:ios": "expo run:ios", + "run:android": "expo start --android", + "run:ios": "expo start --android", "web": "expo start --web", "lint": "eslint . --ext .js,.ts,.tsx", "lint:fix": "eslint . --ext .ts,.tsx --fix", diff --git a/tsconfig.json b/tsconfig.json index cc0aa3f..937557b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,32 +1,5 @@ { - "compilerOptions": { - "allowJs": false, - "allowUnreachableCode": false, - "allowUnusedLabels": false, - "esModuleInterop": true, - "forceConsistentCasingInFileNames": true, - "jsx": "react-native", - "lib": ["esnext"], - "module": "esnext", - "moduleResolution": "node", - "noFallthroughCasesInSwitch": true, - "noImplicitReturns": true, - "noStrictGenericChecks": false, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noUncheckedIndexedAccess": true, - "resolveJsonModule": true, - "skipLibCheck": true, - "strict": true, - "target": "esnext", - "outDir": "lib", - "paths": { - "react-native-vision-camera": [ - "./react-native-vision-camera/package/src/index" - ] - } - }, - "include": ["react-native-vision-camera/package/src", "."], - "exclude": ["node_modules"], - "extends": "./react-native-vision-camera/package/tsconfig" + "include": ["."], + "exclude": ["node_modules", "./react-native-vision-camera/package"], + "extends": ["expo/tsconfig.base"] }