@applicaster/zapp-react-native-ui-components 16.0.0-alpha.3081324238 → 16.0.0-alpha.3202041045

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -96,6 +96,14 @@ export const ActionButton = React.memo(function ActionButtonComponent(
   }, [item?.id, setActionState, actionContext]);
 
   if (actionDisabled || !actionContext) return null;
+
+  if (
+    actionState?.visibleInCells &&
+    !actionState.visibleInCells.includes(cellUUID)
+  ) {
+    return null;
+  }
+
   const AssetComponent = actionState?.asset;
 
   // Default state is not yet ready
@@ -109,6 +117,11 @@ export const ActionButton = React.memo(function ActionButtonComponent(
       accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
       accessibilityHint={props?.accessibilityHint}
       accessibilityRole="button"
+      accessibilityState={
+        typeof actionState.checked === "boolean"
+          ? { checked: actionState.checked }
+          : undefined
+      }
       accessible={!!(props?.testID || props?.accessibilityLabel)}
       style={props?.style}
     >

package/Components/MasterCell/DefaultComponents/LiveImage/index.tsx

@@ -245,10 +245,19 @@ const LiveImageComponent = (props: LiveImageProps) => {
 
   const isCurrentlyFocused = useTrackCurrentAutoScrollingElement(componentId);
 
-  const { playerPluginId, screenConfig, preloadHooks } =
-    getPlayerConfig(player_screen_id, actionIdentifier) ?? {};
+  // New object identities here restart PlayerLiveImage's register effect,
+  // which throws away the in-flight player and runs preload hooks again.
+  const playerConfig = React.useMemo(
+    () => getPlayerConfig(player_screen_id, actionIdentifier),
+    [player_screen_id, actionIdentifier]
+  );
+
+  const { playerPluginId, screenConfig, preloadHooks } = playerConfig ?? {};
 
-  const playableEntry = playerPluginId ? getPlayableEntry(item) : null;
+  const playableEntry = React.useMemo(
+    () => (playerPluginId ? getPlayableEntry(item) : null),
+    [playerPluginId, item?.id]
+  );
 
   const playerPlugin = getPluginByIdentifier(playerPluginId);
 

package/Components/MasterCell/DefaultComponents/PressableView.tsx

@@ -11,6 +11,7 @@ type Props = {
   accessibilityHint?: string;
   onPress?: () => void;
   testOnly_pressed?: boolean;
+  checked?: boolean;
 };
 
 export function PressableView({
@@ -22,11 +23,13 @@ export function PressableView({
   pressedStyle,
   onPress,
   testOnly_pressed = false,
+  checked,
 }: Props) {
   return (
     <Pressable
       testOnly_pressed={testOnly_pressed}
       onPress={onPress}
+      accessibilityState={checked === undefined ? undefined : { checked }}
       testID={testID}
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}

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

@@ -0,0 +1,288 @@
+import React from "react";
+import { act, fireEvent, render } from "@testing-library/react-native";
+
+import { ActionButton } from "../ActionButton";
+import { ActionButton as MobileActionButton } from "../mobile/MobileActionButtons/ActionButton";
+import { Text } from "react-native";
+
+type EntryStateListener = (state: CellActionEntryState) => void;
+
+const PLUGIN_ASSETS = {
+  mute: ["plugin_mute_1", "plugin_mute_2"],
+  unmute: ["plugin_unmute_1", "plugin_unmute_2"],
+};
+
+// Fake of the mute_unmute_action context, following its entry state contract.
+type FakeState = {
+  available: boolean;
+  muted: boolean;
+  visibleInCells?: string[];
+};
+
+const createFakeContext = (initial: FakeState) => {
+  let current = initial;
+  const listeners = new Set<EntryStateListener>();
+
+  const toEntryState = ({
+    available,
+    muted,
+    visibleInCells,
+  }: FakeState): CellActionEntryState => ({
+    state: muted ? 1 : 0,
+    asset: available
+      ? muted
+        ? PLUGIN_ASSETS.unmute
+        : PLUGIN_ASSETS.mute
+      : undefined,
+    label: muted ? "Unmute" : "Mute",
+    mobileButtonAssets: muted ? PLUGIN_ASSETS.unmute : PLUGIN_ASSETS.mute,
+    visibleInCells,
+  });
+
+  const emit = (next: FakeState) => {
+    current = next;
+    listeners.forEach((listener) => listener(toEntryState(current)));
+  };
+
+  const context = {
+    initialEntryState: jest.fn(() => toEntryState(current)),
+    addListener: jest.fn((_id: string, listener: EntryStateListener) => {
+      listeners.add(listener);
+
+      return () => listeners.delete(listener);
+    }),
+    invokeAction: jest.fn((_item, options) => {
+      if (!current.available) return;
+
+      current = { ...current, muted: !current.muted };
+      options?.updateState?.(toEntryState(current));
+      listeners.forEach((listener) => listener(toEntryState(current)));
+    }),
+  };
+
+  return { context, emit, listeners };
+};
+
+let mockContext: ReturnType<typeof createFakeContext>["context"];
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(() => mockContext),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext",
+  () => ({ useUIComponentContext: jest.fn(() => undefined) })
+);
+
+jest.mock("../Image", () => {
+  const { Text: MockText } = require("react-native");
+
+  return {
+    __esModule: true,
+    default: ({ uri }) => <MockText testID="asset">{uri}</MockText>,
+  };
+});
+
+const item = { id: "entry-1" } as unknown as ZappEntry;
+
+it("keeps the standalone button visible and limits actions to the playing cell instance", () => {
+  const fake = createFakeContext({
+    available: true,
+    muted: true,
+    visibleInCells: [],
+  });
+
+  mockContext = fake.context;
+
+  const Label = ({
+    children,
+    testID,
+  }: {
+    children?: React.ReactNode;
+    testID?: string;
+    mobileActionRole?: string;
+  }) => <Text testID={testID}>{children}</Text>;
+
+  const { getByTestId, queryByTestId } = render(
+    <>
+      {["first", "second"].map((cellUUID) => (
+        <ActionButton
+          key={cellUUID}
+          item={item}
+          action={{ identifier: "mute_unmute_action" }}
+          cellUUID={cellUUID}
+          testID={`cell-${cellUUID}`}
+          style={{}}
+        />
+      ))}
+      <MobileActionButton
+        action={{ identifier: "mute_unmute_action" }}
+        entry={item}
+        testID="standalone"
+        style={{}}
+        focusedStyles={{}}
+      >
+        <Label mobileActionRole="label">Toggle sound</Label>
+      </MobileActionButton>
+    </>
+  );
+
+  expect(queryByTestId("cell-first")).toBeNull();
+  expect(queryByTestId("cell-second")).toBeNull();
+  expect(getByTestId("standalone")).toBeTruthy();
+  fireEvent.press(getByTestId("standalone"));
+  expect(fake.context.invokeAction).toHaveBeenCalledTimes(1);
+
+  act(() =>
+    fake.emit({ available: true, muted: false, visibleInCells: ["first"] })
+  );
+
+  expect(getByTestId("cell-first")).toBeTruthy();
+  expect(queryByTestId("cell-second")).toBeNull();
+
+  act(() =>
+    fake.emit({ available: true, muted: false, visibleInCells: ["second"] })
+  );
+
+  expect(queryByTestId("cell-first")).toBeNull();
+  expect(getByTestId("cell-second")).toBeTruthy();
+
+  act(() => fake.emit({ available: true, muted: false, visibleInCells: [] }));
+
+  expect(queryByTestId("cell-first")).toBeNull();
+  expect(queryByTestId("cell-second")).toBeNull();
+  expect(getByTestId("standalone")).toBeTruthy();
+});
+
+const renderButton = (
+  flavour: "flavour_1" | "flavour_2",
+  asset?: React.ComponentProps<typeof ActionButton>["asset"]
+) =>
+  render(
+    <ActionButton
+      item={item}
+      flavour={flavour}
+      action={{ identifier: "mute_unmute_action" }}
+      asset={asset}
+      style={{}}
+      testID="mute-button"
+    />
+  );
+
+const cellAsset = {
+  props: {},
+  src: { active: "cell_selected", inactive: "cell_unselected" },
+  style: {},
+  type: "Image",
+} as const;
+
+describe.each([
+  ["flavour_1", 0],
+  ["flavour_2", 1],
+] as const)("mute_unmute_action cell action (%s)", (flavour, index) => {
+  let fake: ReturnType<typeof createFakeContext>;
+
+  const setup = (state: { available: boolean; muted: boolean }, asset?) => {
+    fake = createFakeContext(state);
+    mockContext = fake.context;
+
+    return renderButton(flavour, asset);
+  };
+
+  it("renders nothing while the preview has not started", () => {
+    const { queryByTestId } = setup({ available: false, muted: false });
+
+    expect(queryByTestId("mute-button")).toBeNull();
+    expect(queryByTestId("asset")).toBeNull();
+  });
+
+  it("shows the Mute icon while the preview plays with sound on", () => {
+    const { getByTestId } = setup({ available: true, muted: false });
+
+    expect(getByTestId("asset").props.children).toBe(PLUGIN_ASSETS.mute[index]);
+  });
+
+  it("shows the Unmute icon while the preview plays muted", () => {
+    const { getByTestId } = setup({ available: true, muted: true });
+
+    expect(getByTestId("asset").props.children).toBe(
+      PLUGIN_ASSETS.unmute[index]
+    );
+  });
+
+  it("toggles the sound and updates the icon on tap", () => {
+    const { getByTestId } = setup({ available: true, muted: false });
+
+    fireEvent.press(getByTestId("mute-button"));
+
+    expect(fake.context.invokeAction).toHaveBeenCalledTimes(1);
+
+    expect(getByTestId("asset").props.children).toBe(
+      PLUGIN_ASSETS.unmute[index]
+    );
+
+    fireEvent.press(getByTestId("mute-button"));
+
+    expect(getByTestId("asset").props.children).toBe(PLUGIN_ASSETS.mute[index]);
+  });
+
+  it("follows state emitted through addListener", () => {
+    const { getByTestId, queryByTestId } = setup({
+      available: false,
+      muted: false,
+    });
+
+    act(() => fake.emit({ available: true, muted: false }));
+
+    expect(getByTestId("asset").props.children).toBe(PLUGIN_ASSETS.mute[index]);
+
+    act(() => fake.emit({ available: true, muted: true }));
+
+    expect(getByTestId("asset").props.children).toBe(
+      PLUGIN_ASSETS.unmute[index]
+    );
+
+    expect(queryByTestId("mute-button")).not.toBeNull();
+  });
+
+  it("hides again when the preview stops or another cell starts", () => {
+    const { queryByTestId } = setup({ available: true, muted: false });
+
+    expect(queryByTestId("mute-button")).not.toBeNull();
+
+    act(() => fake.emit({ available: false, muted: false }));
+
+    expect(queryByTestId("mute-button")).toBeNull();
+  });
+
+  it("unsubscribes from the context on unmount", () => {
+    const { unmount } = setup({ available: true, muted: false });
+
+    expect(fake.listeners.size).toBe(1);
+
+    unmount();
+
+    expect(fake.listeners.size).toBe(0);
+  });
+
+  it("prefers the cell's selected icon when muted (state 1)", () => {
+    const { getByTestId } = setup({ available: true, muted: true }, cellAsset);
+
+    expect(getByTestId("asset").props.children).toBe("cell_selected");
+  });
+
+  it("prefers the cell's unselected icon when sound is on (state 0)", () => {
+    const { getByTestId } = setup({ available: true, muted: false }, cellAsset);
+
+    expect(getByTestId("asset").props.children).toBe("cell_unselected");
+  });
+
+  it("uses the plugin asset when the cell has no icons", () => {
+    const { getByTestId } = setup({ available: true, muted: false }, {
+      ...cellAsset,
+      src: { active: undefined, inactive: undefined },
+    } as any);
+
+    expect(getByTestId("asset").props.children).toBe(PLUGIN_ASSETS.mute[index]);
+  });
+});

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/ActionButton.tsx

@@ -166,9 +166,10 @@ export const ActionButton = ({
         <PressableView
           testOnly_pressed={props.testOnly_pressed}
           testID={props.testID || `${entry?.id}`}
-          style={style}
+          style={[style, props.alignment]}
           pressedStyle={focusedStyles}
           onPress={renderProps.onPress}
+          checked={renderProps.actionState?.checked}
           accessibilityLabel={props.accessibilityLabel || `${entry?.id}`}
           accessibilityHint={props.accessibilityHint}
         >

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/__tests__/PressableView.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Pressable, Text as RNText, View } from "react-native";
+import { Pressable, StyleSheet, Text as RNText, View } from "react-native";
 import { render, fireEvent } from "@testing-library/react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
@@ -282,7 +282,9 @@ describe("MobileActionButton", () => {
     expect(pressable.props.testID).toBe("mobile_action_button_1");
     expect(pressable.props.accessibilityLabel).toBe("entry-1");
 
-    expect(pressable.props.style({ pressed: false })[0]).toMatchObject({
+    expect(
+      StyleSheet.flatten(pressable.props.style({ pressed: false }))
+    ).toMatchObject({
       backgroundColor: "rgba(1,1,1,1)",
       borderColor: "rgba(2,2,2,1)",
       borderWidth: 1,

package/Components/MasterCell/__tests__/masterCell.test.js

@@ -76,6 +76,66 @@ describe("masterCellBuilder", () => {
     });
   });
 
+  describe("cellOptions.interactive", () => {
+    // renders a single View tagged with the state the cell was built with
+    const dataAdapter =
+      () =>
+      ({ state }) => [
+        { type: "View", style: {}, props: { testID: `state-${state}` } },
+      ];
+
+    // Only the root View gets this testID: cell elements pass their own testID, which overrides it
+    const ROOT_TEST_ID = "master-cell-root";
+
+    // forwardRef: MasterCell attaches a ref to its root View
+    const TestView = React.forwardRef((props, ref) => (
+      <View testID={ROOT_TEST_ID} {...props} ref={ref} />
+    ));
+
+    const renderCell = (cellOptions, state) => {
+      const MasterCell = masterCellBuilder({
+        cellConfiguration: singleView,
+        dataAdapter,
+        components: { View: TestView },
+        cellOptions,
+      });
+
+      return renderWithProviders(<MasterCell item={entry} state={state} />);
+    };
+
+    const getRoot = (wrapper) => wrapper.getByTestId(ROOT_TEST_ID);
+
+    it("keeps focused state and default root props when omitted", () => {
+      const wrapper = renderCell(undefined, "focused");
+      const root = getRoot(wrapper);
+
+      expect(wrapper.getByTestId("state-focused")).toBeDefined();
+      expect(root.props.onStartShouldSetResponder).toBeUndefined();
+      expect(root.props.collapsable).toBeUndefined();
+    });
+
+    it("claims body touches on a non-collapsable root when false", () => {
+      const wrapper = renderCell({ interactive: false }, "default");
+      const root = getRoot(wrapper);
+
+      expect(root.props.onStartShouldSetResponder()).toBe(true);
+      expect(root.props.collapsable).toBe(false);
+    });
+
+    it("renders focused as default when false", () => {
+      const wrapper = renderCell({ interactive: false }, "focused");
+
+      expect(wrapper.getByTestId("state-default")).toBeDefined();
+      expect(wrapper.queryByTestId("state-focused")).toBeNull();
+    });
+
+    it("renders focused_selected as selected when false", () => {
+      const wrapper = renderCell({ interactive: false }, "focused_selected");
+
+      expect(wrapper.getByTestId("state-selected")).toBeDefined();
+    });
+  });
+
   describe.skip("when using custom default components", () => {
     // the collapsable prop is added here to easily check from the snapshot that the mock
     // component is being used instead of the default one

package/Components/MasterCell/index.tsx

@@ -10,7 +10,11 @@ import { useScreenState } from "@applicaster/zapp-react-native-utils/screenState
 import { defaultComponents } from "./DefaultComponents";
 import { defaultDataAdapter } from "./dataAdapter";
 import { elementMapper, mapElementWithKey } from "./elementMapper";
-import { getEntryState, hasFocusableInsideBuilder } from "./utils";
+import {
+  getEntryState,
+  hasFocusableInsideBuilder,
+  withoutFocusedState,
+} from "./utils";
 
 type Props = {
   item: ZappEntry;
@@ -19,6 +23,16 @@ type Props = {
 
 const defaultContainerStyle = { flex: 1 };
 
+/**
+ * Root props of a non-interactive cell: the root view claims touches on the cell body,
+ * so the host list's touchable never fires (buttons, being deeper, still receive theirs).
+ * `collapsable: false` keeps Android / Fabric from flattening the view away.
+ */
+const nonInteractiveRootProps = {
+  onStartShouldSetResponder: () => true,
+  collapsable: false,
+};
+
 /**
  * Constructs a MasterCell with the provided options
  * @param {Object} options
@@ -27,6 +41,8 @@ const defaultContainerStyle = { flex: 1 };
  * @param {Function} options.dataAdapter optional dataAdapter to use instead of the default one.
  * See dataAdapter.js for more info
  * @param {containerStyles} options.containerStyle style to apply at the top level of the master cell
+ * @param {Object} options.cellOptions optional cell options. `interactive: false` makes the cell body
+ * ignore taps and render without focused / pressed states (inner buttons keep working). Defaults to `true`.
  * @returns {Function} Functional React Component to render the masterCell with the provided options
  */
 
@@ -39,6 +55,7 @@ type MasterCellBuilderOptions = {
     isRTL?: boolean;
     skipButtons?: boolean;
     component?: ZappComponent;
+    interactive?: boolean;
   };
 };
 
@@ -49,7 +66,7 @@ export function masterCellBuilder({
   containerStyle = defaultContainerStyle,
   cellOptions = {},
 }: MasterCellBuilderOptions) {
-  const { skipButtons = false, component } = cellOptions;
+  const { skipButtons = false, component, interactive = true } = cellOptions;
 
   const componentsMap = R.merge(defaultComponents, components);
   const { View } = componentsMap;
@@ -88,7 +105,10 @@ export function masterCellBuilder({
       () =>
         elementsBuilder({
           entry: item,
-          state: getEntryState(state, entryIsSelected),
+          state: getEntryState(
+            interactive ? state : withoutFocusedState(state),
+            entryIsSelected
+          ),
           allowDynamicColorsOutsideExtensions:
             theme?.allow_dynamic_colors_outside_extensions,
         }),
@@ -134,7 +154,11 @@ export function masterCellBuilder({
     );
 
     return (
-      <View style={containerStyle} ref={wrapperRef}>
+      <View
+        style={containerStyle}
+        ref={wrapperRef}
+        {...(interactive ? undefined : nonInteractiveRootProps)}
+      >
         {elements.map(remapElements)}
       </View>
     );

package/Components/MasterCell/utils/__tests__/withoutFocusedState.test.js

@@ -0,0 +1,20 @@
+import { withoutFocusedState } from "..";
+
+describe("withoutFocusedState", () => {
+  it("maps focused to default", () => {
+    expect(withoutFocusedState("focused")).toBe("default");
+  });
+
+  it("maps focused_selected to selected", () => {
+    expect(withoutFocusedState("focused_selected")).toBe("selected");
+  });
+
+  it("keeps default and selected states", () => {
+    expect(withoutFocusedState("default")).toBe("default");
+    expect(withoutFocusedState("selected")).toBe("selected");
+  });
+
+  it("keeps a missing state", () => {
+    expect(withoutFocusedState(undefined)).toBeUndefined();
+  });
+});

package/Components/MasterCell/utils/index.ts

@@ -386,3 +386,21 @@ export function getEntryState(state, selected) {
 
   return selected ? "selected" : "default";
 }
+
+/**
+ * Drops focused (pressed) variants of a cell state, so a non-interactive cell
+ * always renders its idle look. `selected` is kept – it is not touch feedback.
+ */
+export function withoutFocusedState(
+  state?: CellState | null
+): CellState | null | undefined {
+  if (state === "focused_selected") {
+    return "selected";
+  }
+
+  if (state === "focused") {
+    return "default";
+  }
+
+  return state;
+}

package/Components/ModalComponent/AudioPlayer/utils/__tests__/mergeStyles.test.ts

@@ -287,6 +287,46 @@ describe("mergeButtonConfiguration background", () => {
     expect(merged.title.androidLetterSpacing).toBe(-0.5);
     expect(merged.title.textTransform).toBe("uppercase");
   });
+
+  it("uses the family string inside a font-selector object and ignores {}", () => {
+    const fromObject = mergeButtonConfiguration(buttonBase as any, {
+      title: {
+        default: { fontFamily: { fontFamily: "GreycliffCF-Bold" } },
+      },
+    });
+
+    expect(fromObject.title.iosFontFamily).toBe("GreycliffCF-Bold");
+    expect(fromObject.title.androidFontFamily).toBe("GreycliffCF-Bold");
+
+    const fromEmpty = mergeButtonConfiguration(buttonBase as any, {
+      title: {
+        default: { fontFamily: {} },
+      },
+    });
+
+    expect(fromEmpty.title.iosFontFamily).toBe(buttonBase.title.iosFontFamily);
+
+    expect(fromEmpty.title.androidFontFamily).toBe(
+      buttonBase.title.androidFontFamily
+    );
+  });
+
+  it("maps inactive color, gutter, and focused and inactive font colors", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      background: {
+        default: { inactiveColor: "#999999", horizontalGutter: 6 },
+      },
+      title: {
+        default: { inactiveFontColor: "#111111" },
+        focused: { fontColor: "#222222" },
+      },
+    });
+
+    expect(merged.background.inactiveColor).toBe("#999999");
+    expect(merged.background.horizontalGutter).toBe(6);
+    expect(merged.title.inactiveFontColor).toBe("#111111");
+    expect(merged.title.focusedFontColor).toBe("#222222");
+  });
 });
 
 describe("mergeHeaderConfiguration section header (Variant 3)", () => {