@applicaster/zapp-react-native-ui-components 16.0.0-rc.6 → 16.0.0-rc.61

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

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

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

@@ -0,0 +1,199 @@
+import {
+  BackgroundConfiguration as ItemBackgroundConfiguration,
+  ImageConfiguration as ItemImageConfiguration,
+  LabelConfiguration as ItemLabelConfiguration,
+  NowPlayingAssetConfiguration as ItemNowPlayingAssetConfiguration,
+  ItemConfiguration,
+} from "../Components/Item";
+import {
+  TitleConfiguration as HeaderTitleConfiguration,
+  HeaderConfiguration,
+} from "../Components/Header";
+import {
+  BackgroundConfiguration as ButtonBackgroundConfiguration,
+  TitleConfiguration as ButtonTitleConfiguration,
+  ButtonConfiguration,
+} from "../Components/Button";
+
+// ---------------------------------------------------------------------------
+// Item Merging Helpers
+// ---------------------------------------------------------------------------
+
+function mergeItemBackground(
+  base: ItemBackgroundConfiguration,
+  override?: Record<string, any>
+): ItemBackgroundConfiguration {
+  if (!override) return base;
+
+  return {
+    ...base,
+    ...(override.backgroundColor
+      ? { defaultColor: override.backgroundColor }
+      : {}),
+    ...(override.focusColor || override.backgroundColor
+      ? { focusedColor: override.focusColor || override.backgroundColor }
+      : {}),
+    ...(override.borderRadius !== undefined
+      ? { cornerRadius: override.borderRadius }
+      : {}),
+  };
+}
+
+function mergeItemImage(
+  base: ItemImageConfiguration,
+  override?: Record<string, any>
+): ItemImageConfiguration {
+  if (!override) return base;
+
+  return {
+    ...base,
+    ...(override.width !== undefined ? { width: override.width } : {}),
+    ...(override.height !== undefined ? { height: override.height } : {}),
+    ...(override.borderRadius !== undefined
+      ? { cornerRadius: override.borderRadius }
+      : {}),
+    ...(override.borderWidth !== undefined
+      ? { borderWidth: override.borderWidth }
+      : {}),
+    ...(override.borderColor ? { borderColor: override.borderColor } : {}),
+  };
+}
+
+function mergeItemLabel(
+  base: ItemLabelConfiguration,
+  override?: Record<string, any>
+): ItemLabelConfiguration {
+  if (!override) return base;
+
+  return {
+    ...base,
+    ...(override.fontColor ? { fontColor: override.fontColor } : {}),
+    ...(override.fontSize !== undefined ? { fontSize: override.fontSize } : {}),
+  };
+}
+
+function mergeItemNowPlayingAsset(
+  base: ItemNowPlayingAssetConfiguration,
+  override?: Record<string, any>
+): ItemNowPlayingAssetConfiguration {
+  if (!override) return base;
+
+  return {
+    ...base,
+    ...(override.asset ? { asset: override.asset } : {}),
+  };
+}
+
+export function mergeItemConfiguration(
+  base: ItemConfiguration,
+  itemBlock?: Record<string, any>
+): ItemConfiguration {
+  if (!itemBlock) return base;
+
+  const bg = itemBlock.background?.default || itemBlock.background;
+  const img = itemBlock.image?.default || itemBlock.image;
+  const label1 = itemBlock.textLabel1?.default || itemBlock.textLabel1;
+  const label2 = itemBlock.textLabel2?.default || itemBlock.textLabel2;
+
+  const npLabel =
+    itemBlock.nowPlayingLabel?.default || itemBlock.nowPlayingLabel;
+
+  const npAsset =
+    itemBlock.nowPlayingAsset?.default || itemBlock.nowPlayingAsset;
+
+  return {
+    ...base,
+    background: mergeItemBackground(base.background, bg),
+    image: mergeItemImage(base.image, img),
+    textLabel1: mergeItemLabel(base.textLabel1, label1),
+    textLabel2: mergeItemLabel(base.textLabel2, label2),
+    nowPlayingLabel: mergeItemLabel(base.nowPlayingLabel, npLabel),
+    nowPlayingAsset: mergeItemNowPlayingAsset(base.nowPlayingAsset, npAsset),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Header Merging Helpers
+// ---------------------------------------------------------------------------
+
+function mergeHeaderTitle(
+  base: HeaderTitleConfiguration,
+  override?: Record<string, any>
+): HeaderTitleConfiguration {
+  if (!override) return base;
+
+  return {
+    ...base,
+    ...(override.fontColor ? { fontColor: override.fontColor } : {}),
+    ...(override.fontSize !== undefined ? { fontSize: override.fontSize } : {}),
+  };
+}
+
+export function mergeHeaderConfiguration(
+  base: HeaderConfiguration,
+  headerBlock?: Record<string, any>
+): HeaderConfiguration & { backgroundColor?: string } {
+  if (!headerBlock) return base;
+
+  const bgOverride = headerBlock.container?.default?.backgroundColor;
+
+  return {
+    ...base,
+    title: mergeHeaderTitle(base.title, headerBlock.title?.default),
+    ...(bgOverride ? { backgroundColor: bgOverride } : {}),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Button Merging Helpers
+// ---------------------------------------------------------------------------
+
+function mergeButtonBackground(
+  base: ButtonBackgroundConfiguration,
+  override?: Record<string, any>
+): ButtonBackgroundConfiguration {
+  if (!override) return base;
+
+  return {
+    ...base,
+    ...(override.backgroundColor
+      ? { defaultColor: override.backgroundColor }
+      : {}),
+    ...(override.borderRadius !== undefined
+      ? { cornerRadius: override.borderRadius }
+      : {}),
+  };
+}
+
+function mergeButtonTitle(
+  base: ButtonTitleConfiguration,
+  override?: Record<string, any>
+): ButtonTitleConfiguration {
+  if (!override) return base;
+
+  return {
+    ...base,
+    ...(override.fontColor ? { fontColor: override.fontColor } : {}),
+    ...(override.fontSize !== undefined ? { fontSize: override.fontSize } : {}),
+  };
+}
+
+export function mergeButtonConfiguration(
+  base: ButtonConfiguration,
+  buttonBlock?: Record<string, any>,
+  actionBlock?: Record<string, any>
+): ButtonConfiguration {
+  if (!buttonBlock && !actionBlock) return base;
+
+  const bgOverride =
+    buttonBlock?.background?.default || actionBlock?.background?.default;
+
+  const titleOverride =
+    buttonBlock?.title?.default || actionBlock?.title?.default;
+
+  return {
+    ...base,
+    background: mergeButtonBackground(base.background, bgOverride),
+    title: mergeButtonTitle(base.title, titleOverride),
+  };
+}

package/Components/ModalComponent/BottomSheetDragArea.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { PanGestureHandler } from "react-native-gesture-handler";
+import { View } from "react-native";
+import { useBottomSheet } from "@applicaster/zapp-react-native-utils/bottomSheet";
+
+/**
+ * Turns its children into a drag zone for the enclosing DraggableBottomSheet:
+ * dragging here moves/dismisses the sheet (used for the modal header bar).
+ * Outside a sheet (no context) it renders children unchanged.
+ */
+export const BottomSheetDragArea = ({
+  children,
+}: {
+  children: React.ReactElement;
+}) => {
+  const sheet = useBottomSheet();
+
+  // Outside a sheet (no context) render children unchanged.
+  if (!sheet) return children;
+
+  return (
+    <PanGestureHandler
+      simultaneousHandlers={[sheet.masterDrawerRef]}
+      shouldCancelWhenOutside={false}
+      onGestureEvent={sheet.onDragGestureEvent}
+      onHandlerStateChange={sheet.onDragStateChange}
+    >
+      {/* Old-API PanGestureHandler needs a host-component child; children may
+          be a function component (e.g. ModalHeader), so wrap in a View. */}
+      <View>{children}</View>
+    </PanGestureHandler>
+  );
+};