@applicaster/zapp-react-native-ui-components 16.0.0-alpha.1334507601 → 16.0.0-alpha.1444784746

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,32 +7,162 @@ 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;
 };
 
 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)
@@ -40,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}
@@ -74,9 +196,10 @@ export function NowPlayingHeaderSection({
       {renderNowPlayingTrack()}
       <AudioPlayerHeader
         configuration={VARIANT_SECTION_HEADER}
-        data={{ title: nextUpTitle }}
+        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/AudioPlayer/utils/__tests__/mergeStyles.test.ts

@@ -1,7 +1,12 @@
 import {
   mergeItemConfiguration,
   mergeButtonConfiguration,
+  mergeHeaderConfiguration,
 } from "../mergeStyles";
+import {
+  VARIANT_SECTION_HEADER,
+  VARIANT_SINGLE_LINE_HEADER,
+} from "../../Components/Header";
 
 const base = {
   background: {
@@ -246,3 +251,106 @@ describe("mergeButtonConfiguration background", () => {
     expect(merged.title.textTransform).toBe("uppercase");
   });
 });
+
+describe("mergeHeaderConfiguration section header (Variant 3)", () => {
+  it("merges section title + Clear action button styles", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SECTION_HEADER, {
+      title: {
+        default: {
+          fontColor: "#ABCDEF",
+          fontSize: 15,
+          lineHeight: 36,
+          fontFamily: "CustomSection",
+          letterSpacing: -0.2,
+          textTransform: "uppercase",
+          alignment: "left",
+        },
+      },
+      actionButtons: {
+        default: {
+          backgroundColor: "rgba(10, 10, 10, 1)",
+          fontColor: "#EEEEEE",
+          fontSize: 12,
+          borderRadius: 20,
+          paddingTop: 8,
+          paddingRight: 12,
+          paddingBottom: 8,
+          paddingLeft: 12,
+        },
+        focused: {
+          backgroundColor: "rgba(20, 20, 20, 1)",
+          fontColor: "#FFDD00",
+        },
+      },
+    });
+
+    expect(merged.title.fontColor).toBe("#ABCDEF");
+    expect(merged.title.fontSize).toBe(15);
+    expect(merged.title.lineHeight).toBe(36);
+    expect(merged.title.iosFontFamily).toBe("CustomSection");
+    expect(merged.title.androidFontFamily).toBe("CustomSection");
+    expect(merged.title.iosLetterSpacing).toBe(-0.2);
+    expect(merged.title.textTransform).toBe("uppercase");
+
+    expect(merged.actionButtons.defaultBackgroundColor).toBe(
+      "rgba(10, 10, 10, 1)"
+    );
+
+    expect(merged.actionButtons.focusedBackgroundColor).toBe(
+      "rgba(20, 20, 20, 1)"
+    );
+
+    expect(merged.actionButtons.fontColor).toBe("#EEEEEE");
+    expect(merged.actionButtons.focusedFontColor).toBe("#FFDD00");
+    expect(merged.actionButtons.fontSize).toBe(12);
+    expect(merged.actionButtons.cornerRadius).toBe(20);
+    expect(merged.actionButtons.paddingTop).toBe(8);
+    expect(merged.actionButtons.paddingLeft).toBe(12);
+  });
+
+  it("uses title.default when only platform font and letter spacing are set", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SECTION_HEADER, {
+      title: {
+        default: {
+          iosFontFamily: "SFProText-Semibold",
+          androidFontFamily: "Roboto-Medium",
+          iosLetterSpacing: -0.4,
+          androidLetterSpacing: 0,
+        },
+      },
+    });
+
+    expect(merged.title.iosFontFamily).toBe("SFProText-Semibold");
+    expect(merged.title.androidFontFamily).toBe("Roboto-Medium");
+    expect(merged.title.iosLetterSpacing).toBe(-0.4);
+    expect(merged.title.androidLetterSpacing).toBe(0);
+    expect(merged.title.fontSize).toBe(VARIANT_SECTION_HEADER.title.fontSize);
+  });
+
+  it("does not change section defaults when block is empty", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SECTION_HEADER, {
+      title: { default: {} },
+      actionButtons: { default: {} },
+    });
+
+    expect(merged.title.fontSize).toBe(VARIANT_SECTION_HEADER.title.fontSize);
+
+    expect(merged.actionButtons.defaultBackgroundColor).toBe(
+      VARIANT_SECTION_HEADER.actionButtons.defaultBackgroundColor
+    );
+  });
+
+  it("leaves single-line header title size untouched when only actionButtons set", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SINGLE_LINE_HEADER, {
+      actionButtons: {
+        default: { backgroundColor: "#123456" },
+      },
+    });
+
+    expect(merged.title.fontSize).toBe(
+      VARIANT_SINGLE_LINE_HEADER.title.fontSize
+    );
+
+    expect(merged.actionButtons.defaultBackgroundColor).toBe("#123456");
+  });
+});

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

@@ -9,6 +9,7 @@ import {
 } from "../Components/Item";
 import {
   TitleConfiguration as HeaderTitleConfiguration,
+  ActionButtonsStyleConfiguration as HeaderActionButtonsStyleConfiguration,
   HeaderConfiguration,
 } from "../Components/Header";
 import {
@@ -210,6 +211,122 @@ function mergeHeaderTitle(
     ...base,
     ...(override.fontColor ? { fontColor: override.fontColor } : {}),
     ...(override.fontSize !== undefined ? { fontSize: override.fontSize } : {}),
+    ...(override.lineHeight !== undefined
+      ? { lineHeight: override.lineHeight }
+      : {}),
+    ...(typeof override.fontFamily === "string"
+      ? {
+          iosFontFamily: override.fontFamily,
+          androidFontFamily: override.fontFamily,
+        }
+      : {}),
+    ...(override.iosFontFamily
+      ? { iosFontFamily: override.iosFontFamily }
+      : {}),
+    ...(override.androidFontFamily
+      ? { androidFontFamily: override.androidFontFamily }
+      : {}),
+    ...(override.letterSpacing !== undefined
+      ? {
+          iosLetterSpacing: override.letterSpacing,
+          androidLetterSpacing: override.letterSpacing,
+        }
+      : {}),
+    ...(override.iosLetterSpacing !== undefined
+      ? { iosLetterSpacing: override.iosLetterSpacing }
+      : {}),
+    ...(override.androidLetterSpacing !== undefined
+      ? { androidLetterSpacing: override.androidLetterSpacing }
+      : {}),
+    ...(override.textTransform
+      ? { textTransform: override.textTransform }
+      : {}),
+    ...(override.alignment ? { alignment: override.alignment } : {}),
+  };
+}
+
+function mergeHeaderActionButtons(
+  base: HeaderActionButtonsStyleConfiguration,
+  defaultOverride?: Record<string, any>,
+  focusedOverride?: Record<string, any>
+): HeaderActionButtonsStyleConfiguration {
+  if (!defaultOverride && !focusedOverride) return base;
+
+  const focusedBackgroundColor =
+    focusedOverride?.backgroundColor ??
+    defaultOverride?.focusBackgroundColor ??
+    defaultOverride?.focusedBackgroundColor;
+
+  const focusedFontColor =
+    focusedOverride?.fontColor ??
+    defaultOverride?.focusFontColor ??
+    defaultOverride?.focusedFontColor;
+
+  return {
+    ...base,
+    ...(defaultOverride?.backgroundColor
+      ? { defaultBackgroundColor: defaultOverride.backgroundColor }
+      : {}),
+    ...(focusedBackgroundColor != null && focusedBackgroundColor !== ""
+      ? { focusedBackgroundColor }
+      : {}),
+    ...(defaultOverride?.fontColor
+      ? { fontColor: defaultOverride.fontColor }
+      : {}),
+    ...(focusedFontColor != null && focusedFontColor !== ""
+      ? { focusedFontColor }
+      : {}),
+    ...(defaultOverride?.fontSize !== undefined
+      ? { fontSize: defaultOverride.fontSize }
+      : {}),
+    ...(defaultOverride?.lineHeight !== undefined
+      ? { lineHeight: defaultOverride.lineHeight }
+      : {}),
+    ...(typeof defaultOverride?.fontFamily === "string"
+      ? {
+          iosFontFamily: defaultOverride.fontFamily,
+          androidFontFamily: defaultOverride.fontFamily,
+        }
+      : {}),
+    ...(defaultOverride?.iosFontFamily
+      ? { iosFontFamily: defaultOverride.iosFontFamily }
+      : {}),
+    ...(defaultOverride?.androidFontFamily
+      ? { androidFontFamily: defaultOverride.androidFontFamily }
+      : {}),
+    ...(defaultOverride?.letterSpacing !== undefined
+      ? {
+          iosLetterSpacing: defaultOverride.letterSpacing,
+          androidLetterSpacing: defaultOverride.letterSpacing,
+        }
+      : {}),
+    ...(defaultOverride?.iosLetterSpacing !== undefined
+      ? { iosLetterSpacing: defaultOverride.iosLetterSpacing }
+      : {}),
+    ...(defaultOverride?.androidLetterSpacing !== undefined
+      ? { androidLetterSpacing: defaultOverride.androidLetterSpacing }
+      : {}),
+    ...(defaultOverride?.textTransform
+      ? { textTransform: defaultOverride.textTransform }
+      : {}),
+    ...(defaultOverride?.borderRadius !== undefined
+      ? { cornerRadius: defaultOverride.borderRadius }
+      : {}),
+    ...(defaultOverride?.cornerRadius !== undefined
+      ? { cornerRadius: defaultOverride.cornerRadius }
+      : {}),
+    ...(defaultOverride?.paddingTop !== undefined
+      ? { paddingTop: defaultOverride.paddingTop }
+      : {}),
+    ...(defaultOverride?.paddingRight !== undefined
+      ? { paddingRight: defaultOverride.paddingRight }
+      : {}),
+    ...(defaultOverride?.paddingBottom !== undefined
+      ? { paddingBottom: defaultOverride.paddingBottom }
+      : {}),
+    ...(defaultOverride?.paddingLeft !== undefined
+      ? { paddingLeft: defaultOverride.paddingLeft }
+      : {}),
   };
 }
 
@@ -221,9 +338,39 @@ export function mergeHeaderConfiguration(
 
   const bgOverride = headerBlock.container?.default?.backgroundColor;
 
+  const actionButtonsDefault =
+    headerBlock.actionButtons?.default || headerBlock.actionButtons;
+
+  const actionButtonsFocused =
+    headerBlock.actionButtons?.focused || headerBlock.actionButtons?.focus;
+
+  // Parser shape is title.default.*; hydrate() returns a flat title object.
+  const titleDefault = headerBlock.title?.default;
+
+  const titleOverride =
+    titleDefault &&
+    (titleDefault.fontColor !== undefined ||
+      titleDefault.fontSize !== undefined ||
+      titleDefault.lineHeight !== undefined ||
+      titleDefault.fontFamily ||
+      titleDefault.iosFontFamily ||
+      titleDefault.androidFontFamily ||
+      titleDefault.letterSpacing !== undefined ||
+      titleDefault.iosLetterSpacing !== undefined ||
+      titleDefault.androidLetterSpacing !== undefined ||
+      titleDefault.textTransform ||
+      titleDefault.alignment)
+      ? titleDefault
+      : headerBlock.title;
+
   return {
     ...base,
-    title: mergeHeaderTitle(base.title, headerBlock.title?.default),
+    title: mergeHeaderTitle(base.title, titleOverride),
+    actionButtons: mergeHeaderActionButtons(
+      base.actionButtons,
+      actionButtonsDefault,
+      actionButtonsFocused
+    ),
     ...(bgOverride ? { backgroundColor: bgOverride } : {}),
   };
 }