@applicaster/quick-brick-player 16.0.0-alpha.1212303401 → 16.0.0-alpha.1218188693

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "16.0.0-alpha.1212303401",
+  "version": "16.0.0-alpha.1218188693",
   "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": "16.0.0-rc.60",
+    "@applicaster/quick-brick-mobile-transport-controls": "16.0.0-rc.73",
     "@applicaster/quick-brick-tv-transport-controls": "16.0.0-rc.69",
-    "@applicaster/zapp-react-native-tvos-app": "16.0.0-alpha.1212303401",
-    "@applicaster/zapp-react-native-ui-components": "16.0.0-alpha.1212303401",
-    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.1212303401",
+    "@applicaster/zapp-react-native-tvos-app": "16.0.0-alpha.1218188693",
+    "@applicaster/zapp-react-native-ui-components": "16.0.0-alpha.1218188693",
+    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.1218188693",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

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/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/__tests__/playerActions.test.ts

@@ -78,6 +78,8 @@ describe("playerActions", () => {
         playback_sleep_off_label: "Off",
         sleep_timer: "sleep_timer",
         sleep_timer_active: "sleep_timer_active",
+        speed_1: "speed_1_asset_uri",
+        speed_1_5: "speed_1_5_asset_uri",
       }),
       setPlaybackRate: jest.fn(),
       startSleepTimer: jest.fn(),
@@ -325,6 +327,31 @@ describe("playerActions", () => {
     });
   });
 
+  it("initialEntryState for playback-speed uses the current speed icon asset", async () => {
+    const action = uiActionsRegistry.getAction(
+      PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED
+    );
+
+    expect(action.initialEntryState({} as ZappEntry)).toMatchObject({
+      label: "Playback Speed",
+      asset: "speed_1_asset_uri",
+    });
+
+    await speedController.setPlaybackSpeed({
+      asset: "speed_1_5",
+      value: 1.5,
+    });
+
+    const observed = await firstValueFrom(
+      action.observeEntryState({} as ZappEntry)
+    );
+
+    expect(observed).toMatchObject({
+      label: "Playback Speed",
+      asset: "speed_1_5_asset_uri",
+    });
+  });
+
   it("registers UI action identifiers that open the matching sheets", async () => {
     await uiActionsRegistry
       .getAction(PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED)

package/src/Player/AudioLayer/playerActions.ts

@@ -75,6 +75,22 @@ function sleepTimerEntryState(
   };
 }
 
+function playbackSpeedEntryState(speed: {
+  asset?: string;
+  value?: number;
+}): CellActionEntryState {
+  const config = getPlayerConfig();
+  const assetKey = speed?.asset || formatSpeed(speed?.value ?? 1);
+
+  return {
+    state: 0,
+    label: config.playback_speed_title || "Playback Speed",
+    // Manifest keys are speed_0_8 / speed_1 / … (same icons as the transport row).
+    // There is no playback_speed uploader.
+    asset: config[assetKey] || config.speed_1 || "",
+  };
+}
+
 export async function openPlaybackSpeedAction(
   speedController: SpeedController
 ): Promise<ActionResult> {
@@ -220,11 +236,12 @@ export function registerPlayerActions(options: {
       uiActionsRegistry.registerAction(
         PLAYER_ACTION_IDENTIFIERS.PLAYBACK_SPEED,
         {
-          initialEntryState: () => ({
-            state: 0,
-            label: getPlayerConfig().playback_speed_title || "Playback Speed",
-            asset: getPlayerConfig().playback_speed || "",
-          }),
+          initialEntryState: () =>
+            playbackSpeedEntryState(speedController.currentSpeed),
+          observeEntryState: () =>
+            speedController.playbackSpeed$.pipe(
+              map((speed) => playbackSpeedEntryState(speed))
+            ),
           invokeAction: async () => {
             await actionExecutor.handleAction({
               type: PLAYER_ACTION_TYPES.OPEN_PLAYBACK_SPEED,

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