@applicaster/zapp-react-native-utils 13.0.0-rc.140 → 13.0.0-rc.142

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/manifestUtils/defaultManifestConfigurations/player.js

@@ -2331,7 +2331,53 @@ function getPlayerConfiguration({ platform }) {
             type: "number_input",
             label: "Android TV Font Size",
             key: "android_tv_audio_player_summary_font_size",
-            initial_value: 25,
+            initial_value: 22,
+          },
+        ]
+      ),
+      fieldsGroup(
+        "Audio Player Background",
+        "This section allows you to configure the audio player layout",
+        [
+          {
+            key: "audio_player_background_color",
+            label: "Background Color",
+            label_tooltip:
+              "Set a background color using hex format and opacity. If left empty, the default color from the app’s theme will be used.",
+            type: "color_picker_rgba",
+            initial_value: "rgba(17, 17, 17, 1)",
+          },
+          {
+            key: "audio_player_background_image",
+            label: "Background Image",
+            label_tooltip:
+              "Upload a background image for the audio player. If no image is provided, the background color will be used as a fallback.",
+            type: "uploader",
+            default: "",
+          },
+          {
+            key: "audio_player_background_image_overlay",
+            label: "Background Image Overlay",
+            label_tooltip:
+              "Add a semi-transparent color overlay to improve text readability over the background image.",
+            type: "color_picker_rgba",
+            initial_value: "rgba(17, 17, 17, 0.5)",
+          },
+          {
+            type: "text_input",
+            label: "Item Image Key",
+            key: "audio_player_artwork_image_key",
+            label_tooltip:
+              "Define the key used to fetch the item’s image. If left empty, a default image will be shown.",
+            initial_value: "image_base",
+          },
+          {
+            key: "audio_player_artwork_border_radius",
+            label: "Item Image Corner Radius",
+            label_tooltip:
+              "Set the corner radius (in pixels) for item images. Leave empty for sharp corners (0px).",
+            type: "number_input",
+            initial_value: 16,
           },
         ]
       ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-rc.140",
+  "version": "13.0.0-rc.142",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-rc.140",
+    "@applicaster/applicaster-types": "13.0.0-rc.142",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/time/BackgroundTimer.ts

@@ -13,13 +13,15 @@ class BackgroundTimer {
 
     const EventEmitter = platformSelect({
       android: DeviceEventEmitter,
-      ios: undefined,
+      android_tv: DeviceEventEmitter,
+      amazon: DeviceEventEmitter, // probably does not exist and uses android_tv
       default: undefined,
     });
 
     EventEmitter?.addListener("BackgroundTimer.timer.fired", (id: number) => {
-      if (this.callbacks[id]) {
-        const callback = this.callbacks[id];
+      const callback = this.callbacks[id];
+
+      if (callback) {
         delete this.callbacks[id];
         callback();
       }

package/utils/index.ts

@@ -9,4 +9,8 @@ export {
   size,
   isNil,
   isEmpty,
+  get,
+  has,
+  flatMap,
+  difference,
 } from "lodash";