@applicaster/quick-brick-player 16.0.0-rc.8 → 16.0.0-rc.81

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>

package/src/Player/AudioLayer/SleepTimerManager.ts

@@ -41,6 +41,10 @@ export class SleepTimerController {
     return this.sleepTimerStateSubject.asObservable();
   }
 
+  get currentState(): SleepTimerState {
+    return this.sleepTimerStateSubject.getValue();
+  }
+
   private async scheduleSleep(sleepDate): Promise<boolean> {
     log_debug(`Setting sleep interval to ${sleepDate}`);
 
@@ -118,7 +122,7 @@ export class SleepTimerController {
 
     log_debug("Sleep state restored");
 
-    this.setSleepTimer(item as SleepTimer, futureSleepDate);
+    await this.setSleepTimer(item as SleepTimer, futureSleepDate);
   }
 
   // Will be called if user closed the player explicitly.

package/src/Player/AudioLayer/SpeedManager.ts

@@ -33,6 +33,10 @@ export class SpeedController {
     return this.playbackSpeedSubject.asObservable();
   }
 
+  get currentSpeed(): PlaybackSpeed {
+    return this.playbackSpeedSubject.getValue();
+  }
+
   async loadSpeed() {
     const speed = await localStorage.getItem(SPEED_PREFERENCE_KEY, NAMESPACE);
 

package/src/Player/AudioLayer/__tests__/AudioDescription.test.tsx

@@ -0,0 +1,147 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import { render } from "@testing-library/react-native";
+
+import { AudioDescription } from "../AudioDescription";
+
+// `title`/`summary` come from the player manager's content channel rather than
+// from props or context, so the hook is mocked here. Read lazily inside the
+// factory: `jest.mock` is hoisted above the `let`, so capturing eagerly would
+// freeze it at `undefined`.
+let mockContent: {
+  title: Option<string | number>;
+  summary: Option<string | number>;
+} = { title: "A Title", summary: "A Summary" };
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerContent",
+  () => ({ usePlayerContent: () => mockContent })
+);
+
+beforeEach(() => {
+  mockContent = { title: "A Title", summary: "A Summary" };
+});
+
+const layoutState = { inline: false, docked: false, isModal: true };
+
+const valueFrom =
+  (config: Record<string, unknown>): GetValue =>
+  (key: string) =>
+    (config[key] ?? null) as never;
+
+const renderDescription = (
+  config: Record<string, unknown>,
+  state = layoutState
+) =>
+  render(
+    <AudioDescription
+      layoutState={state}
+      value={valueFrom(config)}
+      maxWidth={400}
+    />
+  );
+
+// The wrapper's style prop is an array, so flatten before reading height.
+const wrapperHeight = (tree) =>
+  StyleSheet.flatten(tree.toJSON().props.style).height;
+
+describe("AudioDescription", () => {
+  it("renders both texts when both toggles are on", () => {
+    const { queryByText } = renderDescription({ title: true, subtitle: true });
+
+    expect(queryByText("A Title")).toBeTruthy();
+    expect(queryByText("A Summary")).toBeTruthy();
+  });
+
+  it("hides the title when the title toggle is off", () => {
+    const { queryByText } = renderDescription({ title: false, subtitle: true });
+
+    expect(queryByText("A Title")).toBeNull();
+    expect(queryByText("A Summary")).toBeTruthy();
+  });
+
+  it("hides the summary when the subtitle toggle is off", () => {
+    const { queryByText } = renderDescription({ title: true, subtitle: false });
+
+    expect(queryByText("A Title")).toBeTruthy();
+    expect(queryByText("A Summary")).toBeNull();
+  });
+
+  it("renders neither text when both toggles are off", () => {
+    const { queryByText } = renderDescription({
+      title: false,
+      subtitle: false,
+    });
+
+    expect(queryByText("A Title")).toBeNull();
+    expect(queryByText("A Summary")).toBeNull();
+  });
+
+  it("reserves no height when both toggles are off", () => {
+    const tree = renderDescription({ title: false, subtitle: false });
+
+    expect(wrapperHeight(tree)).toBe(0);
+  });
+
+  it("reserves less height when the title is hidden than when it is shown", () => {
+    const withTitle = renderDescription({ title: true, subtitle: true });
+    const withoutTitle = renderDescription({ title: false, subtitle: true });
+
+    expect(wrapperHeight(withoutTitle)).toBeLessThan(wrapperHeight(withTitle));
+  });
+
+  it("reserves less height when the subtitle is hidden than when it is shown", () => {
+    const withSubtitle = renderDescription({ title: true, subtitle: true });
+    const withoutSubtitle = renderDescription({ title: true, subtitle: false });
+
+    expect(wrapperHeight(withoutSubtitle)).toBeLessThan(
+      wrapperHeight(withSubtitle)
+    );
+  });
+
+  it("reads the docked toggle keys when docked", () => {
+    const { queryByText } = renderDescription(
+      { docked_player_title: true, docked_player_subtitle: false },
+      { ...layoutState, docked: true }
+    );
+
+    expect(queryByText("A Title")).toBeTruthy();
+    expect(queryByText("A Summary")).toBeNull();
+  });
+
+  /**
+   * Live audio resolves its text asynchronously: the channel feed is polled
+   * after playback starts, so the first render has no programme title yet. The
+   * row must hold its place across that transition instead of collapsing and
+   * expanding a second later.
+   */
+  describe("layout stability while the text is still missing", () => {
+    it("reserves the same height with and without text", () => {
+      const withText = renderDescription({ title: true, subtitle: true });
+
+      mockContent = { title: null, summary: null };
+
+      const withoutText = renderDescription({ title: true, subtitle: true });
+
+      expect(wrapperHeight(withoutText)).toBe(wrapperHeight(withText));
+    });
+
+    it("still renders both rows when the text has not arrived", () => {
+      mockContent = { title: null, summary: null };
+
+      const tree = renderDescription({ title: true, subtitle: true });
+
+      expect(wrapperHeight(tree)).toBeGreaterThan(0);
+    });
+
+    it("reserves height for the summary even when only the summary is missing", () => {
+      const withSummary = renderDescription({ title: true, subtitle: true });
+
+      mockContent = { title: "A Title", summary: null };
+
+      const withoutSummary = renderDescription({ title: true, subtitle: true });
+
+      expect(wrapperHeight(withoutSummary)).toBe(wrapperHeight(withSummary));
+    });
+  });
+});

package/src/Player/AudioLayer/__tests__/AudioPlayerWrapper.test.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+/**
+ * Covers AudioPlayerWrapper's remaining Title/Subtitle responsibility, which is
+ * only lifecycle: keep the manager's live-content polling running while this
+ * player is mounted. It carries neither the text (consumers read it from the
+ * player manager via `usePlayerContent`) nor any decision about the polling -
+ * whether the content is live, where the channel's programme feed lives and
+ * how often to poll are all `OverlaysObserver`'s.
+ *
+ * The rest of the chain is covered where each link lives:
+ *   - is-live / feed url / interval           OverlayObserver/__tests__/liveContent.test.ts
+ *   - polling -> `observer.liveEntry`         OverlayObserver/__tests__/liveContent.test.ts
+ *   - liveEntry -> published content          playerManager/__tests__/playerContent.test.ts
+ *   - published content -> rendered text      AudioLayer/__tests__/AudioDescription.test.tsx
+ */
+
+const mockStartLiveContentUpdates = jest.fn();
+const mockStopLiveContentUpdates = jest.fn();
+
+const mockPlayer = {
+  getOverlayObservable: () => ({
+    startLiveContentUpdates: mockStartLiveContentUpdates,
+    stopLiveContentUpdates: mockStopLiveContentUpdates,
+  }),
+  addListener: jest.fn(() => jest.fn()),
+  play: jest.fn(),
+  pause: jest.fn(),
+  rewind: jest.fn(),
+  forward: jest.fn(),
+};
+
+let mockIsLive = false;
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer",
+  () => ({ usePlayer: () => mockPlayer })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState",
+  () => ({
+    usePlayerState: () => ({
+      isLive: mockIsLive,
+      seekableDuration: 0,
+      isReadyToPlay: false,
+      isBuffering: false,
+      isPaused: false,
+    }),
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/appUtils", () => ({
+  playerManager: {
+    close: jest.fn(),
+    isCasting: jest.fn(() => false),
+  },
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useNavigation: jest.fn(() => ({ maximiseVideoModal: jest.fn() })),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/modalState", () => ({
+  useModalStoreState: jest.fn(() => ({ visible: false })),
+  dismissModal: jest.fn(),
+  openBottomSheetModal: jest.fn(),
+}));
+
+jest.mock("../Layout", () => ({
+  __esModule: true,
+  default: () => null,
+}));
+
+import { AudioPlayerWrapper } from "../AudioPlayerWrapper";
+
+const LIVE_ENTRY = {
+  id: "entry-1",
+  title: "Channel Title",
+  summary: "Channel Summary",
+  extensions: {
+    live: { channel_src: "https://feed.test/subClass/audio" },
+  },
+} as any;
+
+const baseProps = {
+  configuration: { audio_live_player_update_interval: 30 },
+  style: { width: 100, height: 100 } as any,
+  entry: LIVE_ENTRY,
+  layoutState: { inline: false, docked: false, isModal: false, pip: false },
+  playNextData: null,
+  children: null,
+};
+
+describe("AudioPlayerWrapper live content polling", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockIsLive = true;
+  });
+
+  it("asks the observer to keep live content fresh while mounted", () => {
+    render(<AudioPlayerWrapper {...baseProps} />);
+
+    expect(mockStartLiveContentUpdates).toHaveBeenCalled();
+  });
+
+  it("stops polling on unmount", () => {
+    const { unmount } = render(<AudioPlayerWrapper {...baseProps} />);
+
+    unmount();
+
+    expect(mockStopLiveContentUpdates).toHaveBeenCalled();
+  });
+
+  it("re-evaluates when the player reports the content is live", () => {
+    // `isLive` is unknown until the player loads, so the effect has to run
+    // again once it settles - the observer decides what to do with it.
+    mockIsLive = false;
+
+    const { rerender } = render(<AudioPlayerWrapper {...baseProps} />);
+
+    mockStartLiveContentUpdates.mockClear();
+    mockIsLive = true;
+
+    rerender(<AudioPlayerWrapper {...baseProps} />);
+
+    expect(mockStartLiveContentUpdates).toHaveBeenCalled();
+  });
+});