feat: use nitro sound/audio playback instead of rn video

Author: isekovanic

package/native-package/src/optionalDependencies/Sound.tsx

@@ -1,47 +1,340 @@
-import React from 'react';
+import type {
+  AVPlaybackStatusToSet,
+  PlaybackStatus,
+  SoundReturnType,
+} from 'stream-chat-react-native-core';
 
-import AudioVideoPlayer from './AudioVideo';
+let LegacyAudioRecorderPlayer;
+let createNitroSound;
+
+try {
+  ({ createSound: createNitroSound } = require('react-native-nitro-sound'));
+} catch (e) {
+  // do nothing
+}
+
+try {
+  LegacyAudioRecorderPlayer = require('react-native-audio-recorder-player').default;
+} catch (e) {
+  // do nothing
+}
+
+const PROGRESS_UPDATE_INTERVAL_MILLIS = 100;
+
+type NativePlaybackMeta = {
+  currentPosition?: number;
+  duration?: number;
+  isFinished?: boolean;
+};
+
+type NativePlaybackEndMeta = {
+  currentPosition: number;
+  duration: number;
+};
+
+type NativePlaybackInstance = {
+  addPlayBackListener: (callback: (meta: NativePlaybackMeta) => void) => void;
+  pausePlayer: () => Promise<string>;
+  removePlayBackListener: () => void;
+  resumePlayer: () => Promise<string>;
+  seekToPlayer: (time: number) => Promise<string>;
+  setPlaybackSpeed?: (playbackSpeed: number) => Promise<string>;
+  setSubscriptionDuration?: (seconds: number) => void | Promise<string>;
+  startPlayer: (uri?: string, httpHeaders?: Record<string, string>) => Promise<string>;
+  stopPlayer: () => Promise<string>;
+  addPlaybackEndListener?: (callback: (meta: NativePlaybackEndMeta) => void) => void;
+  dispose?: () => void;
+  removePlaybackEndListener?: () => void;
+};
+
+const createPlaybackInstance = (): NativePlaybackInstance | null => {
+  if (createNitroSound) {
+    return createNitroSound();
+  }
+
+  if (LegacyAudioRecorderPlayer) {
+    return new LegacyAudioRecorderPlayer();
+  }
+
+  return null;
+};
+
+const createPlaybackStatus = ({
+  didJustFinish = false,
+  durationMillis,
+  error = null,
+  isLoaded,
+  isPlaying,
+  positionMillis,
+}: {
+  didJustFinish?: boolean;
+  durationMillis: number;
+  error?: string | null;
+  isLoaded: boolean;
+  isPlaying: boolean;
+  positionMillis: number;
+}): PlaybackStatus => ({
+  currentPosition: positionMillis,
+  didJustFinish,
+  duration: durationMillis,
+  durationMillis,
+  error,
+  isBuffering: false,
+  isLoaded,
+  isLooping: false,
+  isMuted: false,
+  isPlaying,
+  isSeeking: false,
+  positionMillis,
+  shouldPlay: isPlaying,
+});
+
+class NativeAudioSoundAdapter implements SoundReturnType {
+  testID = 'native-audio-sound';
+  private playbackInstance: NativePlaybackInstance | null;
+  private sourceUri?: string;
+  private onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void;
+  private isDisposed = false;
+  private isLoaded = false;
+  private isPlaying = false;
+  private durationMillis = 0;
+  private positionMillis = 0;
+  private playbackRate = 1;
+  private hasProgressListener = false;
+  private hasPlaybackEndListener = false;
+
+  constructor({
+    source,
+    initialStatus,
+    onPlaybackStatusUpdate,
+  }: {
+    source?: { uri: string };
+    initialStatus?: Partial<AVPlaybackStatusToSet>;
+    onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void;
+  }) {
+    this.playbackInstance = createPlaybackInstance();
+    this.sourceUri = source?.uri;
+    this.onPlaybackStatusUpdate = onPlaybackStatusUpdate;
+    this.playbackRate = initialStatus?.rate ?? 1;
+    this.positionMillis = initialStatus?.positionMillis ?? 0;
+    const progressUpdateIntervalMillis =
+      initialStatus?.progressUpdateIntervalMillis ?? PROGRESS_UPDATE_INTERVAL_MILLIS;
+
+    this.playbackInstance?.setSubscriptionDuration?.(progressUpdateIntervalMillis / 1000);
+  }
+
+  private emitPlaybackStatus({
+    didJustFinish = false,
+    error = null,
+  }: {
+    didJustFinish?: boolean;
+    error?: string | null;
+  } = {}) {
+    this.onPlaybackStatusUpdate?.(
+      createPlaybackStatus({
+        didJustFinish,
+        durationMillis: this.durationMillis,
+        error,
+        isLoaded: this.isLoaded,
+        isPlaying: this.isPlaying,
+        positionMillis: this.positionMillis,
+      }),
+    );
+  }
+
+  private attachListeners() {
+    if (!this.playbackInstance || this.hasProgressListener) {
+      return;
+    }
+
+    this.playbackInstance.addPlayBackListener(this.handlePlaybackProgress);
+    this.hasProgressListener = true;
+
+    if (this.playbackInstance.addPlaybackEndListener) {
+      this.playbackInstance.addPlaybackEndListener(this.handlePlaybackEnd);
+      this.hasPlaybackEndListener = true;
+    }
+  }
+
+  private detachListeners() {
+    if (!this.playbackInstance) {
+      return;
+    }
+
+    if (this.hasProgressListener) {
+      this.playbackInstance.removePlayBackListener();
+      this.hasProgressListener = false;
+    }
+
+    if (this.hasPlaybackEndListener && this.playbackInstance.removePlaybackEndListener) {
+      this.playbackInstance.removePlaybackEndListener();
+      this.hasPlaybackEndListener = false;
+    }
+  }
+
+  private handlePlaybackProgress = ({ currentPosition, duration, isFinished }: NativePlaybackMeta) => {
+    this.positionMillis = currentPosition ?? this.positionMillis;
+    this.durationMillis = duration ?? this.durationMillis;
+
+    const didJustFinish =
+      isFinished === true &&
+      this.durationMillis > 0 &&
+      this.positionMillis >= this.durationMillis;
+
+    if (didJustFinish) {
+      this.isPlaying = false;
+    }
+
+    this.emitPlaybackStatus({ didJustFinish });
+  };
+
+  private handlePlaybackEnd = ({ currentPosition, duration }: NativePlaybackEndMeta) => {
+    this.positionMillis = currentPosition ?? this.positionMillis;
+    this.durationMillis = duration ?? this.durationMillis;
+    this.isPlaying = false;
+    this.emitPlaybackStatus({ didJustFinish: true });
+  };
+
+  private async ensureLoaded({ shouldPlay }: { shouldPlay: boolean }) {
+    if (!this.playbackInstance || this.isDisposed || !this.sourceUri) {
+      return false;
+    }
+
+    if (!this.isLoaded) {
+      this.attachListeners();
+      await this.playbackInstance.startPlayer(this.sourceUri);
+      this.isLoaded = true;
+
+      if (this.playbackRate !== 1 && this.playbackInstance.setPlaybackSpeed) {
+        await this.playbackInstance.setPlaybackSpeed(this.playbackRate);
+      }
+
+      if (this.positionMillis > 0) {
+        await this.playbackInstance.seekToPlayer(this.positionMillis);
+      }
+
+      if (!shouldPlay) {
+        await this.playbackInstance.pausePlayer();
+      }
+    } else if (shouldPlay) {
+      await this.playbackInstance.resumePlayer();
+    }
+
+    return true;
+  }
+
+  playAsync: SoundReturnType['playAsync'] = async () => {
+    const loaded = await this.ensureLoaded({ shouldPlay: true });
+    if (!loaded) {
+      return;
+    }
+
+    this.isPlaying = true;
+    this.emitPlaybackStatus();
+  };
+
+  resume: SoundReturnType['resume'] = () => {
+    void this.playAsync?.();
+  };
+
+  pauseAsync: SoundReturnType['pauseAsync'] = async () => {
+    if (!this.playbackInstance || !this.isLoaded || this.isDisposed) {
+      return;
+    }
+
+    await this.playbackInstance.pausePlayer();
+    this.isPlaying = false;
+    this.emitPlaybackStatus();
+  };
+
+  pause: SoundReturnType['pause'] = () => {
+    void this.pauseAsync?.();
+  };
+
+  seek: SoundReturnType['seek'] = async (progress) => {
+    const loaded = await this.ensureLoaded({ shouldPlay: false });
+    if (!loaded || !this.playbackInstance) {
+      return;
+    }
+
+    this.positionMillis = progress * 1000;
+    await this.playbackInstance.seekToPlayer(this.positionMillis);
+    this.emitPlaybackStatus();
+  };
+
+  setPositionAsync: SoundReturnType['setPositionAsync'] = async (millis) => {
+    await this.seek?.(millis / 1000);
+  };
+
+  setRateAsync: SoundReturnType['setRateAsync'] = async (rate) => {
+    this.playbackRate = rate;
+
+    if (this.playbackInstance?.setPlaybackSpeed && this.isLoaded) {
+      await this.playbackInstance.setPlaybackSpeed(rate);
+    }
+  };
+
+  replayAsync: SoundReturnType['replayAsync'] = async () => {
+    await this.stopAsync?.();
+    this.positionMillis = 0;
+    await this.playAsync?.();
+  };
+
+  stopAsync: SoundReturnType['stopAsync'] = async () => {
+    if (!this.playbackInstance || !this.isLoaded || this.isDisposed) {
+      return;
+    }
+
+    await this.playbackInstance.stopPlayer();
+    this.isLoaded = false;
+    this.isPlaying = false;
+    this.positionMillis = 0;
+    this.emitPlaybackStatus();
+  };
+
+  unloadAsync: SoundReturnType['unloadAsync'] = async () => {
+    if (this.isDisposed) {
+      return;
+    }
+
+    try {
+      if (this.isLoaded && this.playbackInstance) {
+        await this.playbackInstance.stopPlayer();
+      }
+    } catch {
+      // Best effort cleanup.
+    }
+
+    this.detachListeners();
+    this.playbackInstance?.dispose?.();
+    this.isLoaded = false;
+    this.isPlaying = false;
+    this.isDisposed = true;
+  };
+}
+
+const initializeSound =
+  createNitroSound || LegacyAudioRecorderPlayer
+    ? async (
+        source?: { uri: string },
+        initialStatus?: Partial<AVPlaybackStatusToSet>,
+        onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void,
+      ) => {
+        if (!source?.uri) {
+          return null;
+        }
+
+        const sound = new NativeAudioSoundAdapter({
+          initialStatus,
+          onPlaybackStatusUpdate,
+          source,
+        });
+
+        return sound;
+      }
+    : null;
 
 export const Sound = {
-  initializeSound: null,
-  // eslint-disable-next-line react/display-name
-  Player: AudioVideoPlayer
-    ? ({
-        onBuffer,
-        onEnd,
-        onLoad,
-        onLoadStart,
-        onPlaybackStateChanged,
-        onProgress,
-        onSeek,
-        paused,
-        rate,
-        soundRef,
-        style,
-        uri,
-      }) => (
-        <AudioVideoPlayer
-          audioOnly={true}
-          ignoreSilentSwitch={'ignore'}
-          onBuffer={onBuffer}
-          onEnd={onEnd}
-          onError={(error: Error) => {
-            console.log(error);
-          }}
-          onLoad={onLoad}
-          onLoadStart={onLoadStart}
-          onPlaybackStateChanged={onPlaybackStateChanged}
-          onProgress={onProgress}
-          onSeek={onSeek}
-          paused={paused}
-          rate={rate}
-          ref={soundRef}
-          progressUpdateInterval={100}
-          source={{
-            uri,
-          }}
-          style={style}
-        />
-      )
-    : null,
+  initializeSound,
+  Player: null,
 };

package/src/components/Attachment/Audio/AudioAttachment.tsx

@@ -131,7 +131,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
 
   /** This is for Native CLI Apps */
   const handleLoad = (payload: VideoPayloadData) => {
-    // If the attachment is a voice recording, we rely on the duration from the attachment as the one from the react-native-video is incorrect.
+    // Voice recordings already carry the canonical duration in the attachment payload.
     if (isVoiceRecording) {
       return;
     }