@applicaster/zapp-react-native-ui-components 15.1.8 → 15.1.9-alpha.3547421944

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/MasterCell/DefaultComponents/Toggle.tsx

@@ -18,8 +18,11 @@ export const Toggle = (props: Props) => {
 
   const { trackColor, trackColorActive, thumbColor, thumbColorActive } = style;
 
+  // `focused_selected` is the selected state with a finger on the row, so the
+  // switch has to read as on for both. Leaving it out reads a pressed selected
+  // row as off, which flips the thumb for the duration of the press.
   const isSelected = React.useMemo(
-    () => cellState === "selected",
+    () => cellState === "selected" || cellState === "focused_selected",
     [item?.id, cellState]
   );
 
@@ -30,13 +33,16 @@ export const Toggle = (props: Props) => {
   // selection state and writes through the entry's tap actions, the same path a
   // tap on the row takes.
   //
-  // The identifier alone cannot tell that case apart from a real action plugin.
-  // The cell manifest declares an initial_value for `toggle_action_identifier`,
-  // and `castOrDefault` substitutes that default whenever the configured value
-  // is empty - and an empty string counts as empty. Clearing the field in the
-  // app configuration therefore cannot produce an empty identifier here. What
-  // does distinguish the two is whether the identifier resolves to an installed
-  // action plugin, so that is what the route is decided on.
+  // An empty identifier is the way to ask for that, which is why the cell
+  // manifest declares no initial_value for `toggle_action_identifier`:
+  // `castOrDefault` substitutes the default whenever the configured value is
+  // empty - and an empty string counts as empty - so any default there would be
+  // uncleanable and would force every toggle onto that plugin.
+  //
+  // The route is still decided on whether the identifier resolves to an
+  // installed action plugin rather than on the string being non-empty. App
+  // configurations saved while the old default was in the manifest still carry
+  // it, and a mistyped plugin id has to fall back the same way.
   const hasActionPlugin = Boolean(
     action?.identifier && actionContext?.invokeAction
   );

package/Components/MasterCell/DefaultComponents/__tests__/Toggle.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
+import { Switch } from "react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
 import { Toggle } from "../Toggle";
@@ -24,7 +25,6 @@ const style = {
   trackColorActive: "rgba(4,207,153,1)",
   thumbColor: "rgba(255,255,255,1)",
   thumbColorActive: "rgba(255,255,255,1)",
-  iosBackgroundColor: "rgba(0,0,0,1)",
 } as any;
 
 const item = { id: "true", title: "I agree" } as any;
@@ -56,6 +56,21 @@ describe("Toggle with an empty action identifier", () => {
     expect(getByRole("switch").props.value).toBe(false);
   });
 
+  // A finger on a selected row resolves the cell to focused_selected. Reading
+  // that as unselected flipped the thumb for the duration of the press and let
+  // it jump back on release, which reads as a second tap.
+  it("stays on while a selected cell is pressed", () => {
+    const { getByRole } = renderToggle("", "focused_selected");
+
+    expect(getByRole("switch").props.value).toBe(true);
+  });
+
+  it("is off while an unselected cell is pressed", () => {
+    const { getByRole } = renderToggle("", "focused");
+
+    expect(getByRole("switch").props.value).toBe(false);
+  });
+
   it("routes a change through the cell click path", () => {
     const { getByRole } = renderToggle("", "default");
 
@@ -70,6 +85,28 @@ describe("Toggle with an empty action identifier", () => {
 
     expect(mockInitialEntryState).not.toHaveBeenCalled();
   });
+
+  // Asserted on the Switch element rather than the rendered host component:
+  // what Toggle owns is the props it hands to Switch, and React Native rewrites
+  // them into platform-specific ones (tintColor, a style entry) underneath.
+  it("forwards every configured color to the switch", () => {
+    const { UNSAFE_getByType } = renderToggle("", "default");
+
+    expect(UNSAFE_getByType(Switch).props).toMatchObject({
+      trackColor: { false: style.trackColor, true: style.trackColorActive },
+      thumbColor: style.thumbColor,
+    });
+  });
+
+  // ios_backgroundColor paints an opaque layer behind the track that the track
+  // color cannot cover, which on iOS reads as a halo around the switch. The
+  // switch is left on its platform default instead, so the prop must stay
+  // unset even if a style happens to carry a color for it.
+  it("does not set an iOS background color on the switch", () => {
+    const { UNSAFE_getByType } = renderToggle("", "default");
+
+    expect(UNSAFE_getByType(Switch).props.ios_backgroundColor).toBeUndefined();
+  });
 });
 
 describe("Toggle with an action plugin identifier", () => {
@@ -92,11 +129,11 @@ describe("Toggle with an action plugin identifier", () => {
 });
 
 describe("Toggle with an identifier whose action plugin is not installed", () => {
-  // The cell manifest declares initial_value "firebase-push-topic-action" for
-  // toggle_action_identifier, and castOrDefault replaces an empty configured
-  // value with that default. A form toggle therefore always arrives with a
-  // non-empty identifier it never asked for - the presence of a real action
-  // context, not the identifier string, is what decides the route.
+  // The cell manifest no longer defaults toggle_action_identifier, but app
+  // configurations saved while it did still carry "firebase-push-topic-action",
+  // and a mistyped id is always possible. A toggle can therefore still arrive
+  // with a non-empty identifier it never asked for - the presence of a real
+  // action context, not the identifier string, is what decides the route.
   beforeEach(() => {
     jest.clearAllMocks();
 

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -189,12 +189,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
+      ),
   };
 });
 
@@ -203,7 +247,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",
@@ -237,6 +288,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": "15.1.8",
+  "version": "15.1.9-alpha.3547421944",
   "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": "15.1.8",
-    "@applicaster/zapp-react-native-bridge": "15.1.8",
-    "@applicaster/zapp-react-native-redux": "15.1.8",
-    "@applicaster/zapp-react-native-utils": "15.1.8",
+    "@applicaster/applicaster-types": "15.1.9-alpha.3547421944",
+    "@applicaster/zapp-react-native-bridge": "15.1.9-alpha.3547421944",
+    "@applicaster/zapp-react-native-redux": "15.1.9-alpha.3547421944",
+    "@applicaster/zapp-react-native-utils": "15.1.9-alpha.3547421944",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",