stream-chat-expo 7.1.2 → 7.2.0-beta.1

package/README.md

@@ -10,7 +10,7 @@
 [![NPM](https://img.shields.io/npm/v/stream-chat-react-native.svg)](https://www.npmjs.com/package/stream-chat-react-native)
 [![Build Status](https://github.com/GetStream/stream-chat-react-native/actions/workflows/release.yml/badge.svg)](https://github.com/GetStream/stream-chat-react-native/actions)
 [![Component Reference](https://img.shields.io/badge/docs-component%20reference-blue.svg)](https://getstream.io/chat/docs/sdk/reactnative)
-![JS Bundle Size](https://img.shields.io/badge/js_bundle_size-459%20KB-blue)
+![JS Bundle Size](https://img.shields.io/badge/js_bundle_size-450%20KB-blue)
 
 <img align="right" src="https://getstream.imgix.net/images/ios-chat-tutorial/iphone_chat_art@3x.png?auto=format,enhance" width="50%" />
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-expo",
   "description": "The official Expo SDK for Stream Chat, a service for building chat applications",
-  "version": "7.1.2",
+  "version": "7.2.0-beta.1",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -11,7 +11,7 @@
   "types": "types/index.d.ts",
   "dependencies": {
     "mime": "^4.0.7",
-    "stream-chat-react-native-core": "7.1.2"
+    "stream-chat-react-native-core": "7.2.0-beta.1"
   },
   "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/src/optionalDependencies/Audio.ts

@@ -1,3 +1,5 @@
+import { Platform } from 'react-native';
+
 import {
   AndroidAudioEncoder,
   AndroidOutputFormat,
@@ -5,10 +7,22 @@ import {
   IOSAudioQuality,
   IOSOutputFormat,
   ExpoRecordingOptions as RecordingOptions,
+  RecordingStatus,
 } from 'stream-chat-react-native-core';
 
 import { AudioComponent, RecordingObject } from './AudioVideo';
 
+let ExpoAudioComponent;
+let ExpoRecordingComponent;
+
+try {
+  const { AudioModule } = require('expo-audio');
+  ExpoAudioComponent = AudioModule;
+  ExpoRecordingComponent = AudioModule.AudioRecorder;
+} catch (e) {
+  // do nothing
+}
+
 const sleep = (ms: number) =>
   new Promise<void>((resolve) => {
     setTimeout(() => {
@@ -16,7 +30,7 @@ const sleep = (ms: number) =>
     }, ms);
   });
 
-class _Audio {
+class _AudioExpoAV {
   recording: typeof RecordingObject | null = null;
   audioRecordingConfiguration: AudioRecordingConfiguration = {
     mode: {
@@ -105,8 +119,233 @@ class _Audio {
   };
 }
 
+class _AudioExpoAudio {
+  recording: typeof RecordingObject | null = null;
+  audioRecordingConfiguration: AudioRecordingConfiguration = {
+    mode: {
+      allowsRecordingIOS: true,
+      playsInSilentModeIOS: true,
+    },
+    options: {
+      android: {
+        audioEncoder: AndroidAudioEncoder.AAC,
+        extension: '.aac',
+        outputFormat: AndroidOutputFormat.AAC_ADTS,
+      },
+      ios: {
+        audioQuality: IOSAudioQuality.HIGH,
+        bitRate: 128000,
+        extension: '.aac',
+        numberOfChannels: 2,
+        outputFormat: IOSOutputFormat.MPEG4AAC,
+        sampleRate: 44100,
+      },
+      isMeteringEnabled: true,
+      web: {},
+    },
+  };
+
+  startRecording = async (recordingOptions: RecordingOptions, onRecordingStatusUpdate) => {
+    try {
+      const permissions = await ExpoAudioComponent.getRecordingPermissionsAsync();
+      const permissionsStatus = permissions.status;
+      let permissionsGranted = permissions.granted;
+
+      // If permissions have not been determined yet, ask the user for permissions.
+      if (permissionsStatus === 'undetermined') {
+        const newPermissions = await ExpoAudioComponent.requestRecordingPermissionsAsync();
+        permissionsGranted = newPermissions.granted;
+      }
+
+      // If they are explicitly denied after this, exit early by throwing an error
+      // that will be caught in the catch block below (as a single source of not
+      // starting the player). The player would error itself anyway if we did not do
+      // this, but there's no reason to run the asynchronous calls when we know
+      // immediately that the player will not be run.
+      if (!permissionsGranted) {
+        throw new Error('Missing audio recording permission.');
+      }
+      await ExpoAudioComponent.setAudioModeAsync(
+        expoAvToExpoAudioModeAdapter(this.audioRecordingConfiguration.mode),
+      );
+      const options = {
+        ...recordingOptions,
+        ...this.audioRecordingConfiguration.options,
+      };
+
+      this.recording = new ExpoAudioRecordingAdapter(options);
+      await this.recording.createAsync(
+        Platform.OS === 'android' ? 100 : 60,
+        onRecordingStatusUpdate,
+      );
+      return { accessGranted: true, recording: this.recording };
+    } catch (error) {
+      console.error('Failed to start recording', error);
+      this.recording = null;
+      return { accessGranted: false, recording: null };
+    }
+  };
+  stopRecording = async () => {
+    try {
+      if (this.recording) {
+        await this.recording.stopAndUnloadAsync();
+      }
+      this.recording = null;
+    } catch (error) {
+      console.log('Error stopping recoding', error);
+    }
+  };
+}
+
+class ExpoAudioRecordingAdapter {
+  private recording;
+  private recordingStateInterval;
+  private uri;
+  private options;
+
+  constructor(options: RecordingOptions) {
+    // Currently, expo-audio has a bug where isMeteringEnabled is not respected
+    // whenever we pass it to the Recording class constructor - but rather it is
+    // only respected whenever you pass it to prepareToRecordAsync. That in turn
+    // however, means that all other audio related configuration will be overwritten
+    // and forgotten. So, we snapshot the configuration whenever we create an instance
+    // of a recorder and pass it to both places. Furthermore, the type of the options
+    // in prepareToRecordAsync is wrong - it's supposed to be the flattened config;
+    // otherwise none of the quality properties get respected either (only the top level
+    // ones).
+    this.options = flattenExpoAudioRecordingOptions(options);
+    this.recording = new ExpoRecordingComponent(this.options);
+    this.uri = null;
+  }
+
+  createAsync = async (
+    progressUpdateInterval: number = 500,
+    onRecordingStatusUpdate: (status: RecordingStatus) => void,
+  ) => {
+    this.recordingStateInterval = setInterval(() => {
+      const status = this.recording.getStatus();
+      onRecordingStatusUpdate(status);
+    }, progressUpdateInterval);
+    this.uri = null;
+    await this.recording.prepareToRecordAsync(this.options);
+    this.recording.record();
+  };
+
+  stopAndUnloadAsync = async () => {
+    clearInterval(this.recordingStateInterval);
+    await this.recording.stop();
+    this.uri = this.recording.uri;
+    this.recording.release();
+  };
+
+  getURI = () => this.uri;
+}
+
 export const overrideAudioRecordingConfiguration = (
   audioRecordingConfiguration: AudioRecordingConfiguration,
 ) => audioRecordingConfiguration;
 
-export const Audio = AudioComponent ? new _Audio() : null;
+const flattenExpoAudioRecordingOptions = (
+  options: RecordingOptions & {
+    bitRate?: number;
+    extension?: string;
+    numberOfChannels?: number;
+    sampleRate?: number;
+  },
+) => {
+  let commonOptions = {
+    bitRate: options.bitRate,
+    extension: options.extension,
+    isMeteringEnabled: options.isMeteringEnabled ?? false,
+    numberOfChannels: options.numberOfChannels,
+    sampleRate: options.sampleRate,
+  };
+
+  if (Platform.OS === 'ios') {
+    commonOptions = {
+      ...commonOptions,
+      ...options.ios,
+    };
+  } else if (Platform.OS === 'android') {
+    const audioEncoder = options.android.audioEncoder;
+    const audioEncoderConfig = audioEncoder
+      ? { audioEncoder: expoAvToExpoAudioAndroidEncoderAdapter(audioEncoder) }
+      : {};
+    const outputFormat = options.android.outputFormat;
+    const outputFormatConfig = outputFormat
+      ? { outputFormat: expoAvToExpoAudioAndroidOutputAdapter(outputFormat) }
+      : {};
+    commonOptions = {
+      ...commonOptions,
+      ...options.android,
+      ...audioEncoderConfig,
+      ...outputFormatConfig,
+    };
+  }
+  return commonOptions;
+};
+
+const expoAvToExpoAudioModeAdapter = (mode: AudioRecordingConfiguration['mode']) => {
+  const {
+    allowsRecordingIOS,
+    interruptionModeAndroid,
+    interruptionModeIOS,
+    playsInSilentModeIOS,
+    playThroughEarpieceAndroid,
+    staysActiveInBackground,
+  } = mode;
+
+  return {
+    allowsRecording: allowsRecordingIOS,
+    interruptionMode: interruptionModeIOS,
+    interruptionModeAndroid,
+    playsInSilentMode: playsInSilentModeIOS,
+    shouldPlayInBackground: staysActiveInBackground,
+    shouldRouteThroughEarpiece: playThroughEarpieceAndroid,
+  };
+};
+
+const expoAvToExpoAudioAndroidEncoderAdapter = (
+  audioEncoder: AudioRecordingConfiguration['options']['android']['audioEncoder'],
+) => {
+  const encoderMap = {
+    0: 'default',
+    1: 'amr_nb',
+    2: 'amr_wb',
+    3: 'aac',
+    4: 'he_aac',
+    5: 'aac_eld',
+  };
+
+  return Object.keys(encoderMap).includes(audioEncoder.toString())
+    ? encoderMap[audioEncoder]
+    : 'default';
+};
+
+const expoAvToExpoAudioAndroidOutputAdapter = (
+  outputFormat: AudioRecordingConfiguration['options']['android']['outputFormat'],
+) => {
+  const outputFormatMap = {
+    0: 'default',
+    1: '3gp',
+    2: 'mpeg4',
+    3: 'amrnb',
+    4: 'amrwb',
+    5: 'default',
+    6: 'aac_adts',
+    7: 'default',
+    8: 'mpeg2ts',
+    9: 'webm',
+  };
+
+  return Object.keys(outputFormatMap).includes(outputFormat.toString())
+    ? outputFormatMap[outputFormat]
+    : 'default';
+};
+
+// Always try to prioritize expo-audio if it's there.
+export const Audio = ExpoRecordingComponent
+  ? new _AudioExpoAudio()
+  : AudioComponent
+    ? new _AudioExpoAV()
+    : null;

package/src/optionalDependencies/Sound.ts

@@ -1,18 +1,177 @@
+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
+  // Always try to prioritize expo-audio if it's there.
+  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(onPlaybackStatusUpdate);
+        await sound.loadAsync(source, initialStatus);
         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;
+  private onPlaybackStatusUpdate;
+
+  constructor(onPlaybackStatusUpdate: (playbackStatus: PlaybackStatus) => void) {
+    this.onPlaybackStatusUpdate = (playbackStatus: ExpoAudioPlaybackStatus) => {
+      onPlaybackStatusUpdate(expoAudioToExpoAvStatusAdapter(playbackStatus));
+      if (playbackStatus.didJustFinish) {
+        this.unsubscribeStatusEventListener();
+      }
+    };
+  }
+
+  subscribeStatusEventListener = () => {
+    if (this.statusEventListener) {
+      this.unsubscribeStatusEventListener();
+    }
+    this.statusEventListener = this.player.addListener(
+      'playbackStatusUpdate',
+      this.onPlaybackStatusUpdate,
+    );
+  };
+
+  unsubscribeStatusEventListener = () => {
+    if (this.statusEventListener) {
+      this.statusEventListener.remove();
+      this.statusEventListener = null;
+    }
+  };
+
+  // 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.unsubscribeStatusEventListener();
+    this.player.seekTo(0);
+    this.player.pause();
+  };
+
+  // eslint-disable-next-line require-await
+  unloadAsync: SoundReturnType['unloadAsync'] = async () => {
+    this.unsubscribeStatusEventListener();
+    this.player.release();
+  };
+
+  // eslint-disable-next-line require-await
+  playAsync: SoundReturnType['playAsync'] = async () => {
+    this.subscribeStatusEventListener();
+    this.player.play();
+  };
+
+  // eslint-disable-next-line require-await
+  pauseAsync: SoundReturnType['pauseAsync'] = async () => {
+    this.unsubscribeStatusEventListener();
+    this.player.pause();
+  };
+
+  // eslint-disable-next-line require-await
+  replayAsync: SoundReturnType['replayAsync'] = async () => {
+    this.subscribeStatusEventListener();
+    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,
+  ) => {
+    // On Android, pitch correction sets the playback speed to 1f every time
+    // as seen here: https://github.com/expo/expo/blob/f9d82c5af6d472c257b14c2657938db1be4a1b2c/packages/expo-audio/android/src/main/java/expo/modules/audio/AudioModule.kt#L409
+    // Pitch correction is set to true whenever the pitchCorrectionQuality parameter is set,
+    // so there isn't much we can do about it for now.
+    // This is wrong and will likely be fixed within the library.
+    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
+  };
+};