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

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

@@ -6,20 +6,20 @@
  * 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.
  */
 
 import React from "react";
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import {
-  Image,
-  Platform,
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
+  MenuItem,
+  SelectionBehavior,
+} from "@applicaster/zapp-react-native-utils/modalState/types";
+import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
+import { mergeItemConfiguration } from "../utils/mergeStyles";
 
 const styles = StyleSheet.create({
   row: {
@@ -34,25 +34,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
   },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 0,
-    gap: 16,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-    paddingHorizontal: 16,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    paddingHorizontal: 16,
-  },
 });
 
 // ---------------------------------------------------------------------------
@@ -69,6 +50,12 @@ export type BackgroundConfiguration = {
   defaultColor: string;
   focusedColor: string;
   cornerRadius: number;
+  paddingTop?: number;
+  paddingRight?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  highlightInsetLeft?: number;
+  highlightInsetRight?: number;
 };
 
 export type ImageConfiguration = {
@@ -95,6 +82,24 @@ export type NowPlayingAssetConfiguration = {
   asset?: string;
 };
 
+export type CheckboxAssetsConfiguration = {
+  /** Unchecked multiSelect control (item.checkbox_asset). */
+  asset?: string;
+  /** Checked multiSelect control (item.checked_checkbox_asset). */
+  checkedAsset?: string;
+};
+
+export type ActionButtonAssetsConfiguration = {
+  /** Leading remove control on Edit Order rows. */
+  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 = {
   background: BackgroundConfiguration;
   image: ImageConfiguration;
@@ -102,53 +107,10 @@ export type ItemConfiguration = {
   nowPlayingLabel: LabelConfiguration;
   textLabel1: LabelConfiguration;
   textLabel2: LabelConfiguration;
+  checkboxAssets?: CheckboxAssetsConfiguration;
+  actionButtonAssets?: ActionButtonAssetsConfiguration;
 };
 
-export interface Action {
-  type: string;
-  payload?: any;
-  options?: any;
-}
-
-export interface Header {
-  title: string;
-  subtitle?: string;
-  icon?: string;
-}
-
-export interface Content {
-  title: string;
-  stickyTitle?: boolean;
-  items: MenuItem[];
-  itemsUrl?: string;
-  action?: Action;
-}
-
-export interface Menu {
-  header?: Header;
-  content: Content;
-  closeButton?: boolean;
-}
-
-export interface PresentSubMenuAction extends Action {
-  menu: Menu;
-}
-
-export interface SecondaryAction {
-  action: Action | PresentSubMenuAction;
-  icon?: string;
-}
-
-export interface MenuItem {
-  trailingButton?: ItemButtonAction;
-  title: string;
-  summary?: string;
-  icon?: string;
-  isSelected?: boolean;
-  action?: Action | PresentSubMenuAction;
-  secondaryAction?: SecondaryAction;
-}
-
 export const DEFAULT_TEXT_LABEL_1_CONFIGURATION: LabelConfiguration = {
   fontColor: "#FFFFFF",
   focusedFontColor: "#FFFFFF",
@@ -211,6 +173,7 @@ export type AudioPlayerTrackItemProps = {
   onPress?: () => void;
   onLeadingButtonPress?: () => void;
   onTrailingButtonPress?: () => void;
+  renderHandle?: (element: React.ReactElement) => React.ReactElement;
 };
 
 // ---------------------------------------------------------------------------
@@ -246,9 +209,9 @@ const CONTAINER_SPEC_LARGE_IMAGE: ContainerSpec = {
 
 const CONTAINER_SPEC_DEFAULT: ContainerSpec = {
   paddingTop: 8,
-  paddingRight: 20,
+  paddingRight: 10,
   paddingBottom: 8,
-  paddingLeft: 20,
+  paddingLeft: 10,
   horizontalGutter: 12,
   verticalGutter: 2,
 };
@@ -326,14 +289,18 @@ function resolveContainerSpec(image: ImageConfiguration): ContainerSpec {
     : CONTAINER_SPEC_DEFAULT;
 }
 
-export function mapMenuItemToNowPlayingData(item: MenuItem): ItemData {
+export function mapMenuItemToNowPlayingData(
+  item: MenuItem,
+  isPaused?: boolean,
+  nowPlayingLabel = "Now Playing"
+): ItemData {
   return {
     imageUri: item.icon,
     textLabel1: item.title,
     textLabel2: item.summary ?? "",
-    nowPlayingLabel: "Now Playing",
+    nowPlayingLabel,
     trailingButton: "playPause",
-    isSelected: item.isSelected,
+    isSelected: isPaused !== undefined ? !isPaused : item.isSelected,
   };
 }
 
@@ -348,12 +315,23 @@ export function mapMenuItemToQueuedData(item: MenuItem): ItemData {
   };
 }
 
-export function mapMenuItemToPlaylistData(item: MenuItem): ItemData {
+export function mapMenuItemToPlaylistData(
+  item: MenuItem,
+  behavior?: SelectionBehavior
+): ItemData {
+  const showSelectionWidget =
+    behavior?.selectMode !== "none" && item.trailingButton !== "none";
+
+  const summary =
+    typeof item.summary === "string" ? item.summary.trim() : item.summary;
+
   return {
     imageUri: item.icon,
     textLabel1: item.title,
-    textLabel2: item.summary ?? "",
-    trailingButton: item.trailingButton || ("multiSelect" as ItemButtonAction),
+    textLabel2: summary || "",
+    trailingButton: showSelectionWidget
+      ? item.trailingButton || ("multiSelect" as ItemButtonAction)
+      : undefined,
     isSelected: item.isSelected,
   };
 }
@@ -378,21 +356,30 @@ function ItemContainer({
   onPress,
 }: ItemContainerProps) {
   const container = resolveContainerSpec(image);
-  const bg = focused ? background.focusedColor : background.defaultColor;
+  const insetLeft = background.highlightInsetLeft ?? 0;
+  const insetRight = background.highlightInsetRight ?? 0;
 
   return (
-    <Pressable
-      onPress={onPress}
-      style={({ pressed }) => ({
-        backgroundColor: pressed ? background.focusedColor : bg,
-        borderRadius: background.cornerRadius,
-        paddingTop: container.paddingTop,
-        paddingRight: container.paddingRight,
-        paddingBottom: container.paddingBottom,
-        paddingLeft: container.paddingLeft,
-      })}
-    >
-      {children}
+    <Pressable onPress={onPress}>
+      {({ pressed }) => (
+        <View
+          style={{
+            marginLeft: insetLeft,
+            marginRight: insetRight,
+            backgroundColor:
+              pressed || focused
+                ? background.focusedColor
+                : background.defaultColor,
+            borderRadius: background.cornerRadius,
+            paddingTop: background.paddingTop ?? container.paddingTop,
+            paddingRight: background.paddingRight ?? container.paddingRight,
+            paddingBottom: background.paddingBottom ?? container.paddingBottom,
+            paddingLeft: background.paddingLeft ?? container.paddingLeft,
+          }}
+        >
+          {children}
+        </View>
+      )}
     </Pressable>
   );
 }
@@ -425,6 +412,10 @@ type ItemLabelProps = {
 };
 
 function ItemLabel({ text, configuration, focused = false }: ItemLabelProps) {
+  if (!text) {
+    return null;
+  }
+
   const color =
     focused && configuration.focusedFontColor
       ? configuration.focusedFontColor
@@ -496,6 +487,8 @@ type ItemButtonProps = {
   focused?: boolean;
   onPress?: () => void;
   isSelected?: boolean;
+  checkboxAssets?: CheckboxAssetsConfiguration;
+  actionButtonAssets?: ActionButtonAssetsConfiguration;
 };
 
 function ItemButton({
@@ -503,12 +496,35 @@ function ItemButton({
   focused = false,
   onPress,
   isSelected = false,
+  checkboxAssets,
+  actionButtonAssets,
 }: ItemButtonProps) {
   const layout = BUTTON_LAYOUT_SPEC[action];
 
+  if (!layout) {
+    return null;
+  }
+
   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;
 
@@ -573,6 +589,19 @@ function ItemButton({
       }
 
       case "drag": {
+        if (actionButtonAssets?.dragAsset) {
+          return (
+            <Image
+              source={{ uri: actionButtonAssets.dragAsset }}
+              style={{
+                width: layout.assetWidth,
+                height: layout.assetHeight,
+              }}
+              resizeMode="contain"
+            />
+          );
+        }
+
         return (
           <View
             style={{
@@ -607,6 +636,19 @@ function ItemButton({
       }
 
       case "remove": {
+        if (actionButtonAssets?.removeAsset) {
+          return (
+            <Image
+              source={{ uri: actionButtonAssets.removeAsset }}
+              style={{
+                width: layout.assetWidth,
+                height: layout.assetHeight,
+              }}
+              resizeMode="contain"
+            />
+          );
+        }
+
         return (
           <View
             style={{
@@ -632,6 +674,23 @@ function ItemButton({
       }
 
       case "multiSelect": {
+        const studioAsset = isSelected
+          ? checkboxAssets?.checkedAsset
+          : checkboxAssets?.asset;
+
+        if (studioAsset) {
+          return (
+            <Image
+              source={{ uri: studioAsset }}
+              style={{
+                width: layout.assetWidth,
+                height: layout.assetHeight,
+              }}
+              resizeMode="contain"
+            />
+          );
+        }
+
         if (!isSelected) {
           return (
             <View
@@ -678,15 +737,31 @@ function ItemButton({
     }
   };
 
+  const buttonPadding = {
+    paddingTop: layout.paddingTop,
+    paddingRight: layout.paddingRight,
+    paddingBottom: layout.paddingBottom,
+    paddingLeft: layout.paddingLeft,
+  };
+
+  // A nested Pressable with no handler swallows the parent row press.
+  if (!onPress) {
+    return (
+      <View pointerEvents="none" style={buttonPadding}>
+        {renderIcon()}
+      </View>
+    );
+  }
+
   return (
     <Pressable
-      onPress={onPress}
+      onPress={(e: any) => {
+        e?.stopPropagation?.();
+        onPress();
+      }}
       style={({ pressed }) => [
+        buttonPadding,
         {
-          paddingTop: layout.paddingTop,
-          paddingRight: layout.paddingRight,
-          paddingBottom: layout.paddingBottom,
-          paddingLeft: layout.paddingLeft,
           opacity: pressed || focused ? 0.7 : 1,
         },
       ]}
@@ -704,6 +779,9 @@ type ItemButtonsProps = {
   onLeadingButtonPress?: () => void;
   onTrailingButtonPress?: () => void;
   isSelected?: boolean;
+  renderHandle?: (element: React.ReactElement) => React.ReactElement;
+  checkboxAssets?: CheckboxAssetsConfiguration;
+  actionButtonAssets?: ActionButtonAssetsConfiguration;
 };
 
 function ItemButtons({
@@ -714,6 +792,9 @@ function ItemButtons({
   onLeadingButtonPress,
   onTrailingButtonPress,
   isSelected = false,
+  renderHandle,
+  checkboxAssets,
+  actionButtonAssets,
 }: ItemButtonsProps) {
   if (!leadingButton && !trailingButton) {
     return null;
@@ -728,17 +809,45 @@ function ItemButtons({
             focused={focusedLeadingButton}
             onPress={onLeadingButtonPress}
             isSelected={isSelected}
+            checkboxAssets={checkboxAssets}
+            actionButtonAssets={actionButtonAssets}
           />
           <View style={{ width: BUTTONS_CONTAINER_HORIZONTAL_GUTTER }} />
         </>
       ) : null}
       {trailingButton ? (
-        <ItemButton
-          action={trailingButton}
-          focused={focusedTrailingButton}
-          onPress={onTrailingButtonPress}
-          isSelected={isSelected}
-        />
+        trailingButton === "drag" ? (
+          renderHandle ? (
+            renderHandle(
+              <ItemButton
+                action={trailingButton}
+                focused={focusedTrailingButton}
+                onPress={onTrailingButtonPress}
+                isSelected={isSelected}
+                checkboxAssets={checkboxAssets}
+                actionButtonAssets={actionButtonAssets}
+              />
+            )
+          ) : (
+            <ItemButton
+              action={trailingButton}
+              focused={focusedTrailingButton}
+              onPress={onTrailingButtonPress}
+              isSelected={isSelected}
+              checkboxAssets={checkboxAssets}
+              actionButtonAssets={actionButtonAssets}
+            />
+          )
+        ) : (
+          <ItemButton
+            action={trailingButton}
+            focused={focusedTrailingButton}
+            onPress={onTrailingButtonPress}
+            isSelected={isSelected}
+            checkboxAssets={checkboxAssets}
+            actionButtonAssets={actionButtonAssets}
+          />
+        )
       ) : null}
     </View>
   );
@@ -757,18 +866,36 @@ export function AudioPlayerTrackItem({
   onPress,
   onLeadingButtonPress,
   onTrailingButtonPress,
+  renderHandle,
 }: AudioPlayerTrackItemProps) {
+  const modalBlocksStyle = useModalBlocksStyle();
+  const showNowPlaying = !!data.nowPlayingLabel;
+
+  const itemBlock =
+    showNowPlaying && modalBlocksStyle?.nowPlayingItem
+      ? modalBlocksStyle.nowPlayingItem
+      : modalBlocksStyle?.item;
+
+  const effectiveConfig = React.useMemo(() => {
+    return mergeItemConfiguration(configuration, itemBlock);
+  }, [configuration, itemBlock]);
+
   const {
     background,
     image,
-    nowPlayingAsset,
-    nowPlayingLabel,
     textLabel1,
     textLabel2,
-  } = configuration;
+    nowPlayingLabel,
+    nowPlayingAsset,
+    checkboxAssets,
+    actionButtonAssets,
+  } = effectiveConfig;
 
   const container = resolveContainerSpec(image);
-  const showNowPlaying = !!data.nowPlayingLabel;
+
+  const handleTrailingButtonPress =
+    onTrailingButtonPress ??
+    (data.trailingButton === "multiSelect" ? onPress : undefined);
 
   return (
     <ItemContainer
@@ -782,22 +909,28 @@ export function AudioPlayerTrackItem({
         <View style={{ width: container.horizontalGutter }} />
         <View style={styles.contentColumn}>
           {showNowPlaying ? (
-            <>
-              <NowPlayingRow
-                assetConfiguration={nowPlayingAsset}
-                labelConfiguration={nowPlayingLabel}
-                label={data.nowPlayingLabel}
-              />
-              <View style={{ height: container.verticalGutter }} />
-            </>
+            <NowPlayingRow
+              assetConfiguration={nowPlayingAsset}
+              labelConfiguration={nowPlayingLabel}
+              label={data.nowPlayingLabel}
+            />
+          ) : null}
+          {showNowPlaying && (data.textLabel1 || data.textLabel2) ? (
+            <View style={{ height: container.verticalGutter }} />
+          ) : null}
+          {data.textLabel1 ? (
+            <ItemLabel
+              text={data.textLabel1}
+              configuration={textLabel1}
+              focused={focused}
+            />
+          ) : null}
+          {data.textLabel1 && data.textLabel2 ? (
+            <View style={{ height: container.verticalGutter }} />
+          ) : null}
+          {data.textLabel2 ? (
+            <ItemLabel text={data.textLabel2} configuration={textLabel2} />
           ) : null}
-          <ItemLabel
-            text={data.textLabel1}
-            configuration={textLabel1}
-            focused={focused}
-          />
-          <View style={{ height: container.verticalGutter }} />
-          <ItemLabel text={data.textLabel2} configuration={textLabel2} />
         </View>
         <ItemButtons
           leadingButton={data.leadingButton}
@@ -805,8 +938,11 @@ export function AudioPlayerTrackItem({
           focusedLeadingButton={focusedLeadingButton}
           focusedTrailingButton={focusedTrailingButton}
           onLeadingButtonPress={onLeadingButtonPress}
-          onTrailingButtonPress={onTrailingButtonPress}
+          onTrailingButtonPress={handleTrailingButtonPress}
           isSelected={data.isSelected}
+          renderHandle={renderHandle}
+          checkboxAssets={checkboxAssets}
+          actionButtonAssets={actionButtonAssets}
         />
       </View>
     </ItemContainer>
@@ -823,6 +959,10 @@ export const VARIANT_NOW_PLAYING: ItemConfiguration = {
     defaultColor: "transparent",
     focusedColor: "transparent",
     cornerRadius: 0,
+    paddingTop: 8,
+    paddingRight: 20,
+    paddingBottom: 8,
+    paddingLeft: 20,
   },
   image: {
     width: 72,
@@ -843,6 +983,12 @@ export const VARIANT_QUEUED_ITEM: ItemConfiguration = {
     defaultColor: "transparent",
     focusedColor: "rgba(62, 62, 62, 1)",
     cornerRadius: 12,
+    paddingTop: 8,
+    paddingRight: 10,
+    paddingBottom: 8,
+    paddingLeft: 10,
+    highlightInsetLeft: 10,
+    highlightInsetRight: 10,
   },
   image: {
     width: 48,
@@ -863,6 +1009,10 @@ export const VARIANT_PLAYLIST_ITEM: ItemConfiguration = {
     defaultColor: "transparent",
     focusedColor: "rgba(62, 62, 62, 1)",
     cornerRadius: 12,
+    paddingTop: 8,
+    paddingRight: 10,
+    paddingBottom: 8,
+    paddingLeft: 10,
   },
   image: {
     width: 48,