feat: adds creation, saving and playback of audio

messages/en.json

@@ -25,6 +25,21 @@
     "description": "Title of dialog that shows when cancelling a new observation",
     "message": "Discard observation?"
   },
+  "AudioPlaybackScreen.DeleteAudioRecordingModal.successDescription": {
+    "message": "Your <bold>{audioRecording}</bold> was added."
+  },
+  "AudioPlaybackScreen.DeleteAudioRecordingModal.successTitle": {
+    "message": "Success!"
+  },
+  "AudioPlaybackScreen.SuccessAudioRecordingModal.audioRecording": {
+    "message": "Audio Recording"
+  },
+  "AudioPlaybackScreen.SuccessAudioRecordingModal.recordAnother": {
+    "message": "Record Another"
+  },
+  "AudioPlaybackScreen.SuccessAudioRecordingModal.returnToEditor": {
+    "message": "Return to Editor"
+  },
   "Modal.GPSDisable.button": {
     "message": "Enable"
   },
@@ -360,6 +375,27 @@
     "description": "Screen title for audio permission screen",
     "message": "Recording Audio with CoMapeo"
   },
+  "screens.AudioScreen.CreateRecording.RecordingActive.description": {
+    "message": "Less than {length} {length, plural, one {minute} other {minutes}} left"
+  },
+  "screens.AudioScreen.CreateRecording.RecordingDone.deleteBottomSheetDescription": {
+    "message": "Your Audio Recording will be permanently deleted. This cannot be undone."
+  },
+  "screens.AudioScreen.CreateRecording.RecordingDone.deleteBottomSheetPrimaryButtonText": {
+    "message": "Delete"
+  },
+  "screens.AudioScreen.CreateRecording.RecordingDone.deleteBottomSheetSecondaryButtonText": {
+    "message": "Cancel"
+  },
+  "screens.AudioScreen.CreateRecording.RecordingDone.deleteBottomSheetTitle": {
+    "message": "Delete?"
+  },
+  "screens.AudioScreen.CreateRecording.RecordingIdle.description": {
+    "message": "Record up to {length} {length, plural, one {minute} other {minutes}}"
+  },
+  "screens.AudioScreen.Playback.description": {
+    "message": "Total length: {length}"
+  },
   "screens.CameraScreen.goToSettings": {
     "message": "Go to Settings"
   },

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

@@ -6,7 +6,11 @@ import {
   SavedPhoto,
 } from '../../../contexts/PhotoPromiseContext/types';
 import {deletePhoto, replaceDraftPhotos} from './photosMethods';
-import {ClientGeneratedObservation, Position} from '../../../sharedTypes';
+import {
+  ClientGeneratedObservation,
+  Position,
+  AudioRecording,
+} from '../../../sharedTypes';
 import {Observation, Preset} from '@comapeo/schema';
 import {usePresetsQuery} from '../../server/presets';
 import {matchPreset} from '../../../lib/utils';
@@ -23,7 +27,7 @@ const emptyObservation: ClientGeneratedObservation = {
 
 export type DraftObservationSlice = {
   photos: Photo[];
-  audioRecordings: [];
+  audioRecordings: AudioRecording[];
   value: Observation | null | ClientGeneratedObservation;
   observationId?: string;
   actions: {
@@ -53,6 +57,7 @@ export type DraftObservationSlice = {
     ) => void;
     updateTags: (tagKey: string, value: Observation['tags'][0]) => void;
     updatePreset: (preset: Preset) => void;
+    addAudioRecording: (audioRecording: AudioRecording) => void;
   };
 };
 
@@ -173,6 +178,10 @@ const draftObservationSlice: StateCreator<DraftObservationSlice> = (
         },
       });
     },
+    addAudioRecording: recording =>
+      set({
+        audioRecordings: [...get().audioRecordings, recording],
+      }),
   },
 });
 

src/frontend/hooks/server/media.ts

@@ -7,6 +7,7 @@ import {useActiveProject} from '../../contexts/ActiveProjectContext';
 import {ProcessedDraftPhoto} from '../../contexts/PhotoPromiseContext/types';
 import type {MapeoProjectApi} from '@comapeo/ipc';
 import {ClientApi} from 'rpc-reflector';
+import {AudioRecording} from '../../sharedTypes';
 
 export function useCreateBlobMutation(opts: {retry?: number} = {}) {
   const {projectApi} = useActiveProject();
@@ -34,6 +35,27 @@ export function useCreateBlobMutation(opts: {retry?: number} = {}) {
   });
 }
 
+export function useCreateAudioBlobMutation(opts: {retry?: number} = {}) {
+  const {projectApi} = useActiveProject();
+
+  return useMutation({
+    retry: opts.retry,
+    mutationFn: async (audio: AudioRecording) => {
+      const {uri, createdAt} = audio;
+
+      return projectApi.$blobs.create(
+        {
+          original: new URL(uri).pathname,
+        },
+        {
+          mimeType: 'audio/mp4',
+          timestamp: createdAt,
+        },
+      );
+    },
+  });
+}
+
 const resolveAttachmentUrlQueryOptions = (
   projectId: string,
   projectApi: ClientApi<MapeoProjectApi>,

src/frontend/hooks/useDraftObservation.ts

@@ -29,6 +29,7 @@ export const useDraftObservation = () => {
     updateTags,
     updatePreset,
     existingObservationToDraft,
+    addAudioRecording,
   } = _usePersistedDraftObservationActions();
 
   const addPhoto = useCallback(
@@ -102,5 +103,6 @@ export const useDraftObservation = () => {
     updatePreset,
     usePreset,
     existingObservationToDraft,
+    addAudioRecording,
   };
 };

src/frontend/screens/Audio/AnimatedBackground.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {Dimensions, StyleSheet} from 'react-native';
+import Animated, {SharedValue, useAnimatedStyle} from 'react-native-reanimated';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+
+import {MAX_RECORDING_DURATION_MS} from './index';
+
+export function AnimatedBackground({
+  elapsedTimeValue,
+}: {
+  elapsedTimeValue: SharedValue<number>;
+}) {
+  const {top} = useSafeAreaInsets();
+  const {height} = Dimensions.get('window');
+
+  const animatedStyles = useAnimatedStyle(() => ({
+    height:
+      (height + top) *
+      (elapsedTimeValue.value * (1 / MAX_RECORDING_DURATION_MS)),
+    backgroundColor: `hsl(216, 100%, ${elapsedTimeValue.value * (1 / MAX_RECORDING_DURATION_MS) * 50}%)`,
+  }));
+
+  return <Animated.View style={[styles.fill, animatedStyles]} />;
+}
+
+const styles = StyleSheet.create({
+  fill: {
+    position: 'absolute',
+    zIndex: -1,
+    bottom: 0,
+    width: '100%',
+  },
+});

src/frontend/screens/Audio/ContentWithControls.tsx

@@ -0,0 +1,79 @@
+import React, {ReactNode} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {Bar} from 'react-native-progress';
+import {Duration} from 'luxon';
+
+import {MEDIUM_GREY, WHITE} from '../../lib/styles';
+import {ScreenContentWithDock} from '../../sharedComponents/ScreenContentWithDock';
+import {Text} from '../../sharedComponents/Text';
+import {Row as ControlsRow} from './Controls';
+
+export function ContentWithControls({
+  controls,
+  message,
+  progress,
+  timeElapsed,
+}: {
+  controls: ReactNode;
+  message?: string;
+  progress?: number;
+  timeElapsed: number;
+}) {
+  return (
+    <ScreenContentWithDock
+      contentContainerStyle={styles.contentContainer}
+      dockContainerStyle={styles.dockContainer}
+      dockContent={<ControlsRow>{controls}</ControlsRow>}>
+      <View style={styles.container}>
+        <View style={styles.timerContainer}>
+          <Text style={styles.timerText}>
+            {Duration.fromMillis(timeElapsed).toFormat('mm:ss')}
+          </Text>
+
+          {typeof progress === 'number' ? (
+            <Bar
+              // Setting to 0 seems to have issues on Android: https://github.com/oblador/react-native-progress/issues/56
+              progress={progress > 0 ? progress : 0.00000001}
+              indeterminate={false}
+              width={null}
+              color={WHITE}
+              borderColor="transparent"
+              borderRadius={0}
+              borderWidth={0}
+              unfilledColor={MEDIUM_GREY}
+            />
+          ) : (
+            <View />
+          )}
+        </View>
+        <Text style={styles.message}>{message}</Text>
+      </View>
+    </ScreenContentWithDock>
+  );
+}
+
+const styles = StyleSheet.create({
+  contentContainer: {flex: 1},
+  dockContainer: {paddingVertical: 24},
+  container: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  timerContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    gap: 48,
+  },
+  message: {
+    color: WHITE,
+    fontSize: 20,
+    textAlign: 'center',
+  },
+  timerText: {
+    fontFamily: 'Rubik',
+    fontSize: 96,
+    fontWeight: 'bold',
+    color: WHITE,
+    textAlign: 'center',
+  },
+});

src/frontend/screens/Audio/Controls.tsx

@@ -0,0 +1,113 @@
+import React, {PropsWithChildren} from 'react';
+import {
+  Dimensions,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+import PlayArrow from '../../images/PlayArrow.svg';
+import {MAGENTA, BLACK, LIGHT_GREY, WHITE} from '../../lib/styles';
+
+type BaseProps = PropsWithChildren<TouchableOpacityProps>;
+
+function ControlButtonPrimaryBase({children, ...touchableProps}: BaseProps) {
+  return (
+    <TouchableOpacity
+      {...touchableProps}
+      style={[styles.basePressable, touchableProps.style]}>
+      {children}
+    </TouchableOpacity>
+  );
+}
+
+export function Record(props: BaseProps) {
+  return (
+    <ControlButtonPrimaryBase {...props}>
+      <View style={styles.record} />
+    </ControlButtonPrimaryBase>
+  );
+}
+
+export function Stop(props: BaseProps) {
+  return (
+    <ControlButtonPrimaryBase {...props}>
+      <View style={styles.stop} />
+    </ControlButtonPrimaryBase>
+  );
+}
+
+export function Play(props: BaseProps) {
+  return (
+    <ControlButtonPrimaryBase {...props}>
+      <View style={styles.play}>
+        <PlayArrow />
+      </View>
+    </ControlButtonPrimaryBase>
+  );
+}
+
+export function Side({
+  children,
+  side,
+}: PropsWithChildren<{side: 'right' | 'left'}>) {
+  const {width} = Dimensions.get('window');
+
+  const midpoint = width / 2;
+
+  const sideControlOffset = Math.max(midpoint - 200, midpoint / 3);
+
+  return (
+    <View style={[styles.sideControl, {[side]: sideControlOffset}]}>
+      {children}
+    </View>
+  );
+}
+
+export function Row({children}: PropsWithChildren) {
+  return <View style={styles.controlsRow}>{children}</View>;
+}
+
+const PRIMARY_CONTROL_DIAMETER = 96;
+
+const styles = StyleSheet.create({
+  basePressable: {
+    height: PRIMARY_CONTROL_DIAMETER,
+    width: PRIMARY_CONTROL_DIAMETER,
+    borderRadius: PRIMARY_CONTROL_DIAMETER,
+    borderWidth: 12,
+    borderColor: WHITE,
+    overflow: 'hidden',
+    backgroundColor: WHITE,
+    justifyContent: 'center',
+  },
+  pressablePressed: {
+    backgroundColor: LIGHT_GREY,
+    borderColor: LIGHT_GREY,
+  },
+
+  record: {
+    height: PRIMARY_CONTROL_DIAMETER,
+    backgroundColor: MAGENTA,
+  },
+  stop: {
+    height: PRIMARY_CONTROL_DIAMETER / 3,
+    width: PRIMARY_CONTROL_DIAMETER / 3,
+    backgroundColor: BLACK,
+    alignSelf: 'center',
+  },
+  play: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  controlsRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  sideControl: {
+    position: 'absolute',
+  },
+});