@applicaster/zapp-react-native-utils 14.0.0-rc.13 → 14.0.0-rc.15

package/audioPlayerUtils/index.ts

@@ -1,3 +1,8 @@
+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";
 
@@ -136,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/manifestUtils/_internals/getDefaultConfiguration.js

@@ -0,0 +1,28 @@
+const R = require("ramda");
+const { defaultConfigurations } = require("../defaultManifestConfigurations");
+
+/**
+ * returns default configuration keys for provided plugin type
+ * @param {('general-content'|'player')} pluginType
+ * @param options manifest generator information
+ * @param {string} options.version manifest version
+ * @param {string} options.platform qb platform value
+ */
+function getDefaultConfiguration(pluginType, options) {
+  const defConfig = R.compose(
+    R.unless(R.isNil, (fn) => fn(options)),
+    R.propOr(null, pluginType)
+  )(defaultConfigurations);
+
+  if (!defConfig) {
+    const availableKeys = R.keys(defaultConfigurations);
+
+    const message = `Requested key "${pluginType}" doesn't exist in the default configuration\nAvailable keys: ${availableKeys}`;
+    // eslint-disable-next-line no-console
+    console.warn(message);
+  }
+
+  return defConfig;
+}
+
+module.exports = { getDefaultConfiguration };

package/manifestUtils/{_internals.js → _internals/index.js}

@@ -1,6 +1,7 @@
 const R = require("ramda");
 const camelize = require("camelize");
-const { defaultConfigurations } = require("./defaultManifestConfigurations");
+
+const { getDefaultConfiguration } = require("./getDefaultConfiguration");
 
 const toSnakeCase = R.compose(R.replace(/\s/g, "_"), R.toLower, R.trim);
 
@@ -173,30 +174,6 @@ function generateFieldsFromDefaultsWithoutPrefixedLabel(
   )(fields);
 }
 
-/**
- * returns default configuration keys for provided plugin type
- * @param {('general-content'|'player')} pluginType
- * @param options manifest generator information
- * @param {string} options.version manifest version
- * @param {string} options.platform qb platform value
- */
-function getDefaultConfiguration(pluginType, options) {
-  const defConfig = R.compose(
-    R.unless(R.isNil, (fn) => fn(options)),
-    R.propOr(null, pluginType)
-  )(defaultConfigurations);
-
-  if (!defConfig) {
-    const availableKeys = R.keys(defaultConfigurations);
-
-    const message = `Requested key "${pluginType}" doesn't exist in the default configuration\nAvailable keys: ${availableKeys}`;
-    // eslint-disable-next-line no-console
-    console.warn(message);
-  }
-
-  return defConfig;
-}
-
 module.exports = {
   toSnakeCase,
   toCamelCase,

package/manifestUtils/createConfig.js

@@ -1,5 +1,8 @@
 const R = require("ramda");
-const { getDefaultConfiguration } = require("./_internals");
+
+const {
+  getDefaultConfiguration,
+} = require("./_internals/getDefaultConfiguration");
 
 const indexByKey = R.indexBy((obj) => R.prop(obj.group ? "label" : "key", obj));
 const propIfExist = R.curry((prop) => R.when(R.prop(prop), R.prop(prop)));