@applicaster/quick-brick-player 16.0.0-rc.6 → 16.0.0-rc.61

package/src/Player/AudioLayer/playerActions.ts

@@ -0,0 +1,280 @@
+import { map } from "rxjs";
+import {
+  actionExecutor,
+  ActionResult,
+} from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
+import { ActionHandler } from "@applicaster/zapp-react-native-utils/actionsExecutor/types";
+import { uiActionsRegistry } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import { modalOrchestrator } from "@applicaster/zapp-react-native-utils/modalState/ModalOrchestrator";
+import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+import { speedOptions } from "../Const/speedOptions";
+import { getSleepTimerOptions } from "../Const/sleepTimerOptions";
+import { formatSpeed } from "./utils";
+import { SpeedController } from "./SpeedManager";
+import { SleepTimerController, SleepTimerState } from "./SleepTimerManager";
+import { SleepTimerModalHeader } from "./components/SleepTimerModalHeader";
+
+export const PLAYER_ACTION_IDENTIFIERS = {
+  PLAYBACK_SPEED: "playback-speed",
+  SLEEP_TIMER: "sleep-timer",
+} as const;
+
+export const PLAYER_ACTION_TYPES = {
+  OPEN_PLAYBACK_SPEED: "openPlaybackSpeed",
+  OPEN_SLEEP_TIMER: "openSleepTimer",
+  SET_PLAYBACK_SPEED: "setPlaybackSpeed",
+  SET_SLEEP_TIMER: "setSleepTimer",
+} as const;
+
+function getPlayerConfig(): Record<string, any> {
+  return playerManager.getActivePlayer()?.getConfig?.() || {};
+}
+
+function remainingTimerDate(timerDate: number): number | null {
+  return timerDate !== 0 && +timerDate > Date.now() ? timerDate : null;
+}
+
+function dismissOpenedSheet(action: ActionType) {
+  if (action.options?.dismissSheet) {
+    modalOrchestrator.close();
+  }
+}
+
+function optionToEntry(
+  id: string,
+  title: string,
+  actionType: string,
+  options: Record<string, any>
+): ZappEntry {
+  return {
+    id,
+    title,
+    extensions: {
+      tap_actions: {
+        actions: [
+          { type: actionType, options: { ...options, dismissSheet: true } },
+        ],
+      },
+    },
+  } as ZappEntry;
+}
+
+function sleepTimerEntryState(
+  sleepState: SleepTimerState
+): CellActionEntryState {
+  const config = getPlayerConfig();
+  const isActive = Boolean(remainingTimerDate(sleepState.timerDate));
+
+  return {
+    state: isActive ? 1 : 0,
+    label: config.playback_sleep_title || "Sleep Timer",
+    asset: isActive
+      ? config.sleep_timer_active || config.sleep_timer || ""
+      : config.sleep_timer || "",
+  };
+}
+
+export async function openPlaybackSpeedAction(
+  speedController: SpeedController
+): Promise<ActionResult> {
+  const config = getPlayerConfig();
+  const current = speedController.currentSpeed;
+
+  const items = speedOptions.map((option) =>
+    optionToEntry(
+      String(option.value),
+      option.label,
+      PLAYER_ACTION_TYPES.SET_PLAYBACK_SPEED,
+      { value: option.value }
+    )
+  );
+
+  return actionExecutor.handleAction({
+    type: "openBottomSheet",
+    options: {
+      replace: true,
+      header: {
+        title: config.playback_speed_title || "Playback Speed",
+      },
+      content: {
+        role: "collection_selector",
+        behavior: {
+          selectMode: "single",
+          currentSelection: [String(current.value)],
+        },
+        items,
+      },
+    },
+  } as ActionType);
+}
+
+export async function openSleepTimerAction(
+  sleepController: SleepTimerController
+): Promise<ActionResult> {
+  const config = getPlayerConfig();
+  const sleepState = sleepController.currentState;
+  const timerRemaining = remainingTimerDate(sleepState.timerDate);
+
+  const items = getSleepTimerOptions(
+    config.playback_sleep_off_label || "Off",
+    timerRemaining
+  )
+    .filter(Boolean)
+    .map((option) =>
+      optionToEntry(
+        String(option.value),
+        option.label,
+        PLAYER_ACTION_TYPES.SET_SLEEP_TIMER,
+        { value: option.value, label: option.label }
+      )
+    );
+
+  return actionExecutor.handleAction({
+    type: "openBottomSheet",
+    options: {
+      replace: true,
+      header: {
+        title: config.playback_sleep_title || "Sleep Timer",
+        component: SleepTimerModalHeader,
+        componentProps: { timerDate: timerRemaining },
+      },
+      content: {
+        role: "collection_selector",
+        behavior: {
+          selectMode: "single",
+          currentSelection: timerRemaining
+            ? [String(sleepState.timer.value)]
+            : [],
+        },
+        items,
+      },
+    },
+  } as ActionType);
+}
+
+export async function setPlaybackSpeedAction(
+  speedController: SpeedController,
+  action: ActionType
+): Promise<ActionResult> {
+  const value = toNumber(action.options?.value);
+
+  if (!Number.isFinite(value)) {
+    return ActionResult.Error;
+  }
+
+  await speedController.setPlaybackSpeed({
+    asset: formatSpeed(value),
+    value,
+  });
+
+  dismissOpenedSheet(action);
+
+  return ActionResult.Success;
+}
+
+export async function setSleepTimerAction(
+  sleepController: SleepTimerController,
+  action: ActionType
+): Promise<ActionResult> {
+  const value = toNumber(action.options?.value);
+
+  if (!Number.isFinite(value)) {
+    return ActionResult.Error;
+  }
+
+  await sleepController.setSleepTimer({
+    label: action.options?.label || String(value),
+    value,
+  });
+
+  dismissOpenedSheet(action);
+
+  return ActionResult.Success;
+}
+
+export function registerPlayerActions(options: {
+  speedController?: SpeedController;
+  sleepController?: SleepTimerController;
+}): () => void {
+  const unregisters: Array<() => void> = [];
+
+  if (options.speedController) {
+    const speedController = options.speedController;
+
+    const speedHandlers: Array<[string, ActionHandler]> = [
+      [
+        PLAYER_ACTION_TYPES.OPEN_PLAYBACK_SPEED,
+        () => openPlaybackSpeedAction(speedController),
+      ],
+      [
+        PLAYER_ACTION_TYPES.SET_PLAYBACK_SPEED,
+        (action) => setPlaybackSpeedAction(speedController, action),
+      ],
+    ];
+
+    speedHandlers.forEach(([type, handler]) => {
+      actionExecutor.unregisterAction(type);
+      unregisters.push(actionExecutor.registerAction(type, handler));
+    });
+
+    unregisters.push(
+      uiActionsRegistry.registerAction(
+        PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED,
+        {
+          initialEntryState: () => ({
+            state: 0,
+            label: getPlayerConfig().playback_speed_title || "Playback Speed",
+            asset: getPlayerConfig().playback_speed || "",
+          }),
+          invokeAction: async () => {
+            await actionExecutor.handleAction({
+              type: PLAYER_ACTION_TYPES.OPEN_PLAYBACK_SPEED,
+            });
+          },
+        }
+      )
+    );
+  }
+
+  if (options.sleepController) {
+    const sleepController = options.sleepController;
+
+    const sleepHandlers: Array<[string, ActionHandler]> = [
+      [
+        PLAYER_ACTION_TYPES.OPEN_SLEEP_TIMER,
+        () => openSleepTimerAction(sleepController),
+      ],
+      [
+        PLAYER_ACTION_TYPES.SET_SLEEP_TIMER,
+        (action) => setSleepTimerAction(sleepController, action),
+      ],
+    ];
+
+    sleepHandlers.forEach(([type, handler]) => {
+      actionExecutor.unregisterAction(type);
+      unregisters.push(actionExecutor.registerAction(type, handler));
+    });
+
+    unregisters.push(
+      uiActionsRegistry.registerAction(PLAYER_ACTION_IDENTIFIERS.SLEEP_TIMER, {
+        initialEntryState: () =>
+          sleepTimerEntryState(sleepController.currentState),
+        observeEntryState: () =>
+          sleepController.sleepTimerState$.pipe(
+            map((sleepState) => sleepTimerEntryState(sleepState))
+          ),
+        invokeAction: async () => {
+          await actionExecutor.handleAction({
+            type: PLAYER_ACTION_TYPES.OPEN_SLEEP_TIMER,
+          });
+        },
+      })
+    );
+  }
+
+  return () => {
+    unregisters.forEach((unregister) => unregister());
+  };
+}

package/src/Player/AudioLayer/usePlaylistNavigation.ts

@@ -0,0 +1,134 @@
+import * as React from "react";
+
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
+import {
+  loadFeedEntry,
+  retrieveFeedUrl,
+  retrievePlayPreviousFeedUrl,
+} from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/utils";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+
+const { log_error, log_info } = createLogger({
+  subsystem: "Player",
+  category: "usePlaylistNavigation",
+});
+
+const RESTART_THRESHOLD_SECONDS = 3;
+
+export type PlaylistNavigation = {
+  hasNext: boolean;
+  hasPrevious: boolean;
+  goNext: () => Promise<void>;
+  goPrevious: () => Promise<void>;
+};
+
+/**
+ * Each entry points at the feed holding its neighbour, so the chain walks
+ * itself and needs no client-side queue.
+ */
+export const usePlaylistNavigation = (
+  entry: ZappEntry,
+  playerState: QuickBrickPlayer.PlayerState
+): PlaylistNavigation => {
+  const navigator = useNavigation();
+  // Not playerManager.getActivePlayer(): that is always the local player, so
+  // seeking would miss the receiver while casting.
+  const player = usePlayer();
+
+  const [nextUrl, setNextUrl] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let cancelled = false;
+
+    retrieveFeedUrl(entry)
+      .then((url) => {
+        if (!cancelled) {
+          setNextUrl(url ?? null);
+        }
+      })
+      .catch((error) => {
+        log_error(
+          "usePlaylistNavigation: could not resolve the next feed url",
+          { error }
+        );
+
+        if (!cancelled) {
+          setNextUrl(null);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [entry]);
+
+  const previousUrl = retrievePlayPreviousFeedUrl(entry);
+  const currentTime = playerState?.currentTime ?? 0;
+
+  const canRestart = (playerState?.seekableDuration ?? 0) > 0;
+
+  const isNavigatingRef = React.useRef(false);
+
+  const navigateTo = React.useCallback(
+    async (feedUrl: string) => {
+      // A second tap mid-flight resolves to the same target, since `entry` has
+      // not been replaced yet.
+      if (isNavigatingRef.current) {
+        return;
+      }
+
+      isNavigatingRef.current = true;
+
+      try {
+        const target = await loadFeedEntry(feedUrl, entry);
+
+        log_info(`navigateTo: playing "${target.title}", id: ${target.id}`, {
+          feedUrl,
+          targetId: target.id,
+        });
+
+        navigator.replaceTop(target);
+      } catch (error) {
+        log_error("navigateTo: could not play the neighbouring entry", {
+          error,
+          feedUrl,
+        });
+      } finally {
+        // Released on failure too, so one bad request cannot latch the control.
+        isNavigatingRef.current = false;
+      }
+    },
+    [entry, navigator]
+  );
+
+  const goNext = React.useCallback(async () => {
+    if (!nextUrl) return;
+
+    await navigateTo(nextUrl);
+  }, [nextUrl, navigateTo]);
+
+  const goPrevious = React.useCallback(async () => {
+    // Restarting belongs to the stream, not the chain — so it stays available
+    // at the head, where there is nothing to step back to.
+    const shouldRestart =
+      canRestart && (currentTime > RESTART_THRESHOLD_SECONDS || !previousUrl);
+
+    if (shouldRestart) {
+      player?.seekTo(0);
+
+      return;
+    }
+
+    if (!previousUrl) return;
+
+    await navigateTo(previousUrl);
+  }, [previousUrl, currentTime, canRestart, navigateTo, player]);
+
+  return {
+    hasNext: Boolean(nextUrl),
+    hasPrevious: Boolean(previousUrl) || canRestart,
+    goNext,
+    goPrevious,
+  };
+};

package/src/Player/AudioLayer/useSleepTimerModal.ts

@@ -1,30 +1,19 @@
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
+import { uiActionsRegistry } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   SLEEP_TIMER_OFF,
   SleepTimerController,
   SleepTimerState,
 } from "./SleepTimerManager";
-
-import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
-
-import { SleepTimerModalHeader } from "./components/SleepTimerModalHeader";
-import { getSleepTimerOptions } from "../Const/sleepTimerOptions";
 import {
-  getBottomSheetModalLabelProps,
-  getBottomSheetModalIconProps,
-  getBottomSheetModalItemProps,
-  getBottomSheetModalSelectedItemIcon,
-  selectSleepTitle,
-  selectSleepOffLabel,
-} from "../Utils";
+  PLAYER_ACTION_IDENTIFIERS,
+  registerPlayerActions,
+} from "./playerActions";
 
-export const useSleepTimerModal = (player, configuration) => {
+export const useSleepTimerModal = (player) => {
   const playerState = usePlayerState("audio-player-sleep-timer-modal");
 
-  const title = configuration(selectSleepTitle);
-  const offLabel = configuration(selectSleepOffLabel);
-
   const [sleepTimerManager, setSleepTimerManager] =
     useState<SleepTimerController | null>(null);
 
@@ -33,19 +22,22 @@ export const useSleepTimerModal = (player, configuration) => {
   );
 
   useEffect(() => {
-    if (player) {
-      setSleepTimerManager(new SleepTimerController(player));
-    } else {
-      setSleepTimerManager(null);
-    }
+    setSleepTimerManager(player ? new SleepTimerController(player) : null);
   }, [player]);
 
   useEffect(() => {
     if (playerState?.isLive) {
-      // Resetting a sleep timer when audio content is live (Timer not supported on live video)
-      sleepTimerManager.setSleepTimer(SLEEP_TIMER_OFF).catch();
+      sleepTimerManager?.setSleepTimer(SLEEP_TIMER_OFF).catch(() => undefined);
+    }
+  }, [playerState?.isLive, sleepTimerManager]);
+
+  useEffect(() => {
+    if (!sleepTimerManager || playerState.isLive) {
+      return;
     }
-  }, [playerState?.isLive]);
+
+    return registerPlayerActions({ sleepController: sleepTimerManager });
+  }, [sleepTimerManager, playerState.isLive]);
 
   useEffect(() => {
     if (!playerState.isReadyToPlay) {
@@ -64,40 +56,11 @@ export const useSleepTimerModal = (player, configuration) => {
     };
   }, [sleepTimerManager]);
 
-  const onSleepSelect = useCallback(
-    async (item) => {
-      await sleepTimerManager?.setSleepTimer(item);
-    },
-    [sleepTimerManager]
-  );
-
   const onSleepButtonPress = useCallback(() => {
-    const timerDate = sleepTimerState.timerDate;
-
-    const timerRemaining =
-      timerDate !== 0 && +timerDate > Date.now() ? timerDate : null;
-
-    openBottomSheetModal({
-      modalBottomSheetContentProps: {
-        headerComponent: SleepTimerModalHeader,
-        items: getSleepTimerOptions(offLabel, timerRemaining),
-        onPress: onSleepSelect,
-        title,
-        summary: timerRemaining,
-        itemProps: getBottomSheetModalItemProps,
-        iconProps: getBottomSheetModalIconProps,
-        labelProps: getBottomSheetModalLabelProps,
-        getSelectedItemIcon: getBottomSheetModalSelectedItemIcon,
-      },
-      options: {
-        supportedOrientations: [
-          "portrait",
-          "landscape",
-          "portrait-upside-down",
-        ],
-      },
-    });
-  }, [sleepTimerState.timerDate, sleepTimerState.timer, title, onSleepSelect]);
+    uiActionsRegistry
+      .getAction(PLAYER_ACTION_IDENTIFIERS.SLEEP_TIMER)
+      ?.invokeAction(player?.entry);
+  }, [player]);
 
   return useMemo(
     () => ({

package/src/Player/__tests__/getNativeProps.test.ts

@@ -0,0 +1,115 @@
+import VideoPlayer from "../index";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
+
+/**
+ * Pins where `getNativeProps()`'s `metadata` object comes from: the player
+ * manager's content channel, looked up by `props.playerId`.
+ *
+ * This deliberately does NOT depend on tree position. An earlier version read
+ * the values from `PlayerContainerContext` via `static contextType`, which
+ * made native's props depend on `Player` being rendered inside
+ * `PlayerContainerContextProvider` - safe only as long as an exhaustive
+ * render-site search stayed true. Reading from the manager removes that whole
+ * class of fragility, so the tests below assert the value's source rather than
+ * a render-site invariant.
+ *
+ * Lookup is by id rather than `getActivePlayer()` because these props are
+ * handed to this component's own native view: they must describe that player
+ * even while a cast session is running.
+ *
+ * The instance is constructed directly (bypassing `render()`/mount) so this
+ * exercises the real `getNativeProps()` without paying for a full render of
+ * the ~37KB `VideoPlayer` class tree.
+ */
+
+jest.mock("@applicaster/zapp-react-native-utils/appUtils", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-utils/appUtils"),
+  playerManager: {
+    getPlayerWithId: jest.fn(),
+  },
+}));
+
+const entry = {
+  id: "1",
+  title: "Entry Title",
+  summary: "Entry Summary",
+} as unknown as ZappEntry;
+
+const baseProps = {
+  entry,
+  pluginConfiguration: {},
+  docked: false,
+  fullscreen: false,
+  inline: false,
+  isModal: false,
+  isTabletPortrait: false,
+  muted: false,
+  playerId: "player-1",
+  PlayerComponent: "QuickBrickDefaultPlayerView",
+} as unknown as ConstructorParameters<typeof VideoPlayer>[0];
+
+const publishContent = (
+  content: {
+    title: Option<string | number>;
+    summary: Option<string | number>;
+  } | null
+) => {
+  (playerManager.getPlayerWithId as jest.Mock).mockReturnValue(
+    content ? { getContent: () => content } : null
+  );
+};
+
+describe("Player's getNativeProps() reading Title/Subtitle from the manager", () => {
+  it("sends the title/summary the player published", () => {
+    publishContent({
+      title: "Resolved Title",
+      summary: "Resolved Summary",
+    });
+
+    const nativeProps = new VideoPlayer(baseProps).getNativeProps();
+
+    expect(nativeProps.metadata.title).toBe("Resolved Title");
+    expect(nativeProps.metadata.subtitle).toBe("Resolved Summary");
+  });
+
+  it("looks the player up by its own id, not the active player", () => {
+    publishContent({ title: "Resolved Title", summary: "Resolved Summary" });
+
+    new VideoPlayer(baseProps).getNativeProps();
+
+    expect(playerManager.getPlayerWithId).toHaveBeenCalledWith("player-1");
+  });
+
+  it("sends undefined when the player published no text", () => {
+    publishContent({ title: null, summary: null });
+
+    const nativeProps = new VideoPlayer(baseProps).getNativeProps();
+
+    expect(nativeProps.metadata.title).toBeUndefined();
+    expect(nativeProps.metadata.subtitle).toBeUndefined();
+  });
+
+  it("sends undefined rather than crashing when no player is registered", () => {
+    publishContent(null);
+
+    const nativeProps = new VideoPlayer(baseProps).getNativeProps();
+
+    expect(nativeProps.metadata.title).toBeUndefined();
+    expect(nativeProps.metadata.subtitle).toBeUndefined();
+  });
+
+  it("does not fall back to entry.title/entry.summary itself - the resolver owns that fallback", () => {
+    // `entry.title`/`entry.summary` are "Entry Title"/"Entry Summary" (see
+    // `baseProps`); with nothing published, nativeProps must NOT silently pick
+    // those up as a second, redundant fallback layer inside `Player`. The
+    // entry-field fallback lives in `resolvePlayerContentText`, reached
+    // through the player's own `getContent()`.
+    publishContent({ title: null, summary: null });
+
+    const nativeProps = new VideoPlayer(baseProps).getNativeProps();
+
+    expect(nativeProps.metadata.title).not.toBe(entry.title);
+    expect(nativeProps.metadata.subtitle).not.toBe(entry.summary);
+    expect(nativeProps.entry).toBe(entry);
+  });
+});