feat: audio recording

app.json

@@ -43,7 +43,8 @@
           "organization": "awana-digital"
         }
       ],
-      ["./expo-config-plugins/removeExpoInputStyles.js"]
+      ["./expo-config-plugins/removeExpoInputStyles.js"],
+      ["./expo-config-plugins/addShareIntents.js"]
     ],
     "android": {
       "versionCode": 1,

expo-config-plugins/addShareIntents.js

@@ -0,0 +1,58 @@
+const {
+  withAndroidManifest,
+  createRunOncePlugin,
+} = require('expo/config-plugins');
+
+/**
+ * @type {import('./types').ManifestQueries}
+ */
+
+const queries = {
+  package: [
+    {
+      $: {
+        'android:name': 'com.whatsapp',
+      },
+    },
+    {
+      $: {
+        'android:name': 'com.google.android.apps.messaging',
+      },
+    },
+  ],
+  intent: [
+    {
+      action: {
+        $: {
+          'android:name': 'android.intent.action.VIEW',
+        },
+      },
+      category: {
+        $: {
+          'android:name': 'android.intent.category.BROWSABLE',
+        },
+      },
+    },
+  ],
+};
+
+/**
+ * @param {import('@expo/config-plugins').ExportedConfig} config
+ */
+const withAndroidManifestService = config => {
+  return withAndroidManifest(config, config => {
+    config.modResults.manifest = {
+      ...config.modResults.manifest,
+      //@ts-ignore
+      queries,
+    };
+
+    return config;
+  });
+};
+
+module.exports = createRunOncePlugin(
+  withAndroidManifestService,
+  'withAndroidManifestService',
+  '1.0.0',
+);

messages/en.json

@@ -25,6 +25,45 @@
     "description": "Title of dialog that shows when cancelling a new observation",
     "message": "Discard observation?"
   },
+  "AudioPlaybackScreen.DeleteAudioRecordingModal.cancelButtonText": {
+    "message": "Cancel"
+  },
+  "AudioPlaybackScreen.DeleteAudioRecordingModal.deleteButtonText": {
+    "message": "Delete"
+  },
+  "AudioPlaybackScreen.DeleteAudioRecordingModal.deleteDescription": {
+    "message": "Your <bold>{audioRecording}</bold> will be permanently deleted. This cannot be undone."
+  },
+  "AudioPlaybackScreen.DeleteAudioRecordingModal.deleteTitle": {
+    "message": "Delete?"
+  },
+  "AudioPlaybackScreen.DeleteAudioRecordingModal.recordAnother": {
+    "message": "Record Another"
+  },
+  "AudioPlaybackScreen.DeleteAudioRecordingModal.returnToEditor": {
+    "message": "Return to Editor"
+  },
+  "AudioPlaybackScreen.DeleteAudioRecordingModal.successDescription": {
+    "message": "Your <bold>{audioRecording}</bold> was added."
+  },
+  "AudioPlaybackScreen.DeleteAudioRecordingModal.successTitle": {
+    "message": "Success!"
+  },
+  "AudioPlaybackScreen.ShareAudioRecording.Options.messages": {
+    "message": "Messages"
+  },
+  "AudioPlaybackScreen.ShareAudioRecording.Options.more": {
+    "message": "More"
+  },
+  "AudioPlaybackScreen.ShareAudioRecording.Options.whatsApp": {
+    "message": "WhatsApp"
+  },
+  "AudioPlaybackScreen.ShareAudioRecording.Share.title": {
+    "message": "Audio recording"
+  },
+  "AudioPlaybackScreen.ShareAudioRecording.title": {
+    "message": "Share via"
+  },
   "Modal.DiscardTrack.description": {
     "message": "Your Track will not be saved. This cannot be undone."
   },

package.json

@@ -51,6 +51,7 @@
     "cheap-ruler": "^3.0.2",
     "eventemitter3": "^5.0.1",
     "expo": "~50.0.8",
+    "expo-av": "^13.10.6",
     "expo-camera": "~14.1.3",
     "expo-crypto": "~12.8.1",
     "expo-dev-client": "~3.3.11",
@@ -98,8 +99,7 @@
     "uint8array-extras": "^0.5.0",
     "utm": "^1.1.1",
     "validate-color": "^2.2.4",
-    "zustand": "^4.4.6",
-    "expo-av": "^13.10.6"
+    "zustand": "^4.4.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/frontend/Navigation/Stack/AppScreens.tsx

@@ -55,6 +55,8 @@ import {SaveTrackScreen} from '../../screens/SaveTrack/SaveTrackScreen';
 import {ObservationFields} from '../../screens/ObservationFields';
 import {LIGHT_GREY} from '../../lib/styles';
 import {LanguageSettings} from '../../screens/Settings/AppSettings/LanguageSettings';
+import {AudioStack} from './AudioStack.tsx';
+import {AudioRecordingContextProvider} from '../../contexts/AudioRecordingContext.tsx';
 import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 
 export const TAB_BAR_HEIGHT = 70;
@@ -255,5 +257,14 @@ export const createDefaultScreenGroup = ({
       component={LanguageSettings}
       options={{headerTitle: intl(LanguageSettings.navTitle)}}
     />
+    <RootStack.Screen
+      name="Audio"
+      options={{headerShown: false}}
+      children={() => (
+        <AudioRecordingContextProvider>
+          <AudioStack />
+        </AudioRecordingContextProvider>
+      )}
+    />
   </RootStack.Group>
 );

src/frontend/Navigation/Stack/AudioStack.tsx

@@ -0,0 +1,48 @@
+import {AudioPrepareRecordingScreen} from '../../screens/Audio/AudioPrepareRecordingScreen.tsx';
+import {useNavigationFromRoot} from '../../hooks/useNavigationWithTypes.ts';
+import NavigationBackButton from '../../images/navigationBackButton.svg';
+import {AudioRecordingScreen} from '../../screens/Audio/AudioRecordingScreen.tsx';
+import {AudioPlaybackScreen} from '../../screens/Audio/AudioPlaybackScreen.tsx';
+import * as React from 'react';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {AudioStackParamList} from '../../sharedTypes/navigation.ts';
+import {AUDIO_BLACK} from '../../lib/styles.ts';
+
+const Stack = createNativeStackNavigator<AudioStackParamList>();
+
+export const AudioStack = () => {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="PrepareRecording"
+        component={AudioPrepareRecordingScreen}
+        options={{
+          headerStyle: {backgroundColor: AUDIO_BLACK},
+          headerTransparent: true,
+          headerTitle: '',
+        }}
+      />
+      <Stack.Screen
+        name="Recording"
+        component={AudioRecordingScreen}
+        options={{
+          headerLeft: () => <></>,
+          headerStyle: {backgroundColor: 'transparent'},
+          headerTransparent: true,
+          headerTitle: '',
+          animation: 'none',
+        }}
+      />
+      <Stack.Screen
+        name="Playback"
+        component={AudioPlaybackScreen}
+        options={{
+          headerStyle: {backgroundColor: 'transparent'},
+          headerTransparent: true,
+          headerTitle: '',
+          animation: 'none',
+        }}
+      />
+    </Stack.Navigator>
+  );
+};

src/frontend/contexts/AudioRecordingContext.tsx

@@ -0,0 +1,90 @@
+import {Recording, RecordingStatus} from 'expo-av/build/Audio/Recording';
+import React, {createContext, useContext, useState} from 'react';
+import {RecordingOptionsPresets} from 'expo-av/src/Audio/RecordingConstants.ts';
+
+interface AudioRecordingContext {
+  startRecording: () => Promise<void>;
+  stopRecording: () => Promise<void>;
+  hasStarted: boolean;
+  hasFinished: boolean;
+  timeElapsed: number;
+  // Available only after hasStarted === true
+  recording: Recording | null;
+}
+
+const AudioRecordingContext = createContext<AudioRecordingContext | null>(null);
+
+const AudioRecordingContextProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [timeElapsed, setTimeElapsed] = useState(0);
+  const [hasStarted, setStarted] = useState(false);
+  const [hasFinished, setFinished] = useState(false);
+
+  const [recording, setRecording] = useState<Recording | null>(null);
+
+  const recordingUpdateHandler = (status: RecordingStatus) => {
+    setTimeElapsed(status.durationMillis);
+    if (status.isDoneRecording) {
+      setFinished(true);
+      setStarted(false);
+    }
+  };
+
+  const startRecording = async () => {
+    if (hasStarted) {
+      console.warn(
+        'startRecording from AudioRecordingContext called while recording is already in progress',
+      );
+      return;
+    }
+    const {recording: newRecording, status} = await Recording.createAsync(
+      RecordingOptionsPresets.HIGH_QUALITY,
+    );
+    newRecording.setOnRecordingStatusUpdate(recordingUpdateHandler);
+    setStarted(status.isRecording);
+    setFinished(false);
+    setTimeElapsed(0);
+    setRecording(newRecording);
+  };
+
+  const stopRecording = async () => {
+    if (!hasStarted) {
+      console.warn(
+        'stopRecording from AudioRecordingContext called while recording has not been started',
+      );
+      return;
+    }
+    await recording!.stopAndUnloadAsync();
+    setFinished(true);
+    setStarted(false);
+  };
+
+  return (
+    <AudioRecordingContext.Provider
+      value={{
+        startRecording,
+        stopRecording,
+        timeElapsed,
+        hasStarted,
+        hasFinished,
+        recording,
+      }}>
+      {children}
+    </AudioRecordingContext.Provider>
+  );
+};
+
+const useAudioRecordingContext = () => {
+  const context = useContext(AudioRecordingContext);
+  if (!context) {
+    throw new Error(
+      'useAudioRecordingContext must be used within a AudioRecordingContextProvider',
+    );
+  }
+  return context;
+};
+
+export {AudioRecordingContextProvider, useAudioRecordingContext};

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

@@ -10,6 +10,7 @@ import {ClientGeneratedObservation, Position} from '../../../sharedTypes';
 import {Observation, Preset} from '@mapeo/schema';
 import {usePresetsQuery} from '../../server/presets';
 import {matchPreset} from '../../../lib/utils';
+import {AudioRecording} from '../../../sharedTypes/audio.ts';
 
 type newDraftProps = {observation: Observation; preset: Preset};
 const emptyObservation: ClientGeneratedObservation = {
@@ -23,12 +24,14 @@ const emptyObservation: ClientGeneratedObservation = {
 
 export type DraftObservationSlice = {
   photos: Photo[];
-  audioRecordings: [];
+  audioRecordings: AudioRecording[];
   value: Observation | null | ClientGeneratedObservation;
   observationId?: string;
   actions: {
     addPhotoPlaceholder: (draftPhotoId: string) => void;
     replacePhotoPlaceholderWithPhoto: (photo: DraftPhoto) => void;
+    addAudioRecording: (audioRecording: AudioRecording) => void;
+    removeAudioRecording: (uri: string) => void;
     // Clear the current draft
     clearDraft: () => void;
     // Create a new draft observation
@@ -56,6 +59,14 @@ const draftObservationSlice: StateCreator<DraftObservationSlice> = (
       set({photos: [...get().photos, {draftPhotoId, capturing: true}]}),
     replacePhotoPlaceholderWithPhoto: draftPhoto =>
       replaceDraftPhotos(set, get, draftPhoto),
+    addAudioRecording: recording =>
+      set({
+        audioRecordings: [...get().audioRecordings, recording],
+      }),
+    removeAudioRecording: uri =>
+      set({
+        audioRecordings: get().audioRecordings.filter(rec => rec.uri !== uri),
+      }),
     clearDraft: () => {
       set({
         photos: [],

src/frontend/hooks/server/media.ts

@@ -6,13 +6,14 @@ import {URL} from 'react-native-url-polyfill';
 
 import {useActiveProject} from '../../contexts/ActiveProjectContext';
 import {DraftPhoto} from '../../contexts/PhotoPromiseContext/types';
+import {AudioRecording} from '../../sharedTypes/audio.ts';
 
 type SavablePhoto = SetRequired<
   Pick<DraftPhoto, 'originalUri' | 'previewUri' | 'thumbnailUri'>,
   'originalUri'
 >;
 
-export function useCreateBlobMutation(opts: {retry?: number} = {}) {
+export function useCreatePhotoBlobMutation(opts: {retry?: number} = {}) {
   const project = useActiveProject();
 
   return useMutation({
@@ -34,6 +35,24 @@ export function useCreateBlobMutation(opts: {retry?: number} = {}) {
   });
 }
 
+export function useCreateAudioRecordingBlobMutation(
+  opts: {retry?: number} = {},
+) {
+  const project = useActiveProject();
+
+  return useMutation({
+    retry: opts.retry,
+    mutationFn: async (recording: AudioRecording) => {
+      return project.$blobs.create(
+        {
+          original: new URL(recording.uri).pathname,
+        },
+        {mimeType: 'audio/mp4'},
+      );
+    },
+  });
+}
+
 export function useAttachmentUrlQueries(
   attachments: Observation['attachments'],
   variant: BlobVariant<