@applicaster/zapp-react-native-utils/audioPlayerUtils/index.ts

Applicaster Zapp React Native utilities package

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]
  );
};