stream-chat-react-native-core 9.4.0-beta.12 → 9.4.0-beta.13

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/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.4.0-beta.12"
+  "version": "9.4.0-beta.13"
 }