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

package/docs/reference/api/feature-metadata.md

@@ -0,0 +1,91 @@
+# Metadata
+
+Resolved title and poster values for the player store
+
+Resolves what is playing into two values your UI can render: `title` and `poster`.
+
+`title` and `poster` each resolve independently through the same two tiers: the value you set, then the value the media reports. The first tier that holds a value wins; when neither does, the resolved value is an empty string. Because the tiers stay separate, clearing the value you set reveals the media’s, and a source that reports a poster but no title contributes to one while leaving the other empty.
+
+An empty string counts as a value and stops the chain: set `title` to `''` and the resolved title is `''`. Pass `null` to clear your value.
+
+The metadata feature is included by the `videoFeatures`, `audioFeatures`, `liveVideoFeatures`, and `liveAudioFeatures` [presets](../../guides/presets.md); apps that build a custom preset can compose it in directly.
+
+## Import
+
+```tsx
+import { metadataFeature } from '@videojs/react';
+```
+
+The `audioFeatures`, `liveAudioFeatures`, `liveVideoFeatures`, and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
+
+## API Reference
+
+### Configuration
+
+Props the Player component accepts. They exist only while this feature is selected.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `undefined \| null \| string` | — | The title to display. Takes precedence over the title the media carries. |
+| `poster` | `undefined \| null \| string` | — | The poster to display. Takes precedence over the poster the media carries. |
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `title` | `string` | The resolved content title. Set it through the player, not through the store. |
+| `poster` | `string` | The resolved poster URL, independent of the media element's own `poster`. Set it through the player, not through the store. |
+
+### Selector
+
+To just show the name of what is playing, drop in the [Title component](../components/title.md) — it reads this feature for you. Reach for the selector when building your own UI.
+
+Pass `selectMetadata` to [`usePlayer`](./use-player.md) to subscribe to metadata state. Returns `undefined` if the metadata feature is not configured.
+
+**ContentTitle.tsx**
+
+```tsx
+import { selectMetadata, usePlayer } from '@videojs/react';
+
+function ContentTitle() {
+  const metadata = usePlayer(selectMetadata);
+  if (!metadata?.title) return null;
+
+  return <h2 className="content-title">{metadata.title}</h2>;
+}
+```
+
+### Player inputs
+
+The store publishes the resolved values and takes no writes. A player input is the only way to set one.
+
+Every input is a prop on [`Player`](../components/player.md). A player built without the metadata feature has none of them, and none is forwarded.
+
+**App.tsx**
+
+```tsx
+import { Container, createPlayer } from '@videojs/react';
+import { videoFeatures } from '@videojs/react/video';
+
+const { Player } = createPlayer({ features: videoFeatures });
+
+function App({ episode }: { episode: { title: string | null; art: string | null } }) {
+  return (
+    <Player title={episode.title} poster={episode.art}>
+      <Container>
+        <video src="episode.mp4" />
+      </Container>
+    </Player>
+  );
+}
+```
+
+Passing `null` clears your value, so `title={null}` falls through to the title the media reports.
+
+### Media-reported values
+
+The media tier comes from media that reports content data and announces changes to it, and it covers `title` and `poster`. A media reports only the keys it can vouch for, so either may be absent while the other arrives. A key that never arrives means that tier never contributes, and the resolved value is whatever you set. Detaching the media clears its values; the values you set survive and apply to the next source.
+
+`poster` is the feature’s own resolved value, not the media element’s `poster` attribute. Setting one does not set the other.
+
+A low-resolution stand-in to show while the poster loads is not part of this feature. The [poster](../components/poster.md) renders an `<img>` you control, so give it a `background-image` and that shows until the poster itself paints over it. [Add a poster and loading placeholder](../../guides/poster.md) walks through that technique for each framework.

package/docs/reference/api/feature-orientation-lock.md

@@ -0,0 +1,87 @@
+# Orientation lock
+
+Screen orientation locking while fullscreen is active
+
+Locks screen orientation while fullscreen is active.
+
+## Import
+
+```tsx
+import { orientationLockFeature } from '@videojs/react';
+```
+
+No packaged [feature bundle](../../guides/presets.md) includes this feature — add it to your [`createPlayer`](./create-player.md) features yourself.
+
+## API Reference
+
+### Configuration
+
+Props the Player component accepts. They exist only while this feature is selected.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `orientationLockType` | `undefined \| null \| 'any' \| 'landscape' \| 'landscape-primary' \| 'landscape-secondary' \| 'natural' \| 'portrait' \| 'portrait-primary' \| 'portrait-secondary'` | `'landscape'` | Screen orientation type to lock while fullscreen is active. |
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `orientationLockType` | `'any' \| 'landscape' \| 'landscape-primary' \| 'landscape-secondary' \| 'natural' \| 'portrait' \| 'portrait-primary' \| 'portrait-secondary'` | Screen orientation type locked while fullscreen is active. |
+
+### Actions
+
+| Action | Type | Description |
+| --- | --- | --- |
+| `setOrientationLockType` | `(value: 'any' \| 'landscape' \| 'landscape-primary' \| 'landscape-secondary' \| 'natural' \| 'portrait' \| 'portrait-primary' \| 'portrait-secondary' \| null \| undefined) => void` | Sets the locked orientation type. A missing value, including an empty one, restores the default. |
+
+### Usage
+
+Selecting the feature adds it to the player.
+
+**player.tsx**
+
+```tsx
+import { Container, createPlayer, features } from '@videojs/react';
+import { videoFeatures } from '@videojs/react/video';
+
+export const { Player } = createPlayer({
+  features: [...videoFeatures, features.orientationLock],
+});
+```
+
+### Orientation type
+
+The feature locks to `landscape` unless the provider sets another Screen Orientation API type. The value can change while the player is running; if the screen is already locked, it re-locks to the new type.
+
+```tsx
+<Player orientationLockType="portrait">
+  <Container>
+    <Video src="/video.mp4" />
+  </Container>
+</Player>
+```
+
+Clearing the value restores `landscape`.
+
+### Selector
+
+Pass `selectOrientationLock` to [`usePlayer`](./use-player.md) to subscribe to the lock state. Returns `undefined` if the orientation lock feature is not configured.
+
+**OrientationToggle.tsx**
+
+```tsx
+import { selectOrientationLock, usePlayer } from '@videojs/react';
+
+function OrientationToggle() {
+  const lock = usePlayer(selectOrientationLock);
+  if (!lock) return null;
+
+  return (
+    <button onClick={() => lock.setOrientationLockType('portrait')}>
+      Lock portrait
+    </button>
+  );
+}
+```
+
+Unsupported browsers and rejected lock requests are ignored.

package/docs/reference/api/feature-pip.md

@@ -0,0 +1,51 @@
+# Picture-in-picture
+
+Picture-in-picture state and actions for the player store
+
+Controls picture-in-picture mode.
+
+## Import
+
+```tsx
+import { pipFeature } from '@videojs/react';
+```
+
+The `liveVideoFeatures` and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
+
+## API Reference
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `pip` | `boolean` | Whether picture-in-picture mode is currently active. |
+| `pipAvailability` | `'available' \| 'unavailable' \| 'unsupported'` | Whether picture-in-picture can be requested on this platform. |
+
+### Actions
+
+| Action | Type | Description |
+| --- | --- | --- |
+| `requestPictureInPicture` | `() => Promise<void>` | Enter picture-in-picture mode. |
+| `exitPictureInPicture` | `() => Promise<void>` | Exit picture-in-picture mode. |
+| `togglePictureInPicture` | `() => Promise<void>` | Toggle picture-in-picture mode. |
+
+### Selector
+
+Pass `selectPiP` to [`usePlayer`](./use-player.md) to subscribe to picture-in-picture state. Returns `undefined` if the PiP feature is not configured.
+
+**PiPButton.tsx**
+
+```tsx
+import { selectPiP, usePlayer } from '@videojs/react';
+
+function PiPButton() {
+  const pip = usePlayer(selectPiP);
+  if (!pip || pip.pipAvailability !== 'available') return null;
+
+  return (
+    <button onClick={pip.togglePictureInPicture}>
+      {pip.pip ? 'Exit PiP' : 'Picture-in-Picture'}
+    </button>
+  );
+}
+```

package/docs/reference/api/feature-playback-rate.md

@@ -0,0 +1,45 @@
+# Playback rate
+
+Playback speed state and actions for the player store
+
+Controls speed of playback.
+
+## Import
+
+```tsx
+import { playbackRateFeature } from '@videojs/react';
+```
+
+The `audioFeatures` and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
+
+## API Reference
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `playbackRates` | `readonly number[]` | Available playback rates. |
+| `playbackRate` | `number` | Current playback rate. |
+
+### Actions
+
+| Action | Type | Description |
+| --- | --- | --- |
+| `setPlaybackRate` | `(rate: number) => void` | Set the playback rate. |
+
+### Selector
+
+Pass `selectPlaybackRate` to [`usePlayer`](./use-player.md) to subscribe to playback rate state. Returns `undefined` if the playback rate feature is not configured.
+
+**RateDisplay.tsx**
+
+```tsx
+import { selectPlaybackRate, usePlayer } from '@videojs/react';
+
+function RateDisplay() {
+  const rate = usePlayer(selectPlaybackRate);
+  if (!rate) return null;
+
+  return <span>{rate.playbackRate}x</span>;
+}
+```

package/docs/reference/api/feature-playback.md

@@ -0,0 +1,48 @@
+# Playback
+
+Play/pause state and actions for the player store
+
+Controls play/pause state and tracks whether playback has started or is stalled.
+
+## Import
+
+```tsx
+import { playbackFeature } from '@videojs/react';
+```
+
+The `audioFeatures`, `liveAudioFeatures`, `liveVideoFeatures`, and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
+
+## API Reference
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `paused` | `boolean` | Whether playback is paused. |
+| `ended` | `boolean` | Whether playback has reached the end. |
+| `started` | `boolean` | Whether playback has started (played or seeked). |
+| `waiting` | `boolean` | Whether playback is stalled waiting for data. |
+
+### Actions
+
+| Action | Type | Description |
+| --- | --- | --- |
+| `play` | `() => Promise<void>` | Start playback. |
+| `pause` | `() => void` | Pause playback. |
+| `togglePaused` | `() => boolean` | Toggle play/pause. Returns `true` if playback started. |
+
+### Selector
+
+Pass `selectPlayback` to [`usePlayer`](./use-player.md) to subscribe to playback state. Returns `undefined` if the playback feature is not configured.
+
+**PlayButton.tsx**
+
+```tsx
+import { selectPlayback, usePlayer } from '@videojs/react';
+
+function PlayButton() {
+  const playback = usePlayer(selectPlayback);
+  if (!playback) return null;
+  return <button onClick={playback.togglePaused}>{playback.paused ? 'Play' : 'Pause'}</button>;
+}
+```

package/docs/reference/api/feature-quality.md

@@ -0,0 +1,45 @@
+# Quality
+
+Video rendition state and actions for the player store
+
+Tracks video renditions and selects a manual rendition or automatic adaptive bitrate.
+
+## Import
+
+```tsx
+import { qualityFeature } from '@videojs/react';
+```
+
+The `videoFeatures` [feature bundle](../../guides/presets.md) includes this feature.
+
+## API Reference
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `videoRenditionList` | `MediaVideoRendition[]` | Video renditions available for manual quality selection. |
+| `activeVideoRendition` | `{ id?: string; width?: number; height?: number; bitrate?: number; frameRate?: number; codec?: string; selected: boolean } \| null` | Video rendition currently playing, including when automatic ABR is selected. |
+
+### Actions
+
+| Action | Type | Description |
+| --- | --- | --- |
+| `selectVideoRendition` | `(value: string) => void` | Select a video rendition by menu value, or automatic ABR with `"auto"`. |
+
+### Selector
+
+Pass `selectQuality` to [`usePlayer`](./use-player.md) to subscribe to quality state. Returns `undefined` if the quality feature is not configured.
+
+**QualityInfo.tsx**
+
+```tsx
+import { selectQuality, usePlayer } from '@videojs/react';
+
+function QualityInfo() {
+  const quality = usePlayer(selectQuality);
+  if (!quality) return null;
+
+  return <span>{quality.videoRenditionList.length} renditions</span>;
+}
+```

package/docs/reference/api/feature-remote-playback.md

@@ -0,0 +1,51 @@
+# Remote Playback
+
+Remote playback state and actions for the player store
+
+Controls remote playback to devices like Chromecast (Chromium) and AirPlay (Safari). Exits fullscreen before initiating a remote playback session.
+
+- [Cast to AirPlay and Chromecast](../../guides/casting.md)
+
+## Import
+
+```tsx
+import { remotePlaybackFeature } from '@videojs/react';
+```
+
+The `liveVideoFeatures` and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
+
+## API Reference
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `remotePlaybackState` | `'disconnected' \| 'connecting' \| 'connected'` | Current remote playback connection state. |
+| `remotePlaybackAvailability` | `'available' \| 'unavailable' \| 'unsupported'` | Whether remote playback can be requested on this platform. |
+
+### Actions
+
+| Action | Type | Description |
+| --- | --- | --- |
+| `toggleRemotePlayback` | `() => Promise<void>` | Toggle the remote playback connection. |
+
+### Selector
+
+Pass `selectRemotePlayback` to [`usePlayer`](./use-player.md) to subscribe to remote playback state. Returns `undefined` if the remote playback feature is not configured.
+
+**CastButton.tsx**
+
+```tsx
+import { selectRemotePlayback, usePlayer } from '@videojs/react';
+
+function CastButton() {
+  const remotePlayback = usePlayer(selectRemotePlayback);
+  if (!remotePlayback || remotePlayback.remotePlaybackAvailability !== 'available') return null;
+
+  return (
+    <button onClick={remotePlayback.toggleRemotePlayback}>
+      {remotePlayback.remotePlaybackState === 'connected' ? 'Disconnect' : 'Cast'}
+    </button>
+  );
+}
+```

package/docs/reference/api/feature-source.md

@@ -0,0 +1,45 @@
+# Source
+
+Media source state and actions for the player store
+
+Tracks the current media source and readiness.
+
+## Import
+
+```tsx
+import { sourceFeature } from '@videojs/react';
+```
+
+The `audioFeatures`, `liveAudioFeatures`, `liveVideoFeatures`, and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
+
+## API Reference
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `source` | `string \| null` | Current media source URL (null if none). |
+| `canPlay` | `boolean` | Whether enough data is loaded to begin playback. |
+
+### Actions
+
+| Action | Type | Description |
+| --- | --- | --- |
+| `loadSource` | `(src: string) => string` | Load a new media source. Returns the new source URL. |
+
+### Selector
+
+Pass `selectSource` to [`usePlayer`](./use-player.md) to subscribe to source state. Returns `undefined` if the source feature is not configured.
+
+**SourceInfo.tsx**
+
+```tsx
+import { selectSource, usePlayer } from '@videojs/react';
+
+function SourceInfo() {
+  const source = usePlayer(selectSource);
+  if (!source) return null;
+
+  return <span>{source.source ?? 'No source'}</span>;
+}
+```

package/docs/reference/api/feature-stream-type.md

@@ -0,0 +1,49 @@
+# Stream type
+
+Stream delivery type (live / on-demand) state for the player store
+
+Tracks whether the current source is live, on-demand, or not known yet. Use it to choose which controls to show.
+
+`streamType` is `'live'`, `'on-demand'`, or `'unknown'`. It does not tell you how close playback is to the live edge or whether viewers can rewind.
+
+HLS media reads the stream type from the loaded playlist. If you set `streamType` yourself, your value takes priority until you set it back to `'unknown'`. Other media falls back to the browser’s duration: `Infinity` means live, a finite positive value means on-demand, and any other value means unknown.
+
+Add `streamTypeFeature` to a custom player when you need `streamType` in player state. The live presets separately include the [live feature](./feature-live.md), which tracks the live edge.
+
+## Import
+
+```tsx
+import { streamTypeFeature } from '@videojs/react';
+```
+
+No packaged [feature bundle](../../guides/presets.md) includes this feature — add it to your [`createPlayer`](./create-player.md) features yourself.
+
+## API Reference
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `streamType` | `'on-demand' \| 'live' \| 'unknown'` | Current stream delivery type. Components use this to show live-specific UI (for example, a live indicator or a "jump to live edge" button) or hide the time display. |
+
+### Selector
+
+Pass `selectStreamType` to [`usePlayer`](./use-player.md) to subscribe to stream type state. Returns `undefined` if the stream type feature is not configured.
+
+**LiveIndicator.tsx**
+
+```tsx
+import { createPlayer, selectStreamType, streamTypeFeature } from '@videojs/react';
+import { liveVideoFeatures } from '@videojs/react/live-video';
+
+const { Player, usePlayer } = createPlayer({
+  features: [...liveVideoFeatures, streamTypeFeature],
+});
+
+function LiveIndicator() {
+  const stream = usePlayer(selectStreamType);
+  if (stream?.streamType !== 'live') return null;
+
+  return <span className="live-indicator">LIVE</span>;
+}
+```

package/docs/reference/api/feature-text-tracks.md

@@ -0,0 +1,58 @@
+# Text tracks
+
+Subtitles, captions, and chapter track state for the player store
+
+Manages subtitles, captions, chapters, and thumbnail tracks.
+
+A default `kind="chapters"` track can also divide the [time slider](../components/time-slider.md) into chapter ranges and label the chapter at the current interaction position.
+
+When a thumbnail track is present, `thumbnailTrackCrossOrigin` reports the media element’s CORS mode, or `null` when the media is not CORS-enabled. [Thumbnail](../components/thumbnail.md) reads it to fetch sprite sheets the same way the browser fetched the track.
+
+## Import
+
+```tsx
+import { textTrackFeature } from '@videojs/react';
+```
+
+The `liveVideoFeatures` and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
+
+## API Reference
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `chaptersCues` | `MediaTextCue[]` | Cues from the first `kind="chapters"` track. |
+| `thumbnailCues` | `MediaTextCue[]` | Cues from the first `kind="metadata" label="thumbnails"` track. |
+| `thumbnailTrackSrc` | `string \| null` | The `<track>` element's `src` for resolving relative cue text URLs. |
+| `thumbnailTrackCrossOrigin` | `'anonymous' \| 'use-credentials' \| null` | The media element's CORS mode, mapped through the CORS-settings-attribute rules, or `null` when it is not in CORS mode. Thumbnail UI fetches the sprite sheets the cues point at with this mode, since a cross-origin `<track>` only loads at all when the media element is CORS-enabled. |
+| `textTrackList` | `MediaTextTrack[]` | All text tracks available on the media element. |
+| `subtitlesShowing` | `boolean` | Whether captions/subtitles are currently enabled. |
+
+### Actions
+
+| Action | Type | Description |
+| --- | --- | --- |
+| `toggleSubtitles` | `(forceShow?: boolean) => boolean` | Toggle captions/subtitles visibility. Showing restores the track that was last showing, or the first caption/subtitle track when there is none. Returns the new enabled value. |
+| `selectSubtitlesTrack` | `(value: string) => void` | Select a captions/subtitles track by menu value, or disable with `"off"`. |
+
+### Selector
+
+Pass `selectTextTrack` to [`usePlayer`](./use-player.md) to subscribe to text track state. Returns `undefined` if the text tracks feature is not configured.
+
+**CaptionsButton.tsx**
+
+```tsx
+import { selectTextTrack, usePlayer } from '@videojs/react';
+
+function CaptionsButton() {
+  const tracks = usePlayer(selectTextTrack);
+  if (!tracks) return null;
+
+  return (
+    <button onClick={() => tracks.toggleSubtitles()}>
+      {tracks.subtitlesShowing ? 'Hide captions' : 'Show captions'}
+    </button>
+  );
+}
+```

package/docs/reference/api/feature-time.md

@@ -0,0 +1,50 @@
+# Time
+
+Playback position and duration state for the player store
+
+Tracks playback position and duration. During live playback, the browser may report `Infinity` as the duration. The player reports the end of the last available [seekable range](./feature-buffer.md) instead, so the value stays finite and moves forward with the stream. This is the newest available time, not the length of the rewindable window; its first available time may be greater than zero. Use [live state](./feature-live.md) or [stream type](./feature-stream-type.md) to check whether the source is live.
+
+## Import
+
+```tsx
+import { timeFeature } from '@videojs/react';
+```
+
+The `audioFeatures`, `liveAudioFeatures`, `liveVideoFeatures`, and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
+
+## API Reference
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `currentTime` | `number` | Current playback position in seconds. |
+| `duration` | `number` | Total duration in seconds (0 if unknown). |
+| `seeking` | `boolean` | Whether a seek operation is in progress. |
+
+### Actions
+
+| Action | Type | Description |
+| --- | --- | --- |
+| `seek` | `(time: number) => Promise<number>` | Seek to a time in seconds. Returns the actual position after seek. |
+
+### Selector
+
+Pass `selectTime` to [`usePlayer`](./use-player.md) to subscribe to time state. Returns `undefined` if the time feature is not configured.
+
+**TimeDisplay.tsx**
+
+```tsx
+import { selectTime, usePlayer } from '@videojs/react';
+
+function TimeDisplay() {
+  const time = usePlayer(selectTime);
+  if (!time) return null;
+
+  return (
+    <span>
+      {Math.floor(time.currentTime)} / {Math.floor(time.duration)}
+    </span>
+  );
+}
+```

package/docs/reference/api/feature-volume.md

@@ -0,0 +1,59 @@
+# Volume
+
+Volume level and mute state for the player store
+
+Controls volume level and mute state. These capabilities have independent availability values because media can support mute without supporting volume-level changes.
+
+## Import
+
+```tsx
+import { volumeFeature } from '@videojs/react';
+```
+
+The `audioFeatures`, `liveAudioFeatures`, `liveVideoFeatures`, and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
+
+## API Reference
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `volume` | `number` | Volume level from 0 (silent) to 1 (max). |
+| `muted` | `boolean` | Whether audio is muted. |
+| `volumeAvailability` | `'available' \| 'unavailable' \| 'unsupported'` | Whether volume can be programmatically set on this platform. |
+| `mutedAvailability` | `'available' \| 'unavailable' \| 'unsupported'` | Whether the media can be muted. Separate from `volumeAvailability` because the two come apart: an embed can take a mute command while offering no way to set a level, and iOS Safari refuses a volume write on media that mutes perfectly well. |
+
+### Actions
+
+| Action | Type | Description |
+| --- | --- | --- |
+| `setVolume` | `(volume: number) => number` | Set volume (clamped 0-1). Returns the clamped value. |
+| `toggleMuted` | `() => boolean` | Toggle mute state. Returns the new muted value. |
+
+### Selector
+
+Pass `selectVolume` to [`usePlayer`](./use-player.md) to subscribe to volume state. Returns `undefined` if the volume feature is not configured.
+
+Check `volumeAvailability` before showing a volume-level control, and check `mutedAvailability` before showing a mute control.
+
+**VolumeSlider.tsx**
+
+```tsx
+import { selectVolume, usePlayer } from '@videojs/react';
+
+function VolumeSlider() {
+  const vol = usePlayer(selectVolume);
+  if (!vol || vol.volumeAvailability !== 'available') return null;
+
+  return (
+    <input
+      type="range"
+      min={0}
+      max={1}
+      step={0.01}
+      value={vol.volume}
+      onChange={(e) => vol.setVolume(Number(e.target.value))}
+    />
+  );
+}
+```