zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(site): clean up concept pages from #769 (#970)

Browse Source 
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Darius Cepulis
2026-03-16 08:11:47 -05:00
committed by GitHub
co-authored by Claude Opus 4.6
parent 0e9f5376e1
commit c3904db198
4 changed files with 50 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/content/docs/concepts/features.mdx
+10 -10
View File
@@ -63,9 +63,9 @@ const Player = createPlayer({
```ts
import { createPlayer, playback, volume, time } from '@videojs/html';
const { ProviderMixin, PlayerController, context } = createPlayer({
features: [playback, volume, time],
});
const { ProviderMixin, PlayerController, context } = createPlayer({ // [!code focus]
features: [playback, volume, time], // [!code focus]
}); // [!code focus]
class MyPlayer extends ProviderMixin(MediaElement) {
static readonly tagName = 'my-player';
@@ -95,9 +95,9 @@ import { createPlayer, playback } from '@videojs/html';
import { backgroundFeatures } from '@videojs/html/background';
import { MediaElement } from '@videojs/html';
const { ProviderMixin } = createPlayer({
features: [...backgroundFeatures, playback],
});
const { ProviderMixin } = createPlayer({ // [!code focus]
features: [...backgroundFeatures, playback], // [!code focus]
}); // [!code focus]
class MyPlayer extends ProviderMixin(MediaElement) {
static readonly tagName = 'my-player';
@@ -113,13 +113,13 @@ customElements.define('my-player', MyPlayer);
You access feature state and actions through <DocsLink slug="reference/use-player">`usePlayer`</DocsLink>:
```tsx
// Subscribe to state (re-renders when selected values change)
const { paused, volume } = Player.usePlayer((s) => ({
const { paused, volume } = usePlayer((s) => ({
paused: s.paused,
volume: s.volume,
}));
// Call actions
const store = Player.usePlayer();
const store = usePlayer();
store.play();
store.setVolume(0.8);
```
@@ -146,7 +146,7 @@ Each feature also has a pre-built selector (e.g. <DocsLink slug="reference/featu
```tsx
import { selectPlayback, usePlayer } from '@videojs/react';
const playback = Player.usePlayer(selectPlayback);
const playback = usePlayer(selectPlayback);
playback?.play();
```
</FrameworkCase>
@@ -183,7 +183,7 @@ You can also check availability in JS:
<FrameworkCase frameworks={["react"]}>
```tsx title="PiPControl.tsx"
function PiPControl() {
const availability = Player.usePlayer((s) => s.pipAvailability);
const availability = usePlayer((s) => s.pipAvailability);
if (availability === 'unsupported') return null;
site/src/content/docs/concepts/overview.mdx
+30 -32
View File
@@ -16,9 +16,12 @@ Video.js v10 is built around a three-part architecture that separates concerns a
State is handled by a `Player.Provider`, which creates a central state store that all components can access. When you wrap your player in a `Player.Provider`, the components automatically connect to the state.
```tsx
<Player.Provider>
{/* All components inside automatically connect to state */}
</Player.Provider>
{/* All components inside automatically connect to state */} {/* [!code focus] */}
<Player.Provider> {/* [!code focus] */}
<VideoSkin>
<Video src="video.mp4" />
</VideoSkin>
</Player.Provider> {/* [!code focus] */}
```
You can access state and actions from anywhere within the provider with the <DocsLink slug="reference/use-player">`usePlayer` hook</DocsLink>.
@@ -28,9 +31,12 @@ You can access state and actions from anywhere within the provider with the <Doc
State is handled by a `video-player` element, which creates a central state store that all components can access. Child components can automatically connect to the state of the `video-player` element.
```html
<video-player>
<!-- All components inside automatically connect to state -->
</video-player>
<!-- All components inside automatically connect to state --> <!-- [!code focus] -->
<video-player> <!-- [!code focus] -->
<video-skin>
<video slot="media" src="video.mp4"></video>
</video-skin>
</video-player> <!-- [!code focus] -->
```
You can access state and actions from anywhere within `<video-player>` with <DocsLink slug="reference/player-controller">`PlayerController`</DocsLink>.
@@ -50,18 +56,18 @@ Skins are complete, pre-designed player UIs that package components and styles t
<FrameworkCase frameworks={["react"]}>
```tsx
<Player.Provider>
<VideoSkin>
<VideoSkin> {/* [!code focus] */}
<Video src="video.mp4" />
</VideoSkin>
</VideoSkin> {/* [!code focus] */}
</Player.Provider>
```
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
```html
<video-player>
<video-skin>
<video-skin> <!-- [!code focus] -->
<video slot="media" src="video.mp4"></video>
</video-skin>
</video-skin> <!-- [!code focus] -->
</video-player>
```
</FrameworkCase>
@@ -75,30 +81,26 @@ If you want more control than skins offer you, you can build your own UI from ou
<FrameworkCase frameworks={["react"]}>
```tsx
<Player.Provider>
<Player.Container>
<Player.Container> {/* [!code focus] */}
<Video src="video.mp4" />
<MediaControls>
<PlayButton />
{/* ... */}
</MediaControls>
</Player.Container>
<MediaControls> {/* [!code focus] */}
<PlayButton /> {/* [!code focus] */}
{/* ... */} {/* [!code focus] */}
</MediaControls> {/* [!code focus] */}
</Player.Container> {/* [!code focus] */}
</Player.Provider>
```
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
```html
<video-player>
<media-container>
<media-container> <!-- [!code focus] -->
<video slot="media" src="video.mp4"></video>
<media-controls>
<media-play-button></media-play-button>
<!-- ... -->
</media-controls>
</media-container>
<media-controls> <!-- [!code focus] -->
<media-play-button></media-play-button> <!-- [!code focus] -->
<!-- ... --> <!-- [!code focus] -->
</media-controls> <!-- [!code focus] -->
</media-container> <!-- [!code focus] -->
</video-player>
```
</FrameworkCase>
@@ -125,9 +127,7 @@ DASH, YouTube, Vimeo, Mux, and more media elements are currently under developme
```tsx
<Player.Provider>
<VideoSkin>
<HlsVideo src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" />
<HlsVideo src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" /> {/* [!code focus] */}
</VideoSkin>
</Player.Provider>
```
@@ -136,9 +136,7 @@ DASH, YouTube, Vimeo, Mux, and more media elements are currently under developme
```html
<video-player>
<video-skin>
<hls-video slot="media" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"></hls-video>
<hls-video slot="media" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"></hls-video> <!-- [!code focus] -->
</video-skin>
</video-player>
```
site/src/content/docs/concepts/presets.mdx
+8 -8
View File
@@ -92,9 +92,9 @@ Add features to a preset's feature bundle to enable new functionality. For examp
import { createPlayer, playback } from '@videojs/react';
import { backgroundFeatures, BackgroundVideo } from '@videojs/react/background';
const Player = createPlayer({
features: [...backgroundFeatures, playback],
});
const Player = createPlayer({ // [!code focus]
features: [...backgroundFeatures, playback], // [!code focus]
}); // [!code focus]
function Hero() {
return (
@@ -116,9 +116,9 @@ function Hero() {
import '@videojs/html/media/container';
import '@videojs/html/ui/play-button';
const { ProviderMixin } = createPlayer({
features: [...backgroundFeatures, playback],
});
const { ProviderMixin } = createPlayer({ // [!code focus]
features: [...backgroundFeatures, playback], // [!code focus]
}); // [!code focus]
class MyPlayer extends ProviderMixin(MediaElement) {
static readonly tagName = 'my-player';
@@ -148,7 +148,7 @@ A preset's default media element is just the starting point. You can replace it
```tsx
<Player.Provider>
<VideoSkin>
<HlsVideo src="https://example.com/stream.m3u8" />
<HlsVideo src="https://example.com/stream.m3u8" /> {/* [!code focus] */}
</VideoSkin>
</Player.Provider>
```
@@ -157,7 +157,7 @@ A preset's default media element is just the starting point. You can replace it
```html
<video-player>
<video-skin>
<hls-video slot="media" src="https://example.com/stream.m3u8"></hls-video>
<hls-video slot="media" src="https://example.com/stream.m3u8"></hls-video> <!-- [!code focus] -->
</video-skin>
</video-player>
```
site/src/content/docs/concepts/skins.mdx
+2 -2
View File
@@ -20,7 +20,7 @@ In prior versions of Video.js, skins were CSS-only themes applied to the same se
```html
<video-player>
<video-skin><!-- [!code focus] -->
<!-- wraps the media element -->
<!-- wraps the media element --> <!-- [!code focus] -->
<video slot="media" src="video.mp4"></video>
</video-skin><!-- [!code focus] -->
</video-player>
@@ -30,7 +30,7 @@ In prior versions of Video.js, skins were CSS-only themes applied to the same se
```tsx
<Player.Provider>
<VideoSkin> {/* [!code focus] */}
{/* wraps the Media component */}
{/* wraps the Media component */} {/* [!code focus] */}
<Video src="video.mp4"></Video>
</VideoSkin> {/* [!code focus] */}
</Player.Provider>