@applicaster/zapp-react-native-ui-components 16.0.0-rc.121 → 16.0.0-rc.123

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -96,6 +96,14 @@ export const ActionButton = React.memo(function ActionButtonComponent(
   }, [item?.id, setActionState, actionContext]);
 
   if (actionDisabled || !actionContext) return null;
+
+  if (
+    actionState?.visibleInCells &&
+    !actionState.visibleInCells.includes(cellUUID)
+  ) {
+    return null;
+  }
+
   const AssetComponent = actionState?.asset;
 
   // Default state is not yet ready
@@ -109,6 +117,11 @@ export const ActionButton = React.memo(function ActionButtonComponent(
       accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
       accessibilityHint={props?.accessibilityHint}
       accessibilityRole="button"
+      accessibilityState={
+        typeof actionState.checked === "boolean"
+          ? { checked: actionState.checked }
+          : undefined
+      }
       accessible={!!(props?.testID || props?.accessibilityLabel)}
       style={props?.style}
     >

package/Components/MasterCell/DefaultComponents/PressableView.tsx

@@ -11,6 +11,7 @@ type Props = {
   accessibilityHint?: string;
   onPress?: () => void;
   testOnly_pressed?: boolean;
+  checked?: boolean;
 };
 
 export function PressableView({
@@ -22,11 +23,13 @@ export function PressableView({
   pressedStyle,
   onPress,
   testOnly_pressed = false,
+  checked,
 }: Props) {
   return (
     <Pressable
       testOnly_pressed={testOnly_pressed}
       onPress={onPress}
+      accessibilityState={checked === undefined ? undefined : { checked }}
       testID={testID}
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}

package/Components/MasterCell/DefaultComponents/__tests__/ActionButton.test.tsx

@@ -0,0 +1,288 @@
+import React from "react";
+import { act, fireEvent, render } from "@testing-library/react-native";
+
+import { ActionButton } from "../ActionButton";
+import { ActionButton as MobileActionButton } from "../mobile/MobileActionButtons/ActionButton";
+import { Text } from "react-native";
+
+type EntryStateListener = (state: CellActionEntryState) => void;
+
+const PLUGIN_ASSETS = {
+  mute: ["plugin_mute_1", "plugin_mute_2"],
+  unmute: ["plugin_unmute_1", "plugin_unmute_2"],
+};
+
+// Fake of the mute_unmute_action context, following its entry state contract.
+type FakeState = {
+  available: boolean;
+  muted: boolean;
+  visibleInCells?: string[];
+};
+
+const createFakeContext = (initial: FakeState) => {
+  let current = initial;
+  const listeners = new Set<EntryStateListener>();
+
+  const toEntryState = ({
+    available,
+    muted,
+    visibleInCells,
+  }: FakeState): CellActionEntryState => ({
+    state: muted ? 1 : 0,
+    asset: available
+      ? muted
+        ? PLUGIN_ASSETS.unmute
+        : PLUGIN_ASSETS.mute
+      : undefined,
+    label: muted ? "Unmute" : "Mute",
+    mobileButtonAssets: muted ? PLUGIN_ASSETS.unmute : PLUGIN_ASSETS.mute,
+    visibleInCells,
+  });
+
+  const emit = (next: FakeState) => {
+    current = next;
+    listeners.forEach((listener) => listener(toEntryState(current)));
+  };
+
+  const context = {
+    initialEntryState: jest.fn(() => toEntryState(current)),
+    addListener: jest.fn((_id: string, listener: EntryStateListener) => {
+      listeners.add(listener);
+
+      return () => listeners.delete(listener);
+    }),
+    invokeAction: jest.fn((_item, options) => {
+      if (!current.available) return;
+
+      current = { ...current, muted: !current.muted };
+      options?.updateState?.(toEntryState(current));
+      listeners.forEach((listener) => listener(toEntryState(current)));
+    }),
+  };
+
+  return { context, emit, listeners };
+};
+
+let mockContext: ReturnType<typeof createFakeContext>["context"];
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(() => mockContext),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext",
+  () => ({ useUIComponentContext: jest.fn(() => undefined) })
+);
+
+jest.mock("../Image", () => {
+  const { Text: MockText } = require("react-native");
+
+  return {
+    __esModule: true,
+    default: ({ uri }) => <MockText testID="asset">{uri}</MockText>,
+  };
+});
+
+const item = { id: "entry-1" } as unknown as ZappEntry;
+
+it("keeps the standalone button visible and limits actions to the playing cell instance", () => {
+  const fake = createFakeContext({
+    available: true,
+    muted: true,
+    visibleInCells: [],
+  });
+
+  mockContext = fake.context;
+
+  const Label = ({
+    children,
+    testID,
+  }: {
+    children?: React.ReactNode;
+    testID?: string;
+    mobileActionRole?: string;
+  }) => <Text testID={testID}>{children}</Text>;
+
+  const { getByTestId, queryByTestId } = render(
+    <>
+      {["first", "second"].map((cellUUID) => (
+        <ActionButton
+          key={cellUUID}
+          item={item}
+          action={{ identifier: "mute_unmute_action" }}
+          cellUUID={cellUUID}
+          testID={`cell-${cellUUID}`}
+          style={{}}
+        />
+      ))}
+      <MobileActionButton
+        action={{ identifier: "mute_unmute_action" }}
+        entry={item}
+        testID="standalone"
+        style={{}}
+        focusedStyles={{}}
+      >
+        <Label mobileActionRole="label">Toggle sound</Label>
+      </MobileActionButton>
+    </>
+  );
+
+  expect(queryByTestId("cell-first")).toBeNull();
+  expect(queryByTestId("cell-second")).toBeNull();
+  expect(getByTestId("standalone")).toBeTruthy();
+  fireEvent.press(getByTestId("standalone"));
+  expect(fake.context.invokeAction).toHaveBeenCalledTimes(1);
+
+  act(() =>
+    fake.emit({ available: true, muted: false, visibleInCells: ["first"] })
+  );
+
+  expect(getByTestId("cell-first")).toBeTruthy();
+  expect(queryByTestId("cell-second")).toBeNull();
+
+  act(() =>
+    fake.emit({ available: true, muted: false, visibleInCells: ["second"] })
+  );
+
+  expect(queryByTestId("cell-first")).toBeNull();
+  expect(getByTestId("cell-second")).toBeTruthy();
+
+  act(() => fake.emit({ available: true, muted: false, visibleInCells: [] }));
+
+  expect(queryByTestId("cell-first")).toBeNull();
+  expect(queryByTestId("cell-second")).toBeNull();
+  expect(getByTestId("standalone")).toBeTruthy();
+});
+
+const renderButton = (
+  flavour: "flavour_1" | "flavour_2",
+  asset?: React.ComponentProps<typeof ActionButton>["asset"]
+) =>
+  render(
+    <ActionButton
+      item={item}
+      flavour={flavour}
+      action={{ identifier: "mute_unmute_action" }}
+      asset={asset}
+      style={{}}
+      testID="mute-button"
+    />
+  );
+
+const cellAsset = {
+  props: {},
+  src: { active: "cell_selected", inactive: "cell_unselected" },
+  style: {},
+  type: "Image",
+} as const;
+
+describe.each([
+  ["flavour_1", 0],
+  ["flavour_2", 1],
+] as const)("mute_unmute_action cell action (%s)", (flavour, index) => {
+  let fake: ReturnType<typeof createFakeContext>;
+
+  const setup = (state: { available: boolean; muted: boolean }, asset?) => {
+    fake = createFakeContext(state);
+    mockContext = fake.context;
+
+    return renderButton(flavour, asset);
+  };
+
+  it("renders nothing while the preview has not started", () => {
+    const { queryByTestId } = setup({ available: false, muted: false });
+
+    expect(queryByTestId("mute-button")).toBeNull();
+    expect(queryByTestId("asset")).toBeNull();
+  });
+
+  it("shows the Mute icon while the preview plays with sound on", () => {
+    const { getByTestId } = setup({ available: true, muted: false });
+
+    expect(getByTestId("asset").props.children).toBe(PLUGIN_ASSETS.mute[index]);
+  });
+
+  it("shows the Unmute icon while the preview plays muted", () => {
+    const { getByTestId } = setup({ available: true, muted: true });
+
+    expect(getByTestId("asset").props.children).toBe(
+      PLUGIN_ASSETS.unmute[index]
+    );
+  });
+
+  it("toggles the sound and updates the icon on tap", () => {
+    const { getByTestId } = setup({ available: true, muted: false });
+
+    fireEvent.press(getByTestId("mute-button"));
+
+    expect(fake.context.invokeAction).toHaveBeenCalledTimes(1);
+
+    expect(getByTestId("asset").props.children).toBe(
+      PLUGIN_ASSETS.unmute[index]
+    );
+
+    fireEvent.press(getByTestId("mute-button"));
+
+    expect(getByTestId("asset").props.children).toBe(PLUGIN_ASSETS.mute[index]);
+  });
+
+  it("follows state emitted through addListener", () => {
+    const { getByTestId, queryByTestId } = setup({
+      available: false,
+      muted: false,
+    });
+
+    act(() => fake.emit({ available: true, muted: false }));
+
+    expect(getByTestId("asset").props.children).toBe(PLUGIN_ASSETS.mute[index]);
+
+    act(() => fake.emit({ available: true, muted: true }));
+
+    expect(getByTestId("asset").props.children).toBe(
+      PLUGIN_ASSETS.unmute[index]
+    );
+
+    expect(queryByTestId("mute-button")).not.toBeNull();
+  });
+
+  it("hides again when the preview stops or another cell starts", () => {
+    const { queryByTestId } = setup({ available: true, muted: false });
+
+    expect(queryByTestId("mute-button")).not.toBeNull();
+
+    act(() => fake.emit({ available: false, muted: false }));
+
+    expect(queryByTestId("mute-button")).toBeNull();
+  });
+
+  it("unsubscribes from the context on unmount", () => {
+    const { unmount } = setup({ available: true, muted: false });
+
+    expect(fake.listeners.size).toBe(1);
+
+    unmount();
+
+    expect(fake.listeners.size).toBe(0);
+  });
+
+  it("prefers the cell's selected icon when muted (state 1)", () => {
+    const { getByTestId } = setup({ available: true, muted: true }, cellAsset);
+
+    expect(getByTestId("asset").props.children).toBe("cell_selected");
+  });
+
+  it("prefers the cell's unselected icon when sound is on (state 0)", () => {
+    const { getByTestId } = setup({ available: true, muted: false }, cellAsset);
+
+    expect(getByTestId("asset").props.children).toBe("cell_unselected");
+  });
+
+  it("uses the plugin asset when the cell has no icons", () => {
+    const { getByTestId } = setup({ available: true, muted: false }, {
+      ...cellAsset,
+      src: { active: undefined, inactive: undefined },
+    } as any);
+
+    expect(getByTestId("asset").props.children).toBe(PLUGIN_ASSETS.mute[index]);
+  });
+});

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/ActionButton.tsx

@@ -169,6 +169,7 @@ export const ActionButton = ({
           style={[style, props.alignment]}
           pressedStyle={focusedStyles}
           onPress={renderProps.onPress}
+          checked={renderProps.actionState?.checked}
           accessibilityLabel={props.accessibilityLabel || `${entry?.id}`}
           accessibilityHint={props.accessibilityHint}
         >

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -273,7 +273,10 @@ const PlayerContainerComponent = (props: Props) => {
   const playEntry = (entry: ZappEntry) => navigator.replaceTop(entry, { mode });
 
   const onPlayNextPerformNextVideoPlay = React.useCallback(() => {
-    if (!playNextOverlayState.entry) {
+    // The overlay's entry, or the player's when the overlay is not showing yet (X-Ray player.next)
+    const nextEntry = playNextOverlayState?.entry ?? player?.getPlayNextEntry();
+
+    if (!nextEntry) {
       log_warning(
         "onPlayNextPerformNextVideoPlay: playNextOverlayState.entry is not defined"
       );
@@ -282,16 +285,30 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     log_debug(
-      `onPlayNextPerformNextVideoPlay: delay completed, replaceTop to item: ${playNextOverlayState.entry.title}, id: ${playNextOverlayState.entry.id}, outgoing item id: ${item?.id}`
+      `onPlayNextPerformNextVideoPlay: delay completed, replaceTop to item: ${nextEntry.title}, id: ${nextEntry.id}, outgoing item id: ${item?.id}`
     );
 
-    playNextOverlayState.hidePlayNext();
+    (
+      playNextOverlayState?.hidePlayNext ??
+      player?.getOverlayObservable()?.hidePlayNext
+    )?.();
 
     playerEvent(PLAYER_EVENTS.PlayNextTriggered, { id: item?.id });
 
     setIsLoadingNextVideo(true);
-    playEntry(playNextOverlayState.entry);
-  }, [playNextOverlayState, item?.id]);
+    playEntry(nextEntry);
+  }, [playNextOverlayState, item?.id, player]);
+
+  // Lets the X-Ray player.next tool run the same Play Next path as the overlay.
+  useEffect(() => {
+    if (!player) return;
+
+    player.playNextHandler = onPlayNextPerformNextVideoPlay;
+
+    return () => {
+      player.playNextHandler = null;
+    };
+  }, [player, onPlayNextPerformNextVideoPlay]);
 
   const playNextData: Nullable<PlayNextData> = React.useMemo(() => {
     if (!playNextOverlayState) {

package/Components/PlayerContainer/__tests__/PlayerContainer.test.tsx

@@ -127,6 +127,8 @@ jest.mock(
       seekTo: jest.fn(),
       getPluginConfiguration: jest.fn(() => ({})),
       getOverlayObservable: jest.fn(() => ({ getPlayNextEntry: () => null })),
+      getPlayNextEntry: jest.fn(() => null),
+      playNextHandler: null,
     };
 
     return {
@@ -335,3 +337,52 @@ describe("PlayerContainer hardware back handling", () => {
     expect(mockNavigator.closeVideoModal).not.toHaveBeenCalled();
   });
 });
+
+describe("PlayerContainer Play Next action for X-Ray player.next", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockIsTV.mockReturnValue(false);
+    mockPlayer.getPluginConfiguration.mockReturnValue({});
+    mockPlayerManager.getPluginConfiguration.mockReturnValue({});
+    mockPlayerManager.on.mockReturnThis();
+    mockPlayerManager.removeHandler.mockReturnThis();
+  });
+
+  it("sets its Play Next action on the player and clears it on unmount", () => {
+    const { unmount } = renderPlayerContainer();
+
+    expect(mockPlayer.playNextHandler).toEqual(expect.any(Function));
+
+    unmount();
+
+    expect(mockPlayer.playNextHandler).toBeNull();
+  });
+
+  it("plays the player's next entry once, with analytics and the overlay hidden, when the overlay is not showing", () => {
+    const next = { id: "entry-2", title: "Next" };
+    const hidePlayNext = jest.fn();
+    mockPlayer.getPlayNextEntry.mockReturnValue(next);
+
+    mockPlayer.getOverlayObservable.mockReturnValue({
+      getPlayNextEntry: () => next,
+      hidePlayNext,
+    });
+
+    renderPlayerContainer();
+
+    mockPlayer.playNextHandler();
+
+    expect(hidePlayNext).toHaveBeenCalledTimes(1);
+
+    expect(mockPlayerManager.invokeHandler).toHaveBeenCalledWith(
+      "play_next_triggered",
+      { id: "entry-1" }
+    );
+
+    expect(mockNavigator.replaceTop).toHaveBeenCalledTimes(1);
+
+    expect(mockNavigator.replaceTop).toHaveBeenCalledWith(next, {
+      mode: VideoModalMode.MAXIMIZED,
+    });
+  });
+});