@videojs/react 10.0.0-rc.2 → 10.0.0-rc.3

package/docs/guides/controls.md

@@ -0,0 +1,179 @@
+# Automatically show and hide controls
+
+Show controls while the user is active, hide them during playback, and toggle them by touch.
+
+> **Note**
+>
+> Using a pre-built [skin](./skins.md)? It already includes the controls shown here. You may still need the media or player setup in this guide. The component examples are for building your own player UI from individual [components](./ui-components.md).
+
+## Recommended approach
+
+Wrap your control UI in [Controls](../reference/components/controls.md). It reads controls visibility from player state, so the whole control bar shows and hides as one unit.
+
+**App.tsx**
+
+```tsx
+import { Container, Controls, createPlayer, PlayButton, Time } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const { Player } = createPlayer({ features: videoFeatures });
+
+export default function BasicUsage() {
+  return (
+    <Player>
+      <Container className="media-container">
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
+
+        <Controls.Root>
+          <Controls.Backdrop className="controls-backdrop" />
+          <Controls.Content className="media-controls">
+            <Controls.Group className="controls-group" aria-label="Playback controls">
+              <PlayButton
+                className="button"
+                render={(props, state) => <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>}
+              />
+
+              <Time.Value type="current" className="time" />
+            </Controls.Group>
+          </Controls.Content>
+        </Controls.Root>
+      </Container>
+    </Player>
+  );
+}
+```
+
+**App.css**
+
+```css
+.media-container {
+  position: relative;
+}
+
+.media-container video {
+  width: 100%;
+}
+
+.media-controls {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  padding: 12px;
+  pointer-events: none;
+  transition: opacity 0.25s;
+}
+
+.controls-backdrop {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 45%);
+  opacity: 1;
+  transition: opacity 0.35s;
+}
+
+.controls-backdrop:not([data-visible]),
+.media-controls:not([data-visible]) {
+  opacity: 0;
+}
+
+.controls-group {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  pointer-events: auto;
+}
+
+.time {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  padding-block: 8px;
+  padding-inline: 16px;
+  font-size: 14px;
+  color: black;
+  background: rgba(255, 255, 255, 0.75);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 9999px;
+  backdrop-filter: blur(10px);
+}
+
+.button {
+  padding-block: 8px;
+  padding-inline: 16px;
+  font-size: 14px;
+  color: black;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.75);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 9999px;
+  backdrop-filter: blur(10px);
+}
+```
+
+## How it works
+
+The [controls feature](../reference/api/feature-controls.md) tracks activity on the player container:
+
+- `userActive` is `true` while the user interacts — pointer movement, keyboard input, or focus — and flips to `false` after two seconds of inactivity.
+- `controlsVisible` derives from activity and playback: controls stay visible while paused or while a remote playback session is connecting or connected, regardless of idle state.
+- `toggleControls()` flips visibility, for wiring to custom triggers.
+
+On touch devices, a tap on the media toggles the controls instead of relying on pointer movement, and mid-gesture movement doesn’t flicker visibility.
+
+The feature needs the player container for activity tracking; without a container it stays inactive and warns in development.
+
+## Availability and constraints
+
+- Activity tracking listens on the player container, so controls placed outside it don’t keep the player “active” — put control UI inside the container.
+- Keyboard focus counts as activity: controls stay reachable for keyboard and assistive-technology users while focus is inside them.
+- Touch and mouse behave differently by design — mouse movement shows controls, touch requires a tap. Test both.
+- The idle delay is fixed at two seconds.
+
+## Common variations
+
+### Always-visible controls
+
+Set `visibility="always"` on [Controls](../reference/components/controls.md). The controls stay visible and report the user as active while the feature keeps tracking activity for anything else that needs it. The packaged audio skins use this mode.
+
+```tsx
+<Controls.Root visibility="always">
+  <Controls.Content className="controls">...</Controls.Content>
+</Controls.Root>
+```
+
+### Custom show/hide styling
+
+Controls hide by state, so you own the transition. Style the visible and hidden states in CSS — fade, slide, or scale — driven by the component’s rendered state rather than re-implementing the idle timer.
+
+## Troubleshooting
+
+### Controls never hide
+
+The media is paused (controls intentionally stay visible), a remote playback session is active, an open menu or popover holds a controls lock, or something keeps triggering activity — for example a focused element inside the container receiving repeated events.
+
+### Controls don’t come back on touch
+
+A tap on the media toggles controls. If a custom overlay covers the media and swallows pointer events, taps never reach the container; let pointer events pass through decorative overlays.
+
+### Controls flicker on Android while tapping
+
+Use the skin gestures (`tap` with the `toggleControls` action) rather than adding your own tap handlers next to the built-in behavior; competing handlers invert each other. See [Add keyboard shortcuts and gestures](./keyboard-shortcuts.md).
+
+## Related pages
+
+### Components
+
+- [Controls](../reference/components/controls.md): Container component for composing and auto-hiding video player controls on user interaction
+- [Container](../reference/components/player-container.md): The player's visual and interaction surface for layout, fullscreen, focus, and user activity.
+
+### API
+
+- [Controls](../reference/api/feature-controls.md): User activity and controls visibility state for the player store
+
+### Guides
+
+- [Add keyboard shortcuts and gestures](./keyboard-shortcuts.md): Add keyboard shortcuts, tap and double-tap gestures, and on-screen feedback for input actions.
+- [Accessibility](./accessibility.md): How Video.js approaches accessibility, and what you should consider if you're deeply customizing your player

package/docs/guides/customize-skins.md

@@ -0,0 +1,153 @@
+# Customize skins
+
+Style a packaged Video.js skin or add its source to change controls, layout, styles, and interactions
+
+Start with the path that matches the change you want:
+
+| If you want to… | Use this path |
+| --- | --- |
+| Change colors, typography, sizing, or how the poster fills the player | [Style a packaged skin](#style-a-packaged-skin). The skin stays in the Video.js package, and you set its supported CSS properties. |
+| Add, remove, rearrange, or deeply restyle controls; change layout or interactions | [Style skin source](#style-skin-source). The `shadcn` CLI adds the skin source to your project so you can change it. |
+
+## Style a packaged skin
+
+Use a packaged skin’s public settings to match it to your site without copying its source into your project.
+
+### Set the skin’s styles
+
+Packaged skins expose [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for their supported visual changes. Set them on the skin or any element that contains it:
+
+```tsx
+<VideoSkin
+  style={
+    {
+      '--media-accent-color': '#f5c518',
+      '--media-border-radius': '1rem',
+    } as React.CSSProperties
+  }
+>
+  <Video src="video.mp4" />
+</VideoSkin>
+```
+
+| Property name | What it changes | Value | Example |
+| --- | --- | --- | --- |
+| `--media-accent-color` | Slider fills, highlighted controls and menu items, and primary actions | [`<color>`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `#f5c518` |
+| `--media-accent-text-color` | Text and icons shown on the accent color | [`<color>`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `black` |
+| `--media-border-color` | The hairline around the player | [`<color>`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `transparent` |
+| `--media-border-radius` | The player corner radius | A valid [border-radius value](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-radius#values) | `1rem` |
+| `--media-font-family` | The player interface font stack | A valid [font-family value](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-family) | `Roboto, sans-serif` |
+| `--media-object-fit` | How the media and poster fill the player | A valid [object-fit value](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit) | `cover` |
+| `--media-object-position` | Where the media and poster sit when they do not fill the player | A valid [object-position value](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-position) | `top` |
+| `--media-scale-unit` | The base size for skin spacing, icons, and text | [`<length>`](https://developer.mozilla.org/en-US/docs/Web/CSS/length) | `1rem` |
+
+If you omit `--media-accent-text-color`, the skins choose a contrasting text color from `--media-accent-color` using [`contrast-color()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/contrast-color). Set it only when you want a different result.
+
+The skins use [`Inter`](https://rsms.me/inter/) when your page loads it and fall back to the system UI font. Video.js does not load the webfont for you. Set `--media-font-family` to use another font.
+
+The media element and poster share `--media-object-fit` and `--media-object-position`, so a `cover` poster stays aligned with `cover` video. See [Add a poster and loading placeholder](./poster.md).
+
+### Set the color scheme
+
+The audio skins adapt their main palette for light and dark mode using [`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/light-dark). They read the inherited [`color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme), so set it on the player or an element that contains it:
+
+```css
+:root {
+  color-scheme: light dark;
+}
+```
+
+The video skins keep their dark controls in both color schemes. Only their hairline border follows the scheme, and `--media-border-color` replaces it.
+
+### Scale from the document font size
+
+The skins derive control spacing, icon sizes, and text from `--media-scale-unit`. It defaults to `16px`, so the player does not change with the document root font size or your app’s Tailwind spacing scale. Set it to `1rem` to make the interface scale from the document root font size:
+
+```css
+.player {
+  --media-scale-unit: 1rem;
+}
+```
+
+In fullscreen, the skins increase the unit up to 1.75 times on displays 1920 pixels and wider. This keeps controls legible from a distance.
+
+You can also add your own class names to the skins.
+
+### Know where packaged styling stops
+
+The properties above are the public styling settings for packaged skins. Do not depend on the elements, class names, or other custom properties inside a packaged skin. They may change between releases.
+
+Packaged video skins also let you replace the poster through the `renderPoster` prop.
+
+See [Poster](../reference/components/poster.md).
+
+Packaged skins do not provide settings for adding, removing, or rearranging controls, or for replacing built-in feedback and interactions. To make those changes, [add the source for the closest skin to your project](#style-skin-source) and edit it directly.
+
+## Style skin source
+
+If a packaged skin is close to the interface you want, add its source to your project and edit it. The source contains the skin’s controls, layout, styles, and interactions.
+
+Video.js publishes skin source in an installable catalog. The [`shadcn` CLI](https://ui.shadcn.com/docs/cli) adds that source to your project, whether you use React or HTML.
+
+The selected skin is generally placed under `components/videojs/<preset>`, with shared controls and styles alongside it under `components/videojs`. The exact root follows the components alias in `components.json`. The CLI can also install package dependencies, update `components.json`, and add shared styles to your main CSS file.
+
+> **Note**
+>
+> Commit your work before installing or updating source. You can then review every file the CLI adds or replaces.
+
+### Add the source
+
+The Shadcn installation guide handles project setup, lets you choose the skin and styling, and shows how to use the installed source in a working player.
+
+- [Install Video.js with Shadcn](./installation-shadcn.md): Add editable skin source and build a working React or HTML player
+
+### Use the installed skin
+
+The skin’s entry file is `components/videojs/<preset>/skin.tsx`. Keep importing the player and media from `@videojs/react`. Import the installed skin component from `skin.tsx`, then render it around your media where you previously rendered the packaged skin.
+
+### Edit the installed files
+
+Start with the file that owns the change you want:
+
+| Goal | Where to start |
+| --- | --- |
+| Add, remove, or rearrange controls | `skin.tsx` |
+| Change default colors, surfaces, shadows, sizes, or motion across skins | `components/videojs/styles/themes/theme.css` |
+| Change only the Minimal theme or one media preset | `components/videojs/styles/themes/minimal.css`, `components/videojs/styles/video/theme.css`, or `components/videojs/styles/audio/theme.css` |
+| Change one control’s appearance | That control’s classes or stylesheet |
+| Change one control’s interaction | That control’s module |
+
+The files for the control bar, gestures, keyboard shortcuts, settings menu, and status indicators are composed from `skin.tsx`. The UI components they use are installed as source too, so you can open and change each button or slider.
+
+The installed skin sets `data-theme` and `data-preset` on its `Container`. Keep those attributes when you replace `skin.tsx` or compose the installed UI components into a custom player. They select the theme and media-specific rules from the catalog you installed.
+
+- **Tailwind CSS.** Components use utility classes. The install adds the theme keys, utilities, and variants to your main CSS file. The skins require Tailwind CSS 4.3 or later and its default configuration. If your project prefixes Tailwind classes, update the installed components.
+- **Vanilla CSS.** Components use class names that start with `media-`, and the skin’s `skin.css` stylesheet styles them.
+
+### Inspect or update the skin source
+
+Use the CLI’s `search` command to find source and `view` to inspect it before installation:
+
+```bash
+npx shadcn@latest search @videojs --query volume
+npx shadcn@latest view @videojs/video
+```
+
+Installed files belong to your project, so an update replaces your local copy. Commit your changes, reinstall with `--overwrite`, and review the resulting version-control diff before keeping it:
+
+```bash
+npx shadcn@latest add @videojs/video --overwrite
+```
+
+To understand how skins fit into Video.js, read [Skins](./skins.md). To create a control instead of editing one, follow [Build your own component](./build-your-own-component.md).
+
+## Related pages
+
+### Components
+
+- [VideoSkin](../reference/components/video-skin.md): The video preset's default skin with the modern, frosted look
+
+### Guides
+
+- [Skins](./skins.md): Packaged player designs that include both UI components and their styles.
+- [Build your own UI component](./build-your-own-component.md): Create custom player controls that read state, dispatch actions, and stay accessible.

package/docs/guides/features.md

@@ -0,0 +1,118 @@
+# Features
+
+The state and actions each feature adds to the player
+
+Not every player needs to support every use case. To address this, Video.js has a concept of **features** — self-contained units of player functionality. Each one adds state properties and actions to the player. For example, “playback” adds `paused` and `play()`, “volume” adds `volume` and `setVolume()`, and so on.
+
+## Feature bundles and presets
+
+You probably don’t want to hand-pick every feature your player needs. A **feature bundle** groups the features needed for a specific use case into a single array.
+
+For example, the `/video` preset configures `VideoPlayer` with `videoFeatures`, which bundles playback, volume, time, fullscreen, and more — everything a general video player needs:
+
+```tsx
+import { VideoPlayer, Video, VideoSkin } from '@videojs/react/video';
+
+<VideoPlayer>
+  <VideoSkin>
+    <Video src="movie.mp4" />
+  </VideoSkin>
+</VideoPlayer>
+```
+
+Feature bundles are usually paired with specific skins and media elements in a **preset**. To learn more about this, and the available presets, you’ll want to check out the presets guide.
+
+- [Learn more about presets](./presets.md)
+
+## Individual features
+
+If you’re not using presets, you can create a player that has individual features.
+
+```tsx
+import { createPlayer, playbackFeature, volumeFeature, timeFeature, controlsFeature } from '@videojs/react';
+
+const { Player } = createPlayer({
+  features: [playbackFeature, volumeFeature, timeFeature, controlsFeature],
+});
+```
+
+## Extended feature bundles
+
+Since feature bundles are just an array of features under the hood, it doesn’t take much to extend one. For example, if you were using the `/background` preset and wanted a play button on your background video, you might add the playback feature.
+
+```tsx
+import { createPlayer, playbackFeature } from '@videojs/react';
+import { backgroundFeatures } from '@videojs/react/background';
+
+const { Player } = createPlayer({
+  features: [...backgroundFeatures, playbackFeature],
+});
+```
+
+## Features inside components
+
+You access feature state and actions through [`usePlayer`](../reference/api/use-player.md):
+
+```tsx
+// Subscribe to state (re-renders when selected values change)
+const { paused, volume } = usePlayer((s) => ({
+  paused: s.paused,
+  volume: s.volume,
+}));
+
+// Call actions
+const store = usePlayer();
+store.play();
+store.setVolume(0.8);
+```
+
+## Feature selectors
+
+Each feature also has a pre-built selector (e.g. [`selectPlayback`](../reference/api/feature-playback.md), [`selectVolume`](../reference/api/feature-volume.md)) that returns just that feature’s state and actions:
+
+```tsx
+import { selectPlayback, usePlayer } from '@videojs/react';
+
+const playback = usePlayer(selectPlayback);
+playback?.play();
+```
+
+## Feature availability
+
+Volume, fullscreen, and picture-in-picture expose availability properties because platform support varies. Volume has two independent properties: `volumeAvailability` for changing the volume level and `mutedAvailability` for toggling mute. For example, iOS Safari allows muting but doesn’t allow programmatic volume control.
+
+| Value | Meaning |
+| --- | --- |
+| `'available'` | Ready to use |
+| `'unavailable'` | Could work, not ready yet |
+| `'unsupported'` | Platform can never do this |
+
+Components that depend on availability (like [`MuteButton`](../reference/components/mute-button.md), [`PiPButton`](../reference/components/pip-button.md), and [`FullscreenButton`](../reference/components/fullscreen-button.md)) handle the three states for you:
+
+- **`unsupported`** — the button returns `null`. No CSS needed.
+- **`unavailable`** — the presentation controls stay hidden while capability detection is unresolved. Cast remains visible but disabled when its API is supported and no device is reachable.
+- **`disabled` prop** — an available button stays visible and focusable with `aria-disabled="true"` plus `data-disabled` for styling.
+- **`available`** — fully interactive.
+
+Use `data-disabled` to style the non-interactive state:
+
+```css
+.pip-button[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+```
+
+You can also check availability in JS:
+
+**PiPControl.tsx**
+
+```tsx
+function PiPControl() {
+  const availability = usePlayer((s) => s.pipAvailability);
+
+  if (availability !== 'available') return null;
+
+  return <PiPButton />;
+}
+```

package/docs/guides/fullscreen.md

@@ -0,0 +1,150 @@
+# Go fullscreen and lock orientation
+
+Present the player fullscreen with custom controls intact, and lock screen orientation on mobile.
+
+> **Note**
+>
+> Using a pre-built [skin](./skins.md)? It already includes the controls shown here. You may still need the media or player setup in this guide. The component examples are for building your own player UI from individual [components](./ui-components.md).
+
+## Recommended approach
+
+Add a [FullscreenButton](../reference/components/fullscreen-button.md) inside the player container. It requests fullscreen on the container, so everything inside it — controls, captions, overlays — stays visible in the fullscreen presentation.
+
+**App.tsx**
+
+```tsx
+import { Container, createPlayer, FullscreenButton } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const { Player } = createPlayer({ features: videoFeatures });
+
+export default function BasicUsage() {
+  return (
+    <Player>
+      <Container className="media-container">
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
+        <FullscreenButton
+          className="media-fullscreen-button"
+          render={(props, state) => <button {...props}>{state.fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}</button>}
+        />
+      </Container>
+    </Player>
+  );
+}
+```
+
+**App.css**
+
+```css
+.media-container {
+  position: relative;
+}
+
+.media-container video {
+  width: 100%;
+}
+
+.media-fullscreen-button {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  padding-block: 8px;
+  padding-inline: 20px;
+  color: black;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  backdrop-filter: blur(10px);
+}
+```
+
+## How it works
+
+The [fullscreen feature](../reference/api/feature-fullscreen.md) tracks fullscreen state and provides the actions:
+
+- `fullscreen` is `true` while the player is fullscreen, from any path — your button, native controls, or the platform presentation.
+- `fullscreenAvailability` is `'available'`, `'unavailable'`, or `'unsupported'`. It starts as `'unavailable'`, then settles to `'available'` or `'unsupported'` when the feature attaches to a media element.
+- `requestFullscreen()`, `exitFullscreen()`, and `toggleFullscreen()` change the presentation. Requests target the player container when the Fullscreen API is available, falling back to the media element’s native presentation otherwise.
+
+Fullscreen and picture-in-picture are exclusive: requesting fullscreen exits an active picture-in-picture presentation first.
+
+Style fullscreen state through the container’s `:fullscreen` pseudo-class, or through the `fullscreen` state in components.
+
+## Availability and constraints
+
+- Fullscreen requests must come from a user gesture; browsers reject requests outside one.
+- iPhone Safari has no element Fullscreen API. The player falls back to the video’s native fullscreen presentation, which shows the system player UI instead of your custom controls. iPads support element fullscreen.
+- Orientation locking requires the Screen Orientation API with lock support — in practice, Android browsers in fullscreen. iOS doesn’t support programmatic orientation lock.
+- Inside iframes, fullscreen needs `allow="fullscreen"` on the embedding iframe.
+
+## Common variations
+
+### Lock orientation while fullscreen
+
+Add `orientationLockFeature` to lock screen orientation while the player is fullscreen. It isn’t part of `videoFeatures`, so the preset `VideoPlayer` doesn’t include it. It locks to `landscape` by default and unlocks on exit.
+
+Because the feature list changes, build the player yourself with [`createPlayer`](../reference/api/create-player.md) — the escape hatch for custom feature sets:
+
+```tsx
+import { Container, createPlayer, orientationLockFeature } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const { Player } = createPlayer({
+  features: [...videoFeatures, orientationLockFeature],
+});
+
+export default function App() {
+  return (
+    <Player>
+      <Container>
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" muted playsInline />
+      </Container>
+    </Player>
+  );
+}
+```
+
+To lock to something other than `landscape`, set `orientationLockType` on the player. See the [orientation lock feature](../reference/api/feature-orientation-lock.md) reference for details.
+
+### Double-click to toggle
+
+Use the `Gesture` component — the default skins ship this exact binding. Keep the button as the accessible path; gestures are a pointer-only shortcut.
+
+```tsx
+import { Gesture } from '@videojs/react';
+
+<Gesture type="doubletap" action="toggleFullscreen" region="center" />
+```
+
+`region="center"` keeps the gesture off the left and right thirds, which the default skins reserve for double-tap seeking. See [Add keyboard shortcuts and gestures](./keyboard-shortcuts.md) for the full gesture surface.
+
+## Troubleshooting
+
+### The fullscreen request is rejected
+
+The request didn’t come from a user gesture, fullscreen is unsupported, or an embedding iframe lacks `allow="fullscreen"`.
+
+### Custom controls disappear in fullscreen on iPhone
+
+Expected: iPhone Safari uses the native video presentation, which replaces custom UI with system controls. Design mobile controls assuming this fallback.
+
+### Orientation doesn’t lock
+
+Orientation lock works in fullscreen on Android browsers; iOS doesn’t support it. Confirm `orientationLockFeature` is in your feature list.
+
+## Related pages
+
+### Components
+
+- [FullscreenButton](../reference/components/fullscreen-button.md): Accessible fullscreen toggle button with keyboard support and state reflection
+- [Container](../reference/components/player-container.md): The player's visual and interaction surface for layout, fullscreen, focus, and user activity.
+
+### API
+
+- [Fullscreen](../reference/api/feature-fullscreen.md): Fullscreen state and actions for the player store
+- [Orientation lock](../reference/api/feature-orientation-lock.md): Screen orientation locking while fullscreen is active
+
+### Guides
+
+- [Use picture-in-picture](./picture-in-picture.md): Pop the video into a floating window, with availability detection and state that tracks every entry path.