@applicaster/zapp-react-native-ui-components 16.0.0-alpha.1745039402 → 16.0.0-alpha.1798567344

package/Components/AudioPlayer/tv/__tests__/audioPlayer.test.js

@@ -1,6 +1,15 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
 
+let mockContent = { title: null, summary: null };
+
+// Read lazily inside the factory: `jest.mock` is hoisted above the `let` above,
+// so capturing the value eagerly would freeze it at `undefined`.
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerContent",
+  () => ({ usePlayerContent: () => mockContent })
+);
+
 import { AudioPlayerTV } from "..";
 
 jest.mock("@applicaster/zapp-react-native-utils/audioPlayerUtils", () => ({
@@ -51,7 +60,17 @@ const audioPlayerProps = {
 
 describe("<AudioPlayerTV />", () => {
   it("renders correctly", () => {
+    // AudioPlayerTV no longer resolves its own title/summary from
+    // audio_item - it reads them from the player manager's content channel.
+    // Publishing the same values `audio_item.title`/`.summary` used to resolve
+    // to keeps this snapshot byte-for-byte identical to before that change.
+    mockContent = {
+      title: audioPlayerProps.audio_item.title,
+      summary: audioPlayerProps.audio_item.summary,
+    };
+
     const { toJSON } = render(<AudioPlayerTV {...audioPlayerProps} />);
+
     expect(toJSON()).toMatchSnapshot();
   });
 });

package/Components/AudioPlayer/tv/__tests__/index.test.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { AudioPlayerTV } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/audioPlayerUtils", () => ({
+  useArtworkImage: jest.fn(() => "artwork_url"),
+}));
+
+let mockContent: {
+  title: Option<string | number>;
+  summary: Option<string | number>;
+} = { title: null, summary: null };
+
+// Read lazily inside the factory: `jest.mock` is hoisted above the `let`
+// above, so capturing the value eagerly would freeze it at `undefined`.
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerContent",
+  () => ({ usePlayerContent: () => mockContent })
+);
+
+const baseAudioItem = {
+  title: "tittle",
+  summary: "Summary",
+  content: {
+    src: "https://example.com",
+  },
+  media_group: [
+    {
+      type: "audio",
+      media_item: [
+        {
+          type: "audio",
+          src: "https://example.com",
+          key: "base_code",
+        },
+      ],
+    },
+  ],
+  extensions: {
+    audio_player_artwork_aspect_ratio: "1:1",
+    audio_player_background_image: "https://example.com",
+    audio_player_background_color: "black",
+    audio_player_channel_icon: "https://example.com",
+    audio_player_title_color: "white",
+    audio_player_summary_color: "white",
+    audio_player_rtl: true,
+    start_time: "10:10",
+    end_time: "11:11",
+    episode_name: "Episode Custom Title",
+    episode_summary: "Episode Custom Summary",
+  },
+};
+
+const basePluginConfiguration = {
+  audio_player_background_color: "black",
+  audio_player_title_color: "white",
+  audio_player_summary_color: "white",
+  audio_player_rtl: true,
+  audio_player_background_image: "https://example.com",
+  audio_player_artwork_aspect_ratio: "1:1",
+};
+
+function renderAudioPlayer(
+  plugin_configuration,
+  content: {
+    title?: Option<string | number>;
+    summary?: Option<string | number>;
+  } = {}
+) {
+  mockContent = {
+    title: content.title ?? null,
+    summary: content.summary ?? null,
+  };
+
+  return render(
+    <AudioPlayerTV
+      audio_item={baseAudioItem}
+      plugin_configuration={plugin_configuration}
+      style={{}}
+    />
+  );
+}
+
+describe("<AudioPlayerTV /> player content", () => {
+  it("renders the title and summary published by the player manager", () => {
+    const { getByText } = renderAudioPlayer(basePluginConfiguration, {
+      title: "Episode Custom Title",
+      summary: "Episode Custom Summary",
+    });
+
+    expect(getByText("Episode Custom Title")).toBeTruthy();
+    expect(getByText("Episode Custom Summary")).toBeTruthy();
+  });
+
+  it("renders nothing for title/summary when the player published neither", () => {
+    const { queryByText } = renderAudioPlayer(basePluginConfiguration);
+
+    expect(queryByText("tittle")).toBeNull();
+    expect(queryByText("Summary")).toBeNull();
+  });
+
+  it("renders blank rather than crashing when no player is active", () => {
+    // `usePlayerContent` returns `{ title: null, summary: null }` when there is
+    // no player. A regression here means AudioPlayerTV crashes instead of
+    // rendering blank.
+    mockContent = { title: null, summary: null };
+
+    const { queryByText } = render(
+      <AudioPlayerTV
+        audio_item={baseAudioItem}
+        plugin_configuration={basePluginConfiguration}
+        style={{}}
+      />
+    );
+
+    expect(queryByText("tittle")).toBeNull();
+    expect(queryByText("Summary")).toBeNull();
+  });
+});

package/Components/AudioPlayer/tv/index.tsx

@@ -3,6 +3,8 @@ import React, { useCallback, useMemo } from "react";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useArtworkImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
+import { usePlayerContent } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerContent";
+
 import { AudioPlayerTVLayout } from "./Layout";
 
 import { Channel } from "./Channel";
@@ -15,10 +17,12 @@ import { Props } from "../types";
 
 export function AudioPlayerTV(props: Props) {
   const { audio_item, plugin_configuration, style = {} } = props;
-  const { extensions, title, summary } = audio_item;
+  const { extensions } = audio_item;
 
   const artwork = useArtworkImage(audio_item);
 
+  const { title, summary } = usePlayerContent();
+
   const getProp = useCallback(
     getPropertyFromEntryOrConfig({
       entry: audio_item,

package/Components/Cell/Cell.tsx

@@ -134,7 +134,7 @@ export class CellComponent extends React.Component<Props, State> {
     }
   }
 
-  onFocus(focusable, mouse) {
+  onFocus(focusable) {
     const {
       item: { id, title },
       shouldScrollVertically,
@@ -145,10 +145,7 @@ export class CellComponent extends React.Component<Props, State> {
     if (isFocusable) {
       this.setState({ cellFocused: true });
 
-      if (
-        shouldUpdate &&
-        shouldScrollVertically?.(mouse, focusable, id, title)
-      ) {
+      if (shouldUpdate && shouldScrollVertically?.(focusable, id, title)) {
         this.scrollVertically(focusable);
       }
     }
@@ -262,7 +259,7 @@ export class CellComponent extends React.Component<Props, State> {
     const handleFocus = (focusable, mouse) => {
       const focusFn = onFocus || noop;
       focusFn(focusable, mouse);
-      this.onFocus(focusable, mouse);
+      this.onFocus(focusable);
     };
 
     if (this.state.hasFocusableInside) {

package/Components/Cell/TvOSCellComponent.tsx

@@ -228,7 +228,6 @@ class TvOSCell extends React.Component<Props, State> {
       mainOffsetUpdater?.(
         { tag: this.target },
         totalOffset,
-        null,
         groupId,
         id,
         component.id,

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/__tests__/placement.test.ts

@@ -6,28 +6,54 @@ import {
 describe("ActionButtonsCore placement", () => {
   const buttons = { type: "View", name: "buttons" };
 
-  const above_labels = [
-    { name: "above_label_1" },
-    { name: "above_label_2" },
-    { name: "above_label_3" },
+  const slots = [
+    { name: "text_label_1", element: { type: "View", id: "label_1" } },
+    { name: "text_label_2", element: { type: "View", id: "label_2" } },
+    { name: "text_label_3", element: { type: "View", id: "label_3" } },
   ];
 
-  const below_labels = [
-    { name: "below_label_1" },
-    { name: "below_label_2" },
-    { name: "below_label_3" },
-  ];
+  const labels = slots.map((slot) => slot.element);
 
   it("inserts buttons after the matching label", () => {
     expect(
-      insertBetweenLabels({ position: "below_label_2" }, buttons, below_labels)
-    ).toEqual([below_labels[0], below_labels[1], buttons, below_labels[2]]);
+      insertBetweenLabels({ position: "below_text_label_2" }, buttons, slots)
+    ).toEqual([labels[0], labels[1], buttons, labels[2]]);
   });
 
   it("inserts buttons before the matching label", () => {
     expect(
-      insertBetweenLabels({ position: "above_label_2" }, buttons, above_labels)
-    ).toEqual([above_labels[0], buttons, above_labels[1], above_labels[2]]);
+      insertBetweenLabels({ position: "above_text_label_2" }, buttons, slots)
+    ).toEqual([labels[0], buttons, labels[1], labels[2]]);
+  });
+
+  it("inserts buttons after the matching label on a plain name match", () => {
+    expect(
+      insertBetweenLabels({ position: "text_label_2" }, buttons, slots)
+    ).toEqual([labels[0], labels[1], buttons, labels[2]]);
+  });
+
+  it("keeps the slot when its label is empty (null element)", () => {
+    const slotsWithEmpty = [
+      { name: "text_label_1", element: { id: "label_1" } },
+      { name: "text_label_2", element: null },
+      { name: "text_label_3", element: { id: "label_3" } },
+    ];
+
+    expect(
+      insertBetweenLabels(
+        { position: "above_text_label_2" },
+        buttons,
+        slotsWithEmpty
+      )
+    ).toEqual([{ id: "label_1" }, buttons, { id: "label_3" }]);
+
+    expect(
+      insertBetweenLabels(
+        { position: "below_text_label_2" },
+        buttons,
+        slotsWithEmpty
+      )
+    ).toEqual([{ id: "label_1" }, buttons, { id: "label_3" }]);
   });
 
   it("prepends buttons only when on_top is allowed", () => {
@@ -35,17 +61,17 @@ describe("ActionButtonsCore placement", () => {
       insertBetweenLabels(
         { position: "on_top", allowOnTop: true },
         buttons,
-        below_labels
+        slots
       )
-    ).toEqual([buttons, ...below_labels]);
+    ).toEqual([buttons, ...labels]);
 
     expect(
       insertBetweenLabels(
         { position: "on_top", allowOnTop: false },
         buttons,
-        below_labels
+        slots
       )
-    ).toEqual(below_labels);
+    ).toEqual(labels);
   });
 
   it("appends buttons when appendWhenMissing is enabled", () => {
@@ -53,9 +79,9 @@ describe("ActionButtonsCore placement", () => {
       insertBetweenLabels(
         { position: "unknown", appendWhenMissing: true },
         buttons,
-        below_labels
+        slots
       )
-    ).toEqual([...below_labels, buttons]);
+    ).toEqual([...labels, buttons]);
   });
 
   it("returns labels unchanged when appendWhenMissing is disabled", () => {
@@ -63,9 +89,9 @@ describe("ActionButtonsCore placement", () => {
       insertBetweenLabels(
         { position: "unknown", appendWhenMissing: false },
         buttons,
-        below_labels
+        slots
       )
-    ).toEqual(below_labels);
+    ).toEqual(labels);
   });
 
   const labelContainers = [

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/placement.ts

@@ -17,6 +17,11 @@ type InsertOptions = {
   appendWhenMissing?: boolean;
 };
 
+type Slot = {
+  name: string;
+  element?: unknown;
+};
+
 const hasLabelName = (value: unknown): value is Label =>
   !!value &&
   typeof value === "object" &&
@@ -100,8 +105,14 @@ const containsNestedLabel = (
 export const insertBetweenLabels = (
   { position, allowOnTop = false, appendWhenMissing = false }: InsertOptions,
   buttons: unknown,
-  labels: Label[] = []
+  slots: Slot[] = []
 ) => {
+  // Slots are defined by the canonical label list, so an empty (null) label
+  // still keeps its position — buttons placed above/below it survive.
+  const labels = slots
+    .map((slot) => slot.element)
+    .filter((element) => element != null);
+
   if (buttons == null) {
     return labels;
   }
@@ -110,14 +121,31 @@ export const insertBetweenLabels = (
     return [buttons, ...labels];
   }
 
-  const labelsWithButtons = withButtons(position, buttons, labels);
-  const inserted = labelsWithButtons.length !== labels.length;
+  let inserted = false;
+  const result: unknown[] = [];
+
+  for (const { name, element } of slots) {
+    if (position === `above_${name}`) {
+      result.push(buttons);
+      inserted = true;
+    }
+
+    if (element != null) {
+      result.push(element);
+    }
+
+    // Insert after on `below_*` or a plain label-name match.
+    if (position === `below_${name}` || position === name) {
+      result.push(buttons);
+      inserted = true;
+    }
+  }
 
-  if (!inserted && appendWhenMissing) {
-    return [...labels, buttons];
+  if (!inserted) {
+    return appendWhenMissing ? [...labels, buttons] : labels;
   }
 
-  return inserted ? labelsWithButtons : [...labels];
+  return result;
 };
 
 export const insertBetweenLabelContainers = (