@applicaster/quick-brick-player 15.1.10 → 15.1.11-alpha.7557142055

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "15.1.10",
+  "version": "15.1.11-alpha.7557142055",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -37,9 +37,9 @@
   "dependencies": {
     "@applicaster/quick-brick-mobile-transport-controls": "15.1.9",
     "@applicaster/quick-brick-tv-transport-controls": "15.1.9",
-    "@applicaster/zapp-react-native-tvos-app": "15.1.10",
-    "@applicaster/zapp-react-native-ui-components": "15.1.10",
-    "@applicaster/zapp-react-native-utils": "15.1.10",
+    "@applicaster/zapp-react-native-tvos-app": "15.1.11-alpha.7557142055",
+    "@applicaster/zapp-react-native-ui-components": "15.1.11-alpha.7557142055",
+    "@applicaster/zapp-react-native-utils": "15.1.11-alpha.7557142055",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -12,23 +12,18 @@ import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 import { formatSpeed } from "./utils";
-import {
-  getBottomSheetModalDefaultItemIcon,
-  getBottomSheetModalIconProps,
-  getBottomSheetModalItemProps,
-  getBottomSheetModalLabelProps,
-  getBottomSheetModalSelectedItemIcon,
-} from "../Utils";
 
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
-
 import { DEFAULT_SPEED, PlaybackSpeed, SpeedController } from "./SpeedManager";
 import {
   dismissModal as dismissBottomSheetModal,
-  openBottomSheetModal,
   useModalStoreState,
 } from "@applicaster/zapp-react-native-utils/modalState";
-import { speedOptions } from "../Const/speedOptions";
+import { uiActionsRegistry } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+import {
+  PLAYER_ACTION_IDENTIFIERS,
+  registerPlayerActions,
+} from "./playerActions";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -118,6 +113,14 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     setSpeedManager(player ? new SpeedController(player) : null);
   }, [player]);
 
+  useEffect(() => {
+    if (!speedManager || playerState.isLive) {
+      return;
+    }
+
+    return registerPlayerActions({ speedController: speedManager });
+  }, [speedManager, playerState.isLive]);
+
   useEffect(() => {
     if (!player) return;
 
@@ -216,36 +219,11 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.forward(seekDuration);
   }, [seekDuration, player]);
 
-  const onSpeedSelect = React.useCallback(
-    async (item) => {
-      await speedManager?.setPlaybackSpeed(item);
-    },
-    [speedManager]
-  );
-
   const onSpeedButtonPress = React.useCallback(() => {
-    openBottomSheetModal({
-      modalBottomSheetContentProps: {
-        items: speedOptions,
-        current_selection: playbackSpeed,
-        onPress: onSpeedSelect,
-        title: configuration.playback_speed_title,
-        itemProps: getBottomSheetModalItemProps,
-        iconProps: getBottomSheetModalIconProps,
-        labelProps: getBottomSheetModalLabelProps,
-        getSelectedItemIcon: getBottomSheetModalSelectedItemIcon,
-        getDefaultItemIcon: getBottomSheetModalDefaultItemIcon,
-        iconPlacement: "right",
-      },
-      options: {
-        supportedOrientations: [
-          "portrait",
-          "landscape",
-          "portrait-upside-down",
-        ],
-      },
-    });
-  }, [playbackSpeed, onSpeedSelect, configuration.playback_speed_title]);
+    uiActionsRegistry
+      .getAction(PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED)
+      ?.invokeAction(entry);
+  }, [entry]);
 
   const onPlayerSeek = React.useCallback(
     (targetTime: number) => {

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

@@ -2,10 +2,7 @@ import * as React from "react";
 import { StyleSheet, View } from "react-native";
 
 import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
-import {
-  useIsTablet,
-  useZStore,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
   Controls as MobileTransportControls,
   ProgressBar,
@@ -100,11 +97,8 @@ export const Controls = (props: Props) => {
     maxWidth = 320,
   } = props;
 
-  const configuration = useZStore("playerConfiguration");
-
   const { sleepTimerState, onSleepButtonPress } = useSleepTimerModal(
-    playerManager.getActivePlayer(),
-    configuration
+    playerManager.getActivePlayer()
   );
 
   const { hasNext, hasPrevious, goNext, goPrevious } = usePlaylistNavigation(

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__/SleepTimerManager.test.ts

@@ -0,0 +1,78 @@
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { SLEEP_TIMER_OFF, SleepTimerController } from "../SleepTimerManager";
+
+jest.mock(
+  "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage",
+  () => ({
+    localStorage: {
+      getItem: jest.fn(),
+      setItem: jest.fn(),
+      removeItem: jest.fn(),
+    },
+  })
+);
+
+describe("SleepTimerController", () => {
+  const player = {
+    startSleepTimer: jest.fn(),
+    cancelSleepTimer: jest.fn(),
+  };
+
+  let sleepController: SleepTimerController;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (localStorage.setItem as jest.Mock).mockResolvedValue(undefined);
+    (localStorage.removeItem as jest.Mock).mockResolvedValue(undefined);
+    (localStorage.getItem as jest.Mock).mockResolvedValue(undefined);
+    sleepController = new SleepTimerController(player as any);
+  });
+
+  it("starts from the off state", () => {
+    expect(sleepController.currentState.timer).toEqual(SLEEP_TIMER_OFF);
+  });
+
+  it("starts a sleep timer on the constructed player", async () => {
+    await sleepController.setSleepTimer({
+      label: "15 minutes",
+      value: 15,
+    });
+
+    expect(player.cancelSleepTimer).toHaveBeenCalled();
+    expect(player.startSleepTimer).toHaveBeenCalled();
+    expect(sleepController.currentState.timer.value).toBe(15);
+  });
+
+  it("loadSleep restores an unexpired timer", async () => {
+    const futureSleepDate = Date.now() + 60 * 1000;
+
+    (localStorage.getItem as jest.Mock).mockResolvedValue({
+      label: "15 minutes",
+      value: 15,
+      futureSleepDate,
+    });
+
+    player.startSleepTimer.mockClear();
+
+    await sleepController.loadSleep();
+
+    expect(player.startSleepTimer).toHaveBeenCalledWith(futureSleepDate);
+    expect(sleepController.currentState.timer.value).toBe(15);
+  });
+
+  it("loadSleep drops an expired timer without starting a native timer", async () => {
+    (localStorage.getItem as jest.Mock).mockResolvedValue({
+      label: "15 minutes",
+      value: 15,
+      futureSleepDate: Date.now() - 1000,
+    });
+
+    player.startSleepTimer.mockClear();
+
+    await sleepController.loadSleep();
+
+    expect(player.startSleepTimer).not.toHaveBeenCalled();
+    expect(localStorage.removeItem).toHaveBeenCalled();
+    expect(sleepController.currentState.timer).toEqual(SLEEP_TIMER_OFF);
+  });
+});

package/src/Player/AudioLayer/__tests__/SpeedManager.test.ts

@@ -0,0 +1,57 @@
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { DEFAULT_SPEED, SpeedController } from "../SpeedManager";
+
+jest.mock(
+  "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage",
+  () => ({
+    localStorage: {
+      getItem: jest.fn(),
+      setItem: jest.fn(),
+      removeItem: jest.fn(),
+    },
+  })
+);
+
+describe("SpeedController", () => {
+  const player = { setPlaybackRate: jest.fn() };
+  let speedController: SpeedController;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (localStorage.setItem as jest.Mock).mockResolvedValue(undefined);
+    (localStorage.getItem as jest.Mock).mockResolvedValue(undefined);
+    speedController = new SpeedController(player as any);
+  });
+
+  it("requires a player in the constructor", () => {
+    expect(speedController.currentSpeed).toEqual(DEFAULT_SPEED);
+  });
+
+  it("applies playback speed on the constructed player", async () => {
+    await speedController.setPlaybackSpeed({
+      asset: "speed_1_5",
+      value: 1.5,
+    });
+
+    expect(player.setPlaybackRate).toHaveBeenCalledWith(1.5);
+
+    expect(speedController.currentSpeed).toEqual({
+      asset: "speed_1_5",
+      value: 1.5,
+    });
+  });
+
+  it("loadSpeed restores a stored rate onto the player", async () => {
+    (localStorage.getItem as jest.Mock).mockResolvedValue({
+      asset: "speed_1_5",
+      value: 1.5,
+    });
+
+    player.setPlaybackRate.mockClear();
+
+    await speedController.loadSpeed();
+
+    expect(player.setPlaybackRate).toHaveBeenCalledWith(1.5);
+    expect(speedController.currentSpeed.value).toBe(1.5);
+  });
+});

package/src/Player/AudioLayer/__tests__/playerActions.test.ts

@@ -0,0 +1,342 @@
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import {
+  actionExecutor,
+  ActionResult,
+} from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
+import { uiActionsRegistry } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+import { modalOrchestrator } from "@applicaster/zapp-react-native-utils/modalState/ModalOrchestrator";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { firstValueFrom } from "rxjs";
+
+import {
+  PLAYER_ACTION_IDENTIFIERS,
+  PLAYER_ACTION_TYPES,
+  registerPlayerActions,
+} from "../playerActions";
+import { SpeedController } from "../SpeedManager";
+import { SleepTimerController } from "../SleepTimerManager";
+
+jest.mock("../../Const/sleepTimerOptions", () => ({
+  getSleepTimerOptions: (offLabel: string, sleepTimerValue: number | null) => [
+    sleepTimerValue ? { label: offLabel, value: 0 } : null,
+    { label: "5 minutes", value: 5 },
+    { label: "15 minutes", value: 15 },
+  ],
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/appUtils", () => ({
+  playerManager: {
+    getActivePlayer: jest.fn(),
+  },
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/modalState/ModalOrchestrator",
+  () => ({
+    modalOrchestrator: {
+      close: jest.fn(),
+      stackSize: 0,
+    },
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage",
+  () => ({
+    localStorage: {
+      getItem: jest.fn(),
+      setItem: jest.fn(),
+      removeItem: jest.fn(),
+    },
+  })
+);
+
+describe("playerActions", () => {
+  const openedSheets: ActionType[] = [];
+
+  let player: {
+    getConfig: () => Record<string, string>;
+    setPlaybackRate: jest.Mock;
+    startSleepTimer: jest.Mock;
+    cancelSleepTimer: jest.Mock;
+  };
+
+  let speedController: SpeedController;
+  let sleepController: SleepTimerController;
+  let unregisterPlayerActions: () => void;
+
+  beforeEach(() => {
+    openedSheets.length = 0;
+    jest.clearAllMocks();
+    (localStorage.setItem as jest.Mock).mockResolvedValue(undefined);
+    (localStorage.removeItem as jest.Mock).mockResolvedValue(undefined);
+
+    player = {
+      getConfig: () => ({
+        playback_speed_title: "Playback Speed",
+        playback_sleep_title: "Sleep Timer",
+        playback_sleep_off_label: "Off",
+        sleep_timer: "sleep_timer",
+        sleep_timer_active: "sleep_timer_active",
+      }),
+      setPlaybackRate: jest.fn(),
+      startSleepTimer: jest.fn(),
+      cancelSleepTimer: jest.fn(),
+    };
+
+    (playerManager.getActivePlayer as jest.Mock).mockReturnValue(player);
+    speedController = new SpeedController(player as any);
+    sleepController = new SleepTimerController(player as any);
+
+    [
+      "openBottomSheet",
+      PLAYER_ACTION_TYPES.OPEN_PLAYBACK_SPEED,
+      PLAYER_ACTION_TYPES.OPEN_SLEEP_TIMER,
+      PLAYER_ACTION_TYPES.SET_PLAYBACK_SPEED,
+      PLAYER_ACTION_TYPES.SET_SLEEP_TIMER,
+    ].forEach((type) => actionExecutor.unregisterAction(type));
+
+    actionExecutor.registerAction("openBottomSheet", async (action) => {
+      openedSheets.push(action);
+
+      return ActionResult.Success;
+    });
+
+    unregisterPlayerActions = registerPlayerActions({
+      speedController,
+      sleepController,
+    });
+  });
+
+  afterEach(() => {
+    unregisterPlayerActions?.();
+  });
+
+  it("does not register actions until a player controller is provided", async () => {
+    unregisterPlayerActions();
+    unregisterPlayerActions = registerPlayerActions({});
+
+    const result = await actionExecutor.handleAction({
+      type: PLAYER_ACTION_TYPES.SET_PLAYBACK_SPEED,
+      options: { value: 1.5, dismissSheet: true },
+    });
+
+    expect(result).toBeUndefined();
+    expect(player.setPlaybackRate).not.toHaveBeenCalled();
+
+    expect(
+      uiActionsRegistry.getAction(PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED)
+    ).toBeUndefined();
+
+    expect(
+      uiActionsRegistry.getAction(PLAYER_ACTION_IDENTIFIERS.SLEEP_TIMER)
+    ).toBeUndefined();
+  });
+
+  it("unregisters player actions when the player goes away", async () => {
+    unregisterPlayerActions();
+
+    expect(
+      uiActionsRegistry.getAction(PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED)
+    ).toBeUndefined();
+
+    const result = await actionExecutor.handleAction({
+      type: PLAYER_ACTION_TYPES.SET_PLAYBACK_SPEED,
+      options: { value: 1.5 },
+    });
+
+    expect(result).toBeUndefined();
+    expect(player.setPlaybackRate).not.toHaveBeenCalled();
+  });
+
+  it("opens playback speed through openBottomSheet with the current speed selected", async () => {
+    await speedController.setPlaybackSpeed({
+      asset: "speed_1",
+      value: 1,
+    });
+
+    const result = await actionExecutor.handleAction({
+      type: PLAYER_ACTION_TYPES.OPEN_PLAYBACK_SPEED,
+    });
+
+    expect(result).toBe(ActionResult.Success);
+
+    const sheet = openedSheets[0];
+
+    expect(sheet.options.replace).toBe(true);
+    expect(sheet.options.header.title).toBe("Playback Speed");
+    expect(sheet.options.content.role).toBe("collection_selector");
+    expect(sheet.options.content.behavior.currentSelection).toEqual(["1"]);
+
+    expect(sheet.options.content.items.map((item) => item.title)).toEqual([
+      "0.8x",
+      "1x",
+      "1.2x",
+      "1.5x",
+      "2x",
+    ]);
+
+    expect(
+      sheet.options.content.items[0].extensions.tap_actions.actions[0].options
+        .dismissSheet
+    ).toBe(true);
+  });
+
+  it("opens sleep timer with the ticking countdown header", async () => {
+    const timerDate = Date.now() + 15 * 60 * 1000;
+
+    await sleepController.setSleepTimer(
+      { label: "15 minutes", value: 15 },
+      timerDate
+    );
+
+    const result = await actionExecutor.handleAction({
+      type: PLAYER_ACTION_TYPES.OPEN_SLEEP_TIMER,
+    });
+
+    expect(result).toBe(ActionResult.Success);
+
+    const sheet = openedSheets[0];
+
+    expect(sheet.options.replace).toBe(true);
+    expect(sheet.options.header.title).toBe("Sleep Timer");
+    expect(sheet.options.header.subtitle).toBeUndefined();
+    expect(sheet.options.content.behavior.currentSelection).toEqual(["15"]);
+
+    expect(
+      sheet.options.content.items[0].extensions.tap_actions.actions[0].type
+    ).toBe(PLAYER_ACTION_TYPES.SET_SLEEP_TIMER);
+  });
+
+  it("setPlaybackSpeed applies the rate and closes the sheet when opened from the picker", async () => {
+    const result = await actionExecutor.handleAction({
+      type: PLAYER_ACTION_TYPES.SET_PLAYBACK_SPEED,
+      options: { value: 1.5, dismissSheet: true },
+    });
+
+    expect(result).toBe(ActionResult.Success);
+    expect(player.setPlaybackRate).toHaveBeenCalledWith(1.5);
+    expect(localStorage.setItem).toHaveBeenCalled();
+    expect(modalOrchestrator.close).toHaveBeenCalled();
+  });
+
+  it("setSleepTimer starts the timer, writes storage, and closes the sheet", async () => {
+    const result = await actionExecutor.handleAction({
+      type: PLAYER_ACTION_TYPES.SET_SLEEP_TIMER,
+      options: { value: 15, label: "15 minutes", dismissSheet: true },
+    });
+
+    expect(result).toBe(ActionResult.Success);
+    expect(player.startSleepTimer).toHaveBeenCalled();
+    expect(localStorage.setItem).toHaveBeenCalled();
+    expect(modalOrchestrator.close).toHaveBeenCalled();
+    expect(sleepController.currentState.timer.value).toBe(15);
+  });
+
+  it("setSleepTimer with value 0 cancels the timer", async () => {
+    await sleepController.setSleepTimer({
+      label: "15 minutes",
+      value: 15,
+    });
+
+    player.cancelSleepTimer.mockClear();
+    (localStorage.removeItem as jest.Mock).mockClear();
+    (modalOrchestrator.close as jest.Mock).mockClear();
+
+    const result = await actionExecutor.handleAction({
+      type: PLAYER_ACTION_TYPES.SET_SLEEP_TIMER,
+      options: { value: 0, label: "Off", dismissSheet: true },
+    });
+
+    expect(result).toBe(ActionResult.Success);
+    expect(player.cancelSleepTimer).toHaveBeenCalled();
+    expect(localStorage.removeItem).toHaveBeenCalled();
+    expect(sleepController.currentState.timer.value).toBe(0);
+    expect(modalOrchestrator.close).toHaveBeenCalled();
+  });
+
+  it.each([undefined, "foo"])(
+    "rejects invalid setPlaybackSpeed value %p",
+    async (value) => {
+      player.setPlaybackRate.mockClear();
+      (localStorage.setItem as jest.Mock).mockClear();
+
+      const result = await actionExecutor.handleAction({
+        type: PLAYER_ACTION_TYPES.SET_PLAYBACK_SPEED,
+        options: { value, dismissSheet: true },
+      });
+
+      expect(result).toBe(ActionResult.Error);
+      expect(player.setPlaybackRate).not.toHaveBeenCalled();
+      expect(localStorage.setItem).not.toHaveBeenCalled();
+      expect(modalOrchestrator.close).not.toHaveBeenCalled();
+    }
+  );
+
+  it.each([undefined, "foo"])(
+    "rejects invalid setSleepTimer value %p",
+    async (value) => {
+      const result = await actionExecutor.handleAction({
+        type: PLAYER_ACTION_TYPES.SET_SLEEP_TIMER,
+        options: { value, dismissSheet: true },
+      });
+
+      expect(result).toBe(ActionResult.Error);
+      expect(player.startSleepTimer).not.toHaveBeenCalled();
+      expect(localStorage.setItem).not.toHaveBeenCalled();
+      expect(modalOrchestrator.close).not.toHaveBeenCalled();
+    }
+  );
+
+  it("does not close an unrelated sheet when setPlaybackSpeed is invoked standalone", async () => {
+    const result = await actionExecutor.handleAction({
+      type: PLAYER_ACTION_TYPES.SET_PLAYBACK_SPEED,
+      options: { value: 1.5 },
+    });
+
+    expect(result).toBe(ActionResult.Success);
+    expect(player.setPlaybackRate).toHaveBeenCalledWith(1.5);
+    expect(modalOrchestrator.close).not.toHaveBeenCalled();
+  });
+
+  it("initialEntryState for sleep-timer reflects an active timer", async () => {
+    await sleepController.setSleepTimer({
+      label: "15 minutes",
+      value: 15,
+    });
+
+    const action = uiActionsRegistry.getAction(
+      PLAYER_ACTION_IDENTIFIERS.SLEEP_TIMER
+    );
+
+    expect(action.initialEntryState({} as ZappEntry)).toMatchObject({
+      state: 1,
+      asset: "sleep_timer_active",
+      label: "Sleep Timer",
+    });
+
+    const observed = await firstValueFrom(
+      action.observeEntryState({} as ZappEntry)
+    );
+
+    expect(observed).toMatchObject({
+      state: 1,
+      asset: "sleep_timer_active",
+    });
+  });
+
+  it("registers UI action identifiers that open the matching sheets", async () => {
+    await uiActionsRegistry
+      .getAction(PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED)
+      .invokeAction({} as ZappEntry);
+
+    await uiActionsRegistry
+      .getAction(PLAYER_ACTION_IDENTIFIERS.SLEEP_TIMER)
+      .invokeAction({} as ZappEntry);
+
+    expect(openedSheets.map((action) => action.options.header.title)).toEqual([
+      "Playback Speed",
+      "Sleep Timer",
+    ]);
+  });
+});

package/src/Player/AudioLayer/playerActions.ts

@@ -0,0 +1,277 @@
+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";
+
+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",
+      },
+      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/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/PlayerModal/VideoPlayerModal.tsx

@@ -12,6 +12,7 @@ import {
   VIDEO_TRANSITION_THRESHOLD,
 } from "./consts";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
 import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils";
 import {
   SafeAreaView,
@@ -100,7 +101,23 @@ export function VideoPlayerModal({
     fullscreen || pip
   );
 
+  /* Landscape is a tablet's regular orientation, so rotating it says nothing
+     about the modal mode. useOrientationEffect skips its orientation effects
+     for the same reason, via the same predicate. */
+  const skipOrientationEffects = useIsTabletLandscape();
+
+  /* Props are the only reconciliation left once the listener below is skipped,
+     and even where it runs, the mount value goes stale: remounting during
+     native fullscreen would otherwise strand the modal in that layout. Rotating
+     a tablet flips the predicate itself, so reconcile then too — the last
+     orientation event may have left the state behind. */
+  React.useEffect(() => {
+    setFullScreenMode(fullscreen || pip);
+  }, [fullscreen, pip, skipOrientationEffects]);
+
   React.useEffect(() => {
+    if (skipOrientationEffects) return;
+
     const listener = addOrientationChangeListener(({ toOrientation }) => {
       /* ignored in collapsed mode non-PiP player */
       if (collapsed && !pip) return;
@@ -110,7 +127,7 @@ export function VideoPlayerModal({
     return () => {
       listener.remove();
     };
-  }, [collapsed, pip]);
+  }, [collapsed, pip, skipOrientationEffects]);
 
   const isFullScreenOrPIP = isFullScreenMode;
 

package/src/Player/PlayerModal/__tests__/VideoPlayerModal.test.tsx

@@ -0,0 +1,160 @@
+import React from "react";
+import { Text } from "react-native";
+import { act, render, screen } from "@testing-library/react-native";
+
+/**
+ * The modal's fullscreen layout is not directly observable, but the collapsed
+ * bar is: it renders only while the modal is NOT in that layout. Every case
+ * below therefore reads `collapsedBarWrapper` as the proxy for the state under
+ * test.
+ *
+ * Why it matters: while the modal sits in the fullscreen layout, a drag still
+ * drives navigation to MINIMIZED, which docks the player and hides the native
+ * controls (see Player/index.tsx `shouldUseNativeControls`). If the layout
+ * cannot follow the mode back out, the modal is stranded on top of the tab bar
+ * with no controls and no way to restore them.
+ */
+
+let mockIsTabletLandscape = false;
+let orientationListener: ((event: any) => void) | null = null;
+const mockRemove = jest.fn();
+
+const mockAddOrientationChangeListener = jest.fn((cb) => {
+  orientationListener = cb;
+
+  return { remove: mockRemove };
+});
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/orientationHelper",
+  () => ({
+    addOrientationChangeListener: (cb) => mockAddOrientationChangeListener(cb),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet",
+  () => ({ useIsTabletLandscape: () => mockIsTabletLandscape })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useIsTablet: () => mockIsTabletLandscape,
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils",
+  () => ({ useConfiguration: () => ({ minimised_height: 60 }) })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils",
+  () => ({ PROGRESS_BAR_HEIGHT: 3 })
+);
+
+jest.mock("react-native-safe-area-context", () => {
+  const { View } = require("react-native");
+
+  return {
+    SafeAreaView: View,
+    useSafeAreaFrame: () => ({ x: 0, y: 0, width: 1024, height: 768 }),
+    useSafeAreaInsets: () => ({ top: 24, bottom: 34, left: 0, right: 0 }),
+  };
+});
+
+jest.mock("../GestureAnimatedScrollView", () => {
+  const { ScrollView } = require("react-native");
+
+  return { GestureAnimatedScrollView: ScrollView };
+});
+
+jest.mock("../styles", () => ({
+  useStyles: () => ({
+    modal: {},
+    modalWrapper: {},
+    collapsedModalBg: {},
+    modalContent: {},
+    modalContentPiP: {},
+    expandedContentContainer: {},
+    extraContentScrollView: {},
+    collapsedBarContainer: {},
+    collapsedBarWrapper: {},
+    flexNone: {},
+  }),
+}));
+
+jest.mock("../hooks", () => ({
+  useVideoModalState: () => ({
+    collapsed: false,
+    offset: { current: 700 },
+    gestureHandlerProps: {},
+    translateY: new (require("react-native").Animated.Value)(0),
+    expand: jest.fn(),
+  }),
+}));
+
+// eslint-disable-next-line import/first
+import { VideoPlayerModal } from "../VideoPlayerModal";
+
+const renderModal = (props = {}) =>
+  render(
+    <VideoPlayerModal
+      modal
+      content={<Text>content</Text>}
+      collapsedContent={<Text>collapsed</Text>}
+      style={{ width: 1024, height: 768, tabletLandscapeWidth: 600 }}
+      {...props}
+    />
+  );
+
+const collapsedBar = () => screen.queryByTestId("collapsedBarWrapper");
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  orientationListener = null;
+  mockIsTabletLandscape = false;
+});
+
+describe("VideoPlayerModal fullscreen layout", () => {
+  describe("on a tablet in landscape", () => {
+    beforeEach(() => {
+      mockIsTabletLandscape = true;
+    });
+
+    it("leaves the orientation listener alone, since landscape is its regular orientation", () => {
+      renderModal();
+
+      expect(mockAddOrientationChangeListener).not.toHaveBeenCalled();
+    });
+
+    it("follows the mode back out of fullscreen", () => {
+      const { rerender } = renderModal({ fullscreen: true });
+
+      expect(collapsedBar()).toBeNull();
+
+      rerender(
+        <VideoPlayerModal
+          modal
+          fullscreen={false}
+          content={<Text>content</Text>}
+          collapsedContent={<Text>collapsed</Text>}
+          style={{ width: 1024, height: 768, tabletLandscapeWidth: 600 }}
+        />
+      );
+
+      expect(collapsedBar()).not.toBeNull();
+    });
+  });
+
+  describe("on a phone", () => {
+    it("still lets orientation drive the layout", () => {
+      renderModal();
+
+      expect(mockAddOrientationChangeListener).toHaveBeenCalled();
+      expect(collapsedBar()).not.toBeNull();
+
+      act(() => orientationListener?.({ toOrientation: 4 }));
+
+      expect(collapsedBar()).toBeNull();
+    });
+  });
+});

package/src/Player/AudioLayer/components/SleepTimerModalHeader/SleepTimerModalHeader.tsx

@@ -1,66 +0,0 @@
-import React from "react";
-import { ModalHeader } from "@applicaster/zapp-react-native-ui-components/Components/ModalComponent/Header";
-import { isNil } from "@applicaster/zapp-react-native-utils/utils";
-
-const formatTime = (milliseconds: number) => {
-  const totalSeconds = Math.floor(milliseconds / 1000);
-  const hours = Math.floor(totalSeconds / 3600);
-  const minutes = Math.floor((totalSeconds % 3600) / 60);
-  const seconds = totalSeconds % 60;
-
-  if (milliseconds < 3600000) {
-    return `${minutes.toString().padStart(2, "0")}:${seconds
-      .toString()
-      .padStart(2, "0")}`;
-  }
-
-  return `${hours.toString().padStart(2, "0")}:${minutes
-    .toString()
-    .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
-};
-
-export const SleepTimerModalHeader = ({
-  summary,
-  ...props
-}: {
-  summary?: string;
-}) => {
-  const sleepTimerDate = +summary;
-
-  const [timeLeft, setTimeLeft] = React.useState(
-    sleepTimerDate !== 0 ? sleepTimerDate - Date.now() : 0
-  );
-
-  const showCounter = React.useMemo(() => sleepTimerDate > 0, [sleepTimerDate]);
-
-  React.useLayoutEffect(() => {
-    if (showCounter && sleepTimerDate !== 0) {
-      setTimeLeft(sleepTimerDate - Date.now());
-
-      const intervalId = setInterval(() => {
-        setTimeLeft(() => {
-          const newTimeLeft = sleepTimerDate - Date.now();
-
-          if (newTimeLeft <= 0) {
-            clearInterval(intervalId);
-
-            return 0;
-          } else {
-            return newTimeLeft;
-          }
-        });
-      }, 1000);
-
-      return () => clearInterval(intervalId);
-    } else {
-      setTimeLeft(0);
-    }
-  }, [sleepTimerDate, showCounter]);
-
-  return (
-    <ModalHeader
-      summary={!isNil(summary) ? formatTime(timeLeft) : summary}
-      {...(props as any)}
-    />
-  );
-};

package/src/Player/AudioLayer/components/SleepTimerModalHeader/index.ts

@@ -1 +0,0 @@
-export * from "./SleepTimerModalHeader";