Skip to content

fix(packages): handle menu child mutations#1739

Merged
sampotts merged 1 commit into
mainfrom
fix/menu-child-mutations
Jun 30, 2026
Merged

fix(packages): handle menu child mutations#1739
sampotts merged 1 commit into
mainfrom
fix/menu-child-mutations

Conversation

@sampotts

@sampotts sampotts commented Jun 25, 2026

Copy link
Copy Markdown
Collaborator

Adds logic to handle child menu items switching between unavailable and available and correctly hiding or showing them as required.

No skin changes are included so I think we're ok to merge, @mihar-22?

Closes #1738


Note

Low Risk
Localized UI layout sync and a small HLS config-key fix with tests; no auth or data-path changes.

Overview
Open root menus now remeasure viewport size when their content changes while open—items added/removed or data-availability toggles—so --media-menu-width / --media-menu-height stay correct when options show or hide (e.g. captions becoming available).

Core adds observeMenuViewContent, a MutationObserver (child list + data-availability, coalesced with requestAnimationFrame). HTML MenuElement and React MenuContent subscribe while the menu is open and call syncMenuViewRoot again (React re-renders on mutation in the custom element path).

Separately, HlsJsMedia includes inferred contentType from the URL in the engine config key when config.contentType is unset, so changing src between MP4 and M3U8 recreates the delegate/engine as expected.

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

@vercel

vercel Bot commented Jun 25, 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 30, 2026 12:14am

Request Review

@netlify

netlify Bot commented Jun 25, 2026

Copy link
Copy Markdown

Deploy Preview for vjs10-site ready!

Name Link
🔨 Latest commit 45afe5a
🔍 Latest deploy log https://app.netlify.com/projects/vjs10-site/deploys/6a430a2ac67e7d0008b1f583
😎 Deploy Preview https://deploy-preview-1739--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.

@sampotts sampotts requested review from luwes and mihar-22 June 25, 2026 04:11
@github-actions

github-actions Bot commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

📦 Bundle Size Report

🎨 @videojs/html — no changes
Presets (7)
Entry Initial
/video (default) 44.48 kB
/video (default + hls) 184.02 kB
/video (minimal) 44.16 kB
/video (minimal + hls) 183.63 kB
/audio (default) 37.93 kB
/audio (minimal) 36.73 kB
/background 4.20 kB
Media (10)
Entry Initial
/media/background-video 1.14 kB
/media/container 1.72 kB
/media/dash-video 214.74 kB
/media/hlsjs-video 141.28 kB
/media/mux-audio 163.72 kB
/media/mux-video 163.70 kB
/media/native-hls-video 9.05 kB
/media/simple-hls-audio-only 17.15 kB
/media/simple-hls-video 18.69 kB
/media/vimeo-video 12.31 kB
Players (5)
Entry Initial
/video/player 8.07 kB
/audio/player 5.38 kB
/background/player 3.92 kB
/live-video/player 7.64 kB
/live-audio/player 5.39 kB
Skins (30)
Entry Type Initial
/video/minimal-skin.css css 5.47 kB
/video/skin.css css 5.44 kB
/video/minimal-skin js 44.12 kB
/video/minimal-skin.tailwind js 44.71 kB
/video/skin js 44.47 kB
/video/skin.tailwind js 45.09 kB
/audio/minimal-skin.css css 3.60 kB
/audio/skin.css css 3.53 kB
/audio/minimal-skin js 36.72 kB
/audio/minimal-skin.tailwind js 37.11 kB
/audio/skin js 37.94 kB
/audio/skin.tailwind js 38.31 kB
/background/skin.css css 133 B
/background/skin js 1.14 kB
/live-video/minimal-skin.css css 5.47 kB
/live-video/skin.css css 5.44 kB
/live-video/minimal-skin js 43.21 kB
/live-video/minimal-skin.tailwind js 43.68 kB
/live-video/skin js 43.21 kB
/live-video/skin.tailwind js 43.67 kB
/live-audio/minimal-skin.css css 3.60 kB
/live-audio/skin.css css 3.53 kB
/live-audio/minimal-skin js 29.71 kB
/live-audio/minimal-skin.tailwind js 29.24 kB
/live-audio/skin js 31.06 kB
/live-audio/skin.tailwind js 30.66 kB
/global.css css 176 B
/shared.css css 104 B
/tailwind.css css 228 B
/skin-element js 1.45 kB
UI Components (38)
Entry Initial
/ui/airplay-button 2.43 kB
/ui/alert-dialog 2.50 kB
/ui/alert-dialog-close 2.25 kB
/ui/alert-dialog-description 2.21 kB
/ui/alert-dialog-title 2.20 kB
/ui/buffering-indicator 2.27 kB
/ui/captions-button 2.42 kB
/ui/captions-radio-group 2.76 kB
/ui/cast-button 2.42 kB
/ui/compounds 2.98 kB
/ui/controls 2.72 kB
/ui/error-dialog 2.74 kB
/ui/fullscreen-button 2.35 kB
/ui/hotkey 2.39 kB
/ui/menu 2.76 kB
/ui/mute-button 2.38 kB
/ui/pip-button 2.37 kB
/ui/play-button 2.41 kB
/ui/playback-rate-button 2.43 kB
/ui/playback-rate-radio-group 2.76 kB
/ui/popover 2.75 kB
/ui/poster 2.23 kB
/ui/quality-radio-group 2.80 kB
/ui/seek-button 2.39 kB
/ui/seek-indicator 2.41 kB
/ui/seek-indicator-value 516 B
/ui/slider 2.76 kB
/ui/status-announcer 2.31 kB
/ui/status-indicator 2.37 kB
/ui/status-indicator-value 581 B
/ui/thumbnail 2.26 kB
/ui/time 2.73 kB
/ui/time-slider 2.76 kB
/ui/tooltip 2.68 kB
/ui/volume-indicator 2.35 kB
/ui/volume-indicator-fill 518 B
/ui/volume-indicator-value 477 B
/ui/volume-slider 2.75 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes
Presets (7)
Entry Initial
/video (default) 36.95 kB
/video (default + hls) 175.28 kB
/video (minimal) 37.02 kB
/video (minimal + hls) 175.23 kB
/audio (default) 30.11 kB
/audio (minimal) 30.18 kB
/background 754 B
Media (9)
Entry Initial
/media/background-video 575 B
/media/dash-video 213.24 kB
/media/hlsjs-video 139.79 kB
/media/mux-audio 162.25 kB
/media/mux-video 162.33 kB
/media/native-hls-video 7.39 kB
/media/simple-hls-audio-only 15.56 kB
/media/simple-hls-video 17.15 kB
/media/vimeo-video 10.58 kB
Skins (27)
Entry Type Initial
/tailwind.css css 228 B
/video/minimal-skin.css css 5.37 kB
/video/skin.css css 5.35 kB
/video/minimal-skin js 36.91 kB
/video/minimal-skin.tailwind js 42.75 kB
/video/skin js 36.88 kB
/video/skin.tailwind js 42.60 kB
/audio/minimal-skin.css css 3.47 kB
/audio/skin.css css 3.39 kB
/audio/minimal-skin js 30.06 kB
/audio/minimal-skin.tailwind js 31.86 kB
/audio/skin js 30.01 kB
/audio/skin.tailwind js 33.86 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.35 kB
/live-video/minimal-skin js 32.67 kB
/live-video/minimal-skin.tailwind js 38.34 kB
/live-video/skin js 32.66 kB
/live-video/skin.tailwind js 38.37 kB
/live-audio/minimal-skin.css css 3.47 kB
/live-audio/skin.css css 3.39 kB
/live-audio/minimal-skin js 21.74 kB
/live-audio/minimal-skin.tailwind js 24.64 kB
/live-audio/skin js 21.78 kB
/live-audio/skin.tailwind js 24.78 kB
UI Components (32)
Entry Initial
/ui/airplay-button 2.10 kB
/ui/alert-dialog 2.11 kB
/ui/buffering-indicator 1.96 kB
/ui/captions-button 2.14 kB
/ui/captions-radio-group 2.00 kB
/ui/cast-button 2.13 kB
/ui/controls 1.98 kB
/ui/error-dialog 2.19 kB
/ui/fullscreen-button 2.13 kB
/ui/gesture 2.18 kB
/ui/hotkey 2.18 kB
/ui/live-button 2.07 kB
/ui/menu 2.32 kB
/ui/mute-button 2.16 kB
/ui/pip-button 2.12 kB
/ui/play-button 2.15 kB
/ui/playback-rate 1.98 kB
/ui/playback-rate-button 2.17 kB
/ui/popover 2.57 kB
/ui/poster 1.97 kB
/ui/quality 1.94 kB
/ui/seek-button 2.13 kB
/ui/seek-indicator 2.06 kB
/ui/slider 2.25 kB
/ui/status-announcer 2.00 kB
/ui/status-indicator 2.08 kB
/ui/thumbnail 1.95 kB
/ui/time 1.98 kB
/ui/time-slider 2.23 kB
/ui/tooltip 2.59 kB
/ui/volume-indicator 2.10 kB
/ui/volume-slider 2.20 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes
Entries (14)
Entry Initial
. 9.08 kB
/dom 17.08 kB
/dom/media/custom-media-element 2.09 kB
/dom/media/dash 209.07 kB
/dom/media/google-cast 4.04 kB
/dom/media/hls-js 135.68 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.47 kB
/dom/media/simple-hls-audio-only 14.92 kB
/dom/media/vimeo 9.86 kB
/media/predicate 573 B
🏷️ @videojs/element — no changes
Entries (2)
Entry Initial
. 996 B
/context 943 B
📦 @videojs/store — no changes
Entries (3)
Entry Initial
. 1.39 kB
/html 696 B
/react 360 B
🔧 @videojs/utils — no changes
Entries (10)
Entry Initial
/array 104 B
/dom 2.26 kB
/events 319 B
/function 327 B
/object 275 B
/predicate 265 B
/string 231 B
/style 190 B
/time 478 B
/number 158 B
📦 @videojs/spf — no changes
Entries (4)
Entry Initial
. 4.45 kB
/dom 6.33 kB
/hls 15.37 kB
/background-video 12.85 kB

ℹ️ How to interpret

JS sizes are initial static graph totals (minified + brotli). Lazy dynamic chunks are shown separately when present.

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

Run pnpm size locally to check current initial sizes.

@sampotts sampotts force-pushed the fix/menu-child-mutations branch from a722d49 to 45afe5a Compare June 30, 2026 00:13
@sampotts sampotts merged commit 9ab7ade into main Jun 30, 2026
26 checks passed
@sampotts sampotts deleted the fix/menu-child-mutations branch June 30, 2026 00:20
@luwes luwes mentioned this pull request Jun 30, 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.

Bug: Switching source doesn't update menu items

2 participants