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,
CameraRuntimeError,
Orientation,
// @ts-ignore
} from "react-native-vision-camera";
import { RecordingButton } from "./capture-button";
import { useIsForeground } from "./is-foreground";

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

@ -1,8 +1,16 @@
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>;
@ -12,66 +20,70 @@ interface RecordingButtonProps {
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(() => {
const startRecording = useCallback(() => {
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 startRecording()...')
console.log("calling startRecording()...");
camera.current.startRecording({
onRecordingError: (error) => {
console.error('Recording failed!', error)
onStoppedRecording()
console.error("Recording failed!", error);
onStoppedRecording();
},
onRecordingFinished: async (video) => {
onMediaCaptured(video, 'video')
const path = video.path
onMediaCaptured(video, "video");
const path = video.path;
await CameraRoll.saveAsset(`file://${path}`, {
type: 'video',
})
onStoppedRecording()
type: "video",
});
onStoppedRecording();
},
})
console.log('called startRecording()!')
isRecording.current = true
setRecordingState(true)
});
console.log("called startRecording()!");
isRecording.current = true;
setRecordingState(true);
} 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) {
stopRecording();
} else {
startRecording();
}
};
};
return (
<TouchableOpacity
@ -79,7 +91,11 @@ const handlePress = () => {
onPress={handlePress}
disabled={!enabled}
>
<View style={isRecording.current ? styles.recordingSquare : styles.innerCircle} />
<View
style={
isRecording.current ? styles.recordingSquare : styles.innerCircle
}
/>
</TouchableOpacity>
);
};
@ -90,22 +106,22 @@ const styles = StyleSheet.create({
width: 80,
borderRadius: 40,
borderWidth: 3,
borderColor: 'white',
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
borderColor: "white",
backgroundColor: "transparent",
justifyContent: "center",
alignItems: "center",
},
innerCircle: {
height: 70,
width: 70,
borderRadius: 35,
backgroundColor: '#FF3B30',
backgroundColor: "#FF3B30",
},
recordingSquare: {
height: 40,
width: 40,
borderRadius: 10,
backgroundColor: '#FF3B30',
backgroundColor: "#FF3B30",
},
});

4
package.json
View File

@ -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",

33
tsconfig.json
View File

@ -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"]
}