@applicaster/zapp-react-dom-app 14.0.0-alpha.3471443312 → 14.0.0-alpha.3514550494

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

@@ -0,0 +1,149 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { withBackToTopActionHOC } from "../withBackToTopAction";
+
+// Mock focusManager and hook
+jest.mock("@applicaster/zapp-react-native-utils/appUtils", () => ({
+  focusManager: {
+    isFocusOnMenu: jest.fn(),
+    isFocusOnContent: jest.fn(),
+  },
+}));
+
+jest.mock("../hooks", () => ({
+  useCurrentScreenIsHome: jest.fn(),
+  useCurrentScreenIsRoot: jest.fn(),
+  useCurrentScreenIsTabs: jest.fn(),
+}));
+
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import {
+  useCurrentScreenIsHome,
+  useCurrentScreenIsRoot,
+  useCurrentScreenIsTabs,
+} from "../hooks";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useNavigation: jest.fn(),
+}));
+
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+describe("withBackToTopActionHOC", () => {
+  let receivedProps: any;
+
+  const BaseComponent = (props) => {
+    receivedProps = props; // capture injected props
+
+    return <></>;
+  };
+
+  const Wrapped = withBackToTopActionHOC(BaseComponent);
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("returns PLATFORM_BACK when on root screen, focus on menu, and is home", () => {
+    expect.assertions(1);
+
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
+    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(true);
+    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
+
+    (useNavigation as jest.Mock).mockReturnValue({
+      getNestedEntry: () => undefined,
+    });
+
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
+    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(false);
+
+    render(<Wrapped />);
+
+    expect(receivedProps.backToTopAction()).toEqual({
+      action: "PLATFORM_BACK",
+    });
+  });
+
+  it("returns GO_HOME when on root screen, focus on menu, and not home", () => {
+    expect.assertions(1);
+
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
+    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
+
+    (useNavigation as jest.Mock).mockReturnValue({
+      getNestedEntry: () => undefined,
+    });
+
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
+    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(false);
+
+    render(<Wrapped />);
+    expect(receivedProps.backToTopAction()).toEqual({ action: "GO_HOME" });
+  });
+
+  it("returns FOCUS_TOP_NAVIGATION when on root screen and focus on content without tabs_screen", () => {
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
+    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
+
+    (useNavigation as jest.Mock).mockReturnValue({
+      getNestedEntry: () => "selectedEntry",
+    });
+
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(false);
+    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(true);
+
+    render(<Wrapped />);
+
+    expect(receivedProps.backToTopAction()).toEqual({
+      action: "FOCUS_TOP_NAVIGATION",
+      payload: {
+        isTabsScreen: false,
+        selectedEntry: "selectedEntry",
+      },
+    });
+  });
+
+  it("returns FOCUS_TOP_NAVIGATION when on root screen and focus on content with tabs_screen", () => {
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(true);
+    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(true);
+
+    (useNavigation as jest.Mock).mockReturnValue({
+      getNestedEntry: () => "selectedEntry",
+    });
+
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(false);
+    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(true);
+
+    render(<Wrapped />);
+
+    expect(receivedProps.backToTopAction()).toEqual({
+      action: "FOCUS_TOP_NAVIGATION",
+      payload: {
+        isTabsScreen: true,
+        selectedEntry: "selectedEntry",
+      },
+    });
+  });
+
+  it("returns GO_BACK in default case", () => {
+    expect.assertions(1);
+
+    (useCurrentScreenIsRoot as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsHome as jest.Mock).mockReturnValue(false);
+    (useCurrentScreenIsTabs as jest.Mock).mockReturnValue(false);
+
+    (useNavigation as jest.Mock).mockReturnValue({
+      getNestedEntry: () => undefined,
+    });
+
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(false);
+    (focusManager.isFocusOnContent as jest.Mock).mockReturnValue(false);
+
+    render(<Wrapped />);
+    expect(receivedProps.backToTopAction()).toEqual({ action: "GO_BACK" });
+  });
+});

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

@@ -0,0 +1,34 @@
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import {
+  useHomeRiver,
+  useRivers,
+} from "@applicaster/zapp-react-native-utils/reactHooks/state";
+import { last } from "@applicaster/zapp-react-native-utils/utils";
+
+export const useCurrentScreenIsHome = (): boolean => {
+  const navigator = useNavigation();
+  const homeRiver = useHomeRiver();
+
+  const homePath = `/river/${homeRiver.id}`;
+
+  return homePath === navigator.currentRoute;
+};
+
+export const useCurrentScreenIsRoot = (): boolean => {
+  const { mainStack = [] } = useNavigation();
+
+  // root screen is the bottom(first pushed, deepest) element of the stack
+  return mainStack.length <= 1;
+};
+
+export const useCurrentScreenIsTabs = (): boolean => {
+  const navigator = useNavigation();
+
+  const riverId = last(navigator.currentRoute.split("/"));
+
+  const rivers = useRivers();
+
+  const river = rivers[riverId];
+
+  return river?.type === "tabs_screen";
+};

package/App/InteractionManager/hoc/index.ts

@@ -0,0 +1,4 @@
+export {
+  withBackToTopActionHOC,
+  type BackToTopAction,
+} from "./withBackToTopAction";

package/App/InteractionManager/hoc/withBackToTopAction.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import {
+  useCurrentScreenIsHome,
+  useCurrentScreenIsRoot,
+  useCurrentScreenIsTabs,
+} from "./hooks";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+export type BACK_TO_TOP_ACTION = {
+  action: "PLATFORM_BACK" | "GO_HOME" | "FOCUS_TOP_NAVIGATION" | "GO_BACK";
+  payload?: { isTabsScreen: boolean; selectedEntry: ZappEntry };
+};
+
+export type BackToTopAction = () => BACK_TO_TOP_ACTION;
+
+export function withBackToTopActionHOC(Component) {
+  return function WrappedComponent(props) {
+    const isHome = useCurrentScreenIsHome();
+    const isRoot = useCurrentScreenIsRoot();
+    const isTabsScreen = useCurrentScreenIsTabs();
+
+    const navigator = useNavigation();
+    const selectedEntry = navigator.getNestedEntry();
+
+    const backToTopAction = React.useCallback((): BACK_TO_TOP_ACTION => {
+      if (isRoot && focusManager.isFocusOnMenu() && isHome) {
+        return { action: "PLATFORM_BACK" };
+      }
+
+      if (isRoot && focusManager.isFocusOnMenu() && !isHome) {
+        return { action: "GO_HOME" };
+      }
+
+      if (isRoot && focusManager.isFocusOnContent()) {
+        return {
+          action: "FOCUS_TOP_NAVIGATION",
+          payload: { isTabsScreen, selectedEntry },
+        };
+      }
+
+      // default
+      return { action: "GO_BACK" };
+    }, [isHome, isRoot, isTabsScreen, selectedEntry]);
+
+    return <Component {...props} backToTopAction={backToTopAction} />;
+  };
+}

package/App/InteractionManager/index.tsx

@@ -8,12 +8,15 @@ import {
   sendQuickBrickEvent,
 } from "@applicaster/zapp-react-native-bridge/QuickBrick";
 
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+
 import {
   debounce,
   noop,
 } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import {
+  AccessibilityManager,
   ARROW_KEYS,
   focusManager,
   keyCode,
@@ -50,6 +53,8 @@ import {
 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";
+import { getHomeRiver } from "@applicaster/zapp-react-native-utils/reactHooks/state";
+import { withBackToTopActionHOC, BackToTopAction } from "./hoc";
 
 const { withXray } = getXray();
 const globalAny: any = global;
@@ -60,7 +65,8 @@ const { log_debug, log_warning } = createLogger({
 });
 
 const shouldUseOnScreenKeyboard = () =>
-  isVizioPlatform() || window.applicaster.useOnScreenKeyboard;
+  isVizioPlatform() ||
+  toBooleanWithDefaultFalse(window?.applicaster?.useOnScreenKeyboard);
 
 type Props = {
   displayState: string;
@@ -70,6 +76,7 @@ type Props = {
   rivers: {};
   xray: XRayContext;
   confirmDialog: typeof confirmationDialogStore;
+  backToTopAction: BackToTopAction;
 };
 
 interface State {
@@ -83,6 +90,9 @@ type KeyCode = { code: string; keyCode: number | string };
 export const alertConfirmationMesage =
   "Are you sure you want to exit application?";
 
+const VIDEO_PLAYER_CONTROLS_NAVIGATION_MESSAGE =
+  "Video player controls - use left/right to navigate";
+
 class InteractionManagerClass extends React.Component<Props, State> {
   onKeyDownListener: (keyCode: KeyCode) => void;
   onMouseDownListener: (event: MouseEvent) => void;
@@ -98,6 +108,8 @@ class InteractionManagerClass extends React.Component<Props, State> {
   private confirmDialog: ConfirmationDialogState =
     confirmationDialogStore.getState();
 
+  accessibilityManager: AccessibilityManager;
+
   state: State = {
     isKeyboardVisible: false,
     keyboardInput: "",
@@ -149,6 +161,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
     this.confirmDialog.setConfirmAction(this.performExit);
     this.confirmDialog.setCancelAction(this.onConfirmDialogClose);
     this.longPressDetector = new KeyboardLongPressManager();
+    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
   componentDidMount() {
@@ -313,13 +326,9 @@ class InteractionManagerClass extends React.Component<Props, State> {
     const { navigator } = this.props;
     const { rivers } = this.props;
 
-    const homeId = R.compose(
-      R.prop("id"),
-      R.find(R.prop("home")),
-      R.values
-    )(rivers);
+    const homeRiver = getHomeRiver(rivers);
 
-    const homePath = `/river/${homeId}`;
+    const homePath = `/river/${homeRiver?.id}`;
 
     return homePath === navigator.currentRoute;
   }
@@ -327,7 +336,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
   goToHome() {
     const { navigator } = this.props;
     const { rivers } = this.props;
-    const homeRiver = R.find(R.propEq("home", true), R.values(rivers));
+    const homeRiver = getHomeRiver(rivers);
 
     navigator.replace(homeRiver);
   }
@@ -388,7 +397,9 @@ class InteractionManagerClass extends React.Component<Props, State> {
      note: backspace affects the keyboard input, so it behaves differently
      */
   onBackPress(event) {
-    const { displayState, setDisplayState, navigator } = this.props;
+    const { displayState, setDisplayState, navigator, backToTopAction } =
+      this.props;
+
     const { isDialogVisible } = confirmationDialogStore.getState();
     const { isKeyboardVisible } = this.state;
 
@@ -407,8 +418,32 @@ class InteractionManagerClass extends React.Component<Props, State> {
       return;
     }
 
+    const { action, payload } = backToTopAction();
+
     switch (displayState) {
       case DISPLAY_STATES.DEFAULT:
+        if (action === "PLATFORM_BACK") {
+          this.platformBack();
+        }
+
+        if (action === "GO_HOME") {
+          this.goToHome();
+        }
+
+        if (action === "FOCUS_TOP_NAVIGATION") {
+          focusManager.focusTopNavigation(
+            payload.isTabsScreen,
+            payload.selectedEntry
+          );
+        }
+
+        if (action === "GO_BACK") {
+          if (navigator.canGoBack()) {
+            navigator.goBack();
+          }
+        }
+
+        break;
       case DISPLAY_STATES.PLAYER:
         if (isDialogVisible) {
           this.onConfirmDialogClose();
@@ -548,6 +583,13 @@ class InteractionManagerClass extends React.Component<Props, State> {
     ) {
       if (displayState === DISPLAY_STATES.PLAYER) {
         setDisplayState(DISPLAY_STATES.HUD);
+
+        this.accessibilityManager.addHeading(
+          VIDEO_PLAYER_CONTROLS_NAVIGATION_MESSAGE
+        );
+
+        focusManager.recoverFocus();
+        this.resetHudTimeout();
       } else {
         focusManager.pressIn();
         focusManager.press();
@@ -592,6 +634,12 @@ class InteractionManagerClass extends React.Component<Props, State> {
         this.resetHudTimeout();
       }
 
+      if (displayState === DISPLAY_STATES.PLAYER) {
+        this.accessibilityManager.addHeading(
+          VIDEO_PLAYER_CONTROLS_NAVIGATION_MESSAGE
+        );
+      }
+
       return true;
     }
   }
@@ -648,8 +696,13 @@ class InteractionManagerClass extends React.Component<Props, State> {
   onConfirmDialogClose() {
     this.confirmDialog.hideDialog();
 
-    // restore initial focus after closing dialog
-    focusManager.setInitialFocus();
+    const context: FocusManager.FocusContext = {
+      source: "cancel",
+      preserveScroll: true,
+    };
+
+    // restore initial focus after closing dialog(with preserve scrolling)
+    focusManager.setInitialFocus(undefined, context);
   }
 
   handleInputFocus = (event: FocusEvent) => {
@@ -847,5 +900,6 @@ export const InteractionManager = R.compose(
   withXray,
   connectToStore(R.pick(["rivers"])),
   PlayerContentContext.withConsumer,
-  DisplayStateContext.withConsumer
+  DisplayStateContext.withConsumer,
+  withBackToTopActionHOC
 )(InteractionManagerClass);

package/App/Loader/loadSessionStorageData.js

@@ -1,14 +1,12 @@
-import * as R from "ramda";
 import { NativeModules } from "react-native";
 import uuidv4 from "uuid/v4";
 
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { mapKeys } from "@applicaster/zapp-react-native-utils/objectUtils";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
 
-import { renameKeys, getDeviceData } from "./utils/platform";
+import { renameKeys, getDeviceData, getUserAgent } from "./utils/platform";
 import { desiredKeysMap } from "./utils/const";
 
 /**
@@ -55,6 +53,9 @@ export const loadPluginDataIntoSession = async (plugins = null) => {
 async function gatherData(uuid) {
   const deviceData = await getDeviceData();
 
+  // Prevent the device sdkVersion from overriding the build time value
+  delete deviceData.sdkVersion;
+
   const { languageLocale, countryLocale } =
     NativeModules?.QuickBrickCommunicationModule || {};
 
@@ -63,7 +64,9 @@ async function gatherData(uuid) {
     ...NativeModules?.QuickBrickCommunicationModule,
     // Device data retrieved from native device apis
     ...deviceData,
-    uuid: uuid || uuidv4(),
+    userAgent: deviceData.userAgent || getUserAgent(),
+    uuid: uuid || uuidv4(), // Created on first session, persisted in local thereafter
+    sessionId: uuidv4(), // Created on every session
     locale: `{language=${languageLocale}, country=${countryLocale}}`,
   };
 
@@ -78,21 +81,23 @@ async function gatherData(uuid) {
  * @param {Object} desiredKeys - The map of original key names to desired key names.
  */
 function storeData(data, desiredKeys) {
-  // Pick only the keys we want and need, map them to the correct name, and reject any unusuable data
-  const filteredData = R.compose(
-    R.reject(isEmptyOrNil),
-    R.reject(R.either(R.is(Object), R.is(Function))),
-    mapKeys(renameKeys),
-    R.pick(Object.keys(desiredKeys))
-  )(data);
-
-  R.forEachObjIndexed((value, key) => {
-    if (key === "uuid") {
-      localStorage.setItem(key, value);
+  const desiredKeysList = Object.keys(desiredKeys);
+
+  Object.entries(data).forEach(([key, value]) => {
+    if (!desiredKeysList.includes(key)) return;
+
+    if (isEmptyOrNil(value)) return;
+
+    if (typeof value === "object" || typeof value === "function") return;
+
+    const renamedKey = renameKeys(key);
+
+    if (renamedKey === "uuid") {
+      localStorage.setItem(renamedKey, value);
     }
 
-    sessionStorage.setItem(key, value);
-  }, filteredData);
+    sessionStorage.setItem(renamedKey, value);
+  });
 }
 
 /**

package/App/Loader/utils/const.js

@@ -37,6 +37,7 @@ export const desiredKeysMap = {
   osVersion: "osVersion",
   platform: "platform",
   quickBrickVersion: "quickBrickVersion",
+  sessionId: "sessionId",
   sdkVersion: "sdk_version",
   store: "store",
   timeZoneOffset: "timeZoneOffset",

package/App/Loader/utils/platform.js

@@ -257,26 +257,7 @@ export const getTizenInfo = () => {
  */
 export const getDeviceData = async () => {
   try {
-    let deviceData = {
-      modelName: null,
-      version: null,
-      versionMajor: null,
-      versionMinor: null,
-      versionDot: null,
-      sdkVersion: null,
-      screenWidth: null,
-      screenHeight: null,
-      uhd: null,
-      oled: null,
-      ddrSize: null,
-      uhd8K: null,
-      hdr10: null,
-      dolbyVision: null,
-      dolbyAtmos: null,
-      name: null,
-      osVersion: null,
-      networkType: null,
-    };
+    let deviceData = {};
 
     if (isLgPlatform()) {
       const [webOSInfo, webOSConnectionInfo] = await Promise.all([
@@ -308,7 +289,6 @@ export const getDeviceData = async () => {
         platform: "vizio",
         deviceMake: "Vizio",
         deviceType: "tv",
-        userAgent: getUserAgent(),
         deviceWidth: window.innerWidth,
         deviceHeight: window.innerHeight,
       };

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

@@ -1,10 +1,5 @@
 import * as R from "ramda";
-import {
-  getStorageModule,
-  applyNamespaceToKeyName,
-  STORAGE_TYPES,
-  DEFAULT_NAMESPACE,
-} from "../";
+import { getStorageModule, STORAGE_TYPES } from "../";
 
 import { StorageMock } from "./StorageMocks";
 
@@ -37,7 +32,6 @@ describe("storageObject", () => {
     const value = "bar";
     const namespaceValue = "baz";
     const namespace = "baz";
-    const keyName = applyNamespaceToKeyName(key, namespace);
     const failKey = "fail_key";
 
     beforeEach(clearStorage);
@@ -54,16 +48,11 @@ describe("storageObject", () => {
       it.each(storages)("sets a property in the storage", async (storage) => {
         const result = await storage.setItem(key, value, null);
 
-        const keyWithDefaultNameSpace = applyNamespaceToKeyName(
-          key,
-          DEFAULT_NAMESPACE
-        );
-
         expect(result).toBe(true);
 
-        expect(storage.getItem(keyWithDefaultNameSpace)).resolves.toEqual(
-          value
-        );
+        const res = await storage.getItem(key, null);
+
+        expect(res).toEqual(value);
       });
 
       it.each(storages)(
@@ -73,7 +62,9 @@ describe("storageObject", () => {
 
           expect(result).toBe(true);
 
-          expect(storage.getItem(keyName)).resolves.toEqual(namespaceValue);
+          const res = await storage.getItem(key, namespace);
+
+          expect(res).toEqual(namespaceValue);
         }
       );
 
@@ -108,7 +99,7 @@ describe("storageObject", () => {
         "gets properties from the storage with a namespace",
         (storage) => {
           expect(storage.getItem(key, namespace)).resolves.toEqual(
-            "namespaceValue"
+            namespaceValue
           );
         }
       );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "14.0.0-alpha.3471443312",
+  "version": "14.0.0-alpha.3514550494",
   "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": "14.0.0-alpha.3471443312",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.3471443312",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.3471443312",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.3471443312",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.3471443312",
+    "@applicaster/zapp-react-dom-ui-components": "14.0.0-alpha.3514550494",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.3514550494",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.3514550494",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.3514550494",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.3514550494",
     "abortcontroller-polyfill": "^1.7.5",
     "typeface-montserrat": "^0.0.54",
     "video.js": "7.14.3",
@@ -37,10 +37,8 @@
     "@applicaster/zapp-pipes-v2-client": "*",
     "@react-native-community/netinfo": "*",
     "core-js": "3.29.1",
-    "immer": "*",
     "react": "*",
     "react-native": "*",
-    "react-native-safe-area-context": "*",
     "react-native-svg": "*",
     "uglify-js": "*",
     "validate-color": "*",