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

Lint/tsc fixes

Browse Source
This commit is contained in:
Ivan Malison 2024-02-01 00:58:23 -07:00
parent 2aa9b4b2d1
commit 06f1aad38e
4 changed files with 93 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
component/video/camera.tsx
View File

@ -9,6 +9,7 @@ import {
VideoFile, VideoFile,
CameraRuntimeError, CameraRuntimeError,
Orientation, Orientation,
// @ts-ignore
} from "react-native-vision-camera"; } from "react-native-vision-camera";
import { RecordingButton } from "./capture-button"; import { RecordingButton } from "./capture-button";
import { useIsForeground } from "./is-foreground"; import { useIsForeground } from "./is-foreground";

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

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

4
package.json
View File

@ -6,8 +6,8 @@
"start": "cp .env.development .env && expo start", "start": "cp .env.development .env && expo start",
"android": "expo run:android", "android": "expo run:android",
"ios": "expo run:ios", "ios": "expo run:ios",
"run:android": "expo run:android", "run:android": "expo start --android",
"run:ios": "expo run:ios", "run:ios": "expo start --android",
"web": "expo start --web", "web": "expo start --web",
"lint": "eslint . --ext .js,.ts,.tsx", "lint": "eslint . --ext .js,.ts,.tsx",
"lint:fix": "eslint . --ext .ts,.tsx --fix", "lint:fix": "eslint . --ext .ts,.tsx --fix",

33
tsconfig.json
View File

@ -1,32 +1,5 @@
{ {
"compilerOptions": { "include": ["."],
"allowJs": false, "exclude": ["node_modules", "./react-native-vision-camera/package"],
"allowUnreachableCode": false, "extends": ["expo/tsconfig.base"]
"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"
} }