@applicaster/zapp-react-native-utils 14.0.0-alpha.4011674803 → 14.0.0-alpha.4552519200

package/analyticsUtils/AnalyticsEvents/sendHeaderClickEvent.ts

@@ -4,7 +4,7 @@ import { postAnalyticEvent } from "../manager";
 import { ANALYTICS_CORE_EVENTS } from "../events";
 
 type SendHeaderClickEventProps = {
-  extraProps: ExtraProps;
+  extraProps: Record<string, any>;
   component?: ZappUIComponent;
   zappPipesData?: ZappPipesData;
   item?: ZappEntry;

package/analyticsUtils/AnalyticsEvents/sendMenuClickEvent.ts

@@ -1,10 +1,11 @@
+/// <reference types="../../" />
 import { log_error, log_debug } from "../logger";
 import { replaceAnalyticsPropsNils } from "./helper";
 import { postAnalyticEvent } from "../manager";
 
 import { ANALYTICS_CORE_EVENTS } from "../events";
 
-declare type AnalyticsDefaultHelperProperties = {
+type AnalyticsDefaultHelperProperties = {
   analyticsScreenData: AnalyticsScreenProperties;
   extraProps: any;
   props;

package/analyticsUtils/index.tsx

@@ -1,4 +1,3 @@
-/// <reference types="@applicaster/zapp-react-native-utils" />
 import * as R from "ramda";
 import * as React from "react";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
@@ -31,7 +30,7 @@ import { ANALYTICS_CORE_EVENTS } from "./events";
 import { noop } from "../functionUtils";
 
 type ComponentWithChildrenProps = {
-  children: React.ReactChildren;
+  children: React.ReactElement;
 };
 
 export function sendSelectCellEvent(item, component, headerTitle, itemIndex) {
@@ -120,11 +119,11 @@ export function getAnalyticsFunctions({
 export const AnalyticsContext =
   React.createContext<GetAnalyticsFunctions>(noop);
 
-export function AnalyticsProvider(props: ComponentWithChildrenProps) {
+export function AnalyticsProvider({ children }: ComponentWithChildrenProps) {
   return (
     // @ts-ignore - this is a valid context provider
     <AnalyticsContext.Provider value={getAnalyticsFunctions}>
-      {props?.children}
+      {children}
     </AnalyticsContext.Provider>
   );
 }

package/analyticsUtils/manager.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as R from "ramda";
 import { NativeModules } from "react-native";
-import { ANALYTICS_CORE_EVENTS } from "@applicaster/zapp-react-native-utils/analyticsUtils/events";
+import { ANALYTICS_CORE_EVENTS } from "./events";
 
 import { analyticsUtilsLogger } from "./logger";
 

package/arrayUtils/__tests__/isEmptyArray.test.ts

@@ -0,0 +1,63 @@
+import { isEmptyArray } from "..";
+
+describe("isEmptyArray", () => {
+  it("non-empty array is not empty", () => {
+    const value = [1, 2, 3];
+
+    expect(isEmptyArray(value)).toBe(false);
+  });
+
+  it("empty array is empty", () => {
+    const value = [];
+
+    expect(isEmptyArray(value)).toBe(true);
+  });
+
+  it("number is not array", () => {
+    const value = 123;
+
+    expect(isEmptyArray(value)).toBe(false);
+  });
+
+  it("string is not array", () => {
+    const value = "vfnjdk";
+
+    expect(isEmptyArray(value)).toBe(false);
+  });
+
+  it("empty string is not array", () => {
+    const value = "";
+
+    expect(isEmptyArray(value)).toBe(false);
+  });
+
+  it("NaN is not array", () => {
+    const value = NaN;
+
+    expect(isEmptyArray(value)).toBe(false);
+  });
+
+  it("object is not array", () => {
+    const value = { test: 1 };
+
+    expect(isEmptyArray(value)).toBe(false);
+  });
+
+  it("empty object is not array", () => {
+    const value = {};
+
+    expect(isEmptyArray(value)).toBe(false);
+  });
+
+  it("undefined is not array", () => {
+    const value = undefined;
+
+    expect(isEmptyArray(value)).toBe(false);
+  });
+
+  it("null is not array", () => {
+    const value = null;
+
+    expect(isEmptyArray(value)).toBe(false);
+  });
+});

package/arrayUtils/__tests__/isFilledArray.test.ts

@@ -32,7 +32,7 @@ describe("isFilledArray", () => {
   });
 
   it("NaN is not array", () => {
-    const value = "";
+    const value = NaN;
 
     expect(isFilledArray(value)).toBe(false);
   });

package/arrayUtils/index.ts

@@ -99,12 +99,17 @@ export const makeListOf = (value: unknown, size: number): number[] => {
 
 /** Checks if a value is a non-empty array */
 export function isFilledArray(value: unknown): boolean {
-  return R.is(Array, value) && R.length(value) > 0;
+  return Array.isArray(value) && value.length > 0;
+}
+
+/** Checks if a value is a empty array */
+export function isEmptyArray(value: unknown): boolean {
+  return Array.isArray(value) && value.length === 0;
 }
 
 // get random item from the list
 export const sample = (xs: unknown[]): unknown => {
-  invariant(R.is(Array, xs), `input value is not a array: ${xs}`);
+  invariant(Array.isArray(xs), `input value is not an array: ${xs}`);
   invariant(isFilledArray(xs), `input array is empty: ${xs}`);
 
   const index = Math.floor(Math.random() * xs.length);

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 } 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, plugin_configuration) =>
-  plugin_configuration?.[key];
+const getPropertyFromConfiguration = (
+  key: string,
+  plugin_configuration: Record<string, any>
+) => plugin_configuration?.[key];
 
-export const getBackgroundImage = ({ entry, plugin_configuration }): string => {
+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);
 
@@ -58,7 +66,7 @@ export const getBackgroundImage = ({ entry, plugin_configuration }): string => {
     entry
   );
 
-  if (audioPlayerBackgroundImageFromExtensions) {
+  if (isNotEmptyString(audioPlayerBackgroundImageFromExtensions)) {
     return audioPlayerBackgroundImageFromExtensions;
   }
 
@@ -84,7 +92,7 @@ export const getBackgroundImage = ({ entry, plugin_configuration }): string => {
       plugin_configuration
     );
 
-  if (audioPlayerBackgroundImageFromConfiguration) {
+  if (isNotEmptyString(audioPlayerBackgroundImageFromConfiguration)) {
     return audioPlayerBackgroundImageFromConfiguration;
   }
 
@@ -92,11 +100,17 @@ export const getBackgroundImage = ({ entry, plugin_configuration }): string => {
   return DEFAULT_IMAGE;
 };
 
+type GetArtworkImageParams = {
+  key: string;
+  entry: ZappEntry;
+  plugin_configuration: Record<string, any>;
+};
+
 export const getArtworkImage = ({
   key,
   entry,
   plugin_configuration,
-}): string => {
+}: GetArtworkImageParams): string => {
   // 1) image_key from extensions
   const imageKeyFromExtensions = getPropertyFromExtensions(key, entry);
 
@@ -127,3 +141,102 @@ export const getArtworkImage = ({
   // 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();
+  });
+});