AudioRecorder - recording to file

apps/common-app/package.json

@@ -41,6 +41,6 @@
     "react": "19.1.1",
     "react-native": "0.82.0",
     "react-test-renderer": "19.1.1",
-    "typescript": "5.8.3"
+    "typescript": "~5.8.3"
   }
 }

apps/common-app/prettier.config.js

@@ -0,0 +1,10 @@
+/** @type {import('prettier').Config} */
+module.exports = {
+  plugins: ["prettier-plugin-jsdoc"],
+  bracketSameLine: false,
+  printWidth: 80,
+  singleQuote: true,
+  trailingComma: "es5",
+  tabWidth: 2,
+  arrowParens: "always",
+};

apps/common-app/src/components/BGGradient.tsx

@@ -1,6 +1,6 @@
+import { Canvas, RadialGradient, Rect, vec } from '@shopify/react-native-skia';
 import React, { useCallback, useState } from 'react';
 import { LayoutChangeEvent, StyleSheet, View } from 'react-native';
-import { vec, Rect, Canvas, RadialGradient } from '@shopify/react-native-skia';
 
 import { colors } from '../styles';
 
@@ -19,7 +19,7 @@ const BGGradient = () => {
       <Canvas style={styles.canvas}>
         <Rect x={0} y={0} width={size.width} height={size.height}>
           <RadialGradient
-            r={size.width}
+            r={size.width / 4}
             c={vec(size.width / 2, 0)}
             colors={[colors.backgroundLight, colors.background]}
           />

apps/common-app/src/components/Container.tsx

@@ -1,8 +1,7 @@
 import React, { PropsWithChildren } from 'react';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
-import BGGradient from './BGGradient';
 import { colors } from '../styles';
 
 type ContainerProps = PropsWithChildren<{
@@ -19,8 +18,13 @@ const Container: React.FC<ContainerProps> = (props) => {
   return (
     <SafeAreaView
       edges={['bottom', 'left', 'right']}
-      style={[styles.basic, centered && styles.centered, !disablePadding && styles.padding, style]}>
-      <BGGradient />
+      style={[
+        styles.basic,
+        centered && styles.centered,
+        !disablePadding && styles.padding,
+        style,
+      ]}
+    >
       {children}
     </SafeAreaView>
   );

apps/common-app/src/components/icons/PlayPauseIcon.tsx

@@ -1,14 +1,18 @@
 import React from 'react';
-import Svg, { Path, Rect } from 'react-native-svg';
 import { View } from 'react-native';
+import Svg, { Path, Rect } from 'react-native-svg';
 
 type Props = {
   isPlaying: boolean;
   size?: number;
   color?: string;
 };
 
-const PlayPauseIcon: React.FC<Props> = ({ isPlaying = true, size = 48, color = '#FFFFFF' }) => {
+const PlayPauseIcon: React.FC<Props> = ({
+  isPlaying = true,
+  size = 48,
+  color = '#FFFFFF',
+}) => {
   return (
     <View>
       <Svg width={size} height={size} viewBox="0 0 64 64" fill="none">
@@ -18,10 +22,7 @@ const PlayPauseIcon: React.FC<Props> = ({ isPlaying = true, size = 48, color = '
             <Rect x="38" y="12" width="10" height="40" rx="2" fill={color} />
           </>
         ) : (
-          <Path
-            d="M18 12L52 32L18 52V12Z"
-            fill={color}
-          />
+          <Path d="M18 12L52 32L18 52V12Z" fill={color} />
         )}
       </Svg>
     </View>

apps/common-app/src/examples/AudioFile/AudioPlayer.ts

@@ -1,8 +1,8 @@
-import { AudioContext, AudioManager } from 'react-native-audio-api';
 import type {
-  AudioBufferSourceNode,
   AudioBuffer,
+  AudioBufferSourceNode,
 } from 'react-native-audio-api';
+import { AudioContext, AudioManager } from 'react-native-audio-api';
 
 class AudioPlayer {
   private readonly audioContext: AudioContext;
@@ -93,7 +93,8 @@ class AudioPlayer {
   loadBuffer = async (url: string) => {
     const buffer = await fetch(url, {
       headers: {
-        'User-Agent': 'Mozilla/5.0 (Android; Mobile; rv:122.0) Gecko/122.0 Firefox/122.0',
+        'User-Agent':
+          'Mozilla/5.0 (Android; Mobile; rv:122.0) Gecko/122.0 Firefox/122.0',
       },
     })
       .then((response) => response.arrayBuffer())

apps/common-app/src/examples/AudioVisualizer/AudioVisualizer.tsx

@@ -1,15 +1,15 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, View } from 'react-native';
 import {
-  AudioContext,
   AnalyserNode,
   AudioBuffer,
   AudioBufferSourceNode,
+  AudioContext,
 } from 'react-native-audio-api';
-import { ActivityIndicator, View } from 'react-native';
 
-import FreqTimeChart from './FreqTimeChart';
-import { Container, Button } from '../../components';
+import { Button, Container } from '../../components';
 import { layout } from '../../styles';
+import FreqTimeChart from './FreqTimeChart';
 
 const FFT_SIZE = 512;
 

apps/common-app/src/examples/Record/ControlPanel.tsx

@@ -0,0 +1,37 @@
+import React, { FC } from 'react';
+import { StyleSheet } from 'react-native';
+
+import Animated from 'react-native-reanimated';
+import PauseButton from './PauseButton';
+import RecordButton from './RecordButton';
+import { RecordingState } from './types';
+
+interface ControlPanelProps {
+  state: RecordingState;
+  onToggleState: (action: RecordingState) => void;
+}
+
+const ControlPanel: FC<ControlPanelProps> = ({ state, onToggleState }) => {
+  return (
+    <Animated.View style={styles.controlPanelView}>
+      <PauseButton
+        state={state}
+        onPress={() => {
+          onToggleState(RecordingState.Paused);
+        }}
+      />
+      <RecordButton state={state} onToggleState={onToggleState} />
+    </Animated.View>
+  );
+};
+
+export default ControlPanel;
+
+const styles = StyleSheet.create({
+  controlPanelView: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: 12,
+  },
+});

apps/common-app/src/examples/Record/PauseButton.tsx

@@ -0,0 +1,89 @@
+import React, { FC } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import Animated, {
+  useAnimatedProps,
+  withSpring,
+} from 'react-native-reanimated';
+import { RecordingState } from './types';
+
+interface PauseButtonProps {
+  state: RecordingState;
+  onPress: () => void;
+}
+
+const PauseButton: FC<PauseButtonProps> = ({ state, onPress }) => (
+  <View>
+    <Pressable onPress={onPress} style={styles.pressable}>
+      {({ pressed }) => <PauseButtonInner state={state} pressed={pressed} />}
+    </Pressable>
+  </View>
+);
+
+export default PauseButton;
+
+const size = 24;
+const innerSize = size * 0.3;
+
+const PauseButtonInner: FC<{
+  pressed: boolean;
+  state: RecordingState;
+}> = ({ pressed, state }) => {
+  const leftViewStyle = useAnimatedProps(() => {
+    return {
+      transform: [
+        {
+          translateX: withSpring(pressed ? 6 : 0),
+        },
+      ],
+    };
+  });
+
+  const rightViewStyle = useAnimatedProps(() => {
+    return {
+      transform: [
+        {
+          translateX: withSpring(pressed ? -6 : 0),
+        },
+      ],
+    };
+  });
+
+  const containerStyle = useAnimatedProps(() => {
+    return {
+      transform: [
+        {
+          scale: withSpring(state === RecordingState.Recording ? 1 : 0),
+        },
+      ],
+    };
+  });
+
+  return (
+    <Animated.View style={[styles.container, containerStyle]}>
+      <Animated.View style={[styles.bar, leftViewStyle]} />
+      <Animated.View style={[styles.bar, rightViewStyle]} />
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  pressable: {
+    position: 'absolute',
+    left: -size,
+    top: -size / 2,
+  },
+  container: {
+    width: size,
+    height: size,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: innerSize - 2,
+  },
+  bar: {
+    width: innerSize,
+    height: size,
+    backgroundColor: '#d4d4d4',
+    borderRadius: 2,
+  },
+});