@sendbird/uikit-react-native 3.11.0 → 3.11.1

package/lib/typescript/src/utils/expoBackwardUtils.d.ts

@@ -1,6 +1,9 @@
+import type * as ExpoAudio from 'expo-audio';
+import type * as ExpoAV from 'expo-av';
 import type * as ExpoDocumentPicker from 'expo-document-picker';
 import type * as ExpoFs from 'expo-file-system';
 import type * as ExpoImagePicker from 'expo-image-picker';
+import type * as ExpoVideo from 'expo-video';
 import type { FilePickerResponse } from '../platform/types';
 declare const expoBackwardUtils: {
     imagePicker: {
@@ -11,6 +14,13 @@ declare const expoBackwardUtils: {
         isCanceled(result: ExpoDocumentPicker.DocumentPickerResult): boolean;
         toFilePickerResponses(result: ExpoDocumentPicker.DocumentPickerResult): Promise<FilePickerResponse[]>;
     };
+    expoAV: {
+        isLegacyAVModule(module: ExpoAudioModule | ExpoVideoModule): module is typeof ExpoAV;
+        isAudioModule(module: ExpoAudioModule): module is typeof ExpoAudio;
+        isVideoModule(module: ExpoVideoModule): module is typeof ExpoVideo;
+    };
     toFileSize(info: ExpoFs.FileInfo): number;
 };
+export type ExpoAudioModule = typeof ExpoAV | typeof ExpoAudio;
+export type ExpoVideoModule = typeof ExpoAV | typeof ExpoVideo;
 export default expoBackwardUtils;

package/lib/typescript/src/utils/expoPermissionGranted.d.ts

@@ -7,7 +7,7 @@ export interface ExpoPermissionResponse {
 export interface ExpoMediaLibraryPermissionResponse extends ExpoPermissionResponse {
     accessPrivileges?: 'all' | 'limited' | 'none';
 }
-export interface ExpoPushPermissionResponse extends ExpoPermissionResponse, NotificationPermissionsStatus {
+export interface ExpoPushPermissionResponse extends Omit<ExpoPermissionResponse, 'status'>, NotificationPermissionsStatus {
 }
 declare const expoPermissionGranted: (stats: Array<ExpoMediaLibraryPermissionResponse | ExpoPushPermissionResponse | ExpoPermissionResponse>, limitedCallback?: () => void) => boolean;
 export default expoPermissionGranted;

package/lib/typescript/src/version.d.ts

@@ -1,2 +1,2 @@
-declare const VERSION = "3.11.0";
+declare const VERSION = "3.11.1";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "3.11.0",
+  "version": "3.11.1",
   "description": "Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.",
   "keywords": [
     "sendbird",
@@ -60,10 +60,10 @@
   },
   "dependencies": {
     "@openspacelabs/react-native-zoomable-view": "^2.1.5",
-    "@sendbird/uikit-chat-hooks": "3.11.0",
-    "@sendbird/uikit-react-native-foundation": "3.11.0",
+    "@sendbird/uikit-chat-hooks": "3.11.1",
+    "@sendbird/uikit-react-native-foundation": "3.11.1",
     "@sendbird/uikit-tools": "0.0.15",
-    "@sendbird/uikit-utils": "3.11.0"
+    "@sendbird/uikit-utils": "3.11.1"
   },
   "devDependencies": {
     "@bam.tech/react-native-image-resizer": "^3.0.4",
@@ -77,6 +77,8 @@
     "@types/react": "*",
     "@types/react-native": "*",
     "date-fns": ">=2.28.0",
+    "expo": "^54.0.12",
+    "expo-audio": "^1.0.13",
     "expo-av": "^13.2.1",
     "expo-clipboard": "^4.1.2",
     "expo-document-picker": "^11.5.3",
@@ -85,6 +87,7 @@
     "expo-image-picker": "^14.1.1",
     "expo-media-library": "^16.0.0",
     "expo-notifications": "^0.18.1",
+    "expo-video": "^3.0.11",
     "expo-video-thumbnails": "^7.2.1",
     "glob": "^7.2.0",
     "inquirer": "^8.2.0",
@@ -117,6 +120,7 @@
     "@sendbird/react-native-scrollview-enhancer": "*",
     "@sendbird/uikit-tools": ">=0.0.10",
     "date-fns": ">=2.28.0",
+    "expo-audio": ">=1.0.0",
     "expo-av": ">=12.0.4",
     "expo-clipboard": ">=2.1.1",
     "expo-document-picker": ">=10.1.3",
@@ -125,6 +129,7 @@
     "expo-image-picker": ">=12.0.2",
     "expo-media-library": ">=16.0.0",
     "expo-notifications": ">=0.14.1",
+    "expo-video": ">=3.0.0",
     "expo-video-thumbnails": ">=6.4.0",
     "react": ">=17.0.2",
     "react-native": ">=0.65.0",
@@ -165,6 +170,12 @@
     "expo-av": {
       "optional": true
     },
+    "expo-audio": {
+      "optional": true
+    },
+    "expo-video": {
+      "optional": true
+    },
     "expo-clipboard": {
       "optional": true
     },
@@ -231,5 +242,5 @@
       ]
     ]
   },
-  "gitHead": "f0ffc478a073fe16f571a3f298fe101cf8359d4a"
+  "gitHead": "16f1f54e8c442492e79a9591ae32203d5db55c2b"
 }

package/src/platform/createMediaService.expo.tsx

@@ -1,34 +1,112 @@
 import type * as ExpoAV from 'expo-av';
 import type * as ExpoFS from 'expo-file-system';
 import type * as ExpoImageManipulator from 'expo-image-manipulator';
+import type { EventSubscription } from 'expo-modules-core';
+import type * as ExpoVideo from 'expo-video';
+import type { StatusChangeEventPayload } from 'expo-video';
 import type * as ExpoVideoThumbnail from 'expo-video-thumbnails';
-import React from 'react';
+import React, { useEffect } from 'react';
 
-import { getDownscaleSize } from '@sendbird/uikit-utils';
+import { Logger, getDownscaleSize } from '@sendbird/uikit-utils';
 
 import SBUUtils from '../libs/SBUUtils';
 import expoBackwardUtils from '../utils/expoBackwardUtils';
-import type { MediaServiceInterface } from './types';
+import type { ExpoVideoModule } from '../utils/expoBackwardUtils';
+import type { MediaServiceInterface, VideoProps } from './types';
 
 type Modules = {
-  avModule: typeof ExpoAV;
+  avModule: ExpoVideoModule;
   thumbnailModule: typeof ExpoVideoThumbnail;
   imageManipulator: typeof ExpoImageManipulator;
   fsModule: typeof ExpoFS;
 };
 
+interface VideoModuleAdapter {
+  VideoComponent: React.ComponentType<VideoProps>;
+}
+
+class LegacyExpoAVVideoAdapter implements VideoModuleAdapter {
+  private readonly avModule: typeof ExpoAV;
+  constructor(avModule: typeof ExpoAV) {
+    this.avModule = avModule;
+  }
+
+  VideoComponent = ({ source, resizeMode, onLoad, ...props }: VideoProps) => {
+    // FIXME: type error https://github.com/expo/expo/issues/17101
+    // @ts-ignore
+    return <this.avModule.Video {...props} source={source} resizeMode={resizeMode} onLoad={onLoad} useNativeControls />;
+  };
+}
+
+class ExpoVideoAdapter implements VideoModuleAdapter {
+  constructor(private readonly _videoModule: typeof ExpoVideo) {}
+
+  VideoComponent = ({ source, resizeMode, onLoad, ...props }: VideoProps) => {
+    const player = this._videoModule.useVideoPlayer(source);
+
+    useEffect(() => {
+      if (onLoad && player) {
+        let subscription: EventSubscription | null = null;
+        try {
+          subscription = player.addListener('statusChange', (eventData: StatusChangeEventPayload) => {
+            const { status, error } = eventData;
+            if (status === 'readyToPlay' && !error) {
+              onLoad();
+            }
+          });
+        } catch (error) {
+          const timeout = setTimeout(() => onLoad(), 300);
+          return () => clearTimeout(timeout);
+        }
+
+        return () => {
+          if (subscription) {
+            subscription.remove();
+          }
+        };
+      }
+      return undefined;
+    }, [onLoad, player]);
+
+    const getContentFit = (mode: typeof resizeMode): 'cover' | 'contain' | 'fill' => {
+      switch (mode) {
+        case 'cover':
+          return 'cover';
+        case 'contain':
+          return 'contain';
+        case 'stretch':
+          return 'fill';
+        default:
+          return 'contain';
+      }
+    };
+
+    return React.createElement(this._videoModule.VideoView, {
+      ...props,
+      player,
+      contentFit: getContentFit(resizeMode),
+    });
+  };
+}
+
 const createExpoMediaService = ({
   avModule,
   thumbnailModule,
   imageManipulator,
   fsModule,
 }: Modules): MediaServiceInterface => {
+  if (expoBackwardUtils.expoAV.isLegacyAVModule(avModule)) {
+    Logger.warn(
+      '[MediaService.Expo] expo-av is deprecated and will be removed in Expo 54. Please migrate to expo-video.',
+    );
+  }
+
+  const videoAdapter = expoBackwardUtils.expoAV.isVideoModule(avModule)
+    ? new ExpoVideoAdapter(avModule)
+    : new LegacyExpoAVVideoAdapter(avModule);
+
   return {
-    VideoComponent({ source, resizeMode, onLoad, ...props }) {
-      // FIXME: type error https://github.com/expo/expo/issues/17101
-      // @ts-ignore
-      return <avModule.Video {...props} source={source} resizeMode={resizeMode} onLoad={onLoad} useNativeControls />;
-    },
+    VideoComponent: videoAdapter.VideoComponent,
     async getVideoThumbnail({ url, quality, timeMills }) {
       try {
         const { uri } = await thumbnailModule.getThumbnailAsync(url, { quality, time: timeMills });

package/src/platform/createPlayerService.expo.tsx

@@ -1,148 +1,281 @@
+import type * as ExpoAudio from 'expo-audio';
 import type * as ExpoAV from 'expo-av';
 
 import { Logger, matchesOneOf } from '@sendbird/uikit-utils';
 
-import expoPermissionGranted from '../utils/expoPermissionGranted';
+import expoBackwardUtils from '../utils/expoBackwardUtils';
+import type { ExpoAudioModule } from '../utils/expoBackwardUtils';
 import type { PlayerServiceInterface, Unsubscribe } from './types';
 
 type Modules = {
-  avModule: typeof ExpoAV;
+  avModule: ExpoAudioModule;
 };
 type PlaybackListener = Parameters<PlayerServiceInterface['addPlaybackListener']>[number];
 type StateListener = Parameters<PlayerServiceInterface['addStateListener']>[number];
-const createExpoPlayerService = ({ avModule }: Modules): PlayerServiceInterface => {
-  const sound = new avModule.Audio.Sound();
 
-  class VoicePlayer implements PlayerServiceInterface {
-    uri?: string;
-    state: PlayerServiceInterface['state'] = 'idle';
+interface AudioPlayerAdapter {
+  requestPermission(): Promise<boolean>;
+  play(uri: string): Promise<void>;
+  pause(): Promise<void>;
+  stop(): Promise<void>;
+  reset(): Promise<void>;
+  seek(time: number): Promise<void>;
+  addPlaybackListener(callback: PlaybackListener): Unsubscribe;
+  addStateListener(callback: StateListener): Unsubscribe;
+  readonly state: PlayerServiceInterface['state'];
+  uri?: string;
+}
+
+abstract class BaseAudioPlayerAdapter implements AudioPlayerAdapter {
+  uri?: string;
+  state: PlayerServiceInterface['state'] = 'idle';
+
+  protected readonly playbackSubscribers = new Set<PlaybackListener>();
+  protected readonly stateSubscribers = new Set<StateListener>();
 
-    private readonly playbackSubscribers = new Set<PlaybackListener>();
-    private readonly stateSubscribers = new Set<StateListener>();
+  protected setState = (state: PlayerServiceInterface['state']) => {
+    this.state = state;
+    this.stateSubscribers.forEach((callback) => {
+      callback(state);
+    });
+  };
 
-    private setState = (state: PlayerServiceInterface['state']) => {
-      this.state = state;
-      this.stateSubscribers.forEach((callback) => {
-        callback(state);
-      });
+  public requestPermission = async (): Promise<boolean> => {
+    return true;
+  };
+
+  public addPlaybackListener = (callback: PlaybackListener): Unsubscribe => {
+    this.playbackSubscribers.add(callback);
+    return () => {
+      this.playbackSubscribers.delete(callback);
     };
+  };
 
-    private setListener = () => {
-      sound.setProgressUpdateIntervalAsync(100).catch((error) => {
-        Logger.warn('[PlayerService.Expo] Failed to set progress update interval', error);
-      });
-      sound.setOnPlaybackStatusUpdate((status) => {
-        if (status.isLoaded) {
-          if (status.didJustFinish) {
-            this.stop().catch((error) => {
-              Logger.warn('[PlayerService.Expo] Failed to stop in OnPlaybackStatusUpdate', error);
-            });
-          }
-          if (status.isPlaying) {
-            this.playbackSubscribers.forEach((callback) => {
-              callback({
-                currentTime: status.positionMillis,
-                duration: status.durationMillis ?? 0,
-                stopped: status.didJustFinish,
-              });
+  public addStateListener = (callback: StateListener): Unsubscribe => {
+    this.stateSubscribers.add(callback);
+    return () => {
+      this.stateSubscribers.delete(callback);
+    };
+  };
+
+  abstract play(uri: string): Promise<void>;
+  abstract pause(): Promise<void>;
+  abstract stop(): Promise<void>;
+  abstract reset(): Promise<void>;
+  abstract seek(time: number): Promise<void>;
+}
+
+class LegacyExpoAVPlayerAdapter extends BaseAudioPlayerAdapter {
+  private readonly sound: ExpoAV.Audio.Sound;
+
+  constructor(avModule: typeof ExpoAV) {
+    super();
+    this.sound = new avModule.Audio.Sound();
+  }
+
+  private setListener = () => {
+    this.sound.setProgressUpdateIntervalAsync(100).catch((error) => {
+      Logger.warn('[PlayerService.Expo] Failed to set progress update interval', error);
+    });
+    this.sound.setOnPlaybackStatusUpdate((status) => {
+      if (status.isLoaded) {
+        if (status.didJustFinish) {
+          this.stop().catch((error) => {
+            Logger.warn('[PlayerService.Expo] Failed to stop in OnPlaybackStatusUpdate', error);
+          });
+        }
+        if (status.isPlaying) {
+          this.playbackSubscribers.forEach((callback) => {
+            callback({
+              currentTime: status.positionMillis,
+              duration: status.durationMillis ?? 0,
+              stopped: status.didJustFinish,
             });
-          }
+          });
         }
-      });
-    };
+      }
+    });
+  };
 
-    private removeListener = () => {
-      sound.setOnPlaybackStatusUpdate(null);
-    };
+  private removeListener = () => {
+    this.sound.setOnPlaybackStatusUpdate(null);
+  };
+
+  private prepare = async (uri: string) => {
+    this.setState('preparing');
+    await this.sound.loadAsync({ uri }, { shouldPlay: false }, true);
+    this.uri = uri;
+  };
 
-    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 play = async (uri: string): Promise<void> => {
+    if (matchesOneOf(this.state, ['idle', 'stopped'])) {
+      try {
+        await this.prepare(uri);
+        this.setListener();
+        await this.sound.playAsync();
+        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 this.sound.playAsync();
+        this.setState('playing');
+      } catch (e) {
+        this.removeListener();
+        throw e;
+      }
+    }
+  };
 
-    public addPlaybackListener = (callback: PlaybackListener): Unsubscribe => {
-      this.playbackSubscribers.add(callback);
-      return () => {
-        this.playbackSubscribers.delete(callback);
-      };
-    };
+  public pause = async (): Promise<void> => {
+    if (matchesOneOf(this.state, ['playing'])) {
+      await this.sound.pauseAsync();
+      this.removeListener();
+      this.setState('paused');
+    }
+  };
 
-    public addStateListener = (callback: (state: PlayerServiceInterface['state']) => void): Unsubscribe => {
-      this.stateSubscribers.add(callback);
-      return () => {
-        this.stateSubscribers.delete(callback);
-      };
-    };
+  public stop = async (): Promise<void> => {
+    if (matchesOneOf(this.state, ['playing', 'paused'])) {
+      await this.sound.stopAsync();
+      await this.sound.unloadAsync();
+      this.removeListener();
+      this.setState('stopped');
+    }
+  };
 
-    private prepare = async (uri: string) => {
-      this.setState('preparing');
-      await sound.loadAsync({ uri }, { shouldPlay: false }, true);
-      this.uri = uri;
-    };
+  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 this.sound.playFromPositionAsync(time);
+    }
+  };
+}
+
+class ExpoAudioPlayerAdapter extends BaseAudioPlayerAdapter {
+  private readonly audioModule: typeof ExpoAudio;
+  private player: ExpoAudio.AudioPlayer | null = null;
+
+  constructor(audioModule: typeof ExpoAudio) {
+    super();
+    this.audioModule = audioModule;
+  }
 
-    public play = async (uri: string): Promise<void> => {
-      if (matchesOneOf(this.state, ['idle', 'stopped'])) {
-        try {
-          await this.prepare(uri);
-          this.setListener();
-          await sound.playAsync();
-          this.setState('playing');
-        } catch (e) {
-          this.setState('idle');
-          this.uri = undefined;
-          this.removeListener();
-          throw e;
+  private setListener = () => {
+    if (!this.player) return;
+
+    this.player.addListener('playbackStatusUpdate', (status) => {
+      if (status.isLoaded) {
+        if (status.didJustFinish) {
+          this.stop().catch((error) => {
+            Logger.warn('[PlayerService.Expo] Failed to stop in playbackStatusUpdate', error);
+          });
         }
-      } else if (matchesOneOf(this.state, ['paused']) && this.uri === uri) {
-        try {
-          this.setListener();
-          await sound.playAsync();
-          this.setState('playing');
-        } catch (e) {
-          this.removeListener();
-          throw e;
+        if (status.playing) {
+          this.playbackSubscribers.forEach((callback) => {
+            callback({
+              currentTime: status.currentTime,
+              duration: status.duration ?? 0,
+              stopped: status.didJustFinish,
+            });
+          });
         }
       }
-    };
+    });
+  };
+
+  private removeListener = () => {
+    if (this.player) {
+      this.player.remove();
+    }
+  };
+
+  private prepare = async (uri: string) => {
+    this.setState('preparing');
+    this.player = this.audioModule.createAudioPlayer(uri, { updateInterval: 100 });
+    this.uri = uri;
+  };
 
-    public pause = async (): Promise<void> => {
-      if (matchesOneOf(this.state, ['playing'])) {
-        await sound.pauseAsync();
+  public play = async (uri: string): Promise<void> => {
+    if (matchesOneOf(this.state, ['idle', 'stopped'])) {
+      try {
+        await this.prepare(uri);
+        this.setListener();
+        this.player?.play();
+        this.setState('playing');
+      } catch (e) {
+        this.setState('idle');
+        this.uri = undefined;
         this.removeListener();
-        this.setState('paused');
+        throw e;
       }
-    };
-
-    public stop = async (): Promise<void> => {
-      if (matchesOneOf(this.state, ['playing', 'paused'])) {
-        await sound.stopAsync();
-        await sound.unloadAsync();
+    } else if (matchesOneOf(this.state, ['paused']) && this.uri === uri) {
+      try {
+        this.setListener();
+        this.player?.play();
+        this.setState('playing');
+      } catch (e) {
         this.removeListener();
-        this.setState('stopped');
+        throw e;
       }
-    };
+    }
+  };
 
-    public reset = async (): Promise<void> => {
-      await this.stop();
-      this.setState('idle');
-      this.uri = undefined;
-      this.playbackSubscribers.clear();
-      this.stateSubscribers.clear();
-    };
+  public pause = async (): Promise<void> => {
+    if (matchesOneOf(this.state, ['playing'])) {
+      this.player?.pause();
+      this.removeListener();
+      this.setState('paused');
+    }
+  };
 
-    public seek = async (time: number): Promise<void> => {
-      if (matchesOneOf(this.state, ['playing', 'paused'])) {
-        await sound.playFromPositionAsync(time);
-      }
-    };
+  public stop = async (): Promise<void> => {
+    if (matchesOneOf(this.state, ['playing', 'paused'])) {
+      this.player?.pause();
+      this.removeListener();
+      this.setState('stopped');
+    }
+  };
+
+  public reset = async (): Promise<void> => {
+    await this.stop();
+    this.player?.remove();
+    this.player = null;
+    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']) && this.player) {
+      this.player.currentTime = time;
+    }
+  };
+}
+
+const createExpoPlayerService = ({ avModule }: Modules): PlayerServiceInterface => {
+  if (expoBackwardUtils.expoAV.isLegacyAVModule(avModule)) {
+    Logger.warn(
+      '[PlayerService.Expo] expo-av is deprecated and will be removed in Expo 54. Please migrate to expo-audio.',
+    );
   }
 
-  return new VoicePlayer();
+  return expoBackwardUtils.expoAV.isAudioModule(avModule)
+    ? new ExpoAudioPlayerAdapter(avModule)
+    : new LegacyExpoAVPlayerAdapter(avModule);
 };
 
 export default createExpoPlayerService;