@videojs/react 10.0.0-beta.9 → 10.0.0-rc.2

package/docs/concepts/browser-support.md

@@ -0,0 +1,45 @@
+# Browser support
+
+Browsers and rendering environments supported by Video.js 10
+
+Support starts with an evergreen browser baseline and extends to the rendering environments described below.
+
+## Browser baseline
+
+Video.js 10 currently targets **evergreen browsers**: the latest two stable versions of Chrome, Firefox, Safari, and Edge.
+
+Note
+
+Video.js 10 is in beta. The browser support matrix may expand as we approach GA based on community feedback and usage data.
+
+### Why evergreen?
+
+Video.js 10 builds directly on the web platform: custom elements, CSS custom properties, anchor positioning, and modern JavaScript APIs. Targeting evergreen browsers lets us:
+
+*   **Ship smaller bundles** by avoiding polyfills and transpilation for outdated syntax
+*   **Use platform-native features** like `popover` and anchor positioning instead of JavaScript equivalents
+*   **Keep the core slim** so platform-specific adapters (HTML, React) add only what they need
+
+### Progressive enhancement
+
+When we use a platform feature that hasn’t landed in all supported browsers yet, we provide a fallback. The player works either way; the experience may differ slightly in older browsers. For example, tooltips and popovers use CSS anchor positioning where available and fall back to JavaScript-computed positioning where it isn’t.
+
+## Rendering contexts
+
+### WebViews
+
+A [WebView](https://developer.mozilla.org/en-US/docs/Glossary/WebView) is a browser engine embedded inside a native app. WebViews on iOS (WKWebView) and Android (Android WebView) can behave differently from the full browser; autoplay policies, fullscreen APIs, and hardware acceleration can vary.
+
+Video.js 10 beta targets standard browser environments. If you embed a player inside a native app, test it on each platform and WebView version you support.
+
+### Progressive Web Apps
+
+Installed Progressive Web Apps (PWAs) use the browser engine, but their standalone display mode and platform policies can affect fullscreen, media sessions, and other browser integration. Test playback both in a browser tab and in the installed app.
+
+### Smart TVs and set-top boxes
+
+TV platforms run embedded browsers with limited standards support. Video.js 10’s core is not tied to any specific platform, which makes future TV adapters possible, but TV is not a supported target today.
+
+### Server-side rendering
+
+Video.js components render valid markup on the server. Interactivity — state management, media playback, and event handling — requires the browser and kicks in after hydration.

package/docs/concepts/bundlers.md

@@ -0,0 +1,43 @@
+# Bundlers
+
+Bundler requirements for Video.js package exports, CSS, and wrapper libraries
+
+Before the browser runs your application, a bundler such as Vite combines its imports into files the browser can load. Your bundler must understand the import paths published by Video.js packages.
+
+## Package exports
+
+Each Video.js package has an `exports` field in its `package.json`. This field lists the import paths that applications and libraries can use, such as `@videojs/html/video/player` and `@videojs/react/live-video`.
+
+If an older bundler reports that one of these paths is missing or not exported, upgrade the bundler before adding an alias that bypasses the package’s public API.
+
+## Vite compatibility
+
+Use a current Vite release. Testing confirmed that Vite 5.4.19 can load Video.js JavaScript and CSS package exports. Vite 3.2.8 can load the JavaScript, but it cannot load an exported stylesheet such as `@videojs/html/video/skin.css`.
+
+Packaged HTML skins import their own styles, so an HTML application using `@videojs/html/video/skin` doesn’t need to import `skin.css` separately. The CSS limitation matters only when your application imports that stylesheet directly.
+
+## Externalize Video.js in a wrapper library
+
+You can skip this section when building an application.
+
+If you publish a library that expects its users to install Video.js separately, leave Video.js out of your library’s bundle. Rollup calls a dependency left out of the bundle **external**.
+
+Rollup’s array form matches only the exact package name, so `external: ['@videojs/html']` misses imports such as `@videojs/html/video/player`.
+
+Match the package name and everything below it instead:
+
+rollup.config.js
+
+```
+const videojsPeers = ['@videojs/html'];
+
+export default {
+  external(id) {
+    return videojsPeers.some(
+      (packageName) => id === packageName || id.startsWith(`${packageName}/`)
+    );
+  }
+};
+```
+
+Add every `@videojs/*` package your library imports directly to `videojsPeers` and list it in `peerDependencies`.

package/docs/concepts/features.md

@@ -0,0 +1,142 @@
+# 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.
+
+## Using features
+
+### 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)
+
+### Create a player with 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],
+});
+```
+
+### Extending a feature bundle
+
+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],
+});
+```
+
+### Access features in components
+
+You access feature state and actions through [`usePlayer`](../reference/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/feature-playback.md), [`selectVolume`](../reference/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();
+```
+
+### Checking for feature support
+
+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/mute-button.md), [`PiPButton`](../reference/pip-button.md), and [`FullscreenButton`](../reference/fullscreen-button.md)) handle the three states for you:
+
+*   **`unsupported`** — the HTML custom element receives the native `hidden` attribute (and `data-hidden`); React buttons return `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
+
+```
+function PiPControl() {
+  const availability = usePlayer((s) => s.pipAvailability);
+
+  if (availability !== 'available') return null;
+
+  return <PiPButton />;
+}
+```