@applicaster/zapp-react-native-ui-components 15.1.21-rc.2 → 15.1.22-rc.0

package/Components/MasterCell/DefaultComponents/Image/Image.android.tsx

@@ -24,7 +24,9 @@ const MemoizedImage = React.memo(QBImage, R.equals);
 const isValidExternalSource = (source): boolean =>
   source?.uri?.startsWith("http") ||
   source?.uri?.startsWith("data:image") ||
-  source?.uri?.startsWith("file://");
+  source?.uri?.startsWith("file://") ||
+  source?.uri?.startsWith("asset:/") ||
+  source?.uri?.startsWith("node_modules_");
 
 export default function Image({
   style,

package/Components/MasterCell/DefaultComponents/__tests__/image.android.test.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { Image } from "react-native";
+import AndroidImage from "../Image/Image.android";
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/Image",
+  () => ({
+    QBImage: require("react-native").Image,
+  })
+);
+
+jest.mock("../Image/hooks", () => ({
+  useImageSourceWithDefault: ({ uri }) => ({ uri }),
+  useCheckFailedUri: () => ({
+    appendFailedToLoadUri: jest.fn(),
+    isFailedToLoadUri: () => false,
+  }),
+}));
+
+jest.mock("../Image/hooks/useImageSize", () => ({
+  __esModule: true,
+  default: ({ source }) => source,
+}));
+
+describe("Android MasterCell image sources", () => {
+  test.each([
+    "asset:/icons/play.png",
+    "node_modules_plugin_assets_play",
+    "https://example.com/play.png",
+    "data:image/png;base64,test",
+    "file:///images/play.png",
+  ])("renders supported source %s", (uri) => {
+    const { UNSAFE_getByType } = render(<AndroidImage uri={uri} />);
+
+    expect(UNSAFE_getByType(Image).props.source).toEqual({ uri });
+  });
+
+  test.each(["unsupported://play.png", "", undefined])(
+    "does not render unsupported source %s",
+    (uri) => {
+      const { UNSAFE_queryByType } = render(<AndroidImage uri={uri} />);
+
+      expect(UNSAFE_queryByType(Image)).toBeNull();
+    }
+  );
+});

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -272,7 +272,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"
       );
@@ -281,16 +284,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 {
@@ -337,3 +339,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": "15.1.21-rc.2",
+  "version": "15.1.22-rc.0",
   "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": "15.1.21-rc.2",
-    "@applicaster/zapp-react-native-bridge": "15.1.21-rc.2",
-    "@applicaster/zapp-react-native-redux": "15.1.21-rc.2",
-    "@applicaster/zapp-react-native-utils": "15.1.21-rc.2",
+    "@applicaster/applicaster-types": "15.1.22-rc.0",
+    "@applicaster/zapp-react-native-bridge": "15.1.22-rc.0",
+    "@applicaster/zapp-react-native-redux": "15.1.22-rc.0",
+    "@applicaster/zapp-react-native-utils": "15.1.22-rc.0",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",