@applicaster/quick-brick-core 16.0.0-alpha.4065452341 → 16.0.0-alpha.4155601029

package/App/ActionSetters/index.ts

@@ -4,8 +4,8 @@ import { allSettled } from "promise";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
 import * as React from "react";
-import { coreAppLogger } from "../logger";
-const logger = coreAppLogger.addSubsystem("AppLifeCycleManager");
+import { subsystemLogger } from "@applicaster/zapp-react-native-utils/logger";
+const logger = subsystemLogger("app/lifecycle", "AppLifeCycleManager");
 
 const debugActions = (actions) =>
   logger.debug({

package/App/ActionsProvider/ActionsProvider.tsx

@@ -8,7 +8,7 @@ import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { LegacyActionsRegistryAdapter } from "./LegacyActionsRegistryAdapter";
 
 const { log_debug } = createLogger({
-  subsystem: "ActionsProvider",
+  subsystem: "core/actions",
   category: "ActionRegistration",
 });
 

package/App/ActionsProvider/LegacyActionsRegistryAdapter.tsx

@@ -5,7 +5,7 @@ import { uiActionsRegistry } from "@applicaster/zapp-react-native-utils/uiAction
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 
 const { log_debug, log_warning } = createLogger({
-  subsystem: "LegacyActionsRegistryAdapter",
+  subsystem: "core/actions/legacy_registry",
   category: "ActionRegistration",
 });
 
@@ -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/AssetCache/logger.ts

@@ -5,6 +5,6 @@ import { coreAppLogger } from "../logger";
 export const { log_verbose, log_debug, log_warning, log_info, log_error } =
   createLogger({
     category: "AssetCache",
-    subsystem: "quick-brick-core",
+    subsystem: "storage/asset_cache",
     parent: coreAppLogger,
   });

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/DeepLinking/URLSchemeListener/URLSchemeContextProvider.tsx

@@ -3,6 +3,7 @@ import React, {
   createContext,
   useEffect,
   useCallback,
+  useMemo,
   ComponentType,
   ReactChild,
 } from "react";
@@ -196,9 +197,11 @@ function URLSchemeContextProvider(props: Props) {
     };
   }, []);
 
+  const contextValue = useMemo(() => ({ url: state, done }), [state, done]);
+
   return (
     <View style={fillStyles.container}>
-      <URLSchemeContext.Provider value={{ url: state, done }}>
+      <URLSchemeContext.Provider value={contextValue}>
         {props.children}
       </URLSchemeContext.Provider>
     </View>

package/App/DeepLinking/logger.ts

@@ -5,6 +5,6 @@ import { coreAppLogger } from "../logger";
 export const { log_verbose, log_debug, log_warning, log_info, log_error } =
   createLogger({
     category: "DeepLinking",
-    subsystem: "General",
+    subsystem: "app/deep_linking",
     parent: coreAppLogger,
   });

package/App/ErrorBoundary/index.tsx

@@ -1,13 +1,16 @@
 import * as React from "react";
 import pick from "lodash/pick";
 
-import { coreLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { subsystemLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { ErrorScreen } from "@applicaster/zapp-react-native-ui-components/Components/ErrorScreen";
 
 import { useErrorStore } from "./store";
 import * as QuickBrickManager from "@applicaster/zapp-react-native-bridge/QuickBrick";
 
-const errorBoundaryLogger = coreLogger.addSubsystem("react_error-boundary");
+const errorBoundaryLogger = subsystemLogger(
+  "crash/error_boundary",
+  "ErrorBoundary"
+);
 
 type Props = {
   children: React.ReactNode;

package/App/ModalProvider/ModalContent.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import { View, StyleSheet } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
 
@@ -18,8 +17,6 @@ const styles = StyleSheet.create({
 export function ModalContent(props: Props) {
   const { modalScreenProps } = props;
 
-  const insets = useSafeAreaInsets();
-
   if (modalScreenProps?.screenData?.modalBottomSheetContentProps) {
     const { ModalBottomSheetContent, modalBottomSheetContentProps } =
       modalScreenProps?.screenData || {};
@@ -34,19 +31,9 @@ export function ModalContent(props: Props) {
 
   return (
     // A presented screen fills the window, including the status bar and home
-    // indicator. Inset it so chrome it draws at its own edges — a close button,
-    // for example — stays inside the tappable area.
-    <View
-      style={[
-        styles.container,
-        {
-          paddingTop: insets.top,
-          paddingBottom: insets.bottom,
-          paddingLeft: insets.left,
-          paddingRight: insets.right,
-        },
-      ]}
-    >
+    // 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/ModalPresenter.tsx

@@ -8,12 +8,27 @@ type Props = ModalProps & {
   visible: boolean;
 };
 
+// RN's iPhone default is portrait only. The player locks the window to
+// landscape before this modal is presented, and UIKit aborts the process
+// when the two masks do not overlap. No JS error is logged.
+const SUPPORTED_ORIENTATIONS: ModalProps["supportedOrientations"] = [
+  "portrait",
+  "portrait-upside-down",
+  "landscape",
+  "landscape-left",
+  "landscape-right",
+];
+
 export function ModalPresenter(props: Props) {
   const { children, ModalContainer, visible, ...presenterOptions } = props;
   const Presenter = React.useMemo(() => ModalContainer || Modal, []);
 
   return (
-    <Presenter visible={visible} {...presenterOptions}>
+    <Presenter
+      visible={visible}
+      {...presenterOptions}
+      supportedOrientations={SUPPORTED_ORIENTATIONS}
+    >
       <GestureHandlerRootView>{children}</GestureHandlerRootView>
     </Presenter>
   );

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

@@ -6,10 +6,6 @@ import { ModalContent } from "../ModalContent";
 
 jest.mock("../ModalBottomSheet", () => ({ ModalBottomSheet: () => null }));
 
-jest.mock("react-native-safe-area-context", () => ({
-  useSafeAreaInsets: () => ({ top: 59, bottom: 34, left: 0, right: 0 }),
-}));
-
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver",
   () => ({ ScreenResolver: () => null })
@@ -18,15 +14,14 @@ jest.mock(
 const flatStyle = (tree: any) => StyleSheet.flatten(tree.props.style);
 
 describe("ModalContent", () => {
-  it("insets a presented screen by the safe area so its chrome stays tappable", () => {
+  it("lets a presented screen fill the modal, leaving the safe area to the screen", () => {
     const tree = render(
       <ModalContent modalScreenProps={{ screenId: "river-1" }} />
     ).toJSON();
 
-    expect(flatStyle(tree)).toMatchObject({
-      paddingTop: 59,
-      paddingBottom: 34,
-    });
+    // 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", () => {

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { Modal } from "react-native";
+import { render } from "@testing-library/react-native";
+
+import { ModalPresenter } from "../ModalPresenter";
+
+describe("ModalPresenter", () => {
+  it("supports landscape so a player rotation does not abort presentation", () => {
+    const { UNSAFE_getByType } = render(
+      <ModalPresenter visible>{null}</ModalPresenter>
+    );
+
+    expect(UNSAFE_getByType(Modal).props.supportedOrientations).toEqual(
+      expect.arrayContaining(["portrait", "landscape"])
+    );
+  });
+});

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

@@ -11,6 +11,9 @@ import { ModalProvider } 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",
   () => {
@@ -43,6 +46,14 @@ 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;
@@ -54,6 +65,7 @@ const seen = () => mockSeenScreenData[mockSeenScreenData.length - 1];
 describe("ModalProvider", () => {
   beforeEach(() => {
     mockSeenScreenData.length = 0;
+    mockSafeAreaProviderMetrics.length = 0;
     modalStore.getState().dismissModal();
   });
 
@@ -72,4 +84,16 @@ describe("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,5 +1,10 @@
 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";
@@ -62,9 +67,11 @@ export function ModalProvider() {
             {...modalState?.options}
             statusBarTranslucent
           >
-            <ModalChildrenWrapper>
-              <ModalContent modalScreenProps={modalScreenProps} />
-            </ModalChildrenWrapper>
+            <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+              <ModalChildrenWrapper>
+                <ModalContent modalScreenProps={modalScreenProps} />
+              </ModalChildrenWrapper>
+            </SafeAreaProvider>
           </ModalPresenter>
         </ScreenContextProvider>
       </ScreenDataContext.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,
@@ -43,7 +45,6 @@ import {
   startUpHookPluginIdentifiersSelector,
 } from "./navigator/selectors";
 
-import { coreAppLogger } from "../logger";
 import {
   getPlatform,
   isTV,
@@ -87,8 +88,9 @@ import {
   useLayoutVersion,
   useRivers,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { subsystemLogger } from "@applicaster/zapp-react-native-utils/logger";
 
-const logger = coreAppLogger.addSubsystem("Navigator");
+const logger = subsystemLogger("ui/navigation", "Navigator");
 
 type Props = {
   children?: React.ReactChild;
@@ -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);