@applicaster/zapp-react-native-utils 16.0.0-alpha.7845362739 → 16.0.0-alpha.8101951023

package/appUtils/playerManager/{conts.ts → const.ts}

@@ -67,3 +67,23 @@ export enum PlayerRole {
   Chromecast = "Chromecast",
   Unspecified = "Unspecified",
 }
+
+/**
+ * The playback engine backing a web player. Published on
+ * `window.applicaster.playerType` when a player is created, so that plugins
+ * observing the player can tell which engine they are looking at instead of
+ * inferring it from the API the instance happens to expose.
+ *
+ * Keep in sync with `ApplicasterGlobals["playerType"]` in applicaster-types.
+ */
+export enum WebPlayerEngine {
+  Videojs = "videojs",
+  Hlsjs = "hlsjs",
+  Dashjs = "dashjs",
+}
+
+export enum PLAYER_EVENTS {
+  PlayNextTriggered = "play_next_triggered",
+}
+
+export type PlayNextTriggeredEvent = { id: string };

package/appUtils/playerManager/index.ts

@@ -9,7 +9,7 @@ import {
   unsubscribeToDeviceNetworkChanges,
 } from "@applicaster/quick-brick-core/App/NetworkStatusProvider/utils";
 import { setUserLanguagePreference } from "./userLanguagePreference";
-import { PlayerRole } from "./conts";
+import { PlayerRole } from "./const";
 import { RNPlayerManager } from "./nativePlayerManager";
 
 const { log_error, log_debug, log_warning } = createLogger({

package/appUtils/playerManager/player.ts

@@ -1,9 +1,22 @@
 import * as R from "ramda";
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject, Observable } from "rxjs";
+import { distinctUntilChanged } from "rxjs/operators";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { createLogger, utilsLogger } from "../../logger";
-import { getBoolFromConfigValue } from "../../configurationUtils";
-import { PlayerRole, SharedPlayerCallBacksKeys } from "./conts";
+import {
+  getBoolFromConfigValue,
+  imageSrcFromMediaItem,
+} from "../../configurationUtils";
+// Imported from the leaf modules rather than the `playerUtils` barrel: that
+// barrel imports `playerManager`, so going through it would create a require
+// cycle (playerManager/index -> player -> playerUtils/index -> playerManager).
+import {
+  resolvePlayerTitleSubtitle,
+  getPlayerContentDataKeys,
+} from "../../playerUtils/resolvePlayerTitleSubtitle";
+import { isAudioItem } from "../../playerUtils/isAudioItem";
+import { isTV } from "../../reactUtils";
+import { PlayerRole, SharedPlayerCallBacksKeys } from "./const";
 import { OverlaysObserver } from "./OverlayObserver/OverlaysObserver";
 import { TVSeekController } from "../../reactHooks/player/TVSeekControlller/TVSeekController";
 
@@ -19,6 +32,23 @@ export declare type PlayerControllerListenerData = {
   id: string;
   listener: QuickBrickPlayer.SharedPlayerCallBacks;
 };
+
+/**
+ * The player's resolved Title/Subtitle text, published by the player the same
+ * way duration and progress are. Consumers render these values as-is rather
+ * than reading `entry` or the plugin configuration themselves.
+ */
+export type PlayerContent = {
+  title: Option<string | number>;
+  summary: Option<string | number>;
+  /**
+   * Cover art for the content currently playing. Published alongside the text
+   * (rather than read from `entry` by whoever needs it) so it follows the same
+   * entry: on live audio that means the programme's own artwork, refreshed
+   * with every feed poll, instead of the channel's.
+   */
+  imageUrl: Option<string>;
+};
 /**
  * Player Instance Controller
  * Instance exposes utility methods that will help set or get state
@@ -45,6 +75,7 @@ export class Player {
   readonly playerRole: PlayerRole = PlayerRole.Unspecified;
   private overlaysObserver?: OverlaysObserver | null;
   private entryObservable?: BehaviorSubject<ZappEntry> | null;
+  private contentSubject?: BehaviorSubject<PlayerContent> | null;
 
   protected listeners: {
     [key: string]: QuickBrickPlayer.SharedPlayerCallBacks;
@@ -58,7 +89,17 @@ export class Player {
 
   set entry(newEntry: ZappEntry | null) {
     this._entry = newEntry;
+    // The live entry is scoped to the entry it overlays - see
+    // `OverlaysObserver.clearLiveEntry`. No-op when there is no observer,
+    // which is every non-live player.
+    this.overlaysObserver?.clearLiveEntry();
     this.entryObservable?.next(newEntry);
+    // Optional chaining short-circuits the whole call expression, so
+    // `getContent()` is NOT evaluated while no subscriber exists. That
+    // matters: `PlayerNative` assigns `this.entry` in its constructor, before
+    // subclass arrow-function properties such as `getPluginConfiguration`
+    // have been assigned.
+    this.contentSubject?.next(this.getContent());
   }
 
   constructor(props) {
@@ -117,6 +158,77 @@ export class Player {
     return this.entryObservable;
   };
 
+  /**
+   * The player's resolved Title/Subtitle.
+   *
+   * Resolved on demand rather than cached: the plugin configuration arrives
+   * asynchronously on both the native and cast paths, so a value computed once
+   * at entry-set time would be stale for whichever arrives first.
+   *
+   * Every fallback (no config, empty/whitespace key, unresolvable key, key
+   * resolving to an empty string or to a non-string/non-number) lives in
+   * `resolvePlayerContentText` and is never reimplemented here.
+   */
+  getContent = (): PlayerContent => {
+    // Live audio keeps playing one channel while the programme on air
+    // changes, so the observer's freshly-loaded programme entry wins when
+    // there is one. Read through `?.` so this never constructs an observer:
+    // a VOD or cast player has none and falls straight through to its entry.
+    const entry = this.overlaysObserver?.liveEntry ?? this.entry;
+
+    return {
+      ...resolvePlayerTitleSubtitle({
+        entry,
+        pluginConfiguration: this.getPluginConfiguration(),
+        dataKeys: getPlayerContentDataKeys({
+          isTV: isTV(),
+          isAudioContent: isAudioItem(entry),
+        }),
+      }),
+      // Same selection Android's `EntryHelpers.extractCoverImage` makes:
+      // prefer the `image_base` media item, otherwise the first one available.
+      // Reused rather than reimplemented so the two platforms cannot drift.
+      imageUrl: entry ? imageSrcFromMediaItem(entry, []) : undefined,
+    };
+  };
+
+  /**
+   * Created lazily, like `entryObservable`. An eagerly created subject would
+   * resolve during `PlayerNative`'s constructor and call a not-yet-assigned
+   * `getPluginConfiguration`.
+   *
+   * The seed is produced by calling the resolver, never from raw entry fields:
+   * a `BehaviorSubject` replays its seed synchronously on subscribe, so a raw
+   * seed would overwrite correctly-resolved text at mount.
+   */
+  getContentObservable = (): Observable<PlayerContent> => {
+    if (!this.contentSubject) {
+      this.contentSubject = new BehaviorSubject<PlayerContent>(
+        this.getContent()
+      );
+    }
+
+    return this.contentSubject.asObservable().pipe(
+      // `resolvePlayerTitleSubtitle` returns a fresh object every call, so
+      // reference equality would never dedupe. Compare by value.
+      distinctUntilChanged(
+        (previous, next) =>
+          previous.title === next.title &&
+          previous.summary === next.summary &&
+          previous.imageUrl === next.imageUrl
+      )
+    );
+  };
+
+  /**
+   * Re-resolves and publishes the current content. Called when something the
+   * resolution depends on changed without `entry` itself being reassigned -
+   * today that is the observer swapping in a newly-loaded live programme.
+   */
+  publishContent = () => {
+    this.contentSubject?.next(this.getContent());
+  };
+
   /**
    * ---------------------------------------- PLAYER SETTERS GETTERS ----------------------------------------
    * These methods let you get information about the content / ad playing

package/appUtils/playerManager/playerFactory.ts

@@ -1,7 +1,7 @@
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { Player } from "./player";
-import { PlayerRole } from "./conts";
+import { PlayerRole } from "./const";
 
 type PlayerFactoryItem = {
   Component: any;

package/appUtils/playerManager/playerNative.ts

@@ -3,7 +3,7 @@ import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { createLogger, utilsLogger } from "../../logger";
 import { Player } from "./player";
 import { findNodeHandle } from "react-native";
-import { PlayerRole } from "./conts";
+import { PlayerRole } from "./const";
 import { toBooleanWithDefaultFalse } from "../../booleanUtils";
 import { RNPlayerManager } from "./nativePlayerManager";
 
@@ -296,9 +296,11 @@ export class PlayerNative extends Player {
     }, listeners);
   };
 
-  isAudioItem = () =>
-    this.getEntry()?.content?.type?.includes?.("audio") ||
-    this.getEntry()?.type?.value === "audio";
+  isAudioItem = (): boolean =>
+    Boolean(
+      this.getEntry()?.content?.type?.includes?.("audio") ||
+        this.getEntry()?.type?.value?.includes?.("audio")
+    );
 
   isFullScreenSupported = (): boolean => {
     const config = this.getConfig();

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