Feat/microfone permission

messages/en.json

@@ -250,6 +250,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

@@ -98,7 +98,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/screens/Observation/index.tsx

@@ -14,7 +14,7 @@ import {InsetMapView} from './InsetMapView';
 import {ButtonFields} from './Buttons';
 import {NativeNavigationComponent} from '../../sharedTypes/navigation';
 import {ObservationHeaderRight} from './ObservationHeaderRight';
-import {ThumbnailScrollView} from '../../sharedComponents/ThumbnailScrollView.tsx';
+import {MediaScrollView} from '../../sharedComponents/Thumbnail/MediaScrollView';
 import {useAttachmentUrlQueries} from '../../hooks/server/media.ts';
 
 const m = defineMessages({
@@ -94,7 +94,7 @@ export const ObservationScreen: NativeNavigationComponent<'Observation'> = ({
             </View>
           ) : null}
           {attachmentUrls.length > 0 && (
-            <ThumbnailScrollView
+            <MediaScrollView
               photos={attachmentUrls.map(attachmentData => {
                 return !attachmentData
                   ? undefined
@@ -103,6 +103,7 @@ export const ObservationScreen: NativeNavigationComponent<'Observation'> = ({
                       id: attachmentData.driveDiscoveryId,
                     };
               })}
+              audioRecordings={[]}
             />
           )}
         </View>

src/frontend/screens/ObservationEdit/ThumbnailAndActionTab.tsx

@@ -0,0 +1,120 @@
+import React, {FC, useCallback} from 'react';
+import {View} from 'react-native';
+import {defineMessages, useIntl} from 'react-intl';
+import {MediaScrollView} from '../../sharedComponents/Thumbnail/MediaScrollView';
+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: openAudioPermissionSheet,
+    sheetRef: audioPermissionSheetRef,
+    isOpen: isAudioPermissionSheetOpen,
+    closeSheet: closeAudioPermissionSheet,
+  } = useBottomSheetModal({
+    openOnMount: false,
+  });
+  const [permissionResponse] = Audio.usePermissions({request: false});
+
+  const handleCameraPress = () => {
+    navigation.navigate('AddPhoto');
+  };
+
+  const handleDetailsPress = () => {
+    navigation.navigate('ObservationFields', {question: 1});
+  };
+
+  const handleAudioPress = useCallback(() => {
+    if (permissionResponse?.granted) {
+      navigation.navigate('Home', {screen: 'Map'});
+    } else {
+      openAudioPermissionSheet();
+    }
+  }, [navigation, openAudioPermissionSheet, 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>
+        <MediaScrollView
+          photos={photos}
+          audioRecordings={audioRecordings}
+          observationId={observationId}
+        />
+        <ActionTab items={bottomSheetItems} />
+      </View>
+      <PermissionAudio
+        closeSheet={closeAudioPermissionSheet}
+        isOpen={isAudioPermissionSheetOpen}
+        sheetRef={audioPermissionSheetRef}
+      />
+    </>
+  );
+};

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>
   );