Lint/tsc fixes
This commit is contained in:
parent
2aa9b4b2d1
commit
06f1aad38e
@ -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";
|
||||
|
||||
@ -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<ViewStyle>;
|
||||
camera: React.RefObject<Camera>;
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
onMediaCaptured: (media: VideoFile, mediaType: string) => void;
|
||||
enabled: boolean;
|
||||
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: React.FC<RecordingButtonProps> = ({ 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
|
||||
@ -79,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;
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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"]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user