From c92a9f914fb593f99b46c77e692fcdc59156f380 Mon Sep 17 00:00:00 2001 From: rahim Date: Fri, 27 Feb 2026 17:06:36 -0800 Subject: [PATCH] refactor(packages): move feature presets to subpath exports (#633) --- .../api-reference/references/demo-patterns.md | 8 ++--- .claude/skills/docs/patterns/code-examples.md | 18 +++++----- .../src/dom/store/features/feature.parts.ts | 28 ++------------- packages/core/src/dom/store/features/index.ts | 1 + .../core/src/dom/store/features/presets.ts | 36 +++++++++++++++++++ packages/html/package.json | 33 +++++++++++++++++ packages/html/src/define/audio/player.ts | 4 +-- packages/html/src/define/background/player.ts | 4 +-- packages/html/src/define/video/player.ts | 4 +-- packages/html/src/player/create-player.ts | 4 +-- .../src/player/tests/create-player.test-d.ts | 16 ++++----- .../src/player/tests/create-player.test.ts | 14 ++++---- packages/html/src/presets/audio.ts | 1 + packages/html/src/presets/background.ts | 1 + packages/html/src/presets/video.ts | 1 + packages/html/tsdown.config.ts | 8 +++++ .../src/player/tests/create-player.test-d.tsx | 16 ++++----- packages/react/src/presets/audio/index.ts | 1 + .../react/src/presets/background/index.ts | 1 + packages/react/src/presets/video/index.ts | 1 + .../templates/react-background/background.tsx | 6 ++-- .../sandbox/templates/react-tailwind/main.tsx | 12 +++++-- packages/sandbox/templates/react/main.tsx | 6 ++-- .../react/css/BasicUsage.tsx | 6 ++-- .../demos/controls/react/css/BasicUsage.tsx | 6 ++-- .../create-player/react/css/BasicUsage.tsx | 6 ++-- .../react/css/BasicUsage.tsx | 6 ++-- .../html-create-player/html/css/BasicUsage.ts | 4 +-- .../mute-button/react/css/BasicUsage.tsx | 6 ++-- .../mute-button/react/css/VolumeLevels.tsx | 6 ++-- .../demos/pip-button/react/css/BasicUsage.tsx | 6 ++-- .../play-button/react/css/BasicUsage.tsx | 6 ++-- .../react/css/BasicUsage.tsx | 6 ++-- .../player-controller/html/css/BasicUsage.ts | 5 +-- .../demos/poster/react/css/BasicUsage.tsx | 6 ++-- .../seek-button/react/css/BasicUsage.tsx | 6 ++-- .../demos/time/react/css/CurrentDuration.tsx | 6 ++-- .../docs/demos/time/react/css/CurrentTime.tsx | 6 ++-- .../time/react/css/CustomNegativeSign.tsx | 6 ++-- .../demos/time/react/css/CustomSeparator.tsx | 6 ++-- .../docs/demos/time/react/css/Remaining.tsx | 6 ++-- .../demos/use-media/react/css/BasicUsage.tsx | 6 ++-- .../demos/use-player/react/css/Selector.tsx | 6 ++-- .../use-player/react/css/StoreAccess.tsx | 6 ++-- .../demos/use-store/react/css/Selector.tsx | 6 ++-- .../demos/use-store/react/css/StoreAccess.tsx | 6 ++-- site/src/content/docs/concepts/skins.mdx | 12 +++---- .../docs/reference/container-mixin.mdx | 4 +-- .../docs/reference/html-create-player.mdx | 9 ++--- .../content/docs/reference/player-context.mdx | 3 +- .../content/docs/reference/player-mixin.mdx | 5 +-- .../content/docs/reference/provider-mixin.mdx | 4 +-- .../content/docs/reference/select-buffer.mdx | 5 +-- .../docs/reference/select-controls.mdx | 5 +-- .../docs/reference/select-fullscreen.mdx | 5 +-- .../src/content/docs/reference/select-pip.mdx | 5 +-- .../docs/reference/select-playback-rate.mdx | 5 +-- .../docs/reference/select-playback.mdx | 5 +-- .../content/docs/reference/select-source.mdx | 5 +-- .../content/docs/reference/select-time.mdx | 5 +-- .../content/docs/reference/select-volume.mdx | 5 +-- .../react/FrostedSkin/FrostedSkinDemo.tsx | 6 ++-- .../react/MinimalSkin/MinimalSkinDemo.tsx | 6 ++-- 63 files changed, 266 insertions(+), 187 deletions(-) create mode 100644 packages/core/src/dom/store/features/presets.ts create mode 100644 packages/html/src/presets/audio.ts create mode 100644 packages/html/src/presets/background.ts create mode 100644 packages/html/src/presets/video.ts diff --git a/.claude/skills/api-reference/references/demo-patterns.md b/.claude/skills/api-reference/references/demo-patterns.md index 3e5f3523..56535131 100644 --- a/.claude/skills/api-reference/references/demo-patterns.md +++ b/.claude/skills/api-reference/references/demo-patterns.md @@ -118,12 +118,12 @@ Import registration for: ### .tsx (component) ```tsx -import { createPlayer, features, MuteButton } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, MuteButton } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './BasicUsage.css'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); export default function BasicUsage() { return ( @@ -150,7 +150,7 @@ export default function BasicUsage() { Key patterns: -- `createPlayer({ features: [...features.video] })` creates the player +- `createPlayer({ features: videoFeatures })` creates the player - Video attributes: `autoPlay muted playsInline loop` (React camelCase) - `render` prop for state-based rendering: `render={(props, state) => ...}` - Spread `{...props}` on the rendered element for accessibility attributes diff --git a/.claude/skills/docs/patterns/code-examples.md b/.claude/skills/docs/patterns/code-examples.md index 669c971e..2b3ab74b 100644 --- a/.claude/skills/docs/patterns/code-examples.md +++ b/.claude/skills/docs/patterns/code-examples.md @@ -24,10 +24,10 @@ function App() { } // ✅ Complete — copy, paste, run -import { createPlayer, features, PlayButton } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, PlayButton } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); function App() { return ( @@ -78,10 +78,10 @@ Site pages use `` and `` to show code per framework. N **React:** ```tsx -import { createPlayer, features, PlayButton } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, PlayButton } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); export default function BasicUsage() { return ( @@ -224,11 +224,11 @@ Show which file code belongs to when multiple files are involved: ````markdown ```tsx title="App.tsx" -import { createPlayer, features, PlayButton } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, PlayButton } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './App.css'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); export default function App() { return ( diff --git a/packages/core/src/dom/store/features/feature.parts.ts b/packages/core/src/dom/store/features/feature.parts.ts index ef36e278..e847e77f 100644 --- a/packages/core/src/dom/store/features/feature.parts.ts +++ b/packages/core/src/dom/store/features/feature.parts.ts @@ -1,4 +1,3 @@ -import type { AudioFeatures, BackgroundFeatures, VideoFeatures } from '../../media/types'; import { bufferFeature } from './buffer'; import { controlsFeature } from './controls'; import { fullscreenFeature } from './fullscreen'; @@ -10,6 +9,8 @@ import { textTrackFeature } from './text-track'; import { timeFeature } from './time'; import { volumeFeature } from './volume'; +export { audioFeatures, backgroundFeatures, videoFeatures } from './presets'; + // Short aliases export { bufferFeature as buffer, @@ -23,28 +24,3 @@ export { timeFeature as time, volumeFeature as volume, }; - -export const video: VideoFeatures = [ - playbackFeature, - playbackRateFeature, - volumeFeature, - timeFeature, - sourceFeature, - bufferFeature, - fullscreenFeature, - pipFeature, - controlsFeature, - textTrackFeature, -]; - -export const audio: AudioFeatures = [ - playbackFeature, - playbackRateFeature, - volumeFeature, - timeFeature, - sourceFeature, - bufferFeature, -]; - -// TODO: Add background video features (e.g., playback, source, buffer) -export const background: BackgroundFeatures = []; diff --git a/packages/core/src/dom/store/features/index.ts b/packages/core/src/dom/store/features/index.ts index e2a0fa2c..9c7b3cb5 100644 --- a/packages/core/src/dom/store/features/index.ts +++ b/packages/core/src/dom/store/features/index.ts @@ -5,6 +5,7 @@ export * from './fullscreen'; export * from './pip'; export * from './playback'; export * from './playback-rate'; +export * from './presets'; export * from './source'; export * from './text-track'; export * from './time'; diff --git a/packages/core/src/dom/store/features/presets.ts b/packages/core/src/dom/store/features/presets.ts new file mode 100644 index 00000000..62d1064c --- /dev/null +++ b/packages/core/src/dom/store/features/presets.ts @@ -0,0 +1,36 @@ +import type { AudioFeatures, BackgroundFeatures, VideoFeatures } from '../../media/types'; +import { bufferFeature } from './buffer'; +import { controlsFeature } from './controls'; +import { fullscreenFeature } from './fullscreen'; +import { pipFeature } from './pip'; +import { playbackFeature } from './playback'; +import { playbackRateFeature } from './playback-rate'; +import { sourceFeature } from './source'; +import { textTrackFeature } from './text-track'; +import { timeFeature } from './time'; +import { volumeFeature } from './volume'; + +export const videoFeatures: VideoFeatures = [ + playbackFeature, + playbackRateFeature, + volumeFeature, + timeFeature, + sourceFeature, + bufferFeature, + fullscreenFeature, + pipFeature, + controlsFeature, + textTrackFeature, +]; + +export const audioFeatures: AudioFeatures = [ + playbackFeature, + playbackRateFeature, + volumeFeature, + timeFeature, + sourceFeature, + bufferFeature, +]; + +// TODO: Add background video features (e.g., playback, source, buffer) +export const backgroundFeatures: BackgroundFeatures = []; diff --git a/packages/html/package.json b/packages/html/package.json index 988334ee..0ab06d0c 100644 --- a/packages/html/package.json +++ b/packages/html/package.json @@ -24,6 +24,39 @@ "development": "./dist/dev/index.js", "default": "./dist/default/index.js" }, + "./video": { + "types": "./dist/dev/presets/video.d.ts", + "development": "./dist/dev/presets/video.js", + "default": "./dist/default/presets/video.js" + }, + "./video/*.css": "./dist/default/define/video/*.css", + "./video/*": { + "types": "./dist/dev/define/video/*.d.ts", + "development": "./dist/dev/define/video/*.js", + "default": "./dist/default/define/video/*.js" + }, + "./audio": { + "types": "./dist/dev/presets/audio.d.ts", + "development": "./dist/dev/presets/audio.js", + "default": "./dist/default/presets/audio.js" + }, + "./audio/*.css": "./dist/default/define/audio/*.css", + "./audio/*": { + "types": "./dist/dev/define/audio/*.d.ts", + "development": "./dist/dev/define/audio/*.js", + "default": "./dist/default/define/audio/*.js" + }, + "./background": { + "types": "./dist/dev/presets/background.d.ts", + "development": "./dist/dev/presets/background.js", + "default": "./dist/default/presets/background.js" + }, + "./background/*.css": "./dist/default/define/background/*.css", + "./background/*": { + "types": "./dist/dev/define/background/*.d.ts", + "development": "./dist/dev/define/background/*.js", + "default": "./dist/default/define/background/*.js" + }, "./ui/*": { "types": "./dist/dev/define/ui/*.d.ts", "development": "./dist/dev/define/ui/*.js", diff --git a/packages/html/src/define/audio/player.ts b/packages/html/src/define/audio/player.ts index df5b15a2..dc9ce71a 100644 --- a/packages/html/src/define/audio/player.ts +++ b/packages/html/src/define/audio/player.ts @@ -1,10 +1,10 @@ -import { features } from '@videojs/core/dom'; +import { audioFeatures } from '@videojs/core/dom'; import { createPlayer } from '../../player/create-player'; import { MediaElement } from '../../ui/media-element'; import '../media/container'; const { ProviderMixin } = createPlayer({ - features: features.audio, + features: audioFeatures, }); export class AudioPlayerElement extends ProviderMixin(MediaElement) { diff --git a/packages/html/src/define/background/player.ts b/packages/html/src/define/background/player.ts index 0f0a3fe2..329bb015 100644 --- a/packages/html/src/define/background/player.ts +++ b/packages/html/src/define/background/player.ts @@ -1,10 +1,10 @@ -import { features } from '@videojs/core/dom'; +import { backgroundFeatures } from '@videojs/core/dom'; import { createPlayer } from '../../player/create-player'; import { MediaElement } from '../../ui/media-element'; import '../media/container'; const { ProviderMixin } = createPlayer({ - features: features.background, + features: backgroundFeatures, }); export class BackgroundVideoPlayerElement extends ProviderMixin(MediaElement) { diff --git a/packages/html/src/define/video/player.ts b/packages/html/src/define/video/player.ts index a1e6408b..bebadbd8 100644 --- a/packages/html/src/define/video/player.ts +++ b/packages/html/src/define/video/player.ts @@ -1,10 +1,10 @@ -import { features } from '@videojs/core/dom'; +import { videoFeatures } from '@videojs/core/dom'; import { createPlayer } from '../../player/create-player'; import { MediaElement } from '../../ui/media-element'; import '../media/container'; const { ProviderMixin } = createPlayer({ - features: features.video, + features: videoFeatures, }); export class VideoPlayerElement extends ProviderMixin(MediaElement) { diff --git a/packages/html/src/player/create-player.ts b/packages/html/src/player/create-player.ts index 55fa2810..8b1bf8a8 100644 --- a/packages/html/src/player/create-player.ts +++ b/packages/html/src/player/create-player.ts @@ -40,11 +40,11 @@ export interface CreatePlayerResult { * * @example * ```ts - * import { features } from '@videojs/core/dom'; * import { createPlayer, MediaElement } from '@videojs/html'; + * import { videoFeatures } from '@videojs/html/video'; * * const { ProviderMixin, ContainerMixin, PlayerController, context } = createPlayer({ - * features: features.video, + * features: videoFeatures, * }); * * // Provider element: owns the store, provides context to descendants diff --git a/packages/html/src/player/tests/create-player.test-d.ts b/packages/html/src/player/tests/create-player.test-d.ts index a796be41..29c94a85 100644 --- a/packages/html/src/player/tests/create-player.test-d.ts +++ b/packages/html/src/player/tests/create-player.test-d.ts @@ -1,5 +1,5 @@ import type { AudioPlayerStore, PlayerStore, PlayerTarget, VideoPlayerStore } from '@videojs/core/dom'; -import { definePlayerFeature, features } from '@videojs/core/dom'; +import { audioFeatures, backgroundFeatures, definePlayerFeature, videoFeatures } from '@videojs/core/dom'; import type { Slice } from '@videojs/store'; import { assertType, describe, it } from 'vitest'; @@ -7,19 +7,19 @@ import { type CreatePlayerResult, createPlayer } from '../create-player'; describe('createPlayer', () => { it('resolves video features to VideoPlayerStore', () => { - const result = createPlayer({ features: features.video }); + const result = createPlayer({ features: videoFeatures }); assertType>(result); }); it('resolves audio features to AudioPlayerStore', () => { - const result = createPlayer({ features: features.audio }); + const result = createPlayer({ features: audioFeatures }); assertType>(result); }); it('resolves spread video features to VideoPlayerStore', () => { - const result = createPlayer({ features: [...features.video] }); + const result = createPlayer({ features: videoFeatures }); assertType>(result); }); @@ -48,11 +48,11 @@ describe('createPlayer', () => { }); const result = createPlayer({ - features: [...features.video, analyticsFeature], + features: [...videoFeatures, analyticsFeature], }); // Extended features fall through to the generic overload - assertType>>(result); + assertType>>(result); // The store has both video and analytics state const store = result.create(); @@ -63,7 +63,7 @@ describe('createPlayer', () => { }); it('resolves background features to generic PlayerStore', () => { - const result = createPlayer({ features: features.background }); + const result = createPlayer({ features: backgroundFeatures }); assertType>>(result); }); @@ -78,7 +78,7 @@ describe('createPlayer', () => { }); const result = createPlayer({ - features: [...features.audio, analyticsFeature], + features: [...audioFeatures, analyticsFeature], }); const store = result.create(); diff --git a/packages/html/src/player/tests/create-player.test.ts b/packages/html/src/player/tests/create-player.test.ts index 86795021..2e59ed74 100644 --- a/packages/html/src/player/tests/create-player.test.ts +++ b/packages/html/src/player/tests/create-player.test.ts @@ -1,4 +1,4 @@ -import { features } from '@videojs/core/dom'; +import { audioFeatures, backgroundFeatures, videoFeatures } from '@videojs/core/dom'; import { describe, expect, it } from 'vitest'; import { MediaElement } from '../../ui/media-element'; @@ -6,7 +6,7 @@ import { createPlayer } from '../create-player'; describe('createPlayer', () => { it('returns expected exports', () => { - const result = createPlayer({ features: features.video }); + const result = createPlayer({ features: videoFeatures }); expect(result.context).toBeDefined(); expect(result.create).toBeInstanceOf(Function); @@ -16,7 +16,7 @@ describe('createPlayer', () => { }); it('create() returns a store instance', () => { - const { create } = createPlayer({ features: features.video }); + const { create } = createPlayer({ features: videoFeatures }); const store = create(); expect(store.attach).toBeInstanceOf(Function); @@ -25,7 +25,7 @@ describe('createPlayer', () => { }); it('ProviderMixin produces a valid custom element class', () => { - const { ProviderMixin } = createPlayer({ features: features.video }); + const { ProviderMixin } = createPlayer({ features: videoFeatures }); const ProviderElement = ProviderMixin(MediaElement); expect(typeof ProviderElement).toBe('function'); @@ -33,7 +33,7 @@ describe('createPlayer', () => { }); it('ContainerMixin produces a valid custom element class', () => { - const { ContainerMixin } = createPlayer({ features: features.video }); + const { ContainerMixin } = createPlayer({ features: videoFeatures }); const ContainerElement = ContainerMixin(MediaElement); expect(typeof ContainerElement).toBe('function'); @@ -41,7 +41,7 @@ describe('createPlayer', () => { }); it('creates audio player with expected exports', () => { - const result = createPlayer({ features: features.audio }); + const result = createPlayer({ features: audioFeatures }); expect(result.context).toBeDefined(); expect(result.create).toBeInstanceOf(Function); @@ -51,7 +51,7 @@ describe('createPlayer', () => { }); it('creates background player with expected exports', () => { - const result = createPlayer({ features: features.background }); + const result = createPlayer({ features: backgroundFeatures }); expect(result.context).toBeDefined(); expect(result.create).toBeInstanceOf(Function); diff --git a/packages/html/src/presets/audio.ts b/packages/html/src/presets/audio.ts new file mode 100644 index 00000000..edcf0663 --- /dev/null +++ b/packages/html/src/presets/audio.ts @@ -0,0 +1 @@ +export { audioFeatures } from '@videojs/core/dom'; diff --git a/packages/html/src/presets/background.ts b/packages/html/src/presets/background.ts new file mode 100644 index 00000000..928fd911 --- /dev/null +++ b/packages/html/src/presets/background.ts @@ -0,0 +1 @@ +export { backgroundFeatures } from '@videojs/core/dom'; diff --git a/packages/html/src/presets/video.ts b/packages/html/src/presets/video.ts new file mode 100644 index 00000000..06871740 --- /dev/null +++ b/packages/html/src/presets/video.ts @@ -0,0 +1 @@ +export { videoFeatures } from '@videojs/core/dom'; diff --git a/packages/html/tsdown.config.ts b/packages/html/tsdown.config.ts index cd69dec7..6205192e 100644 --- a/packages/html/tsdown.config.ts +++ b/packages/html/tsdown.config.ts @@ -13,10 +13,18 @@ const defineEntries = Object.fromEntries( }) ); +const presetEntries = Object.fromEntries( + globSync('src/presets/*.ts').map((file) => { + const key = file.replace('src/', '').replace('.ts', ''); + return [key, file]; + }) +); + const createConfig = (mode: BuildMode): UserConfig => ({ entry: { index: 'src/index.ts', ...defineEntries, + ...presetEntries, }, platform: 'browser', format: 'es', diff --git a/packages/react/src/player/tests/create-player.test-d.tsx b/packages/react/src/player/tests/create-player.test-d.tsx index 280373cb..8da86650 100644 --- a/packages/react/src/player/tests/create-player.test-d.tsx +++ b/packages/react/src/player/tests/create-player.test-d.tsx @@ -1,5 +1,5 @@ import type { AudioPlayerStore, PlayerStore, PlayerTarget, VideoPlayerStore } from '@videojs/core/dom'; -import { definePlayerFeature, features } from '@videojs/core/dom'; +import { audioFeatures, definePlayerFeature, videoFeatures } from '@videojs/core/dom'; import type { Slice } from '@videojs/store'; import { assertType, describe, it } from 'vitest'; @@ -7,19 +7,19 @@ import { type CreatePlayerResult, createPlayer } from '../create-player'; describe('createPlayer', () => { it('resolves video features to VideoPlayerStore', () => { - const result = createPlayer({ features: features.video }); + const result = createPlayer({ features: videoFeatures }); assertType>(result); }); it('resolves audio features to AudioPlayerStore', () => { - const result = createPlayer({ features: features.audio }); + const result = createPlayer({ features: audioFeatures }); assertType>(result); }); it('resolves spread video features to VideoPlayerStore', () => { - const result = createPlayer({ features: [...features.video] }); + const result = createPlayer({ features: videoFeatures }); assertType>(result); }); @@ -48,11 +48,11 @@ describe('createPlayer', () => { }); const result = createPlayer({ - features: [...features.video, analyticsFeature], + features: [...videoFeatures, analyticsFeature], }); // Extended features fall through to the generic overload - assertType>>(result); + assertType>>(result); }); it('resolves extended audio features to generic PlayerStore', () => { @@ -65,9 +65,9 @@ describe('createPlayer', () => { }); const result = createPlayer({ - features: [...features.audio, analyticsFeature], + features: [...audioFeatures, analyticsFeature], }); - assertType>>(result); + assertType>>(result); }); }); diff --git a/packages/react/src/presets/audio/index.ts b/packages/react/src/presets/audio/index.ts index d8ec0bfc..90b4c9bc 100644 --- a/packages/react/src/presets/audio/index.ts +++ b/packages/react/src/presets/audio/index.ts @@ -1,3 +1,4 @@ +export { audioFeatures } from '@videojs/core/dom'; export { Audio, type AudioProps } from '@/media/audio'; export * from './minimal-skin'; export * from './skin'; diff --git a/packages/react/src/presets/background/index.ts b/packages/react/src/presets/background/index.ts index ead7edd5..6a85b963 100644 --- a/packages/react/src/presets/background/index.ts +++ b/packages/react/src/presets/background/index.ts @@ -1,2 +1,3 @@ +export { backgroundFeatures } from '@videojs/core/dom'; export { BackgroundVideo, type BackgroundVideoProps } from '@/media/background-video'; export * from './skin'; diff --git a/packages/react/src/presets/video/index.ts b/packages/react/src/presets/video/index.ts index 1b5f3ff1..3e2c1ca5 100644 --- a/packages/react/src/presets/video/index.ts +++ b/packages/react/src/presets/video/index.ts @@ -1,3 +1,4 @@ +export { videoFeatures } from '@videojs/core/dom'; export { Video, type VideoProps } from '@/media/video'; export * from './minimal-skin'; export * from './minimal-skin.tailwind'; diff --git a/packages/sandbox/templates/react-background/background.tsx b/packages/sandbox/templates/react-background/background.tsx index c9ccf13e..7ed60e6f 100644 --- a/packages/sandbox/templates/react-background/background.tsx +++ b/packages/sandbox/templates/react-background/background.tsx @@ -1,10 +1,10 @@ import '@videojs/react/background/skin.css'; -import { createPlayer, features } from '@videojs/react'; -import { BackgroundVideo, BackgroundVideoSkin } from '@videojs/react/background'; +import { createPlayer } from '@videojs/react'; +import { BackgroundVideo, BackgroundVideoSkin, backgroundFeatures } from '@videojs/react/background'; import { createRoot } from 'react-dom/client'; const { Provider: BackgroundVideoProvider } = createPlayer({ - features: features.background, + features: backgroundFeatures, }); export function App() { diff --git a/packages/sandbox/templates/react-tailwind/main.tsx b/packages/sandbox/templates/react-tailwind/main.tsx index 7f20eea7..6bccdcb8 100644 --- a/packages/sandbox/templates/react-tailwind/main.tsx +++ b/packages/sandbox/templates/react-tailwind/main.tsx @@ -1,15 +1,21 @@ // React & Tailwind Sandbox // http://localhost:5173/react-tailwind/ -import { createPlayer, features } from '@videojs/react'; -import { MinimalVideoSkinTailwind, Video, type VideoSkinProps, VideoSkinTailwind } from '@videojs/react/video'; +import { createPlayer } from '@videojs/react'; +import { + MinimalVideoSkinTailwind, + Video, + type VideoSkinProps, + VideoSkinTailwind, + videoFeatures, +} from '@videojs/react/video'; import { useState } from 'react'; import { createRoot } from 'react-dom/client'; import { SKINS } from '../constants'; import type { Skin } from '../types'; const { Provider } = createPlayer({ - features: features.video, + features: videoFeatures, }); function SkinComponent({ skin, ...props }: { skin: Skin } & VideoSkinProps) { diff --git a/packages/sandbox/templates/react/main.tsx b/packages/sandbox/templates/react/main.tsx index 225fce65..439ff5ed 100644 --- a/packages/sandbox/templates/react/main.tsx +++ b/packages/sandbox/templates/react/main.tsx @@ -1,8 +1,8 @@ // React sandbox — React player // http://localhost:5173/react/ -import { createPlayer, features } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import { useState } from 'react'; import { createRoot } from 'react-dom/client'; import { SKINS } from '../constants'; @@ -10,7 +10,7 @@ import type { Skin } from '../types'; import { SkinComponent } from './skins'; const { Provider } = createPlayer({ - features: features.video, + features: videoFeatures, }); function App() { diff --git a/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx b/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx index 29616935..a5738c80 100644 --- a/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx +++ b/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx @@ -1,9 +1,9 @@ -import { BufferingIndicator, createPlayer, features } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { BufferingIndicator, createPlayer } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './BasicUsage.css'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); export default function BasicUsage() { return ( diff --git a/site/src/components/docs/demos/controls/react/css/BasicUsage.tsx b/site/src/components/docs/demos/controls/react/css/BasicUsage.tsx index c98d2cfa..b955134a 100644 --- a/site/src/components/docs/demos/controls/react/css/BasicUsage.tsx +++ b/site/src/components/docs/demos/controls/react/css/BasicUsage.tsx @@ -1,9 +1,9 @@ -import { Controls, createPlayer, features, PlayButton, Time } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { Controls, createPlayer, PlayButton, Time } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './BasicUsage.css'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); export default function BasicUsage() { return ( diff --git a/site/src/components/docs/demos/create-player/react/css/BasicUsage.tsx b/site/src/components/docs/demos/create-player/react/css/BasicUsage.tsx index 46c0c769..71743f90 100644 --- a/site/src/components/docs/demos/create-player/react/css/BasicUsage.tsx +++ b/site/src/components/docs/demos/create-player/react/css/BasicUsage.tsx @@ -1,10 +1,10 @@ -import { createPlayer, features } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './BasicUsage.css'; const { Provider, Container, usePlayer } = createPlayer({ - features: features.video, + features: videoFeatures, }); function Controls() { diff --git a/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx index 5da6e275..108eb024 100644 --- a/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx +++ b/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx @@ -1,9 +1,9 @@ -import { createPlayer, FullscreenButton, features } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, FullscreenButton } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './BasicUsage.css'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); export default function BasicUsage() { return ( diff --git a/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.ts b/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.ts index 14f6ba0e..1b53677b 100644 --- a/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.ts +++ b/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.ts @@ -3,14 +3,14 @@ import { applyStateDataAttrs, createButton, createPlayer, - features, MediaElement, selectPlayback, } from '@videojs/html'; +import { videoFeatures } from '@videojs/html/video'; import '@videojs/html/media/container'; const { ProviderMixin, PlayerController, context } = createPlayer({ - features: [...features.video], + features: videoFeatures, }); class VideoPlayer extends ProviderMixin(MediaElement) { diff --git a/site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx index 5d34a53d..5fa98b42 100644 --- a/site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx +++ b/site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx @@ -1,9 +1,9 @@ -import { createPlayer, features, MuteButton } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, MuteButton } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './BasicUsage.css'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); export default function BasicUsage() { return ( diff --git a/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.tsx b/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.tsx index 3ddc92d2..decc67cb 100644 --- a/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.tsx +++ b/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.tsx @@ -1,9 +1,9 @@ -import { createPlayer, features, MuteButton } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, MuteButton } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './VolumeLevels.css'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); export default function VolumeLevels() { return ( diff --git a/site/src/components/docs/demos/pip-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/pip-button/react/css/BasicUsage.tsx index e845e1f6..9628a4bc 100644 --- a/site/src/components/docs/demos/pip-button/react/css/BasicUsage.tsx +++ b/site/src/components/docs/demos/pip-button/react/css/BasicUsage.tsx @@ -1,9 +1,9 @@ -import { createPlayer, features, PiPButton } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, PiPButton } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './BasicUsage.css'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); export default function BasicUsage() { return ( diff --git a/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx index 9a815419..d3f0a723 100644 --- a/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx +++ b/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx @@ -1,9 +1,9 @@ -import { createPlayer, features, PlayButton } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, PlayButton } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './BasicUsage.css'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); export default function BasicUsage() { return ( diff --git a/site/src/components/docs/demos/playback-rate-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/playback-rate-button/react/css/BasicUsage.tsx index 880a8c7a..47e37053 100644 --- a/site/src/components/docs/demos/playback-rate-button/react/css/BasicUsage.tsx +++ b/site/src/components/docs/demos/playback-rate-button/react/css/BasicUsage.tsx @@ -1,9 +1,9 @@ -import { createPlayer, features, PlaybackRateButton } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, PlaybackRateButton } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './BasicUsage.css'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); export default function BasicUsage() { return ( diff --git a/site/src/components/docs/demos/player-controller/html/css/BasicUsage.ts b/site/src/components/docs/demos/player-controller/html/css/BasicUsage.ts index 5df3dda4..90ad8b41 100644 --- a/site/src/components/docs/demos/player-controller/html/css/BasicUsage.ts +++ b/site/src/components/docs/demos/player-controller/html/css/BasicUsage.ts @@ -1,8 +1,9 @@ -import { applyElementProps, createButton, createPlayer, features, MediaElement } from '@videojs/html'; +import { applyElementProps, createButton, createPlayer, MediaElement } from '@videojs/html'; +import { videoFeatures } from '@videojs/html/video'; import '@videojs/html/media/container'; const { ProviderMixin, PlayerController, context } = createPlayer({ - features: [...features.video], + features: videoFeatures, }); class DemoPlayer extends ProviderMixin(MediaElement) { diff --git a/site/src/components/docs/demos/poster/react/css/BasicUsage.tsx b/site/src/components/docs/demos/poster/react/css/BasicUsage.tsx index 532e2835..595a9ffb 100644 --- a/site/src/components/docs/demos/poster/react/css/BasicUsage.tsx +++ b/site/src/components/docs/demos/poster/react/css/BasicUsage.tsx @@ -1,9 +1,9 @@ -import { createPlayer, features, PlayButton, Poster } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, PlayButton, Poster } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './BasicUsage.css'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); export default function BasicUsage() { return ( diff --git a/site/src/components/docs/demos/seek-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/seek-button/react/css/BasicUsage.tsx index 04f325cc..935b66c5 100644 --- a/site/src/components/docs/demos/seek-button/react/css/BasicUsage.tsx +++ b/site/src/components/docs/demos/seek-button/react/css/BasicUsage.tsx @@ -1,9 +1,9 @@ -import { createPlayer, features, SeekButton } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, SeekButton } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './BasicUsage.css'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); export default function BasicUsage() { return ( diff --git a/site/src/components/docs/demos/time/react/css/CurrentDuration.tsx b/site/src/components/docs/demos/time/react/css/CurrentDuration.tsx index b815fd53..347e5ab5 100644 --- a/site/src/components/docs/demos/time/react/css/CurrentDuration.tsx +++ b/site/src/components/docs/demos/time/react/css/CurrentDuration.tsx @@ -1,9 +1,9 @@ -import { createPlayer, features, Time } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, Time } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './CurrentDuration.css'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); export default function CurrentDuration() { return ( diff --git a/site/src/components/docs/demos/time/react/css/CurrentTime.tsx b/site/src/components/docs/demos/time/react/css/CurrentTime.tsx index 1f8d1c6a..e7f3618f 100644 --- a/site/src/components/docs/demos/time/react/css/CurrentTime.tsx +++ b/site/src/components/docs/demos/time/react/css/CurrentTime.tsx @@ -1,9 +1,9 @@ -import { createPlayer, features, Time } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, Time } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './CurrentTime.css'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); export default function CurrentTime() { return ( diff --git a/site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx index fd7b423d..d72353ce 100644 --- a/site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx +++ b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx @@ -1,9 +1,9 @@ -import { createPlayer, features, Time } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, Time } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './CustomNegativeSign.css'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); export default function CustomNegativeSign() { return ( diff --git a/site/src/components/docs/demos/time/react/css/CustomSeparator.tsx b/site/src/components/docs/demos/time/react/css/CustomSeparator.tsx index 66f462a0..76b2a613 100644 --- a/site/src/components/docs/demos/time/react/css/CustomSeparator.tsx +++ b/site/src/components/docs/demos/time/react/css/CustomSeparator.tsx @@ -1,9 +1,9 @@ -import { createPlayer, features, Time } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, Time } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './CustomSeparator.css'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); export default function CustomSeparator() { return ( diff --git a/site/src/components/docs/demos/time/react/css/Remaining.tsx b/site/src/components/docs/demos/time/react/css/Remaining.tsx index b9421167..20696658 100644 --- a/site/src/components/docs/demos/time/react/css/Remaining.tsx +++ b/site/src/components/docs/demos/time/react/css/Remaining.tsx @@ -1,9 +1,9 @@ -import { createPlayer, features, Time } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, Time } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './Remaining.css'; -const Player = createPlayer({ features: [...features.video] }); +const Player = createPlayer({ features: videoFeatures }); export default function Remaining() { return ( diff --git a/site/src/components/docs/demos/use-media/react/css/BasicUsage.tsx b/site/src/components/docs/demos/use-media/react/css/BasicUsage.tsx index 442d3300..d86dbd14 100644 --- a/site/src/components/docs/demos/use-media/react/css/BasicUsage.tsx +++ b/site/src/components/docs/demos/use-media/react/css/BasicUsage.tsx @@ -1,10 +1,10 @@ -import { createPlayer, features, useMedia } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, useMedia } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './BasicUsage.css'; const { Provider, Container } = createPlayer({ - features: features.video, + features: videoFeatures, }); function MediaInfo() { diff --git a/site/src/components/docs/demos/use-player/react/css/Selector.tsx b/site/src/components/docs/demos/use-player/react/css/Selector.tsx index aed8bea5..a60cafb6 100644 --- a/site/src/components/docs/demos/use-player/react/css/Selector.tsx +++ b/site/src/components/docs/demos/use-player/react/css/Selector.tsx @@ -1,10 +1,10 @@ -import { createPlayer, features, usePlayer } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, usePlayer } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './Selector.css'; const { Provider, Container } = createPlayer({ - features: features.video, + features: videoFeatures, }); function StateDisplay() { diff --git a/site/src/components/docs/demos/use-player/react/css/StoreAccess.tsx b/site/src/components/docs/demos/use-player/react/css/StoreAccess.tsx index abcb8c46..52f40bef 100644 --- a/site/src/components/docs/demos/use-player/react/css/StoreAccess.tsx +++ b/site/src/components/docs/demos/use-player/react/css/StoreAccess.tsx @@ -1,10 +1,10 @@ -import { createPlayer, features, usePlayer } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, usePlayer } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './StoreAccess.css'; const { Provider, Container } = createPlayer({ - features: features.video, + features: videoFeatures, }); function Controls() { diff --git a/site/src/components/docs/demos/use-store/react/css/Selector.tsx b/site/src/components/docs/demos/use-store/react/css/Selector.tsx index 1c14ab4e..fab27b7c 100644 --- a/site/src/components/docs/demos/use-store/react/css/Selector.tsx +++ b/site/src/components/docs/demos/use-store/react/css/Selector.tsx @@ -1,10 +1,10 @@ -import { createPlayer, features, usePlayer, useStore } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, usePlayer, useStore } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './Selector.css'; const { Provider, Container } = createPlayer({ - features: features.video, + features: videoFeatures, }); function DerivedState() { diff --git a/site/src/components/docs/demos/use-store/react/css/StoreAccess.tsx b/site/src/components/docs/demos/use-store/react/css/StoreAccess.tsx index 8b4ec328..7b82470e 100644 --- a/site/src/components/docs/demos/use-store/react/css/StoreAccess.tsx +++ b/site/src/components/docs/demos/use-store/react/css/StoreAccess.tsx @@ -1,10 +1,10 @@ -import { createPlayer, features, usePlayer, useStore } from '@videojs/react'; -import { Video } from '@videojs/react/video'; +import { createPlayer, usePlayer, useStore } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; import './StoreAccess.css'; const { Provider, Container } = createPlayer({ - features: features.video, + features: videoFeatures, }); function SeekControls() { diff --git a/site/src/content/docs/concepts/skins.mdx b/site/src/content/docs/concepts/skins.mdx index 127d479a..c697bcd8 100644 --- a/site/src/content/docs/concepts/skins.mdx +++ b/site/src/content/docs/concepts/skins.mdx @@ -32,11 +32,11 @@ A modern, glassy design with backdrop blur effects and polished interactions. ```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. ```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 ( diff --git a/site/src/content/docs/reference/container-mixin.mdx b/site/src/content/docs/reference/container-mixin.mdx index 9ff465ad..dadb8e90 100644 --- a/site/src/content/docs/reference/container-mixin.mdx +++ b/site/src/content/docs/reference/container-mixin.mdx @@ -15,7 +15,7 @@ Use `ContainerMixin` when the 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 `ProviderMixin` 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) {} diff --git a/site/src/content/docs/reference/html-create-player.mdx b/site/src/content/docs/reference/html-create-player.mdx index 33f81e9a..c2441b0a 100644 --- a/site/src/content/docs/reference/html-create-player.mdx +++ b/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 `PlayerController`, `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)) {} ``` diff --git a/site/src/content/docs/reference/player-context.mdx b/site/src/content/docs/reference/player-context.mdx index 898b1c7b..031af876 100644 --- a/site/src/content/docs/reference/player-context.mdx +++ b/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 ``` diff --git a/site/src/content/docs/reference/player-mixin.mdx b/site/src/content/docs/reference/player-mixin.mdx index 7bbea50b..4646c566 100644 --- a/site/src/content/docs/reference/player-mixin.mdx +++ b/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) {} diff --git a/site/src/content/docs/reference/provider-mixin.mdx b/site/src/content/docs/reference/provider-mixin.mdx index b45f4b89..190ac234 100644 --- a/site/src/content/docs/reference/provider-mixin.mdx +++ b/site/src/content/docs/reference/provider-mixin.mdx @@ -19,7 +19,7 @@ Any `PlayerController` o Use `ProviderMixin` separate from `ContainerMixin` 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)) {} ``` diff --git a/site/src/content/docs/reference/select-buffer.mdx b/site/src/content/docs/reference/select-buffer.mdx index dcdcba54..b5b44cf5 100644 --- a/site/src/content/docs/reference/select-buffer.mdx +++ b/site/src/content/docs/reference/select-buffer.mdx @@ -35,10 +35,11 @@ function BufferBar() { ```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); diff --git a/site/src/content/docs/reference/select-controls.mdx b/site/src/content/docs/reference/select-controls.mdx index 9ff60d14..a2dafea5 100644 --- a/site/src/content/docs/reference/select-controls.mdx +++ b/site/src/content/docs/reference/select-controls.mdx @@ -37,10 +37,11 @@ function ControlsOverlay({ children }: { children: React.ReactNode }) { ```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); diff --git a/site/src/content/docs/reference/select-fullscreen.mdx b/site/src/content/docs/reference/select-fullscreen.mdx index a56b5365..78ba80f3 100644 --- a/site/src/content/docs/reference/select-fullscreen.mdx +++ b/site/src/content/docs/reference/select-fullscreen.mdx @@ -37,10 +37,11 @@ function FullscreenButton() { ```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); diff --git a/site/src/content/docs/reference/select-pip.mdx b/site/src/content/docs/reference/select-pip.mdx index d0e88fd6..3c1a281f 100644 --- a/site/src/content/docs/reference/select-pip.mdx +++ b/site/src/content/docs/reference/select-pip.mdx @@ -37,10 +37,11 @@ function PiPButton() { ```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); diff --git a/site/src/content/docs/reference/select-playback-rate.mdx b/site/src/content/docs/reference/select-playback-rate.mdx index 195f4174..45ba6614 100644 --- a/site/src/content/docs/reference/select-playback-rate.mdx +++ b/site/src/content/docs/reference/select-playback-rate.mdx @@ -33,10 +33,11 @@ function RateDisplay() { ```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); diff --git a/site/src/content/docs/reference/select-playback.mdx b/site/src/content/docs/reference/select-playback.mdx index 2148e081..844b3b4f 100644 --- a/site/src/content/docs/reference/select-playback.mdx +++ b/site/src/content/docs/reference/select-playback.mdx @@ -33,10 +33,11 @@ function PlayButton() { ```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); diff --git a/site/src/content/docs/reference/select-source.mdx b/site/src/content/docs/reference/select-source.mdx index a43a2dae..5e98f0d7 100644 --- a/site/src/content/docs/reference/select-source.mdx +++ b/site/src/content/docs/reference/select-source.mdx @@ -33,10 +33,11 @@ function SourceInfo() { ```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); diff --git a/site/src/content/docs/reference/select-time.mdx b/site/src/content/docs/reference/select-time.mdx index 03e216dc..bb9ac45b 100644 --- a/site/src/content/docs/reference/select-time.mdx +++ b/site/src/content/docs/reference/select-time.mdx @@ -37,10 +37,11 @@ function TimeDisplay() { ```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); diff --git a/site/src/content/docs/reference/select-volume.mdx b/site/src/content/docs/reference/select-volume.mdx index f891dbd5..0ccdaf9d 100644 --- a/site/src/content/docs/reference/select-volume.mdx +++ b/site/src/content/docs/reference/select-volume.mdx @@ -42,10 +42,11 @@ function VolumeSlider() { ```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); diff --git a/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx b/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx index 17612873..7e25fe92 100644 --- a/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx +++ b/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx @@ -1,10 +1,10 @@ import { VJS8_DEMO_VIDEO } from '@/consts'; -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 }); /** * Live demo of the (default) frosted video skin design. diff --git a/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx b/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx index a2dab599..5a2435c7 100644 --- a/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx +++ b/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx @@ -1,9 +1,9 @@ import { VJS8_DEMO_VIDEO } from '@/consts'; -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 }); /** * Live demo of the minimal video skin design.