@applicaster/zapp-react-native-utils 13.0.0-alpha.1360301199 → 13.0.0-alpha.1400045041

package/README.md

@@ -376,16 +376,6 @@ useEffect(() => {
 }, []);
 ```
 
-### testUtils
-
-`@applicaster/zapp-react-native-utils/testUtils`
-
-- `testIDEquals: (testId: any) => boolean | { width: number, height: number }` - Function to be used in tandem with enzyme findWhere
-
-```javascript
-wrapper.findWhere(testIDEquals("text"));
-```
-
 ### appUtils - contextKeysManager
 
 `@applicaster/zapp-react-native-utils/appUtils/contextKeyManager`

package/analyticsUtils/currentScreenProperities.ts

@@ -72,12 +72,14 @@ const mappedScreenPropertiesScreen = (
   screenData
 ): AnalyticsScreenProperties => {
   return {
-    screen_name: screenData?.targetScreen?.name,
+    screen_name: screenData?.targetScreen?.name || screenData?.name,
     screen_entry_title: screenData?.title,
     screen_entry_id: R.isNil(screenData?.type) ? null : screenData?.id,
-    screen_layout_id: screenData?.targetScreen?.id,
-    screen_type: screenData?.targetScreen?.type,
-    home_screen: screenData?.targetScreen?.home,
+    screen_layout_id: screenData?.targetScreen?.id || screenData?.id,
+    screen_type: screenData?.targetScreen?.type || screenData?.type,
+    home_screen: !R.isNil(screenData?.targetScreen?.home)
+      ? screenData?.targetScreen?.home
+      : screenData?.home,
   };
 };
 

package/appUtils/HooksManager/Hook.ts

@@ -16,7 +16,7 @@ const BASE_HOOK_PROPERTIES = ["screen_id", "identifier", "weight"];
  * @returns {number} index
  */
 const hookState: (
-  arg0: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS]
+  arg0: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS]
 ) => number = R.indexOf(R.__, R.values(HOOKS_EVENTS));
 
 /**
@@ -62,7 +62,7 @@ export class Hook implements HookInterface {
    * @param {Array<Any>} args variadic arguments to invoke the handler with
    */
   setStateAndNotify(
-    event: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS],
+    event: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS],
     ...args
   ) {
     this.state = hookState(event);

package/appUtils/HooksManager/types.ts

@@ -103,7 +103,7 @@ export interface Hook<T extends HookModule = HookModule> {
   identifier: string;
   configuration: T["configuration"];
   setStateAndNotify(
-    event: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS],
+    event: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS],
     opts: {
       error?: typeof Error;
       route?: string;
@@ -112,7 +112,7 @@ export interface Hook<T extends HookModule = HookModule> {
     }
   );
   general?: {
-    transition_type: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS];
+    transition_type: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS];
     allow_screen_plugin_presentation: boolean;
     is_flow_blocker: boolean;
   };

package/appUtils/contextKeysManager/contextResolver.ts

@@ -42,12 +42,16 @@ export const resolveObjectValues = async (
 
   const resolvedEntries = await Promise.all(
     entries.map(async ([key, value]) => {
-      const regex = /@{([^/]+)\/([^}]*)}/;
-
       if (typeof value !== "string") {
         return [key, value];
       }
 
+      if (!value.startsWith("@")) {
+        return [key, value];
+      }
+
+      const regex = /@{([^/]+)\/([^}]*)}/;
+
       const match = (value as string).match(regex);
 
       if (match) {

package/appUtils/contextKeysManager/index.ts

@@ -16,12 +16,12 @@ import {
 
 export { StorageLevel };
 
-type KeyNameObj = {
+export type KeyNameObj = {
   namespace: string;
   key: string;
 };
 
-type KeyName = string | KeyNameObj;
+export type KeyName = string | KeyNameObj;
 
 type ParsedKeyAndNamespace = {
   namespace?: string;

package/appUtils/contextKeysManager/utils/index.ts

@@ -1,10 +1,11 @@
 import * as R from "ramda";
 import { DEFAULT_NAMESPACE } from "../consts";
+import { KeyName, KeyNameObj } from "../index";
 
 const lastDotRegex = /\.([^.]+)$/;
 const splitByLastDot = R.compose(R.init, R.split(lastDotRegex));
 
-export function getNamespaceAndKey(namespacedKey) {
+export function getNamespaceAndKey(namespacedKey: KeyName): KeyNameObj {
   if (typeof namespacedKey !== "string") return namespacedKey;
 
   const namespacedKeyProps = namespacedKey.includes(".")

package/appUtils/focusManager/__tests__/__snapshots__/focusManager.test.js.snap

@@ -28,10 +28,12 @@ exports[`focusManager should be defined 1`] = `
   "moveFocus": [Function],
   "on": [Function],
   "press": [Function],
+  "pressIn": [Function],
   "pressOut": [Function],
   "recoverFocus": [Function],
   "register": [Function],
   "removeHandler": [Function],
+  "resetFocus": [Function],
   "setFocus": [Function],
   "setInitialFocus": [Function],
   "unregister": [Function],

package/appUtils/focusManager/__tests__/focusManager.test.js

@@ -1,5 +1,6 @@
 import { focusManager } from "../index.ts";
 import { focusManager as focusManagerIOS } from "../index.ios.ts";
+import { findFirstFocusableItem } from "../utils";
 
 describe("focusManagerIOS", () => {
   it("should be defined", () => {
@@ -8,6 +9,67 @@ describe("focusManagerIOS", () => {
   });
 });
 
+const focusableTree = {
+  root: {
+    children: [
+      {
+        children: [
+          {
+            children: [
+              {
+                children: [],
+                component: {
+                  isGroup: true,
+                },
+                id: "route/1/1",
+              },
+              {
+                children: [],
+                component: {
+                  isGroup: true,
+                },
+                id: "route/1/2",
+              },
+            ],
+            component: {
+              isGroup: true,
+            },
+            id: "route/1",
+          },
+          {
+            children: [
+              {
+                children: [],
+                component: {
+                  isGroup: true,
+                },
+                id: "route/2/1",
+              },
+              {
+                children: [],
+                component: {
+                  isGroup: false,
+                },
+                id: "route/2/2",
+              },
+            ],
+            component: {
+              isGroup: true,
+            },
+            id: "route/2",
+          },
+        ],
+        component: {
+          isGroup: true,
+        },
+        id: "/river/1234",
+      },
+    ],
+    component: null,
+    id: "root",
+  },
+};
+
 describe("focusManager", () => {
   it("should be defined", () => {
     expect(focusManager).toBeDefined();
@@ -45,4 +107,24 @@ describe("focusManager", () => {
   it("placeholder test", () => {
     expect(true).toBe(true);
   });
+
+  it("findFirstFocusableItem returns focusableItem", () => {
+    const expectedItemId =
+      focusableTree.root.children[0].children[1].children[1].id;
+
+    const focusableItem = findFirstFocusableItem(focusableTree.root.children);
+
+    expect(
+      focusableItem !== undefined && expectedItemId === focusableItem.id
+    ).toBe(true);
+  });
+
+  it("findFirstFocusableItem does not return focusableItem", () => {
+    focusableTree.root.children[0].children[1].children[1].component.isGroup =
+      true;
+
+    const focusableItem = findFirstFocusableItem(focusableTree.root.children);
+
+    expect(focusableItem === undefined).toBe(true);
+  });
 });

package/appUtils/focusManager/__tests__/index.test.ts

@@ -30,6 +30,7 @@ describe("focusManager", () => {
       "isGroupItemFocused",
       "recoverFocus",
       "isCurrentFocusOnTheTopScreen",
+      "resetFocus",
     ];
 
     expectedMethods.forEach((method) => {

package/appUtils/focusManager/index.ts

@@ -13,6 +13,7 @@ import {
 import { subscriber } from "../../functionUtils";
 import { coreLogger } from "../../logger";
 import { ACTION } from "./utils/enums";
+import { findFirstFocusableItem } from "./utils";
 
 const logger = coreLogger.addSubsystem("focusManager");
 
@@ -326,8 +327,6 @@ export const focusManager = (function () {
         },
       });
 
-      currentFocusNode = focusCandidate;
-
       focusableItem && setFocus(focusCandidate.id, null);
 
       return { success: true };
@@ -347,6 +346,14 @@ export const focusManager = (function () {
     });
   }
 
+  function pressIn() {
+    const currentFocusable = getCurrentFocus();
+
+    if (currentFocusable) {
+      currentFocusable.pressIn(null);
+    }
+  }
+
   /**
    * calls the `press` method on the current focus component
    * @public
@@ -486,20 +493,29 @@ export const focusManager = (function () {
     return haveSameParentBeforeRoot(currentFocusNode, R.last(routes));
   }
 
-  function recoverFocus() {
+  function resetFocus() {
     if (!isCurrentFocusOnTheTopScreen()) {
-      // We've failed to set focused node on the new screen => run focus recovery
+      // We've failed to set focused node on the new screen => run focus reset
       setInitialFocus();
     }
   }
 
+  /**
+   * sets the focus on first focusable item
+   * @public
+   */
+  function recoverFocus() {
+    const focusableItem = findFirstFocusableItem(focusableTree.root.children);
+    focusableItem && setFocus(focusableItem.id);
+  }
+
   /**
    * moves the focus in a provided direction
    * @public
    * @param {Object} direction of the scroll
    */
   function moveFocus(direction) {
-    if (!isCurrentFocusOnTheTopScreen()) {
+    if (!isCurrentFocusOnTheTopScreen() && currentFocusNode) {
       // We are opening new screen. We need to ignore movement of focus.
       return false;
     }
@@ -522,6 +538,8 @@ export const focusManager = (function () {
       } else {
         currentFocusNode.component.failedLostFocus(currentFocusNode, direction);
       }
+    } else {
+      recoverFocus();
     }
   }
 
@@ -554,6 +572,7 @@ export const focusManager = (function () {
     invokeHandler,
     removeHandler,
     longPress,
+    pressIn,
     pressOut,
     enableFocus,
     setInitialFocus,
@@ -565,5 +584,6 @@ export const focusManager = (function () {
     isGroupItemFocused,
     recoverFocus,
     isCurrentFocusOnTheTopScreen,
+    resetFocus,
   };
 })();

package/appUtils/focusManager/utils/index.ts

@@ -98,3 +98,17 @@ export const waitForContent = (focusableTree) => {
     conditionFn: contentHasAnyChildren,
   });
 };
+
+export const findFirstFocusableItem = (items) => {
+  for (const item of items) {
+    if (!item.component.isGroup) {
+      return item;
+    } else {
+      if (item.children) {
+        const focusableItem = findFirstFocusableItem(item.children);
+
+        if (focusableItem) return focusableItem;
+      }
+    }
+  }
+};

package/appUtils/focusManagerAux/index.ts

@@ -54,7 +54,7 @@ export async function setFocusOnContent(currentRoute: string) {
   // For doing it we have to wait registration of first focusable node into focusableTree
   // we wait until content node starts having children
 
-  const { setInitialFocus, focusableTree } = focusManager;
+  const { setInitialFocus, focusableTree, getCurrentFocus } = focusManager;
 
   try {
     await waitForActiveScreen(currentRoute, focusableTree);
@@ -71,6 +71,6 @@ export async function setFocusOnContent(currentRoute: string) {
       );
     }
   } catch (error) {
-    setFocusOnContent(currentRoute);
+    !getCurrentFocus() && setFocusOnContent(currentRoute);
   }
 }

package/appUtils/platform/platformUtils.ts

@@ -77,13 +77,22 @@ export class ClosedCaptioningManager {
 
   private constructor() {
     this.initialize();
+
+    window["vizioDebug"] = {
+      setCCEnabled: (isCCEnabled: boolean) => {
+        this.ccState$.next(isCCEnabled);
+      },
+    };
   }
 
   static getInstance(): ClosedCaptioningManager {
     if (!ClosedCaptioningManager.ccManagerInstance) {
+      log_debug("ClosedCaptioningManager: Creating new instance");
       ClosedCaptioningManager.ccManagerInstance = new ClosedCaptioningManager();
     }
 
+    log_debug("ClosedCaptioningManager: Returning existing instance");
+
     return ClosedCaptioningManager.ccManagerInstance;
   }
 
@@ -92,23 +101,41 @@ export class ClosedCaptioningManager {
       PLATFORM_KEYS.deviceClosedCaptioningEnabled
     );
 
-    log_debug("Initializing closed captioning manager", { existingState });
-
     if (existingState !== null) {
+      log_debug(
+        `ClosedCaptioningManager: Setting initial state to ${existingState}`
+      );
+
       this.ccState$.next(existingState === "true" || existingState === true);
+    } else {
+      log_debug("ClosedCaptioningManager: No existing state found");
     }
 
     if (hasVizioAPIs()) {
+      log_debug("ClosedCaptioningManager: Setting closed captioning handler");
+
       window.VIZIO!.setClosedCaptionHandler((isCCEnabled) => {
-        log_debug("CC state changed", { isCCEnabled });
+        log_debug(
+          "ClosedCaptioningManager: There was a change in the CC state",
+          { isCCEnabled }
+        );
 
         sessionStorage.setItem(
           PLATFORM_KEYS.deviceClosedCaptioningEnabled,
           isCCEnabled
         );
 
+        log_debug(
+          "ClosedCaptioningManager: Saved CC state to session storage",
+          { isCCEnabled }
+        );
+
         this.ccState$.next(isCCEnabled);
       });
+    } else {
+      log_debug(
+        "ClosedCaptioningManager: Vizio APIs are not available, skipping setup"
+      );
     }
   }
 

package/appUtils/playerManager/player.ts

@@ -154,8 +154,8 @@ export class Player {
     this.isSeeking()
       ? this.playerState.seekPosition
       : this.playerState.adState
-      ? this.playerState.adState.adPosition
-      : this.playerState.contentPosition;
+        ? this.playerState.adState.adPosition
+        : this.playerState.contentPosition;
 
   getEntry = (): ZappEntry | null => this.entry;