@applicaster/zapp-react-native-utils 13.0.0-alpha.6944415045 → 13.0.0-alpha.7048001189

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/manifestUtils/defaultManifestConfigurations/player.js

@@ -50,6 +50,14 @@ function getPlayerConfiguration({ platform }) {
         label_tooltip:
           "Set the query params which control the size of the image e.g width, height. This will help to optimize the loading time, when magic background is enabled.",
       },
+      {
+        key: "audio_player_background_image_default_color",
+        label: "Audio Player Background Image Default Color",
+        initial_value: "",
+        type: "text_input",
+        label_tooltip:
+          "Set the default color for the audio player background image if not image or set of gradient colors are not provided.",
+      },
     ],
   };
 

package/manifestUtils/fonts/index.js

@@ -224,12 +224,11 @@ function fontKey(label, defaults, conditionalField = null) {
   return fields;
 }
 
-function tvMenuLabel(label, description, defaults) {
-  return fieldsGroup(
-    label,
-    description,
-    generateFieldsFromDefaults(label, defaults, TV_MENU_LABEL_FIELDS)
-  );
+function tvMenuLabel(label, description, defaults, fields = []) {
+  return fieldsGroup(label, description, [
+    ...fields,
+    ...generateFieldsFromDefaults(label, defaults, TV_MENU_LABEL_FIELDS),
+  ]);
 }
 
 function mobileCellLabel(label, description, defaults, groupFolded) {

package/manifestUtils/sharedConfiguration/screenPicker/stylesFields.js

@@ -24,7 +24,7 @@ const componentConfigurationFields = [
     initial_value: "vertical",
     options: [
       { text: "Vertical", value: "vertical" },
-      { text: "Horizontal (Beta)", value: "horizontal" },
+      { text: "Horizontal", value: "horizontal" },
     ],
   },
   {

package/modalState/__tests__/index.test.ts

@@ -0,0 +1,51 @@
+import { modalStore } from "../";
+
+describe("Modal State", () => {
+  it("should have initial state", () => {
+    const state = modalStore.getState();
+
+    expect(state).toMatchObject({
+      modalState: {
+        visible: false,
+        screen: null,
+        options: {},
+        props: {},
+      },
+    });
+
+    expect(state.openModal).toBeDefined();
+    expect(state.dismissModal).toBeDefined();
+  });
+
+  describe("opening and dismissing modal", () => {
+    it("should open modal", () => {
+      const item = { id: "test", name: "Test Modal" };
+      const options = { animated: true, animationType: "slide" };
+      const props = { customProp: "value" };
+
+      modalStore.getState().openModal({ item, options, props });
+
+      const state = modalStore.getState();
+
+      expect(state.modalState).toMatchObject({
+        visible: true,
+        screen: item,
+        options,
+        props,
+      });
+    });
+
+    it("should dismiss modal", () => {
+      modalStore.getState().dismissModal();
+
+      const state = modalStore.getState();
+
+      expect(state.modalState).toMatchObject({
+        visible: false,
+        screen: null,
+        options: {},
+        props: {},
+      });
+    });
+  });
+});

package/modalState/index.ts

@@ -1,4 +1,4 @@
-import { create } from "zustand";
+import { useStore, createStore } from "zustand";
 
 interface ModalState {
   visible: boolean;
@@ -25,7 +25,7 @@ const initialModalState: ModalState = {
   props: {},
 };
 
-export const useModalStore = create<ModalStore>((set) => ({
+export const modalStore = createStore<ModalStore>((set) => ({
   modalState: initialModalState,
   setModalState: (newState) =>
     set((state) => ({
@@ -51,3 +51,33 @@ export const useModalStore = create<ModalStore>((set) => ({
     }),
   dismissModal: () => set(() => ({ modalState: initialModalState })),
 }));
+
+export const useModalStore = <T>(selector: (state: ModalStore) => T) =>
+  useStore(modalStore, selector);
+
+export const openModal = modalStore.getInitialState().openModal;
+
+export const dismissModal = modalStore.getInitialState().dismissModal;
+
+export const openBottomSheetModal = ({
+  ModalBottomSheetContent,
+  modalBottomSheetContentProps,
+  props = {},
+  options = {},
+}: OpenModalBottomSheetArgs) => {
+  openModal({
+    item: {
+      ModalBottomSheetContent,
+      modalBottomSheetContentProps,
+    },
+    props,
+    options: {
+      animationType: "none",
+      animated: false,
+      ...options,
+    },
+  });
+};
+
+export const useModalStoreState = (): ModalState =>
+  useModalStore<ModalState>((state) => state.modalState);

package/navigationUtils/index.ts

@@ -644,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/numberUtils/__tests__/toPositiveNumberWithDefault.test.ts

@@ -1,10 +1,10 @@
 import { toPositiveNumberWithDefault } from "..";
 
-describe("toNumber", () => {
+describe("toPositiveNumberWithDefault", () => {
   const DEFAULT = 5;
 
   it("return number if input is positive number", () => {
-    const inputs = [0, 1, 2, 100, 200.12, Infinity];
+    const inputs = [1, 2, 100, 200.12, Infinity];
     expect.assertions(inputs.length);
 
     inputs.forEach((input) => {
@@ -14,7 +14,7 @@ describe("toNumber", () => {
   });
 
   it("return number if input is positive number as string", () => {
-    const inputs = ["0", "1", "2", "100", "200.12"];
+    const inputs = ["1", "2", "100", "200.12"];
     expect.assertions(inputs.length);
 
     inputs.forEach((input) => {
@@ -63,4 +63,24 @@ describe("toNumber", () => {
       expect(output).toBe(DEFAULT);
     });
   });
+
+  it("return default if input is zero number", () => {
+    const inputs = [0, -0];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
+
+  it("return default if input is zero string", () => {
+    const inputs = ["0", "-0"];
+    expect.assertions(inputs.length);
+
+    inputs.forEach((input) => {
+      const output = toPositiveNumberWithDefault(DEFAULT, input);
+      expect(output).toBe(DEFAULT);
+    });
+  });
 });

package/numberUtils/index.ts

@@ -3,7 +3,7 @@ import { logger } from "@applicaster/zapp-react-native-utils/logger";
 
 const numberUtilsLogger = logger?.addSubsystem("NumberUtils");
 
-export const toNumber = (value: any): number | undefined => {
+export const toNumber = (value: unknown): number | undefined => {
   if (R.isNil(value) || R.isEmpty(value)) {
     return undefined;
   }
@@ -17,10 +17,12 @@ export const toNumber = (value: any): number | undefined => {
   return undefined;
 };
 
-export const toNumberWithDefault = (defaultValue: number, value: any): number =>
-  toNumber(value) ?? defaultValue;
+export const toNumberWithDefault = (
+  defaultValue: number,
+  value: unknown
+): number => toNumber(value) ?? defaultValue;
 
-export const toNumberWithDefaultZero = (value: any): number =>
+export const toNumberWithDefaultZero = (value: unknown): number =>
   toNumberWithDefault(0, value);
 
 export const requireNumber = (obj, key: string) => {
@@ -39,7 +41,7 @@ export const requireNumber = (obj, key: string) => {
 
 export const toFiniteNumberWithDefault = (
   defaultValue: number,
-  value: any
+  value: unknown
 ): number => {
   const possibleNumber = toNumberWithDefault(defaultValue, value);
 
@@ -81,6 +83,10 @@ export const toPositiveNumberWithDefault = (
     return defaultValue;
   }
 
+  if (isZero(possibleNumber)) {
+    return defaultValue;
+  }
+
   return possibleNumber;
 };
 

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-alpha.6944415045",
+  "version": "13.0.0-alpha.7048001189",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
   "scripts": {
-    "test": "jest -w=2",
     "build": "echo skipping hybrid ts build in main packages for now"
   },
   "publishConfig": {
@@ -28,11 +27,9 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.6944415045",
+    "@applicaster/applicaster-types": "13.0.0-alpha.7048001189",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
-    "create-react-context": "^0.2.3",
-    "create-react-ref": "^0.1.0",
     "dayjs": "^1.11.10",
     "memoizee": "0.4.15",
     "prop-types": "^15.0.0",
@@ -42,13 +39,10 @@
     "@applicaster/zapp-pipes-v2-client": "*",
     "@react-native-community/netinfo": "*",
     "immer": "*",
-    "react": "17.0.2",
-    "react-native": "0.68.6",
+    "react": "*",
+    "react-native": "*",
     "uglify-js": "*",
     "validate-color": "*",
     "zustand": "*"
-  },
-  "devDependencies": {
-    "@types/react-native": "0.69.6"
   }
 }

package/playerUtils/configurationGenerator.ts

@@ -55,6 +55,14 @@ function getPlayerConfiguration({ platform }) {
         label_tooltip:
           "Set the query params which control the size of the image e.g width, height. This will help to optimize the loading time, when magic background is enabled.",
       },
+      {
+        key: "audio_player_background_image_default_color",
+        label: "Audio Player Background Image Default Color",
+        initial_value: "",
+        type: "text_input",
+        label_tooltip:
+          "Set the default color for the audio player background image if not image or set of gradient colors are not provided.",
+      },
     ],
   };
 

package/reactHooks/advertising/index.ts

@@ -5,6 +5,7 @@ import * as R from "ramda";
 import { useNavigation } from "../navigation";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { dismissModal, openModal } from "../../modalState";
 
 const GOOGLE_ADS_IDENTIFIER = "google-admob-ads-qb";
 
@@ -14,9 +15,8 @@ const ModalContainer = platformSelect({
 });
 
 export function useAdvertisingInterstitial() {
-  const navigator = useNavigation();
+  const { screenData, currentRoute } = useNavigation();
   const { plugins } = usePickFromState();
-  const { screenData } = navigator;
 
   return useEffect(() => {
     // TODD: typing problem: fix any type
@@ -26,7 +26,7 @@ export function useAdvertisingInterstitial() {
         plugins
       );
 
-      navigator.openModal({
+      openModal({
         item: {},
         options: {
           ModalContainer,
@@ -36,11 +36,11 @@ export function useAdvertisingInterstitial() {
           screenType: "hooks",
           screenData: {
             payload: screenData,
-            callback: navigator.dismissModal,
+            callback: dismissModal,
             hookPlugin: GoogleAdsPlugin,
           },
         },
       });
     }
-  }, [navigator.currentRoute, screenData?.id]);
+  }, [currentRoute, screenData?.id]);
 }

package/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx

@@ -35,25 +35,23 @@ const Wrapper = ({ children }: { children: React.ReactChild }) => (
 const { useTrackedView } = require("../useTrackedView");
 
 describe("useTrackCurrentAutoScrollingElement", () => {
-  it("should update position for selected component", async () => {
+  it("should update position for selected component - onViewportEnter", () => {
     const { result } = renderHook(() => useTrackedView("123"), {
       wrapper: Wrapper,
     });
 
-    // Fast-forward until all timers have been executed
-    jest.advanceTimersByTime(3000);
-
     expect(result.current.inViewPort).toBe(false);
 
     const mockRect = {
       rect: { left: 1, right: 1, top: 1, bottom: 1 },
     };
 
-    act(() => {
-      result.current.onPositionUpdated(mockRect);
+    act(async () => {
+      await result.current.onPositionUpdated(mockRect);
     });
 
-    jest.advanceTimersByTime(3000);
+    // Fast-forward until all timers have been executed
+    jest.runAllTimers();
 
     expect(result.current.inViewPort).toBe(true);
 

package/reactHooks/autoscrolling/useTrackedView.ts

@@ -2,6 +2,10 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useScreenTrackedViewPositionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 import { findTrackedView } from "./utils/findTrackedView";
+import { isNil } from "ramda";
+import { withTimeout } from "@applicaster/zapp-react-native-utils/idleUtils";
+
+const TIMEOUT_FOR_DELAY_ON_VIEWPORT_ENTER_EVENT = 500; // ms
 
 const getNormalizedRect = (rect, componentId, screenWidth, screenHeight) => {
   if (!rect) {
@@ -37,9 +41,16 @@ export const useTrackedView = (componentId: string) => {
   );
 
   const onPositionUpdated = useCallback(
-    ({ rect }) => {
+    async ({ rect }) => {
       const currentPosition = normalizedRect(componentId, rect);
 
+      // There is an issue on the native side where they are unable to guarantee
+      // that the order of onViewportLeave and onViewportEnter events is always correct.
+      // This workaround/hack delays the onViewportEnter event to ensure it is received last.
+      if (!isNil(currentPosition)) {
+        await withTimeout(TIMEOUT_FOR_DELAY_ON_VIEWPORT_ENTER_EVENT);
+      }
+
       updateComponentsPositions(componentId, currentPosition as any);
 
       setInViewPort(!!currentPosition);

package/reactHooks/feed/useFeedLoader.tsx

@@ -5,7 +5,7 @@ import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { useZappPipesFeed } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { reactHooksLogger } from "../logger";
-import { useIsInitialRender, shouldDispatchData } from "../utils";
+import { shouldDispatchData, useIsInitialRender } from "../utils";
 import { useInflatedUrl } from "./useInflatedUrl";
 import { useRoute } from "../navigation";
 
@@ -55,7 +55,9 @@ export const useFeedLoader = ({
 
   const currentFeed = useZappPipesFeed(callableFeedUrl);
 
-  const riverId = screenData?.id;
+  const riverId =
+    (screenData as LegacyNavigationScreenData)?.targetScreen?.id ??
+    screenData?.id;
 
   const reloadData = React.useCallback<ReloadDataFunction>(
     (silentRefresh = true, callback) => {

package/reactHooks/hookModal/hooks/useHookModalScreenData.ts

@@ -0,0 +1,39 @@
+import { reactHooksLogger } from "../../logger";
+import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
+
+const logger = reactHooksLogger.addSubsystem("useHookModalScreenData");
+
+type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
+
+export const useHookModalScreenData = (): VariousScreenData | undefined => {
+  const hookModalState = useZappHooksModalState();
+
+  if (!hookModalState.state?.screenData) {
+    return;
+  }
+
+  try {
+    const screenData = hookModalState.state.screenData?.payload;
+    const hookPlugin = hookModalState.state.screenData.hookPlugin;
+
+    if (hookPlugin?.screen_id) {
+      return {
+        ...screenData,
+        targetScreen: hookPlugin,
+      };
+    }
+
+    return hookModalState.state.screenData?.payload;
+  } catch (error) {
+    logger.error({
+      message: "Hook modal screen data creation failed",
+      data: {
+        error,
+        hookModalState,
+      },
+      jsOnly: true,
+    });
+
+    return hookModalState.state.screenData?.payload;
+  }
+};

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/__mocks__/useNavigation.ts

@@ -3,5 +3,8 @@ export const useNavigation = jest.fn(() => ({
   screenData: {
     name: "someName",
   },
+  videoModalState: {
+    visible: false,
+  },
   currentRoute: "someRoute",
 }));

package/reactHooks/navigation/__tests__/index.test.tsx

@@ -310,14 +310,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(false);
     });
 
-    it("returns false if it's secondary nav bar and hide_secondary_level_menu is true", () => {
+    it("returns false if it's secondary nav bar and show_secondary_level_menu is false", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: true,
+                show_secondary_level_menu: false,
               },
             },
           ],
@@ -329,14 +329,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(false);
     });
 
-    it("returns true if it's secondary nav bar and hide_secondary_level_menu is false", () => {
+    it("returns true if it's secondary nav bar and show_secondary_level_menu is true", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: false,
+                show_secondary_level_menu: true,
               },
             },
           ],
@@ -348,14 +348,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(true);
     });
 
-    it("returns true if it's first level menu and hide_secondary_level_menu is true", () => {
+    it("returns true if it's first level menu and show_secondary_level_menu is false", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: true,
+                show_secondary_level_menu: false,
               },
             },
           ],
@@ -366,16 +366,5 @@ describe("navigation", () => {
 
       expect(navBarVisible).toBe(true);
     });
-
-    it("returns true otherwise", () => {
-      const navBarVisible = isNavBarVisible(
-        "",
-        { navigations: [] } as any,
-        true,
-        true
-      );
-
-      expect(navBarVisible).toBe(true);
-    });
   });
 });

package/reactHooks/navigation/index.ts

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo } from "react";
-import { BackHandler, InteractionManager, NativeModules } from "react-native";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { BackHandler } from "react-native";
 
 import {
   useContentTypes,
@@ -31,6 +31,8 @@ export { useGetBottomTabBarHeight } from "./useGetBottomTabBarHeight";
 
 export { useIsScreenActive } from "./useIsScreenActive";
 
+export { useProfilerLogging } from "./useProfilerLogging";
+
 export {
   useUniqueRouteSuffix,
   useNavbarId,
@@ -106,11 +108,13 @@ export function isNavBarVisible(
     return false;
   }
 
-  const hideSecondaryLevel = screenData?.navigations?.some(
-    (navigation) => navigation.styles?.hide_secondary_level_menu
-  );
+  const showSecondaryLevel =
+    !isTV() ||
+    screenData?.navigations?.some(
+      (navigation) => navigation.styles?.show_secondary_level_menu
+    );
 
-  if (canGoBack && hideSecondaryLevel) {
+  if (canGoBack && !showSecondaryLevel) {
     return false;
   }
 
@@ -121,10 +125,8 @@ export function isNavBarVisible(
   return true;
 }
 
-const { ProfilerBridge } = NativeModules;
-
 export const useBackHandler = (cb: () => boolean) => {
-  React.useEffect(() => {
+  useEffect(() => {
     BackHandler.addEventListener("hardwareBackPress", cb);
 
     return () => {
@@ -158,7 +160,7 @@ export const useZappHooksForEntry = (
     setIsHooksExecutionInProgress,
     setIsPresentingFullScreen,
     setIsRunningInBackground,
-  }: HookModalContextT = React.useContext(ZappHookModalContext.ReactContext);
+  }: HookModalContextT = useContext(ZappHookModalContext.ReactContext);
 
   const {
     appData: { layoutVersion },
@@ -256,22 +258,10 @@ export const useZappHooksForEntry = (
   }, [entry.id]);
 };
 
-export const useProfilerLogging = () => {
-  const logTimestamp = (data: string) =>
-    InteractionManager.runAfterInteractions(() => {
-      if (ProfilerBridge && data) {
-        ProfilerBridge.updateTimer("navigation", data, Date.now());
-      }
-    });
-
-  return logTimestamp;
-};
-
 export const useRunIfLongPress = (
   options = { timeout: LONG_KEY_PRESS_TIMEOUT }
 ) => {
-  const pressTimeout =
-    React.useRef<Nullable<ReturnType<typeof setTimeout>>>(null);
+  const pressTimeout = useRef<Nullable<ReturnType<typeof setTimeout>>>(null);
 
   const resetTimeout = () => {
     clearTimeout(pressTimeout.current as ReturnType<typeof setTimeout>);

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;