@applicaster/zapp-react-native-utils 12.0.0-rc.5 → 12.0.0-rc.51

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -41,6 +41,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.",
+      },
     ],
   };
 
@@ -1655,7 +1663,8 @@ function getPlayerConfiguration({ platform }) {
     platform.includes("lg") ||
     platform.includes("samsung") ||
     platform.includes("android_tv") ||
-    platform.includes("amazon")
+    platform.includes("amazon") ||
+    platform.includes("vizio")
   ) {
     styles.fields.push(
       // Captions Menu

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-rc.5",
+  "version": "12.0.0-rc.51",
   "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-rc.5",
+    "@applicaster/applicaster-types": "12.0.0-rc.51",
     "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

@@ -22,6 +22,7 @@ function getDevice(platform) {
     case "android_tv_for_quickbrick":
     case "lg_tv":
     case "samsung_tv":
+    case "vizio":
     case "web":
       return "tv";
   }
@@ -46,6 +47,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.",
+      },
     ],
   };
 
@@ -1651,7 +1660,8 @@ function getPlayerConfiguration({ platform }) {
     platform.includes("lg") ||
     platform.includes("samsung") ||
     platform.includes("android_tv") ||
-    platform.includes("amazon")
+    platform.includes("amazon") ||
+    platform.includes("vizio")
   ) {
     styles.fields.push(
       // Captions Menu for TV

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 → useTrackedView.test.tsx}

@@ -1,4 +1,8 @@
+import React from "react";
+
 import { act, renderHook } from "@testing-library/react-hooks";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
 
 const mockUpdateComponentsPositions = jest.fn();
 
@@ -17,11 +21,24 @@ jest.mock(
 
 jest.useFakeTimers();
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
+const mockStore = configureStore();
+
+const store = mockStore({ appData: {} });
+
+const Wrapper = ({ children }: { children: React.ReactChild }) => (
+  /* @ts-ignore */
+  <Provider store={store}>{children}</Provider>
+);
+
 const { useTrackedView } = require("../useTrackedView");
 
 describe("useTrackCurrentAutoScrollingElement", () => {
   it("should update position for selected component", async () => {
-    const { result } = renderHook(() => useTrackedView("123"));
+    const { result } = renderHook(() => useTrackedView("123"), {
+      wrapper: Wrapper,
+    });
 
     // Fast-forward until all timers have been executed
     jest.advanceTimersByTime(3000);

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";