@applicaster/zapp-react-native-utils 16.0.0-rc.9 → 16.0.0-rc.90

package/appUtils/playerManager/__tests__/playerContent.test.ts

@@ -0,0 +1,403 @@
+import { Player } from "../player";
+import { isTV } from "../../../reactUtils";
+
+jest.mock("../../../reactUtils", () => ({
+  ...jest.requireActual("../../../reactUtils"),
+  isTV: jest.fn(() => false),
+}));
+
+const mockIsTV = isTV as jest.Mock;
+
+const ENTRY = {
+  title: "Entry Title",
+  summary: "Entry Summary",
+  extensions: { programme: "Programme Title" },
+} as unknown as ZappEntry;
+
+const LIVE_ENTRY = {
+  title: "Live Title",
+  summary: "Live Summary",
+} as unknown as ZappEntry;
+
+const makePlayer = (configuration: Record<string, any> | null = null) => {
+  const player = new Player({ playerId: "test-player" });
+
+  player.getPluginConfiguration = () => configuration;
+
+  return player;
+};
+
+describe("Player content channel", () => {
+  beforeEach(() => {
+    mockIsTV.mockReturnValue(false);
+  });
+
+  it("resolves the entry fields when nothing is configured", () => {
+    const player = makePlayer();
+
+    player.entry = ENTRY;
+
+    expect(player.getContent()).toEqual({
+      title: "Entry Title",
+      summary: "Entry Summary",
+    });
+  });
+
+  it("resolves a configured custom data key", () => {
+    const player = makePlayer({
+      title_data_key_source: "other",
+      title_custom_data_key: "extensions.programme",
+    });
+
+    player.entry = ENTRY;
+
+    expect(player.getContent().title).toBe("Programme Title");
+  });
+
+  it("falls back to the entry field when the configured key is unresolvable", () => {
+    const player = makePlayer({
+      title_data_key_source: "other",
+      title_custom_data_key: "extensions.nope",
+    });
+
+    player.entry = ENTRY;
+
+    expect(player.getContent().title).toBe("Entry Title");
+  });
+
+  it("emits the resolved content to subscribers when the entry changes", () => {
+    const player = makePlayer();
+    const received: any[] = [];
+
+    player
+      .getContentObservable()
+      .subscribe((content) => received.push(content));
+
+    player.entry = ENTRY;
+
+    expect(received[received.length - 1]).toEqual({
+      title: "Entry Title",
+      summary: "Entry Summary",
+    });
+  });
+
+  it("seeds subscribers with resolved content, never the raw entry", () => {
+    const player = makePlayer({
+      title_data_key_source: "other",
+      title_custom_data_key: "extensions.programme",
+    });
+
+    player.entry = ENTRY;
+
+    const received: any[] = [];
+
+    player
+      .getContentObservable()
+      .subscribe((content) => received.push(content));
+
+    expect(received[0].title).toBe("Programme Title");
+  });
+
+  // The live entry lives on `OverlaysObserver`, not on the player, so these
+  // stub the observer rather than constructing a real one (whose constructor
+  // pulls in chapter markers, play-next and the plugin store). What is under
+  // test here is only how `getContent` and the `entry` setter treat it; the
+  // observer's own side - loading the feed and storing the result - is
+  // covered in `OverlayObserver/__tests__/liveContent.test.ts`.
+  const withLiveEntry = (player: Player, liveEntry: ZappEntry | null) => {
+    (player as any).overlaysObserver = {
+      liveEntry,
+      clearLiveEntry() {
+        this.liveEntry = null;
+      },
+    };
+  };
+
+  it("prefers the observer's live entry over the player entry", () => {
+    const player = makePlayer();
+
+    player.entry = ENTRY;
+    withLiveEntry(player, LIVE_ENTRY);
+
+    expect(player.getContent()).toEqual({
+      title: "Live Title",
+      summary: "Live Summary",
+    });
+  });
+
+  it("clears the live entry when a new entry is set", () => {
+    const player = makePlayer();
+
+    player.entry = ENTRY;
+    withLiveEntry(player, LIVE_ENTRY);
+    player.entry = ENTRY;
+
+    expect(player.getContent().title).toBe("Entry Title");
+  });
+
+  it("falls through to the player entry when there is no observer at all", () => {
+    const player = makePlayer();
+
+    player.entry = ENTRY;
+
+    expect((player as any).overlaysObserver).toBeFalsy();
+    expect(player.getContent().title).toBe("Entry Title");
+  });
+
+  it("resolves the cover image from the entry's media group", () => {
+    const player = makePlayer();
+
+    player.entry = {
+      title: "Entry Title",
+      media_group: [
+        {
+          type: "image",
+          media_item: [
+            { key: "image_other", src: "https://img.test/other.jpg" },
+            { key: "image_base", src: "https://img.test/base.jpg" },
+          ],
+        },
+      ],
+    } as unknown as ZappEntry;
+
+    expect(player.getContent().imageUrl).toBe("https://img.test/base.jpg");
+  });
+
+  it("falls back to the first media item when there is no image_base", () => {
+    const player = makePlayer();
+
+    player.entry = {
+      title: "Entry Title",
+      media_group: [
+        {
+          type: "image",
+          media_item: [
+            { key: "image_other", src: "https://img.test/other.jpg" },
+          ],
+        },
+      ],
+    } as unknown as ZappEntry;
+
+    expect(player.getContent().imageUrl).toBe("https://img.test/other.jpg");
+  });
+
+  it("has no image when the entry carries no media group", () => {
+    const player = makePlayer();
+
+    player.entry = ENTRY;
+
+    expect(player.getContent().imageUrl).toBeUndefined();
+  });
+
+  it("takes the cover image from the live entry, not the channel", () => {
+    // The programme's own artwork has to travel with its title - otherwise the
+    // lock screen would keep showing the channel's cover all day.
+    const player = makePlayer();
+
+    player.entry = {
+      title: "Channel",
+      media_group: [
+        {
+          type: "image",
+          media_item: [
+            { key: "image_base", src: "https://img.test/channel.jpg" },
+          ],
+        },
+      ],
+    } as unknown as ZappEntry;
+
+    withLiveEntry(player, {
+      title: "Programme",
+      media_group: [
+        {
+          type: "image",
+          media_item: [
+            { key: "image_base", src: "https://img.test/programme.jpg" },
+          ],
+        },
+      ],
+    } as unknown as ZappEntry);
+
+    expect(player.getContent().imageUrl).toBe("https://img.test/programme.jpg");
+  });
+
+  it("publishes the observer's live entry to subscribers", () => {
+    const player = makePlayer();
+    const received: any[] = [];
+
+    player.entry = ENTRY;
+
+    player
+      .getContentObservable()
+      .subscribe((content) => received.push(content));
+
+    withLiveEntry(player, LIVE_ENTRY);
+    player.publishContent();
+
+    expect(received[received.length - 1].title).toBe("Live Title");
+  });
+
+  it("does not resolve while no subscriber exists", () => {
+    const player = makePlayer();
+    const getConfiguration = jest.fn(() => null);
+
+    player.getPluginConfiguration = getConfiguration;
+    player.entry = ENTRY;
+
+    expect(getConfiguration).not.toHaveBeenCalled();
+  });
+});
+
+/**
+ * Which Studio key set backs the resolution is decided inside `getContent()`
+ * (via `getPlayerContentDataKeys`). Getting it wrong would make one platform
+ * or content type read another's Studio configuration, so each combination is
+ * pinned here - including the negative cases that prove the sets never cross.
+ *
+ * These moved here from `PlayerContainer.test.tsx` when the resolution moved
+ * out of the React tree and into the player; the assertions are unchanged.
+ */
+describe("Player content channel: key-set selection", () => {
+  const VIDEO_ENTRY = {
+    id: "video-entry",
+    title: "Entry Title",
+    summary: "Entry Summary",
+    content: { src: "https://example.com/video.m3u8" },
+    extensions: { customTitleKey: "Custom Title From Extensions" },
+  } as unknown as ZappEntry;
+
+  const AUDIO_ENTRY = {
+    id: "audio-entry",
+    title: "Entry Title",
+    summary: "Entry Summary",
+    content: { type: "audio", src: "https://example.com/audio.m3u8" },
+    extensions: { customTitleKey: "Custom Audio Title From Extensions" },
+  } as unknown as ZappEntry;
+
+  const contentFor = (
+    entry: ZappEntry,
+    configuration: Record<string, any> | null
+  ) => {
+    const player = makePlayer(configuration);
+
+    player.entry = entry;
+
+    return player.getContent();
+  };
+
+  describe("TV video", () => {
+    beforeEach(() => mockIsTV.mockReturnValue(true));
+
+    it("resolves the TV video override to the configured extensions key", () => {
+      const content = contentFor(VIDEO_ENTRY, {
+        video_player_title_data_key_source: "other",
+        video_player_title_custom_data_key: "extensions.customTitleKey",
+      });
+
+      expect(content.title).toBe("Custom Title From Extensions");
+      // summary was not overridden, so it keeps falling back to entry.summary.
+      expect(content.summary).toBe("Entry Summary");
+    });
+
+    it("falls back to the entry title when the configured key does not resolve", () => {
+      const content = contentFor(VIDEO_ENTRY, {
+        video_player_title_data_key_source: "other",
+        video_player_title_custom_data_key: "extensions.doesNotExist",
+      });
+
+      expect(content.title).toBe("Entry Title");
+    });
+
+    it("ignores mobile configuration", () => {
+      const content = contentFor(VIDEO_ENTRY, {
+        title_data_key_source: "other",
+        title_custom_data_key: "extensions.customTitleKey",
+      });
+
+      expect(content.title).toBe("Entry Title");
+    });
+
+    it("reads the TV video key set, not the mobile one, when both are configured", () => {
+      const content = contentFor(VIDEO_ENTRY, {
+        video_player_title_data_key_source: "other",
+        video_player_title_custom_data_key: "extensions.customTitleKey",
+        // A mobile key is also configured, to prove the TV branch ignores it.
+        title_data_key_source: "other",
+        title_custom_data_key: "extensions.doesNotExist",
+      });
+
+      expect(content.title).toBe("Custom Title From Extensions");
+    });
+
+    it("passes the entry fields through when nothing is configured", () => {
+      const content = contentFor(VIDEO_ENTRY, {});
+
+      expect(content.title).toBe("Entry Title");
+      expect(content.summary).toBe("Entry Summary");
+    });
+  });
+
+  describe("TV audio", () => {
+    beforeEach(() => mockIsTV.mockReturnValue(true));
+
+    it("reads the TV audio key set, not the TV video one", () => {
+      const content = contentFor(AUDIO_ENTRY, {
+        audio_player_title_data_key_source: "other",
+        audio_player_title_custom_data_key: "extensions.customTitleKey",
+        // Configuring the TV *video* key too, to prove TV audio content reads
+        // its own key family instead.
+        video_player_title_data_key_source: "other",
+        video_player_title_custom_data_key: "extensions.doesNotExist",
+      });
+
+      expect(content.title).toBe("Custom Audio Title From Extensions");
+    });
+
+    it("falls back to the entry fields when nothing is configured", () => {
+      const content = contentFor(AUDIO_ENTRY, {});
+
+      expect(content.title).toBe("Entry Title");
+      expect(content.summary).toBe("Entry Summary");
+    });
+  });
+
+  describe("mobile", () => {
+    beforeEach(() => mockIsTV.mockReturnValue(false));
+
+    it("resolves the default (mobile) key set", () => {
+      const content = contentFor(VIDEO_ENTRY, {
+        title_data_key_source: "other",
+        title_custom_data_key: "extensions.customTitleKey",
+      });
+
+      expect(content.title).toBe("Custom Title From Extensions");
+    });
+
+    it("ignores TV video configuration", () => {
+      const content = contentFor(VIDEO_ENTRY, {
+        video_player_title_data_key_source: "other",
+        video_player_title_custom_data_key: "extensions.customTitleKey",
+      });
+
+      expect(content.title).toBe("Entry Title");
+    });
+
+    it("shares one key set between video and audio", () => {
+      const content = contentFor(AUDIO_ENTRY, {
+        title_data_key_source: "other",
+        title_custom_data_key: "extensions.customTitleKey",
+      });
+
+      expect(content.title).toBe("Custom Audio Title From Extensions");
+    });
+
+    it("ignores TV audio configuration for mobile audio", () => {
+      const content = contentFor(AUDIO_ENTRY, {
+        audio_player_title_data_key_source: "other",
+        audio_player_title_custom_data_key: "extensions.customTitleKey",
+      });
+
+      expect(content.title).toBe("Entry Title");
+    });
+  });
+});

package/appUtils/playerManager/__tests__/playerFactory.test.ts

@@ -10,7 +10,7 @@ jest.mock("@applicaster/zapp-react-native-utils/pluginUtils", () => ({
     mockFindPluginByIdentifier(id, plugins),
 }));
 
-import { PlayerRole } from "../conts";
+import { PlayerRole } from "../const";
 import { playerFactory } from "../playerFactory";
 
 const fakeComponent = () => null;

package/appUtils/playerManager/__tests__/playerNative.test.ts

@@ -0,0 +1,38 @@
+import { PlayerNative } from "../playerNative";
+
+const playerWithEntry = (entry: any) =>
+  new PlayerNative({
+    entry,
+    player: null as any,
+    playerId: "test-player",
+  });
+
+describe("PlayerNative.isAudioItem", () => {
+  it.each(["audio", "audio-player", "audio-detail", "audio-show", "audio-hub"])(
+    "treats the %s content type as audio",
+    (type) => {
+      expect(playerWithEntry({ type: { value: type } }).isAudioItem()).toBe(
+        true
+      );
+    }
+  );
+
+  it.each(["video", "video-detail", "comic-detail", "article-show"])(
+    "does not treat the %s content type as audio",
+    (type) => {
+      expect(playerWithEntry({ type: { value: type } }).isAudioItem()).toBe(
+        false
+      );
+    }
+  );
+
+  it("falls back to the media type when the content type says nothing", () => {
+    const entry = { content: { type: "audio/mpeg" }, type: { value: "link" } };
+
+    expect(playerWithEntry(entry).isAudioItem()).toBe(true);
+  });
+
+  it("returns false when there is no entry", () => {
+    expect(playerWithEntry(null).isAudioItem()).toBe(false);
+  });
+});

package/appUtils/playerManager/__tests__/usePlayerContent.test.tsx

@@ -0,0 +1,64 @@
+import { renderHook, act } from "@testing-library/react-native";
+import { BehaviorSubject } from "rxjs";
+
+import { usePlayerContent } from "../usePlayerContent";
+
+const mockPlayer: any = {
+  subject: null as BehaviorSubject<any> | null,
+  getContent: jest.fn(),
+  getContentObservable: jest.fn(),
+};
+
+jest.mock("../usePlayer", () => ({
+  usePlayer: () => mockPlayer,
+}));
+
+describe("usePlayerContent", () => {
+  beforeEach(() => {
+    mockPlayer.subject = new BehaviorSubject({
+      title: "First Title",
+      summary: "First Summary",
+    });
+
+    mockPlayer.getContent = jest.fn(() => mockPlayer.subject.getValue());
+
+    mockPlayer.getContentObservable = jest.fn(() =>
+      mockPlayer.subject.asObservable()
+    );
+  });
+
+  it("returns the player's current content", () => {
+    const { result } = renderHook(() => usePlayerContent());
+
+    expect(result.current).toEqual({
+      title: "First Title",
+      summary: "First Summary",
+    });
+  });
+
+  it("re-renders when the player publishes new content", () => {
+    const { result } = renderHook(() => usePlayerContent());
+
+    act(() => {
+      mockPlayer.subject.next({
+        title: "Second Title",
+        summary: "Second Summary",
+      });
+    });
+
+    expect(result.current).toEqual({
+      title: "Second Title",
+      summary: "Second Summary",
+    });
+  });
+
+  it("unsubscribes on unmount", () => {
+    const { unmount } = renderHook(() => usePlayerContent());
+
+    expect(mockPlayer.subject.observed).toBe(true);
+
+    unmount();
+
+    expect(mockPlayer.subject.observed).toBe(false);
+  });
+});

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