@sendbird/uikit-react-native 3.1.1 → 3.2.0

package/src/platform/createPlayerService.native.tsx

@@ -0,0 +1,148 @@
+import { Platform } from 'react-native';
+import type * as RNAudioRecorder from 'react-native-audio-recorder-player';
+import * as Permissions from 'react-native-permissions';
+
+import { matchesOneOf, sleep } from '@sendbird/uikit-utils';
+
+import type { PlayerServiceInterface, Unsubscribe } from './types';
+
+type Modules = {
+  audioRecorderModule: typeof RNAudioRecorder;
+  permissionModule: typeof Permissions;
+};
+type PlaybackListener = Parameters<PlayerServiceInterface['addPlaybackListener']>[number];
+type StateListener = Parameters<PlayerServiceInterface['addStateListener']>[number];
+const createNativePlayerService = ({ audioRecorderModule, permissionModule }: Modules): PlayerServiceInterface => {
+  const module = new audioRecorderModule.default();
+
+  class VoicePlayer implements PlayerServiceInterface {
+    uri?: string;
+    state: PlayerServiceInterface['state'] = 'idle';
+
+    private readonly playbackSubscribers = new Set<PlaybackListener>();
+    private readonly stateSubscribers = new Set<StateListener>();
+
+    constructor() {
+      module.setSubscriptionDuration(0.1);
+    }
+
+    private setState = (state: PlayerServiceInterface['state']) => {
+      this.state = state;
+      this.stateSubscribers.forEach((callback) => {
+        callback(state);
+      });
+    };
+
+    private setListener = () => {
+      module.addPlayBackListener((data) => {
+        const stopped = data.currentPosition >= data.duration;
+
+        if (stopped) this.stop();
+        if (this.state === 'playing') {
+          this.playbackSubscribers.forEach((callback) => {
+            callback({ currentTime: data.currentPosition, duration: data.duration, stopped });
+          });
+        }
+      });
+    };
+
+    private removeListener = () => {
+      module.removePlayBackListener();
+    };
+
+    public requestPermission = async (): Promise<boolean> => {
+      if (Platform.OS === 'android') {
+        const { READ_MEDIA_AUDIO, READ_EXTERNAL_STORAGE } = permissionModule.PERMISSIONS.ANDROID;
+        const permission = Platform.Version > 32 ? READ_MEDIA_AUDIO : READ_EXTERNAL_STORAGE;
+
+        const status = await permissionModule.check(permission);
+        if (status === 'granted') {
+          return true;
+        } else {
+          const status = await permissionModule.request(permission);
+          return status === 'granted';
+        }
+      } else {
+        return true;
+      }
+    };
+
+    public addPlaybackListener = (callback: PlaybackListener): Unsubscribe => {
+      this.playbackSubscribers.add(callback);
+      return () => {
+        this.playbackSubscribers.delete(callback);
+      };
+    };
+
+    public addStateListener = (callback: (state: PlayerServiceInterface['state']) => void): Unsubscribe => {
+      this.stateSubscribers.add(callback);
+      return () => {
+        this.stateSubscribers.delete(callback);
+      };
+    };
+
+    public play = async (uri: string): Promise<void> => {
+      if (matchesOneOf(this.state, ['idle', 'stopped'])) {
+        try {
+          this.setState('preparing');
+          this.uri = uri;
+          this.setListener();
+
+          // FIXME: Workaround, `module.startPlayer()` caused a significant frame-drop and prevented the 'preparing' UI transition.
+          await sleep(0);
+          await module.startPlayer(uri);
+
+          this.setState('playing');
+        } catch (e) {
+          this.setState('idle');
+          this.uri = undefined;
+          this.removeListener();
+          throw e;
+        }
+      } else if (matchesOneOf(this.state, ['paused']) && this.uri === uri) {
+        try {
+          this.setListener();
+          await module.resumePlayer();
+          this.setState('playing');
+        } catch (e) {
+          this.removeListener();
+          throw e;
+        }
+      }
+    };
+
+    public pause = async (): Promise<void> => {
+      if (matchesOneOf(this.state, ['playing'])) {
+        await module.pausePlayer();
+        this.removeListener();
+        this.setState('paused');
+      }
+    };
+
+    public stop = async (): Promise<void> => {
+      if (matchesOneOf(this.state, ['preparing', 'playing', 'paused'])) {
+        await module.stopPlayer();
+        this.removeListener();
+        this.setState('stopped');
+      }
+    };
+
+    public reset = async (): Promise<void> => {
+      await this.stop();
+      this.setState('idle');
+      this.uri = undefined;
+      this.playbackSubscribers.clear();
+      this.stateSubscribers.clear();
+    };
+
+    public seek = async (time: number): Promise<void> => {
+      if (matchesOneOf(this.state, ['playing', 'paused'])) {
+        await module.seekToPlayer(time);
+      }
+    };
+  }
+
+  return new VoicePlayer();
+};
+
+export default createNativePlayerService;

package/src/platform/createRecorderService.expo.tsx

@@ -0,0 +1,160 @@
+import * as ExpoAV from 'expo-av';
+import type { RecordingOptions } from 'expo-av/build/Audio/Recording.types';
+import { Platform } from 'react-native';
+
+import { matchesOneOf, sleep } from '@sendbird/uikit-utils';
+
+import VoiceMessageConfig from '../libs/VoiceMessageConfig';
+import expoPermissionGranted from '../utils/expoPermissionGranted';
+import type { RecorderServiceInterface, Unsubscribe } from './types';
+
+type RecordingListener = Parameters<RecorderServiceInterface['addRecordingListener']>[number];
+type StateListener = Parameters<RecorderServiceInterface['addStateListener']>[number];
+type Modules = {
+  avModule: typeof ExpoAV;
+};
+const createExpoRecorderService = ({ avModule }: Modules): RecorderServiceInterface => {
+  class VoiceRecorder implements RecorderServiceInterface {
+    public uri: RecorderServiceInterface['uri'] = undefined;
+    public state: RecorderServiceInterface['state'] = 'idle';
+    public options: RecorderServiceInterface['options'] = {
+      minDuration: VoiceMessageConfig.DEFAULT.RECORDER.MIN_DURATION,
+      maxDuration: VoiceMessageConfig.DEFAULT.RECORDER.MAX_DURATION,
+      extension: VoiceMessageConfig.DEFAULT.RECORDER.EXTENSION,
+    };
+
+    // NOTE: In Android, even when startRecorder() is awaited, if stop() is executed immediately afterward, an error occurs
+    private _recordStartedAt = 0;
+    private _getRecorderStopSafeBuffer = () => {
+      const minWaitingTime = 500;
+      const elapsedTime = Date.now() - this._recordStartedAt;
+      if (elapsedTime > minWaitingTime) return 0;
+      else return minWaitingTime - elapsedTime;
+    };
+
+    private _recorder = new avModule.Audio.Recording();
+    private readonly _recordingSubscribers = new Set<RecordingListener>();
+    private readonly _stateSubscribers = new Set<StateListener>();
+    private readonly _audioSettings = {
+      sampleRate: VoiceMessageConfig.DEFAULT.RECORDER.SAMPLE_RATE,
+      bitRate: VoiceMessageConfig.DEFAULT.RECORDER.BIT_RATE,
+      numberOfChannels: VoiceMessageConfig.DEFAULT.RECORDER.CHANNELS,
+      // encoding: mpeg4_aac
+    };
+    private readonly _audioOptions: RecordingOptions = {
+      android: {
+        ...this._audioSettings,
+        extension: `.${this.options.extension}`,
+        audioEncoder: avModule.Audio.AndroidAudioEncoder.AAC,
+        outputFormat: avModule.Audio.AndroidOutputFormat.MPEG_4,
+      },
+      ios: {
+        ...this._audioSettings,
+        extension: `.${this.options.extension}`,
+        outputFormat: avModule.Audio.IOSOutputFormat.MPEG4AAC,
+        audioQuality: avModule.Audio.IOSAudioQuality.HIGH,
+      },
+      web: {},
+    };
+
+    private prepare = async () => {
+      this.setState('preparing');
+      if (Platform.OS === 'ios') {
+        await avModule.Audio.setAudioModeAsync({ allowsRecordingIOS: true, playsInSilentModeIOS: true });
+      }
+
+      if (this._recorder._isDoneRecording) {
+        this._recorder = new avModule.Audio.Recording();
+      }
+      this._recorder.setProgressUpdateInterval(100);
+      this._recorder.setOnRecordingStatusUpdate((status) => {
+        const completed = status.durationMillis >= this.options.maxDuration;
+        if (completed) this.stop();
+        if (status.isRecording) {
+          this._recordingSubscribers.forEach((callback) => {
+            callback({ currentTime: status.durationMillis, completed: completed });
+          });
+        }
+      });
+      await this._recorder.prepareToRecordAsync(this._audioOptions);
+    };
+
+    private setState = (state: RecorderServiceInterface['state']) => {
+      this.state = state;
+      this._stateSubscribers.forEach((callback) => {
+        callback(state);
+      });
+    };
+
+    public requestPermission = async (): Promise<boolean> => {
+      const status = await avModule.Audio.getPermissionsAsync();
+      if (expoPermissionGranted([status])) {
+        return true;
+      } else {
+        const status = await avModule.Audio.requestPermissionsAsync();
+        return expoPermissionGranted([status]);
+      }
+    };
+
+    public addRecordingListener = (callback: RecordingListener): Unsubscribe => {
+      this._recordingSubscribers.add(callback);
+      return () => {
+        this._recordingSubscribers.delete(callback);
+      };
+    };
+
+    public addStateListener = (callback: StateListener): Unsubscribe => {
+      this._stateSubscribers.add(callback);
+      return () => {
+        this._stateSubscribers.delete(callback);
+      };
+    };
+
+    public record = async (): Promise<void> => {
+      if (matchesOneOf(this.state, ['idle', 'completed'])) {
+        try {
+          await this.prepare();
+          await this._recorder.startAsync();
+
+          if (Platform.OS === 'android') {
+            this._recordStartedAt = Date.now();
+          }
+
+          const uri = this._recorder.getURI();
+          if (uri) this.uri = uri;
+          this.setState('recording');
+        } catch (e) {
+          this.setState('idle');
+          throw e;
+        }
+      }
+    };
+
+    public stop = async (): Promise<void> => {
+      if (matchesOneOf(this.state, ['recording'])) {
+        if (Platform.OS === 'android') {
+          const buffer = this._getRecorderStopSafeBuffer();
+          if (buffer > 0) await sleep(buffer);
+        }
+
+        await this._recorder.stopAndUnloadAsync();
+        if (Platform.OS === 'ios') {
+          await avModule.Audio.setAudioModeAsync({ allowsRecordingIOS: false, playsInSilentModeIOS: false });
+        }
+        this.setState('completed');
+      }
+    };
+
+    public reset = async (): Promise<void> => {
+      await this.stop();
+      this.uri = undefined;
+      this._recordingSubscribers.clear();
+      this._recorder = new avModule.Audio.Recording();
+      this.setState('idle');
+    };
+  }
+
+  return new VoiceRecorder();
+};
+
+export default createExpoRecorderService;

package/src/platform/createRecorderService.native.tsx

@@ -0,0 +1,170 @@
+import { Platform } from 'react-native';
+import * as RNAudioRecorder from 'react-native-audio-recorder-player';
+import * as Permissions from 'react-native-permissions';
+import { Permission } from 'react-native-permissions/src/types';
+
+import { matchesOneOf, sleep } from '@sendbird/uikit-utils';
+
+import VoiceMessageConfig from '../libs/VoiceMessageConfig';
+import nativePermissionGranted from '../utils/nativePermissionGranted';
+import type { RecorderServiceInterface, Unsubscribe } from './types';
+
+type RecordingListener = Parameters<RecorderServiceInterface['addRecordingListener']>[number];
+type StateListener = Parameters<RecorderServiceInterface['addStateListener']>[number];
+type Modules = {
+  audioRecorderModule: typeof RNAudioRecorder;
+  permissionModule: typeof Permissions;
+};
+const createNativeRecorderService = ({ audioRecorderModule, permissionModule }: Modules): RecorderServiceInterface => {
+  const module = new audioRecorderModule.default();
+
+  class VoiceRecorder implements RecorderServiceInterface {
+    public uri: RecorderServiceInterface['uri'] = undefined;
+    public state: RecorderServiceInterface['state'] = 'idle';
+    public options: RecorderServiceInterface['options'] = {
+      minDuration: VoiceMessageConfig.DEFAULT.RECORDER.MIN_DURATION,
+      maxDuration: VoiceMessageConfig.DEFAULT.RECORDER.MAX_DURATION,
+      extension: VoiceMessageConfig.DEFAULT.RECORDER.EXTENSION,
+    };
+
+    // NOTE: In Android, even when startRecorder() is awaited, if stop() is executed immediately afterward, an error occurs
+    private _recordStartedAt = 0;
+    private _getRecorderStopSafeBuffer = () => {
+      const minWaitingTime = 500;
+      const elapsedTime = Date.now() - this._recordStartedAt;
+      if (elapsedTime > minWaitingTime) return 0;
+      else return minWaitingTime - elapsedTime;
+    };
+
+    private readonly recordingSubscribers = new Set<RecordingListener>();
+    private readonly stateSubscribers = new Set<StateListener>();
+    private readonly audioSettings = {
+      sampleRate: VoiceMessageConfig.DEFAULT.RECORDER.SAMPLE_RATE,
+      bitRate: VoiceMessageConfig.DEFAULT.RECORDER.BIT_RATE,
+      audioChannels: VoiceMessageConfig.DEFAULT.RECORDER.CHANNELS,
+      // encoding: mpeg4_aac
+    };
+    private readonly audioOptions = Platform.select({
+      android: {
+        AudioEncodingBitRateAndroid: this.audioSettings.bitRate,
+        AudioChannelsAndroid: this.audioSettings.audioChannels,
+        AudioSamplingRateAndroid: this.audioSettings.sampleRate,
+        AudioEncoderAndroid: audioRecorderModule.AudioEncoderAndroidType.AAC,
+        OutputFormatAndroid: audioRecorderModule.OutputFormatAndroidType.MPEG_4,
+        AudioSourceAndroid: audioRecorderModule.AudioSourceAndroidType.VOICE_RECOGNITION,
+      },
+      ios: {
+        AVEncoderBitRateKeyIOS: this.audioSettings.bitRate,
+        AVNumberOfChannelsKeyIOS: this.audioSettings.audioChannels,
+        AVSampleRateKeyIOS: this.audioSettings.sampleRate,
+        AVFormatIDKeyIOS: audioRecorderModule.AVEncodingOption.mp4, // same with aac
+        AVEncoderAudioQualityKeyIOS: audioRecorderModule.AVEncoderAudioQualityIOSType.high,
+      },
+      default: {},
+    });
+
+    constructor() {
+      module.setSubscriptionDuration(0.1);
+      module.addRecordBackListener((data) => {
+        const completed = data.currentPosition >= this.options.maxDuration;
+
+        if (completed) this.stop();
+        if (this.state === 'recording') {
+          this.recordingSubscribers.forEach((callback) => {
+            callback({ currentTime: data.currentPosition, completed });
+          });
+        }
+      });
+    }
+
+    private setState = (state: RecorderServiceInterface['state']) => {
+      this.state = state;
+      this.stateSubscribers.forEach((callback) => {
+        callback(state);
+      });
+    };
+
+    public requestPermission = async (): Promise<boolean> => {
+      const permission: Permission[] | undefined = Platform.select({
+        android: [permissionModule.PERMISSIONS.ANDROID.RECORD_AUDIO],
+        ios: [permissionModule.PERMISSIONS.IOS.MICROPHONE],
+        windows: [permissionModule.PERMISSIONS.WINDOWS.MICROPHONE],
+        default: undefined,
+      });
+
+      if (Platform.OS === 'android' && Platform.Version <= 28) {
+        permission?.push(permissionModule.PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE);
+      }
+
+      if (permission) {
+        const status = await permissionModule.checkMultiple(permission);
+        if (nativePermissionGranted(status)) {
+          return true;
+        } else {
+          const status = await permissionModule.requestMultiple(permission);
+          return nativePermissionGranted(status);
+        }
+      } else {
+        return true;
+      }
+    };
+
+    public addRecordingListener = (callback: RecordingListener): Unsubscribe => {
+      this.recordingSubscribers.add(callback);
+      return () => {
+        this.recordingSubscribers.delete(callback);
+      };
+    };
+
+    public addStateListener = (callback: StateListener): Unsubscribe => {
+      this.stateSubscribers.add(callback);
+      return () => {
+        this.stateSubscribers.delete(callback);
+      };
+    };
+
+    public record = async (uri: string): Promise<void> => {
+      if (matchesOneOf(this.state, ['idle', 'completed'])) {
+        try {
+          this.setState('preparing');
+          await module.startRecorder(uri, {
+            ...this.audioOptions,
+          });
+
+          if (Platform.OS === 'android') {
+            this._recordStartedAt = Date.now();
+          }
+
+          this.uri = uri;
+          this.setState('recording');
+        } catch (e) {
+          this.setState('idle');
+          throw e;
+        }
+      }
+    };
+
+    public stop = async (): Promise<void> => {
+      if (matchesOneOf(this.state, ['recording'])) {
+        if (Platform.OS === 'android') {
+          const buffer = this._getRecorderStopSafeBuffer();
+          if (buffer > 0) await sleep(buffer);
+        }
+
+        await module.stopRecorder();
+        this.setState('completed');
+      }
+    };
+
+    public reset = async (): Promise<void> => {
+      await this.stop();
+      this.uri = undefined;
+      this.recordingSubscribers.clear();
+      this.setState('idle');
+    };
+  }
+
+  return new VoiceRecorder();
+};
+
+export default createNativeRecorderService;

package/src/platform/types.ts

@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react';
+
 import type SBUError from '../libs/SBUError';
 
 export type Unsubscribe = () => void | undefined;
@@ -58,6 +60,7 @@ export interface FileSystemServiceInterface {
   // - Supports opening documents in place
   // - Application supports iTunes file sharing
   save(options?: SaveOptions): Promise<DownloadedPath | null>;
+  createRecordFilePath(customExtension?: string): { recordFilePath: string; uri: string };
 }
 
 // ---------- MediaService ---------- //
@@ -99,7 +102,117 @@ export type CompressImageOptions = {
 export type CompressImageResult = Promise<{ uri: string; size: number } | null>;
 
 export interface MediaServiceInterface {
-  VideoComponent<Props = {}>(props: VideoProps & Props): JSX.Element;
+  VideoComponent<Props = {}>(props: VideoProps & Props): ReactNode;
   getVideoThumbnail(options: GetVideoThumbnailOptions): GetVideoThumbnailResult;
   compressImage(options: CompressImageOptions): CompressImageResult;
 }
+
+// ---------- PlayerService ---------- //
+export interface PlayerServiceInterface {
+  uri?: string;
+  state: 'idle' | 'preparing' | 'playing' | 'paused' | 'stopped';
+
+  /**
+   * Check and request permission for the player.
+   * */
+  requestPermission(): Promise<boolean>;
+
+  /**
+   * Add a playback listener.
+   * */
+  addPlaybackListener(
+    callback: (params: { currentTime: number; duration: number; stopped: boolean }) => void,
+  ): Unsubscribe;
+
+  /**
+   * Add a state listener.
+   * */
+  addStateListener(callback: (state: PlayerServiceInterface['state']) => void): Unsubscribe;
+
+  /**
+   * State transition:
+   *   [idle, stopped] to [playing] - start from the beginning
+   *   [paused] to [playing] - resume
+   * */
+  play(uri: string): Promise<void>;
+
+  /**
+   * State transition:
+   *   [playing] to [paused]
+   * */
+  pause(): Promise<void>;
+
+  /**
+   * State transition:
+   *   [preparing, playing, paused] to [stop]
+   * */
+  stop(): Promise<void>;
+
+  /**
+   * State transition:
+   *   [*] to [idle]
+   * */
+  reset(): Promise<void>;
+
+  /**
+   * Seek time, only available when the state is [playing, paused].
+   * */
+  seek(time: number): Promise<void>;
+}
+
+// ---------- RecorderService ---------- //
+export interface RecorderOptions {
+  /**
+   * Minimum recording duration (milliseconds).
+   * */
+  minDuration: number;
+
+  /**
+   * Maximum recording duration (milliseconds).
+   * */
+  maxDuration: number;
+
+  /**
+   * File extension for recorded audio file
+   * */
+  extension: string;
+}
+
+export interface RecorderServiceInterface {
+  uri?: string;
+  options: RecorderOptions;
+  state: 'idle' | 'preparing' | 'recording' | 'completed';
+
+  /**
+   * Check and request permission for the recorder.
+   * */
+  requestPermission(): Promise<boolean>;
+
+  /**
+   * Add recording listener.
+   * */
+  addRecordingListener(callback: (params: { currentTime: number; completed: boolean }) => void): Unsubscribe;
+
+  /**
+   * Add state listener.
+   * */
+  addStateListener(callback: (state: RecorderServiceInterface['state']) => void): Unsubscribe;
+
+  /**
+   * State transition:
+   *   [idle, completed] to [recording]
+   * */
+  record(uri?: string): Promise<void>;
+
+  /**
+   * State transition:
+   *   [recording] to [completed]
+   * */
+  stop(): Promise<void>;
+
+  /**
+   * State transition:
+   *   [*] to [idle]
+   * */
+  reset(): Promise<void>;
+}

package/src/types.ts

@@ -17,7 +17,7 @@ export interface LocalCacheStorage {
 
 export type ErrorBoundaryProps = { error: Error; errorInfo: ErrorInfo; reset: () => void };
 
-export type CommonComponent<P = {}> = (props: P & { children?: ReactNode }) => null | JSX.Element; //ReactNode;
+export type CommonComponent<P = {}> = (props: P & { children?: ReactNode }) => null | ReactNode;
 
 export type MentionedUser = {
   range: Range;

package/src/version.ts

@@ -1,2 +1,2 @@
-const VERSION = '3.1.1';
+const VERSION = '3.2.0';
 export default VERSION;