@applicaster/zapp-react-native-utils 14.0.0-alpha.2332850672 → 14.0.0-alpha.2385258459

package/audioPlayerUtils/__tests__/getImageFromEntry.test.ts

@@ -53,4 +53,58 @@ describe("getImageFromEntry", () => {
 
     expect(result).toBeUndefined();
   });
+
+  it("returns undefined for non string src", () => {
+    const entryWithNonStringSrc = {
+      media_group: [
+        {
+          media_item: [
+            {
+              key: "image_base_key",
+              src: 123,
+            },
+            {
+              key: "thumb_1",
+              src: null,
+            },
+          ],
+          type: "image",
+        },
+      ],
+    };
+
+    const result = getImageFromEntry({
+      entry: entryWithNonStringSrc,
+      imageKey: "image_base_key",
+    });
+
+    expect(result).toBeUndefined();
+  });
+
+  it("returns undefined for empty src", () => {
+    const entryWithEmptySrc = {
+      media_group: [
+        {
+          media_item: [
+            {
+              key: "image_base_key",
+              src: "",
+            },
+            {
+              key: "thumb_1",
+              src: null,
+            },
+          ],
+          type: "image",
+        },
+      ],
+    };
+
+    const result = getImageFromEntry({
+      entry: entryWithEmptySrc,
+      imageKey: "image_base_key",
+    });
+
+    expect(result).toBeUndefined();
+  });
 });

package/audioPlayerUtils/index.ts

@@ -1,4 +1,10 @@
-import { isEmpty, isPresent } from "@applicaster/zapp-react-native-utils/utils";
+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";
 
@@ -9,20 +15,9 @@ export function getImageFromEntry({
   entry: ZappEntry;
   imageKey: Option<string>;
 }): Option<string> {
-  const mediaGroup = entry?.media_group;
+  const mediaItems = getMediaItems(entry);
 
-  if (!Array.isArray(mediaGroup)) {
-    return undefined;
-  }
-
-  // Find all media_items from groups of type 'image'
-  const mediaItems = mediaGroup
-    .filter((group) => group.type === "image")
-    .flatMap((group) =>
-      Array.isArray(group.media_item) ? group.media_item : [group.media_item]
-    );
-
-  if (!Array.isArray(mediaItems) || mediaItems.length === 0) {
+  if (!mediaItems) {
     return undefined;
   }
 
@@ -31,15 +26,28 @@ export function getImageFromEntry({
   const src = found?.src;
 
   // Special case for react native - uri cannot be an empty string (yellow warning).
-  return isEmpty(src) ? undefined : src;
+  return isNotEmptyString(src) ? src : undefined;
 }
 
-const getPropertyFromExtensions = (key, entry) => entry?.extensions?.[key];
+const getPropertyFromExtensions = (
+  key: string,
+  entry: ZappEntry
+): Option<string> => entry?.extensions?.[key];
+
+const getPropertyFromConfiguration = (
+  key: string,
+  plugin_configuration: Record<string, any>
+) => plugin_configuration?.[key];
 
-const getPropertyFromConfiguration = (key, plugin_configuration) =>
-  plugin_configuration?.[key];
+type GetBackgroundImageParams = {
+  entry: ZappEntry;
+  plugin_configuration: Record<string, any>;
+};
 
-export const getBackgroundImage = ({ entry, plugin_configuration }): string => {
+export const getBackgroundImage = ({
+  entry,
+  plugin_configuration,
+}: GetBackgroundImageParams): string => {
   // 1) image_key from extensions
   const imageKeyFromExtensions = getPropertyFromExtensions("image_key", entry);
 
@@ -48,7 +56,7 @@ export const getBackgroundImage = ({ entry, plugin_configuration }): string => {
     imageKey: imageKeyFromExtensions,
   });
 
-  if (isPresent(imageFromExtensions)) {
+  if (imageFromExtensions) {
     return imageFromExtensions;
   }
 
@@ -58,7 +66,7 @@ export const getBackgroundImage = ({ entry, plugin_configuration }): string => {
     entry
   );
 
-  if (isPresent(audioPlayerBackgroundImageFromExtensions)) {
+  if (isNotEmptyString(audioPlayerBackgroundImageFromExtensions)) {
     return audioPlayerBackgroundImageFromExtensions;
   }
 
@@ -73,7 +81,7 @@ export const getBackgroundImage = ({ entry, plugin_configuration }): string => {
     imageKey: imageKeyFromConfiguration,
   });
 
-  if (isPresent(imageFromConfiguration)) {
+  if (imageFromConfiguration) {
     return imageFromConfiguration;
   }
 
@@ -84,7 +92,7 @@ export const getBackgroundImage = ({ entry, plugin_configuration }): string => {
       plugin_configuration
     );
 
-  if (isPresent(audioPlayerBackgroundImageFromConfiguration)) {
+  if (isNotEmptyString(audioPlayerBackgroundImageFromConfiguration)) {
     return audioPlayerBackgroundImageFromConfiguration;
   }
 
@@ -92,12 +100,143 @@ export const getBackgroundImage = ({ entry, plugin_configuration }): string => {
   return DEFAULT_IMAGE;
 };
 
-// getConfiguration(key, entry, zappConfig) {
-//     return entry.extensions[key] || zappConfig[key]
-//   }
+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 imageKey = getConfiguration("image_key", entry, zappConfig);
+  const imageFromConfiguration = getImageFromEntry({
+    entry,
+    imageKey: imageKeyFromConfiguration,
+  });
 
-// const audioPlayerBackgroundImage = getConfiguration("audio_player_background_image", entry, zappConfig)
+  if (imageFromConfiguration) {
+    return imageFromConfiguration;
+  }
 
-// const imageSrc = getIimageFromEntry(imageKey) || audio_player_background_image
+  // 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/componentsUtils/__tests__/isTabsScreen.test.ts

@@ -0,0 +1,38 @@
+import { isTabsScreen } from "..";
+
+describe("isTabsScreen", () => {
+  it("should return true if the component type is 'screen-picker-qb-tv' and tabs_screen=true", () => {
+    const item = { component_type: "screen-picker-qb-tv", tabs_screen: true };
+    expect(isTabsScreen(item)).toBe(true);
+  });
+
+  it("should return true if the component type is 'screen-picker-qb-tv' and tabs_screen=false", () => {
+    const item = { component_type: "screen-picker-qb-tv", tabs_screen: false };
+    expect(isTabsScreen(item)).toBe(false);
+  });
+
+  it("should return false if the component type is not 'screen-picker-qb-tv'", () => {
+    const item = { component_type: "other-component" };
+    expect(isTabsScreen(item)).toBe(false);
+  });
+
+  it("should return false if the component type is undefined", () => {
+    const item = { component_type: undefined };
+    expect(isTabsScreen(item)).toBe(false);
+  });
+
+  it("should return false if the item is null", () => {
+    const item = null;
+    expect(isTabsScreen(item)).toBe(false);
+  });
+
+  it("should return false if the item is undefined", () => {
+    const item = undefined;
+    expect(isTabsScreen(item)).toBe(false);
+  });
+
+  it("should return false if the item is an empty object", () => {
+    const item = {};
+    expect(isTabsScreen(item)).toBe(false);
+  });
+});

package/componentsUtils/index.ts

@@ -5,7 +5,7 @@ const EMPTY_GROUP_COMPONENT = "empty_group_component";
 
 const GALLERY = "gallery-qb";
 
-const SCREEN_PICKER = "screen-picker-qb-tv";
+export const SCREEN_PICKER = "screen-picker-qb-tv";
 
 const HORIZONTAL_LIST = "horizontal_list_qb";
 
@@ -37,3 +37,6 @@ export const isEmptyGroup = (item): boolean =>
 export const isGroupInfo = (item): boolean =>
   item?.component_type === GROUP_INFO ||
   item?.component_type === GROUP_INFO_OLD;
+
+export const isTabsScreen = (item): boolean =>
+  isScreenPicker(item) && item?.tabs_screen;

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();
+  });
+});