fix: fixed AudioFile.tsx and Button.tsx

software-mansion-labs · Dec 10, 2024 · 93a99a1 · 93a99a1
1 parent 81ecbe6
commit 93a99a1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 10 deletions.
diff --git a/apps/common-app/src/components/Button.tsx b/apps/common-app/src/components/Button.tsx
@@ -6,17 +6,26 @@ 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
-      onPress={onPress}
+      onPress={disabled ? undefined : 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 +37,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
@@ -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);
@@ -38,9 +39,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);
@@ -86,12 +88,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>
   );