@applicaster/zapp-react-native-utils 16.0.0-alpha.2480030155 → 16.0.0-alpha.2554311249

package/appUtils/playerManager/usePlayerContent.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Player, PlayerContent } from "./player";
+import { usePlayer } from "./usePlayer";
+
+const EMPTY_CONTENT: PlayerContent = {
+  title: null,
+  summary: null,
+  imageUrl: null,
+};
+
+/**
+ * Subscribes to the player's resolved Title/Subtitle, the same way
+ * `usePlayerState` subscribes to playback state. Modeled on that hook
+ * deliberately: one React bridge pattern for everything the manager publishes.
+ *
+ * Passing no `playerId` uses the active player, which is the right default -
+ * only one player instance is live at a time. `usePlayer` additionally swaps
+ * to the casting receiver while casting, so this follows cast handover
+ * automatically.
+ */
+export const usePlayerContent = (playerId?: string): PlayerContent => {
+  const player: Player = usePlayer(playerId);
+
+  const [content, setContent] = React.useState<PlayerContent>(
+    () => player?.getContent() ?? EMPTY_CONTENT
+  );
+
+  React.useEffect(() => {
+    if (!player) {
+      setContent(EMPTY_CONTENT);
+
+      return;
+    }
+
+    const subscription = player
+      .getContentObservable()
+      .subscribe((next) => setContent(next));
+
+    return () => subscription.unsubscribe();
+  }, [player]);
+
+  return content;
+};

package/arrayUtils/__tests__/reorderByIds.test.ts

@@ -0,0 +1,50 @@
+import { reorderByIds } from "../index";
+
+describe("reorderByIds", () => {
+  const items = [
+    { id: "1", title: "Track 1" },
+    { id: "2", title: "Track 2" },
+    { id: "3", title: "Track 3" },
+    { id: "4", title: "Track 4" },
+  ];
+
+  it("returns an empty array if items is empty or nullish", () => {
+    expect(reorderByIds([], ["1"])).toEqual([]);
+    expect(reorderByIds(null as any, ["1"])).toEqual([]);
+  });
+
+  it("returns a copy of items if orderedIds is empty or nullish", () => {
+    expect(reorderByIds(items, [])).toEqual(items);
+    expect(reorderByIds(items, null as any)).toEqual(items);
+  });
+
+  it("reorders items based on the provided orderedIds sequence", () => {
+    const result = reorderByIds(items, ["3", "1", "4", "2"]);
+
+    expect(result.map((i) => i.id)).toEqual(["3", "1", "4", "2"]);
+  });
+
+  it("replaces items in their original slots when reordering a subset", () => {
+    const result = reorderByIds(items, ["4", "2"]);
+
+    expect(result.map((i) => i.id)).toEqual(["1", "4", "3", "2"]);
+  });
+
+  it("ignores IDs in orderedIds that do not exist in items", () => {
+    const result = reorderByIds(items, ["unknown", "3", "99", "1"]);
+
+    expect(result.map((i) => i.id)).toEqual(["3", "2", "1", "4"]);
+  });
+
+  it("supports custom getId selector function", () => {
+    const customItems = [
+      { key: "a", name: "Alpha" },
+      { key: "b", name: "Beta" },
+      { key: "c", name: "Gamma" },
+    ];
+
+    const result = reorderByIds(customItems, ["c", "a"], (item) => item.key);
+
+    expect(result.map((i) => i.key)).toEqual(["c", "b", "a"]);
+  });
+});

package/arrayUtils/index.ts

@@ -158,3 +158,82 @@ export const allTruthy = (xs: boolean[]) =>
 
 /** Returns `true` when at least one value in `xs` is truthy. */
 export const anyTruthy = (xs: boolean[]) => xs.some(Boolean);
+
+/**
+ * Reorders `items` based on an ordered array of IDs (`orderedIds`).
+ * Items whose IDs are in `orderedIds` appear first in that exact sequence.
+ * Any remaining items not present in `orderedIds` are appended at the end preserving their relative order.
+ */
+export function reorderByIds<T>(
+  items: T[],
+  orderedIds: string[],
+  getId: (item: T) => string | string[] = (item: any) => item?.id
+): T[] {
+  if (!items || items.length === 0) return [];
+  if (!orderedIds || orderedIds.length === 0) return [...items];
+
+  const itemMap = new Map<string, T>();
+
+  items.forEach((item) => {
+    const rawId = getId(item);
+    const keys = Array.isArray(rawId) ? rawId : [rawId];
+
+    keys.forEach((key) => {
+      if (key !== undefined && key !== null && key !== "") {
+        itemMap.set(String(key), item);
+      }
+    });
+  });
+
+  const reorderedSubset: T[] = [];
+  const orderedIdsSet = new Set<string>();
+
+  orderedIds.forEach((id) => {
+    const strId = String(id);
+    const item = itemMap.get(strId);
+
+    if (item && !reorderedSubset.includes(item)) {
+      reorderedSubset.push(item);
+      const rawId = getId(item);
+      const keys = Array.isArray(rawId) ? rawId : [rawId];
+
+      keys.forEach((k) => {
+        if (k !== undefined && k !== null && k !== "") {
+          orderedIdsSet.add(String(k));
+        }
+      });
+    }
+  });
+
+  if (reorderedSubset.length === 0) return [...items];
+
+  let subsetIdx = 0;
+  const result: T[] = [];
+
+  items.forEach((item) => {
+    const rawId = getId(item);
+    const keys = Array.isArray(rawId) ? rawId : [rawId];
+
+    const isMatched = keys.some(
+      (k) =>
+        k !== undefined &&
+        k !== null &&
+        k !== "" &&
+        orderedIdsSet.has(String(k))
+    );
+
+    if (isMatched) {
+      if (subsetIdx < reorderedSubset.length) {
+        result.push(reorderedSubset[subsetIdx++]);
+      }
+    } else {
+      result.push(item);
+    }
+  });
+
+  while (subsetIdx < reorderedSubset.length) {
+    result.push(reorderedSubset[subsetIdx++]);
+  }
+
+  return result;
+}

package/cellUtils/index.ts

@@ -65,11 +65,38 @@ export const isEmptyOrNil = (value: any): boolean =>
  */
 export const getLabel = (dataKeyValue, customDataKeyValue) => (entry) => {
   const label = getKeyForLabel(dataKeyValue, customDataKeyValue);
-  const isPath = label && R.length(label) > 0;
-  const fallback = isEmptyOrNil(label) ? "" : R.head(label);
+  const isPath = label && label.length > 0;
+
+  // An unresolved key is rendered as-is, because a data key is allowed to be a
+  // literal label ("More") rather than a path. Fall back to the whole key
+  // instead of its first segment: "extensions.section" reads as an unresolved
+  // path, while "extensions" reads as a legitimate label and hides the problem.
+  const fallback = isEmptyOrNil(label) ? "" : label.join(".");
 
   try {
-    return isPath ? R.pathOr(fallback, label, entry) : fallback;
+    if (!isPath) {
+      return fallback;
+    }
+
+    const resolved = label.reduce(
+      (value, key) => (value == null ? undefined : value[key]),
+      entry
+    );
+
+    if (isNotNil(resolved)) {
+      return resolved;
+    }
+
+    // A multi-segment key is unambiguously a path, so failing to resolve it is
+    // a misconfiguration rather than someone typing a literal label.
+    if (label.length > 1) {
+      cellUtilsLogger.warning({
+        message: `getLabel: data key "${fallback}" was not found on the entry, rendering the key itself`,
+        data: { dataKeyValue, customDataKeyValue, entryId: entry?.id },
+      });
+    }
+
+    return fallback;
   } catch (error) {
     cellUtilsLogger.warning({
       data: { error, dataKeyValue, customDataKeyValue },

package/configurationUtils/__tests__/manifestKeyParser.test.ts

@@ -176,6 +176,27 @@ describe("getAllSpecificStyles", () => {
       });
     });
 
+    it("should normalize Studio focus alias onto focused state", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_focus_background_color: "#FF3B30",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles.focused).toEqual({
+        backgroundColor: "#FF3B30",
+      });
+
+      expect(outStyles.focus).toBeUndefined();
+    });
+
     it("should handle selected state", () => {
       const outStyles = {};
 

package/configurationUtils/__tests__/modalBlocksParser.test.ts

@@ -0,0 +1,260 @@
+import { parseModalBlocksConfiguration } from "../modalBlocksParser";
+
+// Mock the platform selection logic so it's consistent
+jest.mock("../../reactUtils", () => ({
+  platformSelect: jest.fn().mockReturnValue("ios"),
+}));
+
+describe("parseModalBlocksConfiguration", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should return empty structures for missing config or componentName", () => {
+    const result1 = parseModalBlocksConfiguration(
+      undefined as any,
+      "queue_action"
+    );
+
+    expect(result1.header.container).toEqual({});
+
+    const result2 = parseModalBlocksConfiguration({ foo: "bar" }, "");
+    expect(result2.item.background).toEqual({});
+  });
+
+  it("should correctly parse the specified flat keys into nested objects", () => {
+    // The keys follow: <component_name>_style_<blockName>_<subComponent>_[platform_][state_]<styleName>
+    const config = {
+      // Header container - default platform, default state
+      queue_action_style_header_container_backgroundColor: "#000000",
+
+      // Header title - default platform, pressed state
+      queue_action_style_header_title_pressed_fontColor: "#ffffff",
+
+      // Item background - ios platform, default state
+      queue_action_style_item_background_ios_backgroundColor: "blue",
+
+      // Item textLabel1 - default platform, focused state
+      queue_action_style_item_text_label_1_focused_fontSize: 16,
+
+      // Ignored key (unrelated to building blocks or queue_action)
+      other_action_style_header_title_fontColor: "red",
+      some_random_key: "value",
+
+      // Ignored non-style data keys (should NEVER be parsed as styles)
+      item_data_source: "http://pipes.example.com",
+      item_url: "http://example.com",
+
+      // New dot notation from manifest-generator (without plugin prefix)
+      "item.text_label_2.fontColor": "green",
+      "action.background.pressed_backgroundColor": "black",
+
+      // New now_playing_item block
+      "now_playing_item.text_label_1.fontColor": "yellow",
+      "now_playing_item.now_playing_asset.asset": "equalizer.png",
+    };
+
+    const componentName = "queue_action";
+
+    const result = parseModalBlocksConfiguration(config, componentName);
+
+    // Assert header container default state
+    expect(result.header.container.default).toEqual({
+      backgroundColor: "#000000",
+    });
+
+    // Assert header title pressed state
+    // (pressed state will inherit default styles in getAllSpecificStyles if any,
+    // but here we just have pressed, so it has default empty from the parser)
+    expect(result.header.title.pressed).toEqual({
+      fontColor: "#ffffff",
+    });
+
+    // Assert item background ios default state
+    // (mocked platform is ios, so it should be accepted and assigned to default)
+    expect(result.item.background.default).toEqual({
+      backgroundColor: "blue",
+    });
+
+    // Assert item textLabel1 focused state
+    expect(result.item.textLabel1.focused).toEqual({
+      fontSize: 16,
+    });
+
+    // Assert dot notation textLabel2 default state
+    expect(result.item.textLabel2.default).toEqual({
+      fontColor: "green",
+    });
+
+    // Assert dot notation action background pressed state
+    expect(result.action.background.pressed).toEqual({
+      backgroundColor: "black",
+    });
+
+    // Assert nowPlayingItem states
+    expect(result.nowPlayingItem?.textLabel1.default).toEqual({
+      fontColor: "yellow",
+    });
+
+    expect(result.nowPlayingItem?.nowPlayingAsset.default).toEqual({
+      asset: "equalizer.png",
+    });
+
+    // Assert untouched properties remain empty default style objects
+    expect(result.button.title).toEqual({ default: {} });
+    expect(result.action.leadingIcon).toEqual({ default: {} });
+  });
+
+  it("should map Studio item.background.focus.* onto focused state", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "item.background.default.background_color": "transparent",
+        "item.background.focus.background_color": "#FF3B30",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.background.default).toEqual(
+      expect.objectContaining({
+        backgroundColor: "transparent",
+      })
+    );
+
+    expect(result.item.background.focused).toEqual(
+      expect.objectContaining({
+        backgroundColor: "#FF3B30",
+      })
+    );
+  });
+
+  it("should accept Studio text_label1 keys without underscore before digit", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "item.text_label1.font_color": "#00FF00",
+        "item.text_label1.font_size": 28,
+        "item.text_label2.font_color": "#00FFFF",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.textLabel1.default).toEqual(
+      expect.objectContaining({
+        fontColor: "#00FF00",
+        fontSize: 28,
+      })
+    );
+
+    expect(result.item.textLabel2.default).toEqual(
+      expect.objectContaining({
+        fontColor: "#00FFFF",
+      })
+    );
+  });
+
+  it("should map button.create_new_playlist_asset onto leadingIcon.asset", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "button.create_new_playlist_asset":
+          "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.button.leadingIcon.default).toEqual(
+      expect.objectContaining({
+        asset: "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+      })
+    );
+  });
+
+  it("should map item.checkbox_asset and checked_checkbox_asset onto item.checkbox", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "item.checkbox_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB",
+        "item.checked_checkbox_asset":
+          "https://placehold.co/24x24/FFD60A/000000/png?text=CK",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.checkbox.default).toEqual(
+      expect.objectContaining({
+        asset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB",
+        checkedAsset: "https://placehold.co/24x24/FFD60A/000000/png?text=CK",
+      })
+    );
+  });
+
+  it("should map reorder/remove Studio assets onto item.actionButtons", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "reorder_playlist_item.remove_from_playlist_asset":
+          "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        "reorder_playlist_item.reorder_handle_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.actionButtons.default).toEqual(
+      expect.objectContaining({
+        removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      })
+    );
+  });
+
+  it("should fall back to flavor1 reorder/remove assets", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "playlist_experience_assets_flavor1.remove_from_playlist_asset":
+          "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        "playlist_experience_assets_flavor1.reorder_handle_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.actionButtons.default).toEqual(
+      expect.objectContaining({
+        removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      })
+    );
+  });
+
+  it("should fall back to flavor2 reorder/remove assets", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "playlist_experience_assets_flavor2.remove_from_playlist_asset":
+          "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        "playlist_experience_assets_flavor2.reorder_handle_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.actionButtons.default).toEqual(
+      expect.objectContaining({
+        removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      })
+    );
+  });
+
+  it("should ignore playlist-only asset keys for other theme plugins", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "button.create_new_playlist_asset":
+          "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+        "playlist_experience_assets_flavor1.reorder_handle_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      },
+      "queue-action"
+    );
+
+    expect(result.button.leadingIcon.default?.asset).toBeUndefined();
+    expect(result.item.actionButtons.default?.dragAsset).toBeUndefined();
+  });
+});

package/configurationUtils/manifestKeyParser.ts

@@ -11,17 +11,30 @@ const currentPlatform = platformSelect({
   android_tv: "android",
 });
 
-// Do not change the order, focused_selected should be first
-const states = ["focused_selected", "pressed", "focused", "selected"];
+// Do not change the order: focused_selected must be first, and "focus" must
+// come *after* "focused". Matching uses startsWith(state + "_"), so putting
+// "focus" first would steal focused_* / focused_selected_* keys. Adding
+// "focus" here affects every getAllSpecificStyles consumer (not only modals);
+// property names that themselves start with focus_ (e.g. focus_font_color as
+// a non-state style) would also be classified as the focus state.
+const states = [
+  "focused_selected",
+  "pressed",
+  "focused",
+  "focus",
+  "selected",
+  "default",
+];
 
 const platformSuffixes = ["ios", "tvos", "samsung", "lg", "android"];
-type StateKey = (typeof states)[number] | "default";
+type StateKey = (typeof states)[number];
 
 export type GetAllSpecificStylesProps = {
   componentName: string;
   subComponentName: string;
   configuration: Record<string, any>;
   outStyles: Record<string, any>;
+  styleSeparator?: string;
 };
 
 /*
@@ -35,14 +48,23 @@ export const getAllSpecificStyles = ({
   componentName,
   subComponentName,
   outStyles,
+  styleSeparator = "_style_",
 }: GetAllSpecificStylesProps) => {
   if (!outStyles) throw new Error("outStyles is required");
   if (!componentName) throw new Error("componentName is required");
 
-  const prefix =
+  const prefixes =
     subComponentName?.length > 0
-      ? `${componentName}_style_${subComponentName}_`
-      : `${componentName}_style_`;
+      ? [
+          styleSeparator
+            ? `${componentName}${styleSeparator}${subComponentName}_`
+            : `${subComponentName}_`,
+          `${componentName}_style_${subComponentName}_`,
+        ]
+      : [
+          styleSeparator ? `${componentName}${styleSeparator}` : "",
+          `${componentName}_style_`,
+        ];
 
   const defaultKey = "default";
 
@@ -51,12 +73,24 @@ export const getAllSpecificStyles = ({
   const tmpGenericDict: Record<StateKey, Record<string, any>> = {};
   const tmpPlatformDict: Record<StateKey, Record<string, any>> = {};
 
-  const parseKey = (key: string, value: any) => {
-    if (!key.startsWith(prefix)) {
+  const parseKey = (key: string, originalKey: string, value: any) => {
+    const matchedPrefix = prefixes.find((p) => p && key.startsWith(p));
+
+    if (!matchedPrefix) {
+      return;
+    }
+
+    // Guard: for empty styleSeparator, if matching modern prefix, require dot in originalKey
+    if (
+      styleSeparator === "" &&
+      matchedPrefix === `${subComponentName}_` &&
+      !originalKey.includes(".")
+    ) {
       return;
     }
 
-    let styleName = key.slice(prefix.length);
+    let styleName = key.slice(matchedPrefix.length);
+
     if (!styleName || styleName.startsWith("_")) return;
 
     const platform = platformSuffixes.find((prefix) =>
@@ -84,6 +118,11 @@ export const getAllSpecificStyles = ({
       state = defaultKey;
     }
 
+    // Normalize Studio "focus" keys onto the runtime "focused" state bucket.
+    if (state === "focus") {
+      state = "focused";
+    }
+
     if (!styleName) return;
 
     const camelCaseKey = toCamelCase(styleName);
@@ -93,7 +132,8 @@ export const getAllSpecificStyles = ({
   };
 
   for (const [key, value] of Object.entries(configuration)) {
-    parseKey(key, value);
+    const formattedKey = key.replace(/\./g, "_");
+    parseKey(formattedKey, key, value);
   }
 
   const allStates = Array.from(