@applicaster/quick-brick-player 16.0.0-rc.9 → 16.0.0-rc.90

package/src/Player/AudioLayer/Layout/TransportInfo/__tests__/index.test.tsx

@@ -0,0 +1,257 @@
+import React from "react";
+import { render, waitFor } from "@testing-library/react-native";
+
+import { TransportInfo } from "../index";
+import { resolvePlayerActions } from "@applicaster/zapp-react-native-utils/playerUtils";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { TransportInfo as MobileTransportInfo } from "@applicaster/quick-brick-mobile-transport-controls";
+import { uiActionsRegistry } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+import { PLAYER_ACTION_IDENTIFIERS } from "../../../playerActions";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useIsTablet: () => false,
+}));
+
+jest.mock("react-native-safe-area-context", () => ({
+  useSafeAreaFrame: () => ({ height: 800, width: 400 }),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Hooks/useEntryActionsExpander",
+  () => ({ useEntryActionsExpander: () => () => [] })
+);
+
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
+  usePlugins: jest.fn(() => []),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/playerUtils", () => {
+  const actual = jest.requireActual(
+    "@applicaster/zapp-react-native-utils/playerUtils"
+  );
+
+  return {
+    ...actual,
+    resolvePlayerActions: jest.fn(),
+  };
+});
+
+jest.mock("@applicaster/quick-brick-mobile-transport-controls", () => ({
+  TransportInfo: jest.fn(() => null),
+}));
+
+const MobileTransportInfoMock = MobileTransportInfo as unknown as jest.Mock;
+const resolvePlayerActionsMock = resolvePlayerActions as jest.Mock;
+const usePluginsMock = usePlugins as jest.Mock;
+
+const action = (identifier: string) =>
+  ({ identifier, action: { invokeAction: jest.fn() } }) as any;
+
+const valueForLayout = (layout?: string): GetValue =>
+  ((key: string) =>
+    key === "player_controls_layout" ? layout : null) as unknown as GetValue;
+
+const entry: ZappEntry = {
+  id: "audio-1",
+  title: "Track",
+  type: { value: "audio" },
+};
+
+const layoutState = { inline: false, docked: false, isModal: true };
+
+describe("Audio TransportInfo overflow wiring", () => {
+  let getActionsSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    resolvePlayerActionsMock.mockReturnValue([
+      action("favorites"),
+      action("offline-content-button"),
+      action("native_share_action"),
+    ]);
+
+    getActionsSpy = jest
+      .spyOn(uiActionsRegistry, "getActions")
+      .mockImplementation((identifier: string) => {
+        if (
+          identifier === PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED ||
+          identifier === PLAYER_ACTION_IDENTIFIERS.SLEEP_TIMER
+        ) {
+          return [action(identifier)];
+        }
+
+        return [];
+      });
+  });
+
+  afterEach(() => {
+    getActionsSpy.mockRestore();
+  });
+
+  it("passes resolved actions as descriptors and enables overflow when the plugin is present", () => {
+    usePluginsMock.mockReturnValue([
+      { identifier: "open-modal-bottom-sheet-cell-action" },
+    ]);
+
+    render(
+      <TransportInfo
+        entry={entry}
+        layoutState={layoutState}
+        value={valueForLayout("playback_speed_and_sleep_timer")}
+        configuration={{ player_action_buttons: "a,b,c" }}
+      />
+    );
+
+    expect(resolvePlayerActionsMock).toHaveBeenCalledWith({
+      configuration: { player_action_buttons: "a,b,c" },
+      entry,
+      expandEntryActions: expect.any(Function),
+    });
+
+    const props = MobileTransportInfoMock.mock.calls[0][0];
+
+    expect(props.actionButtonDescriptors).toEqual([
+      {
+        kind: "action",
+        action: expect.objectContaining({ identifier: "favorites" }),
+      },
+      {
+        kind: "action",
+        action: expect.objectContaining({
+          identifier: "offline-content-button",
+        }),
+      },
+      {
+        kind: "action",
+        action: expect.objectContaining({ identifier: "native_share_action" }),
+      },
+    ]);
+
+    expect(props.actionButtons).toBeUndefined();
+
+    // Controls row renders speed and sleep timer itself in this layout.
+    expect(getActionsSpy).not.toHaveBeenCalled();
+  });
+
+  it("appends playback speed and sleep timer when playlist controls layout is active", async () => {
+    usePluginsMock.mockReturnValue([
+      { identifier: "open-modal-bottom-sheet-cell-action" },
+    ]);
+
+    resolvePlayerActionsMock.mockReturnValue([
+      action("favorites"),
+      action("offline-content-button"),
+    ]);
+
+    // The audio player registers these in a later effect than our first paint.
+    let registered = false;
+
+    getActionsSpy.mockImplementation((identifier: string) => {
+      if (
+        !registered ||
+        (identifier !== PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED &&
+          identifier !== PLAYER_ACTION_IDENTIFIERS.SLEEP_TIMER)
+      ) {
+        return [];
+      }
+
+      return [action(identifier)];
+    });
+
+    render(
+      <TransportInfo
+        entry={entry}
+        layoutState={layoutState}
+        value={valueForLayout("playlist_controls")}
+        configuration={{ player_action_buttons: "favorites,offline" }}
+      />
+    );
+
+    expect(
+      MobileTransportInfoMock.mock.calls[0][0].actionButtonDescriptors
+    ).toEqual([
+      {
+        kind: "action",
+        action: expect.objectContaining({ identifier: "favorites" }),
+      },
+      {
+        kind: "action",
+        action: expect.objectContaining({
+          identifier: "offline-content-button",
+        }),
+      },
+    ]);
+
+    // Registering for real is what tells subscribers to re-read the registry.
+    registered = true;
+
+    const unregister = uiActionsRegistry.registerAction(
+      PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED,
+      { invokeAction: jest.fn() }
+    );
+
+    await waitFor(() => {
+      const latest =
+        MobileTransportInfoMock.mock.calls[
+          MobileTransportInfoMock.mock.calls.length - 1
+        ][0];
+
+      expect(latest.actionButtonDescriptors).toEqual([
+        {
+          kind: "action",
+          action: expect.objectContaining({ identifier: "favorites" }),
+        },
+        {
+          kind: "action",
+          action: expect.objectContaining({
+            identifier: "offline-content-button",
+          }),
+        },
+        {
+          kind: "action",
+          action: expect.objectContaining({
+            identifier: PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED,
+          }),
+        },
+        {
+          kind: "action",
+          action: expect.objectContaining({
+            identifier: PLAYER_ACTION_IDENTIFIERS.SLEEP_TIMER,
+          }),
+        },
+      ]);
+    });
+
+    unregister();
+  });
+
+  it("does not duplicate playback speed or sleep timer if already configured", () => {
+    resolvePlayerActionsMock.mockReturnValue([
+      action("favorites"),
+      action(PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED),
+      action(PLAYER_ACTION_IDENTIFIERS.SLEEP_TIMER),
+    ]);
+
+    render(
+      <TransportInfo
+        entry={entry}
+        layoutState={layoutState}
+        value={valueForLayout("playlist_controls")}
+        configuration={{}}
+      />
+    );
+
+    const identifiers =
+      MobileTransportInfoMock.mock.calls[0][0].actionButtonDescriptors.map(
+        (descriptor: { action: { identifier: string } }) =>
+          descriptor.action.identifier
+      );
+
+    expect(identifiers).toEqual([
+      "favorites",
+      PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED,
+      PLAYER_ACTION_IDENTIFIERS.SLEEP_TIMER,
+    ]);
+  });
+});

package/src/Player/AudioLayer/Layout/TransportInfo/index.tsx

@@ -3,7 +3,8 @@ import { LayoutChangeEvent, StyleSheet, View } from "react-native";
 
 import { TransportInfo as MobileTransportInfo } from "@applicaster/quick-brick-mobile-transport-controls";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { useLanguageData } from "@applicaster/zapp-react-native-utils/reactHooks/player";
+import { useRegistryRevision } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useEntryActionsExpander } from "@applicaster/zapp-react-native-ui-components/Hooks/useEntryActionsExpander";
 
 import { toPositiveNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
@@ -12,7 +13,22 @@ import { NAVBAR_HEIGHT, TABLET_LANDSCAPE } from "../const";
 import { withDebug } from "../debug";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import { isSmallTabletHeight } from "../utils";
-import { getPlayerActionButtons } from "@applicaster/zapp-react-native-utils/playerUtils";
+import {
+  ActionButtonDescriptor,
+  resolvePlayerActions,
+} from "@applicaster/zapp-react-native-utils/playerUtils";
+import {
+  RegisteredAction,
+  uiActionsRegistry,
+} from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+
+import { PLAYER_ACTION_IDENTIFIERS } from "../../playerActions";
+import { controlsRowActionIdentifiers } from "../Controls/utils";
+
+/** Player-owned actions that join the shared action list of the overlay. */
+const AUDIO_PLAYER_ACTION_IDENTIFIERS: string[] = Object.values(
+  PLAYER_ACTION_IDENTIFIERS
+);
 
 const styles = StyleSheet.create({
   container: {
@@ -52,7 +68,8 @@ export const TransportInfo = ({
 }: Props) => {
   const isTablet = useIsTablet();
   const safeAreaFrame = useSafeAreaFrame();
-  const languageData = useLanguageData("audio-player");
+  const registryRevision = useRegistryRevision();
+  const expandEntryActions = useEntryActionsExpander();
 
   const [marginBottom, setMarginBottom] = React.useState(0);
 
@@ -81,11 +98,56 @@ export const TransportInfo = ({
     [onLayout]
   );
 
-  const actionButtons = React.useMemo(
-    () => getPlayerActionButtons(configuration),
-    [configuration]
+  // Joined so the memo below is not invalidated on every render.
+  const controlsRowIdentifiersKey =
+    controlsRowActionIdentifiers(value).join(",");
+
+  const overlayActionIdentifiers = React.useMemo(() => {
+    const renderedByControlsRow = controlsRowIdentifiersKey.split(",");
+
+    return AUDIO_PLAYER_ACTION_IDENTIFIERS.filter(
+      (identifier) => !renderedByControlsRow.includes(identifier)
+    );
+  }, [controlsRowIdentifiersKey]);
+
+  const readOwnPlayerActions = React.useCallback(
+    (): RegisteredAction[] =>
+      overlayActionIdentifiers.flatMap((identifier) =>
+        uiActionsRegistry.getActions(identifier, entry)
+      ),
+    [entry, overlayActionIdentifiers]
+  );
+
+  // Playback speed and the sleep timer register in a later effect than our
+  // first render - speed waits for SpeedController state - so re-read whenever
+  // the registry changes instead of guessing when they will be there.
+  const playerActions = React.useMemo(
+    () => readOwnPlayerActions(),
+    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
+    [readOwnPlayerActions, registryRevision]
   );
 
+  const actionButtonDescriptors = React.useMemo<
+    ActionButtonDescriptor[]
+  >(() => {
+    const content = resolvePlayerActions({
+      configuration,
+      entry,
+      expandEntryActions,
+    });
+
+    const seen = new Set(content.map((action) => action.identifier));
+
+    const extras = playerActions.filter(
+      (action) => action?.identifier && !seen.has(action.identifier)
+    );
+
+    return [...content, ...extras].map((action) => ({
+      kind: "action" as const,
+      action,
+    }));
+  }, [configuration, entry, playerActions, expandEntryActions]);
+
   return (
     <View
       style={[
@@ -106,9 +168,8 @@ export const TransportInfo = ({
           content={entry}
           value={value}
           visible
-          languageData={languageData}
           layoutState={layoutState}
-          actionButtons={actionButtons}
+          actionButtonDescriptors={actionButtonDescriptors}
         />
       </View>
     </View>