Actually respect prettier configuration
This commit is contained in:
@@ -1,169 +1,177 @@
|
||||
import React, { useCallback, useRef, useState } from "react";
|
||||
import { Button, StyleSheet, Text, View } from "react-native";
|
||||
import {
|
||||
Camera,
|
||||
useCameraPermission,
|
||||
useCameraDevice,
|
||||
useCameraFormat,
|
||||
PhotoFile,
|
||||
VideoFile,
|
||||
CameraRuntimeError,
|
||||
Orientation,
|
||||
// @ts-ignore
|
||||
Camera,
|
||||
useCameraPermission,
|
||||
useCameraDevice,
|
||||
useCameraFormat,
|
||||
PhotoFile,
|
||||
VideoFile,
|
||||
CameraRuntimeError,
|
||||
Orientation,
|
||||
// @ts-ignore
|
||||
} from "react-native-vision-camera";
|
||||
import { RecordingButton } from "./capture-button";
|
||||
import { useIsForeground } from "./is-foreground";
|
||||
import { useIsFocused } from "@react-navigation/native";
|
||||
|
||||
export default function CameraScreen({ route, navigation }): React.ReactElement {
|
||||
// TODO: #73 Does this need to be passed to Camera component?
|
||||
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
|
||||
const { gameType, tableSize, tags, location } = route.params
|
||||
// LOG for params -- Remove when no longer needed
|
||||
// Note: camelCased value being passed, change on record.tsx if you want a different value format
|
||||
console.log(gameType, tableSize, tags, location)
|
||||
export default function CameraScreen({
|
||||
route,
|
||||
navigation,
|
||||
}): React.ReactElement {
|
||||
// TODO: #73 Does this need to be passed to Camera component?
|
||||
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
|
||||
const { gameType, tableSize, tags, location } = route.params;
|
||||
// LOG for params -- Remove when no longer needed
|
||||
// Note: camelCased value being passed, change on record.tsx if you want a different value format
|
||||
console.log(gameType, tableSize, tags, location);
|
||||
|
||||
const camera = useRef<Camera>(null);
|
||||
const { hasPermission, requestPermission } = useCameraPermission();
|
||||
const [isCameraInitialized, setIsCameraInitialized] =
|
||||
useState<boolean>(false);
|
||||
|
||||
const camera = useRef<Camera>(null);
|
||||
const { hasPermission, requestPermission } = useCameraPermission();
|
||||
const [isCameraInitialized, setIsCameraInitialized] =
|
||||
useState<boolean>(false);
|
||||
const isForeground = useIsForeground();
|
||||
const isFocused = useIsFocused();
|
||||
const isActive = isForeground && isFocused;
|
||||
|
||||
const isForeground = useIsForeground();
|
||||
const isFocused = useIsFocused();
|
||||
const isActive = isForeground && isFocused;
|
||||
const onError = useCallback((error: CameraRuntimeError) => {
|
||||
console.error(error);
|
||||
}, []);
|
||||
|
||||
const onError = useCallback((error: CameraRuntimeError) => {
|
||||
console.error(error);
|
||||
}, []);
|
||||
const onInitialized = useCallback(() => {
|
||||
console.log("Camera initialized!");
|
||||
setIsCameraInitialized(true);
|
||||
}, []);
|
||||
|
||||
const onInitialized = useCallback(() => {
|
||||
console.log("Camera initialized!");
|
||||
setIsCameraInitialized(true);
|
||||
}, []);
|
||||
const onMediaCaptured = useCallback((media: PhotoFile | VideoFile) => {
|
||||
console.log(`Media captured! ${JSON.stringify(media)}`);
|
||||
}, []);
|
||||
|
||||
const onMediaCaptured = useCallback((media: PhotoFile | VideoFile) => {
|
||||
console.log(`Media captured! ${JSON.stringify(media)}`);
|
||||
}, []);
|
||||
const onVideoChunkReady = useCallback((event) => {
|
||||
console.log(`Chunk ready in react-native`, event.nativeEvent);
|
||||
}, []);
|
||||
|
||||
const onVideoChunkReady = useCallback((event) => {
|
||||
console.log(`Chunk ready in react-native`, event.nativeEvent);
|
||||
}, []);
|
||||
if (!hasPermission) {
|
||||
requestPermission();
|
||||
// Error handling in case they refuse to give permission
|
||||
}
|
||||
|
||||
if (!hasPermission) {
|
||||
requestPermission();
|
||||
// Error handling in case they refuse to give permission
|
||||
}
|
||||
const device = useCameraDevice("back");
|
||||
const format = useCameraFormat(device, [
|
||||
{ videoResolution: { width: 3048, height: 2160 } },
|
||||
{ fps: 60 },
|
||||
]); // this sets as a target
|
||||
|
||||
const device = useCameraDevice("back");
|
||||
const format = useCameraFormat(device, [
|
||||
{ videoResolution: { width: 3048, height: 2160 } },
|
||||
{ fps: 60 },
|
||||
]); // this sets as a target
|
||||
//Orientation detection
|
||||
const [orientation, setOrientation] = useState<Orientation>("portrait");
|
||||
|
||||
//Orientation detection
|
||||
const [orientation, setOrientation] = useState<Orientation>("portrait");
|
||||
const toggleOrientation = () => {
|
||||
setOrientation(
|
||||
(currentOrientation) =>
|
||||
currentOrientation === "landscape-left" ? "portrait" : "landscape-left", // Can adjust this and the type to match what we want
|
||||
);
|
||||
};
|
||||
|
||||
const toggleOrientation = () => {
|
||||
setOrientation(
|
||||
(currentOrientation) =>
|
||||
currentOrientation === "landscape-left" ? "portrait" : "landscape-left", // Can adjust this and the type to match what we want
|
||||
);
|
||||
};
|
||||
|
||||
// Replace with error handling
|
||||
if (device === null) {
|
||||
console.log(device);
|
||||
return (
|
||||
<Text>
|
||||
Camera not available. Does user have permissions: {hasPermission}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
return (
|
||||
hasPermission && (
|
||||
<View style={styles.container}>
|
||||
<Camera
|
||||
ref={camera}
|
||||
style={StyleSheet.absoluteFill}
|
||||
device={device}
|
||||
format={format}
|
||||
onInitialized={onInitialized}
|
||||
onError={onError}
|
||||
onVideoChunkReady={onVideoChunkReady}
|
||||
video={true}
|
||||
orientation={orientation} // TODO: #60
|
||||
isActive={isActive}
|
||||
/>
|
||||
<View style={orientation === "portrait" ? styles.goBackPortrait : styles.goBackLandscape}>
|
||||
<Button title="Go back" onPress={() => navigation.goBack()} />
|
||||
</View>
|
||||
<RecordingButton
|
||||
style={[
|
||||
styles.captureButton,
|
||||
orientation === "portrait" ? styles.portrait : styles.landscape,
|
||||
]}
|
||||
camera={camera}
|
||||
onMediaCaptured={onMediaCaptured}
|
||||
enabled={isCameraInitialized}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
styles.button,
|
||||
orientation === "portrait"
|
||||
? styles.togglePortrait
|
||||
: styles.toggleLandscape,
|
||||
]}
|
||||
>
|
||||
<Button
|
||||
title="Toggle Orientation"
|
||||
onPress={toggleOrientation}
|
||||
color="#841584"
|
||||
accessibilityLabel="Toggle camera orientation"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
);
|
||||
// Replace with error handling
|
||||
if (device === null) {
|
||||
console.log(device);
|
||||
return (
|
||||
<Text>
|
||||
Camera not available. Does user have permissions: {hasPermission}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
return (
|
||||
hasPermission && (
|
||||
<View style={styles.container}>
|
||||
<Camera
|
||||
ref={camera}
|
||||
style={StyleSheet.absoluteFill}
|
||||
device={device}
|
||||
format={format}
|
||||
onInitialized={onInitialized}
|
||||
onError={onError}
|
||||
onVideoChunkReady={onVideoChunkReady}
|
||||
video={true}
|
||||
orientation={orientation} // TODO: #60
|
||||
isActive={isActive}
|
||||
/>
|
||||
<View
|
||||
style={
|
||||
orientation === "portrait"
|
||||
? styles.goBackPortrait
|
||||
: styles.goBackLandscape
|
||||
}
|
||||
>
|
||||
<Button title="Go back" onPress={() => navigation.goBack()} />
|
||||
</View>
|
||||
<RecordingButton
|
||||
style={[
|
||||
styles.captureButton,
|
||||
orientation === "portrait" ? styles.portrait : styles.landscape,
|
||||
]}
|
||||
camera={camera}
|
||||
onMediaCaptured={onMediaCaptured}
|
||||
enabled={isCameraInitialized}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
styles.button,
|
||||
orientation === "portrait"
|
||||
? styles.togglePortrait
|
||||
: styles.toggleLandscape,
|
||||
]}
|
||||
>
|
||||
<Button
|
||||
title="Toggle Orientation"
|
||||
onPress={toggleOrientation}
|
||||
color="#841584"
|
||||
accessibilityLabel="Toggle camera orientation"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "black",
|
||||
},
|
||||
captureButton: {
|
||||
position: "absolute",
|
||||
alignSelf: "center",
|
||||
},
|
||||
button: {
|
||||
position: "absolute",
|
||||
alignSelf: "center",
|
||||
},
|
||||
togglePortrait: {
|
||||
bottom: 110, // needs refined
|
||||
},
|
||||
toggleLandscape: {
|
||||
transform: [{ rotate: "90deg" }],
|
||||
bottom: "43%", // Should come from SafeAreaProvider, hardcoded right now, should roughly appear above the button
|
||||
left: 50, // needs refined
|
||||
},
|
||||
portrait: {
|
||||
bottom: 20, // needs refined
|
||||
},
|
||||
landscape: {
|
||||
bottom: "40%", // Should come from SafeAreaProvider
|
||||
left: 20, // needs refined
|
||||
},
|
||||
goBackPortrait: {
|
||||
position: 'absolute',
|
||||
top: 20, // or wherever you want the button to be positioned in portrait
|
||||
left: 20, // or wherever you want the button to be positioned in portrait
|
||||
},
|
||||
goBackLandscape: {
|
||||
position: 'absolute',
|
||||
top: 40,
|
||||
right: 20,
|
||||
transform: [{ rotate: '90deg' }],
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "black",
|
||||
},
|
||||
captureButton: {
|
||||
position: "absolute",
|
||||
alignSelf: "center",
|
||||
},
|
||||
button: {
|
||||
position: "absolute",
|
||||
alignSelf: "center",
|
||||
},
|
||||
togglePortrait: {
|
||||
bottom: 110, // needs refined
|
||||
},
|
||||
toggleLandscape: {
|
||||
transform: [{ rotate: "90deg" }],
|
||||
bottom: "43%", // Should come from SafeAreaProvider, hardcoded right now, should roughly appear above the button
|
||||
left: 50, // needs refined
|
||||
},
|
||||
portrait: {
|
||||
bottom: 20, // needs refined
|
||||
},
|
||||
landscape: {
|
||||
bottom: "40%", // Should come from SafeAreaProvider
|
||||
left: 20, // needs refined
|
||||
},
|
||||
goBackPortrait: {
|
||||
position: "absolute",
|
||||
top: 20, // or wherever you want the button to be positioned in portrait
|
||||
left: 20, // or wherever you want the button to be positioned in portrait
|
||||
},
|
||||
goBackLandscape: {
|
||||
position: "absolute",
|
||||
top: 40,
|
||||
right: 20,
|
||||
transform: [{ rotate: "90deg" }],
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,31 +1,32 @@
|
||||
import { Dimensions, Platform } from 'react-native'
|
||||
import StaticSafeAreaInsets from 'react-native-static-safe-area-insets'
|
||||
import { Dimensions, Platform } from "react-native";
|
||||
import StaticSafeAreaInsets from "react-native-static-safe-area-insets";
|
||||
|
||||
export const CONTENT_SPACING = 15
|
||||
export const CONTENT_SPACING = 15;
|
||||
|
||||
const SAFE_BOTTOM =
|
||||
Platform.select({
|
||||
ios: StaticSafeAreaInsets.safeAreaInsetsBottom,
|
||||
}) ?? 0
|
||||
Platform.select({
|
||||
ios: StaticSafeAreaInsets.safeAreaInsetsBottom,
|
||||
}) ?? 0;
|
||||
|
||||
export const SAFE_AREA_PADDING = {
|
||||
paddingLeft: StaticSafeAreaInsets.safeAreaInsetsLeft + CONTENT_SPACING,
|
||||
paddingTop: StaticSafeAreaInsets.safeAreaInsetsTop + CONTENT_SPACING,
|
||||
paddingRight: StaticSafeAreaInsets.safeAreaInsetsRight + CONTENT_SPACING,
|
||||
paddingBottom: SAFE_BOTTOM + CONTENT_SPACING,
|
||||
}
|
||||
paddingLeft: StaticSafeAreaInsets.safeAreaInsetsLeft + CONTENT_SPACING,
|
||||
paddingTop: StaticSafeAreaInsets.safeAreaInsetsTop + CONTENT_SPACING,
|
||||
paddingRight: StaticSafeAreaInsets.safeAreaInsetsRight + CONTENT_SPACING,
|
||||
paddingBottom: SAFE_BOTTOM + CONTENT_SPACING,
|
||||
};
|
||||
|
||||
// The maximum zoom _factor_ you should be able to zoom in
|
||||
export const MAX_ZOOM_FACTOR = 10
|
||||
export const MAX_ZOOM_FACTOR = 10;
|
||||
|
||||
export const SCREEN_WIDTH = Dimensions.get('window').width
|
||||
export const SCREEN_WIDTH = Dimensions.get("window").width;
|
||||
export const SCREEN_HEIGHT = Platform.select<number>({
|
||||
android: Dimensions.get('screen').height - StaticSafeAreaInsets.safeAreaInsetsBottom,
|
||||
ios: Dimensions.get('window').height,
|
||||
}) as number
|
||||
android:
|
||||
Dimensions.get("screen").height - StaticSafeAreaInsets.safeAreaInsetsBottom,
|
||||
ios: Dimensions.get("window").height,
|
||||
}) as number;
|
||||
|
||||
// Capture Button
|
||||
export const CAPTURE_BUTTON_SIZE = 78
|
||||
export const CAPTURE_BUTTON_SIZE = 78;
|
||||
|
||||
// Control Button like Flash
|
||||
export const CONTROL_BUTTON_SIZE = 40
|
||||
export const CONTROL_BUTTON_SIZE = 40;
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { AppState, AppStateStatus } from 'react-native'
|
||||
import { useState, useEffect } from "react";
|
||||
import { AppState, AppStateStatus } from "react-native";
|
||||
|
||||
export const useIsForeground = (): boolean => {
|
||||
const [isForeground, setIsForeground] = useState(true)
|
||||
const [isForeground, setIsForeground] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const onChange = (state: AppStateStatus): void => {
|
||||
setIsForeground(state === 'active')
|
||||
}
|
||||
const listener = AppState.addEventListener('change', onChange)
|
||||
return () => listener.remove()
|
||||
}, [setIsForeground])
|
||||
useEffect(() => {
|
||||
const onChange = (state: AppStateStatus): void => {
|
||||
setIsForeground(state === "active");
|
||||
};
|
||||
const listener = AppState.addEventListener("change", onChange);
|
||||
return () => listener.remove();
|
||||
}, [setIsForeground]);
|
||||
|
||||
return isForeground
|
||||
}
|
||||
return isForeground;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user