@applicaster/zapp-react-native-utils 14.0.0-rc.3 → 14.0.0-rc.30

package/audioPlayerUtils/index.ts

@@ -0,0 +1,242 @@
+import * as React from "react";
+import { get, has } from "@applicaster/zapp-react-native-utils/utils";
+import { useZStore } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+
+import { isNotEmptyString } from "@applicaster/zapp-react-native-utils/stringUtils";
+import { getMediaItems } from "@applicaster/zapp-react-native-utils/configurationUtils";
+
+import { DEFAULT_IMAGE } from "./assets";
+
+export function getImageFromEntry({
+  entry,
+  imageKey,
+}: {
+  entry: ZappEntry;
+  imageKey: Option<string>;
+}): Option<string> {
+  const mediaItems = getMediaItems(entry);
+
+  if (!mediaItems) {
+    return undefined;
+  }
+
+  // Find the media item with the matching key
+  const found = mediaItems.find((item) => item.key === imageKey);
+  const src = found?.src;
+
+  // Special case for react native - uri cannot be an empty string (yellow warning).
+  return isNotEmptyString(src) ? src : undefined;
+}
+
+const getPropertyFromExtensions = (
+  key: string,
+  entry: ZappEntry
+): Option<string> => entry?.extensions?.[key];
+
+const getPropertyFromConfiguration = (
+  key: string,
+  plugin_configuration: Record<string, any>
+) => plugin_configuration?.[key];
+
+type GetBackgroundImageParams = {
+  entry: ZappEntry;
+  plugin_configuration: Record<string, any>;
+};
+
+export const getBackgroundImage = ({
+  entry,
+  plugin_configuration,
+}: GetBackgroundImageParams): string => {
+  // 1) image_key from extensions
+  const imageKeyFromExtensions = getPropertyFromExtensions("image_key", entry);
+
+  const imageFromExtensions = getImageFromEntry({
+    entry,
+    imageKey: imageKeyFromExtensions,
+  });
+
+  if (imageFromExtensions) {
+    return imageFromExtensions;
+  }
+
+  // 2) audio_player_background_image from extensions(KAN case)
+  const audioPlayerBackgroundImageFromExtensions = getPropertyFromExtensions(
+    "audio_player_background_image",
+    entry
+  );
+
+  if (isNotEmptyString(audioPlayerBackgroundImageFromExtensions)) {
+    return audioPlayerBackgroundImageFromExtensions;
+  }
+
+  // 3) image_key from configuration
+  const imageKeyFromConfiguration = getPropertyFromConfiguration(
+    "audio_player_image_key",
+    plugin_configuration
+  );
+
+  const imageFromConfiguration = getImageFromEntry({
+    entry,
+    imageKey: imageKeyFromConfiguration,
+  });
+
+  if (imageFromConfiguration) {
+    return imageFromConfiguration;
+  }
+
+  // 4) audio_player_background_image from configuration
+  const audioPlayerBackgroundImageFromConfiguration =
+    getPropertyFromConfiguration(
+      "audio_player_background_image",
+      plugin_configuration
+    );
+
+  if (isNotEmptyString(audioPlayerBackgroundImageFromConfiguration)) {
+    return audioPlayerBackgroundImageFromConfiguration;
+  }
+
+  // default image
+  return DEFAULT_IMAGE;
+};
+
+type GetArtworkImageParams = {
+  key: string;
+  entry: ZappEntry;
+  plugin_configuration: Record<string, any>;
+};
+
+export const getArtworkImage = ({
+  key,
+  entry,
+  plugin_configuration,
+}: GetArtworkImageParams): string => {
+  // 1) image_key from extensions
+  const imageKeyFromExtensions = getPropertyFromExtensions(key, entry);
+
+  const imageFromExtensions = getImageFromEntry({
+    entry,
+    imageKey: imageKeyFromExtensions,
+  });
+
+  if (imageFromExtensions) {
+    return imageFromExtensions;
+  }
+
+  // 2) image_key from configuration
+  const imageKeyFromConfiguration = getPropertyFromConfiguration(
+    key,
+    plugin_configuration
+  );
+
+  const imageFromConfiguration = getImageFromEntry({
+    entry,
+    imageKey: imageKeyFromConfiguration,
+  });
+
+  if (imageFromConfiguration) {
+    return imageFromConfiguration;
+  }
+
+  // default image
+  return DEFAULT_IMAGE;
+};
+
+const useAdjustedKeyFromScreenData = ({ config, keys }) => {
+  const { screenData } = useRoute();
+
+  const adjustedConfig = { ...config };
+
+  keys.forEach((key) => {
+    const path = ["targetScreen", "styles", key];
+
+    if (has(screenData, path)) {
+      const value = get(screenData, path);
+
+      adjustedConfig[key] = value;
+    }
+  });
+
+  return adjustedConfig;
+};
+
+const AUDIO_PLAYER_ARTWORK_IMAGE_KEY = "audio_player_artwork_image_key";
+
+const audioPlayerArtworkImageKeySelector = (config) =>
+  config?.[AUDIO_PLAYER_ARTWORK_IMAGE_KEY];
+
+export const useArtworkImage = (entry: ZappEntry): string => {
+  const configuration = useZStore("playerConfiguration");
+
+  const audio_player_artwork_image_key_value = configuration(
+    audioPlayerArtworkImageKeySelector
+  );
+
+  const pluginConfiguration = React.useMemo(
+    () => ({
+      audio_player_artwork_image_key: audio_player_artwork_image_key_value,
+    }),
+    [audio_player_artwork_image_key_value]
+  );
+
+  // HACK: for override [key] from screenData, because we treat empty string value as missing key and replace it to initial_value from manifest(which is wrong)
+  const adjustedPluginConfiguration = useAdjustedKeyFromScreenData({
+    keys: [AUDIO_PLAYER_ARTWORK_IMAGE_KEY],
+    config: pluginConfiguration,
+  });
+
+  return React.useMemo(
+    () =>
+      getArtworkImage({
+        key: AUDIO_PLAYER_ARTWORK_IMAGE_KEY,
+        entry,
+        plugin_configuration: adjustedPluginConfiguration,
+      }),
+    []
+  );
+};
+
+const AUDIO_PLAYER_IMAGE_KEY = "audio_player_image_key";
+const AUDIO_PLAYER_BACKGROUND_IMAGE = "audio_player_background_image";
+
+const audioPlayerImageKeySelector = (config) =>
+  config?.[AUDIO_PLAYER_IMAGE_KEY];
+
+const audioPlayerBackgroundImageSelector = (config) =>
+  config?.[AUDIO_PLAYER_BACKGROUND_IMAGE];
+
+export const useBackgroundImage = (entry: ZappEntry): { uri: string } => {
+  const configuration = useZStore("playerConfiguration");
+
+  const audio_player_image_key_value = configuration(
+    audioPlayerImageKeySelector
+  );
+
+  const audio_player_background_image_value = configuration(
+    audioPlayerBackgroundImageSelector
+  );
+
+  const pluginConfiguration = React.useMemo(
+    () => ({
+      audio_player_image_key: audio_player_image_key_value,
+      audio_player_background_image: audio_player_background_image_value,
+    }),
+    [audio_player_image_key_value, audio_player_background_image_value]
+  );
+
+  // HACK: for override [key] from screenData, because we treat empty string value as missing key and replace it to initial_value from manifest(which is wrong)
+  const adjustedPluginConfiguration = useAdjustedKeyFromScreenData({
+    keys: [AUDIO_PLAYER_IMAGE_KEY, AUDIO_PLAYER_BACKGROUND_IMAGE],
+    config: pluginConfiguration,
+  });
+
+  return React.useMemo(
+    () => ({
+      uri: getBackgroundImage({
+        entry,
+        plugin_configuration: adjustedPluginConfiguration,
+      }),
+    }),
+    [entry, adjustedPluginConfiguration]
+  );
+};

package/conf/player/__tests__/selectors.test.ts

@@ -0,0 +1,34 @@
+import { selectActionButtons } from "@applicaster/zapp-react-native-utils/conf/player/selectors";
+
+describe("selectActionButtons", () => {
+  it("returns the player_action_buttons array if present", () => {
+    const pluginConf = {
+      player_action_buttons: [
+        { id: "like", label: "Like" },
+        { id: "share", label: "Share" },
+      ],
+    };
+
+    expect(selectActionButtons(pluginConf)).toEqual(
+      pluginConf.player_action_buttons
+    );
+  });
+
+  it("returns null if player_action_buttons is not present", () => {
+    const pluginConf = { some_other_key: [] };
+    expect(selectActionButtons(pluginConf)).toBeNull();
+  });
+
+  it("returns null if pluginConf is undefined", () => {
+    expect(selectActionButtons(undefined)).toBeNull();
+  });
+
+  it("returns null if pluginConf is null", () => {
+    expect(selectActionButtons(null)).toBeNull();
+  });
+
+  it("returns null if player_action_buttons is explicitly set to null", () => {
+    const pluginConf = { player_action_buttons: null };
+    expect(selectActionButtons(pluginConf)).toBeNull();
+  });
+});

package/conf/player/selectors.ts

@@ -0,0 +1,10 @@
+import { get } from "@applicaster/zapp-react-native-utils/utils";
+
+/**
+ * Selects the action buttons from the player configuration.
+ * @param {Object} pluginConf - player plugin config
+ * @returns {Array|null} An array of action buttons or null if not found.
+ */
+export const selectActionButtons = (pluginConf: any) => {
+  return get(pluginConf, "player_action_buttons", null);
+};

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/focusManager/FocusManager.ts

@@ -176,18 +176,30 @@ class FocusManager {
     }
   }
 
-  registerFocusable(
-    component: FocusManager.TouchableReactRef,
-    parentFocusable: FocusManager.TouchableReactRef,
-    isFocusableCell: boolean
-  ) {
-    const focusableId = getFocusableId(component);
+  registerFocusable({
+    touchableRef,
+    parentFocusableRef,
+    isFocusableCell,
+    parentFocusableId,
+  }: {
+    touchableRef: FocusManager.TouchableReactRef;
+    parentFocusableRef: FocusManager.TouchableReactRef;
+    isFocusableCell: boolean;
+    parentFocusableId: string;
+  }) {
+    const focusableId = getFocusableId(touchableRef);
+
     const focusableComponent = FocusManager.findFocusable(focusableId);
 
-    if (!focusableComponent && component) {
-      this.focusableComponents.push(component);
+    if (!focusableComponent && touchableRef) {
+      this.focusableComponents.push(touchableRef);
 
-      this.tree.add(component, parentFocusable, isFocusableCell);
+      this.tree.add(
+        touchableRef,
+        parentFocusableRef,
+        isFocusableCell,
+        parentFocusableId
+      );
     } else {
       logger.warning("Focusable component already registered", {
         id: focusableId,
@@ -243,12 +255,10 @@ class FocusManager {
   }
 
   blurPrevious(options?: FocusManager.Android.CallbackOptions) {
-    if (options) {
-      FocusManager.instance.prevFocused?.onBlur?.(
-        FocusManager.instance.prevFocused,
-        options
-      );
-    }
+    FocusManager.instance.prevFocused?.onBlur?.(
+      FocusManager.instance.prevFocused,
+      options ?? {} // Adding fallback to avoid potential regression caused by #7509
+    );
   }
 
   onDisableFocusChange = (id) => {
@@ -269,7 +279,7 @@ class FocusManager {
 
       if (nextFocus) {
         // HACK: hack to fix the hack below
-        // HACK: putting call to the end of the event loop so the next component has a chane to be registered
+        // HACK: putting call to the end of the event loop so the next component has a chance to be registered
         setTimeout(() => {
           FocusManager.instance.setFocus(nextFocus, {
             direction: "down",

package/focusManager/Tree.ts

@@ -8,37 +8,41 @@ export class Tree {
     this.tree = focusManagerTree;
   }
 
-  add(component, parentFocusable, isFocusableCell) {
-    const focusableId = getFocusableId(component);
-    const parentId = getFocusableId(parentFocusable);
+  add(
+    touchableRef: FocusManager.TouchableReactRef,
+    parentFocusableRef: FocusManager.TouchableReactRef,
+    isFocusableCell: boolean,
+    parentFocusableId: string
+  ) {
+    const focusableId = getFocusableId(touchableRef);
+    const parentId = getFocusableId(parentFocusableRef) || parentFocusableId;
     const focusableComponentInTree = this.find(focusableId);
 
     // update node if it already exists
     if (focusableComponentInTree) {
-      focusableComponentInTree.updateNode(component);
+      focusableComponentInTree.updateNode(touchableRef);
     }
 
-    if (parentFocusable?.current) {
-      if (!this.find(parentId)) {
-        this.tree.push(new TreeNode(null, parentId, null, isFocusableCell));
-      }
+    if (!this.find(parentId)) {
+      // create temporary node to the root of the tree
+      this.tree.push(new TreeNode(null, parentId, null, isFocusableCell));
+    }
 
-      const parentNode = this.find(parentId);
+    const parentNode = this.find(parentId);
 
-      if (parentNode) {
-        if (focusableComponentInTree) {
-          focusableComponentInTree.isFocusableCell = isFocusableCell;
-          focusableComponentInTree.parentId = parentNode.id;
+    if (parentNode) {
+      if (focusableComponentInTree) {
+        focusableComponentInTree.isFocusableCell = isFocusableCell;
+        focusableComponentInTree.parentId = parentNode.id;
 
-          parentNode.addChild(focusableComponentInTree);
+        parentNode.addChild(focusableComponentInTree);
 
-          // remove root object from the list
-          this.tree = this.tree.filter(
-            (node) => node !== focusableComponentInTree
-          );
-        } else {
-          parentNode.addChild(component, focusableId, isFocusableCell);
-        }
+        // remove root object from the list
+        this.tree = this.tree.filter(
+          (node) => node !== focusableComponentInTree
+        );
+      } else {
+        parentNode.addChild(touchableRef, focusableId, isFocusableCell);
       }
     }
   }