fix: default recorder sampleFormat

Author: michalsek

apps/common-app/src/App.tsx

@@ -21,41 +21,31 @@ import { colors, layout } from './styles';
 
 const Stack = createStackNavigator();
 
-const ItemSeparatorComponent = () => <Spacer.Vertical size={16} />;
-
-const ItemSeparatorComponent2 = () => (
-  <View>
-    <Spacer.Vertical size={12} />
-    <View style={styles.hr} />
-    <Spacer.Vertical size={12} />
-  </View>
-);
-
-const ExamplesScreen: FC = () => {
+const TestsScreen: FC = () => {
   const navigation = useNavigation<MainStackProps>();
 
   const renderItem: ListRenderItem<Example> = ({
-    item: { Icon, key, subtitle, title },
+    item: { Icon, key, title },
   }) => (
     <Pressable
       key={key}
       style={styles.buttonSmall}
       onPress={() => navigation.navigate(key)}
     >
-      {/* <Icon /> */}
-      <Text style={styles.subtitleSmall}>{subtitle}</Text>
+      <Icon color={colors.white} size={18} />
       <Text style={styles.titleSmall}>{title}</Text>
     </Pressable>
   );
 
   return (
-    <Container>
+    <Container headless>
       <FlatList
         data={Examples}
         renderItem={renderItem}
         keyExtractor={(item) => item.key}
         contentContainerStyle={styles.scrollView}
-        ItemSeparatorComponent={ItemSeparatorComponent2}
+        ItemSeparatorComponent={ItemSeparatorComponentSmall}
+        numColumns={2}
       />
     </Container>
   );
@@ -73,13 +63,16 @@ const DemoAppsScreen: FC = () => {
         { borderStyle: pressed ? 'solid' : 'dashed' },
       ]}
     >
-      <Text style={styles.title}>{item.title}</Text>
-      <Text style={styles.subtitle}>{item.subtitle}</Text>
+      <item.icon color={colors.white} size={24} />
+      <View style={styles.buttonInner}>
+        <Text style={styles.title}>{item.title}</Text>
+        <Text style={styles.subtitle}>{item.subtitle}</Text>
+      </View>
     </Pressable>
   );
 
   return (
-    <Container>
+    <Container headless>
       <FlatList
         data={demos}
         renderItem={renderItem}
@@ -91,26 +84,26 @@ const DemoAppsScreen: FC = () => {
   );
 };
 
-const BenchmarksScreen: FC = () => {
-  return <Container />;
+const OtherScreen: FC = () => {
+  return <Container headless />;
 };
 
 const MainTabs = createNativeBottomTabNavigator<MainStackProps>({
   screens: {
-    Examples: ExamplesScreen,
+    Tests: TestsScreen,
     DemoApps: DemoAppsScreen,
-    Benchmarks: BenchmarksScreen,
+    Other: OtherScreen,
   },
 });
 
 const MainTabsScreen: FC = () => {
   return (
     <MainTabs.Navigator>
       <MainTabs.Screen
-        name="Examples"
-        component={ExamplesScreen}
+        name="Tests"
+        component={TestsScreen}
         options={{
-          title: 'Examples',
+          title: 'Tests',
           tabBarIcon: {
             type: 'sfSymbol',
             name: 'list.number',
@@ -129,10 +122,10 @@ const MainTabsScreen: FC = () => {
         }}
       />
       <MainTabs.Screen
-        name="Benchmarks"
-        component={BenchmarksScreen}
+        name="Other"
+        component={OtherScreen}
         options={{
-          title: 'Benchmarks',
+          title: 'Other',
 
           tabBarIcon: {
             type: 'sfSymbol',
@@ -189,6 +182,16 @@ const App: FC = () => {
 
 export default App;
 
+const ItemSeparatorComponent = () => <Spacer.Vertical size={16} />;
+
+const ItemSeparatorComponentSmall = () => (
+  <View>
+    <Spacer.Vertical size={6} />
+    <View style={styles.hr} />
+    <Spacer.Vertical size={6} />
+  </View>
+);
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -197,6 +200,7 @@ const styles = StyleSheet.create({
     fontSize: 24,
     fontWeight: '700',
     color: colors.white,
+    lineHeight: 24,
   },
   subtitle: {
     opacity: 0.6,
@@ -208,24 +212,45 @@ const styles = StyleSheet.create({
     borderRadius: layout.radius,
     paddingVertical: layout.spacing * 2,
     paddingHorizontal: layout.spacing * 2,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: layout.spacing,
+  },
+  buttonInner: {
+    flexShrink: 1,
   },
   buttonSmall: {
-    paddingVertical: layout.spacing,
-    paddingHorizontal: layout.spacing * 2,
+    padding: layout.spacing,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: layout.spacing,
+    width: '48%',
+    margin: '1%',
+    height: 40,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: colors.white,
   },
   titleSmall: {
-    fontSize: 18,
+    fontSize: 16,
     fontWeight: '600',
     color: colors.white,
+    marginLeft: 4,
+    flexShrink: 1,
   },
   subtitleSmall: {
     opacity: 0.6,
     color: colors.white,
   },
   scrollView: {},
   hr: {
-    height: StyleSheet.hairlineWidth,
-    backgroundColor: colors.border,
-    marginHorizontal: 64,
+    // height: StyleSheet.hairlineWidth,
+    // // backgroundColor: colors.border,
+    // marginLeft: 60,
+    // marginRight: '35%',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: layout.spacing,
   },
 });

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

@@ -8,18 +8,23 @@ type ContainerProps = PropsWithChildren<{
   style?: StyleProp<ViewStyle>;
   centered?: boolean;
   disablePadding?: boolean;
+  headless?: boolean;
 }>;
 
 const headerPadding = 120; // eyeballed
 
 const Container: React.FC<ContainerProps> = (props) => {
-  const { children, style, centered, disablePadding } = props;
+  const { children, style, centered, disablePadding, headless } = props;
 
   return (
     <SafeAreaView
-      edges={['bottom', 'left', 'right']}
+      edges={
+        headless
+          ? ['bottom', 'left', 'right', 'top']
+          : ['bottom', 'left', 'right']
+      }
       style={[
-        styles.basic,
+        headless ? styles.basicHeadless : styles.basic,
         centered && styles.centered,
         !disablePadding && styles.padding,
         style,
@@ -38,8 +43,13 @@ const styles = StyleSheet.create({
     paddingTop: headerPadding,
     backgroundColor: colors.background,
   },
+  basicHeadless: {
+    flex: 1,
+    backgroundColor: colors.background,
+    paddingTop: 20,
+  },
   padding: {
-    padding: 24,
+    paddingHorizontal: 18,
   },
   centered: {
     alignItems: 'center',

apps/common-app/src/demos/Record/Record.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
-import { AudioContext, AudioManager } from 'react-native-audio-api';
+import { AudioManager } from 'react-native-audio-api';
 
 import { Alert, StyleSheet, View } from 'react-native';
 import { Container } from '../../components';
@@ -17,8 +17,6 @@ AudioManager.setAudioSessionOptions({
   iosOptions: ['defaultToSpeaker', 'allowBluetoothA2DP'],
 });
 
-const audioContext = new AudioContext({ initSuspended: true });
-
 Recorder.enableFileOutput({});
 
 const Record: FC = () => {
@@ -160,42 +158,3 @@ const styles = StyleSheet.create({
   spacerM: { height: 24 },
   spacerS: { height: 12 },
 });
-
-// const [lastOutput, setLastOutput] = useState<string | null>(null);
-
-// useEffect(() => {
-//   recorder.onError((error) => {
-//     console.error('Recorder error:', error);
-//     Alert.alert('Recorder Error', error.message);
-//   });
-
-//   return () => {
-//     recorder.clearOnError();
-//   };
-// }, []);
-
-// const onPlayOutput = useCallback(async () => {
-//   if (!lastOutput || state !== ExampleState.Idle) {
-//     return;
-//   }
-
-//   setState(ExampleState.Playing);
-
-//   await AudioManager.setAudioSessionActivity(true);
-
-//   const buffer = await audioContext.decodeAudioData(lastOutput);
-//   const source = audioContext.createBufferSource();
-//   source.buffer = buffer;
-//   source.connect(audioContext.destination);
-//   source.start();
-
-//   source.onEnded = async () => {
-//     await audioContext.suspend();
-//     await AudioManager.setAudioSessionActivity(false);
-//     setState(ExampleState.Idle);
-//   };
-
-//   if (audioContext.state === 'suspended') {
-//     await audioContext.resume();
-//   }
-// }, [lastOutput, state]);

apps/common-app/src/demos/Record/RecordingVisualization.tsx

@@ -18,8 +18,8 @@ interface RecordingVisualizationProps {
 
 const constants = {
   sampleRate: 3125,
-  updateIntervalMS: 32,
-  barWidth: 3,
+  updateIntervalMS: 42,
+  barWidth: 2,
   barGap: 2,
   minDb: -40,
   maxDb: 0,

apps/common-app/src/demos/index.ts

@@ -1,17 +1,27 @@
+import { icons } from 'lucide-react-native';
+
 import Record from './Record/Record';
 
+interface SimplifiedIconProps {
+  color?: string;
+  size?: number;
+}
+
 export interface DemoScreen {
   key: string;
   title: string;
   subtitle: string;
+  icon: React.FC<SimplifiedIconProps>;
   screen: React.FC;
 }
 
 export const demos: DemoScreen[] = [
   {
     key: 'RecordDemo',
-    title: 'Recording',
-    subtitle: 'Record and play audio',
+    title: 'Recorder',
+    subtitle:
+      'Demonstrates microphone permissions, capture, and playback similar to voice memos app.',
+    icon: icons.Mic,
     screen: Record,
   },
 ] as const;