@applicaster/zapp-react-native-ui-components 16.0.0-rc.97 → 16.0.0-rc.98

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { render, screen } from "@testing-library/react-native";
+import { NowPlayingHeaderSection } from "../NowPlayingHeaderSection";
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer",
+  () => ({
+    usePlayer: () => null,
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState",
+  () => ({
+    usePlayerState: () => ({ isPaused: true }),
+  })
+);
+
+const EMPTY_COPY = "Queued items will be added here";
+
+describe("NowPlayingHeaderSection empty queue", () => {
+  it("renders the empty message under Next Up when the list is empty", () => {
+    render(<NowPlayingHeaderSection isEmpty emptyMessage={EMPTY_COPY} />);
+
+    expect(screen.getByText("Next Up")).toBeTruthy();
+    expect(screen.getByText(EMPTY_COPY)).toBeTruthy();
+  });
+
+  it("does not render the empty message when the list has items", () => {
+    render(
+      <NowPlayingHeaderSection isEmpty={false} emptyMessage={EMPTY_COPY} />
+    );
+
+    expect(screen.queryByText(EMPTY_COPY)).toBeNull();
+  });
+});

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -92,6 +92,8 @@ type ModalComponentProps = {
   contentComponentProps?: Record<string, any>;
   styleOverrides?: ModalBlocksConfig | Record<string, any>;
   measurementPhase?: boolean;
+  /** Copy under Next Up when the queue has no upcoming items. */
+  emptyMessage?: string;
 };
 
 function _BottomSheetModalContent(props: ModalComponentProps) {
@@ -115,6 +117,7 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     contentComponentProps = {},
     styleOverrides: propStyleOverrides,
     measurementPhase = false,
+    emptyMessage,
   } = props;
 
   const route = useRef(currentRoute);
@@ -385,6 +388,7 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
   const hasNowPlaying = hasOperation(operations, OPERATIONS.NOW_PLAYING);
   const hasClearAll = hasOperation(operations, OPERATIONS.CLEAR_ALL);
   const hasAdd = hasOperation(operations, OPERATIONS.ADD);
+  const isQueueEmpty = hasNowPlaying && (itemsToRender?.length ?? 0) === 0;
 
   const handleDeleteCollection = useCallback(() => {
     editableCollection?.deleteCollection?.();
@@ -409,6 +413,8 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
             onClear={hasClearAll ? handleDeleteCollection : undefined}
             nextUpTitle={nextUpTitle}
             nowPlayingTitle={nowPlayingTitle}
+            isEmpty={isQueueEmpty}
+            emptyMessage={emptyMessage}
             clearLabel={clearLabel}
           />
         ),
@@ -435,6 +441,8 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     handleDeleteCollection,
     nextUpTitle,
     nowPlayingTitle,
+    isQueueEmpty,
+    emptyMessage,
     clearLabel,
     hasAdd,
     handleCreatePlaylist,
@@ -545,6 +553,8 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
             onClear={hasClearAll ? handleDeleteCollection : undefined}
             nextUpTitle={nextUpTitle}
             nowPlayingTitle={nowPlayingTitle}
+            isEmpty={isQueueEmpty}
+            emptyMessage={emptyMessage}
             clearLabel={clearLabel}
           />
         ) : null}

package/Components/ModalComponent/TextInputContent.tsx

@@ -9,6 +9,7 @@ import {
   AudioPlayerButton,
   VARIANT_TEXT_ONLY,
 } from "./AudioPlayer/Components/Button";
+import { logger } from "@applicaster/zapp-react-native-utils/logger";
 
 export type TextInputContentProps = {
   /** Injected by the sheet host; unused for layout (header is owned by ModalComponent). */
@@ -19,17 +20,25 @@ export type TextInputContentProps = {
   inputLabel?: string;
   defaultValue?: string;
   buttonLabel: string;
+  validationLabel?: string;
+  maxLength?: number;
   actions: ActionType[];
   actionContext?: Record<string, any>;
 };
 
+// Spacing mirrors the `component_style_*` keys in text input component.
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: 20,
-    paddingBottom: 8,
+    backgroundColor: "transparent", // component_style_background_color
+    paddingLeft: 40, // component_style_padding_left
+    paddingRight: 40, // component_style_padding_right
+    paddingTop: 0, // component_style_padding_top
+    paddingBottom: 0, // component_style_padding_bottom
+    marginTop: 20, // component_style_margin_top
+    marginBottom: 20, // component_style_margin_bottom
   },
   inputWrap: {
-    marginTop: 8,
+    // Gap down to the submit button; owned by the modal, not the reference.
     marginBottom: 24,
   },
 });
@@ -45,11 +54,24 @@ export function TextInputContent(props: TextInputContentProps) {
     buttonLabel,
     actions,
     actionContext,
+    maxLength = 255,
+    validationLabel,
   } = props;
 
   const [textValue, setTextValue] = useState(defaultValue);
   const [submitting, setSubmitting] = useState(false);
 
+  const validationMessage =
+    textValue.length > maxLength
+      ? validationLabel || "Too many characters"
+      : undefined;
+
+  if (!validationLabel) {
+    logger.warn(
+      "Modal/TextInputContent: Validation label (validationLabel) is not provided, using default message 'Too many characters'."
+    );
+  }
+
   const onSubmit = useCallback(async () => {
     if (submitting) {
       return;
@@ -97,6 +119,7 @@ export function TextInputContent(props: TextInputContentProps) {
             label: inputLabel,
           }}
           value={textValue}
+          validationMessage={validationMessage}
           onChangeText={setTextValue}
           onClearPress={() => setTextValue("")}
         />
@@ -105,7 +128,7 @@ export function TextInputContent(props: TextInputContentProps) {
         configuration={VARIANT_TEXT_ONLY}
         data={{ title: buttonLabel }}
         onPress={onSubmit}
-        disabled={submitting}
+        disabled={!!validationMessage || submitting}
       />
     </View>
   );

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

@@ -83,9 +83,14 @@ jest.mock("../AudioPlayer/Components/Item", () => ({
 }));
 
 const mockAudioPlayerButtonProps: Array<any> = [];
+const mockNowPlayingHeaderProps: Array<any> = [];
 
 jest.mock("../AudioPlayer/Components", () => ({
-  NowPlayingHeaderSection: () => null,
+  NowPlayingHeaderSection: (props: any) => {
+    mockNowPlayingHeaderProps.push(props);
+
+    return null;
+  },
   AudioPlayerButton: (props: any) => {
     const { Text } = require("react-native");
 
@@ -216,6 +221,74 @@ describe("BottomSheetModalContent role/behavior cells", () => {
     });
   });
 
+  it("shows the empty Next Up message only when now playing is on and the list is empty", () => {
+    mockNowPlayingHeaderProps.length = 0;
+    const { BehaviorSubject } = require("rxjs");
+
+    const emptyQueue = new ContentViewModel({
+      title: "Queue",
+      items: [],
+      role: "dynamic_collection",
+      dynamicCollection: {
+        operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      },
+    });
+
+    emptyQueue.editableCollection = {
+      items$: new BehaviorSubject([]),
+      operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      move: jest.fn(),
+    };
+
+    const { rerender } = render(
+      <BottomSheetModalContent
+        {...baseProps}
+        items={[]}
+        emptyMessage="Queued items will be added here"
+        viewModel={emptyQueue}
+      />
+    );
+
+    expect(mockNowPlayingHeaderProps.at(-1)).toMatchObject({
+      isEmpty: true,
+      emptyMessage: "Queued items will be added here",
+    });
+
+    const withItem = new ContentViewModel({
+      title: "Queue",
+      items: [{ id: "t1", title: "Track 1" }],
+      role: "dynamic_collection",
+      dynamicCollection: {
+        operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      },
+    });
+
+    withItem.editableCollection = {
+      items$: new BehaviorSubject([{ id: "t1", title: "Track 1" }]),
+      operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      move: jest.fn(),
+    };
+
+    rerender(
+      <BottomSheetModalContent
+        {...baseProps}
+        items={[{ id: "t1", title: "Track 1", label: "Track 1" }]}
+        emptyMessage="Queued items will be added here"
+        viewModel={withItem}
+      />
+    );
+
+    expect(mockNowPlayingHeaderProps.at(-1)).toMatchObject({
+      isEmpty: false,
+    });
+
+    mockNowPlayingHeaderProps.length = 0;
+
+    render(<BottomSheetModalContent {...baseProps} />);
+
+    expect(mockNowPlayingHeaderProps).toHaveLength(0);
+  });
+
   it("honors disableScrollViewWrap in contentComponentProps to bypass ScrollView wrapping", () => {
     const CustomComponent = () => (
       <React.Fragment>Custom Content</React.Fragment>

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

@@ -19,7 +19,7 @@ jest.mock(
 );
 
 jest.mock("../AudioPlayer/Components/Input", () => ({
-  AudioPlayerInput: ({ value, onChangeText, data }: any) => {
+  AudioPlayerInput: ({ value, onChangeText, data, validationMessage }: any) => {
     const { TextInput, Text } = require("react-native");
 
     return (
@@ -31,6 +31,9 @@ jest.mock("../AudioPlayer/Components/Input", () => ({
           onChangeText={onChangeText}
           placeholder={data?.placeholder}
         />
+        {validationMessage ? (
+          <Text testID="input-validation-message">{validationMessage}</Text>
+        ) : null}
       </>
     );
   },
@@ -87,6 +90,16 @@ describe("TextInputContent", () => {
     expect(screen.getByText("Update")).toBeTruthy();
   });
 
+  it("shows validation below the input when its value is too long", () => {
+    render(<TextInputContent maxLength={100} {...baseProps} />);
+
+    fireEvent.changeText(screen.getByTestId("playlist-input"), "x".repeat(101));
+
+    expect(screen.getByTestId("input-validation-message")).toHaveTextContent(
+      "Too many characters"
+    );
+  });
+
   it("on submit merges name into sendCloudEvent data then dismisses", async () => {
     render(<TextInputContent {...baseProps} />);
 

package/Components/ModalComponent/showTextInput.ts

@@ -13,8 +13,15 @@ export async function showTextInputAction(
   action: ActionType,
   context?: Record<string, any>
 ): Promise<ActionResult> {
-  const { headerTitle, inputLabel, defaultValue, buttonLabel, actions } =
-    action.options || {};
+  const {
+    headerTitle,
+    inputLabel,
+    defaultValue,
+    buttonLabel,
+    validationLabel,
+    actions,
+    maxLength,
+  } = action.options || {};
 
   if (!headerTitle || !buttonLabel || !actions || !actions.length) {
     return ActionResult.Error;
@@ -30,10 +37,12 @@ export async function showTextInputAction(
         content: {
           component: TextInputContent,
           props: {
+            maxLength,
             inputLabel,
             defaultValue: defaultValue ?? "",
             buttonLabel,
             actions,
+            validationLabel,
           },
         },
       },

package/package.json

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