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

package/reactHooks/layout/useDimensions/__tests__/useDimensions.test.ts

@@ -0,0 +1,134 @@
+import { renderHook } from "@testing-library/react-hooks";
+import { Dimensions, StatusBar } from "react-native";
+
+const mockUsePickFromState = jest.fn();
+const mockUseIsScreenActive = jest.fn();
+const mockGetInitialDimensions = jest.fn();
+const mockGetDeviceInfo = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
+  ...(jest.requireActual("@applicaster/zapp-react-native-redux/hooks") as {}),
+  usePickFromState: mockUsePickFromState,
+}));
+
+jest.mock("../../../navigation", () => ({
+  useIsScreenActive: mockUseIsScreenActive,
+}));
+
+jest.mock("../helpers", () => ({
+  getInitialDimensions: mockGetInitialDimensions,
+}));
+
+jest.mock("../../getDeviceInfo", () => ({
+  getDeviceInfo: mockGetDeviceInfo,
+}));
+
+const { useDimensions } = require("../useDimensions");
+
+describe("useDimensions", () => {
+  const mockDimensions = { width: 100, height: 200, scale: 1, fontScale: 1 };
+  const mockAppData = { someData: "test" };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    Dimensions.get = jest.fn().mockReturnValue(mockDimensions);
+
+    Dimensions.addEventListener = jest.fn().mockReturnValue({
+      remove: jest.fn(),
+    });
+
+    mockUsePickFromState.mockReturnValue({ appData: mockAppData });
+    mockUseIsScreenActive.mockReturnValue(true);
+    mockGetInitialDimensions.mockReturnValue(mockDimensions);
+    mockGetDeviceInfo.mockReturnValue({ deviceInfo: "testDeviceInfo" });
+  });
+
+  it("returns correct initial dimensions", () => {
+    const { result } = renderHook(() =>
+      useDimensions("window", { fullDimensions: false })
+    );
+
+    expect(result.current).toEqual({
+      ...mockDimensions,
+      statusBarHeight: StatusBar.currentHeight,
+    });
+
+    expect(mockGetInitialDimensions).toHaveBeenCalledWith("window");
+  });
+
+  it("calls handler on mount", () => {
+    renderHook(() => useDimensions("window", { fullDimensions: false }));
+
+    expect(Dimensions.addEventListener).toHaveBeenCalledWith(
+      "change",
+      expect.any(Function)
+    );
+  });
+
+  it("calls handler on isActive change", () => {
+    const { rerender } = renderHook(() =>
+      useDimensions("window", { fullDimensions: false })
+    );
+
+    mockUseIsScreenActive.mockReturnValue(false);
+    rerender();
+
+    expect(Dimensions.addEventListener).toHaveBeenCalledWith(
+      "change",
+      expect.any(Function)
+    );
+  });
+
+  it("handles fullDimensions option", () => {
+    const { result } = renderHook(() =>
+      useDimensions("window", { fullDimensions: true })
+    );
+
+    expect(result.current).toEqual({
+      ...mockDimensions,
+      scale: 1,
+      fontScale: 1,
+      statusBarHeight: StatusBar.currentHeight,
+    });
+  });
+
+  it("handles excludeStatusBar option", () => {
+    const { result } = renderHook(() =>
+      useDimensions("window", { excludeStatusBar: true })
+    );
+
+    expect(result.current.height).toBe(
+      mockDimensions.height - StatusBar.currentHeight ?? 0
+    );
+  });
+
+  it("handles rounded option", () => {
+    const { result } = renderHook(() =>
+      useDimensions("window", { rounded: true })
+    );
+
+    expect(result.current.width).toBe(Math.ceil(mockDimensions.width));
+    expect(result.current.height).toBe(Math.ceil(mockDimensions.height));
+  });
+
+  it("handles deviceInfo option", () => {
+    const { result } = renderHook(() =>
+      useDimensions("window", { deviceInfo: true })
+    );
+
+    expect(result.current.deviceInfo).toMatchObject({
+      deviceInfo: "testDeviceInfo",
+    });
+  });
+
+  it("logs deprecation warning when fullDimensions is boolean", () => {
+    const consoleWarnSpy = jest.spyOn(console, "warn").mockImplementation();
+    renderHook(() => useDimensions("window", true));
+
+    expect(consoleWarnSpy).toHaveBeenCalledWith(
+      "Deprecation Warning\nSecond argument is now the options object. {fullDimensions: boolean, ...}"
+    );
+
+    consoleWarnSpy.mockRestore();
+  });
+});

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -95,6 +95,8 @@ export const useDimensions: UseDimensions = (
 
     const activeSubscription = Dimensions.addEventListener("change", handler);
 
+    handler({ [context]: Dimensions.get(context) });
+
     return () => {
       activeSubscription.remove();
     };

package/reactHooks/navigation/index.ts

@@ -17,7 +17,7 @@ import {
   QUICK_BRICK_NAVBAR,
   QUICK_BRICK_CONTENT,
 } from "@applicaster/quick-brick-core/const";
-import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/ZappHooksModal";
+import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
@@ -320,19 +320,16 @@ export const useZappHooksForEntry = (
         callbacks?.handleHookComplete?.(props);
       };
 
-      const hookManager = HooksManager(hooksOptions);
-
-      hookManager.subscriber
+      const hookManager = HooksManager(hooksOptions)
         .on(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, handleHookPresent)
         .on(HOOKS_EVENTS.ERROR, handleHookError)
         .on(HOOKS_EVENTS.CANCEL, handleHookCancel)
         .on(HOOKS_EVENTS.START_BACKGROUND_HOOK, handleBackgroundHook)
-        .on(HOOKS_EVENTS.COMPLETE, handleHookComplete);
-
-      hookManager.handleHooks(entry);
+        .on(HOOKS_EVENTS.COMPLETE, handleHookComplete)
+        .handleHooks(entry);
 
       return () => {
-        hookManager.subscriber
+        hookManager
           .removeHandler(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, handleHookPresent)
           .removeHandler(HOOKS_EVENTS.ERROR, handleHookError)
           .removeHandler(HOOKS_EVENTS.CANCEL, handleHookCancel)

package/reactHooks/player/useAutoSeek.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import * as R from "ramda";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import {
@@ -17,10 +16,6 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
   const intervalTimer = React.useRef(null);
   const prevRunning = usePrevious(isRunning);
 
-  const setIntervalTimer = (cb) => {
-    intervalTimer.current = setInterval(cb, ON_HOLD_INTERVAL);
-  };
-
   const clearIntervalTimer = () => {
     try {
       clearInterval(intervalTimer.current);
@@ -29,6 +24,11 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
     }
   };
 
+  const setIntervalTimer = (cb) => {
+    clearIntervalTimer();
+    intervalTimer.current = setInterval(cb, ON_HOLD_INTERVAL);
+  };
+
   const resetState = () => {
     setIsRunning(false);
     setDirection(null);
@@ -42,7 +42,7 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
     if (!player) return;
 
     if (direction) {
-      player[direction](R.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier));
+      player[direction](Math.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier));
       resetHUDTimer();
     }
   }, [multiplier, direction]);
@@ -50,7 +50,9 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
   useEffect(() => {
     if (isRunning && isRunning !== prevRunning) {
       setIntervalTimer(() => {
-        setMultiplier(R.add(1));
+        setMultiplier((prev) => {
+          return prev + 1;
+        });
       });
     } else if (!isRunning && isRunning !== prevRunning) {
       resetState();

package/reactHooks/resolvers/useCellResolver.ts

@@ -48,7 +48,11 @@ export function useCellResolver({
   ...cellResolverOptions
 }: Props) {
   let _component = Object.assign({}, component);
-  const { width, height } = useDimensions("screen");
+
+  const { width, height } = useDimensions("screen", {
+    updateForInactiveScreens: false,
+  });
+
   const { plugins, cellStyles } = usePickFromState(["plugins", "cellStyles"]);
   const isRTL = useIsRTL();
 

package/reactHooks/useConfiguration.ts

@@ -67,7 +67,7 @@ export const useConfiguration = ({
       if (component) {
         const remappedStylesConfiguration = remapUpdatedKeys(
           pluginManifest,
-          component.styles
+          component
         );
 
         R.forEachObjIndexed((value, key) => {
@@ -83,7 +83,7 @@ export const useConfiguration = ({
 
         const styles = populateConfigurationValues(
           pluginManifest?.styles?.fields,
-          remappedStylesConfiguration,
+          remappedStylesConfiguration.styles,
           skipDefaults
         );
 

package/reactUtils/index.ts

@@ -109,6 +109,20 @@ export const isTvOSPlatform = () => getPlatform() === "tvos";
 
 export const isAndroidTVPlatform = () => getPlatform() === "android_tv";
 
+declare global {
+  interface Window {
+    VIZIO?: {
+      Chromevox: {
+        play: (text: string) => void;
+      };
+      exitApplication: () => void;
+      setClosedCaptionHandler: (
+        callback: (isCCEnabled: boolean) => void
+      ) => void;
+    };
+  }
+}
+
 /**
  * Platforms found in userAgent string, please note that simulators
  * might not have the same agents that the devices have
@@ -138,8 +152,7 @@ export const hasTizen = typeof window?.tizen !== "undefined";
  */
 export const hasWebOS = typeof window?.webOS !== "undefined";
 
-export const getUserAgent = () =>
-  window?.navigator?.userAgent || global?.navigator?.userAgent;
+export const getUserAgent = () => window?.navigator?.userAgent;
 
 export const isLgPlatform = () => {
   const userAgent = getUserAgent();

package/testUtils/index.tsx

@@ -7,9 +7,11 @@ import { Provider } from "react-redux";
 import thunk from "redux-thunk";
 import configureStore from "redux-mock-store";
 import { SafeAreaProvider } from "react-native-safe-area-context";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 
 import { render } from "@testing-library/react-native";
 import { AnalyticsProvider } from "../analyticsUtils";
+import { ThemeContext } from "../theme";
 
 export { getByTestId } from "./getByTestId";
 
@@ -59,7 +61,9 @@ const initialState = {
   appSettings: {},
   plugins: [],
   appState: { appReady: true, appLaunched: true },
+  pluginConfigurations: {},
   appData: { layoutVersion: "v1" },
+  zappPipes: {},
   contentTypes: null,
 };
 
@@ -68,20 +72,49 @@ export const WrappedWithProviders = ({
   store: storeObj = {},
 }: any) => {
   const _store = configureStore([thunk])(
-    R.mergeDeepWith(R.concat, { ...initialState }, storeObj)
+    R.mergeDeepRight(initialState, { ...storeObj })
   );
 
+  appStore.set(_store);
+
   return (
-    <SafeAreaProvider
-      initialMetrics={{
-        insets: { top: 0, left: 0, right: 0, bottom: 0 },
-        frame: { x: 0, y: 0, width: 0, height: 0 },
+    <ThemeContext.Provider
+      value={{
+        themes: {
+          light: {
+            component_margin_top: 0,
+            component_margin_bottom: 0,
+            component_margin_left: 0,
+            component_margin_right: 0,
+            component_padding_top: 0,
+            component_padding_bottom: 0,
+            component_padding_left: 0,
+            component_padding_right: 0,
+            component_gutter_vertical: 0,
+            component_gutter_horizontal: 0,
+            component_corner_radius: 0,
+            app_background_color: "rgba(0,0,0,0)",
+            screen_margin_top: 0,
+            screen_margin_bottom: 0,
+            component_anchor_point_y: 0,
+            assets: "",
+          },
+        },
+        selectedThemeId: "light",
+        setSelectedThemeId: () => {},
       }}
     >
-      <Provider store={_store}>
-        <AnalyticsProvider>{children}</AnalyticsProvider>
-      </Provider>
-    </SafeAreaProvider>
+      <SafeAreaProvider
+        initialMetrics={{
+          insets: { top: 0, left: 0, right: 0, bottom: 0 },
+          frame: { x: 0, y: 0, width: 0, height: 0 },
+        }}
+      >
+        <Provider store={_store}>
+          <AnalyticsProvider>{children}</AnalyticsProvider>
+        </Provider>
+      </SafeAreaProvider>
+    </ThemeContext.Provider>
   );
 };
 

package/appUtils/HooksManager/types.ts

@@ -1,93 +0,0 @@
-import { SubscriberObj } from "../../functionUtils";
-import { HOOKS_EVENTS } from "./constants";
-
-export interface HookConfiguration {}
-
-export interface HookModule {
-  ModalContainer: React.ComponentType<any>;
-  Component: React.ComponentType<any>;
-  presentFullScreen: boolean;
-  run: (
-    arg0: unknown,
-    callback: () => void,
-    configuration: HookConfiguration
-  ) => void;
-  configuration: HookConfiguration;
-  isFlowBlocker: () => boolean;
-  skipHook: boolean;
-  setSkipHook: (skipHook: boolean) => void;
-  shouldSkipHook: () => boolean;
-  runInBackground: (
-    arg0: unknown,
-    callback: () => void,
-    hookPlugin: Hook,
-    presentUI: boolean
-  ) => void;
-}
-
-export type HookManagerArgs = {
-  rivers: Record<string, ZappRiver>;
-  plugins: ZappPlugin[];
-  targetScreen: ZappRiver;
-  startUpHooksData?: {
-    startUpHooks?: unknown[] | "in_process";
-    setStartUpHooks?: (arg0: string) => void;
-  };
-};
-
-export interface HookManager {
-  subscriber: SubscriberObj;
-  presentScreenHook: (
-    hook: Hook,
-    payload: unknown,
-    callback: (...any) => void
-  ) => void;
-  executeHook: (
-    hook: Hook,
-    payload: unknown,
-    callback: (...any) => void
-  ) => void;
-  handleHooks: (payload: unknown) => void;
-  runInBackground: (
-    hook: Hook,
-    payload: unknown,
-    callback: (...any) => void,
-    presentUI: boolean
-  ) => void;
-}
-
-export type HookIniObj = {
-  hook: HookModule & {
-    module: HookModule;
-    general: unknown;
-    screen_id?: string;
-    identifier?: string;
-    weight?: number | string;
-  };
-  hooks: Hook<any>[];
-  manager: HookManager;
-};
-
-export interface Hook<T extends HookModule = HookModule> {
-  manager: HookManager;
-  lastHook: boolean;
-  state: number;
-  module: T;
-  screen_id: string;
-  identifier: string;
-  configuration: T["configuration"];
-  setStateAndNotify(
-    event: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS],
-    opts: {
-      error?: typeof Error;
-      route?: string;
-      hookPlugin: Hook<T>;
-      payload: unknown;
-    }
-  );
-  general?: {
-    transition_type: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS];
-    allow_screen_plugin_presentation: boolean;
-    is_flow_blocker: boolean;
-  };
-}

package/appUtils/keyCodes/keys/index.ts

@@ -1,3 +0,0 @@
-export * from "./keys";
-
-export { keyEventMapper } from "./keyEventMapper";

package/appUtils/keyCodes/keys/keys.android.ts

@@ -1,18 +0,0 @@
-export const KEYS = {
-  Enter: { code: "Enter", keyCode: 13 },
-  EnterKeyboard: { code: "EnterKeyboard", keyCode: 66 },
-  Back: { code: "Back", keyCode: 8 },
-  Space: { code: "Space", keyCode: 32 },
-  m: { code: "m", keyCode: 77 },
-  ArrowLeft: { code: "ArrowLeft", keyCode: 37 },
-  ArrowUp: { code: "ArrowUp", keyCode: 38 },
-  ArrowRight: { code: "ArrowRight", keyCode: 39 },
-  ArrowDown: { code: "ArrowDown", keyCode: 40 },
-};
-
-export const ARROW_KEYS = [
-  KEYS.ArrowUp,
-  KEYS.ArrowLeft,
-  KEYS.ArrowDown,
-  KEYS.ArrowRight,
-];

package/appUtils/keyCodes/keys/keys.ios.ts

@@ -1,25 +0,0 @@
-export const KEYS = {
-  Enter: { code: "Enter", keyCode: 13 },
-  Space: { code: "Space", keyCode: 32 },
-  m: { code: "m", keyCode: 77 },
-  ArrowLeft: { code: "ArrowLeft", keyCode: 37 },
-  ArrowUp: { code: "ArrowUp", keyCode: 38 },
-  ArrowRight: { code: "ArrowRight", keyCode: 39 },
-  ArrowDown: { code: "ArrowDown", keyCode: 40 },
-  Back: { code: "Backspace", keyCode: 8 },
-  Play: { code: "PlayPause", keyCode: 179 },
-  Pause: { code: "Pause", keyCode: 179 },
-  Forward: { code: "Forward", keyCode: 176 },
-  Rewind: { code: "Rewind", keyCode: 177 },
-  VolumeUp: { code: "VolumeUp", keyCode: 175 },
-  VolumeDown: { code: "VolumeDown", keyCode: 174 },
-  ToggleMute: { code: "VolumeMute", keyCode: 173 },
-  Stop: { code: "Q", keyCode: 81 },
-};
-
-export const ARROW_KEYS = [
-  KEYS.ArrowUp,
-  KEYS.ArrowLeft,
-  KEYS.ArrowDown,
-  KEYS.ArrowRight,
-];

package/appUtils/keyCodes/keys/keys.ts

@@ -1,15 +0,0 @@
-// dummy file to make sure the folder structure is created
-export const KEYS: Record<string, { code: string; keyCode: number }> = {
-  ArrowLeft: { code: "ArrowLeft", keyCode: -1 },
-  ArrowUp: { code: "ArrowUp", keyCode: -1 },
-  ArrowRight: { code: "ArrowRight", keyCode: -1 },
-  ArrowDown: { code: "ArrowDown", keyCode: -1 },
-  Back: { code: "Back", keyCode: -1 },
-};
-
-export const ARROW_KEYS = [
-  KEYS.ArrowUp,
-  KEYS.ArrowLeft,
-  KEYS.ArrowDown,
-  KEYS.ArrowRight,
-];