@applicaster/zapp-react-native-ui-components 15.1.22-rc.0 → 15.1.22

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

@@ -17,6 +17,9 @@ import {
   Text,
   View,
 } from "react-native";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+
+const logger = createLogger({ category: "ModalComponent:AudioPlayerButton" });
 
 const styles = StyleSheet.create({
   container: {
@@ -130,6 +133,28 @@ export const DEFAULT_ICONS_CONFIGURATION: IconsConfiguration = {
   },
 };
 
+// ---------------------------------------------------------------------------
+// Variant configurations
+// ---------------------------------------------------------------------------
+
+export const VARIANT_TEXT_ONLY: ButtonConfiguration = {
+  background: DEFAULT_BACKGROUND_CONFIGURATION,
+  title: DEFAULT_TITLE_CONFIGURATION,
+  icons: DEFAULT_ICONS_CONFIGURATION,
+};
+
+export const VARIANT_WITH_ICON: ButtonConfiguration = {
+  background: DEFAULT_BACKGROUND_CONFIGURATION,
+  title: DEFAULT_TITLE_CONFIGURATION,
+  icons: {
+    ...DEFAULT_ICONS_CONFIGURATION,
+    leadingIcon: {
+      enabled: true,
+      actionType: "addToPlaylist",
+    },
+  },
+};
+
 // ---------------------------------------------------------------------------
 // Data (runtime / localization — not styling config)
 // ---------------------------------------------------------------------------
@@ -140,30 +165,15 @@ export type ButtonData = {
 };
 
 export type AudioPlayerButtonProps = {
-  configuration: ButtonConfiguration;
-  data: ButtonData;
+  configuration?: ButtonConfiguration;
+  data?: ButtonData;
   disabled?: boolean;
   focused?: boolean;
   onPress?: () => void;
 };
 
-// ---------------------------------------------------------------------------
-// Hardcoded spec values (black fields)
-// ---------------------------------------------------------------------------
-
-// Hardcoded: action type → icon asset mapping (base64 PNG)
-const ACTION_ICON_ASSETS: Record<ButtonActionType, string> = {
-  addToQueue:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKUlEQVR42mNgGAVDCfxHw6MWjFpAvEGk4lELKLdgNJmOWkA7C0YBbQAAwiZvkR9eFgQAAAAASUVORK5CYII=",
-  addToPlaylist:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAJklEQVR42mNgGAUjFvzHgmluATF4cFswGsmjkTwayaORPAqGLwAA6Jpxj9Ms9QMAAAAASUVORK5CYII=",
-  goToPlaylist:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAALklEQVR42mNgGAWjYNiD/7Q2/D8tLflPiSX/ycQ0t+D/yLGAEkeMWjAKRgG9AQB4zlSshwSzWwAAAABJRU5ErkJggg==",
-  confirm:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAJElEQVR42mNgGAWjYBSQCv4TwKMWDHELho/hNE/3o2AUDDcAAPv0QMAyy1CtAAAAAElFTkSuQmCC",
-  cancel:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAASElEQVR42mNgGAWjGvynkVoUTf+pqA6nxv8UqiHbEooNx2cQ1QzHZiDVDcdlCcOQsoCmQUTTSKZpMqV5RqNLUUHTwm4UDBMAALBLQ73LTvoyAAAAAElFTkSuQmCC",
-};
+const PLACEHOLDER_RED_BOX =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAJ0lEQVR4nO3NMQEAAAjDsIF/z2ACvlRAU5NMHuvPOQAAAAAAAMBdC/07Ai5sNw+CAAAAAElFTkSuQmCC";
 
 function getTextTransformStyle(
   textTransform: TextTransform
@@ -276,13 +286,19 @@ type ButtonLeadingIconProps = {
   configuration: IconsConfiguration;
 };
 
-function ButtonLeadingIcon({
-  actionType,
-  configuration,
-}: ButtonLeadingIconProps) {
-  const asset =
-    configuration.leadingIcon.asset ||
-    (actionType ? ACTION_ICON_ASSETS[actionType] : undefined);
+function ButtonLeadingIcon({ configuration }: ButtonLeadingIconProps) {
+  const asset = configuration.leadingIcon.asset || PLACEHOLDER_RED_BOX;
+
+  React.useEffect(() => {
+    if (!configuration.leadingIcon.asset) {
+      logger.log_warning(
+        "AudioPlayerButton has leadingIcon enabled but no asset was provided. Falling back to placeholder red box. Ensure the relevant plugin (e.g. playlist-experience) provides leadingIcon.asset in styleOverrides.",
+        {
+          leadingIcon: configuration.leadingIcon,
+        }
+      );
+    }
+  }, [configuration.leadingIcon.asset]);
 
   if (!asset) {
     return null;
@@ -308,13 +324,14 @@ import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
 import { mergeButtonConfiguration } from "../utils/mergeStyles";
 
 export function AudioPlayerButton({
-  configuration,
-  data,
+  configuration = VARIANT_WITH_ICON,
+  data = { title: undefined },
   disabled,
   focused = false,
   onPress,
 }: AudioPlayerButtonProps) {
   const modalBlocksStyle = useModalBlocksStyle();
+
   const buttonBlock = modalBlocksStyle?.button;
   const actionBlock = modalBlocksStyle?.action;
 
@@ -328,9 +345,22 @@ export function AudioPlayerButton({
     icons: iconsConfiguration,
   } = effectiveConfig;
 
-  const { title } = data;
+  const title = data.title;
+
   const isDisabled = disabled ?? data.disabled ?? false;
 
+  React.useEffect(() => {
+    if (!title) {
+      logger.log_warning(
+        "AudioPlayerButton rendering with empty title. Ensure data.title is set.",
+        {
+          leadingIcon: iconsConfiguration.leadingIcon,
+          modalBlocksStyle: modalBlocksStyle,
+        }
+      );
+    }
+  }, [title]);
+
   const { leadingIcon } = iconsConfiguration;
   const showIcon = shouldShowLeadingIcon(leadingIcon);
 
@@ -361,25 +391,3 @@ export function AudioPlayerButton({
     </ButtonContainer>
   );
 }
-
-// ---------------------------------------------------------------------------
-// Variant configurations
-// ---------------------------------------------------------------------------
-
-export const VARIANT_TEXT_ONLY: ButtonConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: DEFAULT_TITLE_CONFIGURATION,
-  icons: DEFAULT_ICONS_CONFIGURATION,
-};
-
-export const VARIANT_WITH_ICON: ButtonConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: DEFAULT_TITLE_CONFIGURATION,
-  icons: {
-    ...DEFAULT_ICONS_CONFIGURATION,
-    leadingIcon: {
-      enabled: true,
-      actionType: "addToPlaylist",
-    },
-  },
-};

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -22,6 +22,7 @@ import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import {
   ContentViewModel,
   OPERATIONS,
+  type OperationButtons,
   hasOperation,
   useBottomSheetContent,
 } from "@applicaster/zapp-react-native-utils/modalState";
@@ -33,7 +34,6 @@ import { SortableList } from "./SortableList";
 import {
   AudioPlayerButton,
   NowPlayingHeaderSection,
-  VARIANT_WITH_ICON,
 } from "./AudioPlayer/Components";
 import { BottomSheetDragArea } from "./BottomSheetDragArea";
 import { ModalBlocksStyleContext } from "./ModalBlocksStyleContext";
@@ -43,6 +43,7 @@ import {
   parseModalBlocksConfiguration,
 } from "@applicaster/zapp-react-native-utils/configurationUtils/modalBlocksParser";
 import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
+import { VARIANT_TEXT_ONLY } from "./AudioPlayer/Components/Button";
 
 const styles = StyleSheet.create({
   centered: {
@@ -96,6 +97,8 @@ type ModalComponentProps = {
   measurementPhase?: boolean;
   /** Copy under Next Up when the queue has no upcoming items. */
   emptyMessage?: string;
+  /** Producer-owned title/iconURL for sheet-synthesized operation controls. */
+  operationButtons?: OperationButtons;
 };
 
 function _BottomSheetModalContent(props: ModalComponentProps) {
@@ -120,6 +123,7 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     themePluginId: themePluginIdProp,
     measurementPhase = false,
     emptyMessage,
+    operationButtons,
   } = props;
 
   const route = useRef(currentRoute);
@@ -174,13 +178,32 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
 
   const normalizedPluginId = themePluginId?.replace(/-/g, "_");
 
+  const addLabel = operationButtons?.add?.title || "Create New";
+  const addIcon = operationButtons?.add?.iconURL;
+
+  const addButtonConfiguration = useMemo(() => {
+    const leadingIcon =
+      styleOverrides?.button?.leadingIcon ||
+      styleOverrides?.action?.leadingIcon;
+
+    const configuredIcon = leadingIcon?.default?.asset;
+
+    return {
+      ...VARIANT_TEXT_ONLY,
+      icons: {
+        ...VARIANT_TEXT_ONLY.icons,
+        leadingIcon: {
+          enabled: !!(addIcon || configuredIcon),
+          asset: addIcon,
+        },
+      },
+    };
+  }, [addIcon, styleOverrides]);
+
   const localizedHeaderTitle = normalizedPluginId
     ? pluginLocalizations?.[`${normalizedPluginId}_header_title`]
     : undefined;
 
-  const createPlaylistTitle =
-    pluginLocalizations?.create_new_playlist_title || "Create New Playlist";
-
   const nextUpTitle =
     pluginLocalizations?.next_up_title ||
     (normalizedPluginId
@@ -333,12 +356,9 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     editableCollection?.deleteCollection?.();
   }, [editableCollection]);
 
-  const handleCreatePlaylist = useCallback(() => {
-    editableCollection?.add?.({
-      id: "create_new_playlist",
-      title: createPlaylistTitle,
-    });
-  }, [editableCollection, createPlaylistTitle]);
+  const handleAdd = useCallback(() => {
+    editableCollection?.add?.();
+  }, [editableCollection]);
 
   const headers = useMemo(() => {
     const list: Array<{ index: number; component: () => React.ReactElement }> =
@@ -368,9 +388,9 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
             style={{ paddingHorizontal: 20, paddingTop: 8, paddingBottom: 12 }}
           >
             <AudioPlayerButton
-              configuration={VARIANT_WITH_ICON}
-              data={{ title: createPlaylistTitle }}
-              onPress={handleCreatePlaylist}
+              configuration={addButtonConfiguration}
+              data={{ title: addLabel }}
+              onPress={handleAdd}
             />
           </View>
         ),
@@ -388,8 +408,9 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     emptyMessage,
     clearLabel,
     hasAdd,
-    handleCreatePlaylist,
-    createPlaylistTitle,
+    addLabel,
+    addButtonConfiguration,
+    handleAdd,
   ]);
 
   const _items = useMemo(() => {
@@ -505,9 +526,9 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
         {hasAdd ? (
           <View style={styles.someStyles}>
             <AudioPlayerButton
-              configuration={VARIANT_WITH_ICON}
-              data={{ title: createPlaylistTitle }}
-              onPress={handleCreatePlaylist}
+              configuration={addButtonConfiguration}
+              data={{ title: addLabel }}
+              onPress={handleAdd}
             />
           </View>
         ) : null}

package/Components/ModalComponent/__tests__/BottomSheetModalContent.test.tsx

@@ -1,7 +1,17 @@
 import React from "react";
 import { render, screen } from "@testing-library/react-native";
 import { BottomSheetModalContent } from "../BottomSheetModalContent";
-import { ContentViewModel } from "@applicaster/zapp-react-native-utils/modalState";
+import {
+  ContentViewModel,
+  OPERATIONS,
+} from "@applicaster/zapp-react-native-utils/modalState";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { Image, StyleSheet } from "react-native";
+import {
+  AudioPlayerButton,
+  VARIANT_TEXT_ONLY,
+} from "../AudioPlayer/Components/Button";
+import { ModalBlocksStyleContext } from "../ModalBlocksStyleContext";
 
 jest.mock("react-native-sortables", () => {
   const { View } = require("react-native");
@@ -45,11 +55,11 @@ jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
 }));
 
 jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
-  usePlugins: () => [],
+  usePlugins: jest.fn(() => []),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
-  useLocalizedStrings: () => ({}),
+  useLocalizedStrings: ({ localizations }: any) => localizations || {},
 }));
 
 jest.mock("react-native-safe-area-context", () => ({
@@ -92,17 +102,14 @@ jest.mock("../AudioPlayer/Components", () => ({
     return null;
   },
   AudioPlayerButton: (props: any) => {
-    const { Text } = require("react-native");
+    const { AudioPlayerButton } = jest.requireActual(
+      "../AudioPlayer/Components/Button"
+    );
 
     mockAudioPlayerButtonProps.push(props);
 
-    return (
-      <Text testID="create-playlist-button" onPress={props.onPress}>
-        {props.data?.title}
-      </Text>
-    );
+    return <AudioPlayerButton {...props} />;
   },
-  VARIANT_WITH_ICON: {},
 }));
 
 const baseProps = {
@@ -116,6 +123,10 @@ const baseProps = {
 };
 
 describe("BottomSheetModalContent role/behavior cells", () => {
+  beforeEach(() => {
+    jest.mocked(usePlugins).mockReturnValue([]);
+  });
+
   it("renders standard Button rows and default header when no viewModel/role", () => {
     render(<BottomSheetModalContent {...baseProps} />);
 
@@ -180,6 +191,8 @@ describe("BottomSheetModalContent role/behavior cells", () => {
   });
 
   it("renders create playlist button when operations include add and calls editableCollection.add on press", () => {
+    mockAudioPlayerButtonProps.length = 0;
+
     const addMock = jest.fn();
     const { BehaviorSubject } = require("rxjs");
 
@@ -198,16 +211,234 @@ describe("BottomSheetModalContent role/behavior cells", () => {
 
     render(<BottomSheetModalContent {...baseProps} viewModel={viewModel} />);
 
-    const createBtn = screen.getByTestId("create-playlist-button");
+    const createBtn = screen.getByText("Create New");
     expect(createBtn).toBeTruthy();
 
+    expect(mockAudioPlayerButtonProps.length).toBeGreaterThan(0);
+
+    for (const props of mockAudioPlayerButtonProps) {
+      expect(props.configuration.icons.leadingIcon.enabled).toBe(false);
+      expect(props.data).toEqual({ title: "Create New" });
+      expect(typeof props.onPress).toBe("function");
+    }
+
     const { fireEvent } = require("@testing-library/react-native");
     fireEvent.press(createBtn);
 
-    expect(addMock).toHaveBeenCalledWith({
-      id: "create_new_playlist",
-      title: "Create New Playlist",
+    expect(addMock).toHaveBeenCalledWith();
+  });
+
+  it.each([["add"], ["add", "reorder"]])(
+    "renders operationButtons.add.title with plugin typography and icon for %j",
+    (...operations: string[]) => {
+      const { BehaviorSubject } = require("rxjs");
+
+      const configuration = {
+        "button.title.font_color": "#123456",
+        "button.title.font_size": 19,
+        "button.title.line_height": 27,
+        "button.background.background_color": "#ff9900",
+        "button.leading_icon.asset": "https://example.com/create.png",
+        localizations: {
+          playlist_experience_button_create_new: "Plugin key label",
+        },
+      };
+
+      jest
+        .mocked(usePlugins)
+        .mockReturnValue([
+          { identifier: "playlist-experience", configuration },
+        ]);
+
+      const viewModel = new ContentViewModel({
+        title: "Playlists",
+        items: [],
+        role: "collection_selector",
+        themePluginId: "playlist-experience",
+        dynamicCollection: { operations },
+      });
+
+      viewModel.editableCollection = {
+        items$: new BehaviorSubject([]),
+        operations,
+        add: jest.fn(),
+        move: jest.fn(),
+      };
+
+      const styleOverrides = {
+        button: {
+          title: { default: "Wrong decorator label" },
+          leadingIcon: { default: { asset: "https://example.com/wrong.png" } },
+        },
+      };
+
+      render(
+        <BottomSheetModalContent
+          {...baseProps}
+          viewModel={viewModel}
+          styleOverrides={styleOverrides}
+          operationButtons={{ add: { title: "Neue Playlist" } }}
+        />
+      );
+
+      expect(
+        StyleSheet.flatten(screen.getByText("Neue Playlist").props.style)
+      ).toMatchObject({ color: "#123456", fontSize: 19, lineHeight: 27 });
+
+      expect(screen.UNSAFE_getByType(Image).props.source).toEqual({
+        uri: "https://example.com/create.png",
+      });
+
+      expect(screen.queryByText("Wrong decorator label")).toBeNull();
+      expect(screen.queryByText("Plugin key label")).toBeNull();
+      expect(styleOverrides.button.title.default).toBe("Wrong decorator label");
+      expect(configuration["button.title.font_size"]).toBe(19);
+    }
+  );
+
+  it("does not read the playlist-specific Add icon key", () => {
+    const { BehaviorSubject } = require("rxjs");
+
+    jest.mocked(usePlugins).mockReturnValue([
+      {
+        identifier: "playlist-experience",
+        configuration: {
+          "button.create_new_playlist_asset": "https://example.com/legacy.png",
+        },
+      },
+    ]);
+
+    const viewModel = new ContentViewModel({
+      title: "Playlists",
+      items: [],
+      role: "collection_selector",
+      themePluginId: "playlist-experience",
+      dynamicCollection: { operations: ["add"] },
     });
+
+    viewModel.editableCollection = {
+      items$: new BehaviorSubject([]),
+      operations: ["add"],
+      add: jest.fn(),
+    };
+
+    render(<BottomSheetModalContent {...baseProps} viewModel={viewModel} />);
+
+    expect(screen.UNSAFE_queryAllByType(Image)).toHaveLength(0);
+  });
+
+  it.each(
+    [false, true].flatMap((sortable) =>
+      [
+        { iconURL: undefined, themeIcon: undefined, expected: undefined },
+        {
+          iconURL: "file:///bundled-add.png",
+          themeIcon: undefined,
+          expected: "file:///bundled-add.png",
+        },
+        {
+          iconURL: "https://example.com/upload.png",
+          themeIcon: undefined,
+          expected: "https://example.com/upload.png",
+        },
+        {
+          iconURL: undefined,
+          themeIcon: "https://example.com/theme.png",
+          expected: "https://example.com/theme.png",
+        },
+        {
+          iconURL: "file:///bundled-add.png",
+          themeIcon: "https://example.com/theme.png",
+          expected: "https://example.com/theme.png",
+        },
+        {
+          iconURL: "file:///bundled-add.png",
+          themeIcon: "https://example.com/theme.png",
+          themeEnabled: false,
+          expected: undefined,
+        },
+      ].map((scenario) => ({ ...scenario, sortable }))
+    )
+  )(
+    "resolves Add icon presentation for %j",
+    ({ sortable, iconURL, themeIcon, themeEnabled, expected }) => {
+      const { BehaviorSubject } = require("rxjs");
+
+      const operations = sortable
+        ? [OPERATIONS.ADD, OPERATIONS.REORDER]
+        : [OPERATIONS.ADD];
+
+      jest.mocked(usePlugins).mockReturnValue([
+        {
+          identifier: "generic-theme",
+          configuration: themeIcon
+            ? {
+                "button.leading_icon.asset": themeIcon,
+                "button.leading_icon.enabled": themeEnabled,
+              }
+            : {},
+        },
+      ]);
+
+      const viewModel = new ContentViewModel({
+        title: "Collections",
+        items: [],
+        themePluginId: "generic-theme",
+        dynamicCollection: { operations },
+      });
+
+      viewModel.editableCollection = {
+        items$: new BehaviorSubject([]),
+        operations,
+        add: jest.fn(),
+        move: jest.fn(),
+      };
+
+      render(
+        <BottomSheetModalContent
+          {...baseProps}
+          viewModel={viewModel}
+          operationButtons={{ add: { iconURL } }}
+        />
+      );
+
+      if (expected) {
+        expect(screen.UNSAFE_getByType(Image).props.source).toEqual({
+          uri: expected,
+        });
+      } else {
+        expect(screen.UNSAFE_queryAllByType(Image)).toHaveLength(0);
+      }
+    }
+  );
+
+  it("does not render a typography object as a button label", () => {
+    render(
+      <ModalBlocksStyleContext.Provider
+        value={{ button: { title: { default: { fontSize: 19 } } } }}
+      >
+        <AudioPlayerButton configuration={VARIANT_TEXT_ONLY} />
+      </ModalBlocksStyleContext.Provider>
+    );
+
+    expect(screen.toJSON()).toBeTruthy();
+  });
+
+  it("renders explicit button data separately from typography", () => {
+    render(
+      <ModalBlocksStyleContext.Provider
+        value={{ button: { title: { default: { fontSize: 19 } } } }}
+      >
+        <AudioPlayerButton
+          configuration={VARIANT_TEXT_ONLY}
+          data={{ title: "Create Playlist" }}
+        />
+      </ModalBlocksStyleContext.Provider>
+    );
+
+    expect(
+      StyleSheet.flatten(screen.getByText("Create Playlist").props.style)
+    ).toMatchObject({ fontSize: 19 });
   });
 
   it("shows the empty Next Up message only when now playing is on and the list is empty", () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.1.22-rc.0",
+  "version": "15.1.22",
   "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.22-rc.0",
-    "@applicaster/zapp-react-native-bridge": "15.1.22-rc.0",
-    "@applicaster/zapp-react-native-redux": "15.1.22-rc.0",
-    "@applicaster/zapp-react-native-utils": "15.1.22-rc.0",
+    "@applicaster/applicaster-types": "15.1.22",
+    "@applicaster/zapp-react-native-bridge": "15.1.22",
+    "@applicaster/zapp-react-native-redux": "15.1.22",
+    "@applicaster/zapp-react-native-utils": "15.1.22",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",