@applicaster/zapp-react-native-utils 16.0.0-alpha.1052711356 → 16.0.0-alpha.1054344748

package/appUtils/playerManager/playerToolbox.ts

@@ -0,0 +1,192 @@
+import { getXray } from "../../logger";
+import type { PlayerManager } from "./index";
+
+/**
+ * X-Ray `player.*` toolbox: lets an agent read and drive the active player without screenshots.
+ * Registered by the PlayerManager singleton itself, so it exists wherever players do. Skipped
+ * when the installed X-Ray plugin has no React toolbox API.
+ *
+ * How the player is shown (video modal mode, mini player) is navigation state: see `nav.*`.
+ */
+
+type ToolSpec = {
+  name: string;
+  description: string;
+  parameters?: Array<{
+    name: string;
+    type: "number";
+    description: string;
+  }>;
+  handler: (args: Record<string, unknown>) => unknown;
+};
+
+type RegisterReactToolbox = (toolbox: {
+  name: string;
+  description: string;
+  tools: ToolSpec[];
+}) => Promise<void>;
+
+let registration: Promise<void> | undefined;
+
+const toNumber = (value: unknown) =>
+  typeof value === "number" && Number.isFinite(value) ? value : null;
+
+const clamp = (value: number, max: number) => Math.min(Math.max(value, 0), max);
+
+/** The range a seek can reach: the DVR window on live, the content on VOD. */
+const requireSeekable = (player: {
+  getSeekableDuration: () => number | undefined;
+}) => {
+  const seekable = toNumber(player.getSeekableDuration());
+
+  if (!seekable) throw new Error("Seek is not supported");
+
+  return seekable;
+};
+
+const tools = (manager: PlayerManager): ToolSpec[] => {
+  const requirePlayer = () => {
+    const player = manager.getActivePlayer();
+
+    if (!player) throw new Error("No active player");
+
+    return player;
+  };
+
+  return [
+    {
+      name: "state",
+      description:
+        "The active player: entry, position and duration in seconds, playing/buffering/ad/live/muted, " +
+        "role (Primary, Cell, Chromecast) and casting. active: false when nothing plays.",
+      handler: () => {
+        const player = manager.getActivePlayer();
+
+        if (!player) return { active: false, casting: manager.isCasting() };
+
+        const entry = player.getEntry();
+
+        return {
+          active: true,
+          playerId: player.playerId,
+          entry: entry ? { id: entry.id, title: entry.title } : null,
+          position: toNumber(player.getPosition()),
+          duration: toNumber(player.getDuration()),
+          // isPlaying() only means "not paused", which is also true before the stream starts.
+          playing: !!player.isReadyToPlay() && player.isPlaying(),
+          buffering: !!player.isBuffering(),
+          readyToPlay: !!player.isReadyToPlay(),
+          ad: player.isAd(),
+          live: !!player.isLive(),
+          muted: !!player.getIsMuted(),
+          role: player.playerRole,
+          casting: manager.isCasting(),
+        };
+      },
+    },
+    {
+      name: "play",
+      description: "Resume the active player.",
+      handler: () => {
+        requirePlayer().play();
+
+        return "OK";
+      },
+    },
+    {
+      name: "pause",
+      description: "Pause the active player.",
+      handler: () => {
+        requirePlayer().pause();
+
+        return "OK";
+      },
+    },
+    {
+      name: "seek",
+      description:
+        "Seek to an absolute position, as the player's console command does: seconds from the start, " +
+        "or from the end when negative. Clamped to the seekable range. Where it lands can differ: " +
+        "server-side ads snap back to the break before the target; read player.state afterwards.",
+      parameters: [
+        {
+          name: "position",
+          type: "number",
+          description:
+            "Seconds from the start; negative values count back from the end.",
+        },
+      ],
+      handler: ({ position }) => {
+        const player = requirePlayer();
+        const seconds = toNumber(position);
+
+        if (seconds === null) {
+          throw new Error("'position' must be a number of seconds");
+        }
+
+        const seekable = requireSeekable(player);
+
+        const target =
+          seconds >= 0
+            ? Math.min(seconds, seekable)
+            : clamp(seekable + seconds, seekable);
+
+        player.seekTo(target);
+
+        return { position: target };
+      },
+    },
+    {
+      name: "offset",
+      description:
+        "Seek relative to the current position, as the player's console command does: positive " +
+        "forward, negative back. Clamped to the seekable range.",
+      parameters: [
+        {
+          name: "seconds",
+          type: "number",
+          description: "Seconds to move: positive forward, negative back.",
+        },
+      ],
+      handler: ({ seconds }) => {
+        const player = requirePlayer();
+        const delta = toNumber(seconds);
+
+        if (delta === null) throw new Error("'seconds' must be a number");
+
+        if (delta === 0) throw new Error("Ignored zero relative seek");
+
+        const seekable = requireSeekable(player);
+        const from = toNumber(player.getContentPosition()) ?? 0;
+        const target = clamp(from + delta, seekable);
+
+        player.seekTo(target);
+
+        return { from, position: target };
+      },
+    },
+  ];
+};
+
+export const registerPlayerToolbox = (manager: PlayerManager) => {
+  if (registration) return registration;
+
+  const register = (
+    getXray() as
+      | { registerReactToolbox?: RegisterReactToolbox }
+      | null
+      | undefined
+  )?.registerReactToolbox;
+
+  if (!register) return Promise.resolve();
+
+  registration = register({
+    name: "player",
+    description: "Inspect and control the active player.",
+    tools: tools(manager),
+  }).catch(() => {
+    registration = undefined;
+  });
+
+  return registration;
+};

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/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -3,7 +3,7 @@ import { useConfiguration } from "../../reactHooks/useConfiguration";
 import { useEffect } from "react";
 import { playerManager } from "./index";
 import { useValidatePlayerConfig } from "../../playerUtils/useValidatePlayerConfig";
-import { PlayerRole } from "./conts";
+import { PlayerRole } from "./const";
 import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
 import { TVSeekController } from "../../reactHooks/player/TVSeekControlller/TVSeekController";
 import { KeyInputHandler } from "../keyInputHandler/KeyInputHandler";

package/appUtils/playerManager/userLanguagePreference.ts

@@ -1,7 +1,7 @@
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
 import { createLogger, utilsLogger } from "../../logger";
-import { userPreferencesNamespace } from "./conts";
+import { userPreferencesNamespace } from "./const";
 
 export const preferredAudioLanguageStorageKey = "preferred_audio_language";
 

package/arrayUtils/__tests__/reorderByIds.test.ts

@@ -0,0 +1,63 @@
+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"]);
+  });
+
+  it("reorders duplicate items when using unique slot identifiers via getId", () => {
+    const duplicateItems = [
+      { id: "x", slot: "s1", name: "First X" },
+      { id: "y", slot: "s2", name: "Y" },
+      { id: "x", slot: "s3", name: "Second X" },
+    ];
+
+    const result = reorderByIds(duplicateItems, ["s3", "s1"], (i) => i.slot);
+
+    expect(result).toHaveLength(3);
+    expect(result.map((i) => i.name)).toEqual(["Second X", "Y", "First X"]);
+  });
+});

package/arrayUtils/index.ts

@@ -158,3 +158,65 @@ 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 = (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 id = getId(item);
+
+    if (
+      id !== undefined &&
+      id !== null &&
+      id !== "" &&
+      !itemMap.has(String(id))
+    ) {
+      itemMap.set(String(id), item);
+    }
+  });
+
+  const reorderedSubset: T[] = [];
+  const orderedIdsSet = new Set<string>();
+
+  orderedIds.forEach((id) => {
+    const strId = String(id);
+    const item = itemMap.get(strId);
+
+    if (item && !orderedIdsSet.has(strId)) {
+      reorderedSubset.push(item);
+      orderedIdsSet.add(strId);
+    }
+  });
+
+  if (reorderedSubset.length === 0) return [...items];
+
+  let subsetIdx = 0;
+
+  return items.map((item) => {
+    const id = getId(item);
+
+    if (
+      id !== undefined &&
+      id !== null &&
+      id !== "" &&
+      orderedIdsSet.has(String(id)) &&
+      subsetIdx < reorderedSubset.length
+    ) {
+      return reorderedSubset[subsetIdx++];
+    }
+
+    return item;
+  });
+}

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 = {};