Skip to content

fix: attaching media like elements and upgrade#889

Merged
luwes merged 3 commits intomainfrom
container-media
Mar 11, 2026
Merged

fix: attaching media like elements and upgrade#889
luwes merged 3 commits intomainfrom
container-media

Conversation

@luwes
Copy link
Copy Markdown
Collaborator

@luwes luwes commented Mar 11, 2026

This fixes an issue where we didn't attach custom media elements to the store because they are not instances of HTMLMediaElement and fixes another issue where the custom media element was not upgraded and resulted in type errors in the store. Things like .buffered and .textTracks were accessed there. We should be gating those as I'm typing this out, aka the HTMLMediaElement type is too forgiving. This should be moved to the more narrow MediaApi type. For another PR.

@luwes luwes requested a review from Copilot March 11, 2026 18:09
@luwes luwes self-assigned this Mar 11, 2026
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 11, 2026

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

Project Deployment Actions Updated (UTC)
v10-sandbox Ready Ready Preview, Comment Mar 11, 2026 6:22pm

Request Review

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 11, 2026

Deploy Preview for vjs10-site ready!

Name Link
🔨 Latest commit b0a097e
🔍 Latest deploy log https://app.netlify.com/projects/vjs10-site/deploys/69b1b2da002e2d0008d2b443
😎 Deploy Preview https://deploy-preview-889--vjs10-site.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 11, 2026

📦 Bundle Size Report

🎨 @videojs/html

(no changes)

Presets (7)
Entry Size
/video (default) 21.74 kB
/video (default + hls) 152.18 kB
/video (minimal) 21.57 kB
/video (minimal + hls) 151.84 kB
/audio (default) 20.49 kB
/audio (minimal) 20.50 kB
/background 6.44 kB
Media (4)
Entry Size
/media/background-video 617 B
/media/container 1.91 kB
/media/hls-video 131.23 kB
/media/simple-hls-video 11.52 kB
Players (3)
Entry Size
/video/player 6.31 kB
/audio/player 6.31 kB
/background/player 6.30 kB
Skins (15)
Entry Type Size
/video/minimal-skin.css css 2.58 kB
/video/skin.css css 2.63 kB
/video/minimal-skin js 21.00 kB
/video/minimal-skin.tailwind js 21.21 kB
/video/skin js 21.17 kB
/video/skin.tailwind js 21.40 kB
/audio/minimal-skin.css css 2.17 kB
/audio/skin.css css 2.20 kB
/audio/minimal-skin js 19.92 kB
/audio/minimal-skin.tailwind js 19.74 kB
/audio/skin js 19.95 kB
/audio/skin.tailwind js 19.97 kB
/background/skin.css css 124 B
/background/skin js 999 B
/base.css css 205 B
UI Components (21)
Entry Size
/ui/alert-dialog 2.05 kB
/ui/alert-dialog-close 1.24 kB
/ui/alert-dialog-description 1.50 kB
/ui/alert-dialog-title 1.52 kB
/ui/buffering-indicator 1.79 kB
/ui/captions-button 1.77 kB
/ui/controls 1.80 kB
/ui/fullscreen-button 1.76 kB
/ui/mute-button 1.81 kB
/ui/pip-button 1.76 kB
/ui/play-button 1.79 kB
/ui/playback-rate-button 1.80 kB
/ui/popover 3.06 kB
/ui/poster 1.74 kB
/ui/seek-button 1.78 kB
/ui/slider 2.02 kB
/ui/thumbnail 2.07 kB
/ui/time 1.82 kB
/ui/time-slider 2.93 kB
/ui/tooltip 2.39 kB
/ui/volume-slider 2.16 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react

(no changes)

Presets (7)
Entry Size
/video (default) 16.72 kB
/video (default + hls) 147.63 kB
/video (minimal) 16.72 kB
/video (minimal + hls) 147.48 kB
/audio (default) 14.41 kB
/audio (minimal) 14.44 kB
/background 3.18 kB
Media (3)
Entry Size
/media/background-video 539 B
/media/hls-video 131.52 kB
/media/simple-hls-video 11.91 kB
Skins (14)
Entry Type Size
/video/minimal-skin.css css 2.58 kB
/video/skin.css css 2.63 kB
/video/minimal-skin js 16.62 kB
/video/minimal-skin.tailwind js 19.21 kB
/video/skin js 16.62 kB
/video/skin.tailwind js 19.30 kB
/audio/minimal-skin.css css 2.17 kB
/audio/skin.css css 2.20 kB
/audio/minimal-skin js 14.35 kB
/audio/minimal-skin.tailwind js 16.17 kB
/audio/skin js 14.31 kB
/audio/skin.tailwind js 16.39 kB
/background/skin.css css 90 B
/background/skin js 272 B
UI Components (17)
Entry Size
/ui/alert-dialog 2.74 kB
/ui/buffering-indicator 2.17 kB
/ui/captions-button 2.28 kB
/ui/controls 2.19 kB
/ui/fullscreen-button 2.26 kB
/ui/mute-button 2.28 kB
/ui/pip-button 2.25 kB
/ui/play-button 2.30 kB
/ui/playback-rate-button 2.25 kB
/ui/popover 3.17 kB
/ui/poster 2.03 kB
/ui/seek-button 2.24 kB
/ui/slider 3.10 kB
/ui/time 2.40 kB
/ui/time-slider 2.80 kB
/ui/tooltip 3.24 kB
/ui/volume-slider 2.66 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core

(no changes)

Entries (5)
Entry Size
. 4.78 kB
/dom 8.05 kB
/dom/media/custom-media-element 1.76 kB
/dom/media/hls 131.14 kB
/dom/media/simple-hls 11.42 kB

🏷️ @videojs/element

(no changes)

Entries (2)
Entry Size
. 999 B
/context 936 B

📦 @videojs/store

(no changes)

Entries (3)
Entry Size
. 1.32 kB
/html 700 B
/react 360 B

🔧 @videojs/utils

(no changes)

Entries (10)
Entry Size
/array 104 B
/dom 1003 B
/events 227 B
/function 261 B
/object 119 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 9.67 kB
/playback-engine 9.60 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.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Fixes media attachment for custom media elements in the HTML player container and ensures custom elements are upgraded before being attached to the player store (avoiding store-side type errors when accessing media APIs).

Changes:

  • Update container media discovery to recognize custom media elements (not just HTMLMediaElement) and upgrade them before attaching to the store.
  • Remove the data-media-element attribute marker from CustomMediaMixin and switch container attachment logic away from that attribute.
  • Adjust the root dev:sandbox script to use turbo watch.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File Description
packages/html/src/store/container-mixin.ts Detects/attaches custom media elements and upgrades them before store attachment; updates mutation observation logic.
packages/core/src/dom/media/custom-media-element/index.ts Removes the data-media-element attribute from custom media element connectedCallback.
package.json Updates dev:sandbox to use turbo watch.

💡 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 thread packages/html/src/store/container-mixin.ts Outdated
Comment thread packages/html/src/store/container-mixin.ts
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Copy link
Copy Markdown
Collaborator

@cjpillsbury cjpillsbury left a comment

Choose a reason for hiding this comment

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

🚢 🇮🇹

@luwes luwes merged commit 2105010 into main Mar 11, 2026
20 checks passed
@luwes luwes deleted the container-media branch March 11, 2026 18:36
@github-actions github-actions bot mentioned this pull request Mar 11, 2026
@luwes luwes mentioned this pull request Apr 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants