@applicaster/zapp-react-native-ui-components 16.0.0-alpha.8101951023 → 16.0.0-alpha.8114431136

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/ModalComponent/AudioPlayer/Components/Input.tsx

@@ -18,11 +18,42 @@ import {
   View,
 } from "react-native";
 
+import { resolveDefaultAssetUri } from "@applicaster/zapp-react-native-utils/actionUtils";
+
 const styles = StyleSheet.create({
   column: {
     alignItems: "center",
     width: "100%",
   },
+  validationMessage: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "center",
+    overflow: "hidden",
+    backgroundColor: "rgba(229,30,37,1.00)",
+    borderRadius: 100,
+    marginTop: 16,
+    paddingLeft: 8,
+    paddingRight: 12,
+    paddingTop: 8,
+    paddingBottom: 8,
+    gap: 8,
+  },
+  validationMessageIcon: {
+    width: 20,
+    height: 20,
+    alignSelf: "flex-start",
+  },
+  validationMessageText: {
+    color: "rgba(255,255,255,1.00)",
+    fontFamily: Platform.select({
+      ios: "GreycliffCF-Bold",
+      android: "Greycliff-Bold",
+      default: "Greycliff-Bold",
+    }),
+    fontSize: 13,
+    lineHeight: 20,
+  },
   textInput: {
     padding: 0,
     margin: 0,
@@ -51,14 +82,22 @@ export type TextTransform =
 
 export type TextAlignment = "left" | "center";
 
+export type UnderlineConfiguration = {
+  focusedBorderColor: string;
+  borderColor: string;
+  /** Bottom underline height; 0 = none (pill search uses borderWidth instead) */
+  underlineHeight: number;
+  underlineMarginTop: number;
+  /** Radius of the underline bar itself (bottom border style). */
+  underlineCornerRadius: number;
+};
+
 export type BackgroundConfiguration = {
   defaultColor: string;
   focusedColor: string;
   borderColor: string;
   focusedBorderColor: string;
   borderWidth: number;
-  /** Bottom underline height; 0 = none (pill search uses borderWidth instead) */
-  underlineHeight: number;
   cornerRadius: number;
   paddingTop: number;
   paddingRight: number;
@@ -95,6 +134,9 @@ export type TextConfiguration = {
   androidLetterSpacing: number;
   textTransform: TextTransform;
   alignment: TextAlignment;
+  /** Vertical spacing around the input text; drives the gap above the underline. */
+  marginTop: number;
+  marginBottom: number;
 };
 
 export type LeadingIconConfiguration = {
@@ -117,6 +159,7 @@ export type IconsConfiguration = {
 };
 
 export type InputConfiguration = {
+  underline: UnderlineConfiguration;
   background: BackgroundConfiguration;
   label: LabelConfiguration;
   text: TextConfiguration;
@@ -129,7 +172,6 @@ export const DEFAULT_BACKGROUND_CONFIGURATION: BackgroundConfiguration = {
   borderColor: "rgba(255, 255, 255, 0.55)",
   focusedBorderColor: "rgba(255, 255, 255, 0.85)",
   borderWidth: 1,
-  underlineHeight: 0,
   cornerRadius: 24,
   paddingTop: 10,
   paddingRight: 10,
@@ -165,6 +207,8 @@ export const DEFAULT_TEXT_CONFIGURATION: TextConfiguration = {
   androidLetterSpacing: 0,
   textTransform: "default",
   alignment: "left",
+  marginTop: 0,
+  marginBottom: 0,
 };
 
 export const DEFAULT_ICONS_CONFIGURATION: IconsConfiguration = {
@@ -180,8 +224,17 @@ export const DEFAULT_ICONS_CONFIGURATION: IconsConfiguration = {
   },
 };
 
+export const DEFAULT_UNDERLINE_CONFIGURATION: UnderlineConfiguration = {
+  borderColor: "rgba(255, 255, 255, 0.55)",
+  focusedBorderColor: "rgba(255, 255, 255, 0.85)",
+  underlineHeight: 0,
+  underlineMarginTop: 0,
+  underlineCornerRadius: 0,
+};
+
 export const DEFAULT_INPUT_CONFIGURATION: InputConfiguration = {
   background: DEFAULT_BACKGROUND_CONFIGURATION,
+  underline: DEFAULT_UNDERLINE_CONFIGURATION,
   label: DEFAULT_LABEL_CONFIGURATION,
   text: DEFAULT_TEXT_CONFIGURATION,
   icons: DEFAULT_ICONS_CONFIGURATION,
@@ -203,6 +256,7 @@ export type ItemProps = {
   value?: string;
   focused?: boolean;
   focusedClearButton?: boolean;
+  validationMessage?: string;
   onChangeText?: (text: string) => void;
   onClearPress?: () => void;
   onFocus?: () => void;
@@ -243,7 +297,7 @@ function shouldShowLabel(label: LabelConfiguration, labelText?: string) {
 }
 
 function isUnderlineLayout(configuration: InputConfiguration) {
-  return configuration.background.underlineHeight > 0;
+  return configuration.underline.underlineHeight > 0;
 }
 
 // ---------------------------------------------------------------------------
@@ -323,7 +377,7 @@ function InputContainer({
 }
 
 type InputUnderlineProps = {
-  configuration: BackgroundConfiguration;
+  configuration: UnderlineConfiguration;
   focused: boolean;
 };
 
@@ -337,7 +391,9 @@ function InputUnderline({ configuration, focused }: InputUnderlineProps) {
       style={[
         styles.underline,
         {
+          marginTop: configuration.underlineMarginTop,
           height: configuration.underlineHeight,
+          borderRadius: configuration.underlineCornerRadius,
           backgroundColor: focused
             ? configuration.focusedBorderColor
             : configuration.borderColor,
@@ -427,6 +483,8 @@ function InputField({
           }),
           textTransform: getTextTransformStyle(configuration.textTransform),
           textAlign: configuration.alignment,
+          marginTop: configuration.marginTop,
+          marginBottom: configuration.marginBottom,
         },
       ]}
     />
@@ -479,12 +537,13 @@ export function AudioPlayerInput({
   value = "",
   focused = false,
   focusedClearButton = false,
+  validationMessage,
   onChangeText,
   onClearPress,
   onFocus,
   onBlur,
 }: ItemProps) {
-  const { background, label, text, icons } = configuration;
+  const { background, label, text, icons, underline } = configuration;
   const inputRef = useRef<TextInputRef>(null);
   const underlineLayout = isUnderlineLayout(configuration);
   const showLabel = shouldShowLabel(label, data.label);
@@ -545,21 +604,40 @@ export function AudioPlayerInput({
           </>
         ) : null}
         {underlineLayout ? (
-          <InputUnderline configuration={background} focused={focused} />
+          <InputUnderline configuration={underline} focused={focused} />
         ) : null}
       </InputContainer>
     </Pressable>
   );
 
-  if (!showLabel || !data.label) {
-    return inputRow;
-  }
-
   return (
     <View style={styles.column}>
-      <InputLabel text={data.label} configuration={label} />
-      <View style={{ height: background.verticalGutter }} />
+      {showLabel && data.label ? (
+        <>
+          <InputLabel text={data.label} configuration={label} />
+          <View style={{ height: background.verticalGutter }} />
+        </>
+      ) : null}
       {inputRow}
+      {validationMessage ? (
+        <View style={styles.validationMessage} accessibilityRole="alert">
+          <Image
+            source={{
+              uri: resolveDefaultAssetUri(
+                require("../../../../assets/empty-Info.png")
+              ),
+            }}
+            style={styles.validationMessageIcon}
+          />
+          <Text
+            style={styles.validationMessageText}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {validationMessage}
+          </Text>
+        </View>
+      ) : null}
     </View>
   );
 }
@@ -572,55 +650,77 @@ export function AudioPlayerInput({
 export const VARIANT_SEARCH_INPUT: InputConfiguration =
   DEFAULT_INPUT_CONFIGURATION;
 
-/** Name playlist — centered title + label + underline (screenshot) */
+/**
+ * Name playlist — centered title + 32pt text over a rounded bottom underline.
+ *
+ * Values mirror the manifest configuration the
+ * `quick-brick-component-text-field` plugin renders from; the comment on each
+ * line names the reference key it comes from.
+ */
 export const VARIANT_NAME_PLAYLIST_INPUT: InputConfiguration = {
   background: {
-    defaultColor: "transparent",
-    focusedColor: "transparent",
-    borderColor: "rgba(255, 255, 255, 0.35)",
-    focusedBorderColor: "rgba(255, 255, 255, 0.55)",
+    // text_input_background_*_background_color
+    defaultColor: "rgba(30,30,30,0.00)",
+    focusedColor: "rgba(46,46,46,0.00)",
+    // text_input_style_border_*_border_color
+    borderColor: "rgba(255,255,255,0.25)",
+    focusedBorderColor: "rgba(255,255,255,1.00)",
+    // border_border_style is "bottom", so the box border is off and the
+    // underline below draws the border instead.
     borderWidth: 0,
-    underlineHeight: 1,
     cornerRadius: 0,
+    // text_input_style_input_padding_*
     paddingTop: 0,
     paddingRight: 0,
-    paddingBottom: 10,
+    paddingBottom: 0,
     paddingLeft: 0,
-    horizontalGutter: 0,
-    verticalGutter: 16,
-    height: 0,
+    horizontalGutter: 0, // text_input_style_input_horizontal_gutter
+    verticalGutter: 0, // component_style_vertical_gutter
+    height: 0, // hug content
+  },
+  underline: {
+    borderColor: "rgba(255,255,255,0.25)",
+    focusedBorderColor: "rgba(255,255,255,1.00)",
+    underlineHeight: 2, // text_input_style_border_border_size
+    // The gap above the bar comes from the text's marginBottom, matching how
+    // the plugin applies `text_label_margin_bottom` to the input itself.
+    underlineMarginTop: 0,
+    underlineCornerRadius: 4, // ..._border_bottom_border_corner_radius
   },
   label: {
-    enabled: true,
-    fontColor: "rgba(142, 142, 147, 1)",
-    iosFontFamily: "SFProText-Regular",
-    androidFontFamily: "Roboto",
-    fontSize: 15,
-    lineHeight: 20,
-    iosLetterSpacing: -0.2,
+    enabled: true, // title_enable
+    fontColor: "rgba(255,255,255,0.50)", // title_style_color
+    iosFontFamily: "GreycliffCF-Bold", // title_style_ios_font_family
+    androidFontFamily: "Greycliff-Bold", // title_style_android_font_family
+    fontSize: 14, // title_style_font_size
+    lineHeight: 32, // title_style_line_height
+    iosLetterSpacing: 0,
     androidLetterSpacing: 0,
-    textTransform: "default",
+    textTransform: "default", // title_style_text_transform: "none"
   },
   text: {
-    fontColor: "#FFFFFF",
-    focusedFontColor: "#FFFFFF",
-    placeholderColor: "rgba(142, 142, 147, 1)",
-    cursorColor: "#FFFFFF",
-    iosFontFamily: "SFProText-Bold",
-    androidFontFamily: "Roboto-Bold",
+    // text_input_style_text_label_*
+    fontColor: "rgba(255,255,255,1.00)", // active_label_color
+    focusedFontColor: "rgba(255,255,255,1.00)",
+    placeholderColor: "rgba(255,255,255,0.50)", // placeholder_label_color
+    cursorColor: "rgba(249,183,72,1.00)", // text_input_style_cursor_cursor_color
+    iosFontFamily: "GreycliffCF-Bold",
+    androidFontFamily: "Greycliff-Bold",
     fontSize: 32,
     lineHeight: 40,
-    iosLetterSpacing: -0.6,
+    iosLetterSpacing: 0,
     androidLetterSpacing: 0,
     textTransform: "default",
     alignment: "center",
+    marginTop: 20, // text_label_margin_top
+    marginBottom: 20, // text_label_margin_bottom
   },
   icons: {
     width: 20,
     height: 20,
     leadingIcon: { enabled: false },
     trailingIcon: {
-      enabled: false,
+      enabled: false, // clear_button_enable
       backgroundColor: "rgba(58, 58, 60, 1)",
       focusedBackgroundColor: "rgba(72, 72, 74, 1)",
     },

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

@@ -1,5 +1,5 @@
-import React from "react";
-import { View } from "react-native";
+import React, { useEffect, useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
 import {
   AudioPlayerTrackItem,
   VARIANT_NOW_PLAYING,
@@ -7,13 +7,57 @@ import {
 } 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";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
+import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/const";
+import type { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+
+const DEFAULT_EMPTY_MESSAGE = "Queued items will be added here";
+
+const styles = StyleSheet.create({
+  divider: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    marginHorizontal: 20,
+    marginVertical: 8,
+  },
+  emptyMessage: {
+    paddingTop: 32,
+    paddingBottom: 32,
+    paddingHorizontal: 40,
+    textAlign: "center",
+    color: "#999999",
+    fontSize: 13,
+    lineHeight: 16,
+  },
+});
+
+const isPrimaryOrCastingPlayer = (player?: Player | null): boolean => {
+  if (!player) {
+    return false;
+  }
+
+  return (
+    player.playerRole === PlayerRole.Primary ||
+    player.playerRole === PlayerRole.Chromecast
+  );
+};
+
+const getTargetPlayer = (): Player | null => {
+  if (playerManager.isCasting()) {
+    return playerManager.getCastingReceiver() || null;
+  }
+
+  const active = playerManager.getActivePlayer();
+
+  return isPrimaryOrCastingPlayer(active) ? active : null;
+};
 
 type NowPlayingHeaderSectionProps = {
   onClear?: () => void;
   nextUpTitle?: string;
   nowPlayingTitle?: string;
+  isEmpty?: boolean;
+  emptyMessage?: string;
   clearLabel?: string;
 };
 
@@ -21,20 +65,104 @@ export function NowPlayingHeaderSection({
   onClear,
   nextUpTitle = "Next Up",
   nowPlayingTitle = "Now Playing",
+  isEmpty = false,
+  emptyMessage = DEFAULT_EMPTY_MESSAGE,
   clearLabel,
 }: NowPlayingHeaderSectionProps) {
-  const player = usePlayer();
-  const playerState = usePlayerState("queue-now-playing-section");
+  const [activePlayer, setActivePlayer] = useState<Player | null>(
+    getTargetPlayer
+  );
+
+  const [currentEntry, setCurrentEntry] = useState<ZappEntry | null>(
+    () => getTargetPlayer()?.entry || null
+  );
+
+  const [isPaused, setIsPaused] = useState<boolean>(() =>
+    Boolean(getTargetPlayer()?.isPaused())
+  );
+
+  useEffect(() => {
+    const handleActivePlayerUpdate = () => {
+      const player = getTargetPlayer();
+
+      if (player) {
+        setActivePlayer(player);
+
+        if (player.entry) {
+          setCurrentEntry(player.entry);
+        }
+
+        setIsPaused(Boolean(player.isPaused()));
+      }
+    };
+
+    handleActivePlayerUpdate();
+
+    const removeLifecycle = playerManager.addLifecycleListener({
+      onRegistered: (registeredPlayer) => {
+        if (isPrimaryOrCastingPlayer(registeredPlayer)) {
+          handleActivePlayerUpdate();
+        }
+      },
+      onCastingChanged: handleActivePlayerUpdate,
+    });
+
+    return () => {
+      removeLifecycle?.();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!activePlayer) {
+      return;
+    }
+
+    const syncPlayerState = () => {
+      if (activePlayer.entry) {
+        setCurrentEntry(activePlayer.entry);
+      }
+
+      setIsPaused(Boolean(activePlayer.isPaused()));
+    };
+
+    syncPlayerState();
+
+    const removeListener = activePlayer.addListener({
+      id: "queue-now-playing-header",
+      listener: {
+        onPlayerPause: () => setIsPaused(true),
+        onPlayerResume: () => setIsPaused(false),
+        onVideoLoad: syncPlayerState,
+        onLoad: syncPlayerState,
+      },
+    });
+
+    return () => {
+      removeListener?.();
+    };
+  }, [activePlayer]);
+
+  const handlePlayPause = () => {
+    if (!activePlayer) {
+      return;
+    }
+
+    if (isPaused) {
+      activePlayer.play();
+      setIsPaused(false);
+    } else {
+      activePlayer.pause();
+      setIsPaused(true);
+    }
+  };
 
   const renderNowPlayingTrack = () => {
-    if (!player?.entry) {
+    if (!currentEntry) {
       return null;
     }
 
-    const mediaGroup = player.entry.media_group;
-
-    const imageGroup = Array.isArray(mediaGroup)
-      ? mediaGroup.find((g: any) => g.type === "image")
+    const imageGroup = Array.isArray(currentEntry.media_group)
+      ? currentEntry.media_group.find((g: any) => g.type === "image")
       : null;
 
     const firstImage = Array.isArray(imageGroup?.media_item)
@@ -42,26 +170,18 @@ export function NowPlayingHeaderSection({
       : 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) ?? "",
+      id: String(currentEntry.id ?? "now_playing"),
+      title: (currentEntry.title as string) || String(currentEntry.id),
+      summary: (currentEntry.summary as string) ?? "",
       icon: firstImage,
     };
 
     const data = mapMenuItemToNowPlayingData(
       nowPlayingItem,
-      playerState?.isPaused,
+      isPaused,
       nowPlayingTitle
     );
 
-    const handlePlayPause = () => {
-      if (playerState?.isPaused) {
-        player?.play();
-      } else {
-        player?.pause();
-      }
-    };
-
     return (
       <AudioPlayerTrackItem
         configuration={VARIANT_NOW_PLAYING}
@@ -79,6 +199,7 @@ export function NowPlayingHeaderSection({
         data={{ title: nextUpTitle, clearLabel }}
         onClear={onClear}
       />
+      {isEmpty ? <Text style={styles.emptyMessage}>{emptyMessage}</Text> : null}
     </View>
   );
 }

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,