From 1098ba4c7d40e107c339adcee5e0326d829f745f Mon Sep 17 00:00:00 2001 From: Loewy Date: Fri, 9 Feb 2024 13:17:14 -0800 Subject: [PATCH 1/4] move permissions to record --- src/auth/firebase-auth.tsx | 2 +- src/component/video/camera.tsx | 8 ++------ src/lib/alert-messages/index.ts | 10 ++++++++++ src/screens/video-stack/record.tsx | 23 ++++++++++++++++++++--- 4 files changed, 33 insertions(+), 10 deletions(-) create mode 100644 src/lib/alert-messages/index.ts diff --git a/src/auth/firebase-auth.tsx b/src/auth/firebase-auth.tsx index d921761..1c1cb09 100644 --- a/src/auth/firebase-auth.tsx +++ b/src/auth/firebase-auth.tsx @@ -44,7 +44,7 @@ export const createOrSignInUser = async ( } catch (err) { console.log(err); // TODO: #107 -- Correct error handling - Alert.alert(err.message); + Alert.alert("There was an issue.", err.message); } }; diff --git a/src/component/video/camera.tsx b/src/component/video/camera.tsx index 0becc15..ca21bf0 100644 --- a/src/component/video/camera.tsx +++ b/src/component/video/camera.tsx @@ -129,7 +129,7 @@ export default function CameraScreen({ }, [data, uploadManager]); const camera = useRef(null); - const { hasPermission, requestPermission } = useCameraPermission(); + const { hasPermission } = useCameraPermission(); const [isCameraInitialized, setIsCameraInitialized] = useState(false); @@ -161,11 +161,6 @@ export default function CameraScreen({ [uploadManager], ); - if (!hasPermission) { - requestPermission(); - // Error handling in case they refuse to give permission - } - const device = useCameraDevice("back"); const format = useCameraFormat(device, [ { videoResolution: { width: 1920, height: 1080 } }, @@ -184,6 +179,7 @@ export default function CameraScreen({ // Replace with error handling if (device === null) { console.log(device); + // hasPermission redundant here - user should not be able to launch camera without permissions return ( Camera not available. Does user have permissions: {hasPermission} diff --git a/src/lib/alert-messages/index.ts b/src/lib/alert-messages/index.ts new file mode 100644 index 0000000..0242125 --- /dev/null +++ b/src/lib/alert-messages/index.ts @@ -0,0 +1,10 @@ +export const cameraPermissionsDenied = { + android: { + title: "In order to use the camera, you need to grant app permissions.", + message: "Please go to Railbird > App Info and grant permissions. ", + }, + ios: { + title: "In order to use the camera, you need to grant app permissions.", + message: "Please go to Settings > Railbird > Camera and grant permissions.", + }, +}; diff --git a/src/screens/video-stack/record.tsx b/src/screens/video-stack/record.tsx index 87ea17c..92f9db1 100644 --- a/src/screens/video-stack/record.tsx +++ b/src/screens/video-stack/record.tsx @@ -1,6 +1,8 @@ import React, { useCallback, useState } from "react"; import { + Alert, Keyboard, + Platform, Text, TextInput, TouchableOpacity, @@ -8,6 +10,9 @@ import { View, } from "react-native"; import DropDownPicker from "react-native-dropdown-picker"; +// @ts-ignore +import { useCameraPermission } from "react-native-vision-camera"; +import { cameraPermissionsDenied } from "../../lib/alert-messages"; import { recordStyles as styles } from "./styles"; interface CameraScreenParams { @@ -17,10 +22,14 @@ interface CameraScreenParams { location: string; } -// Record Screen -// Precedes Camera.tsx -// Can be made into Modal when ready export default function RecordScreen({ navigation }): React.JSX.Element { + // Permissions + const { hasPermission, requestPermission } = useCameraPermission(); + + if (!hasPermission) { + requestPermission(); + } + // Game type dropdown const [gameTypeOpen, setGameTypeOpen] = useState(false); const [gameType, setGameType] = useState(null); // This is a dropdown @@ -63,7 +72,15 @@ export default function RecordScreen({ navigation }): React.JSX.Element { // Location const [location, setLocation] = useState(""); + const { android, ios } = cameraPermissionsDenied; + const handleSubmit = () => { + // Next block's alert message are OS specific + if (!hasPermission) { + if (Platform.OS === 'android') return Alert.alert(android.title, android.message); + else return Alert.alert(ios.title, ios.message); + } + // needs to pass info as params or store in a context/state provider const params: CameraScreenParams = { gameType: gameType, From 92e211a21a5eaa91dc5542954fc4383c84e5435d Mon Sep 17 00:00:00 2001 From: Loewy Date: Mon, 12 Feb 2024 10:31:59 -0800 Subject: [PATCH 2/4] fix prettier --- src/screens/video-stack/record.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/screens/video-stack/record.tsx b/src/screens/video-stack/record.tsx index 92f9db1..881660d 100644 --- a/src/screens/video-stack/record.tsx +++ b/src/screens/video-stack/record.tsx @@ -77,8 +77,11 @@ export default function RecordScreen({ navigation }): React.JSX.Element { const handleSubmit = () => { // Next block's alert message are OS specific if (!hasPermission) { - if (Platform.OS === 'android') return Alert.alert(android.title, android.message); - else return Alert.alert(ios.title, ios.message); + if (Platform.OS === "android") { + return Alert.alert(android.title, android.message); + } else { + return Alert.alert(ios.title, ios.message); + } } // needs to pass info as params or store in a context/state provider From d3db06a90c7236d211deb5f0f16452f79481eac0 Mon Sep 17 00:00:00 2001 From: Loewy Date: Mon, 12 Feb 2024 12:51:04 -0800 Subject: [PATCH 3/4] add function to check platform and return alert --- src/lib/alert-messages/constants.ts | 10 ++++++++++ src/lib/alert-messages/index.ts | 24 +++++++++++++++--------- src/screens/video-stack/record.tsx | 13 ++----------- 3 files changed, 27 insertions(+), 20 deletions(-) create mode 100644 src/lib/alert-messages/constants.ts diff --git a/src/lib/alert-messages/constants.ts b/src/lib/alert-messages/constants.ts new file mode 100644 index 0000000..7cca47a --- /dev/null +++ b/src/lib/alert-messages/constants.ts @@ -0,0 +1,10 @@ +export const CAMERA_PERMISSION_DENIED = { + android: { + title: "In order to use the camera, you need to grant app permissions.", + message: "Please go to Railbird > App Info and grant permissions. ", + }, + ios: { + title: "In order to use the camera, you need to grant app permissions.", + message: "Please go to Settings > Railbird > Camera and grant permissions.", + }, +}; diff --git a/src/lib/alert-messages/index.ts b/src/lib/alert-messages/index.ts index 0242125..3de5bd0 100644 --- a/src/lib/alert-messages/index.ts +++ b/src/lib/alert-messages/index.ts @@ -1,10 +1,16 @@ -export const cameraPermissionsDenied = { - android: { - title: "In order to use the camera, you need to grant app permissions.", - message: "Please go to Railbird > App Info and grant permissions. ", - }, - ios: { - title: "In order to use the camera, you need to grant app permissions.", - message: "Please go to Settings > Railbird > Camera and grant permissions.", - }, +import { Alert, Platform } from "react-native"; +import { CAMERA_PERMISSION_DENIED } from "./constants"; + +const ALERT_TYPE = { + camera: CAMERA_PERMISSION_DENIED, +}; + +export const showAlert = (alertType: string) => { + const alert = ALERT_TYPE[alertType]; + if (!alert) { + console.error("No alert matches this alert type:", alertType); + return; + } + const { title, message } = alert[Platform.OS]; + Alert.alert(title, message); }; diff --git a/src/screens/video-stack/record.tsx b/src/screens/video-stack/record.tsx index 881660d..9235498 100644 --- a/src/screens/video-stack/record.tsx +++ b/src/screens/video-stack/record.tsx @@ -1,8 +1,6 @@ import React, { useCallback, useState } from "react"; import { - Alert, Keyboard, - Platform, Text, TextInput, TouchableOpacity, @@ -12,7 +10,7 @@ import { import DropDownPicker from "react-native-dropdown-picker"; // @ts-ignore import { useCameraPermission } from "react-native-vision-camera"; -import { cameraPermissionsDenied } from "../../lib/alert-messages"; +import { showAlert } from "../../lib/alert-messages"; import { recordStyles as styles } from "./styles"; interface CameraScreenParams { @@ -72,16 +70,9 @@ export default function RecordScreen({ navigation }): React.JSX.Element { // Location const [location, setLocation] = useState(""); - const { android, ios } = cameraPermissionsDenied; - const handleSubmit = () => { - // Next block's alert message are OS specific if (!hasPermission) { - if (Platform.OS === "android") { - return Alert.alert(android.title, android.message); - } else { - return Alert.alert(ios.title, ios.message); - } + return showAlert("camera"); } // needs to pass info as params or store in a context/state provider From ddcd9899b34d41caaa832e365464b7db7fba8065 Mon Sep 17 00:00:00 2001 From: Loewy Date: Mon, 12 Feb 2024 13:47:50 -0800 Subject: [PATCH 4/4] add type to consts + remove if block --- src/lib/alert-messages/constants.ts | 13 ++++++++++++- src/lib/alert-messages/index.ts | 4 ---- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/lib/alert-messages/constants.ts b/src/lib/alert-messages/constants.ts index 7cca47a..02e5d94 100644 --- a/src/lib/alert-messages/constants.ts +++ b/src/lib/alert-messages/constants.ts @@ -1,4 +1,15 @@ -export const CAMERA_PERMISSION_DENIED = { +interface PermissionMessage { + android: { + title: string; + message: string; + }; + ios: { + title: string; + message: string; + }; +} + +export const CAMERA_PERMISSION_DENIED: PermissionMessage = { android: { title: "In order to use the camera, you need to grant app permissions.", message: "Please go to Railbird > App Info and grant permissions. ", diff --git a/src/lib/alert-messages/index.ts b/src/lib/alert-messages/index.ts index 3de5bd0..4c76604 100644 --- a/src/lib/alert-messages/index.ts +++ b/src/lib/alert-messages/index.ts @@ -7,10 +7,6 @@ const ALERT_TYPE = { export const showAlert = (alertType: string) => { const alert = ALERT_TYPE[alertType]; - if (!alert) { - console.error("No alert matches this alert type:", alertType); - return; - } const { title, message } = alert[Platform.OS]; Alert.alert(title, message); };