@applicaster/zapp-react-native-utils 13.0.0-rc.99 → 13.0.0

package/configurationUtils/__tests__/configurationUtils.test.js

@@ -1,11 +1,8 @@
-import * as R from "ramda";
 import {
   populateConfigurationValues,
-  imageSrcFromMediaItem,
   getBoolFromConfigValue,
   remapUpdatedKeys,
 } from "../";
-import { entry } from "./testEntry";
 
 describe("getBoolFromConfigValue", () => {
   it('returns true if value is "true" string', () => {
@@ -57,34 +54,6 @@ describe("getBoolFromConfigValue", () => {
   });
 });
 
-describe("imageSrcFromMediaItem", () => {
-  describe("returns the src value of first media_item", () => {
-    it("when the matching key is found and the src is not empty", () => {
-      const result = imageSrcFromMediaItem(entry, ["logo_thumbnail"]);
-
-      expect(result).toEqual(entry.media_group[1].media_item[0].src);
-      expect(result).not.toEqual("");
-    });
-  });
-
-  it("returns a media item with the 'image_base' key as a fallback", () => {
-    const result = imageSrcFromMediaItem(entry, ["does_not_exist"]);
-    const fallback = entry.media_group[0].media_item[0];
-    expect(result).toEqual(fallback.src);
-    expect(fallback.key).toBe("image_base");
-  });
-
-  it("returns undefined if the key was found but the source was empty", () => {
-    const badEntry = R.set(
-      R.lensPath(["media_group", 0, "media_item", 0, "src"]),
-      "",
-      entry
-    );
-
-    expect(imageSrcFromMediaItem(badEntry, ["image_base"])).toBeUndefined();
-  });
-});
-
 describe("populateConfigurationValues", () => {
   it("transforms and returns the valid values", () => {
     const fields = [

package/configurationUtils/__tests__/getMediaItems.test.ts

@@ -0,0 +1,65 @@
+import { getMediaItems } from "..";
+import { entry as baseEntry } from "./testEntry";
+
+describe("getMediaItems", () => {
+  it("returns both image and thumbnail media items", () => {
+    const items = getMediaItems(baseEntry);
+    expect(items).toHaveLength(2);
+    expect(items[0].key).toBe("image_base");
+    expect(items[1].key).toBe("logo_thumbnail");
+  });
+
+  it("returns only image media items if no thumbnail present", () => {
+    const entry = {
+      ...baseEntry,
+      media_group: [
+        {
+          type: "image",
+          media_item: [
+            { key: "image_base", src: "img.png" },
+            { key: "other", src: "other.png" },
+          ],
+        },
+      ],
+    };
+
+    const items = getMediaItems(entry);
+    expect(items).toHaveLength(2);
+    expect(items[0].key).toBe("image_base");
+    expect(items[1].key).toBe("other");
+  });
+
+  it("returns only thumbnail media items if no image present", () => {
+    const entry = {
+      ...baseEntry,
+      media_group: [
+        {
+          type: "thumbnail",
+          media_item: [{ key: "thumb1", src: "thumb1.png" }],
+        },
+      ],
+    };
+
+    const items = getMediaItems(entry);
+    expect(items).toHaveLength(1);
+    expect(items[0].key).toBe("thumb1");
+  });
+
+  it("returns undefined if no media_group present", () => {
+    const entry = { ...baseEntry };
+    delete entry.media_group;
+    expect(getMediaItems(entry)).toBeUndefined();
+  });
+
+  it("returns undefined if media_group is present but has no image or thumbnail", () => {
+    const entry = {
+      ...baseEntry,
+      media_group: [
+        { type: "audio", media_item: [{ key: "audio1", src: "audio1.mp3" }] },
+      ],
+    };
+
+    const items = getMediaItems(entry);
+    expect(items).toBeUndefined();
+  });
+});

package/configurationUtils/__tests__/imageSrcFromMediaItem.test.ts

@@ -0,0 +1,34 @@
+import * as R from "ramda";
+import { imageSrcFromMediaItem } from "../";
+import { entry } from "./testEntry";
+
+describe("imageSrcFromMediaItem", () => {
+  it("when the matching key is found and the src is not empty", () => {
+    const result = imageSrcFromMediaItem(entry as ZappEntry, [
+      "logo_thumbnail",
+    ]);
+
+    expect(result).toEqual(entry.media_group[1].media_item[0].src);
+    expect(result).not.toEqual("");
+  });
+
+  it("returns a media item with the 'image_base' key as a fallback", () => {
+    const result = imageSrcFromMediaItem(entry as ZappEntry, [
+      "does_not_exist",
+    ]);
+
+    const fallback = entry.media_group[0].media_item[0];
+    expect(result).toEqual(fallback.src);
+    expect(fallback.key).toBe("image_base");
+  });
+
+  it("returns undefined if the key was found but the source was empty", () => {
+    const badEntry: ZappEntry = R.set(
+      R.lensPath(["media_group", 0, "media_item", 0, "src"]),
+      "",
+      entry
+    );
+
+    expect(imageSrcFromMediaItem(badEntry, ["image_base"])).toBeUndefined();
+  });
+});

package/configurationUtils/index.ts

@@ -1,6 +1,12 @@
 /// <reference types="@applicaster/applicaster-types" />
 import * as R from "ramda";
 import { Platform } from "react-native";
+import {
+  isFilledArray,
+  isEmptyArray,
+} from "@applicaster/zapp-react-native-utils/arrayUtils";
+import { isEmpty } from "@applicaster/zapp-react-native-utils/utils";
+
 import { applyTransform } from "../transform";
 import { ManifestField } from "../types";
 import { isNilOrEmpty } from "../reactUtils/helpers";
@@ -122,54 +128,77 @@ export function flattenFields(
 }
 
 /**
- * Retrieves the value of the "src" in the first media_item
- * that has the matching key provided in args.
- * Fallbacks: "image_base" key, or first media_item that has any "src"
- * @param {Object} entry    Single entry from a feed
- * @param {Array} arg      Array with a single element - the key of the media item
- *                          from which the "src" should be retrieved
- * @returns {?String}       Value of "src", usually a URI
+ * Retrieves all media items from the entry's media_group that are of type "image" or "thumbnail".
+ *
+ * @param {ZappEntry} entry - The entry object containing the media_group array.
+ * @returns {Option<ZappMediaItem[]>} An array of media items of type "image" or "thumbnail", or undefined if no media_group is present.
+ */
+export function getMediaItems(entry: ZappEntry): Option<ZappMediaItem[]> {
+  const mediaGroup = entry?.media_group || [];
+
+  if (isEmptyArray(mediaGroup)) {
+    return undefined;
+  }
+
+  const mediaItems = mediaGroup
+    .filter((group) => ["image", "thumbnail"].includes(group.type))
+    .flatMap((group) =>
+      Array.isArray(group.media_item) ? group.media_item : [group.media_item]
+    );
+
+  if (isFilledArray(mediaItems)) {
+    return mediaItems;
+  }
+
+  return undefined;
+}
+
+/**
+ * Retrieves the "src" value from a media item in the entry's media group,
+ * based on a provided key, with fallback logic.
+ *
+ * Fallback order:
+ *   1. Attempts to find a media item with the specified key (or "image_base" if none provided).
+ *   2. If not found, attempts to find a media item with the key "image_base".
+ *   3. If still not found, falls back to the first available media item.
+ *
+ * Special handling: If the resolved item's "src" is an empty string, returns undefined,
+ * since empty URIs are invalid in some platforms (e.g., React Native).
+ *
+ * @param {ZappEntry} entry - The entry object containing a media group.
+ * @param {string[] | unknown} arg - A single-element array containing the key to look up, or any unknown value.
+ * @returns {?string} The "src" URI from the matched media item, or undefined if not found or empty.
  */
 export function imageSrcFromMediaItem(
   entry: ZappEntry,
   arg: string[] | unknown
-) {
+): Option<string> {
   const args: unknown = R.unless(Array.isArray, Array)(arg || []);
   const imageKey: string = args?.[0] || "image_base"; // always a single key in this function
-  const mediaGroup = R.path<ZappMediaGroup[]>(["media_group"], entry);
 
-  if (!mediaGroup) {
+  const mediaItems = getMediaItems(entry);
+
+  if (!mediaItems) {
     return undefined;
   }
 
-  const hasTypeImageOrThumbnail = R.either(
-    R.propEq("type", "image"),
-    R.propEq("type", "thumbnail")
-  );
-
-  const pickMediaItemProp = R.prop<ZappMediaItem>("media_item");
+  // Try to find the item with the given key
+  let foundItem = mediaItems.find((item) => item.key === imageKey);
 
-  const mediaItems = R.compose(
-    R.flatten,
-    R.map(pickMediaItemProp),
-    R.filter(hasTypeImageOrThumbnail)
-  )(mediaGroup);
+  // If not found and key was not "image_base", try to find "image_base"
+  if (!foundItem && imageKey !== "image_base") {
+    foundItem = mediaItems.find((item) => item.key === "image_base");
+  }
 
-  if (!mediaItems) {
-    return undefined;
+  // If still not found, default to first item
+  if (!foundItem) {
+    foundItem = mediaItems[0];
   }
 
-  const src = R.compose(
-    R.prop("src"),
-    R.defaultTo(R.head(mediaItems)),
-    R.when(R.isNil, () => R.find(R.propEq("key", "image_base"), mediaItems)),
-    R.find(R.propEq("key", imageKey))
-  )(mediaItems);
-
-  // Special case for react native - uri cannot be an empty string (yellow warning).
-  // R.isEmpty is tailored specifically for checks like these,
-  // it returns false for undefined values.
-  return R.isEmpty(src) ? undefined : src;
+  const src = foundItem?.src;
+
+  // React Native quirk: empty string is invalid for URIs
+  return isEmpty(src) ? undefined : src;
 }
 
 /**

package/localizationUtils/index.ts

@@ -1,8 +1,8 @@
 import { ViewStyle } from "react-native";
 
 import { useMemo } from "react";
-import { getUILanguage } from "../appUtils/localizationsHelper";
-import { utilsLogger } from "../logger";
+import { getUILanguage } from "@applicaster/zapp-react-native-utils/appUtils/localizationsHelper";
+import { utilsLogger } from "@applicaster/zapp-react-native-utils/logger";
 
 export {
   getLocale,
@@ -10,7 +10,7 @@ export {
   getCountryCode,
   getLocalizations,
   getUILanguage,
-} from "../appUtils/localizationsHelper";
+} from "@applicaster/zapp-react-native-utils/appUtils/localizationsHelper";
 
 const RTL_LOCALES = [
   "ar", // Arabic

package/manifestUtils/defaultManifestConfigurations/generalContent.js

@@ -251,6 +251,19 @@ const generalContent = () => ({
         key: "screen_title",
         initial_value: null,
       },
+      {
+        type: "text_input",
+        label: "Maximum Selection Reached - Alert Description",
+        key: "msg_maximum_selection_reached_message",
+        initial_value:
+          "You’ve reached the maximum number of items you can select.",
+      },
+      {
+        type: "text_input",
+        label: "Maximum Selection Reached - Alert Button",
+        key: "msg_maximum_selection_reached_message_ok_button",
+        initial_value: "Got it",
+      },
     ],
   },
   advertising: {

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -42,14 +42,6 @@ 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.",
-      },
       {
         key: "audio_player_background_image_default_color",
         label: "Audio Player Background Image Default Color",
@@ -2339,7 +2331,53 @@ function getPlayerConfiguration({ platform }) {
             type: "number_input",
             label: "Android TV Font Size",
             key: "android_tv_audio_player_summary_font_size",
-            initial_value: 25,
+            initial_value: 22,
+          },
+        ]
+      ),
+      fieldsGroup(
+        "Audio Player Background",
+        "This section allows you to configure the audio player layout",
+        [
+          {
+            key: "audio_player_background_color",
+            label: "Background Color",
+            label_tooltip:
+              "Set a background color using hex format and opacity. If left empty, the default color from the app’s theme will be used.",
+            type: "color_picker_rgba",
+            initial_value: "rgba(17, 17, 17, 1)",
+          },
+          {
+            key: "audio_player_background_image",
+            label: "Background Image",
+            label_tooltip:
+              "Upload a background image for the audio player. If no image is provided, the background color will be used as a fallback.",
+            type: "uploader",
+            default: "",
+          },
+          {
+            key: "audio_player_background_image_overlay",
+            label: "Background Image Overlay",
+            label_tooltip:
+              "Add a semi-transparent color overlay to improve text readability over the background image.",
+            type: "color_picker_rgba",
+            initial_value: "rgba(17, 17, 17, 0.5)",
+          },
+          {
+            type: "text_input",
+            label: "Item Image Key",
+            key: "audio_player_artwork_image_key",
+            label_tooltip:
+              "Define the key used to fetch the item’s image. If left empty, a default image will be shown.",
+            initial_value: "image_base",
+          },
+          {
+            key: "audio_player_artwork_border_radius",
+            label: "Item Image Corner Radius",
+            label_tooltip:
+              "Set the corner radius (in pixels) for item images. Leave empty for sharp corners (0px).",
+            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/manifestUtils/sharedConfiguration/screenPicker/stylesFields.js

@@ -8,7 +8,6 @@ const {
   conditional_horizontal_type,
   conditional_vertical_type,
   conditional_horizontal_type_item_fixed,
-  conditional_horizontal_type_item_dynamic,
   conditional_horizontal_asset_on,
   conditional_horizontal_display_type_fixed,
 } = require("./utils");
@@ -48,7 +47,7 @@ const componentConfigurationFields = [
       { text: "Right", value: "right" },
       { text: "Center", value: "center" },
     ],
-    ...conditional_horizontal_type_item_dynamic,
+    ...conditional_horizontal_type,
   },
   {
     type: "select",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-rc.99",
+  "version": "13.0.0",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-rc.99",
+    "@applicaster/applicaster-types": "13.0.0",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/playerUtils/configurationGenerator.ts

@@ -39,22 +39,6 @@ function getPlayerConfiguration({ platform }) {
         label_tooltip:
           "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",
-        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.",
-      },
       {
         key: "audio_player_background_image_default_color",
         label: "Audio Player Background Image Default Color",

package/playerUtils/index.ts

@@ -1,5 +1,9 @@
 import * as R from "ramda";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
+import { isString } from "@applicaster/zapp-react-native-utils/typeGuards";
+import { isFilledArray } from "@applicaster/zapp-react-native-utils/arrayUtils";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+
 import { getBoolFromConfigValue } from "../configurationUtils";
 
 /**
@@ -72,3 +76,22 @@ function isLiveByManager(): boolean {
 export function isLive(entry: ZappEntry): boolean {
   return isEntryLive(entry) || isLiveByManager();
 }
+
+export const isAudioItem = (item: Option<ZappEntry>) => {
+  if (
+    isString(item?.content?.type) &&
+    item?.content?.type?.includes?.("audio")
+  ) {
+    return true;
+  }
+
+  if (isString(item?.type?.value) && item?.type?.value?.includes?.("audio")) {
+    return true;
+  }
+
+  return false;
+};
+
+export const isInlineTV = (screenData) => {
+  return isTV() && isFilledArray(screenData?.ui_components);
+};

package/reactHooks/app/useAppState.ts

@@ -14,10 +14,10 @@ export function useAppState(returnIsActive) {
   };
 
   React.useEffect(() => {
-    AppState.addEventListener("change", setAppState);
+    const subscription = AppState.addEventListener("change", setAppState);
 
     return () => {
-      AppState.removeEventListener("change", setAppState);
+      subscription.remove();
     };
   }, []);
 

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]);
 
@@ -146,11 +144,11 @@ export const useBatchLoading = (
         }
       }
     });
-  }, [feedUrls]);
+  }, [feedUrls, feeds]);
 
   React.useEffect(() => {
     runBatchLoading();
-  }, []);
+  }, [runBatchLoading]); // Adding runBatchLoading as a dependency to ensure that it reloads feeds when clearPipesData is called
 
   React.useEffect(() => {
     // check if all feeds are ready and set hasEverBeenReady to true

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