Fix/audio file and piano (#232)

* fix: fixed AudioFile.tsx and Button.tsx

* fix: fixed piano example

* fix: fixed dotenv

* ci: yarn format

* fix: requested fix

---------

Co-authored-by: Maciej Makowski <maciej.makowski@swmansion.com>

Author: maciejmakowski2003

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

@@ -6,17 +6,27 @@ import { colors, layout } from '../styles';
 interface ButtonProps {
   title: string;
   onPress: () => void;
+  disabled?: boolean;
+  width?: number;
 }
 
-const Button: FC<ButtonProps> = (props) => {
-  const { title, onPress } = props;
-
+const Button: FC<ButtonProps> = ({
+  title,
+  onPress,
+  disabled = false,
+  width = 100,
+}) => {
   return (
     <Pressable
+      disabled={disabled}
       onPress={onPress}
       style={({ pressed }) => [
         styles.button,
-        { backgroundColor: pressed ? `${colors.main}88` : colors.main },
+        {
+          backgroundColor: pressed ? `${colors.main}88` : colors.main,
+          opacity: disabled ? 0.5 : 1,
+          width: width,
+        },
       ]}
     >
       <Text style={styles.text}>{title}</Text>
@@ -28,7 +38,6 @@ const styles = StyleSheet.create({
   button: {
     padding: layout.spacing,
     borderRadius: layout.radius,
-    width: 100,
   },
   text: {
     color: colors.white,

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

@@ -11,6 +11,7 @@ import { ActivityIndicator } from 'react-native';
 
 const AudioFile: FC = () => {
   const [isPlaying, setIsPlaying] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const audioContextRef = useRef<AudioContext | null>(null);
   const audioBufferSourceNodeRef = useRef<AudioBufferSourceNode | null>(null);
@@ -39,9 +40,10 @@ const AudioFile: FC = () => {
       if (result.canceled === false) {
         audioBufferSourceNodeRef.current?.stop();
         setIsPlaying(false);
-        setAudioBuffer(null);
 
+        setIsLoading(true);
         await fetchAudioBuffer(result.assets[0].uri.replace('file://', ''));
+        setIsLoading(false);
       }
     } catch (error) {
       console.error('Error picking file:', error);
@@ -87,12 +89,17 @@ const AudioFile: FC = () => {
 
   return (
     <Container centered>
-      <Button title={isPlaying ? 'Stop' : 'Play'} onPress={handlePress} />
-      {!audioBuffer && <ActivityIndicator color="#FFFFFF" />}
-      <Spacer.Vertical size={20} />
       <Button
         title="Set audio source from file"
         onPress={handleSetAudioSourceFromFile}
+        width={200}
+      />
+      {isLoading && <ActivityIndicator color="#FFFFFF" />}
+      <Spacer.Vertical size={20} />
+      <Button
+        title={isPlaying ? 'Stop' : 'Play'}
+        onPress={handlePress}
+        disabled={!audioBuffer ? true : false}
       />
     </Container>
   );

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

@@ -1,5 +1,6 @@
 import { FC, useEffect, useRef } from 'react';
 import { AudioContext, AudioBuffer } from 'react-native-audio-api';
+import * as FileSystem from 'expo-file-system';
 
 import { Container } from '../../components';
 import { KeyName, sources, keyMap } from './utils';
@@ -27,8 +28,16 @@ const Piano: FC = () => {
     }
 
     Object.entries(sources).forEach(async ([key, url]) => {
-      bufferListRef.current[key as KeyName] =
-        await audioContextRef.current!.decodeAudioDataSource(url);
+      bufferListRef.current[key as KeyName] = await FileSystem.downloadAsync(
+        url,
+        FileSystem.documentDirectory + key.replace('#', 's') + '.mp3'
+      )
+        .then(({ uri }) => {
+          return uri.replace('file://', '');
+        })
+        .then((uri) => {
+          return audioContextRef.current!.decodeAudioDataSource(uri);
+        });
     });
 
     const newNotes: Partial<Record<KeyName, PianoNote>> = {};

apps/fabric-example/babel.config.js

@@ -1,4 +1,7 @@
-module.exports = {
-  presets: ['module:@react-native/babel-preset'],
-  plugins: ['react-native-reanimated/plugin', 'module:react-native-dotenv'],
+module.exports = function (api) {
+  api.cache(false);
+  return {
+    presets: ['module:@react-native/babel-preset'],
+    plugins: ['react-native-reanimated/plugin', 'module:react-native-dotenv'],
+  };
 };

packages/react-native-audio-api/ios/AudioPlayer/AudioPlayer.m

@@ -62,7 +62,8 @@ - (int)getBufferSizeInFrames
   // which is safer to base our internal AudioBus sizes.
   // Buut no documentation => no guarantee :)
   // If something is crackling when it should play silence, start here 📻
-  double maxBufferDuration = fmax(0.02, fmax(self.audioSession.IOBufferDuration, self.audioSession.preferredIOBufferDuration));
+  double maxBufferDuration =
+      fmax(0.02, fmax(self.audioSession.IOBufferDuration, self.audioSession.preferredIOBufferDuration));
   return (int)(maxBufferDuration * self.audioSession.sampleRate + 1);
 }