@applicaster/zapp-react-native-utils 13.0.0-alpha.1918049654 → 13.0.0-alpha.1952415373

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/focusManager/__tests__/__snapshots__/focusManager.test.js.snap

@@ -28,6 +28,7 @@ exports[`focusManager should be defined 1`] = `
   "moveFocus": [Function],
   "on": [Function],
   "press": [Function],
+  "pressIn": [Function],
   "pressOut": [Function],
   "recoverFocus": [Function],
   "register": [Function],

package/appUtils/focusManager/index.ts

@@ -13,6 +13,7 @@ import {
 import { subscriber } from "../../functionUtils";
 import { coreLogger } from "../../logger";
 import { ACTION } from "./utils/enums";
+
 const logger = coreLogger.addSubsystem("focusManager");
 
 const isFocusEnabled = (focusableItem): boolean => {
@@ -325,8 +326,6 @@ export const focusManager = (function () {
         },
       });
 
-      currentFocusNode = focusCandidate;
-
       focusableItem && setFocus(focusCandidate.id, null);
 
       return { success: true };
@@ -346,6 +345,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
@@ -477,7 +484,7 @@ export const focusManager = (function () {
   function isCurrentFocusOnTheTopScreen() {
     const routes = R.pathOr([], ["root", "children"], focusableTree);
 
-    if (routes.length <= 1) {
+    if (currentFocusNode && routes.length <= 1) {
       // there is only one or zero routes
       return true;
     }
@@ -553,6 +560,7 @@ export const focusManager = (function () {
     invokeHandler,
     removeHandler,
     longPress,
+    pressIn,
     pressOut,
     enableFocus,
     setInitialFocus,

package/appUtils/platform/platformUtils.ts

@@ -81,9 +81,12 @@ export class ClosedCaptioningManager {
 
   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 +95,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;
 

package/manifestUtils/__tests__/createConfig.test.js

@@ -78,8 +78,6 @@ describe("createConfig", () => {
       extend: "styles",
     })(props);
 
-    console.log(mockGenerators.styles.mock.calls);
-
     expect(mockGenerators.styles).toBeCalledWith(props);
   });
 

package/navigationUtils/__tests__/__snapshots__/navigationUtils.test.js.snap

@@ -5,7 +5,6 @@ exports[`getNavigationProps returns the props otherwise 1`] = `
   "assets": {
     "appLogo": "appLogo.png",
   },
-  "data": undefined,
   "home": false,
   "nav_items": [
     {

package/navigationUtils/index.ts

@@ -111,7 +111,6 @@ export function getNavigationProps({
   assets: ZappNavBarAssets;
   rules: ZappNavBarRules;
   nav_items: NavBarItem[];
-  data: MenuItemDataProperties;
 } | null {
   const { activeRiver } = navigator;
   const { navigations, id: selected, home } = activeRiver; // use useRiver hook instead
@@ -125,7 +124,7 @@ export function getNavigationProps({
     return null;
   }
 
-  const { styles, assets, nav_items, rules, data } = navigation;
+  const { styles, assets, nav_items, rules } = navigation;
 
   return {
     selected,
@@ -135,7 +134,6 @@ export function getNavigationProps({
     assets: assets as ZappNavBarAssets,
     nav_items: nav_items as any as NavBarItem[],
     rules: rules as any as ZappNavBarRules,
-    data: data as MenuItemDataProperties,
   };
 }
 
@@ -646,8 +644,8 @@ export const getScreenId = (
   fallbackRiver: ZappRiver
 ) => {
   return screenData?.targetScreen
-    ? screenData?.targetScreen?.id ?? fallbackRiver.id
+    ? (screenData?.targetScreen?.id ?? fallbackRiver.id)
     : "screen_id" in screenData
-    ? screenData.screen_id
-    : fallbackRiver.id;
+      ? screenData.screen_id
+      : fallbackRiver.id;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-alpha.1918049654",
+  "version": "13.0.0-alpha.1952415373",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.1918049654",
+    "@applicaster/applicaster-types": "13.0.0-alpha.1952415373",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/reactHooks/feed/useFeedLoader.tsx

@@ -20,7 +20,6 @@ type Props = {
     silentRefresh?: boolean;
     method?: "get" | "post";
     bodyParams?: Record<string, unknown>;
-    skipLoading?: boolean;
   };
 };
 
@@ -94,7 +93,7 @@ export const useFeedLoader = ({
     if (
       shouldDispatchData(callableFeedUrl, currentFeed, pipesOptions.clearCache)
     ) {
-      if (callableFeedUrl && !pipesOptions.skipLoading) {
+      if (callableFeedUrl) {
         dispatch(
           loadPipesData(callableFeedUrl, {
             ...pipesOptions,
@@ -102,33 +101,26 @@ export const useFeedLoader = ({
             riverId,
           })
         );
-      } else if (!callableFeedUrl) {
-        logger.info({
-          message:
-            "Feed is not defined or not inflated, skipping loading. \nMake sure you have correct feedUrl and mapping.",
-          jsOnly: true,
-        });
       } else {
         logger.info({
           message:
-            "Loading skipped as per pipesOptions.skipLoading configuration.",
-          data: { url: callableFeedUrl },
+            "Feed is not defined or not inflated, skipping loading. \nMake sure you have correct feedUrl and mapping.",
           jsOnly: true,
         });
       }
     } else {
       logger.info({
         message:
-          "Feed already exists, skipping loading. \nCall reloadData() if you want to refresh data.",
+          "Feed already exist, skipping loading. \nCall reloadData() if you want to refresh data.",
         data: { url: callableFeedUrl },
         jsOnly: true,
       });
     }
   }, []);
 
-  // Reload feed when feedUrl changes, unless skipLoading is true
+  // Reload feed when feedUrl changes
   useEffect(() => {
-    if (!isInitialRender && callableFeedUrl && !pipesOptions.skipLoading) {
+    if (!isInitialRender && callableFeedUrl) {
       dispatch(loadPipesData(callableFeedUrl, { ...pipesOptions, riverId }));
     }
   }, [callableFeedUrl]);
@@ -164,6 +156,7 @@ export const useFeedLoader = ({
     currentFeed?.data,
     currentFeed?.error,
     currentFeed?.loading,
+
     reloadData,
     loadNext,
   ]);

package/reactHooks/layout/useDimensions/helpers/__tests__/getInitialDimensions.test.js

@@ -5,7 +5,7 @@ const mockDimensionsGet = jest.fn(
     ({
       window: { width: 1, height: 1 },
       screen: { width: 360, height: 540 },
-    }[type])
+    })[type]
 );
 
 ReactNative.Dimensions.get = mockDimensionsGet;

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -52,6 +52,14 @@ export const useDimensions: UseDimensions = (
       ? { fullDimensions }
       : { ...fullDimensions };
 
+  if (options.updateForInactiveScreens === undefined) {
+    options.updateForInactiveScreens = true;
+  }
+
+  if (options.fullDimensions === undefined) {
+    options.fullDimensions = false;
+  }
+
   const [dimensions, setDimensions] = useState(getInitialDimensions(context));
   const deviceInfo = useRef(getDeviceInfo(dimensions, appData));
 

package/reactHooks/navigation/useGetTabBarHeight.ts

@@ -1,5 +1,3 @@
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
 import { platformSelect } from "../../reactUtils";
 
 const TAB_BAR_HEIGHT_IOS = 49;
@@ -7,6 +5,6 @@ const TAB_BAR_HEIGHT_ANDROID = 56;
 
 export const useGetTabBarHeight = () =>
   platformSelect({
-    ios: TAB_BAR_HEIGHT_IOS + (useSafeAreaInsets().bottom ?? 0),
+    ios: TAB_BAR_HEIGHT_IOS,
     android: TAB_BAR_HEIGHT_ANDROID,
   }) as number;

package/reactHooks/state/useRefWithInitialValue.ts

@@ -0,0 +1,14 @@
+import React from "react";
+
+/**
+ * returns a ref with an initial value that is lazily evaluated once
+ * */
+export const useRefWithInitialValue = <T>(initialValueGetter: () => T) => {
+  const ref = React.useRef<T>(null);
+
+  if (ref.current === null) {
+    ref.current = initialValueGetter();
+  }
+
+  return ref;
+};

package/reactHooks/state/useStateFromSubscribe.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import type { Subject } from "rxjs";
+
+export const useStateFromSubscribe = <T, U>(
+  subject: Subject<T>,
+  onUpdate: (
+    observerValue: T,
+    next: React.Dispatch<React.SetStateAction<U>>
+  ) => void,
+  initialValue: U
+) => {
+  const [state, setState] = useState<U>(initialValue);
+
+  useEffect(() => {
+    const subscription = subject.subscribe((observer) =>
+      onUpdate(observer, setState)
+    );
+
+    return () => subscription.unsubscribe();
+  }, [subject]);
+
+  return state;
+};

package/reactHooks/usePluginConfiguration.ts

@@ -91,7 +91,7 @@ export function useLayoutConfiguration<
   S extends unknown,
   G extends unknown,
   R extends unknown,
-  L extends unknown
+  L extends unknown,
 >(layoutData, manifest, options: Options = {}) {
   const keys = options.keys || [
     "assets",

package/reactHooks/useSubscriberFor.ts

@@ -4,9 +4,10 @@ import { subscriber } from "@applicaster/zapp-react-native-utils/functionUtils";
 const subscriberObjects = Object.create({});
 
 interface UseSubscriberFor {
-  (eventName: string, handler?: (...args: unknown[]) => void): (
-    ...args: unknown[]
-  ) => ReturnType<typeof subscriber>;
+  (
+    eventName: string,
+    handler?: (...args: unknown[]) => void
+  ): (...args: unknown[]) => ReturnType<typeof subscriber>;
 }
 
 /**

package/screenState/index.ts

@@ -1,6 +1,8 @@
 import { create } from "zustand";
 import { produce } from "immer";
 import { path } from "ramda";
+import React from "react";
+import { useShallow } from "zustand/react/shallow";
 
 type ScreenState = {
   selectedEntry: {
@@ -18,6 +20,8 @@ type ScreenStore = {
   setSelectedEntry: (screenId: string, entryId: string) => void;
 };
 
+type SetSelectedEntry = (screenId: string, entryId: string) => void;
+
 const useScreenStore = create<ScreenStore>((set) => ({
   screens: screensInitialState,
   setSelectedEntry: (screenId, entryId) =>
@@ -35,17 +39,27 @@ const useScreenStore = create<ScreenStore>((set) => ({
 export function useScreenState(
   screenId: ScreenId
 ): null | { screen: ScreenState; setSelectedEntry: (entryId: string) => void } {
-  // const state = useState(screenState);
-  const screenState = useScreenStore(
-    path(["screens", screenId])
-  ) as ScreenState;
+  const screenState = useScreenStore<ScreenState>(
+    useShallow(path(["screens", screenId]))
+  );
 
-  const setSelectedEntry = useScreenStore((state) => state.setSelectedEntry);
+  const setSelectedEntry = useScreenStore<SetSelectedEntry>(
+    useShallow(path(["setSelectedEntry"]))
+  );
 
-  if (!screenId) return null;
+  const memoizedSetSelectedEntry = React.useCallback(
+    (entryId) => setSelectedEntry(screenId, entryId),
+    [screenId, setSelectedEntry]
+  );
 
-  return {
-    screen: screenState,
-    setSelectedEntry: (entryId) => setSelectedEntry(screenId, entryId),
-  };
+  return React.useMemo(
+    () =>
+      !screenId
+        ? null
+        : {
+            screen: screenState,
+            setSelectedEntry: memoizedSetSelectedEntry,
+          },
+    [screenId, screenState]
+  );
 }

package/theme/index.ts

@@ -14,7 +14,7 @@ export const ThemeContext = React.createContext({
 export function useTheme<
   T extends Record<string, any> =
     | BaseThemePropertiesTV
-    | BaseThemePropertiesMobile
+    | BaseThemePropertiesMobile,
 >(): T {
   const { themes, selectedThemeId } = React.useContext(ThemeContext);
 

package/time/Timer.ts

@@ -3,7 +3,10 @@ export class Timer {
   private remaining: number;
   private timeoutId: NodeJS.Timeout | null;
 
-  constructor(private callback: () => void, private duration: number) {
+  constructor(
+    private callback: () => void,
+    private duration: number
+  ) {
     this.remaining = this.duration;
     this.timeoutId = null;
   }

package/zappFrameworkUtils/presentPluginOneTime.ts

@@ -92,9 +92,8 @@ export const PresentHookPluginOneTime = (
       const presentOneTimeVersionName =
         await getLatestWatchedVersionNumberFromStorage(storageKey, namespace);
 
-      const applicationVersionName = await sessionStorage.getItem(
-        versionNameKey
-      );
+      const applicationVersionName =
+        await sessionStorage.getItem(versionNameKey);
 
       if (!presentOneTimeVersionName || !applicationVersionName) {
         log_info(