@applicaster/zapp-react-dom-app 16.0.0-rc.99 → 17.0.0-alpha.5804334713

package/App/InteractionManager/__tests__/InteractionManager.test.tsx

@@ -0,0 +1,319 @@
+import { DISPLAY_STATES } from "@applicaster/zapp-react-native-ui-components/Contexts/DisplayStateContext";
+import { confirmationDialogStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ConfirmDialogState";
+import {
+  focusManager,
+  KEYS,
+  playerManager,
+} from "@applicaster/zapp-react-native-utils/appUtils";
+import { KeyInputHandler } from "@applicaster/zapp-react-native-utils/appUtils/keyInputHandler/KeyInputHandler";
+import { TVSeekController } from "@applicaster/zapp-react-native-utils/reactHooks/player/TVSeekControlller/TVSeekController";
+import { SKIP_TIME_BASE } from "@applicaster/zapp-react-native-utils/reactHooks/player/const";
+import { showConfirmationDialog } from "@applicaster/zapp-react-native-utils/alertUtils";
+
+import { InteractionManagerClass } from "..";
+
+// The web app runs with the web key map
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/keyCodes/keys/keys",
+  () =>
+    jest.requireActual(
+      "@applicaster/zapp-react-native-utils/appUtils/keyCodes/keys/keys.web"
+    )
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/alertUtils", () => ({
+  showConfirmationDialog: jest.fn(),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Decorators/Navigator",
+  () => ({ withNavigator: (C) => C })
+);
+
+jest.mock("@applicaster/zapp-react-native-redux/utils/connectToStore", () => ({
+  connectToStore: () => (C) => C,
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/logger", () => {
+  const actual = jest.requireActual(
+    "@applicaster/zapp-react-native-utils/logger"
+  );
+
+  return {
+    ...actual,
+    getXray: () => ({ ...actual.getXray(), withXray: (C) => C }),
+  };
+});
+
+const globalAny: any = global;
+
+const createBackEvent = () => ({
+  code: "Escape",
+  preventDefault: jest.fn(),
+  stopPropagation: jest.fn(),
+});
+
+const createManager = (props = {}) => {
+  const navigator = {
+    canGoBack: jest.fn(() => false),
+    goBack: jest.fn(),
+    replace: jest.fn(),
+    currentRoute: "/river/home",
+  };
+
+  const defaultProps = {
+    displayState: DISPLAY_STATES.DEFAULT,
+    setDisplayState: jest.fn(),
+    navigator,
+    rivers: {},
+    backToTopAction: jest.fn(() => "GO_BACK"),
+    emitFocusOnSelectedTopMenuItem: jest.fn(),
+    emitFocusOnSelectedTab: jest.fn(),
+  };
+
+  const mergedProps = { ...defaultProps, ...props };
+
+  return {
+    manager: new InteractionManagerClass(mergedProps as any),
+    props: mergedProps,
+  };
+};
+
+describe("InteractionManager (web)", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (focusManager as any).setInitialFocus = jest.fn();
+    confirmationDialogStore.getState().hideDialog();
+  });
+
+  afterEach(() => {
+    delete globalAny.webOS;
+  });
+
+  describe("onBackPress with exit dialog visible", () => {
+    it.each([DISPLAY_STATES.DEFAULT, DISPLAY_STATES.PLAYER])(
+      "dismisses the dialog instead of navigating (displayState: %s)",
+      (displayState) => {
+        const { manager, props } = createManager({ displayState });
+        confirmationDialogStore.getState().showDialog();
+
+        const event = createBackEvent();
+        manager.onBackPress(event);
+
+        expect(confirmationDialogStore.getState().isDialogVisible).toBe(false);
+        expect(props.backToTopAction).not.toHaveBeenCalled();
+        expect(props.navigator.goBack).not.toHaveBeenCalled();
+        expect(event.preventDefault).toHaveBeenCalled();
+
+        expect(focusManager.setInitialFocus).toHaveBeenCalledWith(undefined, {
+          source: "cancel",
+          preserveScroll: true,
+        });
+      }
+    );
+
+    it("resolves the back action normally when the dialog is hidden", () => {
+      const { manager, props } = createManager();
+
+      manager.onBackPress(createBackEvent());
+
+      expect(props.backToTopAction).toHaveBeenCalled();
+      expect(props.navigator.canGoBack).toHaveBeenCalled();
+    });
+  });
+
+  describe("handleWebOsBack", () => {
+    it("uses the webOS platformBack API", () => {
+      const platformBack = jest.fn();
+      globalAny.webOS = { platformBack };
+
+      const { manager } = createManager();
+      manager.handleWebOsBack();
+
+      expect(platformBack).toHaveBeenCalledTimes(1);
+      expect(showConfirmationDialog).not.toHaveBeenCalled();
+    });
+
+    it("falls back to the custom exit dialog when platformBack is unavailable", () => {
+      globalAny.webOS = {};
+
+      const { manager } = createManager();
+      manager.handleWebOsBack();
+
+      expect(showConfirmationDialog).toHaveBeenCalledWith(
+        expect.objectContaining({ title: "" })
+      );
+    });
+  });
+
+  describe("Back at Home on VIDAA", () => {
+    it("shows the exit dialog and closes the window on confirm", () => {
+      const navigator = window.navigator;
+      const close = window.close;
+      window.close = jest.fn();
+
+      (window as any).navigator = {
+        userAgent: "Mozilla/5.0 Model/Hisense-MT9602 VIDAA/5.0",
+      };
+
+      const { manager } = createManager({
+        backToTopAction: jest.fn(() => "PLATFORM_TO_BACKGROUND"),
+      });
+
+      manager.onBackPress(createBackEvent());
+
+      expect(showConfirmationDialog).toHaveBeenCalledTimes(1);
+
+      (
+        showConfirmationDialog as jest.Mock
+      ).mock.calls[0][0].confirmCompletion();
+
+      expect(window.close).toHaveBeenCalledTimes(1);
+
+      (window as any).navigator = navigator;
+      window.close = close;
+    });
+  });
+
+  describe("Forward / Rewind keys", () => {
+    const POSITION = 100;
+
+    const createPlayer = (supportsNativeControls: boolean) => ({
+      supportsNativeControls: () => supportsNativeControls,
+      isPaused: () => false,
+      isLive: () => false,
+      getPosition: () => POSITION,
+      getSeekableDuration: () => 1000,
+      pause: jest.fn(),
+      play: jest.fn(),
+      seekTo: jest.fn(),
+      forward: jest.fn(),
+      rewind: jest.fn(),
+    });
+
+    let removeListener = () => {};
+
+    // Same wiring as usePlayerControllerSetup
+    const setup = ({ supportsNativeControls, ...props }: any) => {
+      const player = createPlayer(supportsNativeControls);
+
+      jest
+        .spyOn(playerManager, "getInstanceController")
+        .mockReturnValue(player as any);
+
+      removeListener = KeyInputHandler.getInstance().addListener(
+        new TVSeekController(player as any)
+      );
+
+      return { player, ...createManager(props) };
+    };
+
+    const press = (manager, key) => {
+      manager.onKeyDown(KEYS[key]);
+      manager.onKeyUp(KEYS[key]);
+      jest.runAllTimers();
+    };
+
+    beforeEach(() => jest.useFakeTimers());
+
+    afterEach(() => {
+      removeListener();
+      jest.useRealTimers();
+      jest.restoreAllMocks();
+    });
+
+    describe("with a player rendering its own controls", () => {
+      const expectUntouched = (player, props) => {
+        expect(player.seekTo).not.toHaveBeenCalled();
+        expect(player.forward).not.toHaveBeenCalled();
+        expect(player.rewind).not.toHaveBeenCalled();
+        expect(player.pause).not.toHaveBeenCalled();
+        expect(props.setDisplayState).not.toHaveBeenCalled();
+      };
+
+      it.each(["Forward", "Rewind"])("%s is left to the player", (key) => {
+        const { player, manager, props } = setup({
+          supportsNativeControls: true,
+        });
+
+        const event = { ...KEYS[key], stopPropagation: jest.fn() };
+
+        manager.onKeyDown(event);
+        manager.onKeyUp(event);
+        jest.runAllTimers();
+
+        expectUntouched(player, props);
+        // the key has to reach the player's own handler
+        expect(event.stopPropagation).not.toHaveBeenCalled();
+      });
+
+      it("does not seek the player while the play-next overlay is visible", () => {
+        const { player, manager } = setup({ supportsNativeControls: true });
+
+        (manager.props.navigator as any).getPlayNextOverlay = () => ({});
+
+        press(manager, "Forward");
+
+        expect(player.seekTo).not.toHaveBeenCalled();
+        expect(player.forward).not.toHaveBeenCalled();
+      });
+
+      it("keeps the keys while a dialog is visible", () => {
+        const { player, manager } = setup({ supportsNativeControls: true });
+
+        confirmationDialogStore.getState().showDialog();
+
+        press(manager, "Forward");
+
+        expect(player.seekTo).toHaveBeenCalledWith(POSITION + SKIP_TIME_BASE);
+      });
+
+      it("sends the key-up to the owner of the key-down when a dialog closes in between", () => {
+        const { player, manager } = setup({ supportsNativeControls: true });
+
+        confirmationDialogStore.getState().showDialog();
+        manager.onKeyDown(KEYS.Forward);
+        confirmationDialogStore.getState().hideDialog();
+        manager.onKeyUp(KEYS.Forward);
+        jest.runAllTimers();
+
+        // a single tap seek, not a long press left running
+        expect(player.seekTo).toHaveBeenCalledTimes(1);
+        expect(player.seekTo).toHaveBeenCalledWith(POSITION + SKIP_TIME_BASE);
+      });
+
+      it("leaves the key-up to the player when a dialog opens after a deferred key-down", () => {
+        const { player, manager, props } = setup({
+          supportsNativeControls: true,
+        });
+
+        manager.onKeyDown(KEYS.Forward);
+        confirmationDialogStore.getState().showDialog();
+        manager.onKeyUp(KEYS.Forward);
+        jest.runAllTimers();
+
+        expectUntouched(player, props);
+      });
+    });
+
+    describe("with QuickBrick's transport controls", () => {
+      it.each([
+        ["Forward", POSITION + SKIP_TIME_BASE],
+        ["Rewind", POSITION - SKIP_TIME_BASE],
+      ])("%s keeps the delayed seek", (key, expectedPosition) => {
+        const { player, manager, props } = setup({
+          supportsNativeControls: false,
+          displayState: DISPLAY_STATES.PLAYER,
+        });
+
+        press(manager, key);
+
+        expect(props.setDisplayState).toHaveBeenCalledWith(DISPLAY_STATES.HUD);
+        expect(player.seekTo).toHaveBeenCalledWith(expectedPosition);
+        expect(player.play).toHaveBeenCalled();
+        expect(player.forward).not.toHaveBeenCalled();
+        expect(player.rewind).not.toHaveBeenCalled();
+      });
+    });
+  });
+});

package/App/InteractionManager/index.tsx

@@ -52,13 +52,14 @@ import { KeyboardLongPressManager } from "@applicaster/zapp-react-dom-ui-compone
 import { KeyInputHandler } from "@applicaster/zapp-react-native-utils/appUtils/keyInputHandler/KeyInputHandler";
 import { getHomeRiver } from "@applicaster/zapp-react-native-utils/reactHooks/state";
 import { withBackToTopActionHOC } from "./hoc";
+import { isVidaaPlatform } from "../Loader/utils/platform";
 
 const { withXray } = getXray();
 const globalAny: any = global;
 
 const { log_debug, log_warning, log_info } = createLogger({
   category: "InteractionManager",
-  subsystem: "zapp-react-dom-app",
+  subsystem: "app/remote_control",
 });
 
 const shouldUseOnScreenKeyboard = () =>
@@ -89,7 +90,7 @@ type KeyCode = { code: string; keyCode: number | string };
 const VIDEO_PLAYER_CONTROLS_NAVIGATION_MESSAGE =
   "Video player controls - use left/right to navigate";
 
-class InteractionManagerClass extends React.Component<Props, State> {
+export class InteractionManagerClass extends React.Component<Props, State> {
   onKeyDownListener: (keyCode: KeyCode) => void;
   onMouseDownListener: (event: MouseEvent) => void;
   onMouseMoveListener: (event: MouseEvent) => void;
@@ -101,6 +102,8 @@ class InteractionManagerClass extends React.Component<Props, State> {
   private sequenceTimeout: NodeJS.Timeout | null;
   private userSequence: number[] = [];
   private isDismissing = false;
+  // Whether each key's key-down was left to the player's own controls
+  private deferredKeyDowns = new Map<number, boolean>();
   private confirmDialog: ConfirmationDialogState =
     confirmationDialogStore.getState();
 
@@ -250,10 +253,14 @@ class InteractionManagerClass extends React.Component<Props, State> {
     if (isVizioPlatform()) {
       window?.VIZIO?.exitApplication();
     }
+
+    if (isVidaaPlatform()) {
+      window.close();
+    }
   }
 
   handleWebOsBack() {
-    const systemBack = globalAny?.webOS?.platformToBackground;
+    const systemBack = globalAny?.webOS?.platformBack;
 
     if (systemBack) {
       systemBack();
@@ -277,7 +284,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
   platformToBackground() {
     try {
       // TODO: temporary hack until this code is refactored
-      if (isSamsungPlatform() || isVizioPlatform()) {
+      if (isSamsungPlatform() || isVizioPlatform() || isVidaaPlatform()) {
         const { isDialogVisible } = confirmationDialogStore.getState();
 
         if (isDialogVisible) {
@@ -368,6 +375,18 @@ class InteractionManagerClass extends React.Component<Props, State> {
       focusManager.pressOut();
     }
 
+    // The key-up goes to whoever got the key-down, even if a dialog or the
+    // play-next overlay opened or closed in between.
+    const deferred =
+      this.deferredKeyDowns.get(event.keyCode) ??
+      this.isDeferredToNativeControls(event);
+
+    this.deferredKeyDowns.delete(event.keyCode);
+
+    if (deferred) {
+      return;
+    }
+
     if (
       keyCode(event).matches(KEYS.Forward) ||
       (__DEV__ && keyCode(event).matches(KEYS.C))
@@ -420,18 +439,20 @@ class InteractionManagerClass extends React.Component<Props, State> {
       return;
     }
 
+    // Focus is inside the dialog, so backToTopAction() can't resolve a
+    // meaningful action — Back must dismiss the dialog in every display state.
+    if (isDialogVisible) {
+      this.onConfirmDialogClose();
+      event.preventDefault();
+      event.stopPropagation();
+
+      return;
+    }
+
     const action = backToTopAction();
 
     const effectiveDisplayState = this.getEffectiveDisplayState();
 
-    // TEMP(native-controls): remove after device verification
-    if (effectiveDisplayState !== displayState) {
-      log_debug("[NativeControls] Back handled as PLAYER", {
-        displayState,
-        action,
-      });
-    }
-
     switch (effectiveDisplayState) {
       case DISPLAY_STATES.DEFAULT:
         if (action === "PLATFORM_TO_BACKGROUND") {
@@ -481,9 +502,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
 
         break;
       case DISPLAY_STATES.PLAYER:
-        if (isDialogVisible) {
-          this.onConfirmDialogClose();
-        } else if (navigator.canGoBack()) {
+        if (navigator.canGoBack()) {
           navigator.goBack();
         } else if (this.isHomeScreen()) {
           this.platformToBackground();
@@ -559,12 +578,22 @@ class InteractionManagerClass extends React.Component<Props, State> {
     return (
       this.isNativePlayerControlsEnabled() &&
       !this.isPlayNextOverlayVisible() &&
-      (keyCode(event).matchesAny(...ARROW_KEYS) ||
-        keyCode(event).matches(KEYS.Enter) ||
-        (__DEV__ && keyCode(event).matches(KEYS.X)))
+      (keyCode(event).matchesAny(
+        ...ARROW_KEYS,
+        KEYS.Enter,
+        // The player seeks on its own with these keys
+        KEYS.Forward,
+        KEYS.Rewind
+      ) ||
+        (__DEV__ && keyCode(event).matchesAny(KEYS.X, KEYS.C, KEYS.Z)))
     );
   };
 
+  // An open dialog owns the remote, whatever the player renders.
+  isDeferredToNativeControls = (event: KeyboardEvent) =>
+    !confirmationDialogStore.getState().isDialogVisible &&
+    this.shouldDeferPlaybackNavigationToNativeControls(event);
+
   onKeyDown(event) {
     const { setDisplayState, navigator, xray } = this.props;
     const displayState = this.getEffectiveDisplayState();
@@ -603,18 +632,11 @@ class InteractionManagerClass extends React.Component<Props, State> {
     // Only handle repeat events for arrow keys
     if (event.repeat && !keyCode(event).matchesAny(...ARROW_KEYS)) return;
 
-    if (
-      !isDialogVisible &&
-      this.shouldDeferPlaybackNavigationToNativeControls(event)
-    ) {
-      // The player's own spatial navigation handles these keys.
-      // TEMP(native-controls): remove after device verification
-      log_debug("[NativeControls] key deferred to player", {
-        key: event.key,
-        displayState,
-        activeElement: document.activeElement?.className,
-      });
+    const deferred = this.isDeferredToNativeControls(event);
+    this.deferredKeyDowns.set(event.keyCode, deferred);
 
+    if (deferred) {
+      // The player's own key handling takes these keys.
       return;
     }
 

package/Polyfills/AppLoaderBridge/__tests__/AppLoaderBridge.test.ts

@@ -0,0 +1,221 @@
+import axios from "axios";
+
+jest.mock("axios", () => ({ get: jest.fn() }));
+
+const mockAppData = {
+  accountsAccountId: "account",
+  bundleIdentifier: "com.app",
+  store: "samsung",
+  versionName: "1.0",
+  appFamilyId: "family",
+  // appData.json is camelized
+  riversConfigurationId: "default-layout",
+};
+
+jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
+  appStore: { get: () => mockAppData },
+}));
+
+const get = axios.get as jest.Mock;
+
+const appUrl =
+  "https://assets-secure.applicaster.com/zapp/accounts/account/apps/com.app/samsung_app_store/1.0";
+
+const familyUrl =
+  "https://assets-secure.applicaster.com/zapp/accounts/account/app_families/family";
+
+const storage = new Map<string, string>();
+
+(global as any).window = {
+  localStorage: {
+    getItem: (key) => (storage.has(key) ? storage.get(key) : null),
+    setItem: (key, value) => storage.set(key, String(value)),
+  },
+};
+
+const cacheKey = (key: string) => `loader_cache_::_${key}`;
+
+const ok = (data: unknown, etag?: string) =>
+  Promise.resolve({
+    status: 200,
+    data: JSON.stringify(data),
+    headers: { etag },
+  });
+
+const requestedUrls = () => get.mock.calls.map(([url]) => url);
+
+let AppLoaderBridge;
+
+beforeEach(() => {
+  storage.clear();
+  get.mockReset();
+  process.env.ENABLE_REMOTE_DATA_IN_DEV = "true";
+
+  jest.isolateModules(() => {
+    require("../../AppData").setAppData(mockAppData);
+    AppLoaderBridge = require("..").AppLoaderBridge;
+  });
+});
+
+afterAll(() => {
+  delete process.env.ENABLE_REMOTE_DATA_IN_DEV;
+});
+
+describe("getFile", () => {
+  it("resolves the parsed file and caches its text and etag", async () => {
+    get.mockReturnValue(ok({ id: "config" }, "e1"));
+
+    await expect(
+      AppLoaderBridge.getFile("remoteConfigurations")
+    ).resolves.toEqual({ id: "config" });
+
+    expect(get).toHaveBeenCalledWith(
+      `${appUrl}/remote_configurations/remote_configurations.json`,
+      expect.objectContaining({ headers: { "If-None-Match": null } })
+    );
+
+    expect(storage.get(cacheKey("remoteConfigurations"))).toBe(
+      '{"id":"config"}'
+    );
+
+    expect(storage.get(cacheKey("remoteConfigurationsEtag"))).toBe("e1");
+  });
+
+  it("resolves the cached file when the server answers 304", async () => {
+    storage.set(cacheKey("pipesEndpoints"), '{"id":"cached"}');
+    storage.set(cacheKey("pipesEndpointsEtag"), "e1");
+    get.mockResolvedValue({ status: 304, data: "", headers: {} });
+
+    await expect(AppLoaderBridge.getFile("pipesEndpoints")).resolves.toEqual({
+      id: "cached",
+    });
+
+    expect(get).toHaveBeenCalledWith(
+      `${familyUrl}/data_source_providers/endpoints.json`,
+      expect.objectContaining({ headers: { "If-None-Match": "e1" } })
+    );
+  });
+
+  it("rejects with the configuration error when the body is not JSON", async () => {
+    get.mockResolvedValue({ status: 200, data: "<html>", headers: {} });
+
+    await expect(AppLoaderBridge.getFile("layout")).rejects.toThrow(
+      "cannot retrieve configuration data for layout"
+    );
+  });
+});
+
+describe("prefetchFiles", () => {
+  it("sends the general requests before returning, and getFile uses them", async () => {
+    get.mockImplementation((url) => ok({ url }));
+
+    AppLoaderBridge.prefetchFiles();
+
+    expect(requestedUrls()).toEqual([
+      `${appUrl}/remote_configurations/remote_configurations.json`,
+      `${appUrl}/plugin_configurations/plugin_configurations.json`,
+      `${familyUrl}/data_source_providers/endpoints.json`,
+    ]);
+
+    await expect(
+      AppLoaderBridge.getFile("pluginConfigurations")
+    ).resolves.toEqual({
+      url: `${appUrl}/plugin_configurations/plugin_configurations.json`,
+    });
+
+    expect(get).toHaveBeenCalledTimes(3);
+  });
+
+  it("also requests the layout files for a layout id stored by a previous launch", () => {
+    storage.set(cacheKey("currentLayoutId"), "stored-layout");
+    get.mockImplementation((url) => ok({ url }));
+
+    AppLoaderBridge.prefetchFiles();
+
+    expect(requestedUrls()).toEqual(
+      expect.arrayContaining([
+        `${appUrl}/layouts/stored-layout.json`,
+        `${familyUrl}/layouts/stored-layout/cell_styles.json`,
+        `${familyUrl}/layouts/stored-layout/presets_mapping.json`,
+      ])
+    );
+
+    expect(get).toHaveBeenCalledTimes(6);
+  });
+
+  it("falls back to the built-in layout id and stores it as the default", async () => {
+    get.mockImplementation((url) => ok({ url }));
+
+    await expect(AppLoaderBridge.getFile("layout")).resolves.toEqual({
+      url: `${appUrl}/layouts/default-layout.json`,
+    });
+
+    expect(storage.get(cacheKey("defaultLayoutId"))).toBe("default-layout");
+  });
+
+  it("requests a file again when its URL changed after the prefetch", async () => {
+    storage.set(cacheKey("currentLayoutId"), "old-layout");
+    get.mockImplementation((url) => ok({ url }));
+
+    AppLoaderBridge.prefetchFiles();
+    await AppLoaderBridge.switchLayout("new-layout");
+
+    await expect(AppLoaderBridge.getFile("layout")).resolves.toEqual({
+      url: `${appUrl}/layouts/new-layout.json`,
+    });
+
+    expect(get).toHaveBeenCalledTimes(7);
+  });
+
+  it("uses each prefetched request once", async () => {
+    get.mockImplementation((url) => ok({ url }));
+
+    AppLoaderBridge.prefetchFiles();
+    await AppLoaderBridge.getFile("remoteConfigurations");
+    await AppLoaderBridge.getFile("remoteConfigurations");
+
+    expect(get).toHaveBeenCalledTimes(4);
+  });
+
+  it("requests a file again when its prefetch failed", async () => {
+    get.mockImplementation(() => Promise.reject(new Error("network")));
+
+    AppLoaderBridge.prefetchFiles();
+
+    get.mockImplementation((url) => ok({ url }));
+
+    await expect(
+      AppLoaderBridge.getFile("remoteConfigurations")
+    ).resolves.toEqual({
+      url: `${appUrl}/remote_configurations/remote_configurations.json`,
+    });
+
+    expect(requestedUrls()[3]).toBe(
+      `${appUrl}/remote_configurations/remote_configurations.json`
+    );
+
+    expect(get).toHaveBeenCalledTimes(4);
+  });
+
+  it("rejects getFile with the configuration error when the prefetch and its retry failed", async () => {
+    get.mockImplementation(() => Promise.reject(new Error("network")));
+
+    AppLoaderBridge.prefetchFiles();
+
+    await expect(
+      AppLoaderBridge.getFile("remoteConfigurations")
+    ).rejects.toThrow(
+      "cannot retrieve configuration data for remoteConfigurations"
+    );
+
+    expect(get).toHaveBeenCalledTimes(4);
+  });
+
+  it("does nothing in development unless remote data is enabled", () => {
+    delete process.env.ENABLE_REMOTE_DATA_IN_DEV;
+
+    AppLoaderBridge.prefetchFiles();
+
+    expect(get).not.toHaveBeenCalled();
+  });
+});

package/Polyfills/AppLoaderBridge/index.ts

@@ -1,67 +1,115 @@
-import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
+import axios, { AxiosResponse } from "axios";
+import { getAppData } from "../AppData";
 import { getStorageModule } from "../Storage";
 import { STORAGE } from "./utils/enums";
-import { createUrl } from "./utils/utils";
+import {
+  buildUrl,
+  createUrl,
+  getLayoutIds,
+  readLoaderCache,
+  writeLoaderCache,
+} from "./utils/utils";
 
 type StorageResponse = string | null;
 
+type Prefetched = { url: string; response: Promise<AxiosResponse<string>> };
+
 const localStorage: any = getStorageModule("localStorage");
 
+const GENERAL_FILES = [
+  "remoteConfigurations",
+  "pluginConfigurations",
+  "pipesEndpoints",
+];
+
+const LAYOUT_FILES = ["layout", "cellStyles", "presetsMapping"];
+
+function requestFile(type: string, url: string) {
+  return axios.get<string>(url, {
+    headers: {
+      // Sent even without a stored etag (as "null"). A conditional header
+      // keeps the browser's HTTP cache out of these requests, so every launch
+      // gets the current file.
+      "If-None-Match": readLoaderCache(`${type}Etag`),
+    },
+    validateStatus: (status: number): boolean =>
+      status === 200 || status === 304,
+    // Keep the body as text: it is stored as-is and parsed once in getFile.
+    transformResponse: [(body) => body],
+  });
+}
+
 export const AppLoaderBridge = (function () {
-  async function getFile(type: string): Promise<string> {
+  // In-flight requests started by prefetchFiles, each used by the first
+  // getFile call for the same file and URL, which requests the file again
+  // if the prefetch failed.
+  const prefetched = new Map<string, Prefetched>();
+
+  /**
+   * Resolves the parsed file. Native bridges resolve a JSON string instead;
+   * getFile callers accept both, which saves serializing and re-parsing
+   * every file on web.
+   */
+  async function getFile(type: string): Promise<unknown> {
     const url: string = await createUrl(type);
+    const pending = prefetched.get(type);
+    prefetched.delete(type);
 
     try {
-      const currentEtag = await localStorage.getItem(
-        `${type}Etag`,
-        STORAGE.APP_LOADER_BRIDGE_NAME_SPACE
-      );
-
-      const config: AxiosRequestConfig = {
-        method: "get",
-        url,
-        headers: {
-          "If-None-Match": currentEtag,
-        },
-        validateStatus: (status: number): boolean =>
-          status === 200 || status === 304,
-      };
-
-      const response: AxiosResponse = await axios(config);
-
-      const {
-        data,
-        headers: { etag },
-        status,
-      } = response;
+      const { data, headers, status } = await (pending?.url === url
+        ? pending.response.catch(() => requestFile(type, url))
+        : requestFile(type, url));
 
       if (status === 304) {
-        const res = await localStorage.getItem(
-          type,
-          STORAGE.APP_LOADER_BRIDGE_NAME_SPACE
-        );
-
-        return JSON.stringify(res);
+        return readLoaderCache(type);
       }
 
-      await localStorage.setItem(
-        `${type}Etag`,
-        etag,
-        STORAGE.APP_LOADER_BRIDGE_NAME_SPACE
-      );
+      const file = JSON.parse(data);
 
-      await localStorage.setItem(
-        type,
-        JSON.stringify(data),
-        STORAGE.APP_LOADER_BRIDGE_NAME_SPACE
-      );
+      writeLoaderCache(`${type}Etag`, headers.etag);
+      writeLoaderCache(type, data);
 
-      return JSON.stringify(data);
+      return file;
     } catch (error) {
       throw new Error("cannot retrieve configuration data for " + type);
     }
   }
 
+  /**
+   * Starts the configuration requests while the app bundle is still
+   * evaluating, so the files download during it instead of after it.
+   * Layout files are only requested for a layout id stored by a previous
+   * launch; without one, the remote configuration may select another layout.
+   * A file whose URL changes by the time getFile asks for it is requested again.
+   */
+  function prefetchFiles(): void {
+    // Mirrors appRemoteDataLoader, which skips remote data in development.
+    if (__DEV__ && process.env.ENABLE_REMOTE_DATA_IN_DEV !== "true") {
+      return;
+    }
+
+    try {
+      const appData = getAppData();
+      const { storedLayoutId } = getLayoutIds(appData);
+
+      const types = storedLayoutId
+        ? [...GENERAL_FILES, ...LAYOUT_FILES]
+        : GENERAL_FILES;
+
+      types.forEach((type) => {
+        const url = buildUrl(type, appData, storedLayoutId);
+        const response = requestFile(type, url);
+
+        // getFile reports failures; this only stops an early or unused
+        // failure from surfacing as an unhandled rejection.
+        response.catch(() => undefined);
+        prefetched.set(type, { url, response });
+      });
+    } catch (error) {
+      // Nothing prefetched; getFile requests the files as before.
+    }
+  }
+
   async function switchLayout(layoutID: string): Promise<boolean> {
     return await localStorage.setItem(
       STORAGE.CURRENT_LAYOUT_ID,
@@ -86,6 +134,7 @@ export const AppLoaderBridge = (function () {
 
   return {
     getFile,
+    prefetchFiles,
     switchLayout,
     getCurrentLayoutId,
     getDefaultLayoutId,

package/Polyfills/AppLoaderBridge/utils/utils.ts

@@ -1,54 +1,68 @@
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
-import { getStorageModule } from "../../Storage";
+import { parseJsonIfNeeded } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { applyNamespaceToKeyName } from "../../Storage";
 import { STORAGE, STORE_PLATFORM } from "./enums";
 
-const localStorage: any = getStorageModule("localStorage");
+const cacheKey = (key: string) =>
+  applyNamespaceToKeyName(key, STORAGE.APP_LOADER_BRIDGE_NAME_SPACE);
 
-export async function createUrl(type: string): Promise<string> {
-  const appData = appStore.get("appData");
+/**
+ * Reads the loader cache with the same keys and parsing as
+ * getStorageModule("localStorage"), but synchronously. Web storage is
+ * synchronous, and prefetchFiles needs it that way: it runs while the app
+ * bundle is still evaluating, and an awaited read would only resume after it.
+ */
+export function readLoaderCache(key: string) {
+  return parseJsonIfNeeded(window.localStorage.getItem(cacheKey(key)));
+}
 
-  const {
-    accountsAccountId,
-    bundleIdentifier,
-    store,
-    versionName,
-    rivers_configuration_id: defaultLayoutId,
-    appFamilyId,
-  } = appData;
+export function writeLoaderCache(key: string, value: string) {
+  window.localStorage.setItem(cacheKey(key), value);
+}
 
-  if (
-    !(await localStorage.getItem(
-      STORAGE.DEFAULT_LAYOUT_ID,
-      STORAGE.APP_LOADER_BRIDGE_NAME_SPACE
-    ))
-  ) {
-    await localStorage.setItem(
-      STORAGE.DEFAULT_LAYOUT_ID,
-      defaultLayoutId,
-      STORAGE.APP_LOADER_BRIDGE_NAME_SPACE
-    );
+/**
+ * The layout id to request, split by where it comes from.
+ * `storedLayoutId` is only set when a previous launch stored one.
+ */
+export function getLayoutIds(appData) {
+  // appData.json is camelized, so the built-in id is riversConfigurationId.
+  const defaultLayoutId =
+    appData.riversConfigurationId || appData.rivers_configuration_id;
+
+  const storedDefault = readLoaderCache(STORAGE.DEFAULT_LAYOUT_ID);
+
+  if ((!storedDefault || storedDefault === "undefined") && defaultLayoutId) {
+    writeLoaderCache(STORAGE.DEFAULT_LAYOUT_ID, defaultLayoutId);
   }
 
-  const currentLayoutId = await localStorage.getItem(
-    STORAGE.CURRENT_LAYOUT_ID,
-    STORAGE.APP_LOADER_BRIDGE_NAME_SPACE
-  );
+  const currentLayoutId = readLoaderCache(STORAGE.CURRENT_LAYOUT_ID);
 
-  const remoteConfig: RemoteConfigurations = await localStorage.getItem(
-    STORAGE.REMOTE_CONFIGURATIONS,
-    STORAGE.APP_LOADER_BRIDGE_NAME_SPACE
+  const remoteConfig: RemoteConfigurations = readLoaderCache(
+    STORAGE.REMOTE_CONFIGURATIONS
   );
 
   const remoteConfigLayoutId = remoteConfig?.general_settings?.layout_id;
 
   /**
-   * It is very important to note the order used in the customLayoutId property.
+   * It is very important to note the order used for the layout id (createUrl uses storedLayoutId || defaultLayoutId).
    * First we are attempting ot use the id set by layout plugin, it is an override of the defined layout.
    * Or use layout id from the remote configuration, remote config is loaded first and it has current layoutId from zapp.
    * Or use layout id that was built with the app, this id can be found in appData.json and is loaded into redux store.
    */
-  const customLayoutId =
-    currentLayoutId || remoteConfigLayoutId || defaultLayoutId;
+  return {
+    storedLayoutId: currentLayoutId || remoteConfigLayoutId,
+    defaultLayoutId,
+  };
+}
+
+export function buildUrl(type: string, appData, layoutId: string): string {
+  const {
+    accountsAccountId,
+    bundleIdentifier,
+    store,
+    versionName,
+    appFamilyId,
+  } = appData;
 
   const baseURL = `https://assets-secure.applicaster.com/zapp/accounts/${accountsAccountId}`;
   const urlTemplate = `apps/${bundleIdentifier}/${STORE_PLATFORM[store]}/${versionName}`;
@@ -59,14 +73,21 @@ export async function createUrl(type: string): Promise<string> {
     case "pluginConfigurations":
       return `${baseURL}/${urlTemplate}/plugin_configurations/plugin_configurations.json`;
     case "layout":
-      return `${baseURL}/${urlTemplate}/layouts/${customLayoutId}.json`;
+      return `${baseURL}/${urlTemplate}/layouts/${layoutId}.json`;
     case "pipesEndpoints":
       return `${baseURL}/app_families/${appFamilyId}/data_source_providers/endpoints.json`;
     case "cellStyles":
-      return `${baseURL}/app_families/${appFamilyId}/layouts/${customLayoutId}/cell_styles.json`;
+      return `${baseURL}/app_families/${appFamilyId}/layouts/${layoutId}/cell_styles.json`;
     case "presetsMapping":
-      return `${baseURL}/app_families/${appFamilyId}/layouts/${customLayoutId}/presets_mapping.json`;
+      return `${baseURL}/app_families/${appFamilyId}/layouts/${layoutId}/presets_mapping.json`;
     default:
       return null;
   }
 }
+
+export async function createUrl(type: string): Promise<string> {
+  const appData = appStore.get("appData");
+  const { storedLayoutId, defaultLayoutId } = getLayoutIds(appData);
+
+  return buildUrl(type, appData, storedLayoutId || defaultLayoutId);
+}

package/Polyfills/QuickBrickCommunicationModule/index.js

@@ -8,7 +8,7 @@ import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 
 const { log_error, log_debug, log_warning } = createLogger({
   category: "QuickBrickCommunicationModule",
-  subsystem: "zapp-react-dom-app",
+  subsystem: "react_native/bridge",
 });
 
 const QuickBrickEventEmitter = {};

package/Polyfills/index.js

@@ -9,9 +9,6 @@ import "abortcontroller-polyfill/dist/polyfill-patch-fetch";
 import "core-js/stable";
 import "regenerator-runtime/runtime";
 
-// Polyfill for ShadowDOM, Array.from, Object.assign, and more for webcomponents
-import "@webcomponents/webcomponentsjs";
-
 const PLATFORM_KEYS = {
   samsung: "samsung_tv",
   lg: "lg_tv",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "16.0.0-rc.99",
+  "version": "17.0.0-alpha.5804334713",
   "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
   "main": "index.js",
   "scripts": {
@@ -22,11 +22,11 @@
   },
   "homepage": "https://github.com/applicaster/zapp-react-dom-app#readme",
   "dependencies": {
-    "@applicaster/zapp-react-dom-ui-components": "16.0.0-rc.99",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.99",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.99",
-    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.99",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.99",
+    "@applicaster/zapp-react-dom-ui-components": "17.0.0-alpha.5804334713",
+    "@applicaster/zapp-react-native-bridge": "17.0.0-alpha.5804334713",
+    "@applicaster/zapp-react-native-redux": "17.0.0-alpha.5804334713",
+    "@applicaster/zapp-react-native-ui-components": "17.0.0-alpha.5804334713",
+    "@applicaster/zapp-react-native-utils": "17.0.0-alpha.5804334713",
     "abortcontroller-polyfill": "^1.7.5",
     "typeface-montserrat": "^0.0.54",
     "video.js": "7.14.3",