@applicaster/quick-brick-core 16.0.0-alpha.1263110541 → 16.0.0-alpha.1314750780

package/App/ActionsProvider/LegacyActionsRegistryAdapter.tsx

@@ -66,6 +66,22 @@ function LegacyActionBridge({ plugin }: { plugin: LegacyActionPlugin }) {
     };
   }, [plugin.identifier]);
 
+  // Consumers resolve a snapshot of `value`; when the plugin publishes a new
+  // one (e.g. cast devices found), make them re-resolve so availability
+  // predicates are not read from a stale value. Registration already
+  // notifies, so the first render is skipped.
+  const isFirstValueRef = React.useRef(true);
+
+  React.useEffect(() => {
+    if (isFirstValueRef.current) {
+      isFirstValueRef.current = false;
+
+      return;
+    }
+
+    uiActionsRegistry.notifyProviderChanged(plugin.identifier);
+  }, [value, plugin.identifier]);
+
   return null;
 }
 

package/App/ActionsProvider/__tests__/LegacyActionsRegistryAdapter.test.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { uiActionsRegistry } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+import { LegacyActionsRegistryAdapter } from "../LegacyActionsRegistryAdapter";
+
+const CastContext = React.createContext<any>(null);
+
+const plugin = {
+  identifier: "cast-action-test",
+  module: { context: CastContext },
+};
+
+const renderWithValue = (value) => (
+  <CastContext.Provider value={value}>
+    <LegacyActionsRegistryAdapter actionPlugins={{ cast: plugin } as any} />
+  </CastContext.Provider>
+);
+
+describe("LegacyActionsRegistryAdapter", () => {
+  it("makes consumers re-resolve when the plugin publishes a new value", () => {
+    const noDevices = { isActionAvailable: () => false };
+    const devicesFound = { isActionAvailable: () => true };
+
+    const { rerender, unmount } = render(renderWithValue(noDevices));
+
+    // what a consumer resolved at first paint
+    expect(
+      uiActionsRegistry
+        .getAction("cast-action-test")
+        ?.isActionAvailable?.({} as any)
+    ).toBe(false);
+
+    const listener = jest.fn();
+    const unsubscribe = uiActionsRegistry.subscribe(listener);
+
+    rerender(renderWithValue(devicesFound));
+
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    expect(
+      uiActionsRegistry
+        .getAction("cast-action-test")
+        ?.isActionAvailable?.({} as any)
+    ).toBe(true);
+
+    unsubscribe();
+    unmount();
+  });
+
+  it("does not notify again when the value is unchanged", () => {
+    const stable = { isActionAvailable: () => true };
+    const { rerender, unmount } = render(renderWithValue(stable));
+
+    const listener = jest.fn();
+    const unsubscribe = uiActionsRegistry.subscribe(listener);
+
+    rerender(renderWithValue(stable));
+
+    expect(listener).not.toHaveBeenCalled();
+
+    unsubscribe();
+    unmount();
+  });
+});

package/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/usePresentSchemeHandler.ts

@@ -28,6 +28,7 @@ import {
 
 import { log_error, log_info } from "../../logger";
 import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";
+import { rememberLayoutPreview } from "../../../layoutPreview/persistence";
 
 const getFeed = (query) => ({
   content: { src: query.data_source },
@@ -155,6 +156,8 @@ export function usePresentSchemeHandler({
           rivers_configuration_id
         );
 
+        await rememberLayoutPreview(rivers_configuration_id);
+
         onFinish((done) => {
           actions?.setAppReady();
           navigator.replace(homeRiver);

package/App/ModalProvider/ModalContent.tsx

@@ -30,6 +30,9 @@ export function ModalContent(props: Props) {
   }
 
   return (
+    // A presented screen fills the window, including the status bar and home
+    // indicator. The modal wraps it in its own SafeAreaProvider, so the screen
+    // reads the real insets itself and places its own chrome inside them.
     <View style={styles.container}>
       <ScreenResolver {...modalScreenProps} />
     </View>

package/App/ModalProvider/__tests__/ModalContent.test.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import { render } from "@testing-library/react-native";
+
+import { ModalContent } from "../ModalContent";
+
+jest.mock("../ModalBottomSheet", () => ({ ModalBottomSheet: () => null }));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver",
+  () => ({ ScreenResolver: () => null })
+);
+
+const flatStyle = (tree: any) => StyleSheet.flatten(tree.props.style);
+
+describe("ModalContent", () => {
+  it("lets a presented screen fill the modal, leaving the safe area to the screen", () => {
+    const tree = render(
+      <ModalContent modalScreenProps={{ screenId: "river-1" }} />
+    ).toJSON();
+
+    // The modal provides a SafeAreaProvider instead, so the presented screen
+    // reads the real insets itself rather than being padded from the outside.
+    expect(flatStyle(tree)).toEqual({ flex: 1 });
+  });
+
+  it("leaves a bottom sheet full-bleed", () => {
+    const tree = render(
+      <ModalContent
+        modalScreenProps={{
+          screenData: { modalBottomSheetContentProps: { items: [] } },
+        }}
+      />
+    ).toJSON();
+
+    // Bottom sheets anchor to the screen edge and manage their own insets.
+    expect(tree).toBeNull();
+  });
+});

package/App/ModalProvider/__tests__/index.test.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { modalStore } from "@applicaster/zapp-react-native-utils/modalState";
+
+import { ModalProvider } from "../";
+
+/**
+ * Records the ScreenDataContext value seen by the presented screen — the
+ * context useScreenContext()/useCurrentScreenData() read from.
+ */
+const mockSeenScreenData: any[] = [];
+
+/** Records the `initialMetrics` each SafeAreaProvider the modal renders got. */
+const mockSafeAreaProviderMetrics: any[] = [];
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver",
+  () => {
+    const ReactLocal = require("react");
+
+    const {
+      ScreenDataContext,
+    } = require("@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext");
+
+    return {
+      ScreenResolver: () => {
+        mockSeenScreenData.push(ReactLocal.useContext(ScreenDataContext));
+
+        return null;
+      },
+    };
+  }
+);
+
+// Needs the navigator + redux to build navbar state; irrelevant to this test.
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext",
+  () => ({
+    ScreenContextProvider: ({ children }: any) => children,
+  })
+);
+
+// Pulls in the whole Components barrel; only the ScreenResolver branch matters here.
+jest.mock("../ModalBottomSheet", () => ({ ModalBottomSheet: () => null }));
+
+jest.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  // A modal renders in its own native window, so it needs its own provider
+  // seeded with the window metrics; without them insets read as zero inside.
+  initialWindowMetrics: { insets: { top: 59, bottom: 34, left: 0, right: 0 } },
+  SafeAreaProvider: ({ children, initialMetrics }: any) => {
+    mockSafeAreaProviderMetrics.push(initialMetrics);
+
+    return children;
+  },
+}));
+
+const river = { id: "river-parent-lock", type: "parent_lock" } as any;
+
+const entry = { id: "entry-1", type: { value: "video" } } as any;
+
+const seen = () => mockSeenScreenData[mockSeenScreenData.length - 1];
+
+describe("ModalProvider", () => {
+  beforeEach(() => {
+    mockSeenScreenData.length = 0;
+    mockSafeAreaProviderMetrics.length = 0;
+    modalStore.getState().dismissModal();
+  });
+
+  it("gives the presented screen its screen and entry through ScreenDataContext", () => {
+    modalStore.getState().openModal({ item: river, props: { entry } });
+
+    render(<ModalProvider />);
+
+    expect(seen()).toEqual({ screen: river, entry });
+  });
+
+  it("gives the presented screen its screen when presented without an entry", () => {
+    modalStore.getState().openModal({ item: river });
+
+    render(<ModalProvider />);
+
+    expect(seen()).toMatchObject({ screen: river });
+  });
+
+  it("seeds the presented screen's safe area with the window metrics", () => {
+    const { initialWindowMetrics } = require("react-native-safe-area-context");
+
+    modalStore.getState().openModal({ item: river });
+
+    render(<ModalProvider />);
+
+    expect(mockSafeAreaProviderMetrics).toEqual(
+      expect.arrayContaining([initialWindowMetrics])
+    );
+  });
+});

package/App/ModalProvider/index.tsx

@@ -1,9 +1,15 @@
 import * as React from "react";
 
+import {
+  initialWindowMetrics,
+  SafeAreaProvider,
+} from "react-native-safe-area-context";
+
 import { ModalPresenter } from "./ModalPresenter";
 import { ModalContent } from "./ModalContent";
 import { ModalChildrenWrapper } from "./ModalChildrenWrapper";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 import { ScreenContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 import { useModalStoreState } from "@applicaster/zapp-react-native-utils/modalState";
@@ -14,6 +20,9 @@ export function ModalProvider() {
   const [modalVisible, setModalVisible] = React.useState(false);
   const [modalShown, setModalShown] = React.useState(false);
 
+  const screen = modalState?.screen;
+  const entry = modalState?.props?.entry as ZappEntry | undefined;
+
   React.useEffect(() => {
     setModalVisible(!!modalState);
 
@@ -22,13 +31,25 @@ export function ModalProvider() {
     }
   }, [modalState]);
 
-  if (!modalState?.screen) {
+  /**
+   * The modal renders as a sibling of the stack navigator, so nothing upstream
+   * provides ScreenDataContext and the presented screen would otherwise see
+   * `null` from useScreenContext()/useCurrentScreenData(). Provide it here so a
+   * presented screen resolves its own screen and entry, the same way a pushed
+   * screen does through the navigator's scene.
+   */
+  const screenDataContextValue = React.useMemo(
+    () => ({ screen, entry }),
+    [screen, entry]
+  );
+
+  if (!screen) {
     return null;
   }
 
   const modalScreenProps = {
-    screenData: modalState?.screen,
-    screenId: modalState?.screen?.id,
+    screenData: entry ? { ...entry, targetScreen: screen } : screen,
+    screenId: screen?.id,
     screenType: "river",
     ...modalState.props,
   };
@@ -39,17 +60,21 @@ export function ModalProvider() {
 
   return (
     <PathnameContext.Provider value={pathname}>
-      <ScreenContextProvider pathname={pathname}>
-        <ModalPresenter
-          visible={shouldShowModal}
-          {...modalState?.options}
-          statusBarTranslucent
-        >
-          <ModalChildrenWrapper>
-            <ModalContent modalScreenProps={modalScreenProps} />
-          </ModalChildrenWrapper>
-        </ModalPresenter>
-      </ScreenContextProvider>
+      <ScreenDataContext.Provider value={screenDataContextValue}>
+        <ScreenContextProvider pathname={pathname}>
+          <ModalPresenter
+            visible={shouldShowModal}
+            {...modalState?.options}
+            statusBarTranslucent
+          >
+            <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+              <ModalChildrenWrapper>
+                <ModalContent modalScreenProps={modalScreenProps} />
+              </ModalChildrenWrapper>
+            </SafeAreaProvider>
+          </ModalPresenter>
+        </ScreenContextProvider>
+      </ScreenDataContext.Provider>
     </PathnameContext.Provider>
   );
 }

package/App/NavigationProvider/NavigationProvider.tsx

@@ -13,6 +13,8 @@ import {
   useGetScreenOrientation,
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 import { focusManager } from "@applicaster/zapp-react-native-utils/focusManager/FocusManager";
+import { setXrayNavigator } from "@applicaster/zapp-react-native-utils/navigationUtils/xrayNavigator";
+import { registerNavToolbox } from "./navToolbox";
 
 import reducer, {
   ACTIONS,
@@ -243,6 +245,10 @@ export function NavigationProvider({ children }: Props) {
     playNextOverlayState.current = state;
   };
 
+  // The play-next overlay owns remote focus while it is visible, so key
+  // handling (InteractionManager) needs to be able to ask for it.
+  const getPlayNextOverlay = () => playNextOverlayState.current ?? null;
+
   const setNestedScreenContent = (entry: ZappEntry, screenId: string) => {
     const screen = rivers[screenId];
     const parent = findParent(context, navigator.currentRoute);
@@ -349,10 +355,7 @@ export function NavigationProvider({ children }: Props) {
           state: firstRoute.state,
         };
 
-        if (
-          stateForBack?.state?.entry &&
-          "home" in stateForBack?.state?.entry
-        ) {
+        if (stateForBack?.state?.entry?.home) {
           goHome();
         } else {
           dispatch(back(stateForBack));
@@ -759,11 +762,11 @@ export function NavigationProvider({ children }: Props) {
   const getStackForPathname = (
     pathname: string
   ): NavigationScreenState | undefined => {
-    const stack = [...state?.stack?.mainStack];
-
-    const currentStack = stack.find(({ route }) => route === pathname);
-
-    return currentStack;
+    // Topmost match: the active screen if a route is on the stack twice.
+    return R.findLast(
+      ({ route }) => route === pathname,
+      state?.stack?.mainStack ?? []
+    );
   };
 
   const navigator: QuickBrickAppNavigator = React.useMemo(
@@ -777,6 +780,7 @@ export function NavigationProvider({ children }: Props) {
       replace: replaceItem,
       setNestedScreenContent,
       setPlayNextOverlay,
+      getPlayNextOverlay,
       goHome,
       canGoBack,
       goBack,
@@ -827,6 +831,13 @@ export function NavigationProvider({ children }: Props) {
     navigator.state = state;
   }
 
+  React.useLayoutEffect(() => {
+    setXrayNavigator(navigator);
+    registerNavToolbox();
+
+    return () => setXrayNavigator(undefined);
+  }, [navigator]);
+
   React.useLayoutEffect(() => {
     if (pathname === "/" && appLaunched) {
       goHome(true);

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 });
+  });
+});