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

package/docs/reference/api/create-i18n.md

@@ -0,0 +1,53 @@
+# createI18n
+
+Factory that creates framework i18n helpers with custom loading options
+
+## Import
+
+```tsx
+import { createI18n } from "@videojs/react/i18n";
+```
+
+`createI18n` returns an `I18nProvider`, `useTranslator`, and `useLocale` wired to the shared React i18n context used by the stock skins and controls. Use it when you need options such as a custom locale loader. Most apps use the default exports from `@videojs/react/i18n`.
+
+```tsx
+import { createI18n } from '@videojs/react/i18n';
+
+const loaders = {
+  ja: () => import('@videojs/react/i18n/locales/ja'),
+};
+
+const { I18nProvider, useTranslator } = createI18n({
+  loader: async (tag) => {
+    const load = loaders[tag as keyof typeof loaders];
+    return load ? (await load()).default : undefined;
+  },
+});
+
+function App() {
+  return (
+    <I18nProvider locale="ja">
+      <Controls />
+    </I18nProvider>
+  );
+}
+```
+
+## API Reference
+
+`createI18n(options?): CreateI18nResult`
+
+### Parameters
+
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `options` | `{ loader?: ((tag: string) => Promise<Partial<FlatTranslations> \| undefined>) }` | — | Optional hooks such as custom built-in locale loading. |
+
+### Return Value
+
+| Property | Type |
+| --- | --- |
+| `I18nContext` | `Context<I18nContextValue \| null>` |
+| `I18nProvider` | `((props: I18nProviderProps) => ReactNode)` |
+| `useTranslator` | `typeof useTranslator` |
+| `useLocale` | `typeof useLocale` |

package/docs/reference/api/create-player.md

@@ -0,0 +1,155 @@
+# createPlayer
+
+Factory function that creates a typed Player component and hooks
+
+## Import
+
+```tsx
+import { createPlayer } from "@videojs/react";
+import { videoFeatures } from "@videojs/react/video";
+```
+
+`createPlayer` is the entry point for setting up a Video.js player in React. It accepts a configuration object with a `features` array and returns hooks and components for building a player.
+
+The hook is typed according to the provided features, giving you full type safety for state selectors and actions.
+
+```tsx
+import { Container, createPlayer } from '@videojs/react';
+import { videoFeatures } from '@videojs/react/video';
+
+const { Player, usePlayer, useMedia } = createPlayer({
+  features: videoFeatures,
+});
+
+// Container is imported independently from createPlayer.
+```
+
+## Examples
+
+### Basic Usage
+
+**App.tsx**
+
+```tsx
+import { Container, createPlayer } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const { Player, usePlayer } = createPlayer({
+  features: videoFeatures,
+});
+
+function Controls() {
+  const store = usePlayer();
+  const paused = usePlayer((s) => s.paused);
+
+  return (
+    <div className="controls">
+      <button type="button" className="button" onClick={() => (paused ? store.play() : store.pause())}>
+        {paused ? 'Play' : 'Pause'}
+      </button>
+    </div>
+  );
+}
+
+export default function BasicUsage() {
+  return (
+    <Player>
+      <Container className="media-container">
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline />
+        <Controls />
+      </Container>
+    </Player>
+  );
+}
+```
+
+**App.css**
+
+```css
+.media-container {
+  position: relative;
+}
+
+.media-container video {
+  width: 100%;
+}
+
+.controls {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+}
+
+.button {
+  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);
+}
+```
+
+## API Reference
+
+### Video
+
+`createPlayer(config): CreatePlayerResult<VideoPlayerStore>`
+
+Create a player instance with a typed Player component and hooks.
+
+#### Parameters
+
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `config` (required) | `{ features: [PlayerFeature<MediaPlaybackState>, PlayerFeature<MediaPlaybackRateState>, PlayerFeature<MediaQualityState>, PlayerFeature<MediaAudioTrackState>, PlayerFeature<MediaVolumeState>, PlayerFeature<MediaTimeState>, PlayerFeature<MediaSourceState>, PlayerFeature<MediaBufferState>, PlayerFeature<MediaFullscreenState>, PlayerFeature<MediaPictureInPictureState>, PlayerFeature<MediaRemotePlaybackState>, PlayerFeature<MediaControlsState>, PlayerFeature<MediaTextTrackState>, PlayerFeature<MediaErrorState>, typeof metadataFeature]; displayName?: string }` | — | Player configuration with features and optional display name. |
+
+#### Return Value
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `Player` | `FC<PlayerProps<InferPlayerConfig<VideoPlayerStore>>>` | Provides a new player store to its descendants without adding a layout element. |
+| `usePlayer` | `{ (): VideoPlayerStore; <R>(selector: ((state: VideoPlayerStore['state']) => R)): R }` | Accesses the configured store, or subscribes to a selected value from it. |
+| `useMedia` | `(() => Media \| null)` | Returns the media currently attached beneath the generated Player, or `null` before attachment. |
+
+### Audio
+
+`createPlayer(config): CreatePlayerResult<AudioPlayerStore>`
+
+Create a player for audio media.
+
+#### Parameters
+
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `config` (required) | `{ features: [PlayerFeature<MediaPlaybackState>, PlayerFeature<MediaPlaybackRateState>, PlayerFeature<MediaVolumeState>, PlayerFeature<MediaTimeState>, PlayerFeature<MediaSourceState>, PlayerFeature<MediaBufferState>, PlayerFeature<MediaErrorState>, typeof metadataFeature]; displayName?: string }` | — | Player configuration with features and optional display name. |
+
+#### Return Value
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `Player` | `FC<PlayerProps<InferPlayerConfig<AudioPlayerStore>>>` | Provides a new player store to its descendants without adding a layout element. |
+| `usePlayer` | `{ (): AudioPlayerStore; <R>(selector: ((state: AudioPlayerStore['state']) => R)): R }` | Accesses the configured store, or subscribes to a selected value from it. |
+| `useMedia` | `(() => Media \| null)` | Returns the media currently attached beneath the generated Player, or `null` before attachment. |
+
+### Generic
+
+`createPlayer<const Features extends AnyPlayerFeature[]>(config): CreatePlayerResult<PlayerStore<Features>>`
+
+Create a player with custom features.
+
+#### Parameters
+
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `config` (required) | `{ features: Features; displayName?: string }` | — | Player configuration with features and optional display name. |
+
+#### Return Value
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `Player` | `FC<PlayerProps<InferPlayerConfig<PlayerStore<Features>>>>` | Provides a new player store to its descendants without adding a layout element. |
+| `usePlayer` | `{ (): PlayerStore<Features>; <R>(selector: ((state: PlayerStore<Features>['state']) => R)): R }` | Accesses the configured store, or subscribes to a selected value from it. |
+| `useMedia` | `(() => Media \| null)` | Returns the media currently attached beneath the generated Player, or `null` before attachment. |

package/docs/reference/api/create-selector.md

@@ -0,0 +1,45 @@
+# createSelector
+
+Create a type-safe selector for a store slice's state
+
+## Import
+
+```ts
+import { createSelector } from "@videojs/store";
+```
+
+`createSelector` is also re-exported from `@videojs/react` and `@videojs/html`.
+
+`createSelector` creates a type-safe selector function for a given slice. The returned selector extracts that slice’s state from the full store state, or returns `undefined` if the slice is not configured.
+
+The built-in selectors ([`selectPlayback`](./feature-playback.md), [`selectBuffer`](./feature-buffer.md), etc.) are all created with `createSelector`. Use it to create selectors for custom slices.
+
+**my-custom-selector.ts**
+
+```ts
+import { createSelector } from '@videojs/store';
+import { myCustomSlice } from './my-custom-slice';
+
+const selectCustom = createSelector(myCustomSlice);
+
+// Use with usePlayer (React) or PlayerController (HTML)
+const state = selectCustom(store.state);
+```
+
+Pass selectors to [`usePlayer`](./use-player.md) or [`useStore`](./use-store.md) for reactive subscriptions.
+
+## API Reference
+
+`createSelector<S extends AnySlice>(slice): Selector<object, InferSliceState<S> | undefined>`
+
+### Parameters
+
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `slice` (required) | `S` | — | The slice to create a selector for. |
+
+### Return Value
+
+| Type |
+| --- |
+| `{ (state: object): (S extends Slice<any, infer State, infer Derived> ? Simplify<PublicSourceState<State> & Derived> : never) \| undefined; displayName?: string }` |

package/docs/reference/api/create-translator.md

@@ -0,0 +1,36 @@
+# createTranslator
+
+Build a typed translator from a resolved translation map
+
+## Import
+
+```tsx
+import { createTranslator } from "@videojs/react/i18n";
+```
+
+`createTranslator` wraps the flat map returned by `getI18nTranslations` and returns a typed translator. Providers call this internally after merging registry, lazy-loaded built-in packs, browser-translated fallback copy, and provider layers. Use it directly for custom UI outside built-in controls.
+
+```ts
+import { createTranslator, getI18nTranslations } from '@videojs/react/i18n';
+
+const t = createTranslator(getI18nTranslations('fr'), 'fr');
+t('buttons.play', { default: 'Play' });
+t('seek.forward', { seconds: 5, default: 'Seek forward {seconds} seconds' });
+```
+
+## API Reference
+
+`createTranslator(translations, locale): Translator`
+
+### Parameters
+
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `translations` (required) | `{ [Key in TranslationKey]?: TranslationParams[Key] extends never ? string : Key extends keyof ParametricTranslations ? ParametricTranslations[Key] : string; } & Record<string, string \| undefined>` | — | Merged translation map for the active locale. |
+| `locale` (required) | `(typeof LOCALES)[number] \| string & {}` | — | BCP 47 tag associated with the map (reserved for future locale-aware behavior). |
+
+### Return Value
+
+| Type |
+| --- |
+| `{ <Key extends string>(key: Key, ...args: Key extends TranslationKey ? TranslationParams[Key] extends never ? [params?: TranslationOptions] : [params: TranslationParams[Key] & TranslationOptions] : [params?: TextParams & TranslationOptions]): string; (text: Text, params?: TextParams): string }` |

package/docs/reference/api/error-codes.md

@@ -0,0 +1,25 @@
+# Error Codes
+
+Error codes emitted by the video.js package and how to resolve them
+
+Playback failures use the [error feature](./feature-error.md) instead. See [Handle playback errors](../../guides/playback-errors.md) for application handling.
+
+## Video.js 8 Error Codes
+
+The `video.js` package throws these `VJS8_LEGACY_*` errors when code calls a Video.js 8 API that does not exist in Video.js 10. Each code identifies the old API and its Video.js 10 equivalent.
+
+- [VJS8_LEGACY_INIT](./vjs8-legacy-init.md)
+
+  `videojs()` was the Video.js 8 API. Video.js 10 has no factory; players are components you compose.
+- [VJS8_LEGACY_PLUGIN](./vjs8-legacy-plugin.md)
+
+  `videojs.registerPlugin()` was the Video.js 8 plugin system. Video.js 10 has no plugin registry.
+- [VJS8_LEGACY_COMPONENT](./vjs8-legacy-component.md)
+
+  `videojs.registerComponent()` was the Video.js 8 component tree. Video.js 10 components are custom elements and React components.
+- [VJS8_LEGACY_GET_PLAYER](./vjs8-legacy-get-player.md)
+
+  `videojs.getPlayer()` looked players up by id. Video.js 10 has no registry; hold a reference to the element.
+- [VJS8_LEGACY_OPTIONS](./vjs8-legacy-options.md)
+
+  `videojs.options` held Video.js 8 global defaults. Video.js 10 has no global; configuration lives on the components you render.

package/docs/reference/api/feature-audio-track.md

@@ -0,0 +1,44 @@
+# Audio track
+
+Audio track state and actions for the player store
+
+Tracks available audio tracks and selects the enabled track.
+
+## Import
+
+```tsx
+import { audioTrackFeature } from '@videojs/react';
+```
+
+The `videoFeatures` [feature bundle](../../guides/presets.md) includes this feature.
+
+## API Reference
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `audioTrackList` | `MediaAudioTrack[]` | Audio tracks available for manual track selection. |
+
+### Actions
+
+| Action | Type | Description |
+| --- | --- | --- |
+| `selectAudioTrack` | `(value: string) => void` | Select an audio track by menu value. |
+
+### Selector
+
+Pass `selectAudioTrack` to [`usePlayer`](./use-player.md) to subscribe to audio track state. Returns `undefined` if the audio track feature is not configured.
+
+**AudioTrackInfo.tsx**
+
+```tsx
+import { selectAudioTrack, usePlayer } from '@videojs/react';
+
+function AudioTrackInfo() {
+  const audioTrack = usePlayer(selectAudioTrack);
+  if (!audioTrack) return null;
+
+  return <span>{audioTrack.audioTrackList.length} audio tracks</span>;
+}
+```

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

@@ -0,0 +1,47 @@
+# Buffer
+
+Buffered and seekable time range state for the player store
+
+Tracks buffered and seekable time ranges. Each range is a `[start, end]` pair rather than a browser `TimeRanges` object.
+
+During live playback, `seekable` tells you which times remain available. The first start is the oldest available time, and the last end is the newest. Both values can move forward as a sliding live stream drops older video and adds new video. See [live state](./feature-live.md) for the live-edge values.
+
+## Import
+
+```tsx
+import { bufferFeature } from '@videojs/react';
+```
+
+The `audioFeatures`, `liveAudioFeatures`, `liveVideoFeatures`, and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
+
+## API Reference
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `buffered` | `[number, number][]` | Buffered time ranges as \[start, end\] tuples. |
+| `seekable` | `[number, number][]` | Seekable time ranges as \[start, end\] tuples. |
+
+### Selector
+
+Pass `selectBuffer` to [`usePlayer`](./use-player.md) to subscribe to buffer state. Returns `undefined` if the buffer feature is not configured.
+
+**BufferedRanges.tsx**
+
+```tsx
+import { selectBuffer, usePlayer } from '@videojs/react';
+
+function BufferedRanges() {
+  const buffer = usePlayer(selectBuffer);
+  if (!buffer) return null;
+
+  return (
+    <ul>
+      {buffer.buffered.map(([start, end]) => (
+        <li key={`${start}-${end}`}>{start.toFixed(1)}–{end.toFixed(1)} seconds</li>
+      ))}
+    </ul>
+  );
+}
+```

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

@@ -0,0 +1,50 @@
+# Controls
+
+User activity and controls visibility state for the player store
+
+Read-only — tracks user activity for showing and hiding controls.
+
+## Import
+
+```tsx
+import { controlsFeature } from '@videojs/react';
+```
+
+The `liveVideoFeatures` and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
+
+## API Reference
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `userActive` | `boolean` | Whether the user has recently interacted with the player. |
+| `controlsVisible` | `boolean` | Whether controls should be visible. |
+
+### Actions
+
+| Action | Type | Description |
+| --- | --- | --- |
+| `requestControlsLock` | `() => (() => void)` | Keep controls visible during a sustained interaction. The returned function releases the lock. Multiple concurrent locks are supported and each release function is idempotent. |
+| `toggleControls` | `() => boolean` | Toggle controls visibility. Returns the new `controlsVisible` value. |
+
+### Selector
+
+Pass `selectControls` to [`usePlayer`](./use-player.md) to subscribe to controls state. Returns `undefined` if the controls feature is not configured.
+
+**ControlsOverlay.tsx**
+
+```tsx
+import { selectControls, usePlayer } from '@videojs/react';
+
+function ControlsOverlay({ children }: { children: React.ReactNode }) {
+  const controls = usePlayer(selectControls);
+  if (!controls) return null;
+
+  return (
+    <div style={{ opacity: controls.controlsVisible ? 1 : 0 }}>
+      {children}
+    </div>
+  );
+}
+```

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

@@ -0,0 +1,49 @@
+# Error
+
+Media error state and actions for the player store
+
+Tracks media errors.
+
+## Import
+
+```tsx
+import { errorFeature } from '@videojs/react';
+```
+
+The `audioFeatures`, `liveAudioFeatures`, `liveVideoFeatures`, and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
+
+## API Reference
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `error` | `{ code: number; message: string } \| null` | The current media error, or null if none. |
+
+### Actions
+
+| Action | Type | Description |
+| --- | --- | --- |
+| `dismissError` | `() => void` | Dismiss the current error by clearing it. |
+
+### Selector
+
+Pass `selectError` to [`usePlayer`](./use-player.md) to subscribe to error state. Returns `undefined` if the error feature is not configured.
+
+**ErrorDisplay.tsx**
+
+```tsx
+import { selectError, usePlayer } from '@videojs/react';
+
+function ErrorDisplay() {
+  const err = usePlayer(selectError);
+  if (!err?.error) return null;
+
+  return (
+    <div>
+      <p>{err.error.message}</p>
+      <button onClick={err.dismissError}>Dismiss</button>
+    </div>
+  );
+}
+```

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

@@ -0,0 +1,67 @@
+# Fullscreen
+
+Fullscreen state and actions for the player store
+
+Controls fullscreen mode. Tries the container element first, falls back to the media element.
+
+## Import
+
+```tsx
+import { fullscreenFeature } from '@videojs/react';
+```
+
+The `liveVideoFeatures` and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.
+
+## API Reference
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `fullscreen` | `boolean` | Whether fullscreen mode is currently active. |
+| `fullscreenAvailability` | `'available' \| 'unavailable' \| 'unsupported'` | Whether fullscreen can be requested on this platform. |
+
+### Actions
+
+| Action | Type | Description |
+| --- | --- | --- |
+| `requestFullscreen` | `() => Promise<void>` | Enter fullscreen mode. Tries container first, falls back to media element. |
+| `exitFullscreen` | `() => Promise<void>` | Exit fullscreen mode. |
+| `toggleFullscreen` | `() => Promise<void>` | Toggle fullscreen mode. |
+
+### Selector
+
+Pass `selectFullscreen` to [`usePlayer`](./use-player.md) to subscribe to fullscreen state. Returns `undefined` if the fullscreen feature is not configured.
+
+**FullscreenButton.tsx**
+
+```tsx
+import { selectFullscreen, usePlayer } from '@videojs/react';
+
+function FullscreenButton() {
+  const fs = usePlayer(selectFullscreen);
+  if (!fs || fs.fullscreenAvailability !== 'available') return null;
+
+  return (
+    <button onClick={fs.toggleFullscreen}>
+      {fs.fullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+    </button>
+  );
+}
+```
+
+### Screen orientation
+
+Add [`features.orientationLock`](./feature-orientation-lock.md) to lock screen orientation while fullscreen is active. Unsupported browsers and rejected lock requests are ignored, so iOS Safari continues to use its normal fullscreen behavior.
+
+The feature locks to `landscape` unless the provider sets another Screen Orientation API type.
+
+```tsx
+<Player orientationLockType="portrait">
+  <Container>
+    <Video src="/video.mp4" />
+  </Container>
+</Player>
+```
+
+See [Orientation lock](./feature-orientation-lock.md) for the player setup.

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

@@ -0,0 +1,100 @@
+# Live
+
+Live edge state for the player store
+
+Tracks when playback is at the live edge and what kind of live window the stream provides.
+
+- `liveEdgeStart` is the playback time where the live edge begins. Playback counts as live when `currentTime` reaches this value.
+- `targetLiveWindow` describes the kind of live window. Despite its name, it does not report a number of seconds: `0` means a sliding live window, `Infinity` means a live event with playback history, and `NaN` means on-demand or not known yet.
+
+Both values are `NaN` when the media does not provide live-edge information.
+
+Use the [buffer feature](./feature-buffer.md) to find the times a viewer can seek to. Its `seekable` value contains `[start, end]` pairs. On a sliding live stream, the oldest and newest available times both move forward.
+
+The live presets do not include the [stream type feature](./feature-stream-type.md), so `selectStreamType` returns `undefined` unless you add it to a custom player.
+
+The [time feature](./feature-time.md) reports the end of the available live video as `duration`, even when the browser reports `Infinity`. To check for live playback, use `!Number.isNaN(targetLiveWindow)` instead of checking `duration`.
+
+## Import
+
+```tsx
+import { liveFeature } from '@videojs/react';
+```
+
+The `liveAudioFeatures` and `liveVideoFeatures` [feature bundles](../../guides/presets.md) include this feature.
+
+## API Reference
+
+### State
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `liveEdgeStart` | `number` | Playback time where the live edge begins. Playback is live when `currentTime >= liveEdgeStart`. `NaN` when the stream is not live or the value is unknown. |
+| `targetLiveWindow` | `number` | Describes the kind of live window available. This value is not a duration. `0` for a sliding live window, `Infinity` for a live event with playback history, and `NaN` for on-demand or unknown. |
+
+### Selector
+
+Pass `selectLive` to [`usePlayer`](./use-player.md) to subscribe to live state. Returns `undefined` if the live feature is not configured.
+
+**LiveEdgeIndicator.tsx**
+
+```tsx
+import { selectLive, selectTime, usePlayer } from '@videojs/react';
+
+function LiveEdgeIndicator() {
+  const live = usePlayer(selectLive);
+  const time = usePlayer(selectTime);
+  if (!live || Number.isNaN(live.targetLiveWindow)) return null;
+
+  const atEdge = time != null && time.currentTime >= live.liveEdgeStart;
+  return <span className="live-indicator">{atEdge ? 'LIVE' : 'BEHIND LIVE'}</span>;
+}
+```
+
+## Jump to the live edge
+
+Use the packaged live button for the usual jump-to-live behavior. It combines the live, time, and buffer features, then seeks to the end of the last `seekable` range. It also manages its accessible label and disabled state.
+
+**StationLiveButton.tsx**
+
+```tsx
+import { LiveButton } from '@videojs/react';
+
+export function StationLiveButton() {
+  return <LiveButton className="station-live-button">On air</LiveButton>;
+}
+```
+
+Put the button in your custom controls and style it there. Do not calculate the destination from `duration` or set `currentTime` to `Infinity`.
+
+If you need different behavior, you can combine the same public features yourself:
+
+- Read `targetLiveWindow` from `selectLive` to check that the source is live.
+- Read the newest available time from the last range returned by `selectBuffer`.
+- Call the `seek()` action returned by `selectTime` with that time.
+
+**CustomLiveButton.tsx**
+
+```tsx
+import { selectBuffer, selectLive, selectTime, usePlayer } from '@videojs/react';
+
+export function CustomLiveButton() {
+  const live = usePlayer(selectLive);
+  const time = usePlayer(selectTime);
+  const buffer = usePlayer(selectBuffer);
+  const newestTime = buffer?.seekable.at(-1)?.[1];
+
+  const jumpToLive = () => {
+    if (!time || newestTime === undefined || !Number.isFinite(newestTime)) return;
+    void time.seek(newestTime);
+  };
+
+  const disabled = !live || Number.isNaN(live.targetLiveWindow) || !Number.isFinite(newestTime);
+
+  return (
+    <button type="button" disabled={disabled} onClick={jumpToLive}>
+      Go live
+    </button>
+  );
+}
+```