@applicaster/zapp-react-native-ui-components 16.0.0-rc.56 → 16.0.0-rc.58

package/Components/ModalComponent/AudioPlayer/Components/Action.tsx

@@ -25,24 +25,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
   },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 16,
-    gap: 12,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    marginTop: 8,
-  },
 });
 
 // ---------------------------------------------------------------------------

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

@@ -32,24 +32,6 @@ const styles = StyleSheet.create({
   title: {
     textAlign: "center",
   },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 24,
-    gap: 12,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    marginTop: 8,
-  },
 });
 
 // ---------------------------------------------------------------------------
@@ -310,6 +292,9 @@ function ButtonLeadingIcon({
 // AudioPlayerButton — single building block driven by configuration + data
 // ---------------------------------------------------------------------------
 
+import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
+import { mergeButtonConfiguration } from "../utils/mergeStyles";
+
 export function AudioPlayerButton({
   configuration,
   data,
@@ -317,11 +302,19 @@ export function AudioPlayerButton({
   focused = false,
   onPress,
 }: AudioPlayerButtonProps) {
+  const modalBlocksStyle = useModalBlocksStyle();
+  const buttonBlock = modalBlocksStyle?.button;
+  const actionBlock = modalBlocksStyle?.action;
+
+  const effectiveConfig = React.useMemo(() => {
+    return mergeButtonConfiguration(configuration, buttonBlock, actionBlock);
+  }, [configuration, buttonBlock, actionBlock]);
+
   const {
-    background: backgroundConfiguration,
-    title: titleConfiguration,
+    background: effectiveBgConfig,
+    title: effectiveTitleConfig,
     icons: iconsConfiguration,
-  } = configuration;
+  } = effectiveConfig;
 
   const { title } = data;
   const isDisabled = disabled ?? data.disabled ?? false;
@@ -333,7 +326,7 @@ export function AudioPlayerButton({
     <ButtonContainer
       focused={focused}
       disabled={isDisabled}
-      configuration={backgroundConfiguration}
+      configuration={effectiveBgConfig}
       onPress={onPress}
     >
       <View style={styles.contentRow}>
@@ -343,14 +336,14 @@ export function AudioPlayerButton({
               actionType={leadingIcon.actionType}
               configuration={iconsConfiguration}
             />
-            <View style={{ width: backgroundConfiguration.horizontalGutter }} />
+            <View style={{ width: effectiveBgConfig.horizontalGutter }} />
           </>
         ) : null}
         <ButtonTitle
           title={title}
           focused={focused}
           disabled={isDisabled}
-          configuration={titleConfiguration}
+          configuration={effectiveTitleConfig}
         />
       </View>
     </ButtonContainer>

package/Components/ModalComponent/AudioPlayer/Components/Header.tsx

@@ -10,6 +10,7 @@
 
 import React, { useCallback, useState } from "react";
 import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 const styles = StyleSheet.create({
   row: {
@@ -45,29 +46,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 0,
-    gap: 24,
-  },
-  demoBlock: {
-    gap: 8,
-    paddingHorizontal: 0,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-    paddingHorizontal: 24,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    paddingHorizontal: 24,
-  },
 });
 
 // ---------------------------------------------------------------------------
@@ -123,7 +101,7 @@ export type ActionButtonsStyleConfiguration = {
 };
 
 export type HeaderConfiguration = {
-  paddingTop: undefined;
+  paddingTop?: number;
   variant: HeaderVariant;
   title: TitleConfiguration;
   closeButton: CloseButtonConfiguration;
@@ -305,6 +283,8 @@ type HeaderContainerProps = {
   children: React.ReactNode;
 };
 
+const TRANSPARENT = "transparent";
+
 function HeaderContainer({
   variant,
   configuration,
@@ -317,6 +297,8 @@ function HeaderContainer({
       ? configuration.paddingTop
       : container.paddingTop;
 
+  const backgroundColor = (configuration as any).backgroundColor || TRANSPARENT;
+
   return (
     <View
       style={{
@@ -324,6 +306,7 @@ function HeaderContainer({
         paddingRight: container.paddingRight,
         paddingBottom: container.paddingBottom,
         paddingLeft: container.paddingLeft,
+        backgroundColor: backgroundColor,
       }}
     >
       {children}
@@ -338,17 +321,18 @@ type HeaderTitleProps = {
 };
 
 function HeaderTitle({ title, configuration, centered }: HeaderTitleProps) {
-  const letterSpacing =
-    Platform.OS === "ios"
-      ? configuration.iosLetterSpacing
-      : configuration.androidLetterSpacing;
+  const { fontColor, fontSize } = configuration;
+
+  const letterSpacing = isApplePlatform()
+    ? configuration.iosLetterSpacing
+    : configuration.androidLetterSpacing;
 
   return (
     <Text
       style={{
         flex: centered ? undefined : 1,
-        color: configuration.fontColor,
-        fontSize: configuration.fontSize,
+        color: fontColor,
+        fontSize: fontSize,
         lineHeight: configuration.lineHeight,
         letterSpacing,
         fontFamily: Platform.select({
@@ -610,6 +594,9 @@ function CenterAlignedHeaderLayout({
 // AudioPlayerHeader
 // ---------------------------------------------------------------------------
 
+import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
+import { mergeHeaderConfiguration } from "../utils/mergeStyles";
+
 export function AudioPlayerHeader({
   configuration,
   data,
@@ -622,7 +609,14 @@ export function AudioPlayerHeader({
   onDone,
   onClear,
 }: AudioPlayerHeaderProps) {
-  const { variant, title, closeButton, actionButtons } = configuration;
+  const modalBlocksStyle = useModalBlocksStyle();
+  const headerBlock = modalBlocksStyle?.header;
+
+  const effectiveConfig = React.useMemo(() => {
+    return mergeHeaderConfiguration(configuration, headerBlock);
+  }, [configuration, headerBlock]);
+
+  const { variant, title, closeButton, actionButtons } = effectiveConfig;
   const { title: titleText } = data;
 
   const container = CONTAINER_SPEC[variant];
@@ -767,45 +761,3 @@ export const VARIANT_SECTION_HEADER: HeaderConfiguration = {
   closeButton: { enabled: false },
   actionButtons: DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION,
 };
-
-export default function App() {
-  return (
-    <View style={styles.demoScreen}>
-      <Text style={styles.demoHeading}>Modal Header Building Block</Text>
-
-      <View style={styles.demoBlock}>
-        <Text style={styles.demoLabel}>Single Line Header</Text>
-        <AudioPlayerHeader
-          configuration={VARIANT_SINGLE_LINE_HEADER}
-          data={{ title: "Playback Speed" }}
-        />
-      </View>
-
-      <View style={styles.demoBlock}>
-        <Text style={styles.demoLabel}>Header With Actions</Text>
-        <AudioPlayerHeader
-          configuration={VARIANT_HEADER_WITH_ACTIONS}
-          data={{ title: "Playback Speed" }}
-        />
-      </View>
-
-      <View style={styles.demoBlock}>
-        <Text style={styles.demoLabel}>
-          Header With Actions — single side action
-        </Text>
-        <AudioPlayerHeader
-          configuration={VARIANT_HEADER_WITH_CANCEL_ONLY}
-          data={{ title: "Playback Speed" }}
-        />
-      </View>
-
-      <View style={styles.demoBlock}>
-        <Text style={styles.demoLabel}>Section Header</Text>
-        <AudioPlayerHeader
-          configuration={VARIANT_SECTION_HEADER}
-          data={{ title: "Next in Queue" }}
-        />
-      </View>
-    </View>
-  );
-}

package/Components/ModalComponent/AudioPlayer/Components/Input.tsx

@@ -37,24 +37,6 @@ const styles = StyleSheet.create({
   underline: {
     alignSelf: "stretch",
   },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 16,
-    gap: 24,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    marginTop: 8,
-  },
 });
 
 // ---------------------------------------------------------------------------

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

@@ -20,6 +20,12 @@ import {
   Text,
   View,
 } from "react-native";
+import {
+  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 +40,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,
-  },
 });
 
 // ---------------------------------------------------------------------------
@@ -104,51 +91,6 @@ export type ItemConfiguration = {
   textLabel2: LabelConfiguration;
 };
 
-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 +153,7 @@ export type AudioPlayerTrackItemProps = {
   onPress?: () => void;
   onLeadingButtonPress?: () => void;
   onTrailingButtonPress?: () => void;
+  renderHandle?: (element: React.ReactElement) => React.ReactElement;
 };
 
 // ---------------------------------------------------------------------------
@@ -326,14 +269,17 @@ function resolveContainerSpec(image: ImageConfiguration): ContainerSpec {
     : CONTAINER_SPEC_DEFAULT;
 }
 
-export function mapMenuItemToNowPlayingData(item: MenuItem): ItemData {
+export function mapMenuItemToNowPlayingData(
+  item: MenuItem,
+  isPaused?: boolean
+): ItemData {
   return {
     imageUri: item.icon,
     textLabel1: item.title,
     textLabel2: item.summary ?? "",
     nowPlayingLabel: "Now Playing",
     trailingButton: "playPause",
-    isSelected: item.isSelected,
+    isSelected: isPaused !== undefined ? !isPaused : item.isSelected,
   };
 }
 
@@ -348,12 +294,20 @@ 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";
+
   return {
     imageUri: item.icon,
     textLabel1: item.title,
     textLabel2: item.summary ?? "",
-    trailingButton: item.trailingButton || ("multiSelect" as ItemButtonAction),
+    trailingButton: showSelectionWidget
+      ? item.trailingButton || ("multiSelect" as ItemButtonAction)
+      : undefined,
     isSelected: item.isSelected,
   };
 }
@@ -506,6 +460,10 @@ function ItemButton({
 }: ItemButtonProps) {
   const layout = BUTTON_LAYOUT_SPEC[action];
 
+  if (!layout) {
+    return null;
+  }
+
   const renderIcon = () => {
     switch (action) {
       case "playPause": {
@@ -680,7 +638,10 @@ function ItemButton({
 
   return (
     <Pressable
-      onPress={onPress}
+      onPress={(e: any) => {
+        e?.stopPropagation?.();
+        onPress?.();
+      }}
       style={({ pressed }) => [
         {
           paddingTop: layout.paddingTop,
@@ -704,6 +665,7 @@ type ItemButtonsProps = {
   onLeadingButtonPress?: () => void;
   onTrailingButtonPress?: () => void;
   isSelected?: boolean;
+  renderHandle?: (element: React.ReactElement) => React.ReactElement;
 };
 
 function ItemButtons({
@@ -714,6 +676,7 @@ function ItemButtons({
   onLeadingButtonPress,
   onTrailingButtonPress,
   isSelected = false,
+  renderHandle,
 }: ItemButtonsProps) {
   if (!leadingButton && !trailingButton) {
     return null;
@@ -733,12 +696,32 @@ function ItemButtons({
         </>
       ) : null}
       {trailingButton ? (
-        <ItemButton
-          action={trailingButton}
-          focused={focusedTrailingButton}
-          onPress={onTrailingButtonPress}
-          isSelected={isSelected}
-        />
+        trailingButton === "drag" ? (
+          renderHandle ? (
+            renderHandle(
+              <ItemButton
+                action={trailingButton}
+                focused={focusedTrailingButton}
+                onPress={onTrailingButtonPress}
+                isSelected={isSelected}
+              />
+            )
+          ) : (
+            <ItemButton
+              action={trailingButton}
+              focused={focusedTrailingButton}
+              onPress={onTrailingButtonPress}
+              isSelected={isSelected}
+            />
+          )
+        ) : (
+          <ItemButton
+            action={trailingButton}
+            focused={focusedTrailingButton}
+            onPress={onTrailingButtonPress}
+            isSelected={isSelected}
+          />
+        )
       ) : null}
     </View>
   );
@@ -757,18 +740,30 @@ 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,
+  } = effectiveConfig;
 
   const container = resolveContainerSpec(image);
-  const showNowPlaying = !!data.nowPlayingLabel;
 
   return (
     <ItemContainer
@@ -807,6 +802,7 @@ export function AudioPlayerTrackItem({
           onLeadingButtonPress={onLeadingButtonPress}
           onTrailingButtonPress={onTrailingButtonPress}
           isSelected={data.isSelected}
+          renderHandle={renderHandle}
         />
       </View>
     </ItemContainer>

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/index.ts

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