diff --git a/apps/common-app/package.json b/apps/common-app/package.json index 20ab606d..622ff9f4 100644 --- a/apps/common-app/package.json +++ b/apps/common-app/package.json @@ -9,6 +9,9 @@ "@react-navigation/native-stack": "*", "@react-navigation/stack": "*", "@shopify/react-native-skia": "*", + "expo": "*", + "expo-document-picker": "*", + "expo-file-system": "*", "react": "*", "react-dom": "*", "react-native": "*", @@ -26,13 +29,27 @@ "@react-navigation/native-stack": "^6.11.0", "@react-navigation/stack": "^6.4.1", "@shopify/react-native-skia": "^1.5.1", + "expo": "^52.0.0", + "expo-document-picker": "~13.0.1", + "expo-file-system": "~18.0.4", "react": "18.3.1", "react-dom": "18.2.0", "react-native": "0.76.0", "react-native-audio-api": "workspace:*", + "react-native-dotenv": "^3.4.11", "react-native-gesture-handler": "^2.20.2", "react-native-reanimated": "^3.16.1", "react-native-safe-area-context": "^4.12.0", "react-native-screens": "^3.35.0" + }, + "expo": { + "autolinking": { + "exclude": [ + "expo-keep-awake", + "expo-asset", + "expo-font", + "expo-constants" + ] + } } } diff --git a/apps/common-app/src/components/Button.tsx b/apps/common-app/src/components/Button.tsx index 1da2f1bf..b1dd09b1 100644 --- a/apps/common-app/src/components/Button.tsx +++ b/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 = (props) => { - const { title, onPress } = props; - +const Button: FC = ({ + title, + onPress, + disabled = false, + width = 100, +}) => { return ( [ styles.button, - { backgroundColor: pressed ? `${colors.main}88` : colors.main }, + { + backgroundColor: pressed ? `${colors.main}88` : colors.main, + opacity: disabled ? 0.5 : 1, + width: width, + }, ]} > {title} @@ -28,7 +38,6 @@ const styles = StyleSheet.create({ button: { padding: layout.spacing, borderRadius: layout.radius, - width: 100, }, text: { color: colors.white, diff --git a/apps/common-app/src/examples/AudioFile/AudioFile.tsx b/apps/common-app/src/examples/AudioFile/AudioFile.tsx index 3a189a9a..6e3475e2 100644 --- a/apps/common-app/src/examples/AudioFile/AudioFile.tsx +++ b/apps/common-app/src/examples/AudioFile/AudioFile.tsx @@ -1,6 +1,6 @@ -import React, { useCallback } from 'react'; -import { useState, useRef, useEffect, FC } from 'react'; -import { Container, Button } from '../../components'; +import React, { useCallback, useEffect, useRef, useState, FC } from 'react'; +import { Container, Button, Spacer } from '../../components'; +import * as DocumentPicker from 'expo-document-picker'; import { AudioBuffer, @@ -9,11 +9,9 @@ import { } from 'react-native-audio-api'; import { ActivityIndicator } from 'react-native'; -const assetUrl = - 'https://audio-ssl.itunes.apple.com/apple-assets-us-std-000001/AudioPreview18/v4/9c/db/54/9cdb54b3-5c52-3063-b1ad-abe42955edb5/mzaf_520282131402737225.plus.aac.p.m4a'; - const AudioFile: FC = () => { const [isPlaying, setIsPlaying] = useState(false); + const [isLoading, setIsLoading] = useState(false); const audioContextRef = useRef(null); const audioBufferSourceNodeRef = useRef(null); @@ -32,13 +30,33 @@ const AudioFile: FC = () => { ); }; - const fetchAudioBuffer = useCallback(async () => { + const handleSetAudioSourceFromFile = async () => { + try { + const result = await DocumentPicker.getDocumentAsync({ + type: 'audio/*', + multiple: false, + }); + + if (result.canceled === false) { + audioBufferSourceNodeRef.current?.stop(); + setIsPlaying(false); + + setIsLoading(true); + await fetchAudioBuffer(result.assets[0].uri.replace('file://', '')); + setIsLoading(false); + } + } catch (error) { + console.error('Error picking file:', error); + } + }; + + const fetchAudioBuffer = useCallback(async (assetUri: string) => { if (!audioContextRef.current) { audioContextRef.current = new AudioContext(); } const buffer = - await audioContextRef.current.decodeAudioDataSource(assetUrl); + await audioContextRef.current.decodeAudioDataSource(assetUri); setAudioBuffer(buffer); }, []); @@ -64,8 +82,6 @@ const AudioFile: FC = () => { audioContextRef.current = new AudioContext(); } - fetchAudioBuffer(); - return () => { audioContextRef.current?.close(); }; @@ -73,8 +89,18 @@ const AudioFile: FC = () => { return ( -