Feat/microfone permission

messages/en.json

@@ -212,6 +212,26 @@
   "screens.AppPasscode.TurnOffPasscode.usePasscode": {
     "message": "Use App Passcode"
   },
+  "screens.AudioPermission.Button.allow": {
+    "description": "Screen button text for allow the audio permission",
+    "message": "Allow"
+  },
+  "screens.AudioPermission.Button.goToSettings": {
+    "description": "Screen button text for navigate user to settings when audio permission was denied",
+    "message": "Go to Settings"
+  },
+  "screens.AudioPermission.Button.notNow": {
+    "description": "Screen button text for not allowed audio permission",
+    "message": "Not Now"
+  },
+  "screens.AudioPermission.description": {
+    "description": "Screen description for audio permission screen",
+    "message": "To record audio while using the app and in the background CoMapeo needs to access your microphone."
+  },
+  "screens.AudioPermission.title": {
+    "description": "Screen title for audio permission screen",
+    "message": "Recording Audio with CoMapeo"
+  },
   "screens.CameraScreen.goToSettings": {
     "message": "Go to Settings"
   },

package.json

@@ -97,7 +97,8 @@
     "uint8array-extras": "^0.5.0",
     "utm": "^1.1.1",
     "validate-color": "^2.2.4",
-    "zustand": "^4.4.6"
+    "zustand": "^4.4.6",
+    "expo-av": "~13.10.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/frontend/hooks/persistedState/usePersistedDraftObservation/index.ts

@@ -23,6 +23,7 @@ const emptyObservation: ClientGeneratedObservation = {
 
 export type DraftObservationSlice = {
   photos: Photo[];
+  audioRecordings: [];
   value: Observation | null | ClientGeneratedObservation;
   observationId?: string;
   actions: {
@@ -47,6 +48,7 @@ const draftObservationSlice: StateCreator<DraftObservationSlice> = (
   get,
 ) => ({
   photos: [],
+  audioRecordings: [],
   value: null,
   actions: {
     deletePhoto: id => deletePhoto(set, get, id),
@@ -57,6 +59,7 @@ const draftObservationSlice: StateCreator<DraftObservationSlice> = (
     clearDraft: () => {
       set({
         photos: [],
+        audioRecordings: [],
         value: null,
         observationId: undefined,
       });

src/frontend/lib/styles.ts

@@ -16,6 +16,7 @@ export const DARK_MANGO = '#ed6109';
 export const MANGO = '#ff9933';
 export const MEDIUM_GREY = '#666666';
 export const LIGHT_GREY = '#ceced6';
+export const NEW_LIGHT_GREY = '#EDEDED';
 export const CHARCOAL = '#1F1F1F';
 export const GREEN = '#7AFA4C';
 export const RED = '#BC271A';

src/frontend/screens/Observation/Buttons.tsx

@@ -9,10 +9,10 @@ import Share from 'react-native-share';
 import {useAttachmentUrlQueries} from '../../hooks/server/media.ts';
 import {useObservationWithPreset} from '../../hooks/useObservationWithPreset.ts';
 import {formatCoords} from '../../lib/utils.ts';
-import {UIActivityIndicator} from 'react-native-indicators';
 import {convertUrlToBase64} from '../../utils/base64.ts';
 import {useState} from 'react';
 import {usePersistedSettings} from '../../hooks/persistedState/usePersistedSettings.ts';
+import {UIActivityIndicator} from 'react-native-indicators';
 
 const m = defineMessages({
   delete: {

src/frontend/screens/Observation/index.tsx

@@ -14,8 +14,9 @@ import {InsetMapView} from './InsetMapView';
 import {ButtonFields} from './Buttons';
 import {NativeNavigationComponent} from '../../sharedTypes/navigation';
 import {ObservationHeaderRight} from './ObservationHeaderRight';
-import {ThumbnailScrollView} from '../../sharedComponents/ThumbnailScrollView.tsx';
+import {ThumbnailScrollView} from '../../sharedComponents/Thumbnail';
 import {useAttachmentUrlQueries} from '../../hooks/server/media.ts';
+import {ThumbnailScrollView} from '../../sharedComponents/Thumbnail';
 
 const m = defineMessages({
   deleteTitle: {
@@ -103,6 +104,7 @@ export const ObservationScreen: NativeNavigationComponent<'Observation'> = ({
                       id: attachmentData.driveDiscoveryId,
                     };
               })}
+              audioRecordings={[]}
             />
           )}
         </View>

src/frontend/screens/ObservationEdit/ThumbnailAndActionTab.tsx

@@ -0,0 +1,115 @@
+import React, {FC, useCallback} from 'react';
+import {View} from 'react-native';
+import {defineMessages, useIntl} from 'react-intl';
+import {ThumbnailScrollView} from '../../sharedComponents/Thumbnail';
+import {ActionTab} from '../../sharedComponents/ActionTab';
+import PhotoIcon from '../../images/observationEdit/Photo.svg';
+import AudioIcon from '../../images/observationEdit/Audio.svg';
+import DetailsIcon from '../../images/observationEdit/Details.svg';
+import {usePersistedDraftObservation} from '../../hooks/persistedState/usePersistedDraftObservation';
+import {useDraftObservation} from '../../hooks/useDraftObservation';
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import {AppStackParamsList} from '../../sharedTypes/navigation';
+import {useBottomSheetModal} from '../../sharedComponents/BottomSheetModal';
+import {PermissionAudio} from '../../sharedComponents/PermissionAudio';
+import {Audio} from 'expo-av';
+
+const m = defineMessages({
+  audioButton: {
+    id: 'screens.ObservationEdit.ObservationEditView.audioButton',
+    defaultMessage: 'Audio',
+    description: 'Button label for adding audio',
+  },
+  photoButton: {
+    id: 'screens.ObservationEdit.ObservationEditView.photoButton',
+    defaultMessage: 'Photo',
+    description: 'Button label for adding photo',
+  },
+  detailsButton: {
+    id: 'screens.ObservationEdit.ObservationEditView.detailsButton',
+    defaultMessage: 'Details',
+    description: 'Button label to add details',
+  },
+});
+
+interface ThumbnailAndActionTab {
+  navigation: NativeStackNavigationProp<
+    AppStackParamsList,
+    'ObservationEdit',
+    undefined
+  >;
+}
+
+export const ThumbnailAndActionTab: FC<ThumbnailAndActionTab> = ({
+  navigation,
+}) => {
+  const {formatMessage: t} = useIntl();
+  const {usePreset} = useDraftObservation();
+  const preset = usePreset();
+  const {photos, audioRecordings, observationId} = usePersistedDraftObservation(
+    store => store,
+  );
+  const {openSheet, sheetRef, isOpen, closeSheet} = useBottomSheetModal({
+    openOnMount: false,
+  });
+  const [permissionResponse] = Audio.usePermissions({request: false});
+
+  const handleCameraPress = useCallback(() => {
+    navigation.navigate('AddPhoto');
+  }, [navigation]);
+
+  const handleDetailsPress = useCallback(() => {
+    navigation.navigate('ObservationFields', {question: 1});
+  }, [navigation]);
+
+  const handleAudioPress = useCallback(() => {
+    if (permissionResponse?.granted) {
+      return navigation.navigate('Home', {screen: 'Map'});
+    } else {
+      openSheet();
+    }
+  }, [navigation, openSheet, permissionResponse?.granted]);
+
+  const bottomSheetItems = [
+    {
+      icon: <PhotoIcon width={30} height={30} />,
+      label: t(m.photoButton),
+      onPress: handleCameraPress,
+    },
+  ];
+
+  if (process.env.EXPO_PUBLIC_FEATURE_AUDIO) {
+    bottomSheetItems.unshift({
+      icon: <AudioIcon width={30} height={30} />,
+      label: t(m.audioButton),
+      onPress: handleAudioPress,
+    });
+  }
+
+  if (preset?.fieldIds.length) {
+    // Only show the option to add details if preset fields are defined.
+    bottomSheetItems.push({
+      icon: <DetailsIcon width={30} height={30} />,
+      label: t(m.detailsButton),
+      onPress: handleDetailsPress,
+    });
+  }
+
+  return (
+    <>
+      <View>
+        <ThumbnailScrollView
+          photos={photos}
+          audioRecordings={audioRecordings}
+          observationId={observationId}
+        />
+        <ActionTab items={bottomSheetItems} />
+      </View>
+      <PermissionAudio
+        closeSheet={closeSheet}
+        isOpen={isOpen}
+        sheetRef={sheetRef}
+      />
+    </>
+  );
+};

src/frontend/screens/ObservationEdit/index.tsx

@@ -1,20 +1,14 @@
-import React, {useCallback} from 'react';
-import {MessageDescriptor, defineMessages, useIntl} from 'react-intl';
-
+import React from 'react';
+import {MessageDescriptor, defineMessages} from 'react-intl';
 import {NativeNavigationComponent} from '../../sharedTypes/navigation';
 import {usePersistedDraftObservation} from '../../hooks/persistedState/usePersistedDraftObservation';
 import {View, ScrollView, StyleSheet} from 'react-native';
 import {DescriptionField} from './DescriptionField';
-import {ThumbnailScrollView} from '../../sharedComponents/ThumbnailScrollView';
 import {ErrorBottomSheet} from '../../sharedComponents/ErrorBottomSheet';
 import {SaveButton} from './SaveButton';
 import {PresetAndLocationHeader} from './PresetAndLocationHeader';
 import {WHITE} from '../../lib/styles';
-import Photo from '../../images/observationEdit/Photo.svg';
-import Audio from '../../images/observationEdit/Audio.svg';
-import Details from '../../images/observationEdit/Details.svg';
-import {ActionTab} from '../../sharedComponents/ActionTab';
-import {useDraftObservation} from '../../hooks/useDraftObservation';
+import {ThumbnailAndActionTab} from './ThumbnailAndActionTab';
 
 const m = defineMessages({
   editTitle: {
@@ -27,35 +21,14 @@ const m = defineMessages({
     defaultMessage: 'New Observation',
     description: 'screen title for new observation screen',
   },
-  audioButton: {
-    id: 'screens.ObservationEdit.ObservationEditView.audioButton',
-    defaultMessage: 'Audio',
-    description: 'Button label for adding audio',
-  },
-  photoButton: {
-    id: 'screens.ObservationEdit.ObservationEditView.photoButton',
-    defaultMessage: 'Photo',
-    description: 'Button label for adding photo',
-  },
-  detailsButton: {
-    id: 'screens.ObservationEdit.ObservationEditView.detailsButton',
-    defaultMessage: 'Details',
-    description: 'Button label to add details',
-  },
 });
 
 export const ObservationEdit: NativeNavigationComponent<'ObservationEdit'> & {
   editTitle: MessageDescriptor;
 } = ({navigation}) => {
   const [error, setError] = React.useState<Error | null>(null);
-  const observationId = usePersistedDraftObservation(
-    store => store.observationId,
-  );
-  const {usePreset} = useDraftObservation();
-  const preset = usePreset();
+  const {observationId} = usePersistedDraftObservation(store => store);
   const isNew = !observationId;
-  const {formatMessage: t} = useIntl();
-  const photos = usePersistedDraftObservation(store => store.photos);
 
   React.useEffect(() => {
     navigation.setOptions({
@@ -65,47 +38,13 @@ export const ObservationEdit: NativeNavigationComponent<'ObservationEdit'> & {
     });
   }, [navigation, observationId]);
 
-  const handleCameraPress = useCallback(() => {
-    navigation.navigate('AddPhoto');
-  }, [navigation]);
-
-  const handleDetailsPress = useCallback(() => {
-    navigation.navigate('ObservationFields', {question: 1});
-  }, [navigation]);
-
-  const bottomSheetItems = [
-    {
-      icon: <Photo width={30} height={30} />,
-      label: t(m.photoButton),
-      onPress: handleCameraPress,
-    },
-  ];
-
-  if (process.env.EXPO_PUBLIC_FEATURE_AUDIO) {
-    bottomSheetItems.unshift({
-      icon: <Audio width={30} height={30} />,
-      label: t(m.audioButton),
-      onPress: () => {},
-    });
-  }
-
-  if (preset?.fieldIds.length) {
-    // Only show the option to add details if preset fields are defined.
-    bottomSheetItems.push({
-      icon: <Details width={30} height={30} />,
-      label: t(m.detailsButton),
-      onPress: handleDetailsPress,
-    });
-  }
-
   return (
     <View style={styles.container}>
       <ScrollView contentContainerStyle={styles.scrollViewContent}>
         <PresetAndLocationHeader isNew={isNew} />
         <DescriptionField />
-        <ThumbnailScrollView photos={photos} />
       </ScrollView>
-      <ActionTab items={bottomSheetItems} />
+      <ThumbnailAndActionTab navigation={navigation} />
       <ErrorBottomSheet error={error} clearError={() => setError(null)} />
     </View>
   );