stream-chat-react-native-core 8.10.1 → 8.11.0-beta.3

package/src/components/ProgressControl/WaveProgressBar.tsx

@@ -1,7 +1,12 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Platform, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import Animated, {
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { resampleWaveformData } from '../MessageInput/utils/audioSampling';
@@ -76,7 +81,6 @@ export const WaveProgressBar = React.memo(
       amplitudesCount = 70,
       filledColor,
       onEndDrag,
-      onPlayPause,
       onProgressDrag,
       onStartDrag,
       progress,
@@ -98,9 +102,14 @@ export const WaveProgressBar = React.memo(
       [fullWidth],
     );
 
-    useEffect(() => {
-      waveFormNumberFromProgress(progress);
-    }, [progress, waveFormNumberFromProgress]);
+    useAnimatedReaction(
+      () => progress,
+      (newProgress) => {
+        state.value = newProgress;
+        waveFormNumberFromProgress(newProgress);
+      },
+      [progress],
+    );
 
     const {
       theme: {
@@ -109,36 +118,28 @@ export const WaveProgressBar = React.memo(
       },
     } = useTheme();
 
-    const pan = Gesture.Pan()
-      .enabled(showProgressDrag)
-      .maxPointers(1)
-      .onStart((event) => {
-        const currentProgress = (state.value + event.x) / fullWidth;
-        state.value = Math.max(0, Math.min(currentProgress, 1));
-        if (onStartDrag) {
-          runOnJS(onStartDrag)(state.value);
-        }
-        if (onPlayPause) {
-          runOnJS(onPlayPause)(true);
-        }
-      })
-      .onUpdate((event) => {
-        const currentProgress = (state.value + event.x) / fullWidth;
-        state.value = Math.max(0, Math.min(currentProgress, 1));
-        if (onProgressDrag) {
-          runOnJS(onProgressDrag)(state.value);
-        }
-      })
-      .onEnd((event) => {
-        const currentProgress = (state.value + event.x) / fullWidth;
-        state.value = Math.max(0, Math.min(currentProgress, 1));
-        if (onEndDrag) {
-          runOnJS(onEndDrag)(state.value);
-        }
-        if (onPlayPause) {
-          runOnJS(onPlayPause)(false);
-        }
-      });
+    const pan = useMemo(
+      () =>
+        Gesture.Pan()
+          .enabled(showProgressDrag)
+          .maxPointers(1)
+          .onStart(() => {
+            if (onStartDrag) {
+              runOnJS(onStartDrag)(state.value);
+            }
+          })
+          .onUpdate((event) => {
+            const newProgress = Math.max(0, Math.min(event.x / fullWidth, 1));
+            state.value = newProgress;
+            waveFormNumberFromProgress(newProgress);
+          })
+          .onEnd(() => {
+            if (onEndDrag) {
+              runOnJS(onEndDrag)(state.value);
+            }
+          }),
+      [fullWidth, onEndDrag, onStartDrag, showProgressDrag, state, waveFormNumberFromProgress],
+    );
 
     const stringifiedWaveformData = waveformData.toString();
 

package/src/contexts/audioPlayerContext/AudioPlayerContext.tsx

@@ -0,0 +1,55 @@
+import React, { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';
+
+import { useStateStore } from '../../hooks/useStateStore';
+import { AudioPlayerPool, AudioPlayerPoolState } from '../../state-store/audio-player-pool';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
+export type AudioPlayerContextProps = {
+  allowConcurrentAudioPlayback: boolean;
+};
+
+export type AudioPlayerContextValue = {
+  audioPlayerPool: AudioPlayerPool;
+};
+
+export const AudioPlayerContext = createContext<AudioPlayerContextValue>(
+  DEFAULT_BASE_CONTEXT_VALUE as AudioPlayerContextValue,
+);
+
+export const AudioPlayerProvider = ({
+  value,
+  children,
+}: PropsWithChildren<{ value: AudioPlayerContextProps }>) => {
+  const { allowConcurrentAudioPlayback } = value;
+  const audioPlayerPool = useMemo(
+    () => new AudioPlayerPool({ allowConcurrentAudioPlayback }),
+    [allowConcurrentAudioPlayback],
+  );
+  const audioPlayerPoolContextValue = useMemo(() => ({ audioPlayerPool }), [audioPlayerPool]);
+
+  useEffect(
+    () => () => {
+      audioPlayerPool.clear();
+    },
+    [audioPlayerPool],
+  );
+
+  return (
+    <AudioPlayerContext.Provider value={audioPlayerPoolContextValue}>
+      {children}
+    </AudioPlayerContext.Provider>
+  );
+};
+
+export const useAudioPlayerContext = () => useContext(AudioPlayerContext);
+
+const activeAudioPlayerSelector = ({ activeAudioPlayer }: AudioPlayerPoolState) => ({
+  activeAudioPlayer,
+});
+
+export const useActiveAudioPlayer = () => {
+  const { audioPlayerPool } = useContext(AudioPlayerContext);
+  const { activeAudioPlayer } =
+    useStateStore(audioPlayerPool.state, activeAudioPlayerSelector) ?? {};
+  return activeAudioPlayer;
+};

package/src/contexts/index.ts

@@ -28,3 +28,4 @@ export * from './typingContext/TypingContext';
 export * from './utils/getDisplayName';
 export * from './pollContext';
 export * from './liveLocationManagerContext';
+export * from './audioPlayerContext/AudioPlayerContext';

package/src/contexts/themeContext/utils/theme.ts

@@ -105,6 +105,10 @@ export type Theme = {
     imageOverlaySelectedComponent: {
       check: ViewStyle;
     };
+    handle: {
+      container: ViewStyle;
+      indicator: ViewStyle;
+    };
   };
   attachmentSelectionBar: {
     container: ViewStyle;
@@ -896,6 +900,10 @@ export const defaultTheme: Theme = {
     errorButtonText: {},
     errorContainer: {},
     errorText: {},
+    handle: {
+      container: {},
+      indicator: {},
+    },
     image: {},
     imageOverlay: {},
     imageOverlaySelectedComponent: {

package/src/hooks/index.ts

@@ -10,3 +10,4 @@ export * from './useQueryReminders';
 export * from './useClientNotifications';
 export * from './useInAppNotificationsState';
 export * from './useRAFCoalescedValue';
+export * from './useAudioPlayerControl';

package/src/hooks/useAudioPlayer.ts

@@ -9,6 +9,8 @@ export type UseSoundPlayerProps = {
 /**
  * This hook is used to play, pause, seek and change audio speed.
  * It handles both Expo CLI and Native CLI.
+ *
+ * @deprecated This is deprecated and will be removed in the future.
  */
 export const useAudioPlayer = (props: UseSoundPlayerProps) => {
   const { soundRef } = props;
@@ -40,24 +42,21 @@ export const useAudioPlayer = (props: UseSoundPlayerProps) => {
   }, [isExpoCLI, soundRef]);
 
   const seekAudio = useCallback(
-    async (currentTime: number) => {
+    async (currentTimeInSeconds: number = 0) => {
       if (isExpoCLI) {
-        if (currentTime === 0) {
+        if (currentTimeInSeconds === 0) {
           // If currentTime is 0, we should replay the video from 0th position.
           if (soundRef.current?.replayAsync) {
-            await soundRef.current.replayAsync({
-              positionMillis: 0,
-              shouldPlay: false,
-            });
+            await soundRef.current.replayAsync({});
           }
         } else {
           if (soundRef.current?.setPositionAsync) {
-            await soundRef.current.setPositionAsync(currentTime * 1000);
+            await soundRef.current.setPositionAsync(currentTimeInSeconds);
           }
         }
       } else {
         if (soundRef.current?.seek) {
-          soundRef.current.seek(currentTime);
+          soundRef.current.seek(currentTimeInSeconds);
         }
       }
     },

package/src/hooks/useAudioPlayerControl.ts

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+
+import { useAudioPlayerContext } from '../contexts/audioPlayerContext/AudioPlayerContext';
+import { AudioPlayerOptions } from '../state-store/audio-player';
+
+export type UseAudioPlayerControlProps = {
+  /**
+   * Identifier of the entity that requested the audio playback, e.g. message ID.
+   * Asset to specific audio player is a many-to-many relationship
+   * - one URL can be associated with multiple UI elements,
+   * - one UI element can display multiple audio sources.
+   * Therefore, the AudioPlayer ID is a combination of request:src.
+   *
+   * The requester string can take into consideration whether there are multiple instances of
+   * the same URL requested by the same requester (message has multiple attachments with the same asset URL).
+   * In reality the fact that one message has multiple attachments with the same asset URL
+   * could be considered a bad practice or a bug.
+   */
+  requester?: string;
+} & Partial<AudioPlayerOptions>;
+
+const makeAudioPlayerId = ({
+  requester,
+  src,
+  id,
+}: {
+  src: string;
+  requester?: string;
+  id?: string;
+}) => `${requester ?? 'requester-unknown'}:${src}:${id ?? ''}`;
+
+export const useAudioPlayerControl = ({
+  duration,
+  mimeType,
+  playbackRates,
+  previewVoiceRecording,
+  requester = '',
+  type,
+  uri,
+  id: fileId,
+}: UseAudioPlayerControlProps) => {
+  const { audioPlayerPool } = useAudioPlayerContext();
+  const id = makeAudioPlayerId({ id: fileId, requester, src: uri ?? '' });
+  const audioPlayer = useMemo(
+    () =>
+      audioPlayerPool?.getOrAddPlayer({
+        duration: duration ?? 0,
+        id,
+        mimeType: mimeType ?? '',
+        playbackRates,
+        previewVoiceRecording,
+        type: type ?? 'audio',
+        uri: uri ?? '',
+      }),
+    [audioPlayerPool, duration, id, mimeType, playbackRates, previewVoiceRecording, type, uri],
+  );
+
+  return audioPlayer;
+};

package/src/hooks/useInAppNotificationsState.ts

@@ -3,12 +3,12 @@ import { Notification } from 'stream-chat';
 import { useStableCallback } from './useStableCallback';
 import { useStateStore } from './useStateStore';
 
-import type { InAppNotificationsState } from '../store/in-app-notifications-store';
+import type { InAppNotificationsState } from '../state-store/in-app-notifications-store';
 import {
   closeInAppNotification,
   inAppNotificationsStore,
   openInAppNotification,
-} from '../store/in-app-notifications-store';
+} from '../state-store/in-app-notifications-store';
 
 const selector = ({ notifications }: InAppNotificationsState) => ({
   notifications,

package/src/i18n/es.json

@@ -129,18 +129,17 @@
   "Vote ended": "Votación finalizada",
   "You": "Tú",
   "You can't send messages in this channel": "No puedes enviar mensajes en este canal",
+  "duration/Location end at": "{{ milliseconds | durationFormatter(withSuffix: false) }}",
   "duration/Message reminder": "{{ milliseconds | durationFormatter(withSuffix: true) }}",
   "duration/Remind Me": "{{ milliseconds | durationFormatter(withSuffix: true) }}",
   "replied to": "respondió a",
   "timestamp/ChannelPreviewStatus": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Ayer]\", \"lastWeek\":\"dddd\", \"nextDay\":\"[Mañana]\", \"nextWeek\":\"dddd [a las] LT\", \"sameDay\":\"LT\", \"sameElse\":\"L\"}) }}",
   "timestamp/ImageGalleryHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/InlineDateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
-  "timestamp/Location end at": "{{ milliseconds | durationFormatter(withSuffix: false) }}",
   "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
   "timestamp/PollVote": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Ayer]\", \"lastWeek\":\"dddd\", \"nextDay\":\"[Mañana]\", \"nextWeek\":\"dddd [a las] LT\", \"sameDay\":\"LT\", \"sameElse\":\"L\"}) }}",
-  "timestamp/Remind me": "{{ milliseconds | durationFormatter(withSuffix: true) }}",
   "timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/ThreadListItem": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Ayer]\", \"lastWeek\":\"dddd\", \"nextDay\":\"[Mañana]\", \"nextWeek\":\"dddd [a las] LT\", \"sameDay\":\"LT\", \"sameElse\":\"L\"}) }}",

package/src/i18n/he.json

@@ -1,7 +1,7 @@
 {
+  "+{{count}}_many": "+{{count}}",
   "+{{count}}_one": "+{{count}}",
   "+{{count}}_other": "+{{count}}",
-  "+{{count}}_two": "+{{count}}",
   "1 Reply": "תגובה אחת",
   "1 Thread Reply": "תגובה אחת לשרשור",
   "Add a comment": "הוסף תגובה",
@@ -91,15 +91,15 @@
   "Resend": "שלח/י שוב",
   "SEND": "שלח",
   "Search": "חפש/י",
+  "See all {{count}} options_many": "הצג את כל {{count}} האפשרויות",
   "See all {{count}} options_one": "הצג את כל {{count}} האפשרויות",
   "See all {{count}} options_other": "הצג את כל {{count}} האפשרויות",
-  "See all {{count}} options_two": "הצג את כל {{count}} האפשרויות",
   "Select More Photos": "בחר עוד תמונות",
   "Select one": "בחר אחת",
   "Select one or more": "בחר אחת או יותר",
+  "Select up to {{count}}_many": "בחר עד {{count}}",
   "Select up to {{count}}_one": "בחר עד {{count}}",
   "Select up to {{count}}_other": "בחר עד {{count}}",
-  "Select up to {{count}}_two": "בחר עד {{count}}",
   "Send Anyway": "שלח בכל זאת",
   "Send a message": "שלח/י הודעה",
   "Sending links is not allowed in this conversation": "שליחת קישורים אינה מותרת בשיחה זו",
@@ -122,9 +122,9 @@
   "Update your comment": "עדכן את התגובה שלך",
   "Video": "וִידֵאוֹ",
   "View Results": "הצג תוצאות",
+  "View {{count}} comments_many": "הצג {{count}} תגובות",
   "View {{count}} comments_one": "הצג {{count}} תגובה",
   "View {{count}} comments_other": "הצג {{count}} תגובות",
-  "View {{count}} comments_two": "הצג {{count}} תגובות",
   "Voice message": "הודעת קול",
   "Vote ended": "ההצבעה הסתיימה",
   "You": "את/ה",
@@ -148,8 +148,8 @@
   "{{ replyCount }} Replies": "{{ replyCount }} תגובות",
   "{{ replyCount }} Thread Replies": "{{ replyCount }} תגובות שרשור",
   "{{ user }} is typing": "{{ user }} מקליד/ה",
+  "{{count}} votes_many": "{{count}} הצבעות",
   "{{count}} votes_one": "{{count}} הצבעה",
   "{{count}} votes_other": "{{count}} הצבעות",
-  "{{count}} votes_two": "{{count}} הצבעות",
   "🏙 Attachment...": "🏙 קובץ מצורף..."
 }

package/src/i18n/ru.json

@@ -1,5 +1,4 @@
 {
-  "+{{count}}_few": "+{{count}}",
   "+{{count}}_many": "+{{count}}",
   "+{{count}}_one": "+{{count}}",
   "+{{count}}_other": "+{{count}}",
@@ -92,14 +91,12 @@
   "Resend": "Отправить",
   "SEND": "ОТПРАВИТЬ",
   "Search": "Поиск",
-  "See all {{count}} options_few": "Посмотреть все {{count}} вариантов",
   "See all {{count}} options_many": "Посмотреть все {{count}} вариантов",
   "See all {{count}} options_one": "Посмотреть все {{count}} вариант",
   "See all {{count}} options_other": "Посмотреть все {{count}} вариантов",
   "Select More Photos": "Выбрать больше фотографий",
   "Select one": "Выберите один",
   "Select one or more": "Выберите один или несколько",
-  "Select up to {{count}}_few": "Выберите до {{count}}",
   "Select up to {{count}}_many": "Выберите до {{count}}",
   "Select up to {{count}}_one": "Выберите до {{count}}",
   "Select up to {{count}}_other": "Выберите до {{count}}",
@@ -125,7 +122,6 @@
   "Update your comment": "Обновить ваш комментарий",
   "Video": "видео",
   "View Results": "Посмотреть результаты",
-  "View {{count}} comments_few": "Посмотреть {{count}} комментария",
   "View {{count}} comments_many": "Посмотреть {{count}} комментария",
   "View {{count}} comments_one": "Посмотреть {{count}} комментарий",
   "View {{count}} comments_other": "Посмотреть {{count}} комментария",
@@ -152,7 +148,6 @@
   "{{ replyCount }} Replies": "{{ replyCount }} Ответов",
   "{{ replyCount }} Thread Replies": "{{replyCount}} Ответы в темах",
   "{{ user }} is typing": "{{ user }} пишет",
-  "{{count}} votes_few": "{{count}} голосов",
   "{{count}} votes_many": "{{count}} голосов",
   "{{count}} votes_one": "{{count}} голос",
   "{{count}} votes_other": "{{count}} голосов",

package/src/index.ts

@@ -31,7 +31,7 @@ export { default as ptBRTranslations } from './i18n/pt-br.json';
 export { default as ruTranslations } from './i18n/ru.json';
 export { default as trTranslations } from './i18n/tr.json';
 
-export * from './store';
+export * from './state-store';
 export { SqliteClient } from './store/SqliteClient';
 export { OfflineDB } from './store/OfflineDB';
 export { version } from './version.json';

package/src/native.ts

@@ -227,6 +227,7 @@ export type AudioType = {
   stopRecording: () => Promise<void>;
   pausePlayer?: () => Promise<void>;
   resumePlayer?: () => Promise<void>;
+  seekToPlayer?: (positionInMillis: number) => Promise<void>;
   startPlayer?: (
     uri?: AudioRecordingReturnType,
     initialStatus?: Partial<AVPlaybackStatusToSet>,

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

@@ -0,0 +1,94 @@
+import { StateStore } from 'stream-chat';
+
+import { AudioPlayer, AudioPlayerOptions } from './audio-player';
+
+export type AudioPlayerPoolOptions = {
+  allowConcurrentAudioPlayback: boolean;
+};
+
+export type AudioPlayerPoolState = {
+  activeAudioPlayer: AudioPlayer | null;
+};
+
+export class AudioPlayerPool {
+  pool: Map<string, AudioPlayer>;
+  allowConcurrentAudioPlayback: boolean;
+  state: StateStore<AudioPlayerPoolState> = new StateStore<AudioPlayerPoolState>({
+    activeAudioPlayer: null,
+  });
+
+  constructor({ allowConcurrentAudioPlayback }: AudioPlayerPoolOptions) {
+    this.pool = new Map<string, AudioPlayer>();
+    this.allowConcurrentAudioPlayback = allowConcurrentAudioPlayback ?? false;
+  }
+
+  get players() {
+    return Array.from(this.pool.values());
+  }
+
+  getOrAddPlayer(params: AudioPlayerOptions) {
+    const player = this.pool.get(params.id);
+    if (player) {
+      return player;
+    }
+    const newPlayer = new AudioPlayer(params);
+    newPlayer.pool = this;
+
+    this.pool.set(params.id, newPlayer);
+    return newPlayer;
+  }
+
+  setActivePlayer(activeAudioPlayer: AudioPlayer | null) {
+    this.state.partialNext({
+      activeAudioPlayer,
+    });
+  }
+
+  getActivePlayer() {
+    return this.state.getLatestValue().activeAudioPlayer;
+  }
+
+  removePlayer(id: string) {
+    const player = this.pool.get(id);
+    if (!player) return;
+    player.onRemove();
+    this.pool.delete(id);
+
+    if (this.getActivePlayer()?.id === id) {
+      this.setActivePlayer(null);
+    }
+  }
+
+  deregister(id: string) {
+    if (this.pool.has(id)) {
+      this.pool.delete(id);
+    }
+  }
+
+  clear() {
+    for (const player of this.pool.values()) {
+      this.removePlayer(player.id);
+    }
+    this.setActivePlayer(null);
+  }
+
+  requestPlay(id: string) {
+    if (this.allowConcurrentAudioPlayback) return;
+
+    if (this.getActivePlayer()?.id !== id) {
+      const currentPlayer = this.getActivePlayer();
+      if (currentPlayer && currentPlayer.isPlaying) {
+        currentPlayer.pause();
+      }
+    }
+
+    const activePlayer = this.pool.get(id);
+    if (activePlayer) {
+      this.setActivePlayer(activePlayer);
+    }
+  }
+
+  notifyPaused() {
+    this.setActivePlayer(null);
+  }
+}