refactor(packages): move media host observed attributes to subclasses

[luwes]

Summary

Remove the MediaHostConstructor type and its observedAttributes convention from CustomMediaElement. Media-host-specific attributes (type, prefer-playback, debug) are now declared by the concrete custom element subclasses (HlsVideo, MuxVideo, MuxAudio) instead of being implicitly merged from the host constructor.

This simplifies the attribute routing logic in #define — a single ctor.observedAttributes.includes(attr) check replaces the previous dual-source lookup — and makes it explicit which attributes each element observes.

Implementation details

• The base observedAttributes getter no longer spreads MediaHost.observedAttributes (it was always empty — no host ever defined one).
• The Attributes local in #define is removed; ctor.observedAttributes already contains the props-derived attrs via getAttrsFromProps.
• Re-entrant calls during #define are safe: the isDefined guard prevents infinite recursion while still returning the correct attribute list from the subclass getter.

Testing

Covered by existing custom-media-element tests.

Made with Cursor

---

Note

Low Risk
Low risk refactor that only changes how observedAttributes are declared/merged and how attribute-to-host-property routing is decided; behavioral risk is limited to attribute forwarding for affected custom media elements.

Overview
Moves media-host-specific attribute observation out of CustomMediaElement and into concrete elements. CustomMediaElement no longer supports a MediaHostConstructor.observedAttributes convention; it now derives observedAttributes only from the element properties.

Attribute routing in CustomMediaElement.#define is simplified to a single ctor.observedAttributes.includes(attr) check, and HlsVideo, MuxVideo, and MuxAudio explicitly extend observedAttributes to include type, prefer-playback, and debug.

^{Reviewed by Cursor Bugbot for commit 8a5e07e. Bugbot is set up for automated code reviews on this repo. Configure here.}

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Apr 14, 2026 5:46am

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	8a5e07e
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/69ddd4a8f7b3d3000848ac7e
😎 Deploy Preview	https://deploy-preview-1326--vjs10-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[github-actions]

📦 Bundle Size Report

🎨 @videojs/html — no changes

Presets (7)

Entry	Size
/video (default)	27.87 kB
/video (default + hls)	159.92 kB
/video (minimal)	25.36 kB
/video (minimal + hls)	157.35 kB
/audio (default)	25.91 kB
/audio (minimal)	23.54 kB
/background	4.16 kB

Media (8)

Entry	Size
/media/background-video	1.04 kB
/media/container	1.73 kB
/media/dash-video	236.46 kB
/media/hls-video	133.26 kB
/media/mux-audio	155.86 kB
/media/mux-video	155.79 kB
/media/native-hls-video	3.43 kB
/media/simple-hls-video	15.71 kB

Players (3)

Entry	Size
/video/player	6.73 kB
/audio/player	5.07 kB
/background/player	3.86 kB

Skins (17)

Entry	Type	Size
/video/minimal-skin.css	css	3.47 kB
/video/skin.css	css	3.49 kB
/video/minimal-skin	js	25.34 kB
/video/minimal-skin.tailwind	js	25.57 kB
/video/skin	js	27.83 kB
/video/skin.tailwind	js	27.95 kB
/audio/minimal-skin.css	css	2.53 kB
/audio/skin.css	css	2.50 kB
/audio/minimal-skin	js	23.48 kB
/audio/minimal-skin.tailwind	js	23.67 kB
/audio/skin	js	25.88 kB
/audio/skin.tailwind	js	25.99 kB
/background/skin.css	css	117 B
/background/skin	js	1.14 kB
/base.css	css	157 B
/shared.css	css	88 B
/skin-element	js	1.35 kB

UI Components (24)

Entry	Size
/ui/alert-dialog	1.02 kB
/ui/alert-dialog-close	493 B
/ui/alert-dialog-description	423 B
/ui/alert-dialog-title	421 B
/ui/buffering-indicator	2.23 kB
/ui/captions-button	2.41 kB
/ui/compounds	3.91 kB
/ui/controls	2.14 kB
/ui/error-dialog	2.65 kB
/ui/fullscreen-button	2.44 kB
/ui/hotkey	1.73 kB
/ui/mute-button	2.42 kB
/ui/pip-button	2.42 kB
/ui/play-button	2.43 kB
/ui/playback-rate-button	2.44 kB
/ui/popover	1.87 kB
/ui/poster	2.01 kB
/ui/seek-button	2.47 kB
/ui/slider	1.51 kB
/ui/thumbnail	2.57 kB
/ui/time	2.31 kB
/ui/time-slider	3.70 kB
/ui/tooltip	2.02 kB
/ui/volume-slider	2.52 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes

Presets (7)

Entry	Size
/video (default)	22.61 kB
/video (default + hls)	153.66 kB
/video (minimal)	20.30 kB
/video (minimal + hls)	151.20 kB
/audio (default)	18.57 kB
/audio (minimal)	17.11 kB
/background	754 B

Media (7)

Entry	Size
/media/background-video	575 B
/media/dash-video	234.92 kB
/media/hls-video	132.07 kB
/media/mux-audio	154.66 kB
/media/mux-video	154.65 kB
/media/native-hls-video	1.98 kB
/media/simple-hls-video	14.38 kB

Skins (14)

Entry	Type	Size
/video/minimal-skin.css	css	3.40 kB
/video/skin.css	css	3.42 kB
/video/minimal-skin	js	20.24 kB
/video/minimal-skin.tailwind	js	23.70 kB
/video/skin	js	22.56 kB
/video/skin.tailwind	js	23.73 kB
/audio/minimal-skin.css	css	2.43 kB
/audio/skin.css	css	2.39 kB
/audio/minimal-skin	js	17.02 kB
/audio/minimal-skin.tailwind	js	19.51 kB
/audio/skin	js	18.53 kB
/audio/skin.tailwind	js	19.53 kB
/background/skin.css	css	90 B
/background/skin	js	272 B

UI Components (19)

Entry	Size
/ui/alert-dialog	827 B
/ui/buffering-indicator	1.81 kB
/ui/captions-button	2.35 kB
/ui/controls	1.71 kB
/ui/error-dialog	2.34 kB
/ui/fullscreen-button	2.33 kB
/ui/mute-button	2.33 kB
/ui/pip-button	2.34 kB
/ui/play-button	2.34 kB
/ui/playback-rate-button	2.34 kB
/ui/popover	1.51 kB
/ui/poster	1.67 kB
/ui/seek-button	2.34 kB
/ui/slider	3.27 kB
/ui/thumbnail	2.05 kB
/ui/time	1.88 kB
/ui/time-slider	2.83 kB
/ui/tooltip	1.78 kB
/ui/volume-slider	2.83 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes

Entries (8)

Entry	Size
.	4.79 kB
/dom	11.28 kB
/dom/media/custom-media-element	1.89 kB
/dom/media/dash	234.26 kB
/dom/media/hls	131.33 kB
/dom/media/mux	153.97 kB
/dom/media/native-hls	1.24 kB
/dom/media/simple-hls	13.65 kB

🏷️ @videojs/element — no changes

Entries (2)

Entry	Size
.	999 B
/context	943 B

📦 @videojs/store — no changes

Entries (3)

Entry	Size
.	1.39 kB
/html	695 B
/react	360 B

🔧 @videojs/utils — no changes

Entries (10)

Entry	Size
/array	104 B
/dom	1.84 kB
/events	319 B
/function	327 B
/object	275 B
/predicate	265 B
/string	148 B
/style	190 B
/time	478 B
/number	158 B

📦 @videojs/spf — no changes

Entries (3)

Entry	Size
.	40 B
/dom	13.34 kB
/playback-engine	13.20 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.