@applicaster/zapp-react-native-utils 12.0.0-alpha.5882013252 → 12.0.0-alpha.6437417031

package/manifestUtils/index.js

@@ -22,7 +22,11 @@ const {
 const { buttonKey } = require("./buttons");
 const { tvBadges } = require("./tvBadges");
 const { mobileProgressBar, tvProgressBar } = require("./progressBar");
-const { secondaryImage, getUpdatedSecondaryImageKeys } = require("./secondaryImage");
+
+const {
+  secondaryImage,
+  getUpdatedSecondaryImageKeys,
+} = require("./secondaryImage");
 
 module.exports = {
   fontKey,

package/manifestUtils/secondaryImage/index.js

@@ -132,29 +132,32 @@ function secondaryImage({
 
 const POSITION_OVER_IMAGE = toSnakeCase(position_over_image);
 
-const getUpdatedSecondaryImageKeys = (secondaryImageManifest) => secondaryImageManifest.fields.reduce((acc, item) => {
-  const key = item.key;
+const getUpdatedSecondaryImageKeys = (secondaryImageManifest) =>
+  secondaryImageManifest.fields.reduce((acc, item) => {
+    const key = item.key;
 
-  const conditionalFields = (item.conditional_fields || []).map((field) => field.key);
+    const conditionalFields = (item.conditional_fields || []).map(
+      (field) => field.key
+    );
 
-  const updatedConditionalFields = conditionalFields.reduce((acc, field) => {
-    const updatedKey = field.replace("secondary_image_", "nested_image_");
+    const updatedConditionalFields = conditionalFields.reduce((acc, field) => {
+      const updatedKey = field.replace("secondary_image_", "nested_image_");
+
+      return {
+        ...acc,
+        [updatedKey]: field,
+      };
+    }, {});
+
+    const updatedKey = key.replace("secondary_image_", "nested_image_");
 
     return {
       ...acc,
-      [updatedKey]: field,
+      ...updatedConditionalFields,
+      [updatedKey]: key,
     };
   }, {});
 
-  const updatedKey = key.replace("secondary_image_", "nested_image_");
-
-  return {
-    ...acc,
-    ...updatedConditionalFields,
-    [updatedKey]: key,
-  };
-}, {});
-
 module.exports = {
   secondaryImage,
   getUpdatedSecondaryImageKeys,

package/modalState/index.ts

@@ -0,0 +1,57 @@
+import { create } from "zustand";
+
+interface ModalState {
+  visible: boolean;
+  screen: any;
+  options: Record<string, unknown>;
+  props: Record<string, unknown>;
+}
+
+interface ModalStore {
+  modalState: ModalState;
+  setModalState: (newState: Partial<ModalState>) => void;
+  openModal: (
+    item: any,
+    options?: Record<string, unknown>,
+    props?: Record<string, unknown>
+  ) => void;
+  dismissModal: () => void;
+}
+
+const initialModalState: ModalState = {
+  visible: false,
+  screen: null,
+  options: {},
+  props: {},
+};
+
+export const useModalStore = create<ModalStore>((set) => ({
+  modalState: initialModalState,
+  setModalState: (newState) =>
+    set((state) => ({
+      modalState: { ...state.modalState, ...newState },
+    })),
+  openModal: ({
+    item,
+    options = {},
+    props = { screenData: {} },
+  }: OpenModalArg) =>
+    set({
+      modalState: {
+        visible: true,
+        screen: item,
+        options: {
+          animated: true,
+          animationType: "slide",
+          onShow: () => {},
+          presentationStyle: "overFullScreen",
+          transparent: true,
+          ...options,
+          onDismiss: () => set({ modalState: initialModalState }),
+          onRequestClose: () => set({ modalState: initialModalState }),
+        },
+        props,
+      },
+    }),
+  dismissModal: () => set(() => ({ modalState: initialModalState })),
+}));

package/navigationUtils/index.ts

@@ -93,19 +93,68 @@ export function resolveNavigationPlugin({
  * @param {Object} navigator to look for navigation props
  * @param {String} category to look for in screen navigations
  * @returns {Object} props
+ * @deprecated use getNavigationPropsV2 instead
  */
 export function getNavigationProps({
-  navigator: { activeRiver },
+  navigator,
   title = "",
   category,
 }: {
   navigator: QuickBrickAppNavigator;
   title: string;
   category: string;
-}): Nullable<
-  Partial<ZappNavigation> & { selected: string; title: string; home: boolean }
-> {
-  const { navigations, id: selected, home } = activeRiver;
+}): {
+  selected: string;
+  title: string;
+  home: boolean;
+  styles: unknown;
+  assets: ZappNavBarAssets;
+  rules: ZappNavBarRules;
+  nav_items: NavBarItem[];
+} | null {
+  const { activeRiver } = navigator;
+  const { navigations, id: selected, home } = activeRiver; // use useRiver hook instead
+
+  const navigation: ZappNavigation = R.find(
+    R.propEq("category", category),
+    navigations
+  );
+
+  if (!navigation) {
+    return null;
+  }
+
+  const { styles, assets, nav_items, rules } = navigation;
+
+  return {
+    selected,
+    title,
+    home,
+    styles,
+    assets: assets as ZappNavBarAssets,
+    nav_items: nav_items as any as NavBarItem[],
+    rules: rules as any as ZappNavBarRules,
+  };
+}
+
+export function getNavigationPropsV2({
+  currentRiver,
+  title = "",
+  category,
+}: {
+  currentRiver: ZappRiver;
+  title: string;
+  category: string;
+}): {
+  selected: string;
+  title: string;
+  home: boolean;
+  styles: unknown;
+  assets: ZappNavBarAssets;
+  rules: ZappNavBarRules;
+  nav_items: NavBarItem[];
+} | null {
+  const { navigations, id: selected, home } = currentRiver; // use useRiver hook instead
   const navigation = R.find(R.propEq("category", category), navigations);
 
   if (!navigation) {
@@ -170,7 +219,7 @@ export function getScreenIdForContentType(payload, contentTypes) {
 export function getItemTargetId(
   item: ZappEntry | ZappRiver,
   screenType?: string, // todo: creat screen types enum
-  contentTypes?: ZappContentTypes,
+  contentTypes?: ZappContentTypes | null,
   rivers?: Record<string, ZappRiver>
 ) {
   // Pipes v2 resolution
@@ -217,7 +266,7 @@ export function getTargetRoute(
     layoutVersion = undefined,
     rivers = {},
   }: {
-    contentTypes?: ZappContentTypes;
+    contentTypes?: ZappContentTypes | null;
     layoutVersion?: Maybe<ZappLayoutVersions>;
     rivers?: Record<string, ZappRiver>;
   } = {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-alpha.5882013252",
+  "version": "12.0.0-alpha.6437417031",
   "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": "12.0.0-alpha.5882013252",
+    "@applicaster/applicaster-types": "12.0.0-alpha.6437417031",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",
@@ -44,6 +44,7 @@
     "immer": "*",
     "react": "17.0.2",
     "react-native": "0.68.6",
+    "validate-color": "*",
     "zustand": "*"
   },
   "devDependencies": {

package/playerUtils/configurationGenerator.ts

@@ -46,6 +46,14 @@ function getPlayerConfiguration({ platform }) {
         label_tooltip:
           "Enable if you want to have adaptive background gradient based on audio background image.",
       },
+      {
+        key: "audio_player_background_image_query",
+        label: "Audio Player Image Query",
+        initial_value: "",
+        type: "text_input",
+        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.",
+      },
     ],
   };
 

package/pluginUtils/index.ts

@@ -20,14 +20,14 @@ type Plugin = {
  * returns the component module for a specific type
  * Will look in components first, then in plugins
  */
-function getComponentModule({
+export function getComponentModule({
   componentType,
   components,
   plugins,
 }: {
   componentType: string;
   components: ComponentsMap;
-  plugins: Plugin[];
+  plugins: Plugin[] | QuickBrickPlugin[];
 }) {
   const component = R.compose(
     R.prop(R.__, components),
@@ -68,11 +68,13 @@ export function findComponentByType({
  * Returns the plugin for a given identifier, if found
  * @param identifier of the plugin to look for
  * @param plugins map of the available plugins
+ * @param doNotWarn if set to true, will not log a warning if plugin is not found
  * @return whole plugin if found, undefined otherwise
  */
 export function findPluginByIdentifier(
   identifier: string,
-  plugins: (QuickBrickPlugin | ZappPlugin | Plugin)[]
+  plugins: (QuickBrickPlugin | ZappPlugin | Plugin)[],
+  doNotWarn: boolean = false
 ): (QuickBrickPlugin | ZappPlugin | Plugin) | undefined {
   if (!identifier) {
     return undefined;
@@ -84,10 +86,12 @@ export function findPluginByIdentifier(
   )(plugins);
 
   if (!plugin && identifier !== "river" && identifier !== "hooks") {
-    pluginUtilsLogger.warning({
-      message: `Could not find plugin for identifier ${identifier}`,
-      data: { identifier },
-    });
+    if (!doNotWarn) {
+      pluginUtilsLogger.warning({
+        message: `Could not find plugin for identifier ${identifier}`,
+        data: { identifier },
+      });
+    }
   }
 
   return plugin;

package/reactHooks/autoscrolling/__tests__/useTrackCurrentAutoScrollingElement.test.ts

@@ -12,6 +12,8 @@ jest.mock(
   })
 );
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
 jest.useFakeTimers();
 
 const {

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

@@ -17,6 +17,8 @@ jest.mock(
 
 jest.useFakeTimers();
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
 const { useTrackedView } = require("../useTrackedView");
 
 describe("useTrackCurrentAutoScrollingElement", () => {

package/reactHooks/cell-click/__tests__/index.test.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { cleanup, renderHook } from "@testing-library/react-hooks";
 import { CellTapContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellTapContext";
+import { waitFor } from "@testing-library/react-native";
 
 const navigator = {
   getPathname: () => "pathnameMock",
@@ -64,13 +65,16 @@ describe("useCellClick", () => {
     cleanup();
   });
 
-  it("runs onCellTap", () => {
+  it("runs onCellTap", async () => {
     const { result } = renderHook(() => useCellClick(mockProps), { wrapper });
     const useCellClickHook = result.current;
 
     useCellClickHook();
 
-    expect(onCellTap).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(onCellTap).toHaveBeenCalled();
+    });
+
     cleanup();
   });
 });

package/reactHooks/cell-click/index.ts

@@ -53,7 +53,7 @@ export const useCellClick = (props: Props) => {
   );
 
   const onPress = React.useCallback(
-    (_item?: ZappEntry | any, _index?: number) => {
+    async (_item?: ZappEntry | any, _index?: number) => {
       // Making sure we are not getting GestureResponderEvent in here.
       const isZappEntry = _item?.id && _item?.type;
       const selectedItem = isZappEntry ? _item : props.item;
@@ -70,7 +70,7 @@ export const useCellClick = (props: Props) => {
       logOnPress(selectedItem, pathname, component, onCellTap);
 
       if (selectedItem) {
-        actionExecutor?.handleEntryActions(selectedItem);
+        await actionExecutor?.handleEntryActions(selectedItem);
       }
 
       if (selectedItem?.type?.value === "action") {

package/reactHooks/device/index.ts

@@ -1,6 +1,5 @@
 export { useOrientation } from "./useOrientation";
 
-// @ts-ignore
 export { useIsTablet } from "./useIsTablet";
 
 export { useMemoizedIsTablet } from "./useMemoizedIsTablet";

package/reactHooks/device/useIsTablet.tsx

@@ -1,3 +1,28 @@
-// Template function for TS to correctly compile.
-// The RN app will use files with platform suffixes
-export const useIsTablet = (): boolean => false;
+/* eslint react-native/split-platform-components: off */
+
+import { Platform, PlatformIOSStatic, NativeModules } from "react-native";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { F as alwaysFalse } from "ramda";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+
+const useIsTabletIos = (): boolean => {
+  const { isPad } = Platform as PlatformIOSStatic;
+
+  return isPad;
+};
+
+const useIsTabletAndroid = (): boolean => {
+  const { initialProps } = NativeModules.QuickBrickCommunicationModule;
+
+  return toBooleanWithDefaultFalse(initialProps?.is_tablet);
+};
+
+export const useIsTablet = platformSelect({
+  ios: useIsTabletIos,
+  android: useIsTabletAndroid,
+  lg_tv: alwaysFalse,
+  samsung_tv: alwaysFalse,
+  android_tv: alwaysFalse,
+  tvos: alwaysFalse,
+  default: alwaysFalse,
+});

package/reactHooks/device/useMemoizedIsTablet.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { useIsTablet } from "./index";
+import { useIsTablet } from "./useIsTablet";
 
 export const useMemoizedIsTablet = () => {
   const isTablet = useIsTablet();

package/reactHooks/device/useOrientation.tsx

@@ -1,6 +1,8 @@
 import { useWindowDimensions } from "react-native";
 
-export const useOrientation = (): string => {
+type Return = "landscape" | "portrait";
+
+export const useOrientation = (): Return => {
   const { width, height } = useWindowDimensions();
   const isLandscape = width > height;
 

package/reactHooks/flatList/useLoadNextPageIfNeeded.ts

@@ -5,27 +5,34 @@ type Return = (index: number) => void;
 
 type Predicate = (
   entry: ZappUIComponentProps["zappPipesData"]["data"]["entry"],
-  index: number
+  index: number,
+  numberOfColumns: number
 ) => boolean;
 
 type Props = {
   ifNeeded: Predicate;
   loadNextData: () => void;
   entry: ZappUIComponentProps["zappPipesData"]["data"]["entry"];
+  numberOfColumns?: number;
 };
 
 const handleLoadNextPage =
   (
-    ifNeeded: (entry: ZappEntry[], index: number) => boolean,
+    ifNeeded: (
+      entry: ZappEntry[],
+      index: number,
+      numberOfColumns?: number
+    ) => boolean,
     loadNextData: () => void,
-    entry: ZappEntry[]
+    entry: ZappEntry[],
+    numberOfColumns
   ) =>
   (index: number) => {
     /**
      * Lazy-Loading, invoke nextLoadData if we reach the end of the List
      */
 
-    if (ifNeeded(entry, index)) {
+    if (ifNeeded(entry, index, numberOfColumns)) {
       loadNextData();
     }
   };
@@ -34,10 +41,10 @@ export const useLoadNextPageIfNeeded = ({
   ifNeeded,
   loadNextData = noop,
   entry,
+  numberOfColumns = 0,
 }: Props): Return => {
-  return React.useCallback(handleLoadNextPage(ifNeeded, loadNextData, entry), [
-    ifNeeded,
-    loadNextData,
-    entry,
-  ]);
+  return React.useCallback(
+    handleLoadNextPage(ifNeeded, loadNextData, entry, numberOfColumns),
+    [ifNeeded, loadNextData, entry, numberOfColumns]
+  );
 };

package/reactHooks/index.ts

@@ -13,3 +13,5 @@ export * from "./navigation";
 export * from "./device";
 
 export * from "./screen";
+
+export * from "./state";

package/reactHooks/layout/__tests__/index.test.js

@@ -1,5 +1,7 @@
 import { cleanup, renderHook } from "@testing-library/react-hooks";
 
+import * as ReactNative from "react-native";
+
 const mocked_return_value = (tv) => ({
   screen: tv
     ? { width: 50, height: 50, scale: 2, fontScale: 1 }
@@ -10,41 +12,31 @@ const mocked_return_value = (tv) => ({
 const platform = "android";
 let tv_flag = false;
 
-jest.mock("react-native-safe-area-context", () => ({
-  useSafeAreaInsets: () => ({ top: 50 }),
-}));
+ReactNative.Dimensions.get = jest.fn(
+  (context) => mocked_return_value(tv_flag)[context]
+);
 
 const mockRemoveFn = jest.fn();
 
-jest.mock("react-native", () => {
-  const RNMock = jest.genMockFromModule("react-native");
-
-  const Dims = {
-    get: jest.fn((context) => mocked_return_value(tv_flag)[context]),
-    addEventListener: jest.fn().mockReturnValue({
-      remove: mockRemoveFn,
-    }),
-  };
-
-  const QuickBrickCommunicationModule = {
-    initialProps: {
-      is_tablet: false,
-    },
-  };
-
-  return {
-    ...RNMock,
-    Dimensions: Dims,
-    Platform: {
-      OS: platform,
-    },
-    NativeModules: {
-      ...RNMock.NativeModules,
-      QuickBrickCommunicationModule,
-    },
-  };
+ReactNative.Dimensions.addEventListener = jest.fn().mockReturnValue({
+  remove: mockRemoveFn,
 });
 
+ReactNative.Platform.OS = platform;
+
+const QuickBrickCommunicationModule = {
+  initialProps: {
+    is_tablet: false,
+  },
+};
+
+ReactNative.NativeModules.QuickBrickCommunicationModule =
+  QuickBrickCommunicationModule;
+
+jest.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => ({ top: 50 }),
+}));
+
 jest.mock("../../../reactUtils", () => ({
   platformSelect: jest.fn((specs) => specs[platform] || specs.default),
   isTV: jest.fn(() => tv_flag),
@@ -52,6 +44,7 @@ jest.mock("../../../reactUtils", () => ({
 
 jest.mock("../../navigation", () => ({
   useNavigation: () => null,
+  useIsScreenActive: () => true,
 }));
 
 const { Dimensions } = require("react-native");

package/reactHooks/layout/index.ts

@@ -1,9 +1,10 @@
 import * as R from "ramda";
 import { StatusBar, Platform } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { platformSelect, isTV } from "../../reactUtils";
 import { useIsNavBarVisible } from "../navigation";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+
 import { isTablet } from "./isTablet";
 
 export { isTablet } from "./isTablet";

package/reactHooks/layout/types/index.ts

@@ -20,6 +20,7 @@ export type Options = {
   excludeStatusBar?: boolean;
   rounded?: boolean;
   deviceInfo?: boolean;
+  updateForInactiveScreens?: boolean;
 };
 
 export type Context = "window" | "screen";

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

@@ -1,19 +1,14 @@
-let mockPlatformOS = "android";
+import * as ReactNative from "react-native";
 
-jest.mock("react-native", () => {
-  const mockDimensionsGet = jest.fn(
-    (type) =>
-      ({
-        window: { width: 1, height: 1 },
-        screen: { width: 360, height: 540 },
-      }[type])
-  );
+const mockDimensionsGet = jest.fn(
+  (type) =>
+    ({
+      window: { width: 1, height: 1 },
+      screen: { width: 360, height: 540 },
+    }[type])
+);
 
-  return {
-    Platform: jest.fn(() => ({ OS: mockPlatformOS })),
-    Dimensions: { get: mockDimensionsGet },
-  };
-});
+ReactNative.Dimensions.get = mockDimensionsGet;
 
 const mockGetConstants = jest.fn().mockReturnValue({
   Dimensions: {
@@ -26,9 +21,10 @@ jest.mock("react-native/Libraries/Utilities/NativeDeviceInfo", () => ({
   getConstants: mockGetConstants,
 }));
 
-const { Platform, Dimensions } = require("react-native");
+const { Platform, Dimensions } = ReactNative;
 
 Platform.OS = "android";
+
 const { getInitialDimensions } = require("../getInitialDimensions.native.ts");
 
 describe("useDimensions > helpers ( native )", () => {
@@ -48,7 +44,6 @@ describe("useDimensions > helpers ( native )", () => {
 
   it("should call NativeDeviceInfo.getConstants for ios when width === height", () => {
     Platform.OS = "ios";
-    mockPlatformOS = "ios";
 
     jest.fn().mockReturnValue({
       Dimensions: {

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

@@ -1,21 +1,19 @@
-jest.mock("react-native", () => {
-  const mockDimensionsGet = jest.fn(
-    (type) =>
-      ({
-        window: { width: 1, height: 1 },
-        screen: { width: 360, height: 540 },
-      }[type])
-  );
+import * as ReactNative from "react-native";
 
-  return {
-    Platform: jest.fn(() => ({ OS: "web" })),
-    Dimensions: { get: mockDimensionsGet },
-  };
-});
+const mockDimensionsGet = jest.fn(
+  (type) =>
+    ({
+      window: { width: 1, height: 1 },
+      screen: { width: 360, height: 540 },
+    }[type])
+);
+
+ReactNative.Dimensions.get = mockDimensionsGet;
 
-const { Platform, Dimensions } = require("react-native");
+const { Platform, Dimensions } = ReactNative;
 
 Platform.OS = "web";
+
 const { getInitialDimensions } = require("../getInitialDimensions.ts");
 
 describe("useDimensions > helpers (web)", () => {