@applicaster/zapp-react-native-ui-components 16.0.0-alpha.9235607812 → 16.0.0-alpha.9338540010

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/mobile/MobileActionButtons/ActionButton.tsx

@@ -166,7 +166,7 @@ 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}
           accessibilityLabel={props.accessibilityLabel || `${entry?.id}`}

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/SharedUI/CollapsibleTextContainer/__tests__/factory.test.ts

@@ -20,13 +20,13 @@ const getValue = (key: string) => {
 };
 
 describe("CollapsibleTextContainer view tree", () => {
-  it("stretches to the parent width so labels wrap using the cell width", () => {
+  it("aligns the label to the text alignment instead of stretching the cell", () => {
     const result = CollapsibleTextContainer({
       getValue,
       elements: [],
       additionalStyles: { backgroundColor: "transparent" },
     });
 
-    expect(result.style.alignSelf).toBe("stretch");
+    expect(result.style.alignSelf).toBe("flex-start");
   });
 });

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/index.ts

@@ -3,6 +3,7 @@ import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/he
 import {
   getColorFromData,
   getKeyForLabel,
+  mapSelfAlignment,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
@@ -22,7 +23,7 @@ export const CollapsibleTextContainer = ({
   return {
     type: "CollapsibleTextContainer", // Collapsible Text Container,
     style: {
-      alignSelf: "stretch",
+      alignSelf: mapSelfAlignment(getValue("text_alignment")),
       marginTop: toNumberWithDefaultZero(getValue("margin_top")),
       marginRight: toNumberWithDefaultZero(getValue("margin_right")),
       marginBottom: toNumberWithDefaultZero(getValue("margin_bottom")),

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/Components/Item.tsx

@@ -6,7 +6,7 @@
  * Green (configurable): background, image, nowPlayingAsset, nowPlayingLabel,
  *   textLabel1, textLabel2
  * White (hardcoded): container padding/gutters, nowPlaying container layout,
- *   button sizes/padding/assets
+ *   button sizes/padding. Play/pause icons use plugin assets when set.
  *
  * Variants (VARIANT_*) are preset configuration bundles — not passed as a field.
  */
@@ -94,6 +94,10 @@ export type ActionButtonAssetsConfiguration = {
   removeAsset?: string;
   /** Trailing drag handle on Edit Order / queue rows. */
   dragAsset?: string;
+  /** Shown on the Now Playing row while the track is paused. */
+  playAsset?: string;
+  /** Shown on the Now Playing row while the track is playing. */
+  pauseAsset?: string;
 };
 
 export type ItemConfiguration = {
@@ -504,6 +508,23 @@ function ItemButton({
   const renderIcon = () => {
     switch (action) {
       case "playPause": {
+        const playbackAsset = isSelected
+          ? actionButtonAssets?.pauseAsset
+          : actionButtonAssets?.playAsset;
+
+        if (playbackAsset) {
+          return (
+            <Image
+              source={{ uri: playbackAsset }}
+              style={{
+                width: layout.assetWidth,
+                height: layout.assetHeight,
+              }}
+              resizeMode="contain"
+            />
+          );
+        }
+
         const iconSize = layout.assetWidth;
         const iconRadius = iconSize / 2;
 

package/Components/ModalComponent/AudioPlayer/Components/__tests__/Item.test.tsx

@@ -1,8 +1,10 @@
 import React from "react";
-import { Pressable } from "react-native";
+import { Image, Pressable } from "react-native";
 import { fireEvent, render, screen } from "@testing-library/react-native";
+import { ModalBlocksStyleContext } from "../../../ModalBlocksStyleContext";
 import {
   AudioPlayerTrackItem,
+  VARIANT_NOW_PLAYING,
   VARIANT_PLAYLIST_ITEM,
   mapMenuItemToNowPlayingData,
 } from "../Item";
@@ -101,6 +103,55 @@ describe("mapMenuItemToNowPlayingData", () => {
     expect(data.textLabel2).toBe("Artist Name");
   });
 
+  it("uses the plugin play asset while paused and the pause asset while playing", () => {
+    const menuItem = {
+      id: "item_1",
+      title: "Track Title",
+      summary: "Artist Name",
+    };
+
+    const style = {
+      nowPlayingItem: {
+        actionButtons: {
+          default: {
+            playAsset: "https://example.com/play.png",
+            pauseAsset: "https://example.com/pause.png",
+          },
+        },
+      },
+    };
+
+    const { UNSAFE_getAllByType, rerender } = render(
+      <ModalBlocksStyleContext.Provider value={style}>
+        <AudioPlayerTrackItem
+          configuration={VARIANT_NOW_PLAYING}
+          data={mapMenuItemToNowPlayingData(menuItem as any, true)}
+        />
+      </ModalBlocksStyleContext.Provider>
+    );
+
+    expect(
+      UNSAFE_getAllByType(Image).some(
+        (node) => node.props.source?.uri === "https://example.com/play.png"
+      )
+    ).toBe(true);
+
+    rerender(
+      <ModalBlocksStyleContext.Provider value={style}>
+        <AudioPlayerTrackItem
+          configuration={VARIANT_NOW_PLAYING}
+          data={mapMenuItemToNowPlayingData(menuItem as any, false)}
+        />
+      </ModalBlocksStyleContext.Provider>
+    );
+
+    expect(
+      UNSAFE_getAllByType(Image).some(
+        (node) => node.props.source?.uri === "https://example.com/pause.png"
+      )
+    ).toBe(true);
+  });
+
   it("uses custom nowPlayingLabel when provided", () => {
     const data = mapMenuItemToNowPlayingData(
       item as any,

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

@@ -131,6 +131,43 @@ describe("mergeItemConfiguration background", () => {
       "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH"
     );
   });
+
+  it("applies a text label font family and ignores a non-string font family", () => {
+    const withFont = mergeItemConfiguration(base as any, {
+      textLabel1: { default: { fontFamily: "Roboto-Bold" } },
+    });
+
+    expect(withFont.textLabel1.iosFontFamily).toBe("Roboto-Bold");
+    expect(withFont.textLabel1.androidFontFamily).toBe("Roboto-Bold");
+
+    const withEmpty = mergeItemConfiguration(base as any, {
+      textLabel1: {
+        default: { fontFamily: {}, iosFontFamily: "SFProText-Semibold" },
+      },
+    });
+
+    expect(withEmpty.textLabel1.iosFontFamily).toBe("SFProText-Semibold");
+    expect(withEmpty.textLabel1.androidFontFamily).toBeUndefined();
+  });
+
+  it("applies play and pause assets onto actionButtonAssets", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      actionButtons: {
+        default: {
+          playAsset: "https://example.com/play.png",
+          pauseAsset: "https://example.com/pause.png",
+        },
+      },
+    });
+
+    expect(merged.actionButtonAssets?.playAsset).toBe(
+      "https://example.com/play.png"
+    );
+
+    expect(merged.actionButtonAssets?.pauseAsset).toBe(
+      "https://example.com/pause.png"
+    );
+  });
 });
 
 describe("mergeButtonConfiguration background", () => {
@@ -250,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)", () => {

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

@@ -82,7 +82,7 @@ function mergeItemLabel(
     ...(override.lineHeight !== undefined
       ? { lineHeight: override.lineHeight }
       : {}),
-    ...(override.fontFamily
+    ...(typeof override.fontFamily === "string" && override.fontFamily
       ? {
           iosFontFamily: override.fontFamily,
           androidFontFamily: override.fontFamily,
@@ -147,6 +147,8 @@ function mergeItemActionButtonAssets(
     ...base,
     ...(override.removeAsset ? { removeAsset: override.removeAsset } : {}),
     ...(override.dragAsset ? { dragAsset: override.dragAsset } : {}),
+    ...(override.playAsset ? { playAsset: override.playAsset } : {}),
+    ...(override.pauseAsset ? { pauseAsset: override.pauseAsset } : {}),
   };
 }
 
@@ -379,6 +381,22 @@ export function mergeHeaderConfiguration(
 // Button Merging Helpers
 // ---------------------------------------------------------------------------
 
+function fontFamilyName(value: unknown): string | undefined {
+  if (typeof value === "string" && value.trim()) {
+    return value;
+  }
+
+  if (value && typeof value === "object") {
+    const family = (value as { fontFamily?: unknown }).fontFamily;
+
+    if (typeof family === "string" && family.trim()) {
+      return family;
+    }
+  }
+
+  return undefined;
+}
+
 function mergeButtonBackground(
   base: ButtonBackgroundConfiguration,
   defaultOverride?: Record<string, any>,
@@ -397,6 +415,9 @@ function mergeButtonBackground(
     ...(defaultOverride?.backgroundColor
       ? { defaultColor: defaultOverride.backgroundColor }
       : {}),
+    ...(defaultOverride?.inactiveColor
+      ? { inactiveColor: defaultOverride.inactiveColor }
+      : {}),
     ...(focusedColor != null && focusedColor !== "" ? { focusedColor } : {}),
     ...(defaultOverride?.borderRadius !== undefined
       ? { cornerRadius: defaultOverride.borderRadius }
@@ -413,47 +434,62 @@ function mergeButtonBackground(
     ...(defaultOverride?.paddingLeft !== undefined
       ? { paddingLeft: defaultOverride.paddingLeft }
       : {}),
+    ...(defaultOverride?.horizontalGutter !== undefined
+      ? { horizontalGutter: defaultOverride.horizontalGutter }
+      : {}),
   };
 }
 
 function mergeButtonTitle(
   base: ButtonTitleConfiguration,
-  override?: Record<string, any>
+  override?: Record<string, any>,
+  focusedOverride?: Record<string, any>
 ): ButtonTitleConfiguration {
-  if (!override) return base;
+  if (!override && !focusedOverride) return base;
+
+  const fontFamily = fontFamilyName(override?.fontFamily);
+
+  const focusedFontColor =
+    focusedOverride?.fontColor || override?.focusedFontColor;
+
+  const inactiveFontColor = override?.inactiveFontColor;
 
   return {
     ...base,
-    ...(override.fontColor ? { fontColor: override.fontColor } : {}),
-    ...(override.fontSize !== undefined ? { fontSize: override.fontSize } : {}),
-    ...(override.lineHeight !== undefined
+    ...(override?.fontColor ? { fontColor: override.fontColor } : {}),
+    ...(focusedFontColor ? { focusedFontColor } : {}),
+    ...(inactiveFontColor ? { inactiveFontColor } : {}),
+    ...(override?.fontSize !== undefined
+      ? { fontSize: override.fontSize }
+      : {}),
+    ...(override?.lineHeight !== undefined
       ? { lineHeight: override.lineHeight }
       : {}),
-    ...(override.fontFamily
+    ...(fontFamily
       ? {
-          iosFontFamily: override.fontFamily,
-          androidFontFamily: override.fontFamily,
+          iosFontFamily: fontFamily,
+          androidFontFamily: fontFamily,
         }
       : {}),
-    ...(override.iosFontFamily
+    ...(override?.iosFontFamily
       ? { iosFontFamily: override.iosFontFamily }
       : {}),
-    ...(override.androidFontFamily
+    ...(override?.androidFontFamily
       ? { androidFontFamily: override.androidFontFamily }
       : {}),
-    ...(override.letterSpacing !== undefined
+    ...(override?.letterSpacing !== undefined
       ? {
           iosLetterSpacing: override.letterSpacing,
           androidLetterSpacing: override.letterSpacing,
         }
       : {}),
-    ...(override.iosLetterSpacing !== undefined
+    ...(override?.iosLetterSpacing !== undefined
       ? { iosLetterSpacing: override.iosLetterSpacing }
       : {}),
-    ...(override.androidLetterSpacing !== undefined
+    ...(override?.androidLetterSpacing !== undefined
       ? { androidLetterSpacing: override.androidLetterSpacing }
       : {}),
-    ...(override.textTransform
+    ...(override?.textTransform
       ? { textTransform: override.textTransform }
       : {}),
   };
@@ -509,13 +545,19 @@ export function mergeButtonConfiguration(
   const titleOverride =
     buttonBlock?.title?.default || actionBlock?.title?.default;
 
+  const titleFocused =
+    buttonBlock?.title?.focused ||
+    buttonBlock?.title?.focus ||
+    actionBlock?.title?.focused ||
+    actionBlock?.title?.focus;
+
   const iconsOverride = buttonBlock?.icons || actionBlock?.icons;
   const leadingOverride = buttonBlock?.leadingIcon || actionBlock?.leadingIcon;
 
   return {
     ...base,
     background: mergeButtonBackground(base.background, bgDefault, bgFocused),
-    title: mergeButtonTitle(base.title, titleOverride),
+    title: mergeButtonTitle(base.title, titleOverride, titleFocused),
     icons: mergeButtonIcons(base.icons, iconsOverride, leadingOverride),
   };
 }