feat: add support for playing audio with expo-video

Author: isekovanic

examples/ExpoMessaging/app.json

@@ -62,7 +62,11 @@
           "supportsBackgroundPlayback": true,
           "supportsPictureInPicture": true
         }
-      ]
+      ],
+      "expo-audio",
+      {
+        "microphonePermission": "$(PRODUCT_NAME) would like to use your microphone for voice recording."
+      }
     ]
   }
 }

examples/ExpoMessaging/components/ChatWrapper.tsx

@@ -16,7 +16,7 @@ const streami18n = new Streami18n({
 });
 
 SqliteClient.logger = (level, message, extraData) => {
-  console.log(level, `SqliteClient: ${message}`, extraData);
+  // console.log(level, `SqliteClient: ${message}`, extraData);
 };
 
 export const ChatWrapper = ({ children }: PropsWithChildren<{}>) => {

examples/ExpoMessaging/package.json

@@ -14,6 +14,7 @@
     "@react-native-community/netinfo": "11.4.1",
     "@react-navigation/elements": "^1.3.31",
     "expo": "^53.0.12",
+    "expo-audio": "~0.4.6",
     "expo-av": "~15.1.6",
     "expo-clipboard": "~7.1.4",
     "expo-constants": "~17.1.6",

examples/ExpoMessaging/yarn.lock

@@ -3646,6 +3646,11 @@ expo-asset@~11.1.5:
     "@expo/image-utils" "^0.7.4"
     expo-constants "~17.1.5"
 
+expo-audio@~0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/expo-audio/-/expo-audio-0.4.6.tgz#39def71b91f2cb5c4d21a51aef6ffabcc4421ad4"
+  integrity sha512-/pgz0AnQHnyJWkPfTp/3gBDib6FZYnscpktFZgmPeTeCK8KkPV4+eV2oEDDbSe2ngUrqDA0WVO4MX2Mfeec9ZA==
+
 expo-av@~15.1.6:
   version "15.1.6"
   resolved "https://registry.yarnpkg.com/expo-av/-/expo-av-15.1.6.tgz#f1c4a404672500feb0274144a64bb3a956e85bdd"

package/expo-package/package.json

@@ -11,7 +11,7 @@
   "types": "types/index.d.ts",
   "dependencies": {
     "mime": "^4.0.7",
-    "stream-chat-react-native-core": "7.1.1"
+    "stream-chat-react-native-core": "link:../"
   },
   "peerDependencies": {
     "expo": ">=51.0.0",
@@ -24,12 +24,16 @@
     "expo-image-picker": "*",
     "expo-media-library": "*",
     "expo-sharing": "*",
-    "expo-video": "*"
+    "expo-video": "*",
+    "expo-audio": "*"
   },
   "peerDependenciesMeta": {
     "expo-av": {
       "optional": true
     },
+    "expo-audio": {
+      "optional": true
+    },
     "expo-video": {
       "optional": true
     },
@@ -57,7 +61,8 @@
   },
   "devDependencies": {
     "expo": "^53.0.12",
-    "expo-image-manipulator": "^12.0.5"
+    "expo-image-manipulator": "^12.0.5",
+    "expo-audio": "~0.4.6"
   },
   "scripts": {
     "prepack": " cp ../../README.md .",

package/expo-package/src/optionalDependencies/Sound.ts

@@ -1,18 +1,154 @@
+import type { PlaybackStatus, SoundReturnType } from 'stream-chat-react-native-core';
+
 import { AudioComponent } from './AudioVideo';
 
+let ExpoAudioComponent;
+let expoCreateSoundPlayer;
+
+try {
+  const { createAudioPlayer, AudioModule } = require('expo-audio');
+  ExpoAudioComponent = AudioModule;
+  expoCreateSoundPlayer = createAudioPlayer;
+} catch (e) {
+  // do nothing
+}
+
 export const Sound = {
-  initializeSound: AudioComponent
+  initializeSound: ExpoAudioComponent
     ? async (source, initialStatus, onPlaybackStatusUpdate: (playbackStatus) => void) => {
-        await AudioComponent.setAudioModeAsync({
-          playsInSilentModeIOS: true,
+        await ExpoAudioComponent.setAudioModeAsync({
+          playsInSilentMode: true,
         });
-        const { sound } = await AudioComponent.Sound.createAsync(
-          source,
-          initialStatus,
-          onPlaybackStatusUpdate,
-        );
+        const sound = new ExpoAudioSoundAdapter();
+        await sound.loadAsync(source, initialStatus);
+        sound.setOnPlaybackStatusUpdate(onPlaybackStatusUpdate);
         return sound;
       }
-    : null,
+    : AudioComponent
+      ? async (source, initialStatus, onPlaybackStatusUpdate: (playbackStatus) => void) => {
+          await AudioComponent.setAudioModeAsync({
+            playsInSilentModeIOS: true,
+          });
+          const { sound } = await AudioComponent.Sound.createAsync(
+            source,
+            initialStatus,
+            onPlaybackStatusUpdate,
+          );
+          return sound;
+        }
+      : null,
   Player: null,
 };
+
+type ExpoAudioPlaybackStatus = {
+  currentTime: number;
+  didJustFinish: boolean;
+  duration: number;
+  id: number;
+  isBuffering: boolean;
+  isLoaded: boolean;
+  loop: boolean;
+  mute: boolean;
+  playbackRate: number;
+  playbackState: string;
+  playing: boolean;
+  reasonForWaitingToPlay: string;
+  shouldCorrectPitch: boolean;
+  timeControlStatus: string;
+};
+
+class ExpoAudioSoundAdapter {
+  private player;
+  private statusEventListener;
+  private initialPitchCorrectionQuality;
+  private initialShouldCorrectPitch;
+
+  constructor() {}
+
+  setOnPlaybackStatusUpdate = (
+    onPlaybackStatusUpdate: (playbackStatus: PlaybackStatus) => void,
+  ) => {
+    this.statusEventListener = this.player.addListener(
+      'playbackStatusUpdate',
+      (playbackStatus: ExpoAudioPlaybackStatus) => {
+        onPlaybackStatusUpdate(expoAudioToExpoAvStatusAdapter(playbackStatus));
+      },
+    );
+  };
+
+  // eslint-disable-next-line require-await
+  loadAsync = async (source, initialStatus) => {
+    this.player = expoCreateSoundPlayer?.(source, initialStatus.progressUpdateIntervalMillis);
+    this.initialShouldCorrectPitch = initialStatus.shouldCorrectPitch;
+    this.initialPitchCorrectionQuality = initialStatus.pitchCorrectionQuality;
+  };
+
+  // eslint-disable-next-line require-await
+  stopAsync: SoundReturnType['stopAsync'] = async () => {
+    this.player.seekTo(0);
+    this.player.pause();
+  };
+
+  // eslint-disable-next-line require-await
+  unloadAsync: SoundReturnType['unloadAsync'] = async () => {
+    this.statusEventListener.remove();
+    this.player.remove();
+  };
+
+  // eslint-disable-next-line require-await
+  playAsync: SoundReturnType['playAsync'] = async () => {
+    this.player.play();
+  };
+
+  // eslint-disable-next-line require-await
+  pauseAsync: SoundReturnType['pauseAsync'] = async () => {
+    this.player.pause();
+  };
+
+  // eslint-disable-next-line require-await
+  replayAsync: SoundReturnType['replayAsync'] = async () => {
+    this.player.seekTo(0);
+  };
+
+  // eslint-disable-next-line require-await
+  setPositionAsync: SoundReturnType['setPositionAsync'] = async (milliseconds) => {
+    const seconds = milliseconds / 1000;
+    this.player.seekTo(seconds);
+  };
+
+  // eslint-disable-next-line require-await
+  setRateAsync: SoundReturnType['setRateAsync'] = async (
+    rate,
+    shouldCorrectPitch = this.initialShouldCorrectPitch,
+    pitchCorrectionQuality = this.initialPitchCorrectionQuality,
+  ) => {
+    if (shouldCorrectPitch && pitchCorrectionQuality) {
+      this.player.setPlaybackRate(rate, pitchCorrectionQuality);
+      return;
+    }
+    this.player.setPlaybackRate(rate);
+  };
+}
+
+const expoAudioToExpoAvStatusAdapter = (
+  playbackStatus: ExpoAudioPlaybackStatus,
+): PlaybackStatus => {
+  const { currentTime, didJustFinish, duration, isBuffering, isLoaded, loop, mute, playing } =
+    playbackStatus;
+
+  return {
+    currentPosition: undefined, // not present in the expo-av api, breaks things if set
+    didJustFinish,
+    duration: undefined, // not present in the expo-av api, breaks things if set
+    durationMillis: duration * 1000,
+    error: null, // TODO: check how we can see if there is an error
+    isBuffering,
+    isLoaded,
+    isLooping: loop,
+    isMuted: mute,
+    isPlaying: playing,
+    isSeeking: false, // we don't use this anywhere, so just defaulting to a safe value since nothing similar exists in expo-audio
+    positionMillis: currentTime * 1000,
+    shouldPlay: undefined, // we cannot determine whether the audio should be playing or not
+  };
+};