@applicaster/zapp-react-native-ui-components 16.0.0-rc.11 → 16.0.0-rc.110

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

@@ -0,0 +1,205 @@
+import React, { useEffect, useState } from "react";
+import { StyleSheet, Text, 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 { 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 [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 (!currentEntry) {
+      return null;
+    }
+
+    const imageGroup = Array.isArray(currentEntry.media_group)
+      ? currentEntry.media_group.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(currentEntry.id ?? "now_playing"),
+      title: (currentEntry.title as string) || String(currentEntry.id),
+      summary: (currentEntry.summary as string) ?? "",
+      icon: firstImage,
+    };
+
+    const data = mapMenuItemToNowPlayingData(
+      nowPlayingItem,
+      isPaused,
+      nowPlayingTitle
+    );
+
+    return (
+      <AudioPlayerTrackItem
+        configuration={VARIANT_NOW_PLAYING}
+        data={data}
+        onTrailingButtonPress={handlePlayPause}
+      />
+    );
+  };
+
+  return (
+    <View>
+      {renderNowPlayingTrack()}
+      <AudioPlayerHeader
+        configuration={VARIANT_SECTION_HEADER}
+        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,164 @@
+import React from "react";
+import { Image, Pressable } from "react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
+import { ModalBlocksStyleContext } from "../../../ModalBlocksStyleContext";
+import {
+  AudioPlayerTrackItem,
+  VARIANT_NOW_PLAYING,
+  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 the plugin play asset while paused and the pause asset while playing", () => {
+    const menuItem = {
+      id: "item_1",
+      title: "Track Title",
+      summary: "Artist Name",
+    };
+
+    const style = {
+      nowPlayingItem: {
+        actionButtons: {
+          default: {
+            playAsset: "https://example.com/play.png",
+            pauseAsset: "https://example.com/pause.png",
+          },
+        },
+      },
+    };
+
+    const { UNSAFE_getAllByType, rerender } = render(
+      <ModalBlocksStyleContext.Provider value={style}>
+        <AudioPlayerTrackItem
+          configuration={VARIANT_NOW_PLAYING}
+          data={mapMenuItemToNowPlayingData(menuItem as any, true)}
+        />
+      </ModalBlocksStyleContext.Provider>
+    );
+
+    expect(
+      UNSAFE_getAllByType(Image).some(
+        (node) => node.props.source?.uri === "https://example.com/play.png"
+      )
+    ).toBe(true);
+
+    rerender(
+      <ModalBlocksStyleContext.Provider value={style}>
+        <AudioPlayerTrackItem
+          configuration={VARIANT_NOW_PLAYING}
+          data={mapMenuItemToNowPlayingData(menuItem as any, false)}
+        />
+      </ModalBlocksStyleContext.Provider>
+    );
+
+    expect(
+      UNSAFE_getAllByType(Image).some(
+        (node) => node.props.source?.uri === "https://example.com/pause.png"
+      )
+    ).toBe(true);
+  });
+
+  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

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