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

add types, rebase

Browse Source
This commit is contained in:
Loewy 2024-01-30 17:05:43 -08:00
parent 63ef099dc3
commit 6b547c4ddd
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
component/video/camera.tsx
View File

@ -7,10 +7,10 @@ import { useIsForeground } from './is-foreground'
export default function CameraScreen(): React.ReactElement { export default function CameraScreen(): React.ReactElement {
const camera = useRef<Camera>(null) const camera = useRef<Camera>(null)
const { hasPermission, requestPermission } = useCameraPermission() const { hasPermission, requestPermission } = useCameraPermission()
const [isCameraInitialized, setIsCameraInitialized] = useState(false) const [isCameraInitialized, setIsCameraInitialized] = useState<boolean>(false)
const isForeground = useIsForeground() const isForeground: boolean = useIsForeground()
const isActive = isForeground const isActive: boolean = isForeground // Should be combined with isFocused hook
const onError = useCallback((error: CameraRuntimeError) => { const onError = useCallback((error: CameraRuntimeError) => {
console.error(error) console.error(error)
@ -37,7 +37,7 @@ export default function CameraScreen(): React.ReactElement {
const format = useCameraFormat(device, [ const format = useCameraFormat(device, [
{ videoResolution: { width: 3048, height: 2160 } }, { videoResolution: { width: 3048, height: 2160 } },
{ fps: 60 } { fps: 60 }
]) ]) // this sets as a target
//Orientation detection //Orientation detection
const [orientation, setOrientation] = useState<Orientation>('portrait'); const [orientation, setOrientation] = useState<Orientation>('portrait');
@ -99,7 +99,7 @@ const styles = StyleSheet.create({
alignSelf: 'center', alignSelf: 'center',
}, },
togglePortrait: { togglePortrait: {
bottom: 110, // Adjust this as needed bottom: 110, // needs refined
}, },
toggleLandscape: { toggleLandscape: {
transform: [{ rotate: '90deg' }], transform: [{ rotate: '90deg' }],
@ -107,7 +107,7 @@ const styles = StyleSheet.create({
left: 50 // needs refined left: 50 // needs refined
}, },
portrait: { portrait: {
bottom: 20 bottom: 20 // needs refined
}, },
landscape: { landscape: {
bottom: '40%', // Should come from SafeAreaProvider bottom: '40%', // Should come from SafeAreaProvider

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

@ -1,10 +1,19 @@
import React, { useCallback, useRef, useState } from 'react'; import React, { useCallback, useRef, useState } from 'react';
import { TouchableOpacity, StyleSheet, View } 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';
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;
}
export const RecordingButton = ({ style, camera, onMediaCaptured, enabled }) => { export const RecordingButton: React.FC<RecordingButtonProps> = ({ style, camera, onMediaCaptured, enabled }) => {
const isRecording = useRef(false) 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);