@applicaster/zapp-react-native-ui-components 16.0.0-alpha.1593888345 → 16.0.0-alpha.1701179921

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

@@ -12,14 +12,8 @@
  */
 
 import React from "react";
-import {
-  Image,
-  Platform,
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import {
   MenuItem,
   SelectionBehavior,
@@ -60,6 +54,8 @@ export type BackgroundConfiguration = {
   paddingRight?: number;
   paddingBottom?: number;
   paddingLeft?: number;
+  highlightInsetLeft?: number;
+  highlightInsetRight?: number;
 };
 
 export type ImageConfiguration = {
@@ -209,9 +205,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,
 };
@@ -291,13 +287,14 @@ function resolveContainerSpec(image: ImageConfiguration): ContainerSpec {
 
 export function mapMenuItemToNowPlayingData(
   item: MenuItem,
-  isPaused?: boolean
+  isPaused?: boolean,
+  nowPlayingLabel = "Now Playing"
 ): ItemData {
   return {
     imageUri: item.icon,
     textLabel1: item.title,
     textLabel2: item.summary ?? "",
-    nowPlayingLabel: "Now Playing",
+    nowPlayingLabel,
     trailingButton: "playPause",
     isSelected: isPaused !== undefined ? !isPaused : item.isSelected,
   };
@@ -355,21 +352,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: background.paddingTop ?? container.paddingTop,
-        paddingRight: background.paddingRight ?? container.paddingRight,
-        paddingBottom: background.paddingBottom ?? container.paddingBottom,
-        paddingLeft: background.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>
   );
 }
@@ -402,6 +408,10 @@ type ItemLabelProps = {
 };
 
 function ItemLabel({ text, configuration, focused = false }: ItemLabelProps) {
+  if (!text) {
+    return null;
+  }
+
   const color =
     focused && configuration.focusedFontColor
       ? configuration.focusedFontColor
@@ -706,18 +716,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={(e: any) => {
         e?.stopPropagation?.();
-        onPress?.();
+        onPress();
       }}
       style={({ pressed }) => [
+        buttonPadding,
         {
-          paddingTop: layout.paddingTop,
-          paddingRight: layout.paddingRight,
-          paddingBottom: layout.paddingBottom,
-          paddingLeft: layout.paddingLeft,
           opacity: pressed || focused ? 0.7 : 1,
         },
       ]}
@@ -849,6 +872,10 @@ export function AudioPlayerTrackItem({
 
   const container = resolveContainerSpec(image);
 
+  const handleTrailingButtonPress =
+    onTrailingButtonPress ??
+    (data.trailingButton === "multiSelect" ? onPress : undefined);
+
   return (
     <ItemContainer
       image={image}
@@ -861,22 +888,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}
@@ -884,7 +917,7 @@ export function AudioPlayerTrackItem({
           focusedLeadingButton={focusedLeadingButton}
           focusedTrailingButton={focusedTrailingButton}
           onLeadingButtonPress={onLeadingButtonPress}
-          onTrailingButtonPress={onTrailingButtonPress}
+          onTrailingButtonPress={handleTrailingButtonPress}
           isSelected={data.isSelected}
           renderHandle={renderHandle}
           checkboxAssets={checkboxAssets}
@@ -905,6 +938,10 @@ export const VARIANT_NOW_PLAYING: ItemConfiguration = {
     defaultColor: "transparent",
     focusedColor: "transparent",
     cornerRadius: 0,
+    paddingTop: 8,
+    paddingRight: 20,
+    paddingBottom: 8,
+    paddingLeft: 20,
   },
   image: {
     width: 72,
@@ -925,6 +962,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,
@@ -945,6 +988,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,

package/Components/ModalComponent/AudioPlayer/Components/NowPlayingHeaderSection.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { StyleSheet, View } from "react-native";
+import React, { useEffect, useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
 import {
   AudioPlayerTrackItem,
   VARIANT_NOW_PLAYING,
@@ -7,8 +7,11 @@ 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: {
@@ -17,27 +20,149 @@ const styles = StyleSheet.create({
     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)
@@ -45,34 +170,24 @@ 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 (
-      <View>
-        <AudioPlayerTrackItem
-          configuration={VARIANT_NOW_PLAYING}
-          data={data}
-          onTrailingButtonPress={handlePlayPause}
-        />
-        <View style={styles.divider} />
-      </View>
+      <AudioPlayerTrackItem
+        configuration={VARIANT_NOW_PLAYING}
+        data={data}
+        onTrailingButtonPress={handlePlayPause}
+      />
     );
   };
 
@@ -81,9 +196,10 @@ export function NowPlayingHeaderSection({
       {renderNowPlayingTrack()}
       <AudioPlayerHeader
         configuration={VARIANT_SECTION_HEADER}
-        data={{ title: "Next Up" }}
+        data={{ title: nextUpTitle, clearLabel }}
         onClear={onClear}
       />
+      {isEmpty ? <Text style={styles.emptyMessage}>{emptyMessage}</Text> : null}
     </View>
   );
 }

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

@@ -0,0 +1,113 @@
+import React from "react";
+import { Pressable } from "react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
+import {
+  AudioPlayerTrackItem,
+  VARIANT_PLAYLIST_ITEM,
+  mapMenuItemToNowPlayingData,
+} from "../Item";
+
+const playlistItemData = {
+  textLabel1: "Queue",
+  textLabel2: "",
+  trailingButton: "multiSelect" as const,
+  isSelected: false,
+};
+
+describe("AudioPlayerTrackItem multiSelect checkbox", () => {
+  it("invokes onPress when the checkbox is pressed even if onTrailingButtonPress is omitted", () => {
+    const onPress = jest.fn();
+
+    render(
+      <AudioPlayerTrackItem
+        configuration={VARIANT_PLAYLIST_ITEM}
+        data={playlistItemData}
+        onPress={onPress}
+      />
+    );
+
+    const pressables = screen.UNSAFE_getAllByType(Pressable);
+    fireEvent.press(pressables[pressables.length - 1]);
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it("invokes onTrailingButtonPress instead of onPress when a dedicated trailing handler is provided", () => {
+    const onPress = jest.fn();
+    const onTrailingButtonPress = jest.fn();
+
+    render(
+      <AudioPlayerTrackItem
+        configuration={VARIANT_PLAYLIST_ITEM}
+        data={playlistItemData}
+        onPress={onPress}
+        onTrailingButtonPress={onTrailingButtonPress}
+      />
+    );
+
+    const pressables = screen.UNSAFE_getAllByType(Pressable);
+    fireEvent.press(pressables[pressables.length - 1]);
+
+    expect(onTrailingButtonPress).toHaveBeenCalledTimes(1);
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it("invokes onPress when the row is pressed", () => {
+    const onPress = jest.fn();
+
+    render(
+      <AudioPlayerTrackItem
+        configuration={VARIANT_PLAYLIST_ITEM}
+        data={playlistItemData}
+        onPress={onPress}
+      />
+    );
+
+    fireEvent.press(screen.UNSAFE_getAllByType(Pressable)[0]);
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders only textLabel1 Text element when textLabel2 is missing or empty", () => {
+    const { UNSAFE_getAllByType, queryByText } = render(
+      <AudioPlayerTrackItem
+        configuration={VARIANT_PLAYLIST_ITEM}
+        data={{
+          textLabel1: "Only Title",
+          textLabel2: "",
+        }}
+      />
+    );
+
+    const { Text } = require("react-native");
+    const textNodes = UNSAFE_getAllByType(Text);
+    expect(textNodes).toHaveLength(1);
+    expect(queryByText("Only Title")).toBeTruthy();
+  });
+});
+
+describe("mapMenuItemToNowPlayingData", () => {
+  const item = {
+    id: "item_1",
+    title: "Track Title",
+    summary: "Artist Name",
+    icon: "https://example.com/cover.png",
+  };
+
+  it("uses default 'Now Playing' label when omitted", () => {
+    const data = mapMenuItemToNowPlayingData(item as any);
+    expect(data.nowPlayingLabel).toBe("Now Playing");
+    expect(data.textLabel1).toBe("Track Title");
+    expect(data.textLabel2).toBe("Artist Name");
+  });
+
+  it("uses custom nowPlayingLabel when provided", () => {
+    const data = mapMenuItemToNowPlayingData(
+      item as any,
+      false,
+      "En cours de lecture"
+    );
+
+    expect(data.nowPlayingLabel).toBe("En cours de lecture");
+  });
+});

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

@@ -1,5 +1,3 @@
-export { AudioPlayerAction } from "./Action";
-
 export { AudioPlayerButton, VARIANT_WITH_ICON } from "./Button";
 
 export { AudioPlayerHeader } from "./Header";