@applicaster/zapp-react-native-utils 13.0.0-alpha.1753452014 → 13.0.0-alpha.1756731121

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -43,12 +43,12 @@ function getPlayerConfiguration({ platform }) {
           "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",
+        key: "audio_player_background_image_default_color",
+        label: "Audio Player Background Image Default Color",
         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.",
+          "Set the default color for the audio player background image if not image or set of gradient colors are not provided.",
       },
     ],
   };
@@ -2513,7 +2513,7 @@ function getPlayerConfiguration({ platform }) {
   styles.fields.push(
     fieldsGroup(
       "Audio Player",
-      "This section allows you to configure the audio player layout",
+      "This section allows you to configure the audio player layout 2",
       [
         {
           key: "audio_player_background_color",
@@ -2547,6 +2547,12 @@ function getPlayerConfiguration({ platform }) {
           multiple: false,
           label_tooltip: "Choose the default aspect ratio for the artwork",
         },
+        {
+          key: "audio_player_artwork_border_radius",
+          label: "Audio Player Artwork Corner Radius",
+          type: "number_input",
+          initial_value: 16,
+        },
       ]
     )
   );

package/manifestUtils/index.js

@@ -8,6 +8,7 @@ const {
 
 const { tvActionButtonsContainer } = require("./tvAction/container");
 const { tvActionButton } = require("./tvAction/button");
+const { compact } = require("./_internals");
 
 const { spacingKey, absolutePositionElement } = require("./containers");
 
@@ -46,4 +47,5 @@ module.exports = {
   tvProgressBar,
   secondaryImage,
   getUpdatedSecondaryImageKeys,
+  compact,
 };

package/manifestUtils/keys.js

@@ -21,7 +21,30 @@ const ZAPPIFEST_FIELDS = {
   },
 };
 
-const TV_PLATFORMS = ["tvOS", "android", "LG", "samsung", "roku", "vizio"];
+const TV_PLATFORMS_FOR_FONTS = [
+  "tvOS",
+  "android",
+  "LG",
+  "samsung",
+  "roku",
+  "vizio",
+];
+
+const MOBILE_PLATFORMS = [
+  "ios",
+  "ios_for_quickbrick",
+  "android",
+  "android_for_quickbrick",
+];
+
+const TV_PLATFORMS = [
+  "android_tv_for_quickbrick",
+  "amazon_fire_tv_for_quickbrick",
+  "tvos_for_quickbrick",
+  "samsung_tv",
+  "lg_tv",
+  "vizio",
+];
 
 const FontPropsForTVPlatform = (platform) => ({
   [`${R.toLower(platform)}FontFamily`]: {
@@ -92,7 +115,7 @@ const TV_FONT_KEY_DATA = {
     name: "focused font color",
     type: ZAPPIFEST_FIELDS.color_picker,
   },
-  ...R.reduce(addTVFontsForPlatform, {}, TV_PLATFORMS),
+  ...R.reduce(addTVFontsForPlatform, {}, TV_PLATFORMS_FOR_FONTS),
   textAlignment: {
     name: "text alignment",
     type: ZAPPIFEST_FIELDS.select,
@@ -2083,4 +2106,6 @@ module.exports = {
   TV_CELL_BADGE_FIELDS,
   progressBarFields,
   secondaryImageFields,
+  TV_PLATFORMS,
+  MOBILE_PLATFORMS,
 };

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/__tests__/__snapshots__/navigationUtils.test.js.snap

@@ -5,6 +5,7 @@ exports[`getNavigationProps returns the props otherwise 1`] = `
   "assets": {
     "appLogo": "appLogo.png",
   },
+  "data": undefined,
   "home": false,
   "nav_items": [
     {

package/navigationUtils/index.ts

@@ -111,6 +111,7 @@ export function getNavigationProps({
   assets: ZappNavBarAssets;
   rules: ZappNavBarRules;
   nav_items: NavBarItem[];
+  data: MenuItemDataProperties;
 } | null {
   const { activeRiver } = navigator;
   const { navigations, id: selected, home } = activeRiver; // use useRiver hook instead
@@ -124,7 +125,7 @@ export function getNavigationProps({
     return null;
   }
 
-  const { styles, assets, nav_items, rules } = navigation;
+  const { styles, assets, nav_items, rules, data } = navigation;
 
   return {
     selected,
@@ -134,6 +135,7 @@ export function getNavigationProps({
     assets: assets as ZappNavBarAssets,
     nav_items: nav_items as any as NavBarItem[],
     rules: rules as any as ZappNavBarRules,
+    data: data as MenuItemDataProperties,
   };
 }
 

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

@@ -83,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.1753452014",
+  "version": "13.0.0-alpha.1756731121",
   "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,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.1753452014",
+    "@applicaster/applicaster-types": "13.0.0-alpha.1756731121",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/playerUtils/configurationGenerator.ts

@@ -40,20 +40,12 @@ function getPlayerConfiguration({ platform }) {
           "Disable if you don't want the content to have a right orientation",
       },
       {
-        key: "magic_background",
-        label: "Enable Magic Background",
-        initial_value: false,
-        type: "switch",
-        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",
+        key: "audio_player_background_image_default_color",
+        label: "Audio Player Background Image Default Color",
         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.",
+          "Set the default color for the audio player background image if not image or set of gradient colors are not provided.",
       },
     ],
   };
@@ -2549,6 +2541,12 @@ function getPlayerConfiguration({ platform }) {
           multiple: false,
           label_tooltip: "Choose the default aspect ratio for the artwork",
         },
+        {
+          key: "audio_player_artwork_border_radius",
+          label: "Audio Player Artwork Corner Radius",
+          type: "number_input",
+          initial_value: 16,
+        },
       ]
     )
   );

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/feed/useBatchLoading.ts

@@ -1,7 +1,7 @@
-import { isNil, complement, compose, map, min, prop, take, uniq } from "ramda";
+import { complement, compose, isNil, map, min, prop, take, uniq } from "ramda";
 import { useDispatch } from "react-redux";
 import * as React from "react";
-import { useZappPipesFeeds } from "@applicaster/zapp-react-native-redux/hooks/useZappPipesFeeds";
+import { useZappPipesFeeds } from "@applicaster/zapp-react-native-redux/hooks";
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { isNilOrEmpty } from "../../reactUtils/helpers";
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
@@ -9,6 +9,7 @@ import {
   getInflatedDataSourceUrl,
   getSearchContext,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { isGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
 import { useScreenContext } from "../screen/useScreenContext";
 
 type Options = {
@@ -46,9 +47,7 @@ const filterEmptyData = (data) => {
 };
 
 const getData = (rawData) =>
-  rawData.component_type === "gallery-qb"
-    ? rawData.ui_components[0].data
-    : rawData.data;
+  isGallery(rawData) ? rawData.ui_components[0].data : rawData.data;
 
 const extractData = compose(uniq, map(getData));
 
@@ -70,13 +69,12 @@ export const useBatchLoading = (
   const [hasEverBeenReady, setHasEverBeenReady] = React.useState(false);
 
   // if first component is gallery-qb, take only one component for initial load
-  const takeSize =
-    componentsToRender?.[0]?.component_type === "gallery-qb"
-      ? 1
-      : min(
-          options.initialBatchSize ?? DEFAULT_BATCH_SIZE,
-          componentsToRender.length
-        );
+  const takeSize = isGallery(componentsToRender?.[0])
+    ? 1
+    : min(
+        options.initialBatchSize ?? DEFAULT_BATCH_SIZE,
+        componentsToRender.length
+      );
 
   const takeBatchSize = React.useCallback(take(takeSize), [takeSize]);
 

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";
 
@@ -20,6 +20,7 @@ type Props = {
     silentRefresh?: boolean;
     method?: "get" | "post";
     bodyParams?: Record<string, unknown>;
+    skipLoading?: boolean;
   };
 };
 
@@ -55,7 +56,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) => {
@@ -93,7 +96,7 @@ export const useFeedLoader = ({
     if (
       shouldDispatchData(callableFeedUrl, currentFeed, pipesOptions.clearCache)
     ) {
-      if (callableFeedUrl) {
+      if (callableFeedUrl && !pipesOptions.skipLoading) {
         dispatch(
           loadPipesData(callableFeedUrl, {
             ...pipesOptions,
@@ -101,26 +104,33 @@ export const useFeedLoader = ({
             riverId,
           })
         );
-      } else {
+      } else if (!callableFeedUrl) {
         logger.info({
           message:
             "Feed is not defined or not inflated, skipping loading. \nMake sure you have correct feedUrl and mapping.",
           jsOnly: true,
         });
+      } else {
+        logger.info({
+          message:
+            "Loading skipped as per pipesOptions.skipLoading configuration.",
+          data: { url: callableFeedUrl },
+          jsOnly: true,
+        });
       }
     } else {
       logger.info({
         message:
-          "Feed already exist, skipping loading. \nCall reloadData() if you want to refresh data.",
+          "Feed already exists, skipping loading. \nCall reloadData() if you want to refresh data.",
         data: { url: callableFeedUrl },
         jsOnly: true,
       });
     }
   }, []);
 
-  // Reload feed when feedUrl changes
+  // Reload feed when feedUrl changes, unless skipLoading is true
   useEffect(() => {
-    if (!isInitialRender && callableFeedUrl) {
+    if (!isInitialRender && callableFeedUrl && !pipesOptions.skipLoading) {
       dispatch(loadPipesData(callableFeedUrl, { ...pipesOptions, riverId }));
     }
   }, [callableFeedUrl]);
@@ -156,7 +166,6 @@ export const useFeedLoader = ({
     currentFeed?.data,
     currentFeed?.error,
     currentFeed?.loading,
-
     reloadData,
     loadNext,
   ]);

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/navigation/{useGetTabBarHeight.ts → getTabBarHeight.ts}

@@ -3,7 +3,7 @@ import { platformSelect } from "../../reactUtils";
 const TAB_BAR_HEIGHT_IOS = 49;
 const TAB_BAR_HEIGHT_ANDROID = 56;
 
-export const useGetTabBarHeight = () =>
+export const getTabBarHeight = () =>
   platformSelect({
     ios: TAB_BAR_HEIGHT_IOS,
     android: TAB_BAR_HEIGHT_ANDROID,

package/reactHooks/navigation/index.ts

@@ -108,9 +108,11 @@ export function isNavBarVisible(
     return false;
   }
 
-  const showSecondaryLevel = screenData?.navigations?.some(
-    (navigation) => navigation.styles?.show_secondary_level_menu
-  );
+  const showSecondaryLevel =
+    !isTV() ||
+    screenData?.navigations?.some(
+      (navigation) => navigation.styles?.show_secondary_level_menu
+    );
 
   if (canGoBack && !showSecondaryLevel) {
     return false;

package/reactHooks/navigation/useGetBottomTabBarHeight.ts

@@ -1,12 +1,19 @@
 import { useGetNavBarTopBorderWidth } from "./useGetNavBarTopBorderWidth";
-import { useGetTabBarHeight } from "./useGetTabBarHeight";
+import { getTabBarHeight } from "./getTabBarHeight";
+import { useNavigation } from "./useNavigation";
 import { MenuTypes, useNavigationType } from "./useNavigationType";
+import { useNavigationPluginData } from "./useNavigationPluginData";
 
 export const useGetBottomTabBarHeight = (): number => {
+  const { activeRiver } = useNavigation();
+
+  const navigationPluginData = useNavigationPluginData(activeRiver);
+  const navigationType = useNavigationType(navigationPluginData);
+
   const topBorderWidth = useGetNavBarTopBorderWidth();
-  const tabBarHeight = useGetTabBarHeight();
+  const tabBarHeight = getTabBarHeight();
 
-  const isBottomBarNavigation = useNavigationType() === MenuTypes.bottomTabBar;
+  const isBottomBarNavigation = navigationType === MenuTypes.bottomTabBar;
 
   return !isBottomBarNavigation ? 0 : tabBarHeight + topBorderWidth;
 };

package/reactHooks/navigation/useNavigationPluginData.ts

@@ -1,13 +1,17 @@
 import { useRoute } from "./useRoute";
 
-export const useNavigationPluginData = (): ZappNavigation | undefined => {
+export const useNavigationPluginData = (
+  screenData?: LegacyNavigationScreenData | null
+): ZappNavigation | undefined => {
   const {
     screenData: useRouteScreenData,
   }: { screenData: QuickBrickNavigationData | null } = useRoute();
 
-  const navigations = useRouteScreenData?.targetScreen
-    ? (useRouteScreenData.targetScreen as ZappRiver).navigations
-    : (useRouteScreenData as ZappRiver).navigations;
+  const activeScreenData = screenData ?? useRouteScreenData;
+
+  const navigations = activeScreenData?.targetScreen
+    ? (activeScreenData.targetScreen as ZappRiver).navigations
+    : (activeScreenData as ZappRiver).navigations;
 
   const navigationMenu = navigations?.find((nav) => nav.category === "menu");
 

package/reactHooks/navigation/useNavigationType.ts

@@ -5,8 +5,10 @@ export enum MenuTypes {
   bottomTabBar = "BOTTOM_TAB_BAR",
 }
 
-export const useNavigationType = (): MenuTypes => {
-  const navigationMenu = useNavigationPluginData();
+export const useNavigationType = (navigation?: ZappNavigation): MenuTypes => {
+  const navigationPluginData = useNavigationPluginData();
+
+  const navigationMenu = navigation ?? navigationPluginData;
 
   return !navigationMenu ||
     navigationMenu.navigation_type === "quick_brick_side_menu"