@applicaster/zapp-react-native-utils 16.0.0-alpha.2434153375 → 16.0.0-alpha.2500443242

package/appUtils/playerManager/playerToolbox.ts

@@ -0,0 +1,157 @@
+import { registerXrayToolbox, XrayToolSpec } from "../../logger/xrayToolbox";
+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.*`.
+ */
+
+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): XrayToolSpec[] => {
+  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) =>
+  registerXrayToolbox({
+    name: "player",
+    description: "Inspect and control the active player.",
+    tools: tools(manager),
+  });

package/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -8,6 +8,7 @@ import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/
 import { TVSeekController } from "../../reactHooks/player/TVSeekControlller/TVSeekController";
 import { KeyInputHandler } from "../keyInputHandler/KeyInputHandler";
 import { isTV } from "../../reactUtils";
+import { PlayerAnalyticsManager } from "../../analyticsUtils/PlayerAnalyticsManager";
 
 // TODO: Rename to ControllerType
 export const usePlayerControllerSetup = ({
@@ -68,6 +69,11 @@ export const usePlayerControllerSetup = ({
       return;
     }
 
+    // The analytics manager attaches its listener when a player registers, so it
+    // must exist first; on web the Player wrapper that also creates it renders
+    // only after the lazily loaded engine chunk, i.e. after registration.
+    PlayerAnalyticsManager.getInstance();
+
     playerManager.registerPlayer({
       id: playerId,
       playerController,

package/arrayUtils/__tests__/reorderByIds.test.ts

@@ -47,4 +47,17 @@ describe("reorderByIds", () => {
 
     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

@@ -167,7 +167,7 @@ export const anyTruthy = (xs: boolean[]) => xs.some(Boolean);
 export function reorderByIds<T>(
   items: T[],
   orderedIds: string[],
-  getId: (item: T) => string | string[] = (item: any) => item?.id
+  getId: (item: T) => string = (item: any) => item?.id
 ): T[] {
   if (!items || items.length === 0) return [];
   if (!orderedIds || orderedIds.length === 0) return [...items];
@@ -175,14 +175,16 @@ export function reorderByIds<T>(
   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 id = getId(item);
+
+    if (
+      id !== undefined &&
+      id !== null &&
+      id !== "" &&
+      !itemMap.has(String(id))
+    ) {
+      itemMap.set(String(id), item);
+    }
   });
 
   const reorderedSubset: T[] = [];
@@ -192,48 +194,29 @@ export function reorderByIds<T>(
     const strId = String(id);
     const item = itemMap.get(strId);
 
-    if (item && !reorderedSubset.includes(item)) {
+    if (item && !orderedIdsSet.has(strId)) {
       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));
-        }
-      });
+      orderedIdsSet.add(strId);
     }
   });
 
   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);
+  return items.map((item) => {
+    const id = getId(item);
+
+    if (
+      id !== undefined &&
+      id !== null &&
+      id !== "" &&
+      orderedIdsSet.has(String(id)) &&
+      subsetIdx < reorderedSubset.length
+    ) {
+      return reorderedSubset[subsetIdx++];
     }
-  });
-
-  while (subsetIdx < reorderedSubset.length) {
-    result.push(reorderedSubset[subsetIdx++]);
-  }
 
-  return result;
+    return item;
+  });
 }

package/cellUtils/__tests__/getButtonsEnabled.test.ts

@@ -0,0 +1,28 @@
+import { getButtonsEnabled } from "..";
+
+describe("getButtonsEnabled", () => {
+  it("returns true when the buttons container is enabled", () => {
+    expect(
+      getButtonsEnabled({ mobile_buttons_container_buttons_enabled: true })
+    ).toBe(true);
+
+    expect(
+      getButtonsEnabled({ mobile_buttons_container_buttons_enabled: "true" })
+    ).toBe(true);
+  });
+
+  it("returns false when the buttons container is disabled", () => {
+    expect(
+      getButtonsEnabled({ mobile_buttons_container_buttons_enabled: false })
+    ).toBe(false);
+
+    expect(
+      getButtonsEnabled({ mobile_buttons_container_buttons_enabled: "false" })
+    ).toBe(false);
+  });
+
+  it("returns false when the key or styles are missing", () => {
+    expect(getButtonsEnabled({})).toBe(false);
+    expect(getButtonsEnabled(undefined)).toBe(false);
+  });
+});

package/cellUtils/__tests__/getCellNavigationEnabled.test.ts

@@ -0,0 +1,36 @@
+import { getCellNavigationEnabled } from "..";
+
+describe("getCellNavigationEnabled", () => {
+  it("returns true when cell navigation is enabled", () => {
+    expect(
+      getCellNavigationEnabled({
+        mobile_buttons_container_cell_navigation_enabled: true,
+      })
+    ).toBe(true);
+
+    expect(
+      getCellNavigationEnabled({
+        mobile_buttons_container_cell_navigation_enabled: "true",
+      })
+    ).toBe(true);
+  });
+
+  it("returns false when cell navigation is disabled", () => {
+    expect(
+      getCellNavigationEnabled({
+        mobile_buttons_container_cell_navigation_enabled: false,
+      })
+    ).toBe(false);
+
+    expect(
+      getCellNavigationEnabled({
+        mobile_buttons_container_cell_navigation_enabled: "false",
+      })
+    ).toBe(false);
+  });
+
+  it("returns false when the key or styles are missing", () => {
+    expect(getCellNavigationEnabled({})).toBe(false);
+    expect(getCellNavigationEnabled(undefined)).toBe(false);
+  });
+});

package/cellUtils/__tests__/getIsCellNavigationEnabled.test.ts

@@ -0,0 +1,35 @@
+import { getIsCellNavigationEnabled } from "..";
+
+describe("getIsCellNavigationEnabled", () => {
+  it("is disabled when buttons are enabled and cell navigation is off", () => {
+    expect(
+      getIsCellNavigationEnabled({
+        mobile_buttons_container_buttons_enabled: true,
+        mobile_buttons_container_cell_navigation_enabled: false,
+      })
+    ).toBe(false);
+  });
+
+  it("is enabled when buttons and cell navigation are both on", () => {
+    expect(
+      getIsCellNavigationEnabled({
+        mobile_buttons_container_buttons_enabled: true,
+        mobile_buttons_container_cell_navigation_enabled: true,
+      })
+    ).toBe(true);
+  });
+
+  it("is enabled when buttons are disabled", () => {
+    expect(
+      getIsCellNavigationEnabled({
+        mobile_buttons_container_buttons_enabled: false,
+        mobile_buttons_container_cell_navigation_enabled: false,
+      })
+    ).toBe(true);
+  });
+
+  it("is enabled when the keys or styles are missing", () => {
+    expect(getIsCellNavigationEnabled({})).toBe(true);
+    expect(getIsCellNavigationEnabled(undefined)).toBe(true);
+  });
+});

package/cellUtils/__tests__/isCellNavigationEnabled.test.ts

@@ -0,0 +1,21 @@
+import { isCellNavigationEnabled } from "..";
+
+describe("isCellNavigationEnabled", () => {
+  it("is enabled when buttons are disabled, regardless of the toggle", () => {
+    expect(isCellNavigationEnabled(false, false)).toBe(true);
+    expect(isCellNavigationEnabled(false, true)).toBe(true);
+    expect(isCellNavigationEnabled(undefined, undefined)).toBe(true);
+    expect(isCellNavigationEnabled("false", false)).toBe(true);
+  });
+
+  it("is disabled when buttons are enabled and the toggle is off or missing", () => {
+    expect(isCellNavigationEnabled(true, false)).toBe(false);
+    expect(isCellNavigationEnabled(true, undefined)).toBe(false);
+    expect(isCellNavigationEnabled("true", "false")).toBe(false);
+  });
+
+  it("is enabled when buttons and the toggle are both enabled", () => {
+    expect(isCellNavigationEnabled(true, true)).toBe(true);
+    expect(isCellNavigationEnabled("true", "true")).toBe(true);
+  });
+});

package/cellUtils/index.ts

@@ -12,6 +12,7 @@ import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 import { toNumberWithDefault, toNumberWithDefaultZero } from "../numberUtils";
+import { isTrue } from "../booleanUtils";
 
 const CUSTOM_KEY = "other";
 
@@ -192,14 +193,19 @@ export const textTransform = (transformType, value) => {
  */
 export const getCellWidth = (componentStyles) => {
   const DEFAULT_CELL_WIDTH = 1920;
+  if (!componentStyles) return DEFAULT_CELL_WIDTH;
 
-  const cellWidth = R.compose(
-    R.prop(R.__, componentStyles),
-    R.find(R.includes("cell_width")),
-    R.keys
-  )(componentStyles);
+  for (const key in componentStyles) {
+    if (key.includes("cell_width")) {
+      const val = Number(componentStyles[key]);
 
-  return Number(cellWidth) || DEFAULT_CELL_WIDTH;
+      if (!isNaN(val) && val > 0) {
+        return val;
+      }
+    }
+  }
+
+  return DEFAULT_CELL_WIDTH;
 };
 
 /**
@@ -210,7 +216,7 @@ export const getCellWidth = (componentStyles) => {
  */
 export const getHeight = (width, aspectRatio) => {
   const DEFAULT_CELL_HEIGHT = 216;
-  const height = R.divide(width, aspectRatio);
+  const height = width / aspectRatio;
 
   return toNumberWithDefault(DEFAULT_CELL_HEIGHT, height);
 };
@@ -362,14 +368,18 @@ export const ifElseFocusedSelected = (
  */
 
 export const getValue = (stylesObj) => (key) => {
-  return R.propOr(null, key, stylesObj);
+  if (!stylesObj) return null;
+  const val = stylesObj[key];
+
+  return val === undefined ? null : val;
 };
 
 export const CELL_CONFIG_ID_PATH = ["styles", "cell_plugin_configuration_id"];
 
-export const getCellConfigPath = R.path(CELL_CONFIG_ID_PATH);
+export const getCellConfigPath = (component) =>
+  component?.styles?.cell_plugin_configuration_id;
 
-export const getPropComponentType = R.prop("component_type");
+export const getPropComponentType = (component) => component?.component_type;
 
 /**
  *
@@ -423,14 +433,11 @@ export const castAndFallbackNumber = toNumberWithDefaultZero;
 
 const DEFAULT_COLOR = "#FFFFFF";
 
-export const castAndFallbackColor = R.ifElse(
-  R.isNil,
-  R.always(DEFAULT_COLOR),
-  fixColorHexCode
-);
+export const castAndFallbackColor = (value) =>
+  value == null ? DEFAULT_COLOR : fixColorHexCode(value);
 
 export const getTextTransform = (textTransform: string) => {
-  if (R.isNil(textTransform) || R.isEmpty(textTransform)) {
+  if (!textTransform) {
     return "none";
   }
 
@@ -454,15 +461,24 @@ export const withAntialising = () => {
 
 export const compact = (xs) => xs.filter(isNotNil);
 
-export const mergeConfiguration = (configuration, config) =>
-  R.evolve({ configuration }, config);
+export const mergeConfiguration = (configuration, config) => {
+  if (!config) return config;
+
+  return {
+    ...config,
+    configuration:
+      typeof configuration === "function"
+        ? configuration(config.configuration)
+        : configuration,
+  };
+};
 
 export const extractCellConfiguration =
   (manifestConfiguration) => (component, cellStyles) => {
     const cellConfigId = getCellConfigPath(component);
     const componentType = getPropComponentType(component);
 
-    const cellStylesConfig = Object.assign(cellStyles[cellConfigId], {
+    const cellStylesConfig = Object.assign({}, cellStyles?.[cellConfigId], {
       componentType,
     });
 
@@ -572,3 +588,42 @@ export const hasTextLabelsEnabled = (
     return Boolean(value);
   });
 };
+
+/**
+ * Reads the mobile buttons container "buttons enabled" switch from cell styles.
+ */
+export const getButtonsEnabled = (styles?: Record<string, any>): boolean => {
+  return isTrue(styles?.mobile_buttons_container_buttons_enabled);
+};
+
+/**
+ * Reads the mobile buttons container "cell navigation enabled" switch from cell styles.
+ */
+export const getCellNavigationEnabled = (
+  styles?: Record<string, any>
+): boolean => {
+  return isTrue(styles?.mobile_buttons_container_cell_navigation_enabled);
+};
+
+/**
+ * Whether tapping a cell outside its action buttons triggers the cell's navigation.
+ * Always true when the buttons are disabled.
+ * @param buttonsEnabled the cell's "buttons enabled" switch value
+ * @param cellNavigationEnabled the cell's "cell navigation enabled" switch value
+ */
+export const isCellNavigationEnabled = (
+  buttonsEnabled: unknown,
+  cellNavigationEnabled: unknown
+): boolean => !isTrue(buttonsEnabled) || isTrue(cellNavigationEnabled);
+
+/**
+ * Whether tapping a mobile cell outside its action buttons triggers the cell's navigation,
+ * read from the cell styles.
+ */
+export const getIsCellNavigationEnabled = (
+  styles?: Record<string, any>
+): boolean =>
+  isCellNavigationEnabled(
+    getButtonsEnabled(styles),
+    getCellNavigationEnabled(styles)
+  );

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