refactor(packages): move feature presets to subpath exports (#633)

site/src/content/docs/concepts/skins.mdx

@@ -32,11 +32,11 @@ A modern, glassy design with backdrop blur effects and polished interactions.
 
 <FrameworkCase frameworks={["react"]}>
 ```tsx
-import { createPlayer, features, Poster } from '@videojs/react';
-import { VideoSkin, Video } from '@videojs/react/video';
+import { createPlayer, Poster } from '@videojs/react';
+import { VideoSkin, Video, videoFeatures } from '@videojs/react/video';
 import '@videojs/react/video/skin.css';
 
-const Player = createPlayer({ features: [...features.video] });
+const Player = createPlayer({ features: videoFeatures });
 
 export function VideoPlayer() {
   return (
@@ -70,11 +70,11 @@ A clean, straightforward design that focuses on simplicity and clarity.
 
 <FrameworkCase frameworks={["react"]}>
 ```tsx
-import { createPlayer, features, Poster } from '@videojs/react';
-import { MinimalVideoSkin, Video } from '@videojs/react/video';
+import { createPlayer, Poster } from '@videojs/react';
+import { MinimalVideoSkin, Video, videoFeatures } from '@videojs/react/video';
 import '@videojs/react/video/minimal-skin.css';
 
-const Player = createPlayer({ features: [...features.video] });
+const Player = createPlayer({ features: videoFeatures });
 
 export function VideoPlayer() {
   return (

site/src/content/docs/reference/container-mixin.mdx

@@ -15,7 +15,7 @@ Use `ContainerMixin` when the <DocsLink slug="reference/provider-mixin">provider
 For a single element that both owns the store and attaches media, compose both mixins on the same base class:
 
 ```ts
-const { ProviderMixin, ContainerMixin } = createPlayer({ features: features.video });
+const { ProviderMixin, ContainerMixin } = createPlayer({ features: videoFeatures });
 
 class VideoPlayer extends ProviderMixin(ContainerMixin(MediaElement)) {}
 ```
@@ -29,7 +29,7 @@ On `connectedCallback`, `ContainerMixin` sets up a `MutationObserver` on its chi
 Pair `ContainerMixin` with <DocsLink slug="reference/provider-mixin">`ProviderMixin`</DocsLink> for full control over which element owns the store and which discovers the media:
 
 ```ts
-const { ProviderMixin, ContainerMixin } = createPlayer({ features: features.video });
+const { ProviderMixin, ContainerMixin } = createPlayer({ features: videoFeatures });
 
 // Provider owns the store, sits at the top
 class PlayerShell extends ProviderMixin(MediaElement) {}

site/src/content/docs/reference/html-create-player.mdx

@@ -15,7 +15,8 @@ import basicUsageHtmlTs from "@/components/docs/demos/html-create-player/html/cs
 `createPlayer` is the entry point for setting up a Video.js player with HTML custom elements. It accepts a configuration object with a `features` array and returns a typed <DocsLink slug="reference/player-controller">`PlayerController`</DocsLink>, `context`, `ProviderMixin`, `ContainerMixin`, and a `create` store factory.
 
 ```ts
-import { createPlayer, features, MediaElement } from '@videojs/html';
+import { createPlayer, MediaElement } from '@videojs/html';
+import { videoFeatures } from '@videojs/html/video';
 
 const {
   PlayerController,
@@ -23,7 +24,7 @@ const {
   ProviderMixin,
   ContainerMixin,
   create,
-} = createPlayer({ features: features.video });
+} = createPlayer({ features: videoFeatures });
 
 // Provider element: owns and publishes the store
 class VideoPlayer extends ProviderMixin(MediaElement) {}
@@ -45,7 +46,7 @@ const {
   context,
   ProviderMixin,
   ContainerMixin,
-} = createPlayer({ features: features.video });
+} = createPlayer({ features: videoFeatures });
 
 class VideoPlayer extends ProviderMixin(MediaElement) {}
 class MediaContainer extends ContainerMixin(MediaElement) {}
@@ -54,7 +55,7 @@ class MediaContainer extends ContainerMixin(MediaElement) {}
 Use a single composed element when the same element should both own the store and attach media:
 
 ```ts
-const { ProviderMixin, ContainerMixin } = createPlayer({ features: features.video });
+const { ProviderMixin, ContainerMixin } = createPlayer({ features: videoFeatures });
 
 class VideoPlayer extends ProviderMixin(ContainerMixin(MediaElement)) {}
 ```

site/src/content/docs/reference/player-context.mdx

@@ -12,6 +12,7 @@ Pass it as the second argument to `PlayerController`:
 
 ```ts
 import { PlayerController, MediaElement, playerContext, selectPlayback } from '@videojs/html';
+import { videoFeatures } from '@videojs/html/video';
 
 class PlayButton extends MediaElement {
   #playback = new PlayerController(this, playerContext, selectPlayback);
@@ -32,7 +33,7 @@ class PlayButton extends MediaElement {
 import { playerContext } from '@videojs/html';
 
 // Destructured — identical object
-const { context } = createPlayer({ features: features.video });
+const { context } = createPlayer({ features: videoFeatures });
 context === playerContext; // true
 ```
 

site/src/content/docs/reference/player-mixin.mdx

@@ -12,13 +12,14 @@ import DocsLink from "@/components/docs/DocsLink.astro";
 Old:
 
 ```ts
-const { PlayerElement, PlayerMixin } = createPlayer({ features: features.video });
+const { PlayerElement } = createPlayer({ features: videoFeatures });
+customElements.define('video-player', PlayerElement);
 ```
 
 New:
 
 ```ts
-const { ProviderMixin, ContainerMixin } = createPlayer({ features: features.video });
+const { ProviderMixin, ContainerMixin } = createPlayer({ features: videoFeatures });
 
 // Split elements
 class VideoPlayer extends ProviderMixin(MediaElement) {}

site/src/content/docs/reference/provider-mixin.mdx

@@ -19,7 +19,7 @@ Any <DocsLink slug="reference/player-controller">`PlayerController`</DocsLink> o
 Use `ProviderMixin` separate from <DocsLink slug="reference/container-mixin">`ContainerMixin`</DocsLink> when the store owner is a different element from the one containing the media. This is common in complex layouts:
 
 ```ts
-const { ProviderMixin, ContainerMixin } = createPlayer({ features: features.video });
+const { ProviderMixin, ContainerMixin } = createPlayer({ features: videoFeatures });
 
 // Layout shell owns the store
 class AppShell extends ProviderMixin(MediaElement) {}
@@ -31,7 +31,7 @@ class VideoRegion extends ContainerMixin(MediaElement) {}
 When a single element should handle both responsibilities, compose the mixins directly:
 
 ```ts
-const { ProviderMixin, ContainerMixin } = createPlayer({ features: features.video });
+const { ProviderMixin, ContainerMixin } = createPlayer({ features: videoFeatures });
 
 class VideoPlayer extends ProviderMixin(ContainerMixin(MediaElement)) {}
 ```

site/src/content/docs/reference/select-buffer.mdx

@@ -35,10 +35,11 @@ function BufferBar() {
 
 <FrameworkCase frameworks={["html"]}>
 ```ts
-import { createPlayer, features, MediaElement } from '@videojs/html';
+import { createPlayer, MediaElement } from '@videojs/html';
+import { videoFeatures } from '@videojs/html/video';
 import { selectBuffer } from '@videojs/core/dom';
 
-const { PlayerController, context } = createPlayer({ features: features.video });
+const { PlayerController, context } = createPlayer({ features: videoFeatures });
 
 class BufferBar extends MediaElement {
   #buffer = new PlayerController(this, context, selectBuffer);

site/src/content/docs/reference/select-controls.mdx

@@ -37,10 +37,11 @@ function ControlsOverlay({ children }: { children: React.ReactNode }) {
 
 <FrameworkCase frameworks={["html"]}>
 ```ts
-import { createPlayer, features, MediaElement } from '@videojs/html';
+import { createPlayer, MediaElement } from '@videojs/html';
+import { videoFeatures } from '@videojs/html/video';
 import { selectControls } from '@videojs/core/dom';
 
-const { PlayerController, context } = createPlayer({ features: features.video });
+const { PlayerController, context } = createPlayer({ features: videoFeatures });
 
 class ControlsOverlay extends MediaElement {
   #controls = new PlayerController(this, context, selectControls);

site/src/content/docs/reference/select-fullscreen.mdx

@@ -37,10 +37,11 @@ function FullscreenButton() {
 
 <FrameworkCase frameworks={["html"]}>
 ```ts
-import { createPlayer, features, MediaElement } from '@videojs/html';
+import { createPlayer, MediaElement } from '@videojs/html';
+import { videoFeatures } from '@videojs/html/video';
 import { selectFullscreen } from '@videojs/core/dom';
 
-const { PlayerController, context } = createPlayer({ features: features.video });
+const { PlayerController, context } = createPlayer({ features: videoFeatures });
 
 class FullscreenButton extends MediaElement {
   #fullscreen = new PlayerController(this, context, selectFullscreen);

site/src/content/docs/reference/select-pip.mdx

@@ -37,10 +37,11 @@ function PiPButton() {
 
 <FrameworkCase frameworks={["html"]}>
 ```ts
-import { createPlayer, features, MediaElement } from '@videojs/html';
+import { createPlayer, MediaElement } from '@videojs/html';
+import { videoFeatures } from '@videojs/html/video';
 import { selectPiP } from '@videojs/core/dom';
 
-const { PlayerController, context } = createPlayer({ features: features.video });
+const { PlayerController, context } = createPlayer({ features: videoFeatures });
 
 class PiPButton extends MediaElement {
   #pip = new PlayerController(this, context, selectPiP);

site/src/content/docs/reference/select-playback-rate.mdx

@@ -33,10 +33,11 @@ function RateDisplay() {
 
 <FrameworkCase frameworks={["html"]}>
 ```ts
-import { createPlayer, features, MediaElement } from '@videojs/html';
+import { createPlayer, MediaElement } from '@videojs/html';
+import { videoFeatures } from '@videojs/html/video';
 import { selectPlaybackRate } from '@videojs/core/dom';
 
-const { PlayerController, context } = createPlayer({ features: features.video });
+const { PlayerController, context } = createPlayer({ features: videoFeatures });
 
 class RateDisplay extends MediaElement {
   #rate = new PlayerController(this, context, selectPlaybackRate);

site/src/content/docs/reference/select-playback.mdx

@@ -33,10 +33,11 @@ function PlayButton() {
 
 <FrameworkCase frameworks={["html"]}>
 ```ts
-import { createPlayer, features, MediaElement } from '@videojs/html';
+import { createPlayer, MediaElement } from '@videojs/html';
+import { videoFeatures } from '@videojs/html/video';
 import { selectPlayback } from '@videojs/core/dom';
 
-const { PlayerController, context } = createPlayer({ features: features.video });
+const { PlayerController, context } = createPlayer({ features: videoFeatures });
 
 class PlayButton extends MediaElement {
   #playback = new PlayerController(this, context, selectPlayback);

site/src/content/docs/reference/select-source.mdx

@@ -33,10 +33,11 @@ function SourceInfo() {
 
 <FrameworkCase frameworks={["html"]}>
 ```ts
-import { createPlayer, features, MediaElement } from '@videojs/html';
+import { createPlayer, MediaElement } from '@videojs/html';
+import { videoFeatures } from '@videojs/html/video';
 import { selectSource } from '@videojs/core/dom';
 
-const { PlayerController, context } = createPlayer({ features: features.video });
+const { PlayerController, context } = createPlayer({ features: videoFeatures });
 
 class SourceInfo extends MediaElement {
   #source = new PlayerController(this, context, selectSource);

site/src/content/docs/reference/select-time.mdx

@@ -37,10 +37,11 @@ function TimeDisplay() {
 
 <FrameworkCase frameworks={["html"]}>
 ```ts
-import { createPlayer, features, MediaElement } from '@videojs/html';
+import { createPlayer, MediaElement } from '@videojs/html';
+import { videoFeatures } from '@videojs/html/video';
 import { selectTime } from '@videojs/core/dom';
 
-const { PlayerController, context } = createPlayer({ features: features.video });
+const { PlayerController, context } = createPlayer({ features: videoFeatures });
 
 class TimeDisplay extends MediaElement {
   #time = new PlayerController(this, context, selectTime);

site/src/content/docs/reference/select-volume.mdx

@@ -42,10 +42,11 @@ function VolumeSlider() {
 
 <FrameworkCase frameworks={["html"]}>
 ```ts
-import { createPlayer, features, MediaElement } from '@videojs/html';
+import { createPlayer, MediaElement } from '@videojs/html';
+import { videoFeatures } from '@videojs/html/video';
 import { selectVolume } from '@videojs/core/dom';
 
-const { PlayerController, context } = createPlayer({ features: features.video });
+const { PlayerController, context } = createPlayer({ features: videoFeatures });
 
 class VolumeSlider extends MediaElement {
   #volume = new PlayerController(this, context, selectVolume);