feat: adds audio creation

messages/en.json

@@ -354,12 +354,18 @@
   },
   "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."
+    "message": "To record audio while using the app and in the background CoMapeo needs to access your microphone. Please enable microphone permissions in your app settings."
   },
   "screens.AudioPermission.title": {
     "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.RecordingIdle.description": {
+    "message": "Record up to {length} {length, plural, one {minute} other {minutes}}"
+  },
   "screens.CameraScreen.goToSettings": {
     "message": "Go to Settings"
   },

src/frontend/Navigation/Stack/AppScreens.tsx

@@ -76,6 +76,10 @@ import {SettingsPrivacyPolicy} from '../../screens/Settings/DataAndPrivacy/Setti
 import {TrackEdit} from '../../screens/TrackEdit/index.tsx';
 import {Config} from '../../screens/Settings/Config';
 import {HowToLeaveProject} from '../../screens/HowToLeaveProject.tsx';
+import {
+  Audio,
+  navigationOptions as audioNavigationOptions,
+} from '../../screens/Audio/index.tsx';
 
 export const TAB_BAR_HEIGHT = 70;
 
@@ -322,7 +326,11 @@ export const createDefaultScreenGroup = ({
       component={HowToLeaveProject}
       options={{headerShown: false}}
     />
-
+    <RootStack.Screen
+      name="Audio"
+      options={audioNavigationOptions}
+      component={Audio}
+    />
     {process.env.EXPO_PUBLIC_FEATURE_TEST_DATA_UI && (
       <RootStack.Screen
         name="CreateTestData"

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 './constants';
+
+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,78 @@
+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';
+
+export function ContentWithControls({
+  controls,
+  message,
+  progress,
+  timeElapsed,
+}: {
+  controls: ReactNode;
+  message?: string;
+  progress?: number;
+  timeElapsed: number;
+}) {
+  return (
+    <ScreenContentWithDock
+      contentContainerStyle={styles.contentContainer}
+      dockContainerStyle={styles.dockContainer}
+      dockContent={controls}>
+      <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,85 @@
+import React, {PropsWithChildren} from 'react';
+import {Pressable, PressableProps, StyleSheet, View} from 'react-native';
+
+import {MAGENTA, BLACK, LIGHT_GREY, WHITE} from '../../lib/styles';
+
+type BaseProps = PropsWithChildren<PressableProps>;
+
+function ControlButtonPrimaryBase({children, ...pressableProps}: BaseProps) {
+  return (
+    <Pressable
+      {...pressableProps}
+      style={({pressed}) => [
+        styles.basePressable,
+        typeof pressableProps.style === 'function'
+          ? pressableProps.style({pressed})
+          : pressableProps.style,
+        pressed && styles.pressablePressed,
+      ]}>
+      {children}
+    </Pressable>
+  );
+}
+
+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 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',
+  },
+});

src/frontend/screens/Audio/CreateRecording/RecordingActive.tsx

@@ -0,0 +1,64 @@
+import React, {useEffect} from 'react';
+import {defineMessages, useIntl} from 'react-intl';
+import {useDerivedValue, withTiming} from 'react-native-reanimated';
+
+import {useNavigationFromRoot} from '../../../hooks/useNavigationWithTypes';
+import {AnimatedBackground} from '../AnimatedBackground';
+import {ContentWithControls} from '../ContentWithControls';
+import * as Controls from '../Controls';
+import {MAX_RECORDING_DURATION_MS} from '../constants';
+import {useAutoStopRecording} from './useAutoStopRecording';
+
+const m = defineMessages({
+  description: {
+    id: 'screens.AudioScreen.CreateRecording.RecordingActive.description',
+    defaultMessage:
+      'Less than {length} {length, plural, one {minute} other {minutes}} left',
+  },
+});
+
+export function RecordingActive({
+  duration,
+  onPressStop,
+}: {
+  duration: number;
+  onPressStop: () => void;
+}) {
+  const navigation = useNavigationFromRoot();
+  const {formatMessage: t} = useIntl();
+
+  const minutesRemaining = Math.ceil(
+    (MAX_RECORDING_DURATION_MS - duration) / 60_000,
+  );
+
+  const elapsedTimeValue = useDerivedValue(() => {
+    return withTiming(duration, {duration: 500});
+  }, [duration]);
+
+  useEffect(() => {
+    navigation.setOptions({headerLeft: () => null});
+  }, [navigation]);
+
+  useAutoStopRecording(minutesRemaining, onPressStop);
+
+  return (
+    <>
+      <ContentWithControls
+        timeElapsed={duration}
+        message={
+          minutesRemaining > 0
+            ? t(m.description, {
+                length: minutesRemaining,
+              })
+            : undefined
+        }
+        controls={
+          <Controls.Row>
+            <Controls.Stop onPress={onPressStop} />
+          </Controls.Row>
+        }
+      />
+      <AnimatedBackground elapsedTimeValue={elapsedTimeValue} />
+    </>
+  );
+}

src/frontend/screens/Audio/CreateRecording/RecordingIdle.tsx

@@ -0,0 +1,46 @@
+import React, {useEffect} from 'react';
+import {defineMessages, useIntl} from 'react-intl';
+
+import {useNavigationFromRoot} from '../../../hooks/useNavigationWithTypes';
+import {CustomHeaderLeft} from '../../../sharedComponents/CustomHeaderLeft';
+import {ContentWithControls} from '../ContentWithControls';
+import * as Controls from '../Controls';
+import {MAX_RECORDING_DURATION_MS} from '../constants';
+
+const m = defineMessages({
+  description: {
+    id: 'screens.AudioScreen.CreateRecording.RecordingIdle.description',
+    defaultMessage:
+      'Record up to {length} {length, plural, one {minute} other {minutes}}',
+  },
+});
+
+export function RecordingIdle({onPressRecord}: {onPressRecord: () => void}) {
+  const navigation = useNavigationFromRoot();
+  const {formatMessage: t} = useIntl();
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerLeft: props => (
+        <CustomHeaderLeft
+          tintColor={props.tintColor}
+          headerBackButtonProps={props}
+        />
+      ),
+    });
+  }, [navigation]);
+
+  return (
+    <ContentWithControls
+      message={t(m.description, {
+        length: MAX_RECORDING_DURATION_MS / 60_000,
+      })}
+      timeElapsed={0}
+      controls={
+        <Controls.Row>
+          <Controls.Record onPress={onPressRecord} />
+        </Controls.Row>
+      }
+    />
+  );
+}

src/frontend/screens/Audio/CreateRecording/index.tsx

@@ -0,0 +1,34 @@
+import React, {useEffect} from 'react';
+import {useNavigationFromRoot} from '../../../hooks/useNavigationWithTypes';
+import {RecordingActive} from './RecordingActive';
+import {RecordingIdle} from './RecordingIdle';
+import {useAudioRecording} from './useAudioRecording';
+
+export function CreateRecording() {
+  const navigation = useNavigationFromRoot();
+  const recordingState = useAudioRecording();
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      recordingState.reset().catch(error => {
+        console.error('Error resetting recording:', error);
+      });
+    });
+
+    return unsubscribe;
+  }, [navigation, recordingState]);
+
+  switch (recordingState.status) {
+    case 'idle': {
+      return <RecordingIdle onPressRecord={recordingState.startRecording} />;
+    }
+    case 'active': {
+      return (
+        <RecordingActive
+          duration={recordingState.duration}
+          onPressStop={recordingState.stopRecording}
+        />
+      );
+    }
+  }
+}