react-native-audio-api 0.13.2 → 0.13.4

package/src/Audio/controls/AudioControls.tsx

@@ -1,22 +1,22 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import {
   ActivityIndicator,
+  Animated,
   Image,
+  PanResponder,
   Platform,
   Pressable,
   StyleSheet,
   Text,
   View,
 } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, {
-  useAnimatedRef,
-  useSharedValue,
-} from 'react-native-reanimated';
+import type { LayoutChangeEvent } from 'react-native';
 import { useAudioTagContext } from '../AudioTagContext';
+import { isPlaybackActive } from '../utils';
 import {
   formatTime,
   timeFromLocationX,
+  useBufferingSweep,
   useExpandableTrackHeight,
 } from './audioControlUtils';
 
@@ -28,7 +28,11 @@ import MuteIcon from './icons/speaker-x.png';
 const TRACK_BAR_HEIGHT = 12;
 const TRACK_BAR_HEIGHT_PRESSED = 18;
 const TRACK_BAR_ANIM_MS = 150;
-const SCRUB_PAN_MIN_DISTANCE = 8;
+const BUFFERING_SWEEP_MS = 1100;
+const BUFFERING_SWEEP_WIDTH_RATIO = 0.35;
+const BUFFERING_SWEEP_SLICE_OPACITIES = [
+  0.04, 0.18, 0.45, 0.6, 0.45, 0.18, 0.04,
+];
 
 const AudioControls: React.FC = () => {
   const {
@@ -50,107 +54,83 @@ const AudioControls: React.FC = () => {
   );
 
   const [scrubTime, setScrubTime] = useState<number | null>(null);
-  const progressTrackRef = useAnimatedRef<View>();
-  const progressMetricsWidth = useSharedValue(0);
-  const durationRef = useRef(duration);
-  durationRef.current = duration;
-
-  const onStart = useCallback(
-    (x: number) => {
-      progressTrackAnim.expand();
-      const d = durationRef.current;
-      progressTrackRef.current?.measureInWindow((_left, _y, width, _h) => {
-        progressMetricsWidth.value = width;
-        setScrubTime(timeFromLocationX(x, width, d));
-      });
-    },
-    [progressTrackAnim, progressMetricsWidth, setScrubTime, progressTrackRef]
-  );
-
-  const onUpdate = useCallback(
-    (x: number) => {
-      const d = durationRef.current;
-      const w = progressMetricsWidth.value;
-      setScrubTime(timeFromLocationX(x, w, d));
-    },
-    [progressMetricsWidth]
-  );
-
-  const seekTo = useCallback(
-    (x: number) => {
-      const d = durationRef.current;
-      const w = progressMetricsWidth.value;
-      const t = timeFromLocationX(x, w, d);
-      seekToTime(t);
-    },
-    [progressMetricsWidth, seekToTime]
+  const [trackWidth, setTrackWidth] = useState(0);
+  const isBuffering = playbackState === 'buffering';
+  const bufferingSweepStyle = useBufferingSweep(
+    isBuffering,
+    trackWidth,
+    BUFFERING_SWEEP_WIDTH_RATIO,
+    BUFFERING_SWEEP_MS
   );
 
-  const onEnd = useCallback(
-    (x: number) => {
-      seekTo(x);
-      progressTrackAnim.collapse();
-      setScrubTime(null);
-    },
-    [progressTrackAnim, seekTo]
-  );
-
-  const onCancel = useCallback(() => {
-    progressTrackAnim.collapse();
-    setScrubTime(null);
-  }, [progressTrackAnim]);
+  const scrub = useRef({
+    startX: 0,
+    trackWidth: 0,
+    duration,
+    seekToTime,
+    expand: progressTrackAnim.expand,
+    collapse: progressTrackAnim.collapse,
+  });
+  scrub.current.duration = duration;
+  scrub.current.seekToTime = seekToTime;
+  scrub.current.expand = progressTrackAnim.expand;
+  scrub.current.collapse = progressTrackAnim.collapse;
 
-  const onTapSeek = useCallback(
-    (x: number) => {
-      onEnd(x);
-    },
-    [onEnd]
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderTerminationRequest: () => false,
+        onPanResponderGrant: (event) => {
+          const s = scrub.current;
+          s.startX = event.nativeEvent.locationX;
+          s.expand();
+          setScrubTime(timeFromLocationX(s.startX, s.trackWidth, s.duration));
+        },
+        onPanResponderMove: (_event, gestureState) => {
+          const s = scrub.current;
+          setScrubTime(
+            timeFromLocationX(
+              s.startX + gestureState.dx,
+              s.trackWidth,
+              s.duration
+            )
+          );
+        },
+        onPanResponderRelease: (_event, gestureState) => {
+          const s = scrub.current;
+          s.seekToTime(
+            timeFromLocationX(
+              s.startX + gestureState.dx,
+              s.trackWidth,
+              s.duration
+            )
+          );
+          s.collapse();
+          setScrubTime(null);
+        },
+        onPanResponderTerminate: () => {
+          scrub.current.collapse();
+          setScrubTime(null);
+        },
+      }),
+    []
   );
 
-  const scrubGesture = useMemo(() => {
-    const panGesture = Gesture.Pan()
-      .runOnJS(true)
-      .minDistance(SCRUB_PAN_MIN_DISTANCE)
-      .onStart((e) => {
-        onStart(e.x);
-      })
-      .onUpdate((e) => {
-        onUpdate(e.x);
-      })
-      .onEnd((e) => {
-        onEnd(e.x);
-      })
-      .onFinalize((_e, success) => {
-        if (!success) {
-          onCancel();
-        }
-      });
-
-    const tapGesture = Gesture.Tap()
-      .runOnJS(true)
-      .maxDistance(14)
-      .onEnd((e, success) => {
-        if (success) {
-          onTapSeek(e.x);
-        }
-      });
-
-    return Gesture.Race(panGesture, tapGesture);
-  }, [onStart, onUpdate, onEnd, onCancel, onTapSeek]);
-
   const onPlayPausePress = useCallback(() => {
-    if (playbackState === 'playing') {
+    if (isPlaybackActive(playbackState)) {
       pause();
     } else {
       play();
     }
   }, [playbackState, pause, play]);
 
-  const onProgressTrackLayout = useCallback(() => {
-    progressTrackRef.current?.measureInWindow((_left, _y, width, _h) => {
-      progressMetricsWidth.value = width;
-    });
-  }, [progressMetricsWidth, progressTrackRef]);
+  const onProgressTrackLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    scrub.current.trackWidth = width;
+    setTrackWidth(width);
+  }, []);
 
   if (!ready) {
     return (
@@ -167,10 +147,10 @@ const AudioControls: React.FC = () => {
     <View style={styles.container}>
       <View style={styles.topRow}>
         <Pressable style={styles.playPause} onPress={onPlayPausePress}>
-          {playbackState === 'playing' ? (
-            <Image source={PauseIcon} style={{ width: 24, height: 24 }} />
+          {isPlaybackActive(playbackState) ? (
+            <Image source={PauseIcon} style={styles.icon} />
           ) : (
-            <Image source={PlayIcon} style={{ width: 24, height: 24 }} />
+            <Image source={PlayIcon} style={styles.icon} />
           )}
         </Pressable>
 
@@ -178,28 +158,34 @@ const AudioControls: React.FC = () => {
           {formatTime(displayTime)} / {formatTime(duration)}
         </Text>
 
-        <GestureDetector gesture={scrubGesture}>
-          {/* prettier-ignore */}
-          <View
-            ref={progressTrackRef}
-            onLayout={onProgressTrackLayout}
-            style={styles.progressTrack}
-            collapsable={false}>
-            <Animated.View
-              style={[styles.trackInner, progressTrackAnim.animatedStyle]}
-              >
-              <View
-                style={[styles.trackFill, { width: `${progress * 100}%` }]}
-              />
-            </Animated.View>
-          </View>
-        </GestureDetector>
+        {/* prettier-ignore */}
+        <View
+          onLayout={onProgressTrackLayout}
+          style={styles.progressTrack}
+          {...panResponder.panHandlers}>
+          <Animated.View
+            style={[styles.trackInner, progressTrackAnim.animatedStyle]}>
+            <View style={[styles.trackFill, { width: `${progress * 100}%` }]} />
+            {isBuffering && (
+              <Animated.View
+                pointerEvents="none"
+                style={[styles.bufferingSweep, bufferingSweepStyle]}>
+                {BUFFERING_SWEEP_SLICE_OPACITIES.map((opacity, index) => (
+                  <View
+                    key={index}
+                    style={[styles.bufferingSweepSlice, { opacity }]}
+                  />
+                ))}
+              </Animated.View>
+            )}
+          </Animated.View>
+        </View>
 
         <Pressable style={styles.volumeIcon} onPress={() => setMuted(!muted)}>
           {muted ? (
-            <Image source={MuteIcon} style={{ width: 24, height: 24 }} />
+            <Image source={MuteIcon} style={styles.icon} />
           ) : (
-            <Image source={VolumeIcon} style={{ width: 24, height: 24 }} />
+            <Image source={VolumeIcon} style={styles.icon} />
           )}
         </Pressable>
       </View>
@@ -234,6 +220,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
+  icon: {
+    width: 24,
+    height: 24,
+  },
   playPause: {
     padding: 4,
     marginRight: 12,
@@ -259,6 +249,17 @@ const styles = StyleSheet.create({
     height: '100%',
     backgroundColor: '#000',
   },
+  bufferingSweep: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    flexDirection: 'row',
+  },
+  bufferingSweepSlice: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
   volumeIcon: {
     padding: 4,
     marginRight: 12,

package/src/Audio/controls/audioControlUtils.ts

@@ -1,9 +1,5 @@
-import { useMemo } from 'react';
-import {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-} from 'react-native-reanimated';
+import { useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
 
 export function formatTime(seconds: number): string {
   if (!Number.isFinite(seconds) || seconds < 0) {
@@ -36,32 +32,68 @@ export function useExpandableTrackHeight(
   trackBarHeightPressed: number,
   trackBarAnimMs: number
 ) {
-  const height = useSharedValue(trackBarHeight);
-  const animatedStyle = useAnimatedStyle(() => ({
-    height: height.value,
-    borderRadius: height.value / 2,
-  }));
+  const height = useRef(new Animated.Value(trackBarHeight)).current;
 
-  return useMemo(
-    () => ({
-      animatedStyle,
-      expand: () => {
-        height.value = withTiming(trackBarHeightPressed, {
-          duration: trackBarAnimMs,
-        });
+  return useMemo(() => {
+    const animateTo = (toValue: number) => {
+      Animated.timing(height, {
+        toValue,
+        duration: trackBarAnimMs,
+        useNativeDriver: false,
+      }).start();
+    };
+
+    return {
+      animatedStyle: {
+        height,
+        borderRadius: Animated.divide(height, 2),
       },
-      collapse: () => {
-        height.value = withTiming(trackBarHeight, {
-          duration: trackBarAnimMs,
-        });
+      expand: () => animateTo(trackBarHeightPressed),
+      collapse: () => animateTo(trackBarHeight),
+    };
+  }, [height, trackBarHeight, trackBarHeightPressed, trackBarAnimMs]);
+}
+
+export function useBufferingSweep(
+  isBuffering: boolean,
+  trackWidth: number,
+  sweepWidthRatio: number,
+  sweepDurationMs: number
+) {
+  const sweepProgress = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (!isBuffering) {
+      return;
+    }
+
+    const sweep = Animated.loop(
+      Animated.timing(sweepProgress, {
+        toValue: 1,
+        duration: sweepDurationMs,
+        easing: Easing.inOut((t) => Easing.quad(t)),
+        useNativeDriver: true,
+      })
+    );
+    sweep.start();
+
+    return () => {
+      sweep.stop();
+      sweepProgress.setValue(0);
+    };
+  }, [isBuffering, sweepDurationMs, sweepProgress]);
+
+  const sweepWidth = trackWidth * sweepWidthRatio;
+
+  return {
+    width: sweepWidth,
+    transform: [
+      {
+        translateX: sweepProgress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-sweepWidth, trackWidth],
+        }),
       },
-    }),
-    [
-      animatedStyle,
-      height,
-      trackBarHeight,
-      trackBarHeightPressed,
-      trackBarAnimMs,
-    ]
-  );
+    ],
+  };
 }

package/src/Audio/index.ts

@@ -1,5 +1,6 @@
 export { default } from './Audio';
 export { useAudioTagContext } from './AudioTagContext';
+export { isPlaybackActive } from './utils';
 
 export type {
   AudioTagHandle,

package/src/Audio/types.ts

@@ -23,7 +23,11 @@ export type AudioSource = AudioURISource | AudioRequireSource | string;
 
 export type PreloadType = 'auto' | 'metadata' | 'none';
 
-export type AudioTagPlaybackState = 'idle' | 'playing' | 'paused';
+/**
+ * `'buffering'` is a sub-state of `'playing'` — stalled on decoded data. See
+ * `onWaiting`/`onPlaying`.
+ */
+export type AudioTagPlaybackState = 'idle' | 'playing' | 'paused' | 'buffering';
 
 export interface AudioTagHandle {
   play: () => void;
@@ -83,6 +87,16 @@ interface AudioEventProps {
   onPlay: TMPEmptyEventHandler;
   onPause: TMPEmptyEventHandler;
   onVolumeChange: TMPNumberEventHandler;
+  /**
+   * Fires on a genuine stall (not a deliberate pause) — mirrors HTML media's
+   * `waiting`.
+   */
+  onWaiting: TMPEmptyEventHandler;
+  /**
+   * Fires when playback resumes after `onWaiting` — mirrors HTML media's
+   * `playing`.
+   */
+  onPlaying: TMPEmptyEventHandler;
 }
 
 export interface AudioPropsBase

package/src/Audio/utils.ts

@@ -2,7 +2,16 @@ import { useMemo } from 'react';
 import { Image, Platform } from 'react-native';
 import AudioContext from '../core/AudioContext';
 import type BaseAudioContext from '../core/BaseAudioContext';
-import { AudioProps, AudioPropsBase, AudioSource } from './types';
+import {
+  AudioProps,
+  AudioPropsBase,
+  AudioSource,
+  AudioTagPlaybackState,
+} from './types';
+
+export function isPlaybackActive(state: AudioTagPlaybackState): boolean {
+  return state === 'playing' || state === 'buffering';
+}
 
 const noop = () => {};
 const noopError = (_error: Error) => {};
@@ -38,6 +47,8 @@ export function withPropsDefaults(
     onPlay: props.onPlay ?? noop,
     onPause: props.onPause ?? noop,
     onVolumeChange: props.onVolumeChange ?? noopNumber,
+    onWaiting: props.onWaiting ?? noop,
+    onPlaying: props.onPlaying ?? noop,
   };
 }
 
@@ -72,6 +83,8 @@ export function useStableAudioProps(props: AudioProps): AudioPropsBase {
     onPlay,
     onPause,
     onVolumeChange,
+    onWaiting,
+    onPlaying,
   } = withPropsDefaults(props, resolvedContext);
 
   return useMemo(
@@ -98,6 +111,8 @@ export function useStableAudioProps(props: AudioProps): AudioPropsBase {
       onPlay,
       onPause,
       onVolumeChange,
+      onWaiting,
+      onPlaying,
     }),
     [
       autoPlay,
@@ -119,6 +134,8 @@ export function useStableAudioProps(props: AudioProps): AudioPropsBase {
       onPlay,
       onPause,
       onVolumeChange,
+      onWaiting,
+      onPlaying,
     ]
   );
 }
@@ -129,7 +146,8 @@ export function resolveSourcePath(source: AudioSource): string {
   }
 
   if (typeof source === 'number') {
-    return Image.resolveAssetSource(source).uri;
+    const uri = Image.resolveAssetSource(source)?.uri;
+    return uri ?? '';
   }
 
   return source.uri ?? '';

package/src/AudioAPIModule/AudioAPIModule.ts

@@ -12,7 +12,7 @@ class AudioAPIModule implements IAudioAPIModule {
   #canUseWorklets_ = false;
   #workletsVersion = 'unknown';
   #workletsAvailable_ = false;
-  private static readonly MIN_WORKLETS_VERSION = '0.6.0';
+  private static readonly MIN_WORKLETS_VERSION = '0.7.0';
 
   constructor() {
     // Important! Verify and import worklets first

package/src/core/AudioDecoder.ts

@@ -55,9 +55,11 @@ class AudioDecoder {
   }
 
   private resolveStringSource(input: number | string): string | number {
-    return typeof input === 'number'
-      ? Image.resolveAssetSource(input).uri
-      : input;
+    if (typeof input !== 'number') {
+      return input;
+    }
+
+    return Image.resolveAssetSource(input)?.uri ?? '';
   }
 
   private assertSupportedStringSource(

package/src/core/AudioParam.ts

@@ -24,6 +24,7 @@ export default class AudioParam {
 
   public set value(value: number) {
     this.audioParam.value = value;
+    this.setValueAtTime(value, this.context.currentTime);
   }
 
   public setValueAtTime(value: number, startTime: number): AudioParam {

package/src/events/types.ts

@@ -7,6 +7,10 @@ export interface EventTypeWithValue {
   value: number;
 }
 
+export interface EventTypeWithBool {
+  value: boolean;
+}
+
 export type InterruptionType = 'began' | 'ended';
 
 export interface OnInterruptionEventType {
@@ -75,6 +79,8 @@ interface AudioAPIEvents {
   positionChanged: EventTypeWithValue;
   bufferEnded: OnBufferEndEventType;
   recorderError: OnRecorderErrorEventType;
+  /** `value` is true while an `<Audio>` source is stalled on decoded data. */
+  bufferingStateChanged: EventTypeWithBool;
 }
 
 type AudioEvents = SystemEvents & AudioAPIEvents & NotificationEvents;

package/src/jsi-interfaces.ts

@@ -247,6 +247,7 @@ export interface IAudioFileSourceNode extends IAudioScheduledSourceNode {
 
   // passing subscriptionId(uint_64 in cpp, string in js) to the cpp
   onPositionChanged: string;
+  onBufferingStateChanged: string;
 }
 
 export interface IMediaElementAudioSourceNode extends IAudioNode {}