@applicaster/quick-brick-player 15.1.13 → 15.1.15-alpha.4236143002

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "15.1.13",
+  "version": "15.1.15-alpha.4236143002",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -35,11 +35,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "15.1.9",
+    "@applicaster/quick-brick-mobile-transport-controls": "15.1.15-alpha.4236143002",
     "@applicaster/quick-brick-tv-transport-controls": "15.1.9",
-    "@applicaster/zapp-react-native-tvos-app": "15.1.13",
-    "@applicaster/zapp-react-native-ui-components": "15.1.13",
-    "@applicaster/zapp-react-native-utils": "15.1.13",
+    "@applicaster/zapp-react-native-tvos-app": "15.1.15-alpha.4236143002",
+    "@applicaster/zapp-react-native-ui-components": "15.1.15-alpha.4236143002",
+    "@applicaster/zapp-react-native-utils": "15.1.15-alpha.4236143002",
     "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/__tests__/utils.test.ts

@@ -1,14 +1,16 @@
 import {
+  controlsRowActionIdentifiers,
   nextTrackButton,
   previousTrackButton,
   usesPlaylistControls,
 } from "../utils";
+import { PLAYER_ACTION_IDENTIFIERS } from "../../../playerActions";
 
-describe("usesPlaylistControls", () => {
-  const configuredAs = (layout?: unknown): GetValue =>
-    ((key: string) =>
-      key === "player_controls_layout" ? layout : null) as unknown as GetValue;
+const configuredAs = (layout?: unknown): GetValue =>
+  ((key: string) =>
+    key === "player_controls_layout" ? layout : null) as unknown as GetValue;
 
+describe("usesPlaylistControls", () => {
   it("opts in only for the playlist controls value", () => {
     expect(usesPlaylistControls(configuredAs("playlist_controls"))).toBe(true);
   });
@@ -29,6 +31,25 @@ describe("usesPlaylistControls", () => {
   });
 });
 
+describe("controlsRowActionIdentifiers", () => {
+  it("claims playback speed and sleep timer on the default layout", () => {
+    expect(
+      controlsRowActionIdentifiers(
+        configuredAs("playback_speed_and_sleep_timer")
+      )
+    ).toEqual([
+      PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED,
+      PLAYER_ACTION_IDENTIFIERS.SLEEP_TIMER,
+    ]);
+  });
+
+  it("claims nothing when the row shows playlist controls", () => {
+    expect(
+      controlsRowActionIdentifiers(configuredAs("playlist_controls"))
+    ).toEqual([]);
+  });
+});
+
 describe("track control buttons", () => {
   it("builds a previous button using the previous_track icon", () => {
     const onPress = jest.fn();

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/Layout/Controls/utils.ts

@@ -1,3 +1,5 @@
+import { PLAYER_ACTION_IDENTIFIERS } from "../../playerActions";
+
 const playbackButtonMargins = (
   isTablet: boolean,
   isLiveShowFullControls: boolean
@@ -109,6 +111,18 @@ export const sleepButton = (props: ButtonsProps): ControlsButton =>
 export const usesPlaylistControls = (value: GetValue): boolean =>
   value("player_controls_layout") === "playlist_controls";
 
+/**
+ * Player actions this row renders as its own buttons. Consumers of the shared
+ * player action list have to filter these out to avoid showing them twice.
+ */
+export const controlsRowActionIdentifiers = (value: GetValue): string[] =>
+  usesPlaylistControls(value)
+    ? []
+    : [
+        PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED,
+        PLAYER_ACTION_IDENTIFIERS.SLEEP_TIMER,
+      ];
+
 type TrackButtonProps = ButtonsProps & { disabled?: boolean };
 
 const trackButtonByName = ({

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__/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);
+  });
+});