@applicaster/zapp-react-native-ui-components 15.1.13 → 15.1.15-alpha.4236143002

package/Components/ModalComponent/AudioPlayer/Components/NowPlayingHeaderSection.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import {
+  AudioPlayerTrackItem,
+  VARIANT_NOW_PLAYING,
+  mapMenuItemToNowPlayingData,
+} from "./Item";
+import { AudioPlayerHeader, VARIANT_SECTION_HEADER } from "./Header";
+import type { MenuItem } from "@applicaster/zapp-react-native-utils/modalState/types";
+import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
+import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
+
+const styles = StyleSheet.create({
+  divider: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    marginHorizontal: 20,
+    marginVertical: 8,
+  },
+});
+
+type NowPlayingHeaderSectionProps = {
+  onClear?: () => void;
+};
+
+export function NowPlayingHeaderSection({
+  onClear,
+}: NowPlayingHeaderSectionProps) {
+  const player = usePlayer();
+  const playerState = usePlayerState("queue-now-playing-section");
+
+  const renderNowPlayingTrack = () => {
+    if (!player?.entry) {
+      return null;
+    }
+
+    const mediaGroup = player.entry.media_group;
+
+    const imageGroup = Array.isArray(mediaGroup)
+      ? mediaGroup.find((g: any) => g.type === "image")
+      : null;
+
+    const firstImage = Array.isArray(imageGroup?.media_item)
+      ? imageGroup.media_item[0]?.src
+      : imageGroup?.media_item?.src;
+
+    const nowPlayingItem: MenuItem = {
+      id: String(player.entry.id ?? "now_playing"),
+      title: (player.entry.title as string) || String(player.entry.id),
+      summary: (player.entry.summary as string) ?? "",
+      icon: firstImage,
+    };
+
+    const data = mapMenuItemToNowPlayingData(
+      nowPlayingItem,
+      playerState?.isPaused
+    );
+
+    const handlePlayPause = () => {
+      if (playerState?.isPaused) {
+        player?.play();
+      } else {
+        player?.pause();
+      }
+    };
+
+    return (
+      <View>
+        <AudioPlayerTrackItem
+          configuration={VARIANT_NOW_PLAYING}
+          data={data}
+          onTrailingButtonPress={handlePlayPause}
+        />
+        <View style={styles.divider} />
+      </View>
+    );
+  };
+
+  return (
+    <View>
+      {renderNowPlayingTrack()}
+      <AudioPlayerHeader
+        configuration={VARIANT_SECTION_HEADER}
+        data={{ title: "Next Up" }}
+        onClear={onClear}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,66 @@
+import React from "react";
+import { Pressable } from "react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
+import { AudioPlayerTrackItem, VARIANT_PLAYLIST_ITEM } from "../Item";
+
+const playlistItemData = {
+  textLabel1: "Queue",
+  textLabel2: "",
+  trailingButton: "multiSelect" as const,
+  isSelected: false,
+};
+
+describe("AudioPlayerTrackItem multiSelect checkbox", () => {
+  it("invokes onPress when the checkbox is pressed even if onTrailingButtonPress is omitted", () => {
+    const onPress = jest.fn();
+
+    render(
+      <AudioPlayerTrackItem
+        configuration={VARIANT_PLAYLIST_ITEM}
+        data={playlistItemData}
+        onPress={onPress}
+      />
+    );
+
+    const pressables = screen.UNSAFE_getAllByType(Pressable);
+    fireEvent.press(pressables[pressables.length - 1]);
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it("invokes onTrailingButtonPress instead of onPress when a dedicated trailing handler is provided", () => {
+    const onPress = jest.fn();
+    const onTrailingButtonPress = jest.fn();
+
+    render(
+      <AudioPlayerTrackItem
+        configuration={VARIANT_PLAYLIST_ITEM}
+        data={playlistItemData}
+        onPress={onPress}
+        onTrailingButtonPress={onTrailingButtonPress}
+      />
+    );
+
+    const pressables = screen.UNSAFE_getAllByType(Pressable);
+    fireEvent.press(pressables[pressables.length - 1]);
+
+    expect(onTrailingButtonPress).toHaveBeenCalledTimes(1);
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it("invokes onPress when the row is pressed", () => {
+    const onPress = jest.fn();
+
+    render(
+      <AudioPlayerTrackItem
+        configuration={VARIANT_PLAYLIST_ITEM}
+        data={playlistItemData}
+        onPress={onPress}
+      />
+    );
+
+    fireEvent.press(screen.UNSAFE_getAllByType(Pressable)[0]);
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+});

package/Components/ModalComponent/AudioPlayer/Components/index.ts

@@ -1,7 +1,11 @@
-export { Item as AudioPlayerItem } from "./Item";
+export { AudioPlayerAction } from "./Action";
 
-export { Item as AudioPlayerHeader } from "./Header";
+export { AudioPlayerButton, VARIANT_WITH_ICON } from "./Button";
 
-export { Item as AudioPlayerButton } from "./Button";
+export { AudioPlayerHeader } from "./Header";
 
-export { Item as AudioPlayerAction } from "./Action";
+export { AudioPlayerTrackItem } from "./Item";
+
+export { NowPlayingHeaderSection } from "./NowPlayingHeaderSection";
+
+export { AudioPlayerInput } from "./Input";

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

@@ -0,0 +1,230 @@
+import {
+  mergeItemConfiguration,
+  mergeButtonConfiguration,
+} from "../mergeStyles";
+
+const base = {
+  background: {
+    defaultColor: "transparent",
+    focusedColor: "rgba(62, 62, 62, 1)",
+    cornerRadius: 12,
+  },
+  image: {
+    width: 48,
+    height: 48,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+    cornerRadius: 6,
+  },
+  nowPlayingAsset: {},
+  nowPlayingLabel: { fontColor: "#fff", fontSize: 12 },
+  textLabel1: { fontColor: "#fff", fontSize: 15 },
+  textLabel2: { fontColor: "#999", fontSize: 13 },
+};
+
+describe("mergeItemConfiguration background", () => {
+  it("applies Studio focus background to focusedColor", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      background: {
+        default: { backgroundColor: "transparent" },
+        focused: { backgroundColor: "#FF3B30" },
+      },
+    });
+
+    expect(merged.background.defaultColor).toBe("transparent");
+    expect(merged.background.focusedColor).toBe("#FF3B30");
+  });
+
+  it("accepts focus alias bucket from parser output", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      background: {
+        default: { backgroundColor: "transparent" },
+        focus: { backgroundColor: "#00FF66" },
+      },
+    });
+
+    expect(merged.background.focusedColor).toBe("#00FF66");
+  });
+
+  it("merges text label lineHeight from Studio keys", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      textLabel1: {
+        default: { fontSize: 28, lineHeight: 40 },
+      },
+    });
+
+    expect(merged.textLabel1.fontSize).toBe(28);
+    expect(merged.textLabel1.lineHeight).toBe(40);
+  });
+
+  it("merges background padding from Studio keys", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      background: {
+        default: {
+          backgroundColor: "#2E7D32",
+          paddingTop: 32,
+          paddingBottom: 32,
+          paddingLeft: 40,
+          paddingRight: 40,
+        },
+      },
+    });
+
+    expect(merged.background.paddingTop).toBe(32);
+    expect(merged.background.paddingBottom).toBe(32);
+    expect(merged.background.paddingLeft).toBe(40);
+    expect(merged.background.paddingRight).toBe(40);
+    // Default-only override must not steal the base focused highlight color.
+    expect(merged.background.focusedColor).toBe("rgba(62, 62, 62, 1)");
+  });
+
+  it("preserves base focusedColor when only default background is set", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      background: {
+        default: { backgroundColor: "#2E7D32" },
+      },
+    });
+
+    expect(merged.background.defaultColor).toBe("#2E7D32");
+    expect(merged.background.focusedColor).toBe("rgba(62, 62, 62, 1)");
+  });
+
+  it("applies Studio checkbox assets onto checkboxAssets", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      checkbox: {
+        default: {
+          asset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB",
+          checkedAsset: "https://placehold.co/24x24/FFD60A/000000/png?text=CK",
+        },
+      },
+    });
+
+    expect(merged.checkboxAssets?.asset).toBe(
+      "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB"
+    );
+
+    expect(merged.checkboxAssets?.checkedAsset).toBe(
+      "https://placehold.co/24x24/FFD60A/000000/png?text=CK"
+    );
+  });
+
+  it("applies Studio reorder/remove assets onto actionButtonAssets", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      actionButtons: {
+        default: {
+          removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+          dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+        },
+      },
+    });
+
+    expect(merged.actionButtonAssets?.removeAsset).toBe(
+      "https://placehold.co/24x24/00FF00/000000/png?text=RM"
+    );
+
+    expect(merged.actionButtonAssets?.dragAsset).toBe(
+      "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH"
+    );
+  });
+});
+
+describe("mergeButtonConfiguration background", () => {
+  const buttonBase = {
+    background: {
+      defaultColor: "#FFFFFF",
+      focusedColor: "#E0E0E0",
+      inactiveColor: "#CCCCCC",
+      cornerRadius: 12,
+      paddingTop: 12,
+      paddingRight: 12,
+      paddingBottom: 12,
+      paddingLeft: 12,
+      horizontalGutter: 8,
+    },
+    title: {
+      fontColor: "#000000",
+      focusedFontColor: "#000000",
+      inactiveFontColor: "#666666",
+      iosFontFamily: "SFProText-Semibold",
+      androidFontFamily: "Roboto-Medium",
+      fontSize: 15,
+      lineHeight: 24,
+      iosLetterSpacing: 0,
+      androidLetterSpacing: 0,
+      textTransform: "default" as const,
+    },
+    icons: {
+      width: 24,
+      height: 24,
+      leadingIcon: { enabled: true },
+    },
+  };
+
+  it("applies Studio button focus background to focusedColor", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      background: {
+        default: { backgroundColor: "#FFFFFF" },
+        focused: { backgroundColor: "#00FF00" },
+      },
+    });
+
+    expect(merged.background.defaultColor).toBe("#FFFFFF");
+    expect(merged.background.focusedColor).toBe("#00FF00");
+  });
+
+  it("applies Studio button title lineHeight", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      title: {
+        default: { fontColor: "#000000", fontSize: 15, lineHeight: 40 },
+      },
+    });
+
+    expect(merged.title.lineHeight).toBe(40);
+    expect(merged.title.fontSize).toBe(15);
+  });
+
+  it("applies Studio button background padding", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      background: {
+        default: {
+          backgroundColor: "#FFFFFF",
+          paddingTop: 32,
+          paddingRight: 20,
+          paddingBottom: 8,
+          paddingLeft: 4,
+        },
+      },
+    });
+
+    expect(merged.background.paddingTop).toBe(32);
+    expect(merged.background.paddingRight).toBe(20);
+    expect(merged.background.paddingBottom).toBe(8);
+    expect(merged.background.paddingLeft).toBe(4);
+    expect(merged.background.focusedColor).toBe("#E0E0E0");
+  });
+
+  it("preserves base button focusedColor when only default background is set", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      background: {
+        default: { backgroundColor: "#ABCDEF" },
+      },
+    });
+
+    expect(merged.background.defaultColor).toBe("#ABCDEF");
+    expect(merged.background.focusedColor).toBe("#E0E0E0");
+  });
+
+  it("applies Studio create-new leading icon asset", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      leadingIcon: {
+        default: {
+          asset: "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+        },
+      },
+    });
+
+    expect(merged.icons.leadingIcon.asset).toBe(
+      "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN"
+    );
+  });
+});