stream-chat-react-native-core 9.2.0-beta.2 → 9.2.0-beta.3

package/src/state-store/__tests__/audio-player.test.ts

@@ -158,6 +158,51 @@ describe('AudioPlayer', () => {
     expect(playerRef.unloadAsync).toHaveBeenCalledTimes(1);
   });
 
+  it('reports when playback is requested without an initialized player', () => {
+    const onError = jest.fn();
+    const player = new AudioPlayer({
+      duration: 30,
+      id: 'missing-player',
+      mimeType: 'audio/mp4',
+      onError,
+      type: 'audio',
+      uri: 'https://example.com/audio.mp4',
+    });
+
+    player.play();
+
+    expect(onError).toHaveBeenCalledWith({
+      errCode: 'not-playable',
+      error: undefined,
+    });
+  });
+
+  it('reports initialization failures', async () => {
+    const error = new Error('initialize failed');
+    const onError = jest.fn();
+    (NativeHandlers as { Sound: unknown }).Sound = {
+      Player: null,
+      initializeSound: jest.fn().mockRejectedValue(error),
+    };
+
+    const player = new AudioPlayer({
+      duration: 30,
+      id: 'failed-initialization-player',
+      mimeType: 'audio/mp4',
+      onError,
+      type: 'audio',
+      uri: 'https://example.com/audio.mp4',
+    });
+
+    await flushPromises();
+
+    expect(player).toBeDefined();
+    expect(onError).toHaveBeenCalledWith({
+      errCode: 'failed-to-start',
+      error,
+    });
+  });
+
   it('cleans up a stale native player when initialization resolves after removal', async () => {
     const playerRef = createMockNativePlayerRef();
     let resolveInitializeSound: (player: typeof playerRef) => void;

package/src/state-store/audio-player-pool.ts

@@ -29,6 +29,7 @@ export class AudioPlayerPool {
   getOrAddPlayer(params: AudioPlayerOptions) {
     const player = this.pool.get(params.id);
     if (player) {
+      player.setOnError(params.onError);
       return player;
     }
     const newPlayer = new AudioPlayer(params);

package/src/state-store/audio-player.ts

@@ -12,6 +12,13 @@ export type AudioDescriptor = {
   type: 'voiceRecording' | 'audio';
 };
 
+export type AudioPlayerErrorCode = 'failed-to-start' | 'not-playable' | 'seek-not-supported';
+
+export type AudioPlayerErrorHandler = (params: {
+  errCode: AudioPlayerErrorCode;
+  error?: Error;
+}) => void;
+
 export type AudioPlayerState = {
   isPlaying: boolean;
   duration: number;
@@ -39,6 +46,7 @@ const INITIAL_STATE: AudioPlayerState = {
 };
 
 export type AudioPlayerOptions = AudioDescriptor & {
+  onError?: AudioPlayerErrorHandler;
   playbackRates?: number[];
   previewVoiceRecording?: boolean;
 };
@@ -51,6 +59,9 @@ export class AudioPlayer {
   private type: 'voiceRecording' | 'audio';
   private isExpoCLI: boolean;
   private _pool: AudioPlayerPool | null = null;
+  private onError?: AudioPlayerErrorHandler;
+  private lastPlaybackStatusError?: string;
+  private lastSeekNotSupportedNotificationAt?: number;
 
   /**
    * This keeps the composer preview on the recorder-backed player until preview
@@ -62,6 +73,7 @@ export class AudioPlayer {
     this.isExpoCLI = NativeHandlers.SDK === 'stream-chat-expo';
     this._id = options.id;
     this.type = options.type;
+    this.onError = options.onError;
     this.previewVoiceRecording = options.previewVoiceRecording ?? false;
     const playbackRates = options.playbackRates ?? DEFAULT_PLAYBACK_RATES;
     this.state = new StateStore<AudioPlayerState>({
@@ -73,6 +85,51 @@ export class AudioPlayer {
     this.initPlayer({ uri: options.uri });
   }
 
+  setOnError(onError?: AudioPlayerErrorHandler) {
+    this.onError = onError;
+  }
+
+  private getError(error: unknown) {
+    if (error instanceof Error) return error;
+    if (typeof error === 'string') return new Error(error);
+    if (error && typeof error === 'object' && 'message' in error) {
+      const message = error.message;
+      if (typeof message === 'string') return new Error(message);
+    }
+    return undefined;
+  }
+
+  private notifyError(errCode: AudioPlayerErrorCode, error?: unknown) {
+    if (errCode === 'seek-not-supported') {
+      const now = Date.now();
+      if (
+        typeof this.lastSeekNotSupportedNotificationAt === 'number' &&
+        now - this.lastSeekNotSupportedNotificationAt < 1000
+      ) {
+        return;
+      }
+      this.lastSeekNotSupportedNotificationAt = now;
+    }
+
+    this.onError?.({
+      errCode,
+      error: this.getError(error),
+    });
+  }
+
+  private handleMaybePromiseError(
+    result: unknown,
+    errCode: AudioPlayerErrorCode,
+    onError?: () => void,
+  ) {
+    if (!result || typeof (result as Promise<void>).catch !== 'function') return;
+
+    (result as Promise<void>).catch((error) => {
+      onError?.();
+      this.notifyError(errCode, error);
+    });
+  }
+
   initPlayer = async ({ uri, playerRef }: { uri?: string; playerRef?: SoundReturnType }) => {
     const requestId = ++this.initRequestId;
 
@@ -84,13 +141,17 @@ export class AudioPlayer {
     }
     if (this.previewVoiceRecording) {
       if (NativeHandlers.Audio?.startPlayer) {
-        await NativeHandlers.Audio.startPlayer(
-          uri,
-          {},
-          this.onVoiceRecordingPreviewPlaybackStatusUpdate,
-        );
-        if (NativeHandlers.Audio?.pausePlayer) {
-          await NativeHandlers.Audio.pausePlayer();
+        try {
+          await NativeHandlers.Audio.startPlayer(
+            uri,
+            {},
+            this.onVoiceRecordingPreviewPlaybackStatusUpdate,
+          );
+          if (NativeHandlers.Audio?.pausePlayer) {
+            await NativeHandlers.Audio.pausePlayer();
+          }
+        } catch (error) {
+          this.notifyError('failed-to-start', error);
         }
       }
       return;
@@ -99,11 +160,22 @@ export class AudioPlayer {
       return;
     }
 
-    const player = await NativeHandlers.Sound.initializeSound(
-      { uri },
-      DEFAULT_PLAYER_SETTINGS,
-      this.onPlaybackStatusUpdate,
-    );
+    let player: SoundReturnType | null | undefined;
+    try {
+      player = await NativeHandlers.Sound.initializeSound(
+        { uri },
+        DEFAULT_PLAYER_SETTINGS,
+        this.onPlaybackStatusUpdate,
+      );
+    } catch (error) {
+      this.notifyError('failed-to-start', error);
+      return;
+    }
+
+    if (!player) {
+      this.notifyError('not-playable');
+      return;
+    }
 
     if (requestId !== this.initRequestId) {
       if (player?.stopAsync) {
@@ -132,7 +204,10 @@ export class AudioPlayer {
     if (!playbackStatus.isLoaded) {
       // Update your UI for the unloaded state
       if (playbackStatus.error) {
-        console.log(`Encountered a fatal error during playback: ${playbackStatus.error}`);
+        if (this.lastPlaybackStatusError !== playbackStatus.error) {
+          this.lastPlaybackStatusError = playbackStatus.error;
+          this.notifyError('not-playable', playbackStatus.error);
+        }
       }
     } else {
       const { durationMillis, positionMillis } = playbackStatus;
@@ -252,7 +327,10 @@ export class AudioPlayer {
 
     if (this.previewVoiceRecording) {
       if (NativeHandlers.Audio?.resumePlayer) {
-        NativeHandlers.Audio.resumePlayer();
+        NativeHandlers.Audio.resumePlayer().catch((error) => {
+          this.isPlaying = false;
+          this.notifyError('failed-to-start', error);
+        });
       }
       this.state.partialNext({
         isPlaying: true,
@@ -261,16 +339,24 @@ export class AudioPlayer {
     }
 
     if (!this.playerRef) {
+      this.notifyError('not-playable');
       return;
     }
 
     if (this.isExpoCLI) {
       if (this.playerRef?.playAsync) {
-        this.playerRef.playAsync();
+        this.handleMaybePromiseError(this.playerRef.playAsync(), 'failed-to-start', () => {
+          this.isPlaying = false;
+        });
       }
     } else {
       if (this.playerRef?.resume) {
-        this.playerRef.resume();
+        try {
+          this.playerRef.resume();
+        } catch (error) {
+          this.notifyError('failed-to-start', error);
+          return;
+        }
       }
     }
     this.state.partialNext({
@@ -329,6 +415,8 @@ export class AudioPlayer {
       this.position = positionInMillis;
       if (NativeHandlers.Audio?.seekToPlayer) {
         await NativeHandlers.Audio.seekToPlayer(positionInMillis);
+      } else if (positionInMillis > 0) {
+        this.notifyError('seek-not-supported');
       }
       return;
     }
@@ -345,11 +433,15 @@ export class AudioPlayer {
       } else {
         if (this.playerRef?.setPositionAsync) {
           await this.playerRef.setPositionAsync(positionInMillis);
+        } else {
+          this.notifyError('seek-not-supported');
         }
       }
     } else {
       if (this.playerRef?.seek) {
         this.playerRef.seek(positionInSeconds);
+      } else if (positionInMillis > 0) {
+        this.notifyError('seek-not-supported');
       }
     }
   }

package/src/theme/generated/dark/StreamTokens.android.ts

@@ -237,82 +237,82 @@ export const foundations: IStreamTokens['foundations'] = {
 export const primitives: IStreamTokens['primitives'] = {
   darkElevation1: {
     elevation: 2,
-    shadowColor: 'rgba(0,0,0,0.28)',
+    shadowColor: 'rgba(0,0,0,0.42400000000000004)',
     shadowOffset: {
       width: 0,
       height: 1.4878048780487807,
     },
-    shadowOpacity: 0.42400000000000004,
+    shadowOpacity: 1,
     shadowRadius: 3.6926829268292685,
   },
   darkElevation2: {
     elevation: 3,
-    shadowColor: 'rgba(0,0,0,0.30)',
+    shadowColor: 'rgba(0,0,0,0.44000000000000006)',
     shadowOffset: {
       width: 0,
       height: 2,
     },
-    shadowOpacity: 0.44000000000000006,
+    shadowOpacity: 1,
     shadowRadius: 5.630769230769231,
   },
   darkElevation3: {
     elevation: 6,
-    shadowColor: 'rgba(0,0,0,0.32)',
+    shadowColor: 'rgba(0,0,0,0.4696)',
     shadowOffset: {
       width: 0,
       height: 3.488372093023256,
     },
-    shadowOpacity: 0.4696,
+    shadowOpacity: 1,
     shadowRadius: 11.079069767441862,
   },
   darkElevation4: {
     elevation: 8,
-    shadowColor: 'rgba(0,0,0,0.36)',
+    shadowColor: 'rgba(0,0,0,0.5136000000000001)',
     shadowOffset: {
       width: 0,
       height: 5.384615384615384,
     },
-    shadowOpacity: 0.5136000000000001,
+    shadowOpacity: 1,
     shadowRadius: 16.892307692307693,
   },
   lightElevation1: {
     elevation: 1,
-    shadowColor: 'rgba(0,0,0,0.2)',
+    shadowColor: 'rgba(0,0,0,0.29599999999999993)',
     shadowOffset: {
       width: 0,
       height: 1,
     },
-    shadowOpacity: 0.29599999999999993,
+    shadowOpacity: 1,
     shadowRadius: 2.8285714285714287,
   },
   lightElevation2: {
     elevation: 3,
-    shadowColor: 'rgba(0,0,0,0.22)',
+    shadowColor: 'rgba(0,0,0,0.3136)',
     shadowOffset: {
       width: 0,
       height: 2,
     },
-    shadowOpacity: 0.3136,
+    shadowOpacity: 1,
     shadowRadius: 5.68,
   },
   lightElevation3: {
     elevation: 6,
-    shadowColor: 'rgba(0,0,0,0.24)',
+    shadowColor: 'rgba(0,0,0,0.36160000000000003)',
     shadowOffset: {
       width: 0,
       height: 3.5,
     },
-    shadowOpacity: 0.36160000000000003,
+    shadowOpacity: 1,
     shadowRadius: 11.100000000000001,
   },
   lightElevation4: {
     elevation: 8,
-    shadowColor: 'rgba(0,0,0,0.28)',
+    shadowColor: 'rgba(0,0,0,0.40959999999999996)',
     shadowOffset: {
       width: 0,
       height: 5.4,
     },
-    shadowOpacity: 0.40959999999999996,
+    shadowOpacity: 1,
     shadowRadius: 16.919999999999998,
   },
   radius2xl: foundations.radius.radius20,

package/src/theme/generated/dark/StreamTokens.ios.ts

@@ -237,7 +237,7 @@ export const foundations: IStreamTokens['foundations'] = {
 export const primitives: IStreamTokens['primitives'] = {
   darkElevation1: {
     elevation: 2,
-    shadowColor: 'rgba(0,0,0,0.20)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 1,
@@ -247,7 +247,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   darkElevation2: {
     elevation: 3,
-    shadowColor: 'rgba(0,0,0,0.22)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 2,
@@ -257,7 +257,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   darkElevation3: {
     elevation: 6,
-    shadowColor: 'rgba(0,0,0,0.24)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 4,
@@ -267,7 +267,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   darkElevation4: {
     elevation: 12,
-    shadowColor: 'rgba(0,0,0,0.28)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 8,
@@ -277,7 +277,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   lightElevation1: {
     elevation: 2,
-    shadowColor: 'rgba(0,0,0,0.12)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 1,
@@ -287,7 +287,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   lightElevation2: {
     elevation: 3,
-    shadowColor: 'rgba(0,0,0,0.14)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 2,
@@ -297,7 +297,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   lightElevation3: {
     elevation: 6,
-    shadowColor: 'rgba(0,0,0,0.16)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 4,
@@ -307,7 +307,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   lightElevation4: {
     elevation: 12,
-    shadowColor: 'rgba(0,0,0,0.20)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 8,

package/src/theme/generated/dark/StreamTokens.web.ts

@@ -237,7 +237,7 @@ export const foundations: IStreamTokens['foundations'] = {
 export const primitives: IStreamTokens['primitives'] = {
   darkElevation1: {
     elevation: 3,
-    shadowColor: 'rgba(0,0,0,0.1)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 2.6666666666666665,
@@ -247,7 +247,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   darkElevation2: {
     elevation: 7,
-    shadowColor: 'rgba(0,0,0,0.12)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 4.5016949152542365,
@@ -257,7 +257,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   darkElevation3: {
     elevation: 10,
-    shadowColor: 'rgba(0,0,0,0.14)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 8.839779005524864,
@@ -267,7 +267,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   darkElevation4: {
     elevation: 13,
-    shadowColor: 'rgba(0,0,0,0.16)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 14.201622247972189,
@@ -277,7 +277,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   lightElevation1: {
     elevation: 3,
-    shadowColor: 'rgba(0,0,0,0.06)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 2.904109589041096,
@@ -287,7 +287,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   lightElevation2: {
     elevation: 7,
-    shadowColor: 'rgba(0,0,0,0.06)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 4.510067114093959,
@@ -297,7 +297,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   lightElevation3: {
     elevation: 10,
-    shadowColor: 'rgba(0,0,0,0.1)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 9.322128851540615,
@@ -307,7 +307,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   lightElevation4: {
     elevation: 14,
-    shadowColor: 'rgba(0,0,0,0.12)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 15.201376936316695,

package/src/theme/generated/light/StreamTokens.android.ts

@@ -237,82 +237,82 @@ export const foundations: IStreamTokens['foundations'] = {
 export const primitives: IStreamTokens['primitives'] = {
   darkElevation1: {
     elevation: 2,
-    shadowColor: 'rgba(0,0,0,0.28)',
+    shadowColor: 'rgba(0,0,0,0.42400000000000004)',
     shadowOffset: {
       width: 0,
       height: 1.4878048780487807,
     },
-    shadowOpacity: 0.42400000000000004,
+    shadowOpacity: 1,
     shadowRadius: 3.6926829268292685,
   },
   darkElevation2: {
     elevation: 3,
-    shadowColor: 'rgba(0,0,0,0.30)',
+    shadowColor: 'rgba(0,0,0,0.44000000000000006)',
     shadowOffset: {
       width: 0,
       height: 2,
     },
-    shadowOpacity: 0.44000000000000006,
+    shadowOpacity: 1,
     shadowRadius: 5.630769230769231,
   },
   darkElevation3: {
     elevation: 6,
-    shadowColor: 'rgba(0,0,0,0.32)',
+    shadowColor: 'rgba(0,0,0,0.4696)',
     shadowOffset: {
       width: 0,
       height: 3.488372093023256,
     },
-    shadowOpacity: 0.4696,
+    shadowOpacity: 1,
     shadowRadius: 11.079069767441862,
   },
   darkElevation4: {
     elevation: 8,
-    shadowColor: 'rgba(0,0,0,0.36)',
+    shadowColor: 'rgba(0,0,0,0.5136000000000001)',
     shadowOffset: {
       width: 0,
       height: 5.384615384615384,
     },
-    shadowOpacity: 0.5136000000000001,
+    shadowOpacity: 1,
     shadowRadius: 16.892307692307693,
   },
   lightElevation1: {
     elevation: 1,
-    shadowColor: 'rgba(0,0,0,0.2)',
+    shadowColor: 'rgba(0,0,0,0.29599999999999993)',
     shadowOffset: {
       width: 0,
       height: 1,
     },
-    shadowOpacity: 0.29599999999999993,
+    shadowOpacity: 1,
     shadowRadius: 2.8285714285714287,
   },
   lightElevation2: {
     elevation: 3,
-    shadowColor: 'rgba(0,0,0,0.22)',
+    shadowColor: 'rgba(0,0,0,0.3136)',
     shadowOffset: {
       width: 0,
       height: 2,
     },
-    shadowOpacity: 0.3136,
+    shadowOpacity: 1,
     shadowRadius: 5.68,
   },
   lightElevation3: {
     elevation: 6,
-    shadowColor: 'rgba(0,0,0,0.24)',
+    shadowColor: 'rgba(0,0,0,0.36160000000000003)',
     shadowOffset: {
       width: 0,
       height: 3.5,
     },
-    shadowOpacity: 0.36160000000000003,
+    shadowOpacity: 1,
     shadowRadius: 11.100000000000001,
   },
   lightElevation4: {
     elevation: 8,
-    shadowColor: 'rgba(0,0,0,0.28)',
+    shadowColor: 'rgba(0,0,0,0.40959999999999996)',
     shadowOffset: {
       width: 0,
       height: 5.4,
     },
-    shadowOpacity: 0.40959999999999996,
+    shadowOpacity: 1,
     shadowRadius: 16.919999999999998,
   },
   radius2xl: foundations.radius.radius20,

package/src/theme/generated/light/StreamTokens.ios.ts

@@ -237,7 +237,7 @@ export const foundations: IStreamTokens['foundations'] = {
 export const primitives: IStreamTokens['primitives'] = {
   darkElevation1: {
     elevation: 2,
-    shadowColor: 'rgba(0,0,0,0.20)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 1,
@@ -247,7 +247,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   darkElevation2: {
     elevation: 3,
-    shadowColor: 'rgba(0,0,0,0.22)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 2,
@@ -257,7 +257,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   darkElevation3: {
     elevation: 6,
-    shadowColor: 'rgba(0,0,0,0.24)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 4,
@@ -267,7 +267,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   darkElevation4: {
     elevation: 12,
-    shadowColor: 'rgba(0,0,0,0.28)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 8,
@@ -277,7 +277,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   lightElevation1: {
     elevation: 2,
-    shadowColor: 'rgba(0,0,0,0.12)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 1,
@@ -287,7 +287,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   lightElevation2: {
     elevation: 3,
-    shadowColor: 'rgba(0,0,0,0.14)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 2,
@@ -297,7 +297,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   lightElevation3: {
     elevation: 6,
-    shadowColor: 'rgba(0,0,0,0.16)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 4,
@@ -307,7 +307,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   lightElevation4: {
     elevation: 12,
-    shadowColor: 'rgba(0,0,0,0.20)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 8,