Skip to content

fix(react): thumbnails broken when using hls media#1210

Merged
mihar-22 merged 1 commit intomainfrom
fix/proxy-prototype-chain-walk
Apr 3, 2026
Merged

fix(react): thumbnails broken when using hls media#1210
mihar-22 merged 1 commit intomainfrom
fix/proxy-prototype-chain-walk

Conversation

@mihar-22
Copy link
Copy Markdown
Member

@mihar-22 mihar-22 commented Apr 3, 2026

Summary

  • ProxyMixin only copied own properties from each explicitly-passed class prototype. Methods inherited further up the chain (e.g. querySelectorAll on Element.prototype) were silently missing, causing storyboard <track> elements to not work on React media components (HlsVideo, SimpleHlsVideo, etc.).
  • Walk the full BaseClass prototype chain, stopping before prototypes the proxy already extends. Removes the AdditionalClasses rest parameter since the chain walk covers everything.
  • Enable disabled metadata/chapters tracks in the text-track store feature so browsers load their cues — previously only handled by the custom element's #enableDefaultTrack, which the React path lacks.

Test plan

  • pnpm typecheck passes
  • pnpm -F @videojs/core test — 735 tests pass
  • pnpm build:packages succeeds
  • Manual: sandbox React HLS page with storyboard <track> — thumbnails appear on time slider

Closes #1095

🤖 Generated with Claude Code


Note

Medium Risk
Changes core ProxyMixin behavior by walking prototype chains, which can affect method/property proxying across multiple media components. Also forces metadata/chapters tracks out of disabled mode, potentially impacting track loading behavior across browsers.

Overview
Fixes broken React HLS thumbnails by making ProxyMixin proxy inherited methods/properties via a prototype-chain walk (and simplifies the API to a single BaseClass), with new tests covering ancestor proxying and avoiding overwriting proxy-defined methods.

Moves default metadata/chapters track enabling into the DOM text-track store (sets mode to hidden when disabled) and removes the custom element’s per-<track> enabling logic; React thumbnail resolution is adjusted to avoid accessing thumbnailCues when no text-track state is present.

Written by Cursor Bugbot for commit a3cddc3. This will update automatically on new commits. Configure here.

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 3, 2026

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

Project Deployment Actions Updated (UTC)
v10-sandbox Ready Ready Preview, Comment Apr 3, 2026 7:04am

Request Review

@netlify
Copy link
Copy Markdown

netlify bot commented Apr 3, 2026

Deploy Preview for vjs10-site ready!

Name Link
🔨 Latest commit a3cddc3
🔍 Latest deploy log https://app.netlify.com/projects/vjs10-site/deploys/69cf665c2d766c00087bcee2
😎 Deploy Preview https://deploy-preview-1210--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.

ProxyMixin only copied own properties from each explicitly-passed class
prototype. Methods inherited further up the chain (e.g. querySelectorAll
on Element.prototype) were silently missing, causing text-track features
to fail on React media components.

Walk the full BaseClass prototype chain, stopping before prototypes the
proxy already extends. Remove the AdditionalClasses rest parameter since
the chain walk covers everything.

Also enable disabled metadata/chapters tracks in the text-track feature
so browsers load their cues — previously handled by the custom element's
#enableDefaultTrack, which the React path lacks.

Closes #1095

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 3, 2026

📦 Bundle Size Report

🎨 @videojs/html — no changes
Presets (7)
Entry Size
/video (default) 24.90 kB
/video (default + hls) 156.69 kB
/video (minimal) 24.89 kB
/video (minimal + hls) 156.60 kB
/audio (default) 23.04 kB
/audio (minimal) 23.04 kB
/background 6.92 kB
Media (7)
Entry Size
/media/background-video 1.04 kB
/media/container 1.59 kB
/media/dash-video 236.43 kB
/media/hls-video 133.39 kB
/media/mux-video 155.82 kB
/media/native-hls-video 3.48 kB
/media/simple-hls-video 14.92 kB
Players (3)
Entry Size
/video/player 6.64 kB
/audio/player 6.63 kB
/background/player 6.62 kB
Skins (17)
Entry Type Size
/video/minimal-skin.css css 3.42 kB
/video/skin.css css 3.44 kB
/video/minimal-skin js 24.87 kB
/video/minimal-skin.tailwind js 25.17 kB
/video/skin js 24.92 kB
/video/skin.tailwind js 25.29 kB
/audio/minimal-skin.css css 2.48 kB
/audio/skin.css css 2.45 kB
/audio/minimal-skin js 23.09 kB
/audio/minimal-skin.tailwind js 23.26 kB
/audio/skin js 23.05 kB
/audio/skin.tailwind js 23.36 kB
/background/skin.css css 117 B
/background/skin js 1.15 kB
/base.css css 157 B
/shared.css css 88 B
/skin-element js 1.34 kB
UI Components (22)
Entry Size
/ui/alert-dialog 2.19 kB
/ui/alert-dialog-close 1.69 kB
/ui/alert-dialog-description 1.66 kB
/ui/alert-dialog-title 1.62 kB
/ui/buffering-indicator 1.93 kB
/ui/captions-button 2.00 kB
/ui/controls 1.94 kB
/ui/error-dialog 2.37 kB
/ui/fullscreen-button 1.98 kB
/ui/mute-button 2.00 kB
/ui/pip-button 1.98 kB
/ui/play-button 1.95 kB
/ui/playback-rate-button 2.00 kB
/ui/popover 2.62 kB
/ui/poster 1.80 kB
/ui/seek-button 2.01 kB
/ui/slider 1.63 kB
/ui/thumbnail 2.22 kB
/ui/time 1.70 kB
/ui/time-slider 2.03 kB
/ui/tooltip 2.55 kB
/ui/volume-slider 2.29 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes
Presets (7)
Entry Size
/video (default) 19.87 kB
/video (default + hls) 151.72 kB
/video (minimal) 19.92 kB
/video (minimal + hls) 151.82 kB
/audio (default) 16.67 kB
/audio (minimal) 16.74 kB
/background 3.15 kB
Media (6)
Entry Size
/media/background-video 476 B
/media/dash-video 236.26 kB
/media/hls-video 133.27 kB
/media/mux-video 155.91 kB
/media/native-hls-video 3.44 kB
/media/simple-hls-video 14.93 kB
Skins (14)
Entry Type Size
/video/minimal-skin.css css 3.35 kB
/video/skin.css css 3.37 kB
/video/minimal-skin js 19.84 kB
/video/minimal-skin.tailwind js 23.30 kB
/video/skin js 19.80 kB
/video/skin.tailwind js 23.39 kB
/audio/minimal-skin.css css 2.38 kB
/audio/skin.css css 2.34 kB
/audio/minimal-skin js 16.66 kB
/audio/minimal-skin.tailwind js 19.13 kB
/audio/skin js 16.60 kB
/audio/skin.tailwind js 19.13 kB
/background/skin.css css 90 B
/background/skin js 272 B
UI Components (19)
Entry Size
/ui/alert-dialog 2.00 kB
/ui/buffering-indicator 1.63 kB
/ui/captions-button 1.83 kB
/ui/controls 1.67 kB
/ui/error-dialog 2.10 kB
/ui/fullscreen-button 1.79 kB
/ui/mute-button 1.78 kB
/ui/pip-button 1.77 kB
/ui/play-button 1.75 kB
/ui/playback-rate-button 1.79 kB
/ui/popover 3.36 kB
/ui/poster 1.53 kB
/ui/seek-button 1.78 kB
/ui/slider 2.48 kB
/ui/thumbnail 2.06 kB
/ui/time 1.89 kB
/ui/time-slider 3.35 kB
/ui/tooltip 2.52 kB
/ui/volume-slider 2.79 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes
Entries (8)
Entry Size
. 5.29 kB
/dom 8.92 kB
/dom/media/custom-media-element 1.76 kB
/dom/media/dash 235.82 kB
/dom/media/hls 132.72 kB
/dom/media/mux 155.40 kB
/dom/media/native-hls 2.84 kB
/dom/media/simple-hls 14.40 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 696 B
/react 360 B
🔧 @videojs/utils — no changes
Entries (10)
Entry Size
/array 104 B
/dom 1.53 kB
/events 319 B
/function 261 B
/object 247 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 12.45 kB
/playback-engine 12.41 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.

@mihar-22 mihar-22 changed the title fix(core): walk prototype chain in ProxyMixin for inherited methods fix(react): thumbnails broken when using hls media Apr 3, 2026
@mihar-22 mihar-22 marked this pull request as ready for review April 3, 2026 07:09
@mihar-22 mihar-22 merged commit 8b571f5 into main Apr 3, 2026
21 checks passed
@mihar-22 mihar-22 deleted the fix/proxy-prototype-chain-walk branch April 3, 2026 07:11
@luwes luwes mentioned this pull request Apr 3, 2026
Copy link
Copy Markdown

@cursor cursor bot left a comment

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 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.

Comment thread packages/core/src/dom/store/features/text-track.ts
This was referenced 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.

fix(react): storyboard thumbnails broken on custom media elements

1 participant