docs: update site for context-based media discovery#1018
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
mihar-22
force-pushed
the
docs/update-media-discovery-slot-removal
branch
from
5423053 to
9981b37
Compare
Contributor
📦 Bundle Size Report🎨 @videojs/html — no changesPresets (7)
Media (5)
Players (3)
Skins (16)
UI Components (21)
Sizes are marginal over the root entry point. ⚛️ @videojs/react — no changesPresets (7)
Media (4)
Skins (14)
UI Components (18)
Sizes are marginal over the root entry point. 🧩 @videojs/core — no changesEntries (6)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (10)
📦 @videojs/spf — no changesEntries (3)
ℹ️ How to interpretAll sizes are standalone totals (minified + brotli).
Run |
mihar-22
force-pushed
the
docs/update-media-discovery-slot-removal
branch
from
6c7eea2 to
cb9a2b9
Compare
Closed
Remove slot="media" from all docs, demos, blog post, and site components. Rewrite prose for context-based media discovery pattern. Add MediaAttachMixin and useContainerAttach reference pages. Closes #1017 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
mihar-22
force-pushed
the
docs/update-media-discovery-slot-removal
branch
from
cb9a2b9 to
46c8ce0
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the documentation site, demos, and key site code snippets to reflect the v10 “context-based media discovery” behavior (removing the need for slot="media" and documenting provider-owned attach/discovery).
Changes:
- Removed
slot="media"from HTML examples across docs pages, demos, installation snippet generator, and the v10 beta blog post. - Rewrote provider/container documentation to reflect provider-owned
store.attach()and context-based registration with aquerySelectorfallback. - Added new reference pages for
MediaAttachMixin(HTML) anduseContainerAttach(React), and linked them in the sidebar.
Reviewed changes
Copilot reviewed 37 out of 37 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| site/src/docs.config.ts | Adds new reference pages to the docs sidebar navigation. |
| site/src/content/docs/reference/use-container-attach.mdx | New React reference page documenting useContainerAttach. |
| site/src/content/docs/reference/thumbnail.mdx | Removes slot="media" from the thumbnail HTML example. |
| site/src/content/docs/reference/provider-mixin.mdx | Rewrites ProviderMixin docs to describe provider-owned attach and discovery behavior. |
| site/src/content/docs/reference/player-provider.mdx | Removes slot="media" from provider usage examples. |
| site/src/content/docs/reference/player-container.mdx | Updates container docs to reflect provider-owned media discovery/attach and removes slot="media" examples. |
| site/src/content/docs/reference/media-attach-mixin.mdx | New HTML reference page documenting MediaAttachMixin and customization via getMediaTarget() / createMediaAttachMixin. |
| site/src/content/docs/reference/container-mixin.mdx | Rewrites ContainerMixin docs to reflect container registration (not media discovery). |
| site/src/content/docs/concepts/skins.mdx | Removes slot="media" from skins concept example. |
| site/src/content/docs/concepts/presets.mdx | Removes slot="media" from preset examples. |
| site/src/content/docs/concepts/overview.mdx | Updates overview examples and prose to describe context-based discovery + fallback. |
| site/src/content/docs/concepts/features.mdx | Removes slot="media" from features example. |
| site/src/content/blog/2026-03-10-videojs-v10-beta-hello-world-again.mdx | Removes slot="media" from blog post examples. |
| site/src/components/installation/HTMLUsageCodeBlock.tsx | Updates installation page HTML snippet generator to omit slot="media". |
| site/src/components/home/Demo/baseCode.ts | Updates homepage demo HTML string to omit slot="media". |
| site/src/components/docs/demos/volume-slider/html/css/WithParts.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/time/html/css/Remaining.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/time/html/css/CustomSeparator.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/time/html/css/CustomNegativeSign.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/time/html/css/CurrentTime.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/time/html/css/CurrentDuration.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/time-slider/html/css/WithParts.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/thumbnail/html/css/BasicUsage.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/seek-button/html/css/BasicUsage.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/poster/html/css/BasicUsage.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/popover/html/css/BasicUsage.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/player-controller/html/css/BasicUsage.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/playback-rate-button/html/css/BasicUsage.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/play-button/html/css/BasicUsage.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/pip-button/html/css/BasicUsage.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/mute-button/html/css/VolumeLevels.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/mute-button/html/css/BasicUsage.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/html-create-player/html/css/BasicUsage.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/controls/html/css/BasicUsage.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/captions-button/html/css/BasicUsage.html | Removes slot="media" from demo markup. |
| site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.html | Removes slot="media" from demo markup. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
Comment on lines
+13
to
+21
| The store is created lazily on first access. On `connectedCallback`, the mixin publishes three context values to its descendants: | ||
|
|
||
| Any <DocsLink slug="reference/player-controller">`PlayerController`</DocsLink> or <DocsLink slug="reference/container-mixin">`ContainerMixin`</DocsLink> element below the provider in the DOM tree receives the store automatically through context. | ||
| - **`playerContext`** — the store, consumed by <DocsLink slug="reference/player-controller">`PlayerController`</DocsLink> and other controllers | ||
| - **`mediaContext`** — a setter callback for media elements to register themselves | ||
| - **`containerContext`** — a setter callback for container elements to register themselves | ||
|
|
||
| When a media element and a container both register, the provider calls `store.attach({ media, container })`. If no media element registers via context within a microtask, the provider falls back to `querySelector('video, audio')` to support plain `<video>` and `<audio>` elements. | ||
|
|
||
| On `disconnectedCallback`, the mixin calls `store.destroy()` and cleans up all context subscriptions. |
| import DocsLink from "@/components/docs/DocsLink.astro"; | ||
|
|
||
| `ContainerMixin` creates a class that consumes the player store from context and automatically attaches `<video>` or `<audio>` elements found within it. It uses a `MutationObserver` to watch for media element changes and calls `store.attach()` to keep the store's media target in sync. | ||
| `ContainerMixin` creates a class that consumes the player store from context and registers itself as the media container with the <DocsLink slug="reference/provider-mixin">provider</DocsLink>. The provider uses this reference to determine the fullscreen target and to scope media discovery. |
decepulis
reviewed
Mar 19, 2026
Collaborator
decepulis
left a comment
decepulis
left a comment
There was a problem hiding this comment.
A couple of comments. I'll take a pass at some of these and then merge in! Mostly cross-linking and clarifying.
|
|
||
| <FrameworkCase frameworks={["html"]}> | ||
| Media elements are detected via a `slot="media"` attribute. Always include it on your `<video>`, `<audio>`, or custom media element. | ||
| Media elements are discovered automatically — plain `<video>` and `<audio>` elements are found via a `querySelector` fallback, while custom media elements like `<hls-video>` register themselves via context. No `slot="media"` attribute is needed. |
Collaborator
There was a problem hiding this comment.
Unless someone has a lot of experience with previous players, the detail of "no slot="media" attribute is needed" could be noise. Especially considering that users of those libraries can infer that from the previous sentences. I'm voting to remove it.
Suggested change
| Media elements are discovered automatically — plain `<video>` and `<audio>` elements are found via a `querySelector` fallback, while custom media elements like `<hls-video>` register themselves via context. No `slot="media"` attribute is needed. | |
| Media elements are discovered automatically — plain `<video>` and `<audio>` elements are found via a `querySelector` fallback, while custom media elements like `<hls-video>` register themselves. |
|
|
||
| `MediaAttachMixin` creates a class that registers itself with the player provider via `mediaContext`. Apply it to custom media elements so they're automatically wired to the store when they connect to the DOM. | ||
|
|
||
| The built-in `<hls-video>`, `<dash-video>`, `<simple-hls-video>`, and `<background-video>` elements all use this mixin internally. |
Collaborator
There was a problem hiding this comment.
Suggesting this change so that this guide is less likely to go stale over time
Suggested change
| The built-in `<hls-video>`, `<dash-video>`, `<simple-hls-video>`, and `<background-video>` elements all use this mixin internally. | |
| Built-in elements, like `<hls-video>`, `<dash-video>`, `<simple-hls-video>`, and `<background-video>`, all use this mixin internally. |
| import UtilReference from "@/components/docs/api-reference/UtilReference.astro"; | ||
| import DocsLink from "@/components/docs/DocsLink.astro"; | ||
|
|
||
| `MediaAttachMixin` creates a class that registers itself with the player provider via `mediaContext`. Apply it to custom media elements so they're automatically wired to the store when they connect to the DOM. |
Collaborator
There was a problem hiding this comment.
non-blocking for now, but I'd like us to define internal jargon like mediaContext somehow. Either inline or by linking to another reference that defines it better.
|
|
||
| ## Who needs this | ||
|
|
||
| You only need `MediaAttachMixin` when building a custom media element — one that wraps a third-party player, uses a canvas renderer, or extends a base class that isn't already a registered media element. |
Collaborator
There was a problem hiding this comment.
one that wraps a third-party player, uses a canvas renderer, or extends a base class that isn't already a registered media element
The specificity of this sentence confuses me. It feels like the first two are similar examples and the third is like... something a bit different, and that this isn't a comprehensive set. I might take a pass at refining it idk.
- Fix provider-mixin: store is created eagerly (not lazily), disconnectedCallback detaches (not destroys), destroy is in destroyCallback - Fix container-mixin: remove false claim that container scopes media discovery - Fix use-container-attach: clarify undefined ref behavior, remove contradictory guidance - Improve media-attach-mixin: link provider, rewrite jargon-heavy sentences, make element list non-exhaustive - Link "microtask" to MDN - Add TODOs for context protocol (#1033) and ReactiveElement lifecycle (#1034) concept pages Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Updates all docs, demos, and site components to reflect context-based media discovery from #997.
slot="media"removal (22 demo HTML files, 2 site components, 1 blog post)All
<video slot="media">→<video>across demos,HTMLUsageCodeBlock.tsx,baseCode.ts, and the v10 beta blog post.Prose rewrites
concepts/overview.mdx— Media section rewritten: elements discovered via context + querySelector fallbackreference/container-mixin.mdx— Full rewrite: registers viacontainerContext, provider owns discoveryreference/provider-mixin.mdx— Full rewrite: documentsstore.attach()ownership, three context values published, querySelector fallbackreference/player-container.mdx— Media attachment section rewritten for both React and HTMLreference/player-provider.mdx— Remove allslot="media"from examplesNew reference pages
reference/media-attach-mixin.mdx— DocumentsMediaAttachMixin,createMediaAttachMixin,getMediaTarget()overridereference/use-container-attach.mdx— DocumentsuseContainerAttachhookSidebar
Added
media-attach-mixin(HTML Advanced) anduse-container-attach(React Advanced)Package cleanup split to #1026.
Closes #1017