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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native",
   "description": "The official React Native SDK for Stream Chat, a service for building chat applications",
-  "version": "9.0.0-beta.8",
+  "version": "9.0.0",
   "homepage": "https://www.npmjs.com/package/stream-chat-react-native",
   "author": {
     "company": "Stream.io Inc",
@@ -21,6 +21,7 @@
     "android/gradle",
     "ios",
     "*.podspec",
+    "react-native.config.js",
     "package.json"
   ],
   "license": "SEE LICENSE IN LICENSE",
@@ -29,21 +30,20 @@
   "dependencies": {
     "es6-symbol": "^3.1.3",
     "mime": "^4.0.7",
-    "stream-chat-react-native-core": "9.0.0-beta.8"
+    "stream-chat-react-native-core": "9.0.0"
   },
   "peerDependencies": {
-    "@react-native-camera-roll/camera-roll": ">=7.8.0",
-    "@react-native-clipboard/clipboard": ">=1.14.1",
+    "@react-native-camera-roll/camera-roll": ">=7.9.0",
+    "@react-native-clipboard/clipboard": ">=1.16.0",
     "@react-native-documents/picker": ">=10.1.1",
-    "@stream-io/flat-list-mvcp": ">=0.10.3",
-    "react-native": ">=0.73.0",
+    "react-native": ">=0.76.0",
     "react-native-audio-recorder-player": ">=3.6.13",
     "react-native-nitro-sound": ">=0.2.9",
-    "react-native-blob-util": ">=0.21.1",
+    "react-native-blob-util": ">=0.22.0",
     "react-native-haptic-feedback": ">=2.3.0",
     "react-native-image-picker": ">=7.1.2",
     "react-native-share": ">=11.0.0",
-    "react-native-video": ">=6.4.2"
+    "react-native-video": ">=6.18.0"
   },
   "peerDependenciesMeta": {
     "@react-native-camera-roll/camera-roll": {
@@ -52,9 +52,6 @@
     "@react-native-clipboard/clipboard": {
       "optional": true
     },
-    "@stream-io/flat-list-mvcp": {
-      "optional": true
-    },
     "react-native-share": {
       "optional": true
     },
@@ -81,7 +78,6 @@
     }
   },
   "scripts": {
-    "postinstall": "if [ -f ../scripts/sync-shared-native.sh ] && [ -d ../shared-native/ios ]; then bash ../scripts/sync-shared-native.sh native-package; fi",
     "prepack": "bash ../scripts/sync-shared-native.sh native-package && cp ../../README.md .",
     "postpack": "rm README.md && bash ../scripts/clean-shared-native-copies.sh native-package"
   },
@@ -92,7 +88,14 @@
     "name": "StreamChatReactNativeSpec",
     "type": "all",
     "jsSrcsDir": "src/native",
+    "android": {
+      "javaPackageName": "com.streamchatreactnative"
+    },
     "ios": {
+      "modulesProvider": {
+        "StreamChatReactNative": "StreamChatReactNative",
+        "StreamVideoThumbnail": "StreamVideoThumbnail"
+      },
       "componentProvider": {
         "StreamShimmerView": "StreamShimmerViewComponentView"
       }

package/react-native.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        packageImportPath: 'import com.streamchatreactnative.StreamChatReactNativePackage;',
+        packageInstance: 'new StreamChatReactNativePackage()',
+      },
+      ios: {
+        podspecPath: 'stream-chat-react-native.podspec',
+      },
+    },
+  },
+};

package/src/handlers/compressImage.ts

@@ -22,7 +22,6 @@ export const compressImage = async ({
       Math.min(Math.max(0, compressImageQuality), 1) * 100,
       0,
       undefined,
-      false,
       { mode: 'cover' },
     );
     return compressedUri;

package/src/native/NativeStreamChatReactNative.ts

@@ -13,7 +13,6 @@ export interface Spec extends TurboModule {
     onlyScaleDown: boolean,
     rotation?: number,
     outputPath?: string | null,
-    keepMeta?: boolean,
   ): Promise<{
     base64: string;
     height: number;

package/src/native/NativeStreamVideoThumbnail.ts

@@ -0,0 +1,14 @@
+import type { TurboModule } from 'react-native';
+
+import { TurboModuleRegistry } from 'react-native';
+
+export type VideoThumbnailResult = {
+  error?: string | null;
+  uri?: string | null;
+};
+
+export interface Spec extends TurboModule {
+  createVideoThumbnails(urls: ReadonlyArray<string>): Promise<ReadonlyArray<VideoThumbnailResult>>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('StreamVideoThumbnail');

package/src/native/index.tsx

@@ -24,7 +24,6 @@ async function createResizedImage(
   quality: number,
   rotation: number = 0,
   outputPath?: string | null,
-  keepMeta = false,
   options: Options = defaultOptions,
 ): Promise<Response> {
   const { mode, onlyScaleDown } = { ...defaultOptions, ...options };
@@ -39,7 +38,6 @@ async function createResizedImage(
     onlyScaleDown,
     rotation,
     outputPath,
-    keepMeta,
   );
 }
 

package/src/native/types.ts

@@ -7,6 +7,8 @@ export interface Response {
   width: number;
 }
 
+export interface VideoThumbnailResponse extends Response {}
+
 export type ResizeFormat = 'PNG' | 'JPEG' | 'WEBP';
 export type ResizeMode = 'contain' | 'cover' | 'stretch';
 

package/src/native/videoThumbnail.ts

@@ -0,0 +1,8 @@
+import NativeStreamVideoThumbnail, { type VideoThumbnailResult } from './NativeStreamVideoThumbnail';
+
+export type { VideoThumbnailResult } from './NativeStreamVideoThumbnail';
+
+export const createVideoThumbnails = async (urls: string[]): Promise<VideoThumbnailResult[]> => {
+  const results = await NativeStreamVideoThumbnail.createVideoThumbnails(urls);
+  return Array.from(results);
+};

package/src/optionalDependencies/Audio.ts

@@ -136,7 +136,7 @@ class _Audio {
   };
   startPlayer = async (uri, _, onPlaybackStatusUpdate) => {
     try {
-      const playback = await audioRecorderPlayer.startPlayer(uri);
+      await audioRecorderPlayer.startPlayer(uri);
       audioRecorderPlayer.addPlayBackListener((status) => {
         onPlaybackStatusUpdate(status);
       });

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 };