@applicaster/zapp-react-native-ui-components 16.0.0-alpha.1803625751 → 16.0.0-alpha.1816065263

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/CellRendererResolver/index.ts

@@ -92,7 +92,7 @@ export function CellRendererResolver({
     component,
     styles,
     cellStyles,
-    cellOptions,
+    cellOptions: { ...cellOptions, component },
     ...cellOptions, // fallback for existing plugins
   });
 }

package/Components/Layout/FullWidthRow.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row" },
+  basis: {
+    maxWidth: "100%",
+    flexBasis: "100%",
+  },
+});
+
+type Props = {
+  children: React.ReactNode;
+};
+
+/**
+ * Constrains its child to exactly the available parent width.
+ *
+ * UI components such as Hero and List render their items inside a parent
+ * `ScrollView` (e.g. when wrapped by tabs). A child placed directly in a
+ * scroll container can size itself to its own content rather than to the
+ * viewport, which causes items to be measured at a stale width and resize
+ * unexpectedly after layout changes such as device rotation.
+ *
+ * Wrapping the content in a `flexDirection: "row"` parent with a
+ * `flexBasis: "100%"` / `maxWidth: "100%"` child forces the child to
+ * re-derive its width from the parent on every layout pass instead of
+ * caching a measured pixel width, keeping it full-width and stable.
+ *
+ * @param children - The content to render at full parent width.
+ */
+export function FullWidthRow({ children }: Props) {
+  return (
+    <View style={styles.row}>
+      <View style={styles.basis}>{children}</View>
+    </View>
+  );
+}