Skip to content

fix(site): update use-media reference for mediahost architecture#1702

Merged
luwes merged 4 commits into
mainfrom
docs/1405-use-media-reference-cherry-pick
Jun 18, 2026
Merged

fix(site): update use-media reference for mediahost architecture#1702
luwes merged 4 commits into
mainfrom
docs/1405-use-media-reference-cherry-pick

Conversation

@luwes

@luwes luwes commented Jun 18, 2026

Copy link
Copy Markdown
Collaborator

Closes #1405
Refs #1405

Summary

Update the Player.useMedia reference docs to reflect the new mediahost architecture, where the hook returns a runtime-agnostic Media object rather than an HTMLMediaElement.

Changes

  • Reframe the description around the Media interface (capabilities like play() and event subscription) instead of the native media element
  • Add a Basic Usage demo (React + CSS) showing the hook in practice

Testing

Docs-only change; covered by the existing site build.


Note

Low Risk
Documentation, demo assets, and a barrel re-export only; no playback or hook runtime behavior changes.

Overview
Updates Player.useMedia reference copy to match the mediahost model: the hook returns a runtime-agnostic Media object (capabilities like play() and events), not a direct HTMLMediaElement, and trims the standalone-import note in favor of linking createPlayer and useMediaAttach.

Adds a Basic Usage live demo (React + CSS) that reads Player.useMedia() and gates UI with isMediaSourceCapable / isMediaVideoDimensionsCapable. Re-exports ./media/predicate from packages/core/src/dom so those helpers are available from the public package surface used by the demo.

Reviewed by Cursor Bugbot for commit 0647699. Bugbot is set up for automated code reviews on this repo. Configure here.

@netlify

netlify Bot commented Jun 18, 2026

Copy link
Copy Markdown

Deploy Preview for vjs10-site ready!

Name Link
🔨 Latest commit 0647699
🔍 Latest deploy log https://app.netlify.com/projects/vjs10-site/deploys/6a34353a9b510500089d4941
😎 Deploy Preview https://deploy-preview-1702--vjs10-site.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@vercel

vercel Bot commented Jun 18, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
v10-sandbox Ready Ready Preview, Comment Jun 18, 2026 6:13pm

Request Review

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 619f562. Configure here.

</>
)}
</dl>
);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Demo panel stale after load

Medium Severity

The Basic Usage demo renders currentSrc, videoWidth, and videoHeight from Player.useMedia() during render, but that hook only exposes the media reference from context and does not re-render when the underlying element fires events like loadedmetadata. The info panel can keep showing empty or zero values after playback starts.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 619f562. Configure here.

@github-actions

github-actions Bot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

📦 Bundle Size Report

🎨 @videojs/html — no changes
Presets (7)
Entry Size
/video (default) 44.32 kB
/video (default + hls) 183.74 kB
/video (minimal) 43.99 kB
/video (minimal + hls) 183.58 kB
/audio (default) 37.82 kB
/audio (minimal) 36.56 kB
/background 4.22 kB
Media (10)
Entry Size
/media/background-video 1.07 kB
/media/container 1.72 kB
/media/dash-video 242.77 kB
/media/hls-video 141.25 kB
/media/mux-audio 163.70 kB
/media/mux-video 163.64 kB
/media/native-hls-video 9.01 kB
/media/simple-hls-audio-only 16.94 kB
/media/simple-hls-video 18.76 kB
/media/vimeo-video 12.32 kB
Players (5)
Entry Size
/video/player 8.07 kB
/audio/player 5.39 kB
/background/player 3.92 kB
/live-video/player 7.63 kB
/live-audio/player 5.39 kB
Skins (30)
Entry Type Size
/video/minimal-skin.css css 5.45 kB
/video/skin.css css 5.43 kB
/video/minimal-skin js 44.01 kB
/video/minimal-skin.tailwind js 44.60 kB
/video/skin js 44.28 kB
/video/skin.tailwind js 44.89 kB
/audio/minimal-skin.css css 3.60 kB
/audio/skin.css css 3.53 kB
/audio/minimal-skin js 36.59 kB
/audio/minimal-skin.tailwind js 36.98 kB
/audio/skin js 37.77 kB
/audio/skin.tailwind js 38.14 kB
/background/skin.css css 133 B
/background/skin js 1.16 kB
/live-video/minimal-skin.css css 5.45 kB
/live-video/skin.css css 5.43 kB
/live-video/minimal-skin js 43.06 kB
/live-video/minimal-skin.tailwind js 43.49 kB
/live-video/skin js 43.08 kB
/live-video/skin.tailwind js 43.56 kB
/live-audio/minimal-skin.css css 3.60 kB
/live-audio/skin.css css 3.53 kB
/live-audio/minimal-skin js 29.68 kB
/live-audio/minimal-skin.tailwind js 29.12 kB
/live-audio/skin js 31.02 kB
/live-audio/skin.tailwind js 30.62 kB
/global.css css 176 B
/shared.css css 88 B
/tailwind.css css 228 B
/skin-element js 1.44 kB
UI Components (38)
Entry Size
/ui/airplay-button 3.63 kB
/ui/alert-dialog 1.30 kB
/ui/alert-dialog-close 566 B
/ui/alert-dialog-description 458 B
/ui/alert-dialog-title 503 B
/ui/buffering-indicator 2.34 kB
/ui/captions-button 3.76 kB
/ui/captions-radio-group 3.49 kB
/ui/cast-button 3.65 kB
/ui/compounds 8.72 kB
/ui/controls 2.41 kB
/ui/error-dialog 3.49 kB
/ui/fullscreen-button 3.68 kB
/ui/hotkey 2.25 kB
/ui/menu 5.61 kB
/ui/mute-button 3.66 kB
/ui/pip-button 3.67 kB
/ui/play-button 3.64 kB
/ui/playback-rate-button 3.73 kB
/ui/playback-rate-radio-group 3.15 kB
/ui/popover 2.11 kB
/ui/poster 2.36 kB
/ui/quality-radio-group 2.51 kB
/ui/seek-button 3.65 kB
/ui/seek-indicator 3.84 kB
/ui/seek-indicator-value 259 B
/ui/slider 1.55 kB
/ui/status-announcer 3.58 kB
/ui/status-indicator 3.73 kB
/ui/status-indicator-value 293 B
/ui/thumbnail 3.40 kB
/ui/time 3.03 kB
/ui/time-slider 4.10 kB
/ui/tooltip 2.31 kB
/ui/volume-indicator 3.96 kB
/ui/volume-indicator-fill 199 B
/ui/volume-indicator-value 278 B
/ui/volume-slider 2.92 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes
Presets (7)
Entry Size
/video (default) 36.83 kB
/video (default + hls) 175.18 kB
/video (minimal) 36.91 kB
/video (minimal + hls) 175.13 kB
/audio (default) 29.96 kB
/audio (minimal) 30.04 kB
/background 754 B
Media (9)
Entry Size
/media/background-video 575 B
/media/dash-video 241.00 kB
/media/hls-video 139.80 kB
/media/mux-audio 162.31 kB
/media/mux-video 162.49 kB
/media/native-hls-video 7.39 kB
/media/simple-hls-audio-only 15.37 kB
/media/simple-hls-video 17.18 kB
/media/vimeo-video 10.58 kB
Skins (27)
Entry Type Size
/tailwind.css css 228 B
/video/minimal-skin.css css 5.37 kB
/video/skin.css css 5.34 kB
/video/minimal-skin js 36.81 kB
/video/minimal-skin.tailwind js 42.53 kB
/video/skin js 36.73 kB
/video/skin.tailwind js 42.46 kB
/audio/minimal-skin.css css 3.47 kB
/audio/skin.css css 3.39 kB
/audio/minimal-skin js 29.96 kB
/audio/minimal-skin.tailwind js 31.76 kB
/audio/skin js 29.93 kB
/audio/skin.tailwind js 33.77 kB
/background/skin.css css 90 B
/background/skin js 272 B
/live-video/minimal-skin.css css 5.37 kB
/live-video/skin.css css 5.34 kB
/live-video/minimal-skin js 32.57 kB
/live-video/minimal-skin.tailwind js 38.21 kB
/live-video/skin js 32.61 kB
/live-video/skin.tailwind js 38.27 kB
/live-audio/minimal-skin.css css 3.47 kB
/live-audio/skin.css css 3.39 kB
/live-audio/minimal-skin js 21.73 kB
/live-audio/minimal-skin.tailwind js 24.64 kB
/live-audio/skin js 21.79 kB
/live-audio/skin.tailwind js 24.75 kB
UI Components (32)
Entry Size
/ui/airplay-button 2.71 kB
/ui/alert-dialog 1.22 kB
/ui/buffering-indicator 2.43 kB
/ui/captions-button 2.66 kB
/ui/captions-radio-group 2.77 kB
/ui/cast-button 2.67 kB
/ui/controls 2.42 kB
/ui/error-dialog 2.65 kB
/ui/fullscreen-button 2.61 kB
/ui/gesture 2.12 kB
/ui/hotkey 2.40 kB
/ui/live-button 3.25 kB
/ui/menu 7.20 kB
/ui/mute-button 2.67 kB
/ui/pip-button 3.02 kB
/ui/play-button 2.67 kB
/ui/playback-rate 2.82 kB
/ui/playback-rate-button 2.66 kB
/ui/popover 2.29 kB
/ui/poster 2.37 kB
/ui/quality 2.98 kB
/ui/seek-button 2.65 kB
/ui/seek-indicator 2.17 kB
/ui/slider 3.64 kB
/ui/status-announcer 1.98 kB
/ui/status-indicator 2.14 kB
/ui/thumbnail 2.72 kB
/ui/time 3.24 kB
/ui/time-slider 4.19 kB
/ui/tooltip 2.64 kB
/ui/volume-indicator 2.14 kB
/ui/volume-slider 4.14 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes
Entries (13)
Entry Size
. 8.65 kB
/dom 17.11 kB
/dom/media/custom-media-element 2.05 kB
/dom/media/dash 236.79 kB
/dom/media/google-cast 4.04 kB
/dom/media/hls 135.63 kB
/dom/media/media-host 1.25 kB
/dom/media/media-played-ranges 576 B
/dom/media/mux 151.26 kB
/dom/media/native-hls 3.05 kB
/dom/media/simple-hls 16.55 kB
/dom/media/simple-hls-audio-only 14.79 kB
/dom/media/vimeo 9.86 kB
🏷️ @videojs/element — no changes
Entries (2)
Entry Size
. 996 B
/context 943 B
📦 @videojs/store — no changes
Entries (3)
Entry Size
. 1.39 kB
/html 696 B
/react 360 B
🔧 @videojs/utils — no changes
Entries (10)
Entry Size
/array 104 B
/dom 2.22 kB
/events 319 B
/function 327 B
/object 275 B
/predicate 265 B
/string 232 B
/style 190 B
/time 478 B
/number 158 B
📦 @videojs/spf — no changes
Entries (4)
Entry Size
. 4.45 kB
/dom 6.33 kB
/hls 15.44 kB
/background-looping-video 12.95 kB

ℹ️ How to interpret

All sizes are standalone totals (minified + brotli).

Icon Meaning
No change
🔺 Increased ≤ 10%
🔴 Increased > 10%
🔽 Decreased
🆕 New (no baseline)

Run pnpm size locally to check current sizes.

@decepulis decepulis left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great, thanks!

Comment thread site/src/content/docs/reference/use-media.mdx Outdated
Co-authored-by: Darius Cepulis <dcepulis@mux.com>
@luwes luwes changed the title docs(site): update use-media reference for mediahost architecture fix(site): update use-media reference for mediahost architecture Jun 18, 2026
@luwes luwes merged commit 9bcdf5f into main Jun 18, 2026
21 checks passed
@luwes luwes deleted the docs/1405-use-media-reference-cherry-pick branch June 18, 2026 18:14
@luwes luwes mentioned this pull request Jun 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

Docs: Update use-media Reference Page for MediaHost Architecture

2 participants