@applicaster/quick-brick-core 16.0.0-rc.12 → 16.0.0-rc.120

package/App/NavigationProvider/__tests__/navToolbox.test.ts

@@ -0,0 +1,227 @@
+const mockRegister = jest.fn().mockResolvedValue(undefined);
+
+// The X-Ray mock (__mocks__/@applicaster/quick-brick-xray) has no toolbox API: give it one.
+require("@applicaster/quick-brick-xray").registerReactToolbox = mockRegister;
+
+// Required after the toolbox API is in place: loading them can register the player toolbox.
+const {
+  modalStore,
+} = require("@applicaster/zapp-react-native-utils/modalState");
+
+const {
+  setXrayNavigator,
+} = require("@applicaster/zapp-react-native-utils/navigationUtils/xrayNavigator");
+
+const {
+  playerManager,
+} = require("@applicaster/zapp-react-native-utils/appUtils/playerManager");
+
+const { registerNavToolbox } = require("../navToolbox");
+
+const navigator = (overrides = {}) => {
+  const nav = {
+    getPathname: () => "/river/a/river/b",
+    getStack: () => [{ route: "/river/a" }, { route: "/river/a/river/b" }],
+    canGoBack: () => true,
+    goBack: jest.fn(),
+    goHome: jest.fn(),
+    getPlayNextOverlay: () => null,
+    getModalState: () => modalStore.getState().modalState,
+    dismissModal: jest.fn(),
+    videoModalState: { visible: false },
+    minimiseVideoModal: jest.fn(),
+    maximiseVideoModal: jest.fn(),
+    closeVideoModal: jest.fn(),
+    ...overrides,
+  };
+
+  setXrayNavigator(nav as unknown as QuickBrickAppNavigator);
+
+  return nav;
+};
+
+const videoModal = (mode: string) => ({
+  videoModalState: { visible: true, mode, item: { id: "v1", title: "V" } },
+});
+
+const call = (name: string) => {
+  // Other toolboxes (player) may register first.
+  const { tools } = mockRegister.mock.calls.find(
+    ([toolbox]) => toolbox.name === "nav"
+  )[0];
+
+  return tools.find((tool) => tool.name === name).handler({});
+};
+
+describe("navToolbox", () => {
+  beforeAll(() => registerNavToolbox());
+
+  afterEach(() => {
+    modalStore.getState().setModalState({ visible: false, screen: null });
+    jest.restoreAllMocks();
+  });
+
+  it("throws until the NavigationProvider sets the navigator", () => {
+    setXrayNavigator(undefined);
+
+    expect(() => call("stack")).toThrow("Navigation is not available yet");
+  });
+
+  it("goes back one screen", () => {
+    const nav = navigator();
+
+    expect(call("back")).toEqual({ from: "/river/a/river/b", wentBack: true });
+    expect(nav.goBack).toHaveBeenCalledWith(false);
+  });
+
+  it("does not go back from the root", () => {
+    const nav = navigator({ canGoBack: () => false });
+
+    expect(call("back")).toMatchObject({ wentBack: false });
+    expect(nav.goBack).not.toHaveBeenCalled();
+  });
+
+  it("does not pop the screen under a modal or the video modal", () => {
+    const nav = navigator(videoModal("MAXIMIZED"));
+
+    expect(call("back")).toEqual({
+      from: "video-modal/v1",
+      wentBack: false,
+      blockedBy: "video-modal",
+    });
+
+    modalStore.getState().openModal({ item: { id: "m" } });
+
+    expect(call("back")).toMatchObject({ blockedBy: "modal" });
+    expect(nav.goBack).not.toHaveBeenCalled();
+  });
+
+  it("only dismisses Play Next when it shows", () => {
+    const nav = navigator({ getPlayNextOverlay: () => ({}) });
+
+    expect(call("back")).toMatchObject({
+      wentBack: false,
+      dismissed: "playNext",
+    });
+
+    expect(nav.goBack).toHaveBeenCalledWith(false);
+  });
+
+  it("leaves a hook screen to cancel itself", () => {
+    const nav = navigator({ getPathname: () => "/river/a/hooks/login" });
+
+    expect(call("back")).toMatchObject({ wentBack: false, blockedBy: "hook" });
+    expect(nav.goBack).not.toHaveBeenCalled();
+  });
+
+  it("goes home", () => {
+    const nav = navigator();
+
+    expect(call("home")).toEqual({ from: "/river/a/river/b", wentHome: true });
+    expect(nav.goHome).toHaveBeenCalled();
+  });
+
+  it("does not go home under a modal or the video modal", () => {
+    const nav = navigator(videoModal("MAXIMIZED"));
+
+    expect(call("home")).toEqual({
+      from: "video-modal/v1",
+      wentHome: false,
+      blockedBy: "video-modal",
+    });
+
+    modalStore.getState().openModal({ item: { id: "m" } });
+
+    expect(call("home")).toMatchObject({ blockedBy: "modal" });
+    expect(nav.goHome).not.toHaveBeenCalled();
+  });
+
+  it("goes home with the mini player docked", () => {
+    const nav = navigator(videoModal("MINIMIZED"));
+
+    expect(call("home")).toMatchObject({ wentHome: true });
+    expect(nav.goHome).toHaveBeenCalled();
+  });
+
+  it("dismisses the modal store's modal, not the video modal", () => {
+    const nav = navigator(videoModal("MAXIMIZED"));
+
+    expect(() => call("dismissModal")).toThrow("No modal is open");
+
+    modalStore.getState().openModal({ item: { id: "m" } });
+
+    expect(call("dismissModal")).toBe("OK");
+    expect(nav.dismissModal).toHaveBeenCalled();
+  });
+
+  it("minimises only a maximised video modal", () => {
+    const fullscreen = navigator(videoModal("FULLSCREEN"));
+
+    expect(() => call("minimizeVideoModal")).toThrow("mode is FULLSCREEN");
+    expect(fullscreen.minimiseVideoModal).not.toHaveBeenCalled();
+
+    const maximized = navigator(videoModal("MAXIMIZED"));
+
+    call("minimizeVideoModal");
+
+    expect(maximized.minimiseVideoModal).toHaveBeenCalled();
+  });
+
+  it("enters and leaves fullscreen through the player, which also rotates the phone", () => {
+    const invoke = jest.spyOn(playerManager, "invokeHandler");
+    const playerContainer = jest.fn();
+
+    playerManager.on("toggleFullscreen", playerContainer);
+
+    navigator(videoModal("MAXIMIZED"));
+    call("fullscreenVideoModal");
+
+    expect(invoke).toHaveBeenCalledWith("toggleFullscreen", {
+      fullscreen: true,
+    });
+
+    const fullscreen = navigator(videoModal("FULLSCREEN"));
+
+    call("maximizeVideoModal");
+
+    expect(invoke).toHaveBeenCalledWith("toggleFullscreen", {
+      fullscreen: false,
+    });
+
+    expect(fullscreen.maximiseVideoModal).not.toHaveBeenCalled();
+
+    playerManager.removeHandler("toggleFullscreen", playerContainer);
+  });
+
+  it("does not claim fullscreen without a player, or from the mini player", () => {
+    navigator(videoModal("MAXIMIZED"));
+
+    expect(() => call("fullscreenVideoModal")).toThrow("shows no player");
+
+    navigator(videoModal("MINIMIZED"));
+
+    expect(() => call("fullscreenVideoModal")).toThrow("mode is MINIMIZED");
+  });
+
+  it("expands the mini player", () => {
+    const nav = navigator(videoModal("MINIMIZED"));
+
+    call("maximizeVideoModal");
+
+    expect(nav.maximiseVideoModal).toHaveBeenCalled();
+  });
+
+  it("reports the video modal", () => {
+    navigator(videoModal("MINIMIZED"));
+
+    expect(call("videoModal")).toMatchObject({
+      visible: true,
+      mode: "MINIMIZED",
+      entry: { id: "v1", title: "V" },
+    });
+
+    navigator();
+
+    expect(call("videoModal")).toMatchObject({ visible: false });
+  });
+});

package/App/NavigationProvider/__tests__/navigationProvider.test.tsx

@@ -410,6 +410,62 @@ describe("<NavigationProvider />", () => {
       });
     });
 
+    describe("when backToTop is requested from a non-home tab", () => {
+      const listenRiver = {
+        id: "LISTEN",
+        home: false,
+        navigations: [],
+        ui_components: [],
+      };
+
+      beforeEach(() => {
+        wrapper = renderContextConsumer({
+          ...store,
+          rivers: { ...rivers, LISTEN: listenRiver },
+        });
+
+        act(() => {
+          getNavigatorValues(wrapper).navigator.replace(listenRiver);
+        });
+      });
+
+      it("returns to the tab root from the second level", () => {
+        act(() => {
+          getNavigatorValues(wrapper).navigator.push(rivers.A1234);
+        });
+
+        act(() => {
+          getNavigatorValues(wrapper).navigator.goBack(false, false, true);
+        });
+
+        const { navigator, state } = getNavigatorValues(wrapper);
+
+        expect(navigator.currentRoute).toEqual("/river/LISTEN");
+        expect(navigator.activeRiver).toEqual(listenRiver);
+        expect(state.stack.mainStack).toHaveLength(1);
+      });
+
+      it("returns to the tab root from the third level", () => {
+        act(() => {
+          getNavigatorValues(wrapper).navigator.push(rivers.A1234);
+        });
+
+        act(() => {
+          getNavigatorValues(wrapper).navigator.push(rivers.C0987);
+        });
+
+        act(() => {
+          getNavigatorValues(wrapper).navigator.goBack(false, false, true);
+        });
+
+        const { navigator, state } = getNavigatorValues(wrapper);
+
+        expect(navigator.currentRoute).toEqual("/river/LISTEN");
+        expect(navigator.activeRiver).toEqual(listenRiver);
+        expect(state.stack.mainStack).toHaveLength(1);
+      });
+    });
+
     describe("when there is a previous route and there are hooks", () => {
       beforeEach(() => {
         wrapper = renderContextConsumer();

package/App/NavigationProvider/__tests__/utils.test.ts

@@ -1,4 +1,4 @@
-const { targetShouldOpenExternally } = require("../utils");
+const { targetShouldOpenExternally, stripHookPrefix } = require("../utils");
 
 const mockedOpenUrl = jest.fn();
 
@@ -116,3 +116,33 @@ describe("targetShouldOpenExternally", () => {
     });
   });
 });
+
+describe("stripHookPrefix", () => {
+  const HOOK = "203d96a9-f4af-49d1-9890-435e683b9274";
+  const MANAGE = "9f8e1e06-abd6-48b9-b73a-4caf4601f870";
+
+  it("drops the hook segment so a hook screen navigates from the root", () => {
+    expect(stripHookPrefix(`/hooks/${HOOK}`)).toBe("");
+  });
+
+  it("keeps the screens opened from a hook, without their hook prefix", () => {
+    expect(stripHookPrefix(`/hooks/${HOOK}/river/${MANAGE}`)).toBe(
+      `/river/${MANAGE}`
+    );
+  });
+
+  it("leaves a regular route untouched", () => {
+    expect(stripHookPrefix(`/river/${MANAGE}`)).toBe(`/river/${MANAGE}`);
+  });
+
+  it("only strips a hook segment at the start of the path", () => {
+    expect(stripHookPrefix(`/river/${MANAGE}/hooks/${HOOK}`)).toBe(
+      `/river/${MANAGE}/hooks/${HOOK}`
+    );
+  });
+
+  it("returns an empty prefix for an empty or missing path", () => {
+    expect(stripHookPrefix("")).toBe("");
+    expect(stripHookPrefix(undefined)).toBe("");
+  });
+});

package/App/NavigationProvider/navToolbox.ts

@@ -0,0 +1,224 @@
+import { Dimensions } from "react-native";
+import {
+  registerXrayToolbox,
+  XrayToolSpec,
+} from "@applicaster/zapp-react-native-utils/logger/xrayToolbox";
+import { getXrayNavigator } from "@applicaster/zapp-react-native-utils/navigationUtils/xrayNavigator";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
+import { getTopPathname } from "@applicaster/zapp-react-native-ui-components/Decorators/ZappPipesDataConnector/screenToolbox";
+
+/**
+ * X-Ray `nav.*` toolbox: lets an agent navigate by intent and read or drive the video modal,
+ * which is navigation state. The swipes behind some of these (minimising the player, dragging a
+ * sheet) are react-native-gesture-handler recognisers that no public API can feed touches to, so
+ * the outcome is offered instead. Pairs with `screen.current` to check where an action landed.
+ *
+ * Registered by the NavigationProvider, which keeps the navigator in a plain module variable
+ * (xrayNavigator), so updating it never renders anything.
+ */
+
+const requireNavigator = (): QuickBrickAppNavigator => {
+  const navigator = getXrayNavigator();
+
+  if (!navigator) throw new Error("Navigation is not available yet");
+
+  return navigator;
+};
+
+/** The player's own fullscreen switch: it also rotates the phone, as the fullscreen button does. */
+const toggleFullscreen = (fullscreen: boolean) => {
+  // Only a mounted PlayerContainer handles it: not while the video modal runs its hooks or casts.
+  if (!playerManager.hasHandler("toggleFullscreen")) {
+    throw new Error(
+      "The video modal shows no player (hooks running or casting)"
+    );
+  }
+
+  playerManager.invokeHandler("toggleFullscreen", { fullscreen });
+
+  return "OK: the player switches on its next tick, check with videoModal";
+};
+
+const requireVideoModal = () => {
+  const nav = requireNavigator();
+
+  if (!nav.videoModalState?.visible) {
+    throw new Error("No video modal is open");
+  }
+
+  return nav;
+};
+
+const tools: XrayToolSpec[] = [
+  {
+    name: "stack",
+    description: "Routes on the navigation stack, root first.",
+    handler: () => ({
+      routes: requireNavigator()
+        .getStack()
+        .map(({ route }) => route),
+    }),
+  },
+  {
+    name: "back",
+    description:
+      "Go back one screen, as the nav bar back button does: it pops the stack and does not run " +
+      "hardware back listeners (Android back key), so a screen plugin's own back handling is skipped. " +
+      "Not while a modal, the video modal (unless docked) or a hook screen is on top: blockedBy says " +
+      "which; close it first, or cancel a hook with the device back key. With Play Next showing it " +
+      "only dismisses that. Check with screen.current.",
+    handler: () => {
+      const nav = requireNavigator();
+      const from = getTopPathname() ?? nav.getPathname();
+
+      // A presented layer (hooks-modal/, modal/, video-modal/) is on top: popping the stack would
+      // change the screen underneath it, which the user's back never does.
+      if (!from.startsWith("/")) {
+        return { from, wentBack: false, blockedBy: from.split("/")[0] };
+      }
+
+      if (nav.getPlayNextOverlay()) {
+        nav.goBack(false);
+
+        return { from, wentBack: false, dismissed: "playNext" };
+      }
+
+      // The hook screen answers the user's back itself (cancels its flow); a pop would skip that.
+      if (from.split("/").slice(-2)[0] === "hooks") {
+        return { from, wentBack: false, blockedBy: "hook" };
+      }
+
+      if (!nav.canGoBack()) return { from, wentBack: false };
+
+      nav.goBack(false);
+
+      return { from, wentBack: true };
+    },
+  },
+  {
+    name: "home",
+    description:
+      "Go to the home screen. Not while a modal, the video modal (unless docked) or the hooks modal is " +
+      "on top: blockedBy says which; close it first. On TV it does not move focus to the top menu as " +
+      "the remote's home does.",
+    handler: () => {
+      const nav = requireNavigator();
+      const from = getTopPathname() ?? nav.getPathname();
+
+      // goHome only replaces the stack: a presented layer would stay on top of the home screen,
+      // and it covers the menu the user would press home in.
+      if (!from.startsWith("/")) {
+        return { from, wentHome: false, blockedBy: from.split("/")[0] };
+      }
+
+      nav.goHome();
+
+      return { from, wentHome: true };
+    },
+  },
+  {
+    name: "dismissModal",
+    description:
+      "Close the open modal screen or bottom sheet, as dragging it down does. Not the video modal: use closeVideoModal.",
+    handler: () => {
+      const nav = requireNavigator();
+
+      if (!nav.getModalState()?.visible) throw new Error("No modal is open");
+
+      nav.dismissModal();
+
+      return "OK";
+    },
+  },
+  {
+    name: "videoModal",
+    description:
+      "The video modal: visible, mode (MAXIMIZED, MINIMIZED = mini player, FULLSCREEN, PIP), its entry, " +
+      "and the screen orientation.",
+    handler: () => {
+      const videoModal = requireNavigator().videoModalState;
+      const { width, height } = Dimensions.get("window");
+      const orientation = width > height ? "landscape" : "portrait";
+
+      if (!videoModal?.visible) return { visible: false, orientation };
+
+      return {
+        visible: true,
+        mode: videoModal.mode,
+        entry: videoModal.item
+          ? { id: videoModal.item.id, title: videoModal.item.title }
+          : null,
+        orientation,
+      };
+    },
+  },
+  {
+    name: "minimizeVideoModal",
+    description:
+      "Minimise the maximised video modal to the mini player, as swiping it down does.",
+    handler: () => {
+      const nav = requireVideoModal();
+      const { mode } = nav.videoModalState;
+
+      // The swipe exists only on the maximised modal; other modes have no way to the mini player.
+      if (mode !== "MAXIMIZED") {
+        throw new Error(
+          `Only a maximised video modal minimises (mode is ${mode})`
+        );
+      }
+
+      nav.minimiseVideoModal();
+
+      return "OK";
+    },
+  },
+  {
+    name: "maximizeVideoModal",
+    description: "Expand the mini player or leave fullscreen.",
+    handler: () => {
+      const nav = requireVideoModal();
+
+      if (nav.videoModalState.mode === "FULLSCREEN") {
+        return toggleFullscreen(false);
+      }
+
+      nav.maximiseVideoModal();
+
+      return "OK";
+    },
+  },
+  {
+    name: "fullscreenVideoModal",
+    description:
+      "Put the video modal in fullscreen, as the player's fullscreen button does.",
+    handler: () => {
+      const { mode } = requireVideoModal().videoModalState;
+
+      // The fullscreen button is on the maximised player, not on the mini player.
+      if (mode !== "MAXIMIZED") {
+        throw new Error(
+          `Only a maximised video modal goes fullscreen (mode is ${mode})`
+        );
+      }
+
+      return toggleFullscreen(true);
+    },
+  },
+  {
+    name: "closeVideoModal",
+    description: "Close the video modal and its player.",
+    handler: () => {
+      requireVideoModal().closeVideoModal();
+
+      return "OK";
+    },
+  },
+];
+
+export const registerNavToolbox = () =>
+  registerXrayToolbox({
+    name: "nav",
+    description:
+      "Navigate the app (stack, back, home, modals) and drive the video modal.",
+    tools,
+  });

package/App/NavigationProvider/utils.ts

@@ -18,6 +18,20 @@ const WEBVIEW_SCREEN_IDENTIFIER = "webview_screen_qb";
 
 const logger = coreAppLogger.addSubsystem("Navigator");
 
+/**
+ * Drops a leading `/hooks/<screen_id>` segment from a path.
+ *
+ * Routes are built by appending to the current path, and a hook screen is
+ * presented at an absolute `/hooks/<screen_id>`. Without this, every screen
+ * opened from a hook would inherit that prefix for good: the hook's stack entry
+ * would stay buried under its descendants, and `canGoBack` — which treats any
+ * route containing `/hooks` as a hook — would count the whole branch as one
+ * entry and send Back home instead of popping.
+ */
+export function stripHookPrefix(pathname?: string): string {
+  return pathname?.replace(/^\/hooks\/[^/]+/, "") ?? "";
+}
+
 export function targetShouldOpenExternally(
   target: ZappEntry,
   targetScreen: ZappRiver | null,
@@ -169,6 +183,27 @@ export function getNavigationTarget(
     data.entry = targetEntry;
   }
 
+  if (data.entry && !data.screen) {
+    const entryType = (data.entry.type as ZappEntryType)?.value;
+    const mappedScreenId = contentTypes?.[entryType]?.screen_id;
+
+    const mappedRiver = mappedScreenId ? rivers?.[mappedScreenId] : undefined;
+
+    if (!mappedScreenId) {
+      logger.error({
+        message: `getNavigationTarget: mapped screen ID missing for content type "${entryType}". Check your types mapping or screen configuration.`,
+        data: { entry: data.entry },
+      });
+    } else if (!mappedRiver) {
+      logger.error({
+        message: `getNavigationTarget: cannot map screen ID "${mappedScreenId}" to a river. Check your types mapping or screen configuration.`,
+        data: { entry: data.entry, mappedScreenId },
+      });
+    }
+
+    data.screen = mappedRiver;
+  }
+
   return data;
 }
 

package/App/NetworkStatusProvider/NetworkStatusProvider.tsx

@@ -12,6 +12,11 @@ import {
   unsubscribeToDeviceNetworkChanges,
 } from "./utils";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
+import { coreAppLogger } from "../logger";
+import { useResumeVerifiedNetInfo } from "./useResumeVerifiedNetInfo";
+import { describeNetInfo } from "./resumeVerification";
+
+const logger = coreAppLogger.addSubsystem("NetworkStatusProvider");
 
 // Use default netInfo config for all platforms (important for web platform which otherwise
 // will use backend root which is not responding for HEAD request)
@@ -36,10 +41,23 @@ export const NetworkStatusProvider = ({
   // NetInfo library does not have accurate information for Tizen SmartTVs, and possibly WebOS
   // This combined info helps us gather data from the native connection status APIs
   // and includes it in our definition of... online.
-  const combinedNetInfo: NetInfoState & { deviceStatus?: NetStatus } = {
-    ...currentNetInfo,
-    deviceStatus,
-  };
+  // stable reference between real changes: every new reference is a network update
+  const liveNetInfo = React.useMemo<
+    NetInfoState & { deviceStatus?: NetStatus }
+  >(
+    () => ({ ...currentNetInfo, deviceStatus }),
+    [currentNetInfo, deviceStatus]
+  );
+
+  // NetInfo reports stale offline status right after resume/unlock (iOS),
+  // publish the network status verified after the app returns to foreground
+  const { netInfo: verifiedNetInfo, stillOfflineAfterResumeCount } =
+    useResumeVerifiedNetInfo(liveNetInfo);
+
+  const combinedNetInfo: NetInfoState & {
+    deviceStatus?: NetStatus;
+    stillOfflineAfterResumeCount: number;
+  } = { ...verifiedNetInfo, stillOfflineAfterResumeCount };
 
   const { onConnectionTypeChanged, onConnectionLost, onConnectionRestored } =
     React.useMemo<NetworkHooks>(() => getNetworkHooks(plugins), []);
@@ -57,6 +75,16 @@ export const NetworkStatusProvider = ({
     if (!combinedNetInfo.details) return;
 
     if (previousOnline !== undefined && previousOnline !== online) {
+      logger.info({
+        message: "NetworkStatus: online status changed",
+        data: {
+          online,
+          previousOnline,
+          published: describeNetInfo(combinedNetInfo),
+          live: describeNetInfo(liveNetInfo),
+        },
+      });
+
       online
         ? onConnectionRestored &&
           callAllWith(onConnectionRestored, combinedNetInfo)