@applicaster/zapp-react-dom-app 16.0.0-rc.1 → 16.0.0-rc.100

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

@@ -8,12 +8,12 @@ import {
   useCurrentScreenIsHome,
   useCurrentScreenIsRoot,
   useCurrentScreenIsTabs,
-  useIsStandaloneFullscreen,
 } from "../hooks";
 
 import {
   useCurrentScreenIsHook,
   useCurrentScreenIsStartupHook,
+  useIsStandaloneFullscreen,
 } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 
 jest.mock("@applicaster/zapp-react-native-utils/appUtils", () => ({
@@ -64,14 +64,14 @@ describe("withBackToTopActionHOC - backToTopAction", () => {
     });
   });
 
-  it("returns PLATFORM_BACK for startup hook", () => {
+  it("returns PLATFORM_TO_BACKGROUND for startup hook", () => {
     expect.assertions(1);
 
     (useCurrentScreenIsStartupHook as jest.Mock).mockReturnValue(true);
 
     render(<Wrapped />);
 
-    expect(receivedProps.backToTopAction()).toBe("PLATFORM_BACK");
+    expect(receivedProps.backToTopAction()).toBe("PLATFORM_TO_BACKGROUND");
   });
 
   it("returns GO_BACK_FROM_HOOK when isHook", () => {
@@ -94,7 +94,7 @@ describe("withBackToTopActionHOC - backToTopAction", () => {
     expect(receivedProps.backToTopAction()).toBe("GO_HOME");
   });
 
-  it("returns PLATFORM_BACK when root + menu focus + home", () => {
+  it("returns PLATFORM_TO_BACKGROUND when root + menu focus + home", () => {
     expect.assertions(1);
 
     (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
@@ -106,7 +106,7 @@ describe("withBackToTopActionHOC - backToTopAction", () => {
 
     render(<Wrapped />);
 
-    expect(receivedProps.backToTopAction()).toBe("PLATFORM_BACK");
+    expect(receivedProps.backToTopAction()).toBe("PLATFORM_TO_BACKGROUND");
   });
 
   it("returns GO_HOME when root + menu focus + NOT home", () => {

package/App/InteractionManager/hoc/hooks/index.ts

@@ -4,7 +4,6 @@ import {
   useRivers,
 } from "@applicaster/zapp-react-native-utils/reactHooks/state";
 import { last } from "@applicaster/zapp-react-native-utils/utils";
-import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 export const useCurrentScreenIsHome = (): boolean => {
   const navigator = useNavigation();
@@ -33,12 +32,3 @@ export const useCurrentScreenIsTabs = (): boolean => {
 
   return river?.type === "tabs_screen";
 };
-
-export const useIsStandaloneFullscreen = (): boolean => {
-  const navigator = useNavigation();
-
-  return toBooleanWithDefaultFalse(
-    !navigator?.canGoBack() &&
-      navigator?.screenData?.general?.allow_screen_plugin_presentation
-  );
-};

package/App/InteractionManager/hoc/withBackToTopAction.tsx

@@ -8,12 +8,12 @@ import {
   useCurrentScreenIsHome,
   useCurrentScreenIsRoot,
   useCurrentScreenIsTabs,
-  useIsStandaloneFullscreen,
 } from "./hooks";
 
 import {
   useCurrentScreenIsHook,
   useCurrentScreenIsStartupHook,
+  useIsStandaloneFullscreen,
 } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 
 export function withBackToTopActionHOC(Component) {
@@ -38,20 +38,20 @@ export function withBackToTopActionHOC(Component) {
 
     const backToTopAction = React.useCallback((): BackToTopAction => {
       if (isStartUpHook) {
-        return "PLATFORM_BACK";
+        return "PLATFORM_TO_BACKGROUND";
       }
 
       if (isHook) {
         return "GO_BACK_FROM_HOOK";
       }
 
-      // Handling case where is not top menu visible
+      // Handle the case where the top menu is not visible
       if (isStandaloneFullscreen) {
         return "GO_HOME";
       }
 
       if (isRoot && focusManager.isFocusOnMenu() && isHome) {
-        return "PLATFORM_BACK";
+        return "PLATFORM_TO_BACKGROUND";
       }
 
       if (isRoot && focusManager.isFocusOnMenu() && !isHome) {

package/App/InteractionManager/index.tsx

@@ -3,11 +3,6 @@ import * as R from "ramda";
 
 import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 
-import {
-  QUICK_BRICK_EVENTS,
-  sendQuickBrickEvent,
-} from "@applicaster/zapp-react-native-bridge/QuickBrick";
-
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 import {
@@ -50,6 +45,8 @@ import {
   isVizioPlatform,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 
+import { platformToBackground as sendAppToBackground } from "@applicaster/zapp-react-native-utils/appUtils/platform";
+
 import { OnScreenKeyboard } from "@applicaster/zapp-react-dom-ui-components/Components/OnScreenKeyboard";
 import { KeyboardLongPressManager } from "@applicaster/zapp-react-dom-ui-components/Utils/KeyboardLongPressManager";
 import { KeyInputHandler } from "@applicaster/zapp-react-native-utils/appUtils/keyInputHandler/KeyInputHandler";
@@ -207,7 +204,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
   }
 
   componentWillUnmount() {
-    window.removeEventListener("keydown", this.onKeyDownListener);
+    window.removeEventListener("keydown", this.onKeyDownListener, true);
     window.removeEventListener("keyup", this.onKeyUp);
     document.removeEventListener("wheel", this.onScrollListener);
 
@@ -242,7 +239,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
   performExit() {
     if (isSamsungPlatform()) {
       this.onConfirmDialogClose();
-      sendQuickBrickEvent(QUICK_BRICK_EVENTS.MOVE_APP_TO_BACKGROUND);
+      sendAppToBackground();
     }
 
     if (isLgPlatform()) {
@@ -256,7 +253,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
   }
 
   handleWebOsBack() {
-    const systemBack = globalAny?.webOS?.platformBack;
+    const systemBack = globalAny?.webOS?.platformToBackground;
 
     if (systemBack) {
       systemBack();
@@ -277,7 +274,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
    * WebOS behavior depends on the SDK version, WebOS 4 would pull up the launcher menu
    * following versions would show a native exit prompt
    */
-  platformBack() {
+  platformToBackground() {
     try {
       // TODO: temporary hack until this code is refactored
       if (isSamsungPlatform() || isVizioPlatform()) {
@@ -294,9 +291,11 @@ class InteractionManagerClass extends React.Component<Props, State> {
         }
       } else if (isLgPlatform()) {
         this.handleWebOsBack();
+      } else {
+        sendAppToBackground();
       }
     } catch (e) {
-      log_warning("Failed to execute platformBack", e);
+      log_warning("Failed to execute platformToBackground", e);
     }
   }
 
@@ -423,12 +422,22 @@ class InteractionManagerClass extends React.Component<Props, State> {
 
     const action = backToTopAction();
 
-    switch (displayState) {
+    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_BACK") {
+        if (action === "PLATFORM_TO_BACKGROUND") {
           log_info(action);
 
-          this.platformBack();
+          this.platformToBackground();
         }
 
         if (action === "GO_HOME") {
@@ -477,11 +486,11 @@ class InteractionManagerClass extends React.Component<Props, State> {
         } else if (navigator.canGoBack()) {
           navigator.goBack();
         } else if (this.isHomeScreen()) {
-          this.platformBack();
+          this.platformToBackground();
         } else if (navigator.currentRoute.includes("hook")) {
           // If code reaches this block navigator cant go back, it is not home,
           // and this is a login plugin that was pushed on top of the home
-          // Treat it like a home screen and run platformBack()
+          // Treat it like a home screen and run platformToBackground()
           const entryData = navigator?.data?.entry;
           const isHookInHomescreen = entryData?.payload?.home;
 
@@ -491,7 +500,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
               : entryData?.hookPlugin?.module?.isFlowBlocker;
 
           if (isHookInHomescreen && isHookFlowBlocker) {
-            this.platformBack();
+            this.platformToBackground();
           } else {
             navigator.goBack(false, true);
           }
@@ -523,8 +532,42 @@ class InteractionManagerClass extends React.Component<Props, State> {
     this.onBackPress(event);
   }
 
+  // True only while the active (primary) player renders its own controls.
+  isNativePlayerControlsEnabled = () =>
+    !!playerManager.getInstanceController?.()?.supportsNativeControls?.();
+
+  // PLAYER/HUD are set by QuickBrick's TV transport controls, which are not
+  // mounted when the player renders native controls — the state would stay
+  // DEFAULT and keys would reach the screen behind the player (Enter re-opens it).
+  // The play-next overlay is the exception: it is QuickBrick UI, so the real
+  // state applies and Enter presses the focused overlay button.
+  getEffectiveDisplayState = () =>
+    this.isNativePlayerControlsEnabled() && !this.isPlayNextOverlayVisible()
+      ? DISPLAY_STATES.PLAYER
+      : this.props.displayState;
+
+  // True when the player closed something of its own instead.
+  playerConsumesBack = () =>
+    !!playerManager.getInstanceController?.()?.handlesBackKey?.();
+
+  // While the play-next overlay is up it owns the remote: its buttons are
+  // QuickBrick focusables, so the keys must not go to the player's own controls.
+  isPlayNextOverlayVisible = () =>
+    !!this.props.navigator?.getPlayNextOverlay?.();
+
+  shouldDeferPlaybackNavigationToNativeControls = (event: KeyboardEvent) => {
+    return (
+      this.isNativePlayerControlsEnabled() &&
+      !this.isPlayNextOverlayVisible() &&
+      (keyCode(event).matchesAny(...ARROW_KEYS) ||
+        keyCode(event).matches(KEYS.Enter) ||
+        (__DEV__ && keyCode(event).matches(KEYS.X)))
+    );
+  };
+
   onKeyDown(event) {
-    const { displayState, setDisplayState, navigator, xray } = this.props;
+    const { setDisplayState, navigator, xray } = this.props;
+    const displayState = this.getEffectiveDisplayState();
     const { isDialogVisible } = confirmationDialogStore.getState();
     const { isKeyboardVisible } = this.state;
 
@@ -542,6 +585,12 @@ class InteractionManagerClass extends React.Component<Props, State> {
     }
 
     if (keyCode(event).matchesAny(KEYS.Back, KEYS.Escape, KEYS.EscapeDevice)) {
+      // A player with native controls can have something of its own open that
+      // Back should close first (e.g. an ad click-through overlay).
+      if (this.isNativePlayerControlsEnabled() && this.playerConsumesBack()) {
+        return;
+      }
+
       this.onBackPress(event);
 
       return;
@@ -554,6 +603,21 @@ 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,
+      });
+
+      return;
+    }
+
     /**
      When the player is displayed, we listen to Native Play / Pause / Stop
      buttons. Any other key press will display the transport controls
@@ -570,7 +634,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
         const { playing } = playerManager.getState() || {};
 
         if (!playing) {
-          return playerManager.togglePlayPause();
+          return playerManager.getInstanceController()?.togglePlayPause();
         }
       }
 
@@ -640,7 +704,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
         return;
       }
 
-      this.platformBack();
+      this.platformToBackground();
     }
 
     if (keyCode(event).matchesAny(...ARROW_KEYS)) {

package/App/Layout/index.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { createPortal } from "react-dom";
 
-import { Background } from "@applicaster/zapp-react-dom-ui-components/Components/Background";
+import { BackgroundImage } from "@applicaster/zapp-react-native-ui-components/Components/BackgroundImage";
+
 import { ConfirmDialog } from "@applicaster/zapp-react-dom-ui-components/Components/ConfirmDialog";
 import { NavWrapper } from "@applicaster/zapp-react-dom-ui-components/Components/NavWrapper";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
@@ -25,7 +26,7 @@ export function Layout({ children }: Props) {
   return (
     <>
       <LayoutComponent
-        Components={{ Background, NavBar: NavWrapper }}
+        Components={{ Background: BackgroundImage, NavBar: NavWrapper }}
         ComponentsExtraProps={ComponentsExtraProps}
       >
         {children}

package/App/Loader/utils/const.js

@@ -64,6 +64,10 @@ export const PLATFORMS = {
   android: "Android",
   mobile: "Mobile",
   vizio: "VIZIO",
+  vidaa: "VIDAA",
+  // VIDAA U3 and earlier (2019 and earlier) carry no "VIDAA" token at all —
+  // "Hisense" is the only signal on those models. See isVidaaPlatform().
+  hisense: "Hisense",
   smartcast: "SmartCast",
   conjure: "Conjure",
 };
@@ -74,14 +78,42 @@ export const PLATFORMS = {
 
 /**
  * Simple way of identifying if we have access to the tizen APIs
+ *
+ * NOTE: evaluated once, when this module is first imported. The native API
+ * scripts are injected asynchronously by loader.js, so this can be `false`
+ * simply because the bundle executed first. Prefer `hasTizenAPIs()` for
+ * runtime checks; this constant is retained for the DEFAULT values below,
+ * which are themselves import-time fallbacks.
  */
 export const hasTizen = typeof window?.tizen !== "undefined";
 
 /**
  * Simple way of identifying if we have access to the webOS
+ *
+ * NOTE: same import-time caveat as `hasTizen` — prefer `hasWebOSAPIs()`.
  */
 export const hasWebOS = typeof window?.webOS !== "undefined";
 
+/**
+ * Checks, at call time, whether the Tizen APIs are available.
+ *
+ * loader.js injects `$WEBAPIS/webapis/webapis.js` via a dynamically-created
+ * <script>, which is async by default, so `window.tizen` may not exist yet when
+ * this module is imported. Checking on each call avoids latching a stale
+ * `false` for the lifetime of the app.
+ *
+ * @returns {boolean} True if the Tizen APIs are available.
+ */
+export const hasTizenAPIs = () => typeof window?.tizen !== "undefined";
+
+/**
+ * Checks, at call time, whether the webOS APIs are available.
+ * See `hasTizenAPIs()` for why this is a function rather than a constant.
+ *
+ * @returns {boolean} True if the webOS APIs are available.
+ */
+export const hasWebOSAPIs = () => typeof window?.webOS !== "undefined";
+
 /**
  * Simple way of identifying if we are on a web based platform
  */

package/App/Loader/utils/platform.js

@@ -3,17 +3,11 @@
 /* eslint-disable no-console */
 
 import { Platform } from "react-native";
-import {
-  DEFAULT,
-  desiredKeysMap,
-  hasTizen,
-  hasWebOS,
-  PLATFORMS,
-} from "./const";
+import { desiredKeysMap, hasTizenAPIs, hasWebOSAPIs, PLATFORMS } from "./const";
 
 /**
  * @typedef {"tv" | "web" | "other"} DeviceType
- * @typedef {"samsung_tv" | "lg_tv" | unknown} CustomPlatformTypes
+ * @typedef {"samsung_tv" | "lg_tv" | "vidaa" | unknown} CustomPlatformTypes
  */
 
 /**
@@ -27,7 +21,7 @@ export const getUserAgent = () =>
  * Checks if the device is HD (1280 width).
  * @returns {boolean} True if the device is HD, false otherwise.
  */
-export const isHD = () => window.innerWidth === 1280;
+export const isHD = () => window?.innerWidth === 1280;
 
 /**
  * Checks if the platform is LG.
@@ -40,7 +34,7 @@ export const isLgPlatform = () => {
     return false;
   }
 
-  return hasWebOS || userAgent.includes(PLATFORMS.webos);
+  return hasWebOSAPIs() || userAgent.includes(PLATFORMS.webos);
 };
 
 /**
@@ -55,7 +49,7 @@ export const isSamsungPlatform = () => {
   }
 
   return (
-    hasTizen ||
+    hasTizenAPIs() ||
     userAgent.includes(PLATFORMS.samsung) ||
     userAgent.includes(PLATFORMS.tizen)
   );
@@ -68,6 +62,10 @@ export const isSamsungPlatform = () => {
 export const isVizioPlatform = () => {
   const userAgent = getUserAgent();
 
+  if (!userAgent) {
+    return false;
+  }
+
   return (
     userAgent.includes(PLATFORMS.vizio) ||
     userAgent.includes(PLATFORMS.smartcast) ||
@@ -75,17 +73,241 @@ export const isVizioPlatform = () => {
   );
 };
 
+/**
+ * Checks if the platform is VIDAA.
+ *
+ * Two tokens are needed because the userAgent format changed with VIDAA U4:
+ * - 2020 and later (U4/U5/U6/U7): always carries a "VIDAA" token, e.g.
+ *   `Model/Hisense-MT9602 VIDAA/5.0(Hisense;SmartTV;50A53FSV;...)`
+ * - 2019 and earlier (U3 and prior): carries NO "VIDAA" token at all — the only
+ *   signal is "Hisense", e.g. `Model/Hisense-MSD6586 (Hisense;HE50N3050UWTS;...)`
+ *
+ * Matching "VIDAA" alone silently misses every U3-and-earlier device, which the
+ * VIDAA JS SDK still supports (getDeviceID/getBrand/config are all U3U4U5+).
+ *
+ * Caveat: "Hisense" also appears in the userAgent of Hisense-branded Android TV
+ * models, which are not VIDAA. That is tolerable here because this is only
+ * consulted on a VIDAA-targeted build (see getDeviceType), but it is why the
+ * vendor docs warn against using "Hisense" as a general-purpose signal. A
+ * stricter check would test for the native `Hisense_GetDeviceID` global, which
+ * VIDAA exposes from U3 onwards and Android TV does not.
+ *
+ * @see https://partner-doc.vidaa.com/vdocs/development/open-capacity.html
+ * @returns {boolean} True if the platform is VIDAA, false otherwise.
+ */
+export const isVidaaPlatform = () => {
+  const userAgent = getUserAgent();
+
+  if (!userAgent) {
+    return false;
+  }
+
+  return (
+    userAgent.includes(PLATFORMS.vidaa) || userAgent.includes(PLATFORMS.hisense)
+  );
+};
+
 /**
  * Checks if the Vizio APIs are available.
  * @returns {boolean} True if the Vizio APIs are available, false otherwise.
  */
 export const hasVizioAPIs = () => {
   return (
-    typeof window.VIZIO !== "undefined" &&
+    typeof window?.VIZIO !== "undefined" &&
     window?.applicaster?.vizioLibraryDidLoad
   );
 };
 
+/**
+ * Checks if the VIDAA JS SDK has finished loading.
+ * @returns {boolean} True if the `vidaatv` object is available.
+ */
+export const hasVidaaAPIs = () => typeof window?.vidaatv !== "undefined";
+
+/** How long to wait for a native device API callback before giving up, in ms. */
+const NATIVE_API_TIMEOUT_MS = 3000;
+
+/**
+ * Wraps a promise so that it *always* settles, and always resolves.
+ *
+ * The native device APIs are callback-based and wrapped in promises that can
+ * fail in two ways this guards against:
+ *
+ * 1. **Rejection.** Device info and connection info are requested together with
+ *    `Promise.all`, which rejects as a whole on the first failure — so a routine
+ *    "no network" error from the connection lookup would discard the model and
+ *    OS version that were retrieved successfully.
+ * 2. **Never settling.** `webOS.deviceInfo(cb)`, `tizen.systeminfo(cb)` and
+ *    `VIZIO.getFirmwareVersion(cb)` resolve only from their callbacks. If a
+ *    callback never fires the promise hangs forever, and because `getDeviceData`
+ *    is awaited during startup, app boot hangs with it.
+ *
+ * @param {Promise} promise The promise to guard.
+ * @param {object} options
+ * @param {string} options.label Name used in warnings.
+ * @param {number} [options.timeout=NATIVE_API_TIMEOUT_MS] Milliseconds to wait.
+ * @param {*} [options.fallback=null] Value to resolve with on failure/timeout.
+ * @returns {Promise<*>} Resolves with the value, or `fallback`.
+ */
+const settleWithin = (
+  promise,
+  { label, timeout = NATIVE_API_TIMEOUT_MS, fallback = null } = {}
+) => {
+  return new Promise((resolve) => {
+    let settled = false;
+
+    const finish = (value) => {
+      if (settled) {
+        return;
+      }
+
+      settled = true;
+      clearTimeout(timeoutId);
+      resolve(value);
+    };
+
+    const timeoutId = setTimeout(() => {
+      console.warn(`${label}: timed out after ${timeout}ms`);
+      finish(fallback);
+    }, timeout);
+
+    Promise.resolve(promise)
+      .then(finish)
+      .catch((error) => {
+        console.warn(`${label}: failed`, error);
+        finish(fallback);
+      });
+  });
+};
+
+/** How long to wait for the VIDAA SDK before giving up, in ms. */
+const VIDAA_SDK_TIMEOUT_MS = 3000;
+
+/** How often to re-check for the VIDAA SDK while waiting, in ms. */
+const VIDAA_SDK_POLL_MS = 50;
+
+/**
+ * The value the VIDAA SDK returns for APIs the current platform version does
+ * not implement, per the vendor docs ("For features Not Supported by the
+ * platform, the interface returns `Not Supported`"). Treated as absent.
+ */
+const VIDAA_NOT_SUPPORTED = "Not Supported";
+
+/**
+ * Waits for the VIDAA JS SDK to become available on `window`.
+ *
+ * The SDK is injected by loader.js as a dynamically-created <script>, which is
+ * async by default and fetched from the VIDAA CDN. The app bundle is served
+ * locally and can therefore boot before that request completes, so reading
+ * `window.vidaatv` directly at startup is a race. This resolves as soon as the
+ * SDK appears, or with `null` once the timeout elapses.
+ *
+ * Resolves rather than rejects on timeout so a missing SDK degrades to partial
+ * device data instead of failing the whole `getDeviceData` call.
+ *
+ * @param {number} [timeout=VIDAA_SDK_TIMEOUT_MS] Milliseconds to wait.
+ * @returns {Promise<object|null>} The `vidaatv` object, or null if it never arrived.
+ */
+export const waitForVidaaAPIs = (timeout = VIDAA_SDK_TIMEOUT_MS) => {
+  return new Promise((resolve) => {
+    if (hasVidaaAPIs()) {
+      resolve(window.vidaatv);
+
+      return;
+    }
+
+    const startedAt = Date.now();
+
+    const intervalId = setInterval(() => {
+      if (hasVidaaAPIs()) {
+        clearInterval(intervalId);
+        resolve(window.vidaatv);
+
+        return;
+      }
+
+      if (Date.now() - startedAt >= timeout) {
+        clearInterval(intervalId);
+
+        console.warn(
+          `waitForVidaaAPIs: VIDAA SDK did not load within ${timeout}ms`
+        );
+
+        resolve(null);
+      }
+    }, VIDAA_SDK_POLL_MS);
+  });
+};
+
+/**
+ * Reads a single value from the VIDAA SDK, tolerating APIs that the current
+ * platform version does not implement.
+ *
+ * Every accessor is optional: older platforms omit the method entirely, and
+ * supported-but-unavailable values come back as the string "Not Supported".
+ *
+ * @param {object} sdk The `vidaatv` object.
+ * @param {string} method The accessor name, e.g. "getModelName".
+ * @returns {string|null} The value, or null when unavailable.
+ */
+const readVidaaValue = (sdk, method) => {
+  try {
+    if (typeof sdk?.[method] !== "function") {
+      return null;
+    }
+
+    const value = sdk[method]();
+
+    return value && value !== VIDAA_NOT_SUPPORTED ? value : null;
+  } catch (error) {
+    console.warn(`readVidaaValue: ${method} threw`, error);
+
+    return null;
+  }
+};
+
+/**
+ * Gets device info from the VIDAA JS SDK.
+ *
+ * Field availability varies by VIDAA version, so each value is read
+ * defensively and omitted when unavailable:
+ * - getBrand / getModelName / getFirmWareVersion / getCountryCode are U3+
+ * - getOSVersion / getNetType are U4+, hence the firmware fallback for
+ *   osVersion so pre-2020 models still report something
+ *
+ * @returns {Promise<object|null>} Device info, or null if the SDK never loaded.
+ */
+export const getVidaaInfo = async () => {
+  const sdk = await waitForVidaaAPIs();
+
+  if (!sdk) {
+    return null;
+  }
+
+  const modelName = readVidaaValue(sdk, "getModelName");
+  const brand = readVidaaValue(sdk, "getBrand");
+  const networkType = readVidaaValue(sdk, "getNetType");
+  const countryCode = readVidaaValue(sdk, "getCountryCode");
+
+  // getOSVersion is U4+; fall back to the firmware version, which is U3+.
+  const osVersion =
+    readVidaaValue(sdk, "getOSVersion") ||
+    readVidaaValue(sdk, "getFirmWareVersion");
+
+  // Human-readable name for the `deviceName` context key, e.g.
+  // "Hisense 50A53FSV". Falls back to whichever half is available.
+  const deviceName = [brand, modelName].filter(Boolean).join(" ");
+
+  return {
+    ...(modelName ? { modelName } : {}),
+    ...(brand ? { deviceMake: brand } : {}),
+    ...(deviceName ? { deviceName } : {}),
+    ...(osVersion ? { osVersion } : {}),
+    ...(networkType ? { networkType } : {}),
+    ...(countryCode ? { countryCode } : {}),
+  };
+};
+
 /**
  * Determines the device type based on the platform.
  * @returns {DeviceType} The device type ("tv", "web", or "other").
@@ -99,6 +321,10 @@ export const getDeviceType = () => {
       return isSamsungPlatform() ? "tv" : "web";
     case "lg_tv":
       return isLgPlatform() ? "tv" : "web";
+    case "vizio":
+      return isVizioPlatform() ? "tv" : "web";
+    case "vidaa":
+      return isVidaaPlatform() ? "tv" : "web";
     default:
       return "other";
   }
@@ -151,7 +377,7 @@ export const getWebOSConnectionInfo = () => {
  */
 export const getTizenConnectionInfo = () => {
   return new Promise((resolve, reject) => {
-    if (!isSamsungPlatform) {
+    if (!isSamsungPlatform()) {
       resolve(null);
 
       return;
@@ -175,6 +401,36 @@ export const getTizenConnectionInfo = () => {
   });
 };
 
+/**
+ * Retrieves the firmware version from the Vizio companion library.
+ *
+ * `VIZIO.getFirmwareVersion` is callback-based. It was previously called
+ * without being awaited, assigning onto `deviceData` after `getDeviceData` had
+ * already returned — by which point the caller had spread the object into
+ * session storage, so the value was silently dropped whenever the callback did
+ * not fire synchronously. Wrapping it in a promise lets it be awaited like
+ * every other platform's device info.
+ *
+ * @returns {Promise<string|null>} The firmware version, or null if unavailable.
+ */
+export const getVizioFirmwareVersion = () => {
+  return new Promise((resolve, reject) => {
+    if (!hasVizioAPIs()) {
+      resolve(null);
+
+      return;
+    }
+
+    try {
+      window.VIZIO.getFirmwareVersion((firmwareVersion) => {
+        resolve(firmwareVersion);
+      });
+    } catch (error) {
+      reject(error);
+    }
+  });
+};
+
 /**
  * Gets all of the webOS device info available to us via webOS.deviceInfo
  */
@@ -190,7 +446,12 @@ export const getWebOSInfo = () => {
       if (info) {
         resolve({
           ...info,
-          name: `${info.modelName} - ${info.version}`,
+          // `deviceName` is a persisted context key; the previous `name` was
+          // absent from desiredKeysMap, so it was computed and dropped. Format
+          // is "<make> <model>", matching Samsung/Vizio/VIDAA. The old string
+          // was `${info.modelName} - ${info.version}`, which omitted the make
+          // and embedded a version already reported as osVersion.
+          deviceName: `LG ${info.modelName}`,
           osVersion: info.sdkVersion, // info.sdkVersion is the OS version, info.version is software version
         });
       } else {
@@ -217,16 +478,22 @@ export const getTizenInfo = () => {
         "http://tizen.org/system/model_name"
       );
 
-      const name = `${DEFAULT.make} ${modelName}`;
+      // Previously `${DEFAULT.make} ${modelName}` — DEFAULT has no `make` key
+      // (it is `deviceMake`), so this interpolated the literal string
+      // "undefined". It went unnoticed because the value was named `name`,
+      // which is absent from desiredKeysMap and therefore never persisted.
+      const deviceName = `Samsung ${modelName}`;
 
       const osVersion = tizen.systeminfo.getCapability(
         "http://tizen.org/feature/platform.version"
       );
 
-      if (modelName && name && osVersion) {
+      // `deviceName` is derived from modelName, so checking it here would be
+      // redundant — it is truthy whenever modelName is.
+      if (modelName && osVersion) {
         resolve({
           modelName,
-          name,
+          deviceName,
           osVersion,
         });
       } else {
@@ -265,9 +532,13 @@ export const getDeviceData = async () => {
     };
 
     if (isLgPlatform()) {
+      // Guarded individually so a failure in one lookup does not discard the
+      // other — see settleWithin.
       const [webOSInfo, webOSConnectionInfo] = await Promise.all([
-        getWebOSInfo(),
-        getWebOSConnectionInfo(),
+        settleWithin(getWebOSInfo(), { label: "getWebOSInfo" }),
+        settleWithin(getWebOSConnectionInfo(), {
+          label: "getWebOSConnectionInfo",
+        }),
       ]);
 
       deviceData = {
@@ -280,8 +551,10 @@ export const getDeviceData = async () => {
       };
     } else if (isSamsungPlatform()) {
       const [tizenInfo, tizenConnectionInfo] = await Promise.all([
-        getTizenInfo(),
-        getTizenConnectionInfo(),
+        settleWithin(getTizenInfo(), { label: "getTizenInfo" }),
+        settleWithin(getTizenConnectionInfo(), {
+          label: "getTizenConnectionInfo",
+        }),
       ]);
 
       deviceData = {
@@ -297,17 +570,39 @@ export const getDeviceData = async () => {
         ...deviceData,
         platform: "vizio",
         deviceMake: "Vizio",
-        deviceType: "tv",
+        deviceType: getDeviceType(),
         ...deviceDimensions,
       };
 
       if (hasVizioAPIs()) {
-        window.VIZIO.getFirmwareVersion(function (firmwareVersion) {
-          deviceData.osVersion = firmwareVersion;
+        const firmwareVersion = await settleWithin(getVizioFirmwareVersion(), {
+          label: "getVizioFirmwareVersion",
         });
 
+        if (firmwareVersion) {
+          deviceData.osVersion = firmwareVersion;
+        }
+
         deviceData.deviceModel = window.VIZIO.deviceModel;
+
+        if (deviceData.deviceModel) {
+          deviceData.deviceName = `Vizio ${deviceData.deviceModel}`;
+        }
       }
+    } else if (isVidaaPlatform()) {
+      // Waits for the VIDAA SDK, which loader.js loads asynchronously from the
+      // VIDAA CDN. Resolves to null on timeout, leaving the static fields below.
+      const vidaaInfo = await getVidaaInfo();
+
+      deviceData = {
+        ...vidaaInfo,
+        platform: "vidaa",
+        // Brand is read from the SDK rather than hardcoded: VIDAA ships on
+        // OEM sets beyond Hisense, so getBrand() is the accurate source.
+        deviceMake: vidaaInfo?.deviceMake || "Hisense",
+        deviceType: getDeviceType(),
+        ...deviceDimensions,
+      };
     }
 
     return deviceData;
@@ -318,6 +613,10 @@ export const getDeviceData = async () => {
       error
     );
 
-    return null;
+    // Returns an empty object rather than null: the caller
+    // (loadSessionStorageData) does `delete deviceData.sdkVersion` on the
+    // result, which throws a TypeError on null and turns a handled error into
+    // an unhandled one during startup.
+    return {};
   }
 };

package/Polyfills/AppLoaderBridge/utils/enums.ts

@@ -9,4 +9,5 @@ export enum STORE_PLATFORM {
   lg = "lg_content_store",
   samsung = "samsung_app_store",
   vizio = "vizio_app_store",
+  vidaa = "vidaa_app_store",
 }

package/Polyfills/Storage/__tests__/StorageMocks.js

@@ -26,7 +26,7 @@ export function StorageMock() {
 
     delete this[key];
 
-    return true;
+    // Return undefined like the real API; a truthy return would re-mask the bug.
   };
 
   storage.getItem = (key) => {

package/Polyfills/Storage/__tests__/contextResolverBridge.test.js

@@ -0,0 +1,104 @@
+import { getContextResolverBridge } from "../";
+
+function createStorageMock(initial = {}) {
+  const data = { ...initial };
+
+  return {
+    getItem: (key) => (key in data ? data[key] : null),
+    setItem: (key, value) => {
+      data[key] = value;
+    },
+  };
+}
+
+describe("ContextResolverBridge polyfill", () => {
+  let bridge;
+
+  beforeEach(() => {
+    global.window = {
+      sessionStorage: createStorageMock(),
+      localStorage: createStorageMock(),
+    };
+
+    bridge = getContextResolverBridge();
+  });
+
+  it("resolves a key from session storage using the web namespace separator", () => {
+    // the namespace itself contains dots, so the key must be split on the last dot
+    window.sessionStorage.setItem("applicaster.v2_::_appVersion", "1.0.0");
+
+    const result = bridge.resolveContextKeys({
+      "applicaster.v2.appVersion": false,
+    });
+
+    expect(result).toEqual({ "applicaster.v2.appVersion": "1.0.0" });
+  });
+
+  it("falls back to local storage when the key is missing in session storage", () => {
+    window.localStorage.setItem("applicaster.v2_::_appVersion", "1.0.0");
+
+    const result = bridge.resolveContextKeys({
+      "applicaster.v2.appVersion": false,
+    });
+
+    expect(result).toEqual({ "applicaster.v2.appVersion": "1.0.0" });
+  });
+
+  it("prefers the session storage value when the key exists in both", () => {
+    window.sessionStorage.setItem("applicaster.v2_::_appVersion", "session");
+    window.localStorage.setItem("applicaster.v2_::_appVersion", "local");
+
+    const result = bridge.resolveContextKeys({
+      "applicaster.v2.appVersion": false,
+    });
+
+    expect(result).toEqual({ "applicaster.v2.appVersion": "session" });
+  });
+
+  it("returns null for keys that are missing from both storages", () => {
+    const result = bridge.resolveContextKeys({
+      "applicaster.v2.missing": false,
+    });
+
+    expect(result).toEqual({ "applicaster.v2.missing": null });
+  });
+
+  it("JSON-parses stored values just like the async storage path", () => {
+    window.sessionStorage.setItem(
+      "applicaster.v2_::_profile",
+      JSON.stringify({ name: "Ada" })
+    );
+
+    window.localStorage.setItem("applicaster.v2_::_count", "42");
+
+    const result = bridge.resolveContextKeys({
+      "applicaster.v2.profile": false,
+      "applicaster.v2.count": true,
+    });
+
+    expect(result).toEqual({
+      "applicaster.v2.profile": { name: "Ada" },
+      "applicaster.v2.count": 42,
+    });
+  });
+
+  it("resolves multiple keys synchronously in a single call", () => {
+    window.sessionStorage.setItem("applicaster.v2_::_a", "valueA");
+    window.localStorage.setItem("applicaster.v2_::_b", "valueB");
+
+    const result = bridge.resolveContextKeys({
+      "applicaster.v2.a": false,
+      "applicaster.v2.b": false,
+      "applicaster.v2.c": false,
+    });
+
+    // returned object is not a promise - reads happen synchronously
+    expect(result).not.toBeInstanceOf(Promise);
+
+    expect(result).toEqual({
+      "applicaster.v2.a": "valueA",
+      "applicaster.v2.b": "valueB",
+      "applicaster.v2.c": null,
+    });
+  });
+});

package/Polyfills/Storage/index.js

@@ -155,7 +155,11 @@ export function getStorageModule(type) {
   function removeItem(key, namespace = DEFAULT_NAMESPACE) {
     const keyName = applyNamespaceToKeyName(key, namespace);
 
-    return tryAndResolve(() => Storage.callMethod("removeItem", keyName));
+    return tryAndResolve(() => {
+      Storage.callMethod("removeItem", keyName);
+
+      return true;
+    });
   }
 
   /**
@@ -200,3 +204,74 @@ export function getStorageModule(type) {
     removeItem,
   };
 }
+
+const STORAGE_READ_ORDER = ["sessionStorage", "localStorage"];
+
+/**
+ * Splits a normalized context key ("<namespace>.<key>") back into its
+ * namespace and key parts. Mirrors getNamespaceAndKey in the context keys
+ * manager: the key is everything after the last dot, since the namespace
+ * itself may contain dots (e.g. "applicaster.v2").
+ * @param {String} namespacedKey
+ * @returns {{ namespace: String, key: String }}
+ */
+function splitNamespacedKey(namespacedKey) {
+  const lastDotIndex = namespacedKey.lastIndexOf(".");
+
+  if (lastDotIndex === -1) {
+    return { namespace: DEFAULT_NAMESPACE, key: namespacedKey };
+  }
+
+  return {
+    namespace: namespacedKey.slice(0, lastDotIndex),
+    key: namespacedKey.slice(lastDotIndex + 1),
+  };
+}
+
+/**
+ * Synchronously reads a single context key from session storage, then local
+ * storage (matching the native ContextResolverBridge resolution order), and
+ * returns the parsed value, or null when the key is absent from both.
+ * @param {String} namespacedKey
+ * @returns {Any|null}
+ */
+function resolveContextKey(namespacedKey) {
+  const { namespace, key } = splitNamespacedKey(namespacedKey);
+  const storageKey = applyNamespaceToKeyName(key, namespace);
+
+  for (const type of STORAGE_READ_ORDER) {
+    const storage = window[type];
+    const value = storage ? storage.getItem(storageKey) : null;
+
+    if (value != null) {
+      return parseJsonIfNeeded(value);
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Web polyfill for the native NativeModules.ContextResolverBridge module.
+ * Unlike the per-key async storage path, it resolves every requested key in a
+ * single synchronous pass over window.sessionStorage / window.localStorage.
+ * @returns {Object} bridge
+ * @returns {Function} bridge.resolveContextKeys: resolves a batch of keys
+ */
+export function getContextResolverBridge() {
+  return {
+    /**
+     * @param {Object} keys map of normalized key -> required flag
+     * @returns {Object} map of normalized key -> resolved value (or null)
+     */
+    resolveContextKeys(keys) {
+      const result = {};
+
+      for (const namespacedKey of Object.keys(keys || {})) {
+        result[namespacedKey] = resolveContextKey(namespacedKey);
+      }
+
+      return result;
+    },
+  };
+}

package/Polyfills/index.js

@@ -1,4 +1,4 @@
-import { getStorageModule } from "./Storage";
+import { getStorageModule, getContextResolverBridge } from "./Storage";
 import { DeviceEventEmitter } from "./DeviceEventEmitter";
 import { isSamsungPlatform, isLgPlatform } from "../App/Loader/utils/platform";
 
@@ -15,6 +15,7 @@ import "@webcomponents/webcomponentsjs";
 const PLATFORM_KEYS = {
   samsung: "samsung_tv",
   lg: "lg_tv",
+  vidaa: "vidaa",
   web: "web",
 };
 
@@ -23,6 +24,7 @@ const PLATFORM_KEYS = {
 export function registerNativeModulesPolyfills(NativeModules) {
   NativeModules.LocalStorage = getStorageModule("localStorage");
   NativeModules.SessionStorage = getStorageModule("sessionStorage");
+  NativeModules.ContextResolverBridge = getContextResolverBridge();
   NativeModules.AnalyticsBridge = require("./AnalyticsBridge").AnalyticsBridge;
   NativeModules.AppLoaderBridge = require("./AppLoaderBridge").AppLoaderBridge;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "16.0.0-rc.1",
+  "version": "16.0.0-rc.100",
   "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.1",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.1",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.1",
-    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.1",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.1",
+    "@applicaster/zapp-react-dom-ui-components": "16.0.0-rc.100",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.100",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.100",
+    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.100",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.100",
     "abortcontroller-polyfill": "^1.7.5",
     "typeface-montserrat": "^0.0.54",
     "video.js": "7.14.3",