stream-chat-react-native 9.0.0-beta.9 → 9.0.0

package/src/optionalDependencies/Sound.tsx

@@ -1,47 +1,353 @@
-import React from 'react';
+import type { PlaybackStatus, SoundReturnType } from 'stream-chat-react-native-core';
 
-import AudioVideoPlayer from './AudioVideo';
+type InitialPlaybackStatus = {
+  positionMillis?: number;
+  progressUpdateIntervalMillis?: number;
+  rate?: number;
+};
+
+type LegacyAudioRecorderPlayerConstructor = new () => NativePlaybackInstance;
+
+let LegacyAudioRecorderPlayer: LegacyAudioRecorderPlayerConstructor | undefined;
+let createNitroSound: (() => NativePlaybackInstance) | undefined;
+
+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 = '',
+  isLoaded,
+  isPlaying,
+  positionMillis,
+}: {
+  didJustFinish?: boolean;
+  durationMillis: number;
+  error?: string;
+  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';
+  onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void;
+  private playbackInstance: NativePlaybackInstance | null;
+  private sourceUri?: string;
+  private isDisposed = false;
+  private isLoaded = false;
+  private playing = false;
+  private durationMillis = 0;
+  private positionMillis = 0;
+  private playbackRate = 1;
+  private hasProgressListener = false;
+  private hasPlaybackEndListener = false;
+
+  constructor({
+    source,
+    initialStatus,
+    onPlaybackStatusUpdate,
+  }: {
+    source?: { uri: string };
+    initialStatus?: InitialPlaybackStatus;
+    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 = '',
+  }: {
+    didJustFinish?: boolean;
+    error?: string;
+  } = {}) {
+    this.onPlaybackStatusUpdate?.(
+      createPlaybackStatus({
+        didJustFinish,
+        durationMillis: this.durationMillis,
+        error,
+        isLoaded: this.isLoaded,
+        isPlaying: this.playing,
+        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.playing = false;
+    }
+
+    this.emitPlaybackStatus({ didJustFinish });
+  };
+
+  private handlePlaybackEnd = ({ currentPosition, duration }: NativePlaybackEndMeta) => {
+    this.positionMillis = currentPosition ?? this.positionMillis;
+    this.durationMillis = duration ?? this.durationMillis;
+    this.playing = 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.playing = 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.playing = 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);
+
+      // Some Android backends resume playback as a side effect of changing speed.
+      // Preserve the previous paused state explicitly so rate changes stay silent.
+      if (!this.playing) {
+        await this.playbackInstance.pausePlayer();
+        this.emitPlaybackStatus();
+      }
+    }
+  };
+
+  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.playing = 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.playing = false;
+    this.isDisposed = true;
+  };
+}
+
+const initializeSound =
+  createNitroSound || LegacyAudioRecorderPlayer
+    ? (
+        source?: { uri: string },
+        initialStatus?: InitialPlaybackStatus,
+        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/optionalDependencies/generateThumbnail.ts

@@ -0,0 +1,8 @@
+import { createGenerateVideoThumbnails } from 'stream-chat-react-native-core';
+
+import { createVideoThumbnails, type VideoThumbnailResult } from '../native/videoThumbnail';
+
+export const generateThumbnails: (uris: string[]) => Promise<Record<string, VideoThumbnailResult>> =
+  createGenerateVideoThumbnails({
+    createVideoThumbnails,
+  });

package/src/optionalDependencies/getPhotos.ts

@@ -1,8 +1,12 @@
 import { PermissionsAndroid, Platform } from 'react-native';
+
 import mime from 'mime';
 
 import type { File } from 'stream-chat-react-native-core';
 
+import { generateThumbnails } from './generateThumbnail';
+import { getLocalAssetUri } from './getLocalAssetUri';
+
 let CameraRollDependency;
 
 try {
@@ -14,8 +18,6 @@ try {
   );
 }
 
-import { getLocalAssetUri } from './getLocalAssetUri';
-
 type ReturnType = {
   assets: File[];
   endCursor: string | undefined;
@@ -88,7 +90,7 @@ export const getPhotos = CameraRollDependency
           first,
           include: ['fileSize', 'filename', 'imageSize', 'playableDuration'],
         });
-        const assets = await Promise.all(
+        const assetEntries = await Promise.all(
           results.edges.map(async (edge) => {
             const originalUri = edge.node?.image?.uri;
             const type =
@@ -100,20 +102,34 @@ export const getPhotos = CameraRollDependency
               (edge.node.image.playableDuration ? 'video/*' : 'image/*');
             const isImage = type.includes('image');
 
-            const uri =
-              isImage && getLocalAssetUri ? await getLocalAssetUri(originalUri) : originalUri;
-
             return {
-              ...edge.node.image,
-              name: edge.node.image.filename as string,
-              duration: edge.node.image.playableDuration * 1000,
-              thumb_url: isImage ? undefined : originalUri,
-              size: edge.node.image.fileSize as number,
+              edge,
+              isImage,
+              originalUri,
               type,
-              uri,
+              uri: isImage && getLocalAssetUri ? await getLocalAssetUri(originalUri) : originalUri,
             };
           }),
         );
+        const videoUris = assetEntries
+          .filter(({ isImage, originalUri }) => !isImage && !!originalUri)
+          .map(({ originalUri }) => originalUri);
+        const videoThumbnailResults = await generateThumbnails(videoUris);
+
+        const assets = assetEntries.map(({ edge, isImage, originalUri, type, uri }) => {
+          const thumbnailResult =
+            !isImage && originalUri ? videoThumbnailResults[originalUri] : undefined;
+
+          return {
+            ...edge.node.image,
+            name: edge.node.image.filename as string,
+            duration: edge.node.image.playableDuration * 1000,
+            thumb_url: thumbnailResult?.uri || undefined,
+            size: edge.node.image.fileSize as number,
+            type,
+            uri,
+          };
+        });
         const hasNextPage = results.page_info.has_next_page;
         const endCursor = results.page_info.end_cursor;
         return { assets, endCursor, hasNextPage, iOSLimited: !!results.limited };

package/src/optionalDependencies/pickImage.ts

@@ -1,6 +1,11 @@
 import { Platform } from 'react-native';
+
 import mime from 'mime';
+
 import { PickImageOptions } from 'stream-chat-react-native-core';
+
+import { generateThumbnails } from './generateThumbnail';
+
 let ImagePicker;
 
 try {
@@ -24,17 +29,37 @@ export const pickImage = ImagePicker
           return { askToOpenSettings: true, cancelled: true };
         }
         if (!canceled) {
-          const assets = result.assets.map((asset) => ({
-            ...asset,
-            duration: asset.duration ? asset.duration * 1000 : undefined, // in milliseconds
-            name: asset.fileName,
-            size: asset.fileSize,
-            type:
+          const assetsWithType = result.assets.map((asset) => {
+            const type =
               asset.type ||
               mime.getType(asset.fileName || asset.uri) ||
-              (asset.duration ? 'video/*' : 'image/*'),
-            uri: asset.uri,
-          }));
+              (asset.duration ? 'video/*' : 'image/*');
+
+            return {
+              asset,
+              isVideo: type.includes('video'),
+              type,
+            };
+          });
+          const videoUris = assetsWithType
+            .filter(({ asset, isVideo }) => isVideo && !!asset.uri)
+            .map(({ asset }) => asset.uri);
+          const videoThumbnailResults = await generateThumbnails(videoUris);
+
+          const assets = assetsWithType.map(({ asset, isVideo, type }) => {
+            const thumbnailResult =
+              isVideo && asset.uri ? videoThumbnailResults[asset.uri] : undefined;
+
+            return {
+              ...asset,
+              duration: asset.duration ? asset.duration * 1000 : undefined, // in milliseconds
+              name: asset.fileName,
+              size: asset.fileSize,
+              thumb_url: thumbnailResult?.uri || undefined,
+              type,
+              uri: asset.uri,
+            };
+          });
           return { assets, cancelled: false };
         } else {
           return { cancelled: true };

package/src/optionalDependencies/takePhoto.ts

@@ -1,6 +1,9 @@
 import { AppState, Image, PermissionsAndroid, Platform } from 'react-native';
+
 import mime from 'mime';
 
+import { generateThumbnails } from './generateThumbnail';
+
 let ImagePicker;
 
 try {
@@ -54,12 +57,16 @@ export const takePhoto = ImagePicker
         if (assetType.includes('video')) {
           const clearFilter = new RegExp('[.:]', 'g');
           const date = new Date().toISOString().replace(clearFilter, '_');
+          const thumbnailResults = await generateThumbnails([asset.uri]);
+          const thumbnailResult = thumbnailResults[asset.uri];
+
           return {
             ...asset,
             cancelled: false,
             duration: asset.duration * 1000,
             name: 'video_recording_' + date + '.' + asset.fileName.split('.').pop(),
             size: asset.fileSize,
+            thumb_url: thumbnailResult?.uri || undefined,
             type: assetType,
             uri: asset.uri,
           };