diff --git a/site/src/content/docs/concepts/features.mdx b/site/src/content/docs/concepts/features.mdx
index 0d52cb78..9cfc5c26 100644
--- a/site/src/content/docs/concepts/features.mdx
+++ b/site/src/content/docs/concepts/features.mdx
@@ -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 `usePlayer`:
```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.
```tsx title="PiPControl.tsx"
function PiPControl() {
- const availability = Player.usePlayer((s) => s.pipAvailability);
+ const availability = usePlayer((s) => s.pipAvailability);
if (availability === 'unsupported') return null;
diff --git a/site/src/content/docs/concepts/overview.mdx b/site/src/content/docs/concepts/overview.mdx
index 856d8418..9926acc6 100644
--- a/site/src/content/docs/concepts/overview.mdx
+++ b/site/src/content/docs/concepts/overview.mdx
@@ -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
-
- {/* All components inside automatically connect to state */}
-
+{/* All components inside automatically connect to state */} {/* [!code focus] */}
+ {/* [!code focus] */}
+
+
+
+ {/* [!code focus] */}
```
You can access state and actions from anywhere within the provider with the `usePlayer` hook.
@@ -28,9 +31,12 @@ You can access state and actions from anywhere within the provider with the
-
-
+
+
+
+
+
+
```
You can access state and actions from anywhere within `` with `PlayerController`.
@@ -50,18 +56,18 @@ Skins are complete, pre-designed player UIs that package components and styles t
```tsx
-
+ {/* [!code focus] */}
-
+ {/* [!code focus] */}
```
```html
-
+
-
+
```
@@ -75,30 +81,26 @@ If you want more control than skins offer you, you can build your own UI from ou
```tsx
-
-
+ {/* [!code focus] */}
-
-
- {/* ... */}
-
-
-
+ {/* [!code focus] */}
+ {/* [!code focus] */}
+ {/* ... */} {/* [!code focus] */}
+ {/* [!code focus] */}
+ {/* [!code focus] */}
```
```html
-
-
+
-
-
-
-
-
-
+
+
+
+
+
```
@@ -125,9 +127,7 @@ DASH, YouTube, Vimeo, Mux, and more media elements are currently under developme
```tsx
-
-
-
+ {/* [!code focus] */}
```
@@ -136,9 +136,7 @@ DASH, YouTube, Vimeo, Mux, and more media elements are currently under developme
```html
-
-
-
+
```
diff --git a/site/src/content/docs/concepts/presets.mdx b/site/src/content/docs/concepts/presets.mdx
index c3ec72a5..ac42fb07 100644
--- a/site/src/content/docs/concepts/presets.mdx
+++ b/site/src/content/docs/concepts/presets.mdx
@@ -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
-
+ {/* [!code focus] */}
```
@@ -157,7 +157,7 @@ A preset's default media element is just the starting point. You can replace it
```html
-
+
```
diff --git a/site/src/content/docs/concepts/skins.mdx b/site/src/content/docs/concepts/skins.mdx
index 7c6c9f3e..e1c379b1 100644
--- a/site/src/content/docs/concepts/skins.mdx
+++ b/site/src/content/docs/concepts/skins.mdx
@@ -20,7 +20,7 @@ In prior versions of Video.js, skins were CSS-only themes applied to the same se
```html
-
+
@@ -30,7 +30,7 @@ In prior versions of Video.js, skins were CSS-only themes applied to the same se
```tsx
{/* [!code focus] */}
- {/* wraps the Media component */}
+ {/* wraps the Media component */} {/* [!code focus] */}
{/* [!code focus] */}