@applicaster/zapp-react-native-ui-components 16.0.0-alpha.3683430391 → 16.0.0-alpha.4004661200

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

@@ -1,6 +1,7 @@
-import React, { useState, useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { Switch } from "react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useCellClick } from "@applicaster/zapp-react-native-utils/reactHooks/cell-click";
 
 type Props = {
   item: ZappEntry | ZappFeed;
@@ -15,36 +16,57 @@ type Props = {
 export const Toggle = (props: Props) => {
   const { style, item, action, cellState } = props;
 
-  const {
-    trackColor,
-    trackColorActive,
-    thumbColor,
-    thumbColorActive,
-    iosBackgroundColor,
-  } = style;
+  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]
   );
 
   const actionContext = useActions(action?.identifier);
+  const onCellClick = useCellClick({ item: item as ZappEntry });
 
-  const [actionState, setActionState] = useState(
-    actionContext.initialEntryState(item)
+  // A form toggle has no action plugin behind the switch: it reflects the cell
+  // selection state and writes through the entry's tap actions, the same path a
+  // tap on the row takes.
+  //
+  // 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
+  );
+
+  const [actionState, setActionState] = useState(() =>
+    hasActionPlugin ? actionContext?.initialEntryState?.(item) : undefined
   );
 
   const onPress = useCallback(() => {
-    actionContext.invokeAction(item, {
+    if (!hasActionPlugin) {
+      onCellClick();
+
+      return;
+    }
+
+    actionContext?.invokeAction?.(item, {
       updateState: setActionState,
     });
-  }, [actionState, actionContext?.state]);
+  }, [hasActionPlugin, onCellClick, actionState, actionContext?.state]);
 
   return (
     <Switch
       trackColor={{ false: trackColor, true: trackColorActive }}
       thumbColor={isSelected ? thumbColorActive : thumbColor}
-      ios_backgroundColor={iosBackgroundColor}
       onValueChange={onPress}
       value={isSelected}
     />

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

@@ -0,0 +1,167 @@
+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";
+
+const mockOnCellClick = jest.fn();
+const mockInvokeAction = jest.fn();
+const mockInitialEntryState = jest.fn().mockReturnValue({ state: 0 });
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/cell-click", () => ({
+  useCellClick: jest.fn(() => mockOnCellClick),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(() => ({
+    invokeAction: mockInvokeAction,
+    initialEntryState: mockInitialEntryState,
+  })),
+}));
+
+const style = {
+  trackColor: "rgba(0,0,0,1)",
+  trackColorActive: "rgba(4,207,153,1)",
+  thumbColor: "rgba(255,255,255,1)",
+  thumbColorActive: "rgba(255,255,255,1)",
+} as any;
+
+const item = { id: "true", title: "I agree" } as any;
+
+const renderToggle = (identifier: string, cellState) =>
+  render(
+    <Toggle
+      item={item}
+      action={{ identifier }}
+      style={style}
+      cellState={cellState}
+    />
+  );
+
+describe("Toggle with an empty action identifier", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("is on when the cell is selected", () => {
+    const { getByRole } = renderToggle("", "selected");
+
+    expect(getByRole("switch").props.value).toBe(true);
+  });
+
+  it("is off when the cell is not selected", () => {
+    const { getByRole } = renderToggle("", "default");
+
+    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");
+
+    fireEvent(getByRole("switch"), "valueChange", true);
+
+    expect(mockOnCellClick).toHaveBeenCalledTimes(1);
+    expect(mockInvokeAction).not.toHaveBeenCalled();
+  });
+
+  it("does not read the action plugin state", () => {
+    renderToggle("", "default");
+
+    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", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("routes a change through the action plugin", () => {
+    const { getByRole } = renderToggle("firebase-push-topic-action", "default");
+
+    fireEvent(getByRole("switch"), "valueChange", true);
+
+    expect(mockInvokeAction).toHaveBeenCalledWith(
+      item,
+      expect.objectContaining({ updateState: expect.any(Function) })
+    );
+
+    expect(mockOnCellClick).not.toHaveBeenCalled();
+  });
+});
+
+describe("Toggle with an identifier whose action plugin is not installed", () => {
+  // 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();
+
+    (useActions as jest.Mock).mockReturnValue(undefined);
+  });
+
+  afterEach(() => {
+    (useActions as jest.Mock).mockReturnValue({
+      invokeAction: mockInvokeAction,
+      initialEntryState: mockInitialEntryState,
+    });
+  });
+
+  it("routes a change through the cell click path", () => {
+    const { getByRole } = renderToggle("firebase-push-topic-action", "default");
+
+    fireEvent(getByRole("switch"), "valueChange", true);
+
+    expect(mockOnCellClick).toHaveBeenCalledTimes(1);
+    expect(mockInvokeAction).not.toHaveBeenCalled();
+  });
+
+  it("still reflects the cell selection state", () => {
+    const { getByRole } = renderToggle(
+      "firebase-push-topic-action",
+      "selected"
+    );
+
+    expect(getByRole("switch").props.value).toBe(true);
+  });
+});

package/Components/ModalComponent/ActionsBottomSheet/ActionButton.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { useEntryActionState } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import {
+  isActionAvailableFor,
+  RegisteredAction,
+} from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+
+import { Button } from "../Button";
+
+export type ActionButtonProps = {
+  entry: ZappEntry;
+  item: RegisteredAction;
+  configuration: any;
+  width: number;
+};
+
+type Props = ActionButtonProps & {
+  onPress?: (item: any) => void;
+};
+
+/**
+ * Unified action button for the modal bottom sheet.
+ *
+ * Every item is a `RegisteredAction` resolved from the registry (entry actions,
+ * registry actions and legacy context-provider actions alike), so the button
+ * simply reads `item.action` and drives it through `useEntryActionState`
+ * (backed by the action's observable / `addListener`).
+ */
+export function ActionButton(props: Props) {
+  const { item, entry, onPress: onItemPress } = props;
+
+  const action = item?.action;
+
+  const { state, invokeAction } = useEntryActionState(action, entry);
+
+  const onPress = React.useCallback(
+    (_item) => {
+      invokeAction({
+        context: "toast",
+        dismiss: () => onItemPress?.(item),
+      });
+    },
+    [invokeAction, item, onItemPress]
+  );
+
+  if (!isActionAvailableFor(action, entry as ZappEntry)) return null;
+
+  return (
+    <Button {...props} item={state} onPress={onPress} label={state?.label} />
+  );
+}
+
+// Explicitly set display name for the component
+ActionButton.displayName = "ActionButton";

package/Components/ModalComponent/ActionsBottomSheet/boundActionButton.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { ActionButton, ActionButtonProps } from "./ActionButton";
+
+/**
+ * Binds an entry to the sheet's row button.
+ *
+ * `BottomSheetModalContent` renders `buttonComponent` per item and does not
+ * know about entries, so the entry is closed over here instead.
+ */
+export const boundActionButton = (entry: ZappEntry | ZappFeed) => {
+  const ActionButtonWithEntry = (props: ActionButtonProps) => (
+    <ActionButton {...props} entry={entry as ZappEntry} />
+  );
+
+  ActionButtonWithEntry.displayName = "ActionButtonWithEntry";
+
+  return ActionButtonWithEntry;
+};
+
+boundActionButton.displayName = "boundActionButton";

package/Components/ModalComponent/ActionsBottomSheet/index.ts

@@ -0,0 +1,9 @@
+export { ActionButton } from "./ActionButton";
+
+export type { ActionButtonProps } from "./ActionButton";
+
+export { boundActionButton } from "./boundActionButton";
+
+export { openActionsBottomSheet } from "./openActionsBottomSheet";
+
+export type { OpenActionsBottomSheetArgs } from "./openActionsBottomSheet";

package/Components/ModalComponent/ActionsBottomSheet/openActionsBottomSheet.ts

@@ -0,0 +1,58 @@
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { RegisteredAction } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+
+import { boundActionButton } from "./boundActionButton";
+
+const { log_warning } = createLogger({
+  subsystem: "ActionsBottomSheet",
+  category: "Presentation",
+});
+
+export type OpenActionsBottomSheetArgs = {
+  /** Entry the actions act on; bound into every row button. */
+  entry: ZappEntry | ZappFeed;
+  /** Already resolved and merged actions, in the order they should appear. */
+  actions: RegisteredAction[];
+  title?: string;
+  summary?: string;
+};
+
+/**
+ * Presents a list of resolved actions in the shared bottom sheet.
+ *
+ * This is the core entry point for "show these actions in a sheet": the
+ * open-modal-bottom-sheet plugin uses it for its configured list, and the
+ * player overflow uses it for the actions that did not fit on the overlay.
+ * Neither has to know about the other, and neither needs the plugin installed.
+ */
+export function openActionsBottomSheet({
+  entry,
+  actions,
+  title,
+  summary,
+}: OpenActionsBottomSheetArgs): void {
+  if (!actions?.length) {
+    // Every action resolved away - unavailable for this entry, or not
+    // invokable. An empty sheet looks broken, so say why and stay put.
+    log_warning(
+      "openActionsBottomSheet: nothing to present - not opening the sheet",
+      { entryId: (entry as ZappEntry)?.id }
+    );
+
+    return;
+  }
+
+  openBottomSheetModal({
+    modalBottomSheetContentProps: {
+      // TODO: should be optional - the button handles its own tap, but
+      //  BottomSheetModalContent still requires an onPress.
+      onPress: noop,
+      items: actions,
+      buttonComponent: boundActionButton(entry),
+      title,
+      summary,
+    },
+  });
+}

package/Components/ModalComponent/AudioPlayer/Components/Action.tsx

@@ -25,24 +25,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
   },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 16,
-    gap: 12,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    marginTop: 8,
-  },
 });
 
 // ---------------------------------------------------------------------------

package/Components/ModalComponent/AudioPlayer/Components/Button.tsx

@@ -32,24 +32,6 @@ const styles = StyleSheet.create({
   title: {
     textAlign: "center",
   },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 24,
-    gap: 12,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    marginTop: 8,
-  },
 });
 
 // ---------------------------------------------------------------------------
@@ -310,6 +292,9 @@ function ButtonLeadingIcon({
 // AudioPlayerButton — single building block driven by configuration + data
 // ---------------------------------------------------------------------------
 
+import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
+import { mergeButtonConfiguration } from "../utils/mergeStyles";
+
 export function AudioPlayerButton({
   configuration,
   data,
@@ -317,11 +302,19 @@ export function AudioPlayerButton({
   focused = false,
   onPress,
 }: AudioPlayerButtonProps) {
+  const modalBlocksStyle = useModalBlocksStyle();
+  const buttonBlock = modalBlocksStyle?.button;
+  const actionBlock = modalBlocksStyle?.action;
+
+  const effectiveConfig = React.useMemo(() => {
+    return mergeButtonConfiguration(configuration, buttonBlock, actionBlock);
+  }, [configuration, buttonBlock, actionBlock]);
+
   const {
-    background: backgroundConfiguration,
-    title: titleConfiguration,
+    background: effectiveBgConfig,
+    title: effectiveTitleConfig,
     icons: iconsConfiguration,
-  } = configuration;
+  } = effectiveConfig;
 
   const { title } = data;
   const isDisabled = disabled ?? data.disabled ?? false;
@@ -333,7 +326,7 @@ export function AudioPlayerButton({
     <ButtonContainer
       focused={focused}
       disabled={isDisabled}
-      configuration={backgroundConfiguration}
+      configuration={effectiveBgConfig}
       onPress={onPress}
     >
       <View style={styles.contentRow}>
@@ -343,14 +336,14 @@ export function AudioPlayerButton({
               actionType={leadingIcon.actionType}
               configuration={iconsConfiguration}
             />
-            <View style={{ width: backgroundConfiguration.horizontalGutter }} />
+            <View style={{ width: effectiveBgConfig.horizontalGutter }} />
           </>
         ) : null}
         <ButtonTitle
           title={title}
           focused={focused}
           disabled={isDisabled}
-          configuration={titleConfiguration}
+          configuration={effectiveTitleConfig}
         />
       </View>
     </ButtonContainer>