@applicaster/zapp-react-native-ui-components 16.0.0-rc.120 → 16.0.0-rc.122

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -273,7 +273,10 @@ const PlayerContainerComponent = (props: Props) => {
   const playEntry = (entry: ZappEntry) => navigator.replaceTop(entry, { mode });
 
   const onPlayNextPerformNextVideoPlay = React.useCallback(() => {
-    if (!playNextOverlayState.entry) {
+    // The overlay's entry, or the player's when the overlay is not showing yet (X-Ray player.next)
+    const nextEntry = playNextOverlayState?.entry ?? player?.getPlayNextEntry();
+
+    if (!nextEntry) {
       log_warning(
         "onPlayNextPerformNextVideoPlay: playNextOverlayState.entry is not defined"
       );
@@ -282,16 +285,30 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     log_debug(
-      `onPlayNextPerformNextVideoPlay: delay completed, replaceTop to item: ${playNextOverlayState.entry.title}, id: ${playNextOverlayState.entry.id}, outgoing item id: ${item?.id}`
+      `onPlayNextPerformNextVideoPlay: delay completed, replaceTop to item: ${nextEntry.title}, id: ${nextEntry.id}, outgoing item id: ${item?.id}`
     );
 
-    playNextOverlayState.hidePlayNext();
+    (
+      playNextOverlayState?.hidePlayNext ??
+      player?.getOverlayObservable()?.hidePlayNext
+    )?.();
 
     playerEvent(PLAYER_EVENTS.PlayNextTriggered, { id: item?.id });
 
     setIsLoadingNextVideo(true);
-    playEntry(playNextOverlayState.entry);
-  }, [playNextOverlayState, item?.id]);
+    playEntry(nextEntry);
+  }, [playNextOverlayState, item?.id, player]);
+
+  // Lets the X-Ray player.next tool run the same Play Next path as the overlay.
+  useEffect(() => {
+    if (!player) return;
+
+    player.playNextHandler = onPlayNextPerformNextVideoPlay;
+
+    return () => {
+      player.playNextHandler = null;
+    };
+  }, [player, onPlayNextPerformNextVideoPlay]);
 
   const playNextData: Nullable<PlayNextData> = React.useMemo(() => {
     if (!playNextOverlayState) {

package/Components/PlayerContainer/__tests__/PlayerContainer.test.tsx

@@ -127,6 +127,8 @@ jest.mock(
       seekTo: jest.fn(),
       getPluginConfiguration: jest.fn(() => ({})),
       getOverlayObservable: jest.fn(() => ({ getPlayNextEntry: () => null })),
+      getPlayNextEntry: jest.fn(() => null),
+      playNextHandler: null,
     };
 
     return {
@@ -335,3 +337,52 @@ describe("PlayerContainer hardware back handling", () => {
     expect(mockNavigator.closeVideoModal).not.toHaveBeenCalled();
   });
 });
+
+describe("PlayerContainer Play Next action for X-Ray player.next", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockIsTV.mockReturnValue(false);
+    mockPlayer.getPluginConfiguration.mockReturnValue({});
+    mockPlayerManager.getPluginConfiguration.mockReturnValue({});
+    mockPlayerManager.on.mockReturnThis();
+    mockPlayerManager.removeHandler.mockReturnThis();
+  });
+
+  it("sets its Play Next action on the player and clears it on unmount", () => {
+    const { unmount } = renderPlayerContainer();
+
+    expect(mockPlayer.playNextHandler).toEqual(expect.any(Function));
+
+    unmount();
+
+    expect(mockPlayer.playNextHandler).toBeNull();
+  });
+
+  it("plays the player's next entry once, with analytics and the overlay hidden, when the overlay is not showing", () => {
+    const next = { id: "entry-2", title: "Next" };
+    const hidePlayNext = jest.fn();
+    mockPlayer.getPlayNextEntry.mockReturnValue(next);
+
+    mockPlayer.getOverlayObservable.mockReturnValue({
+      getPlayNextEntry: () => next,
+      hidePlayNext,
+    });
+
+    renderPlayerContainer();
+
+    mockPlayer.playNextHandler();
+
+    expect(hidePlayNext).toHaveBeenCalledTimes(1);
+
+    expect(mockPlayerManager.invokeHandler).toHaveBeenCalledWith(
+      "play_next_triggered",
+      { id: "entry-1" }
+    );
+
+    expect(mockNavigator.replaceTop).toHaveBeenCalledTimes(1);
+
+    expect(mockNavigator.replaceTop).toHaveBeenCalledWith(next, {
+      mode: VideoModalMode.MAXIMIZED,
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.120",
+  "version": "16.0.0-rc.122",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.120",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.120",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.120",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.120",
+    "@applicaster/applicaster-types": "16.0.0-rc.122",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.122",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.122",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.122",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",