stream-chat-react-native-core 9.4.0-beta.9 → 9.4.1-beta.1

package/src/state-store/__tests__/image-gallery-state-store.test.ts

@@ -13,6 +13,7 @@ import { VideoPlayerPool } from '../video-player-pool';
 jest.mock('../video-player-pool', () => ({
   VideoPlayerPool: jest.fn().mockImplementation(() => ({
     clear: jest.fn(),
+    getActivePlayer: jest.fn(() => null),
     pool: new Map(),
     state: {
       getLatestValue: () => ({ activeVideoPlayer: null }),
@@ -179,6 +180,63 @@ describe('ImageGalleryStateStore', () => {
 
       expect(store.state.getLatestValue().currentIndex).toBe(0);
     });
+
+    it('should mirror currentIndex into currentIndexShared.value', () => {
+      const store = new ImageGalleryStateStore();
+
+      store.currentIndex = 7;
+
+      expect(store.currentIndexShared.value).toBe(7);
+    });
+
+    it('should pause the active video player when currentIndex changes', () => {
+      const store = new ImageGalleryStateStore();
+      const pause = jest.fn();
+      (store.videoPlayerPool.getActivePlayer as jest.Mock).mockReturnValue({ pause });
+
+      store.currentIndex = 3;
+
+      expect(pause).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not pause the active player when currentIndex setter is called with the same value', () => {
+      const store = new ImageGalleryStateStore();
+      store.currentIndex = 3;
+      const pause = jest.fn();
+      (store.videoPlayerPool.getActivePlayer as jest.Mock).mockReturnValue({ pause });
+
+      store.currentIndex = 3;
+
+      expect(pause).not.toHaveBeenCalled();
+    });
+
+    it('should not throw when there is no active player on index change', () => {
+      const store = new ImageGalleryStateStore();
+      (store.videoPlayerPool.getActivePlayer as jest.Mock).mockReturnValue(null);
+
+      expect(() => {
+        store.currentIndex = 5;
+      }).not.toThrow();
+    });
+  });
+
+  describe('currentIndexShared mirror', () => {
+    it('should initialize at INITIAL_STATE.currentIndex (0)', () => {
+      const store = new ImageGalleryStateStore();
+
+      expect(store.currentIndexShared.value).toBe(0);
+    });
+
+    it('should reset to 0 on clear() even after non-zero set', () => {
+      const store = new ImageGalleryStateStore();
+      store.currentIndex = 12;
+      expect(store.currentIndexShared.value).toBe(12);
+
+      store.clear();
+
+      expect(store.state.getLatestValue().currentIndex).toBe(0);
+      expect(store.currentIndexShared.value).toBe(0);
+    });
   });
 
   describe('attachmentsWithMessage getter', () => {
@@ -707,6 +765,29 @@ describe('ImageGalleryStateStore', () => {
       unsubscribe();
     });
 
+    it('should mirror the matched index into currentIndexShared', () => {
+      const store = new ImageGalleryStateStore();
+      store.subscribeToMessages();
+      const unsubscribe = store.subscribeToSelectedAttachmentUrl();
+
+      store.messages = [
+        generateMessage({
+          attachments: [generateImageAttachment({ image_url: 'https://example.com/1.jpg' })],
+          id: 'msg-1',
+        }),
+        generateMessage({
+          attachments: [generateImageAttachment({ image_url: 'https://example.com/2.jpg' })],
+          id: 'msg-2',
+        }),
+      ];
+      store.selectedAttachmentUrl = 'https://example.com/2.jpg';
+
+      expect(store.state.getLatestValue().currentIndex).toBe(1);
+      expect(store.currentIndexShared.value).toBe(1);
+
+      unsubscribe();
+    });
+
     it('should return unsubscribe function', () => {
       const store = new ImageGalleryStateStore();
       const unsubscribe = store.subscribeToSelectedAttachmentUrl();

package/src/state-store/image-gallery-state-store.ts

@@ -1,3 +1,5 @@
+import { makeMutable, SharedValue } from 'react-native-reanimated';
+
 import { Attachment, LocalMessage, StateStore, Unsubscribe, UserResponse } from 'stream-chat';
 
 import { VideoPlayerPool } from './video-player-pool';
@@ -66,11 +68,19 @@ export class ImageGalleryStateStore {
   state: StateStore<ImageGalleryState>;
   options: ImageGalleryOptions;
   videoPlayerPool: VideoPlayerPool;
+  /**
+   * SharedValue mirror of `state.currentIndex` for worklet consumers (gesture
+   * handlers, animated styles). Maintained in lockstep with the setter and the
+   * reset path in `clear()`. Reads from worklets bypass the JS bridge entirely;
+   * any code path that updates `currentIndex` must keep this mirror in sync.
+   */
+  currentIndexShared: SharedValue<number>;
 
   constructor(options: Partial<ImageGalleryOptions> = {}) {
     this.options = { ...INITIAL_IMAGE_GALLERY_OPTIONS, ...options };
     this.state = new StateStore<ImageGalleryState>(INITIAL_STATE);
     this.videoPlayerPool = new VideoPlayerPool();
+    this.currentIndexShared = makeMutable(INITIAL_STATE.currentIndex);
   }
 
   // Getters
@@ -154,7 +164,21 @@ export class ImageGalleryStateStore {
   }
 
   set currentIndex(currentIndex: number) {
+    const previousIndex = this.state.getLatestValue().currentIndex;
     this.state.partialNext({ currentIndex });
+    this.currentIndexShared.value = currentIndex;
+    // When the user moves off the current slide, pause whatever video was
+    // playing. Moved here from a useEffect in ImageGallery so the invariant
+    // lives next to the state it depends on — and the parent no longer needs
+    // to subscribe to currentIndex purely to drive this side effect.
+    // `clear()` is the other reset path; it bypasses this setter but already
+    // pauses everything through `videoPlayerPool.clear()`.
+    if (previousIndex !== currentIndex) {
+      const activePlayer = this.videoPlayerPool.getActivePlayer();
+      if (activePlayer) {
+        activePlayer.pause();
+      }
+    }
   }
 
   set requesterNode(requesterNode: number | null) {
@@ -212,7 +236,8 @@ export class ImageGalleryStateStore {
           (asset) =>
             stripQueryFromUrl(asset.uri) === stripQueryFromUrl(selectedAttachmentUrl ?? ''),
         );
-        this.state.partialNext({ currentIndex: index === -1 ? 0 : index });
+        // Route through the setter so currentIndexShared stays in sync.
+        this.currentIndex = index === -1 ? 0 : index;
       },
     );
 
@@ -233,5 +258,6 @@ export class ImageGalleryStateStore {
   clear = () => {
     this.videoPlayerPool.clear();
     this.state.partialNext(INITIAL_STATE);
+    this.currentIndexShared.value = INITIAL_STATE.currentIndex;
   };
 }

package/src/store/SqliteClient.ts

@@ -28,7 +28,7 @@ import type { PreparedBatchQueries, PreparedQueries, Scalar, Table } from './typ
  * This way usage @op-engineering/op-sqlite package is scoped to a single class/file.
  */
 export class SqliteClient {
-  static dbVersion = 15;
+  static dbVersion = 16;
 
   static dbName = DB_NAME;
   static dbLocation = DB_LOCATION;

package/src/store/mappers/mapDraftMessageToStorable.ts

@@ -12,6 +12,10 @@ export const mapDraftMessageToStorable = ({
     custom,
     text,
     attachments,
+    mentioned_channel,
+    mentioned_group_ids,
+    mentioned_here,
+    mentioned_roles,
     mentioned_users,
     parent_id,
     poll_id,
@@ -25,6 +29,10 @@ export const mapDraftMessageToStorable = ({
     attachments: attachments ? JSON.stringify(attachments) : undefined,
     custom: custom ? JSON.stringify(custom) : undefined,
     id,
+    mentionedChannel: mentioned_channel,
+    mentionedGroupIds: mentioned_group_ids ? JSON.stringify(mentioned_group_ids) : undefined,
+    mentionedHere: mentioned_here,
+    mentionedRoles: mentioned_roles ? JSON.stringify(mentioned_roles) : undefined,
     mentionedUsers: mentioned_users ? JSON.stringify(mentioned_users) : undefined,
     parentId: parent_id,
     poll_id,

package/src/store/mappers/mapStorableToDraftMessage.ts

@@ -10,6 +10,10 @@ export const mapStorableToDraftMessage = (
     custom,
     text,
     attachments,
+    mentionedChannel,
+    mentionedGroupIds,
+    mentionedHere,
+    mentionedRoles,
     mentionedUsers,
     parentId,
     poll_id,
@@ -23,6 +27,10 @@ export const mapStorableToDraftMessage = (
     attachments: attachments ? JSON.parse(attachments) : undefined,
     custom: custom ? JSON.parse(custom) : undefined,
     id,
+    mentioned_channel: mentionedChannel,
+    mentioned_group_ids: mentionedGroupIds ? JSON.parse(mentionedGroupIds) : undefined,
+    mentioned_here: mentionedHere,
+    mentioned_roles: mentionedRoles ? JSON.parse(mentionedRoles) : undefined,
     mentioned_users: mentionedUsers ? JSON.parse(mentionedUsers) : undefined,
     parent_id: parentId,
     poll_id,

package/src/store/schema.ts

@@ -90,6 +90,10 @@ export const tables: Tables = {
       attachments: 'TEXT',
       custom: 'TEXT',
       id: 'TEXT NOT NULL',
+      mentionedChannel: 'BOOLEAN DEFAULT FALSE',
+      mentionedGroupIds: 'TEXT',
+      mentionedHere: 'BOOLEAN DEFAULT FALSE',
+      mentionedRoles: 'TEXT',
       mentionedUsers: 'TEXT',
       parentId: 'TEXT',
       poll_id: 'TEXT',
@@ -381,6 +385,10 @@ export type Schema = {
     id: string;
     attachments?: string;
     custom?: string;
+    mentionedChannel?: boolean;
+    mentionedGroupIds?: string;
+    mentionedHere?: boolean;
+    mentionedRoles?: string;
     mentionedUsers?: string;
     parentId?: string;
     poll_id?: string;

package/src/theme/generated/StreamTokens.types.ts

@@ -444,6 +444,11 @@ export interface ChatSemantics {
   chatBgAttachmentIncoming: ColorValue;
   chatBgAttachmentOutgoing: ColorValue;
   chatBgIncoming: ColorValue;
+  chatBgMention: ColorValue;
+  chatBgMentionBroadcast: ColorValue;
+  chatBgMentionGroup: ColorValue;
+  chatBgMentionRole: ColorValue;
+  chatBgMentionUser: ColorValue;
   chatBgOutgoing: ColorValue;
   chatBorderIncoming: ColorValue;
   chatBorderOnChatIncoming: ColorValue;
@@ -458,6 +463,10 @@ export interface ChatSemantics {
   chatTextIncoming: ColorValue;
   chatTextLink: ColorValue;
   chatTextMention: ColorValue;
+  chatTextMentionBroadcast: ColorValue;
+  chatTextMentionGroup: ColorValue;
+  chatTextMentionRole: ColorValue;
+  chatTextMentionUser: ColorValue;
   chatTextOutgoing: ColorValue;
   chatTextReaction: ColorValue;
   chatTextRead: ColorValue;

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

@@ -509,6 +509,11 @@ export const semantics: IStreamTokens['semantics'] = {
   chatBgAttachmentIncoming: '$backgroundCoreSurfaceStrong',
   chatBgAttachmentOutgoing: '$brand150',
   chatBgIncoming: '$backgroundCoreSurfaceDefault',
+  chatBgMention: foundations.colors.baseTransparent0,
+  chatBgMentionBroadcast: '$chatBgMention',
+  chatBgMentionGroup: '$chatBgMention',
+  chatBgMentionRole: '$chatBgMention',
+  chatBgMentionUser: '$chatBgMention',
   chatBgOutgoing: '$brand100',
   chatBorderIncoming: '$borderCoreSubtle',
   chatBorderOnChatIncoming: '$borderCoreStrong',
@@ -522,7 +527,11 @@ export const semantics: IStreamTokens['semantics'] = {
   chatReplyIndicatorOutgoing: '$brand400',
   chatTextIncoming: '$textPrimary',
   chatTextLink: '$textLink',
-  chatTextMention: '$textLink',
+  chatTextMention: '$accentPrimary',
+  chatTextMentionBroadcast: '$chatTextMention',
+  chatTextMentionGroup: '$chatTextMention',
+  chatTextMentionRole: '$chatTextMention',
+  chatTextMentionUser: '$chatTextMention',
   chatTextOutgoing: '$brand900',
   chatTextReaction: '$textSecondary',
   chatTextRead: '$accentPrimary',

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

@@ -509,6 +509,11 @@ export const semantics: IStreamTokens['semantics'] = {
   chatBgAttachmentIncoming: '$backgroundCoreSurfaceStrong',
   chatBgAttachmentOutgoing: '$brand150',
   chatBgIncoming: '$backgroundCoreSurfaceDefault',
+  chatBgMention: foundations.colors.baseTransparent0,
+  chatBgMentionBroadcast: '$chatBgMention',
+  chatBgMentionGroup: '$chatBgMention',
+  chatBgMentionRole: '$chatBgMention',
+  chatBgMentionUser: '$chatBgMention',
   chatBgOutgoing: '$brand100',
   chatBorderIncoming: '$borderCoreSubtle',
   chatBorderOnChatIncoming: '$borderCoreStrong',
@@ -522,7 +527,11 @@ export const semantics: IStreamTokens['semantics'] = {
   chatReplyIndicatorOutgoing: '$brand400',
   chatTextIncoming: '$textPrimary',
   chatTextLink: '$textLink',
-  chatTextMention: '$textLink',
+  chatTextMention: '$accentPrimary',
+  chatTextMentionBroadcast: '$chatTextMention',
+  chatTextMentionGroup: '$chatTextMention',
+  chatTextMentionRole: '$chatTextMention',
+  chatTextMentionUser: '$chatTextMention',
   chatTextOutgoing: '$brand900',
   chatTextReaction: '$textSecondary',
   chatTextRead: '$accentPrimary',

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

@@ -509,6 +509,11 @@ export const semantics: IStreamTokens['semantics'] = {
   chatBgAttachmentIncoming: '$backgroundCoreSurfaceStrong',
   chatBgAttachmentOutgoing: '$brand150',
   chatBgIncoming: '$backgroundCoreSurfaceDefault',
+  chatBgMention: foundations.colors.baseTransparent0,
+  chatBgMentionBroadcast: '$chatBgMention',
+  chatBgMentionGroup: '$chatBgMention',
+  chatBgMentionRole: '$chatBgMention',
+  chatBgMentionUser: '$chatBgMention',
   chatBgOutgoing: '$brand100',
   chatBorderIncoming: '$borderCoreSubtle',
   chatBorderOnChatIncoming: '$borderCoreStrong',
@@ -522,7 +527,11 @@ export const semantics: IStreamTokens['semantics'] = {
   chatReplyIndicatorOutgoing: '$brand400',
   chatTextIncoming: '$textPrimary',
   chatTextLink: '$textLink',
-  chatTextMention: '$textLink',
+  chatTextMention: '$accentPrimary',
+  chatTextMentionBroadcast: '$chatTextMention',
+  chatTextMentionGroup: '$chatTextMention',
+  chatTextMentionRole: '$chatTextMention',
+  chatTextMentionUser: '$chatTextMention',
   chatTextOutgoing: '$brand900',
   chatTextReaction: '$textSecondary',
   chatTextRead: '$accentPrimary',

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

@@ -509,6 +509,11 @@ export const semantics: IStreamTokens['semantics'] = {
   chatBgAttachmentIncoming: '$backgroundCoreSurfaceStrong',
   chatBgAttachmentOutgoing: '$brand150',
   chatBgIncoming: '$backgroundCoreSurfaceDefault',
+  chatBgMention: foundations.colors.baseTransparent0,
+  chatBgMentionBroadcast: '$chatBgMention',
+  chatBgMentionGroup: '$chatBgMention',
+  chatBgMentionRole: '$chatBgMention',
+  chatBgMentionUser: '$chatBgMention',
   chatBgOutgoing: '$brand100',
   chatBorderIncoming: '$borderCoreSubtle',
   chatBorderOnChatIncoming: '$borderCoreStrong',
@@ -522,7 +527,11 @@ export const semantics: IStreamTokens['semantics'] = {
   chatReplyIndicatorOutgoing: '$brand400',
   chatTextIncoming: '$textPrimary',
   chatTextLink: '$textLink',
-  chatTextMention: '$textLink',
+  chatTextMention: '$accentPrimary',
+  chatTextMentionBroadcast: '$chatTextMention',
+  chatTextMentionGroup: '$chatTextMention',
+  chatTextMentionRole: '$chatTextMention',
+  chatTextMentionUser: '$chatTextMention',
   chatTextOutgoing: '$brand900',
   chatTextReaction: '$textSecondary',
   chatTextRead: '$accentPrimary',

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

@@ -509,6 +509,11 @@ export const semantics: IStreamTokens['semantics'] = {
   chatBgAttachmentIncoming: '$backgroundCoreSurfaceStrong',
   chatBgAttachmentOutgoing: '$brand150',
   chatBgIncoming: '$backgroundCoreSurfaceDefault',
+  chatBgMention: foundations.colors.baseTransparent0,
+  chatBgMentionBroadcast: '$chatBgMention',
+  chatBgMentionGroup: '$chatBgMention',
+  chatBgMentionRole: '$chatBgMention',
+  chatBgMentionUser: '$chatBgMention',
   chatBgOutgoing: '$brand100',
   chatBorderIncoming: '$borderCoreSubtle',
   chatBorderOnChatIncoming: '$borderCoreStrong',
@@ -522,7 +527,11 @@ export const semantics: IStreamTokens['semantics'] = {
   chatReplyIndicatorOutgoing: '$brand400',
   chatTextIncoming: '$textPrimary',
   chatTextLink: '$textLink',
-  chatTextMention: '$textLink',
+  chatTextMention: '$accentPrimary',
+  chatTextMentionBroadcast: '$chatTextMention',
+  chatTextMentionGroup: '$chatTextMention',
+  chatTextMentionRole: '$chatTextMention',
+  chatTextMentionUser: '$chatTextMention',
   chatTextOutgoing: '$brand900',
   chatTextReaction: '$textSecondary',
   chatTextRead: '$accentPrimary',

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

@@ -509,6 +509,11 @@ export const semantics: IStreamTokens['semantics'] = {
   chatBgAttachmentIncoming: '$backgroundCoreSurfaceStrong',
   chatBgAttachmentOutgoing: '$brand150',
   chatBgIncoming: '$backgroundCoreSurfaceDefault',
+  chatBgMention: foundations.colors.baseTransparent0,
+  chatBgMentionBroadcast: '$chatBgMention',
+  chatBgMentionGroup: '$chatBgMention',
+  chatBgMentionRole: '$chatBgMention',
+  chatBgMentionUser: '$chatBgMention',
   chatBgOutgoing: '$brand100',
   chatBorderIncoming: '$borderCoreSubtle',
   chatBorderOnChatIncoming: '$borderCoreStrong',
@@ -522,7 +527,11 @@ export const semantics: IStreamTokens['semantics'] = {
   chatReplyIndicatorOutgoing: '$brand400',
   chatTextIncoming: '$textPrimary',
   chatTextLink: '$textLink',
-  chatTextMention: '$textLink',
+  chatTextMention: '$accentPrimary',
+  chatTextMentionBroadcast: '$chatTextMention',
+  chatTextMentionGroup: '$chatTextMention',
+  chatTextMentionRole: '$chatTextMention',
+  chatTextMentionUser: '$chatTextMention',
   chatTextOutgoing: '$brand900',
   chatTextReaction: '$textSecondary',
   chatTextRead: '$accentPrimary',

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.4.0-beta.9"
+  "version": "9.4.1-beta.1"
 }