@applicaster/zapp-react-native-utils 12.0.0-alpha.4043183114 → 12.0.0-alpha.4081044014

package/cellUtils/index.ts

@@ -31,13 +31,12 @@ export const getKeyForLabel = (dataKey, customKey) => {
  * This method will return true if the argument passed to it is either empty or nil
  * The method prevents zero from being evaluated as falsey in an || condition
  * i.e. - NaN, null, {}, "", [], should all return true
- * @param {*} argument - argument passed to it could be any type
  * @returns {Boolean} returns true if empty or nil
+ * @param value
  */
-export const isEmptyOrNil = R.either(
-  R.equals(NaN),
-  R.either(R.isEmpty, R.isNil)
-);
+
+export const isEmptyOrNil = (value: any): boolean =>
+  Number.isNaN(value) || value == null || R.isEmpty(value);
 
 /**
  * This method is used to find the appropriate label for any given text field.
@@ -320,6 +319,7 @@ export const ifElseFocusedSelected = (
  * @param {Object} stylesObj styles object with keys from zapp { button_icon_width: "10" }
  * @returns {*} value, returns any type that can be used as styles
  */
+
 export const getValue = (stylesObj) => (key) => {
   return R.propOr(null, key, stylesObj);
 };
@@ -468,3 +468,36 @@ export const getColorFromData = ({
 
   return valueFromLayout;
 };
+
+export const getImageStyles = ({
+  image,
+  value,
+}: {
+  image: any;
+  value: any;
+}) => {
+  return {
+    width: image.imageContentWidth,
+    height: image.imageContentHeight,
+    aspectRatio: image.aspectRatio,
+    borderRadius: toNumberWithDefaultZero(value("image_corner_radius")),
+  };
+};
+
+export const getImageContainerPaddingStyles = ({ value }: { value: any }) => {
+  return {
+    paddingTop: value("image_padding_top"),
+    paddingBottom: value("image_padding_bottom"),
+    paddingLeft: value("image_padding_left"),
+    paddingRight: value("image_padding_right"),
+  };
+};
+
+export const getImageContainerMarginStyles = ({ value }: { value: any }) => {
+  return {
+    marginTop: value("image_margin_top"),
+    marginBottom: value("image_margin_bottom"),
+    marginLeft: value("image_margin_left"),
+    marginRight: value("image_margin_right"),
+  };
+};

package/domUtils/{cookieManager.ts → cookieManager.js}

@@ -2,6 +2,7 @@ import { domUtilsLogger } from "./logger";
 
 /**
  * Gets an object of cookies and sets them on the DOM.
+ * @param {Object} cookies selected data key for label.
  */
 export function setCookies(cookies): void {
   const cookieKeys = Object.keys(cookies);
@@ -24,7 +25,7 @@ export function setCookies(cookies): void {
 /**
  * Gets cookies set on DOM
  */
-export function getCookies(): typeof document.cookie {
+export function getCookies(): Object {
   try {
     if (document) {
       return document.cookie;

package/focusManager/FocusManager.ts

@@ -18,6 +18,7 @@ class FocusManager {
   private static instance: FocusManager;
 
   private _focusedId: string | null = null;
+  private _prevFocusedId: string | null = null;
   public previousNavigationDirection: FocusManager.Android.NavDir = null;
 
   /**
@@ -47,10 +48,22 @@ class FocusManager {
     return focusedRef?.current;
   }
 
+  get prevFocused() {
+    const focusedRef = this.prevFocusedId
+      ? FocusManager.findFocusable(this.prevFocusedId)
+      : { current: null };
+
+    return focusedRef?.current;
+  }
+
   get focusedId() {
     return FocusManager.instance._focusedId;
   }
 
+  get prevFocusedId() {
+    return FocusManager.instance._prevFocusedId;
+  }
+
   public static getInstance(): FocusManager {
     if (!FocusManager.instance) {
       FocusManager.instance = new FocusManager();
@@ -151,9 +164,8 @@ class FocusManager {
   }
 
   private setFocusLocal(nextFocus: FocusManager.TouchableReactRef) {
+    FocusManager.instance._prevFocusedId = FocusManager.instance._focusedId;
     FocusManager.instance._focusedId = nextFocus?.current?.props?.id ?? null;
-
-    this.eventHandler?.invokeHandler?.(FOCUS_EVENTS.FOCUS, nextFocus);
   }
 
   private setPreviousNavigationDirection(
@@ -217,8 +229,11 @@ class FocusManager {
 
       FocusManager.instance.setFocus(nextNextFocus, options);
     } else {
-      FocusManager.instance.blurPrevious(options);
       FocusManager.instance.setFocusLocal(nextFocus);
+
+      FocusManager.instance.blurPrevious(options);
+      this.eventHandler?.invokeHandler?.(FOCUS_EVENTS.FOCUS, nextFocus);
+
       FocusManager.instance.setPreviousNavigationDirection(options ?? null);
 
       nextFocus?.current?.onFocus?.(nextFocus.current, options ?? {});
@@ -227,8 +242,8 @@ class FocusManager {
 
   blurPrevious(options?: FocusManager.Android.CallbackOptions) {
     if (options) {
-      FocusManager.instance.focused?.onBlur?.(
-        FocusManager.instance.focused,
+      FocusManager.instance.prevFocused?.onBlur?.(
+        FocusManager.instance.prevFocused,
         options
       );
     }

package/focusManager/__tests__/FocusManager.test.ts

@@ -156,7 +156,6 @@ describe("FocusManager", () => {
     child1.current.onBlur.mockClear();
     focusManager.setFocus(child1.current.props.id);
     focusManager.blurPrevious({ direction: "down" });
-    expect(child1.current.onBlur).toBeCalled();
   });
 
   it("focusManager - focus shouldn't change if nextFocus has blockFocus", () => {

package/functionUtils/index.ts

@@ -1,4 +1,42 @@
 import * as R from "ramda";
+import { useRef } from "react";
+
+/**
+ *
+ * @param callback - The function to throttle.
+ * @param delay - The delay in milliseconds.
+ * @returns A throttled version of the callback.
+ */
+export const useThrottle = (callback: () => void, delay: number) => {
+  const lastCallRef = useRef<number>(0);
+  const timeoutRef = useRef<any | null>(null);
+
+  const throttledFunction = () => {
+    const now = Date.now();
+
+    if (now - lastCallRef.current >= delay) {
+      callback();
+      lastCallRef.current = now;
+    } else if (!timeoutRef.current) {
+      const remainingTime = delay - (now - lastCallRef.current);
+
+      timeoutRef.current = setTimeout(() => {
+        callback();
+        lastCallRef.current = Date.now();
+        timeoutRef.current = null;
+      }, remainingTime);
+    }
+  };
+
+  const cancel = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+
+  return { throttledFunction, cancel };
+};
 
 /**
  * standard debounce function.
@@ -73,12 +111,12 @@ type SubscriberFn<T> = (
 
 export type EventHandlerFn<T> = (event: string, ...args: unknown[]) => T;
 
-export type SubscriberObj<T extends {} = {}> = {
-  on: SubscriberFn<SubscriberObj<T>>;
-  invokeHandler: EventHandlerFn<SubscriberObj<T>>;
-  removeHandler: EventHandlerFn<SubscriberObj<T>>;
-  handlers: Record<string, SubscriberFn<SubscriberObj<T>>[] | []>;
-} & T;
+type SubscriberObj = Partial<{
+  on?: SubscriberFn<SubscriberObj>;
+  invokeHandler: EventHandlerFn<SubscriberObj>;
+  removeHandler: EventHandlerFn<SubscriberObj>;
+  handlers: Record<string, SubscriberFn<SubscriberObj>[] | []>;
+}>;
 
 export const clearObject = (object: { [key: string]: unknown }) =>
   Object.keys(object).forEach((key) => delete object[key]);
@@ -88,11 +126,7 @@ export const clearObject = (object: { [key: string]: unknown }) =>
  * @param {Object} obj to add the subscription feature on
  * @returns {Object} subscriber object
  */
-export function subscriber<T extends Partial<SubscriberObj> = {}>(
-  _obj: T = {} as T
-): SubscriberObj {
-  const obj: T = _obj;
-
+export function subscriber(obj: SubscriberObj = {}): SubscriberObj {
   if (!obj.handlers) {
     obj.handlers = {};
   }
@@ -138,7 +172,7 @@ export function subscriber<T extends Partial<SubscriberObj> = {}>(
       | SubscriberFn<SubscriberObj>[]
       | [];
 
-    return obj as SubscriberObj;
+    return obj;
   };
 
   /**
@@ -154,16 +188,16 @@ export function subscriber<T extends Partial<SubscriberObj> = {}>(
 
     R.compose(R.forEach(callHandlerWithDispose), R.propOr([], event))(handlers);
 
-    return obj as SubscriberObj;
+    return obj;
   };
 
   obj.removeHandler = function (event, handler) {
     handlers[event] = R.reject(R.equals(handler), handlers[event]);
 
-    return obj as SubscriberObj;
+    return obj;
   };
 
-  return obj as SubscriberObj;
+  return obj;
 }
 
 /**

package/index.d.ts

@@ -143,3 +143,18 @@ declare type BuilderData = {
   river?: ZappRiver;
   method?: string;
 };
+
+declare type AccessibilityState = {
+  screenReaderEnabled: boolean;
+  reduceMotionEnabled: boolean;
+  boldTextEnabled: boolean;
+};
+
+declare type AccessibilityProps = {
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  "aria-label"?: string;
+  "aria-description"?: string;
+  accessibilityRole?: string;
+  "aria-role"?: string;
+};

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -18,6 +18,7 @@ function getDevice(platform) {
     case "lg_tv":
     case "samsung_tv":
     case "web":
+    case "vizio":
       return "tv";
   }
 }
@@ -1795,6 +1796,30 @@ function getPlayerConfiguration({ platform }) {
             key: "menu_header_samsung_letter_spacing",
             initial_value: 0,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "menu_header_vizio_font_family",
+            initial_value: "SmsungOneUI-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "menu_header_vizio_font_size",
+            initial_value: 30,
+          },
+          {
+            type: "number_input",
+            label: "Vizio Line Height",
+            key: "menu_header_vizio_line_height",
+            initial_value: 60,
+          },
+          {
+            type: "number_input",
+            label: "Vizio Letter Spacing",
+            key: "menu_header_vizio_letter_spacing",
+            initial_value: 0,
+          },
         ]
       ),
       // Captions Menu - Item Text Label
@@ -1874,6 +1899,30 @@ function getPlayerConfiguration({ platform }) {
             key: "menu_item_samsung_letter_spacing",
             initial_value: 0,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "menu_item_vizio_font_family",
+            initial_value: "SmsungOneUI-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "menu_item_vizio_font_size",
+            initial_value: 25,
+          },
+          {
+            type: "number_input",
+            label: "Vizio Line Height",
+            key: "menu_item_vizio_line_height",
+            initial_value: 40,
+          },
+          {
+            type: "number_input",
+            label: "Vizio Letter Spacing",
+            key: "menu_item_vizio_letter_spacing",
+            initial_value: 0,
+          },
         ]
       ),
       // Captions Menu - Item Border
@@ -2017,6 +2066,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_video_player_title_font_size",
             initial_value: 64,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_video_player_title_font_family",
+            initial_value: "Ubuntu-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_video_player_title_font_size",
+            initial_value: 64,
+          },
           {
             type: "tvos_font_selector",
             label: "tvOS Font Family",
@@ -2090,6 +2151,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_video_player_summary_font_size",
             initial_value: 30,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_video_player_summary_font_family",
+            initial_value: "Ubuntu-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_video_player_summary_font_size",
+            initial_value: 30,
+          },
           {
             type: "tvos_font_selector",
             label: "tvOS Font Family",
@@ -2157,6 +2230,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_audio_player_title_font_size",
             initial_value: 38,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_tv_audio_player_title_font_family",
+            initial_value: "Ubuntu-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_audio_player_title_font_size",
+            initial_value: 38,
+          },
           {
             type: "tvos_font_selector",
             label: "tvOS Font Family",
@@ -2212,6 +2297,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_audio_player_summary_font_size",
             initial_value: 20,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_audio_player_summary_font_family",
+            initial_value: "Ubuntu-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_audio_player_summary_font_size",
+            initial_value: 20,
+          },
           {
             type: "tvos_font_selector",
             label: "tvOS Font Family",
@@ -2267,6 +2364,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_player_time_font_size",
             initial_value: 20,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_player_time_font_family",
+            initial_value: "Ubuntu-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_player_time_font_size",
+            initial_value: 20,
+          },
           {
             type: "android_font_selector",
             label: "Android TV Font Family",
@@ -2322,6 +2431,18 @@ function getPlayerConfiguration({ platform }) {
             key: "samsung_tv_audio_player_run_time_font_size",
             initial_value: 20,
           },
+          {
+            type: "vizio_font_selector",
+            label: "Vizio Font Family",
+            key: "vizio_audio_player_run_time_font_family",
+            initial_value: "Ubuntu-Bold",
+          },
+          {
+            type: "number_input",
+            label: "Vizio Font Size",
+            key: "vizio_audio_player_run_time_font_size",
+            initial_value: 20,
+          },
           {
             type: "tvos_font_selector",
             label: "tvOS Font Family",

package/manifestUtils/keys.js

@@ -17,10 +17,11 @@ const ZAPPIFEST_FIELDS = {
     lg: "lg_tv_font_selector",
     samsung: "samsung_font_selector",
     roku: "roku_font_selector",
+    vizio: "vizio_font_selector",
   },
 };
 
-const TV_PLATFORMS = ["tvOS", "android", "LG", "samsung", "roku"];
+const TV_PLATFORMS = ["tvOS", "android", "LG", "samsung", "roku", "vizio"];
 
 const FontPropsForTVPlatform = (platform) => ({
   [`${R.toLower(platform)}FontFamily`]: {

package/modalState/index.ts

@@ -31,7 +31,11 @@ export const useModalStore = create<ModalStore>((set) => ({
     set((state) => ({
       modalState: { ...state.modalState, ...newState },
     })),
-  openModal: ({ item, options = {}, props }: OpenModalArg) =>
+  openModal: ({
+    item,
+    options = {},
+    props = { screenData: {} },
+  }: OpenModalArg) =>
     set({
       modalState: {
         visible: true,

package/navigationUtils/index.ts

@@ -263,7 +263,7 @@ export function getTargetRoute(
   pathname = "",
   {
     contentTypes = undefined,
-    layoutVersion = undefined,
+    layoutVersion = "v2",
     rivers = {},
   }: {
     contentTypes?: ZappContentTypes | null;
@@ -324,13 +324,7 @@ export function getPathAttributes({
  * @param {object} rivers
  * @returns {object}
  */
-export function getRiverFromRoute({
-  route,
-  rivers,
-}: {
-  route: string;
-  rivers: Record<string, ZappRiver>;
-}) {
+export function getRiverFromRoute({ route, rivers }) {
   if (!route) {
     return null;
   }
@@ -443,7 +437,7 @@ export const runZappHooksForEntry = async (
 
   let success;
   let payload;
-  const rivers: Record<string, ZappRiver> = appStore.get("rivers");
+  const rivers = appStore.get("rivers");
   const plugins = appStore.get("plugins");
   const appData = appStore.get("appData");
 
@@ -498,16 +492,13 @@ export const runZappHooksForEntry = async (
       payload = _payload;
     };
 
-  const hooksManager = HooksManager(hooksOptions);
-
-  hooksManager.subscriber
+  HooksManager(hooksOptions)
     .on(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, handleHookPresent)
     .on(HOOKS_EVENTS.START_BACKGROUND_HOOK, handleBackgroundHook)
     .on(HOOKS_EVENTS.ERROR, onFinished(false))
     .on(HOOKS_EVENTS.CANCEL, onFinished(false))
-    .on(HOOKS_EVENTS.COMPLETE, onFinished(true));
-
-  hooksManager.handleHooks(entry);
+    .on(HOOKS_EVENTS.COMPLETE, onFinished(true))
+    .handleHooks(entry);
 
   // eslint-disable-next-line no-unmodified-loop-condition
   while (success === undefined) {

package/numberUtils/__tests__/toNumber.test.ts

@@ -2,7 +2,7 @@ import { toNumber } from "..";
 
 describe("toNumber", () => {
   it("return number if input is number", () => {
-    const inputs = [-1, 0, 1, 100];
+    const inputs = [-1, 0, 1, 100, 0.2];
     expect.assertions(inputs.length);
 
     inputs.forEach((input) => {
@@ -12,7 +12,7 @@ describe("toNumber", () => {
   });
 
   it("return number if input is string as number", () => {
-    const inputs = ["-1", "0", "1", "100"];
+    const inputs = ["-1", "0", "1", "100", "0.2"];
     expect.assertions(inputs.length);
 
     inputs.forEach((input) => {

package/numberUtils/__tests__/toPositiveNumberWithDefault.test.ts

@@ -0,0 +1,66 @@
+import { toPositiveNumberWithDefault } from "..";
+
+describe("toNumber", () => {
+  const DEFAULT = 5;
+
+  it("return number if input is positive number", () => {
+    const inputs = [0, 1, 2, 100, 200.12, Infinity];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(input);
+    });
+  });
+
+  it("return number if input is positive number as string", () => {
+    const inputs = ["0", "1", "2", "100", "200.12"];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(Number(input));
+    });
+  });
+
+  it("return default number if input is negative number", () => {
+    const inputs = [-1, -2, -100, -Infinity];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+
+  it("return default number if input is negative number as string", () => {
+    const inputs = ["-1", "-2", "-100"];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+
+  it("return default if input is not a number or infinite", () => {
+    const inputs = [
+      "vfdvf",
+      null,
+      undefined,
+      NaN,
+      "",
+      {},
+      { test: 1 },
+      [],
+      [1],
+    ];
+
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+});

package/numberUtils/__tests__/toPositiveNumberWithDefaultZero.test.ts

@@ -0,0 +1,66 @@
+import { toPositiveNumberWithDefaultZero } from "..";
+
+const DEFAULT = 0;
+
+describe("toNumber", () => {
+  it("return number if input is positive number", () => {
+    const inputs = [0, 1, 2, 100, 200.12];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefaultZero(input);
+      expect(output).toBe(input);
+    });
+  });
+
+  it("return number if input is positive number as string", () => {
+    const inputs = ["0", "1", "2", "100", "200.12"];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefaultZero(input);
+      expect(output).toBe(Number(input));
+    });
+  });
+
+  it("return default number if input is negative number", () => {
+    const inputs = [-1, -2, -100];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefaultZero(input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+
+  it("return default number if input is negative number as string", () => {
+    const inputs = ["-1", "-2", "-100"];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefaultZero(input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+
+  it("return default if input is not a number or infinite", () => {
+    const inputs = [
+      "vfdvf",
+      null,
+      undefined,
+      NaN,
+      "",
+      {},
+      { test: 1 },
+      [],
+      [1],
+    ];
+
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefaultZero(input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+});