@applicaster/zapp-react-native-ui-components 16.0.0-rc.59 → 16.0.0-rc.60

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/PlayerContainer/PlayerContainer.tsx

@@ -190,12 +190,10 @@ const renderApplePlayer = ({
     return null;
   }
 
-  const { title, summary } = item || {};
-
+  // Title/Subtitle are not resolved here: `ProgramInfo` reads them from the
+  // player manager's content channel via `usePlayerContent`.
   return (
     <ProgramInfo
-      title={title}
-      subtitle={summary}
       plugin_configuration={pluginConfiguration}
       videoStyle={videoStyle}
     />

package/Components/PlayerContainer/ProgramInfo/index.tsx

@@ -7,12 +7,11 @@ import * as React from "react";
 import { Text, TextStyle, View, ViewStyle } from "react-native";
 import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 
+import { usePlayerContent } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerContent";
 import * as programStyles from "./styles";
 
 type Props = {
   logo?: string;
-  title: string;
-  subtitle: string;
   isAudioContent: boolean;
   styles: {};
   plugin_configuration: {
@@ -28,13 +27,13 @@ const defaultColor = "#EFEFEF";
 
 function ProgramInfoComponent({
   logo,
-  title = "",
-  subtitle = "",
   isAudioContent,
   styles,
   plugin_configuration = {},
   videoStyle = {},
 }: Props) {
+  const { title = "", summary: subtitle = "" } = usePlayerContent();
+
   const platformKey = styleKeys.style_namespace;
 
   const colorTitle =

package/Components/PlayerContainer/__tests__/PlayerContainer.test.tsx

@@ -17,17 +17,37 @@ jest.mock(
 );
 
 jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  // Defaults to `false` for the hardware-back-handling tests below, which
+  // key off `isTV`. The ProgramInfo/content-context describe block below
+  // overrides this per test (`isTV()` is also what PlayerContainer's
+  // `playerContentValue` uses to pick TV vs mobile data keys, decoupled
+  // from `isTvOSPlatform` below).
   isTV: jest.fn(() => false),
   isAndroidTVPlatform: jest.fn(() => false),
-  isTvOSPlatform: jest.fn(() => false),
+  // `isTvOSPlatform` backs a module-level constant in PlayerContainer.tsx that
+  // is read once at import time, so it must already be `true` here in order
+  // to exercise `renderApplePlayer`'s tvOS-only ProgramInfo branch in this
+  // test file. It does not affect the hardware-back-handling tests below,
+  // which key off `isTV` instead.
+  isTvOSPlatform: jest.fn(() => true),
   isApplePlatform: jest.fn(() => true),
   platformSelect: jest.fn(({ native }) => native),
 }));
 
-jest.mock("@applicaster/zapp-react-native-utils/playerUtils", () => ({
-  isAudioItem: jest.fn(() => false),
-  isInlineTV: jest.fn(() => false),
-}));
+jest.mock("@applicaster/zapp-react-native-utils/playerUtils", () => {
+  // Keep the real data-key resolver (createConfigValueGetter,
+  // resolvePlayerContentText, VIDEO_PLAYER_CONTENT_DATA_KEYS) so the tvOS
+  // ProgramInfo data-key tests exercise actual resolution logic, not a stub.
+  const actual = jest.requireActual(
+    "@applicaster/zapp-react-native-utils/playerUtils"
+  );
+
+  return {
+    ...actual,
+    isAudioItem: jest.fn(() => false),
+    isInlineTV: jest.fn(() => false),
+  };
+});
 
 jest.mock(
   "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent",
@@ -76,6 +96,11 @@ jest.mock("@applicaster/zapp-react-native-bridge/QuickBrick", () => ({
   sendQuickBrickEvent: jest.fn(),
 }));
 
+// Stubbed so PlayerContainer can render without ProgramInfo's own
+// redux/style plumbing. It no longer needs to capture Title/Subtitle: those
+// come from the player manager's content channel, and the key-set selection
+// they depend on is covered directly in
+// `playerManager/__tests__/playerContent.test.ts`.
 jest.mock("../ProgramInfo", () => ({
   ProgramInfo: () => null,
 }));
@@ -143,14 +168,33 @@ jest.mock(
 jest.mock("../PlayerContainerContext", () => {
   const ReactActual = require("react");
 
+  const PlayerContainerContext = ReactActual.createContext({
+    isLanguageOverlayVisible: false,
+    bottomFocusableId: "bottom",
+    showComponentsContainer: false,
+    refs: null,
+  });
+
   return {
-    PlayerContainerContext: ReactActual.createContext({
-      isLanguageOverlayVisible: false,
-      bottomFocusableId: "bottom",
-      showComponentsContainer: false,
-      refs: null,
-    }),
-    PlayerContainerContextProvider: ({ children }) => children,
+    PlayerContainerContext,
+    // Mirrors just enough of the real provider for these tests: renders an
+    // actual `PlayerContainerContext.Provider` so the real
+    // `PlayerContainerContext.Consumer` inside PlayerContainer.tsx sees the
+    // container fields a real provider would give it, instead of a bare
+    // `({ children }) => children` passthrough.
+    PlayerContainerContextProvider: ({ children }: any) =>
+      ReactActual.createElement(
+        PlayerContainerContext.Provider,
+        {
+          value: {
+            isLanguageOverlayVisible: false,
+            bottomFocusableId: "bottom",
+            showComponentsContainer: false,
+            refs: null,
+          },
+        },
+        children
+      ),
   };
 });
 
@@ -201,7 +245,14 @@ const { __player: mockPlayer } = jest.requireMock(
   "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer"
 );
 
-const Player = React.forwardRef(() => null);
+const { isTV: mockIsTV } = jest.requireMock(
+  "@applicaster/zapp-react-native-utils/reactUtils"
+);
+
+// Renders children so that `renderApplePlayer`'s returned <ProgramInfo>
+// element (passed as this component's `children` prop) actually mounts —
+// otherwise React never invokes the ProgramInfo function component at all.
+const Player = React.forwardRef((props: any, _ref) => props.children ?? null);
 
 const item = {
   id: "entry-1",
@@ -235,6 +286,7 @@ const pressHardwareBack = () => {
 describe("PlayerContainer hardware back handling", () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockIsTV.mockReturnValue(false);
     mockBackHandlerRef.current = null;
     mockPlayer.getPluginConfiguration.mockReturnValue({});
     mockPlayer.isPaused.mockReturnValue(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.59",
+  "version": "16.0.0-rc.60",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.59",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.59",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.59",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.59",
+    "@applicaster/applicaster-types": "16.0.0-rc.60",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.60",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.60",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.60",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",