@applicaster/quick-brick-core 16.0.0-alpha.1334507601 → 16.0.0-alpha.1444784746

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/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/__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__/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

@@ -243,6 +243,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 +353,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));
@@ -777,6 +778,7 @@ export function NavigationProvider({ children }: Props) {
       replace: replaceItem,
       setNestedScreenContent,
       setPlayNextOverlay,
+      getPlayNextOverlay,
       goHome,
       canGoBack,
       goBack,

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/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)

package/App/NetworkStatusProvider/ResumeVerificationController.ts

@@ -0,0 +1,282 @@
+import { AppState, AppStateStatus } from "react-native";
+import { NetInfoState } from "@react-native-community/netinfo";
+
+import { coreAppLogger } from "../logger";
+import { isOnline } from "./utils";
+import {
+  RESUME_VERIFICATION_DELAY_MS,
+  describeNetInfo,
+  getResumeDecision,
+  isBackgroundAppState,
+  isResumeVerificationEnabled,
+} from "./resumeVerification";
+
+const logger = coreAppLogger.addSubsystem("NetworkStatusProvider");
+
+export type ConnectionInfo = NetInfoState & { deviceStatus?: NetStatus };
+
+export type ResumeVerifiedState<T extends ConnectionInfo> = {
+  netInfo: T;
+  stillOfflineAfterResumeCount: number;
+};
+
+type Phase = "live" | "frozen" | "verifying";
+
+/**
+ * Holds the published network status while the app is in background and for
+ * RESUME_VERIFICATION_DELAY_MS after it becomes active again, then publishes the
+ * current state. Works around stale iOS NetInfo reachability failures on resume/unlock.
+ *
+ * start()/stop() manage the AppState subscription and timer (useLayoutEffect),
+ * setNetInfo() feeds live NetInfo, subscribe()/getState() back useSyncExternalStore.
+ */
+export class ResumeVerificationController<T extends ConnectionInfo> {
+  private phase: Phase = "live";
+  private appState: AppStateStatus;
+  private live: T;
+  private state: ResumeVerifiedState<T>;
+  private listeners = new Set<() => void>();
+  private subscription: { remove: () => void } | null = null;
+  private timer: ReturnType<typeof setTimeout> | null = null;
+
+  /**
+   * @param initialNetInfo - live NetInfo at mount, published as the initial state.
+   * Starts "frozen" when the app is created in background (e.g. iOS background launch).
+   */
+  constructor(initialNetInfo: T) {
+    this.appState = AppState.currentState;
+    this.live = initialNetInfo;
+    this.state = { netInfo: initialNetInfo, stillOfflineAfterResumeCount: 0 };
+
+    if (isResumeVerificationEnabled() && isBackgroundAppState(this.appState)) {
+      this.phase = "frozen";
+    }
+
+    this.subscribe = this.subscribe.bind(this);
+    this.getState = this.getState.bind(this);
+    this.applyAppState = this.applyAppState.bind(this);
+  }
+
+  /**
+   * useSyncExternalStore subscribe: listener is called whenever getState() changes.
+   * @param listener - called with no arguments after each publish
+   * @returns unsubscribe function
+   */
+  subscribe(listener: () => void): () => void {
+    this.listeners.add(listener);
+
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  /**
+   * useSyncExternalStore snapshot: same reference until a new state is published.
+   * @returns the verified network status and the still-offline-after-resume counter
+   */
+  getState(): ResumeVerifiedState<T> {
+    return this.state;
+  }
+
+  /**
+   * Subscribes to AppState changes and catches up with the current app state.
+   * Idempotent; no-op on platforms without resume verification (web, TV).
+   * Call from useLayoutEffect, paired with stop().
+   */
+  start(): void {
+    if (!isResumeVerificationEnabled() || this.subscription) return;
+
+    this.subscription = AppState.addEventListener("change", this.applyAppState);
+
+    // AppState may have changed since construction (e.g. initial "background"
+    // corrected to "active"), or stop() interrupted a window: catch up
+    this.applyAppState(AppState.currentState);
+  }
+
+  /**
+   * Removes the AppState subscription and cancels a pending verification.
+   * An interrupted window falls back to "frozen" and restarts on the next start() while active.
+   */
+  stop(): void {
+    this.subscription?.remove();
+    this.subscription = null;
+    this.clearTimer();
+
+    // an interrupted window is restarted by the next start() while active
+    if (this.phase === "verifying") {
+      this.phase = "frozen";
+    }
+  }
+
+  /**
+   * Feeds the latest live NetInfo. Published immediately while "live",
+   * held (and logged as ignored) while "frozen" or "verifying".
+   * @param netInfo - live NetInfo; the same reference is a no-op
+   */
+  setNetInfo(netInfo: T): void {
+    if (netInfo === this.live) return;
+
+    this.live = netInfo;
+
+    if (this.phase === "live") {
+      this.publish(netInfo);
+
+      return;
+    }
+
+    logger.info({
+      message: "NetworkStatus: network change ignored until verified",
+      data: {
+        appState: this.appState,
+        phase: this.phase,
+        published: describeNetInfo(this.state.netInfo),
+        live: describeNetInfo(netInfo),
+      },
+    });
+  }
+
+  /**
+   * AppState change handler: "background" freezes, "active" after a freeze starts verification,
+   * anything else ("inactive", "unknown") keeps the current phase.
+   * @param nextAppState - new AppState value
+   */
+  private applyAppState(nextAppState: AppStateStatus): void {
+    const previousAppState = this.appState;
+    const nextPhase = this.getNextPhase(nextAppState);
+    this.appState = nextAppState;
+
+    if (previousAppState === nextAppState && nextPhase === this.phase) return;
+
+    logger.info({
+      message: "NetworkStatus: app state changed",
+      data: {
+        appState: nextAppState,
+        previousAppState,
+        phase: this.phase,
+        nextPhase,
+        published: describeNetInfo(this.state.netInfo),
+        live: describeNetInfo(this.live),
+      },
+    });
+
+    if (nextPhase === "frozen" && this.phase !== "frozen") {
+      this.freeze();
+    } else if (nextPhase === "verifying" && this.phase === "frozen") {
+      this.startVerification();
+    }
+  }
+
+  /**
+   * @param appState - new AppState value
+   * @returns the phase the controller moves to for this app state
+   */
+  private getNextPhase(appState: AppStateStatus): Phase {
+    if (isBackgroundAppState(appState)) return "frozen";
+
+    if (appState === "active" && this.phase === "frozen") return "verifying";
+
+    return this.phase;
+  }
+
+  /**
+   * Stops publishing live changes; cancels a running verification window.
+   */
+  private freeze(): void {
+    if (this.phase === "verifying") {
+      this.clearTimer();
+
+      logger.info({
+        message: "NetworkStatus: resume verification cancelled",
+        data: {
+          appState: this.appState,
+          snapshot: describeNetInfo(this.state.netInfo),
+          live: describeNetInfo(this.live),
+        },
+      });
+    }
+
+    this.phase = "frozen";
+  }
+
+  /**
+   * Opens the RESUME_VERIFICATION_DELAY_MS window. When it ends, compares the state published
+   * before background with the current live state, publishes the live state and bumps
+   * stillOfflineAfterResumeCount when the app is still offline.
+   */
+  private startVerification(): void {
+    this.phase = "verifying";
+
+    const snapshot = this.state.netInfo;
+    const startedAt = Date.now();
+
+    logger.info({
+      message: "NetworkStatus: resume verification started",
+      data: {
+        delayMs: RESUME_VERIFICATION_DELAY_MS,
+        appState: this.appState,
+        snapshot: describeNetInfo(snapshot),
+        live: describeNetInfo(this.live),
+      },
+    });
+
+    this.timer = setTimeout(() => {
+      this.timer = null;
+
+      if (this.phase !== "verifying") return;
+
+      const decision = getResumeDecision(
+        isOnline(snapshot) === true,
+        isOnline(this.live) === true
+      );
+
+      logger.info({
+        message: "NetworkStatus: resume verification finished",
+        data: {
+          decision,
+          elapsedMs: Date.now() - startedAt,
+          appState: this.appState,
+          snapshot: describeNetInfo(snapshot),
+          live: describeNetInfo(this.live),
+        },
+      });
+
+      this.phase = "live";
+
+      this.publish(
+        this.live,
+        this.state.stillOfflineAfterResumeCount +
+          (decision === "still_offline" ? 1 : 0)
+      );
+    }, RESUME_VERIFICATION_DELAY_MS);
+  }
+
+  /**
+   * Cancels the pending verification timer, if any.
+   */
+  private clearTimer(): void {
+    if (this.timer !== null) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+  }
+
+  /**
+   * Replaces the snapshot and notifies subscribers; no-op when nothing changed.
+   * @param netInfo - NetInfo to publish
+   * @param stillOfflineAfterResumeCount - counter to publish, defaults to the current one
+   */
+  private publish(
+    netInfo: T,
+    stillOfflineAfterResumeCount = this.state.stillOfflineAfterResumeCount
+  ): void {
+    if (
+      netInfo === this.state.netInfo &&
+      stillOfflineAfterResumeCount === this.state.stillOfflineAfterResumeCount
+    ) {
+      return;
+    }
+
+    this.state = { netInfo, stillOfflineAfterResumeCount };
+    this.listeners.forEach((listener) => listener());
+  }
+}