@applicaster/quick-brick-player 16.0.0-alpha.1803625751 → 16.0.0-alpha.1816065263

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "16.0.0-alpha.1803625751",
+  "version": "16.0.0-alpha.1816065263",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -35,11 +35,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "16.0.0-rc.2",
-    "@applicaster/quick-brick-tv-transport-controls": "16.0.0-rc.9",
-    "@applicaster/zapp-react-native-tvos-app": "16.0.0-alpha.1803625751",
-    "@applicaster/zapp-react-native-ui-components": "16.0.0-alpha.1803625751",
-    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.1803625751",
+    "@applicaster/quick-brick-mobile-transport-controls": "16.0.0-alpha.1816065263",
+    "@applicaster/quick-brick-tv-transport-controls": "16.0.0-alpha.1816065263",
+    "@applicaster/zapp-react-native-tvos-app": "16.0.0-alpha.1816065263",
+    "@applicaster/zapp-react-native-ui-components": "16.0.0-alpha.1816065263",
+    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.1816065263",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

package/src/Player/AudioLayer/AudioDescription.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 import { StyleSheet, Text, TextStyle, View } from "react-native";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { usePlayerContent } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerContent";
 
 type AudioDescriptionProps = {
-  title: string | number;
-  summary: string | number;
   layoutState: {
     inline: boolean;
     docked: boolean;
@@ -96,17 +95,48 @@ const getSummaryStyles = (value: GetValue, prefix: string): TextStyle =>
     }),
   }) as const;
 
-const getHeight = (titleLineHeight: number, subtitleLineHeight) =>
-  titleLineHeight * TITLE_LINES + subtitleLineHeight + TITLE_PADDING_BOTTOM;
+const getHeight = ({
+  showTitle,
+  showSummary,
+  titleLineHeight,
+  subtitleLineHeight,
+}: {
+  showTitle: boolean;
+  showSummary: boolean;
+  titleLineHeight: number;
+  subtitleLineHeight: number;
+}) => {
+  const titleHeight = showTitle
+    ? titleLineHeight * TITLE_LINES + TITLE_PADDING_BOTTOM
+    : 0;
+
+  const summaryHeight = showSummary ? subtitleLineHeight : 0;
+
+  return titleHeight + summaryHeight;
+};
 
 export const AudioDescription = (props: AudioDescriptionProps) => {
-  const { title, summary, layoutState, value, maxWidth } = props;
+  const { layoutState, value, maxWidth } = props;
+  const { title, summary } = usePlayerContent();
   const prefix = layoutState.docked ? "docked_player_" : "";
 
   const summaryStyles = getSummaryStyles(value, prefix);
   const titleStyles = getTitleStyles(value, prefix);
 
-  const height = getHeight(titleStyles.lineHeight, summaryStyles.lineHeight);
+  // Both depend on the Studio toggle alone, never on whether the text has
+  // arrived yet. Live audio resolves its title/summary asynchronously (the
+  // channel feed is polled after playback starts), so gating on the value
+  // would collapse the row on first render and expand it a second later -
+  // the control has to hold its place and render an empty line instead.
+  const showTitle = Boolean(value(`${prefix}title`));
+  const showSummary = Boolean(value(`${prefix}subtitle`));
+
+  const height = getHeight({
+    showTitle,
+    showSummary,
+    titleLineHeight: titleStyles.lineHeight,
+    subtitleLineHeight: summaryStyles.lineHeight,
+  });
 
   return (
     <View
@@ -118,15 +148,20 @@ export const AudioDescription = (props: AudioDescriptionProps) => {
         },
       ]}
     >
-      <Text style={[styles.titleText, titleStyles]} numberOfLines={TITLE_LINES}>
-        {title}
-      </Text>
-      {summary ? (
+      {showTitle ? (
+        <Text
+          style={[styles.titleText, titleStyles]}
+          numberOfLines={TITLE_LINES}
+        >
+          {title ?? ""}
+        </Text>
+      ) : null}
+      {showSummary ? (
         <Text
           style={[styles.summaryText, summaryStyles]}
           numberOfLines={SUBTITLE_LINES}
         >
-          {summary}
+          {summary ?? ""}
         </Text>
       ) : null}
     </View>

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -19,7 +19,6 @@ import {
   getBottomSheetModalLabelProps,
   getBottomSheetModalSelectedItemIcon,
 } from "../Utils";
-import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 
@@ -89,11 +88,27 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     playNextData = null,
   } = props;
 
-  const { title, summary } = useTitleSummaryOverlay(
-    entry,
-    playerState?.isLive,
-    configuration?.audio_live_player_update_interval
-  );
+  // For live audio the programme changes while the entry stays the same, so
+  // the player polls the channel's programme feed and republishes its content.
+  // Everything about that - whether the content is live at all, where the feed
+  // lives, how often to poll - is decided by `OverlaysObserver`, which loads
+  // the feed without React. This effect owns only the lifecycle: keep the
+  // metadata fresh while this player is mounted. Consumers read the result
+  // through `usePlayerContent` like any other player content.
+  React.useEffect(() => {
+    if (!player) {
+      return;
+    }
+
+    const observer = player.getOverlayObservable();
+
+    observer.startLiveContentUpdates();
+
+    return () => observer.stopLiveContentUpdates();
+    // Keyed on the entry's id rather than the object: starting the updates
+    // fires an immediate request, so a re-created `entry` prop with identical
+    // contents would re-fetch the feed on every render.
+  }, [player, playerState?.isLive, entry?.id]);
 
   const [speedManager, setSpeedManager] = useState<SpeedController | null>(
     null
@@ -282,8 +297,6 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
           configuration={configuration}
           dimensions={dimensions}
           playNextData={playNextData}
-          title={title}
-          summary={summary}
         />
       </View>
     </SafeAreaView>

package/src/Player/AudioLayer/Layout/Controls/index.tsx

@@ -61,8 +61,6 @@ type Props = {
   layoutState: QuickBrickPlayer.LayoutState;
   playerState: QuickBrickPlayer.PlayerState;
   value: GetValue;
-  title: string | number;
-  summary: string | number;
 
   playbackSpeedName: string;
 
@@ -85,8 +83,6 @@ export const Controls = (props: Props) => {
     layoutState,
     playerState,
     value,
-    title,
-    summary,
 
     playbackSpeedName,
 
@@ -227,8 +223,6 @@ export const Controls = (props: Props) => {
       <VerticalGutter />
 
       <AudioDescription
-        title={title}
-        summary={summary}
         value={value}
         layoutState={layoutState}
         maxWidth={maxWidth}

package/src/Player/AudioLayer/Layout/DockedControls/index.tsx

@@ -18,7 +18,6 @@ import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Compo
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
-import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
 import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
@@ -200,12 +199,6 @@ export const DockedControls = (props: Props) => {
     [...Object.values(configuration), playerState.seekableDuration]
   );
 
-  const { title, summary } = useTitleSummaryOverlay(
-    entry,
-    playerState?.isLive,
-    configuration?.audio_live_player_update_interval
-  );
-
   const isTablet = useIsTablet();
 
   const liveButton = Boolean(value("live_badge_enabled"));
@@ -261,11 +254,6 @@ export const DockedControls = (props: Props) => {
     };
   }, [bottomTabsVisible, insets.bottom]);
 
-  const contentInfoContent = React.useMemo(
-    () => ({ ...entry, title, summary }),
-    [title, summary, entry]
-  );
-
   return (
     <>
       <View
@@ -297,7 +285,7 @@ export const DockedControls = (props: Props) => {
               testID="content-info"
               style={[styles.contentInfo, backgroundColorStyle]}
             >
-              <ContentInfo content={contentInfoContent} value={value} docked />
+              <ContentInfo value={value} docked />
             </View>
           </View>
           <View

package/src/Player/AudioLayer/Layout/MobileLayout.tsx

@@ -78,8 +78,6 @@ export function MobileLayout({
   onSpeedButtonPress,
   playbackSpeedName,
   configuration,
-  title,
-  summary,
 }: Props) {
   const { docked } = layoutState;
 
@@ -165,8 +163,6 @@ export function MobileLayout({
             layoutState={layoutState}
             playerState={playerState}
             value={value}
-            title={title}
-            summary={summary}
             playbackSpeedName={playbackSpeedName}
             onPlaybackButtonPress={onPlaybackButtonPress}
             onRewindButtonPress={onRewindButtonPress}

package/src/Player/AudioLayer/Layout/TabletLandscapeLayout.tsx

@@ -75,8 +75,6 @@ export function TabletLandscapeLayout({
   onSpeedButtonPress,
   playbackSpeedName,
   configuration,
-  title,
-  summary,
 }: Props) {
   const [imageWidth, setImageWidth] = React.useState(0);
   const { docked } = layoutState;
@@ -132,8 +130,6 @@ export function TabletLandscapeLayout({
               layoutState={layoutState}
               playerState={playerState}
               value={value}
-              title={title}
-              summary={summary}
               playbackSpeedName={playbackSpeedName}
               onPlaybackButtonPress={onPlaybackButtonPress}
               onRewindButtonPress={onRewindButtonPress}

package/src/Player/AudioLayer/Layout/TabletPortraitLayout.tsx

@@ -81,8 +81,6 @@ export function TabletPortraitLayout({
   onSpeedButtonPress,
   playbackSpeedName,
   configuration,
-  title,
-  summary,
 }: Props) {
   const { docked } = layoutState;
 
@@ -157,8 +155,6 @@ export function TabletPortraitLayout({
               layoutState={layoutState}
               playerState={playerState}
               value={value}
-              title={title}
-              summary={summary}
               playbackSpeedName={playbackSpeedName}
               onPlaybackButtonPress={onPlaybackButtonPress}
               onRewindButtonPress={onRewindButtonPress}

package/src/Player/AudioLayer/__tests__/AudioDescription.test.tsx

@@ -0,0 +1,147 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import { render } from "@testing-library/react-native";
+
+import { AudioDescription } from "../AudioDescription";
+
+// `title`/`summary` come from the player manager's content channel rather than
+// from props or context, so the hook is mocked here. Read lazily inside the
+// factory: `jest.mock` is hoisted above the `let`, so capturing eagerly would
+// freeze it at `undefined`.
+let mockContent: {
+  title: Option<string | number>;
+  summary: Option<string | number>;
+} = { title: "A Title", summary: "A Summary" };
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerContent",
+  () => ({ usePlayerContent: () => mockContent })
+);
+
+beforeEach(() => {
+  mockContent = { title: "A Title", summary: "A Summary" };
+});
+
+const layoutState = { inline: false, docked: false, isModal: true };
+
+const valueFrom =
+  (config: Record<string, unknown>): GetValue =>
+  (key: string) =>
+    (config[key] ?? null) as never;
+
+const renderDescription = (
+  config: Record<string, unknown>,
+  state = layoutState
+) =>
+  render(
+    <AudioDescription
+      layoutState={state}
+      value={valueFrom(config)}
+      maxWidth={400}
+    />
+  );
+
+// The wrapper's style prop is an array, so flatten before reading height.
+const wrapperHeight = (tree) =>
+  StyleSheet.flatten(tree.toJSON().props.style).height;
+
+describe("AudioDescription", () => {
+  it("renders both texts when both toggles are on", () => {
+    const { queryByText } = renderDescription({ title: true, subtitle: true });
+
+    expect(queryByText("A Title")).toBeTruthy();
+    expect(queryByText("A Summary")).toBeTruthy();
+  });
+
+  it("hides the title when the title toggle is off", () => {
+    const { queryByText } = renderDescription({ title: false, subtitle: true });
+
+    expect(queryByText("A Title")).toBeNull();
+    expect(queryByText("A Summary")).toBeTruthy();
+  });
+
+  it("hides the summary when the subtitle toggle is off", () => {
+    const { queryByText } = renderDescription({ title: true, subtitle: false });
+
+    expect(queryByText("A Title")).toBeTruthy();
+    expect(queryByText("A Summary")).toBeNull();
+  });
+
+  it("renders neither text when both toggles are off", () => {
+    const { queryByText } = renderDescription({
+      title: false,
+      subtitle: false,
+    });
+
+    expect(queryByText("A Title")).toBeNull();
+    expect(queryByText("A Summary")).toBeNull();
+  });
+
+  it("reserves no height when both toggles are off", () => {
+    const tree = renderDescription({ title: false, subtitle: false });
+
+    expect(wrapperHeight(tree)).toBe(0);
+  });
+
+  it("reserves less height when the title is hidden than when it is shown", () => {
+    const withTitle = renderDescription({ title: true, subtitle: true });
+    const withoutTitle = renderDescription({ title: false, subtitle: true });
+
+    expect(wrapperHeight(withoutTitle)).toBeLessThan(wrapperHeight(withTitle));
+  });
+
+  it("reserves less height when the subtitle is hidden than when it is shown", () => {
+    const withSubtitle = renderDescription({ title: true, subtitle: true });
+    const withoutSubtitle = renderDescription({ title: true, subtitle: false });
+
+    expect(wrapperHeight(withoutSubtitle)).toBeLessThan(
+      wrapperHeight(withSubtitle)
+    );
+  });
+
+  it("reads the docked toggle keys when docked", () => {
+    const { queryByText } = renderDescription(
+      { docked_player_title: true, docked_player_subtitle: false },
+      { ...layoutState, docked: true }
+    );
+
+    expect(queryByText("A Title")).toBeTruthy();
+    expect(queryByText("A Summary")).toBeNull();
+  });
+
+  /**
+   * Live audio resolves its text asynchronously: the channel feed is polled
+   * after playback starts, so the first render has no programme title yet. The
+   * row must hold its place across that transition instead of collapsing and
+   * expanding a second later.
+   */
+  describe("layout stability while the text is still missing", () => {
+    it("reserves the same height with and without text", () => {
+      const withText = renderDescription({ title: true, subtitle: true });
+
+      mockContent = { title: null, summary: null };
+
+      const withoutText = renderDescription({ title: true, subtitle: true });
+
+      expect(wrapperHeight(withoutText)).toBe(wrapperHeight(withText));
+    });
+
+    it("still renders both rows when the text has not arrived", () => {
+      mockContent = { title: null, summary: null };
+
+      const tree = renderDescription({ title: true, subtitle: true });
+
+      expect(wrapperHeight(tree)).toBeGreaterThan(0);
+    });
+
+    it("reserves height for the summary even when only the summary is missing", () => {
+      const withSummary = renderDescription({ title: true, subtitle: true });
+
+      mockContent = { title: "A Title", summary: null };
+
+      const withoutSummary = renderDescription({ title: true, subtitle: true });
+
+      expect(wrapperHeight(withoutSummary)).toBe(wrapperHeight(withSummary));
+    });
+  });
+});

package/src/Player/AudioLayer/__tests__/AudioPlayerWrapper.test.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+/**
+ * Covers AudioPlayerWrapper's remaining Title/Subtitle responsibility, which is
+ * only lifecycle: keep the manager's live-content polling running while this
+ * player is mounted. It carries neither the text (consumers read it from the
+ * player manager via `usePlayerContent`) nor any decision about the polling -
+ * whether the content is live, where the channel's programme feed lives and
+ * how often to poll are all `OverlaysObserver`'s.
+ *
+ * The rest of the chain is covered where each link lives:
+ *   - is-live / feed url / interval           OverlayObserver/__tests__/liveContent.test.ts
+ *   - polling -> `observer.liveEntry`         OverlayObserver/__tests__/liveContent.test.ts
+ *   - liveEntry -> published content          playerManager/__tests__/playerContent.test.ts
+ *   - published content -> rendered text      AudioLayer/__tests__/AudioDescription.test.tsx
+ */
+
+const mockStartLiveContentUpdates = jest.fn();
+const mockStopLiveContentUpdates = jest.fn();
+
+const mockPlayer = {
+  getOverlayObservable: () => ({
+    startLiveContentUpdates: mockStartLiveContentUpdates,
+    stopLiveContentUpdates: mockStopLiveContentUpdates,
+  }),
+  addListener: jest.fn(() => jest.fn()),
+  play: jest.fn(),
+  pause: jest.fn(),
+  rewind: jest.fn(),
+  forward: jest.fn(),
+};
+
+let mockIsLive = false;
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer",
+  () => ({ usePlayer: () => mockPlayer })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState",
+  () => ({
+    usePlayerState: () => ({
+      isLive: mockIsLive,
+      seekableDuration: 0,
+      isReadyToPlay: false,
+      isBuffering: false,
+      isPaused: false,
+    }),
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/appUtils", () => ({
+  playerManager: {
+    close: jest.fn(),
+    isCasting: jest.fn(() => false),
+  },
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useNavigation: jest.fn(() => ({ maximiseVideoModal: jest.fn() })),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/modalState", () => ({
+  useModalStoreState: jest.fn(() => ({ visible: false })),
+  dismissModal: jest.fn(),
+  openBottomSheetModal: jest.fn(),
+}));
+
+jest.mock("../Layout", () => ({
+  __esModule: true,
+  default: () => null,
+}));
+
+import { AudioPlayerWrapper } from "../AudioPlayerWrapper";
+
+const LIVE_ENTRY = {
+  id: "entry-1",
+  title: "Channel Title",
+  summary: "Channel Summary",
+  extensions: {
+    live: { channel_src: "https://feed.test/subClass/audio" },
+  },
+} as any;
+
+const baseProps = {
+  configuration: { audio_live_player_update_interval: 30 },
+  style: { width: 100, height: 100 } as any,
+  entry: LIVE_ENTRY,
+  layoutState: { inline: false, docked: false, isModal: false, pip: false },
+  playNextData: null,
+  children: null,
+};
+
+describe("AudioPlayerWrapper live content polling", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockIsLive = true;
+  });
+
+  it("asks the observer to keep live content fresh while mounted", () => {
+    render(<AudioPlayerWrapper {...baseProps} />);
+
+    expect(mockStartLiveContentUpdates).toHaveBeenCalled();
+  });
+
+  it("stops polling on unmount", () => {
+    const { unmount } = render(<AudioPlayerWrapper {...baseProps} />);
+
+    unmount();
+
+    expect(mockStopLiveContentUpdates).toHaveBeenCalled();
+  });
+
+  it("re-evaluates when the player reports the content is live", () => {
+    // `isLive` is unknown until the player loads, so the effect has to run
+    // again once it settles - the observer decides what to do with it.
+    mockIsLive = false;
+
+    const { rerender } = render(<AudioPlayerWrapper {...baseProps} />);
+
+    mockStartLiveContentUpdates.mockClear();
+    mockIsLive = true;
+
+    rerender(<AudioPlayerWrapper {...baseProps} />);
+
+    expect(mockStartLiveContentUpdates).toHaveBeenCalled();
+  });
+});

package/src/Player/__tests__/getNativeProps.test.ts

@@ -0,0 +1,115 @@
+import VideoPlayer from "../index";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
+
+/**
+ * Pins where `getNativeProps()`'s `metadata` object comes from: the player
+ * manager's content channel, looked up by `props.playerId`.
+ *
+ * This deliberately does NOT depend on tree position. An earlier version read
+ * the values from `PlayerContainerContext` via `static contextType`, which
+ * made native's props depend on `Player` being rendered inside
+ * `PlayerContainerContextProvider` - safe only as long as an exhaustive
+ * render-site search stayed true. Reading from the manager removes that whole
+ * class of fragility, so the tests below assert the value's source rather than
+ * a render-site invariant.
+ *
+ * Lookup is by id rather than `getActivePlayer()` because these props are
+ * handed to this component's own native view: they must describe that player
+ * even while a cast session is running.
+ *
+ * The instance is constructed directly (bypassing `render()`/mount) so this
+ * exercises the real `getNativeProps()` without paying for a full render of
+ * the ~37KB `VideoPlayer` class tree.
+ */
+
+jest.mock("@applicaster/zapp-react-native-utils/appUtils", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-utils/appUtils"),
+  playerManager: {
+    getPlayerWithId: jest.fn(),
+  },
+}));
+
+const entry = {
+  id: "1",
+  title: "Entry Title",
+  summary: "Entry Summary",
+} as unknown as ZappEntry;
+
+const baseProps = {
+  entry,
+  pluginConfiguration: {},
+  docked: false,
+  fullscreen: false,
+  inline: false,
+  isModal: false,
+  isTabletPortrait: false,
+  muted: false,
+  playerId: "player-1",
+  PlayerComponent: "QuickBrickDefaultPlayerView",
+} as unknown as ConstructorParameters<typeof VideoPlayer>[0];
+
+const publishContent = (
+  content: {
+    title: Option<string | number>;
+    summary: Option<string | number>;
+  } | null
+) => {
+  (playerManager.getPlayerWithId as jest.Mock).mockReturnValue(
+    content ? { getContent: () => content } : null
+  );
+};
+
+describe("Player's getNativeProps() reading Title/Subtitle from the manager", () => {
+  it("sends the title/summary the player published", () => {
+    publishContent({
+      title: "Resolved Title",
+      summary: "Resolved Summary",
+    });
+
+    const nativeProps = new VideoPlayer(baseProps).getNativeProps();
+
+    expect(nativeProps.metadata.title).toBe("Resolved Title");
+    expect(nativeProps.metadata.subtitle).toBe("Resolved Summary");
+  });
+
+  it("looks the player up by its own id, not the active player", () => {
+    publishContent({ title: "Resolved Title", summary: "Resolved Summary" });
+
+    new VideoPlayer(baseProps).getNativeProps();
+
+    expect(playerManager.getPlayerWithId).toHaveBeenCalledWith("player-1");
+  });
+
+  it("sends undefined when the player published no text", () => {
+    publishContent({ title: null, summary: null });
+
+    const nativeProps = new VideoPlayer(baseProps).getNativeProps();
+
+    expect(nativeProps.metadata.title).toBeUndefined();
+    expect(nativeProps.metadata.subtitle).toBeUndefined();
+  });
+
+  it("sends undefined rather than crashing when no player is registered", () => {
+    publishContent(null);
+
+    const nativeProps = new VideoPlayer(baseProps).getNativeProps();
+
+    expect(nativeProps.metadata.title).toBeUndefined();
+    expect(nativeProps.metadata.subtitle).toBeUndefined();
+  });
+
+  it("does not fall back to entry.title/entry.summary itself - the resolver owns that fallback", () => {
+    // `entry.title`/`entry.summary` are "Entry Title"/"Entry Summary" (see
+    // `baseProps`); with nothing published, nativeProps must NOT silently pick
+    // those up as a second, redundant fallback layer inside `Player`. The
+    // entry-field fallback lives in `resolvePlayerContentText`, reached
+    // through the player's own `getContent()`.
+    publishContent({ title: null, summary: null });
+
+    const nativeProps = new VideoPlayer(baseProps).getNativeProps();
+
+    expect(nativeProps.metadata.title).not.toBe(entry.title);
+    expect(nativeProps.metadata.subtitle).not.toBe(entry.summary);
+    expect(nativeProps.entry).toBe(entry);
+  });
+});

package/src/Player/__tests__/toNativeMetadata.test.ts

@@ -0,0 +1,77 @@
+import { toNativeMetadata } from "../index";
+
+// `toNativeMetadata` used to be `resolveNativeTitleSubtitle`, which resolved
+// Title/Subtitle from `entry` + `pluginConfiguration` itself (the dot-path /
+// custom-key / fallback logic). That resolution now happens once in
+// `Player.getContent()` (via `resolvePlayerTitleSubtitle`, already covered by
+// `playerUtils/__tests__/resolvePlayerTitleSubtitle.test.ts` and
+// `playerUtils/__tests__/contentDataKeys.test.ts` - custom-key resolution,
+// fallback-when-unresolvable, and entry-non-mutation are all still asserted
+// there). `toNativeMetadata` only adapts the already-resolved
+// `player.getContent()` value into the `metadata` object the native bridge
+// receives, so this file only covers that adaptation: the shape coercion, and
+// the numeric coercion the native bridge specifically needs (it cannot render
+// a number the way `<Text>` can).
+describe("toNativeMetadata", () => {
+  it("returns undefined for both fields when title/summary are null (what the player publishes when there is nothing to show)", () => {
+    expect(toNativeMetadata({ title: null, summary: null })).toEqual({
+      title: undefined,
+      subtitle: undefined,
+    });
+  });
+
+  it("returns undefined for both fields when content itself is undefined", () => {
+    expect(toNativeMetadata(undefined)).toEqual({
+      title: undefined,
+      subtitle: undefined,
+    });
+  });
+
+  it("passes through string title/summary as-is", () => {
+    expect(
+      toNativeMetadata({
+        title: "Resolved Title",
+        summary: "Resolved Summary",
+      })
+    ).toEqual({
+      title: "Resolved Title",
+      subtitle: "Resolved Summary",
+    });
+  });
+
+  it("coerces a numeric title/summary to a string for the native bridge", () => {
+    expect(toNativeMetadata({ title: 0, summary: 42 })).toEqual({
+      title: "0",
+      subtitle: "42",
+    });
+  });
+
+  it("handles title and summary independently (one present, one absent)", () => {
+    expect(toNativeMetadata({ title: "Only Title", summary: null })).toEqual({
+      title: "Only Title",
+      subtitle: undefined,
+    });
+  });
+
+  it("passes the cover image url through", () => {
+    expect(
+      toNativeMetadata({
+        title: "A Title",
+        summary: "A Summary",
+        imageUrl: "https://img.test/base.jpg",
+      })
+    ).toEqual({
+      title: "A Title",
+      subtitle: "A Summary",
+      imageUrl: "https://img.test/base.jpg",
+    });
+  });
+
+  it("sends undefined rather than an empty string when there is no image", () => {
+    // Native treats an empty URI as a load attempt; `undefined` means "none".
+    expect(
+      toNativeMetadata({ title: "A Title", summary: null, imageUrl: null })
+        .imageUrl
+    ).toBeUndefined();
+  });
+});

package/src/Player/index.tsx

@@ -52,7 +52,7 @@ import { TVPlayerView } from "./PlayerView/TVPlayerView";
 import PlayerModal, { VideoPlayerModal } from "./PlayerModal";
 import { DockedControls } from "./AudioLayer/Layout/DockedControls";
 import { FlexImage } from "./AudioLayer/Layout/PlayerImage/FlexImage";
-import { PlayerError } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/conts";
+import { PlayerError } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/const";
 
 const isTvOS = isTvOSPlatform();
 
@@ -69,6 +69,60 @@ const styles = StyleSheet.create({
   flexImage: { height: "100%", aspectRatio: 1, flex: -1 },
 });
 
+/**
+ * Coerces the resolver's `Option<string | number>` result into what the
+ * native bridge expects: a string, or `undefined` when there is nothing to
+ * send.
+ */
+const toNativeTextProp = (
+  value: Option<string | number>
+): string | undefined =>
+  value === null || value === undefined ? undefined : String(value);
+
+export type NativePlayerMetadata = {
+  title: string | undefined;
+  subtitle: string | undefined;
+  imageUrl: string | undefined;
+};
+
+/**
+ * Adapts the player's resolved Title/Subtitle into the `metadata` object the
+ * *native* view receives.
+ *
+ * The resolution itself (dot-path / key-set logic, entry fallback) does not
+ * happen here - the player manager resolves it and publishes it on its content
+ * channel (`player.getContent()`). This function only coerces that value's
+ * `Option<string | number>` shape into what the native bridge needs: a string,
+ * or `undefined` when there is nothing to send.
+ *
+ * Travels as one `metadata` object rather than two flat props so native has a
+ * single place to look for player-facing text, and so adding a field later
+ * does not widen the bridge's prop surface again.
+ *
+ * This intentionally does not touch `entry` - analytics and the downloads
+ * feature read `entry.title` / `entry.summary` directly and must keep
+ * seeing the original feed values (the downloads feature requires the
+ * original entry title). The resolved (possibly customer-configured) text
+ * travels in `metadata` instead.
+ *
+ * Exported as a plain function (rather than inlined as a class method) so
+ * it can be unit tested directly without rendering the ~37KB `VideoPlayer`
+ * class component.
+ */
+export const toNativeMetadata = (
+  content: Option<{
+    title: Option<string | number>;
+    summary: Option<string | number>;
+    imageUrl?: Option<string>;
+  }>
+): NativePlayerMetadata => ({
+  title: toNativeTextProp(content?.title),
+  subtitle: toNativeTextProp(content?.summary),
+  // Already a string when present; coerced through the same helper so an
+  // empty or nullish value reaches native as `undefined` rather than "".
+  imageUrl: toNativeTextProp(content?.imageUrl),
+});
+
 type VideoPlayerProps = QuickBrickPlayer.PlayerProps & {
   isCasting?: boolean;
   playNextData?: PlayNextData;
@@ -1072,6 +1126,15 @@ export default class VideoPlayer extends React.Component<
     const liveCatchUpEnabled =
       this.props.pluginConfiguration?.liveCatchUpEnabled;
 
+    // Look the player up by id rather than using the active player: these
+    // props are handed to this component's own native player view, so they
+    // must describe that player's content even while a cast session is
+    // running (during which `usePlayer` swaps React consumers over to the
+    // casting receiver).
+    const metadata = toNativeMetadata(
+      playerManager.getPlayerWithId(this.props.playerId)?.getContent()
+    );
+
     const nativeProps = {
       rate: undefined,
       entry,
@@ -1090,6 +1153,7 @@ export default class VideoPlayer extends React.Component<
       liveCatchUpEnabled,
       playerId: this.props.playerId,
       pictureInPictureEnabled,
+      metadata,
       seekStep:
         (this.props.pluginConfiguration?.seek_duration || SEEK_TIME) * 1000,
       accessibilityProps: getAllAccessibilityProps(
@@ -1146,10 +1210,15 @@ export default class VideoPlayer extends React.Component<
       return null;
     }
 
-    const TransportControls = isTV()
+    const isTvPlatform = isTV();
+
+    const TransportControls = isTvPlatform
       ? TransportControlsTV
       : TransportControlsMobile;
 
+    // The mobile and TV transport controls read Title/Subtitle from the
+    // player manager's content channel (via `usePlayerContent`) instead of
+    // receiving them as props.
     const needToShowDefaultControls = !(
       (controls && !castAction?.state?.connected) ||
       this.getPlayNextData()