refactor(react): replace prototype-walking and inferred class props#1376
Merged
Conversation
…prop handling Replace `attachMediaElement` and `mediaProps` utilities with a `useAttachMedia` hook and explicit per-property synchronization in each media component. This removes `InferClassProps` from `@videojs/utils` and eliminates runtime prototype walking, giving each component a statically-typed props interface with proper `Omit` to avoid conflicts with HTML attributes.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
mihar-22
changed the title
Contributor
📦 Bundle Size Report🎨 @videojs/html — no changesPresets (7)
Media (8)
Players (3)
Skins (17)
UI Components (25)
Sizes are marginal over the root entry point. ⚛️ @videojs/react — no changesPresets (7)
Media (7)
Skins (14)
UI Components (20)
Sizes are marginal over the root entry point. 🧩 @videojs/core — no changesEntries (9)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (10)
📦 @videojs/spf — no changesEntries (3)
ℹ️ How to interpretAll sizes are standalone totals (minified + brotli).
Run |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
…useSyncProps hook Each media class/mixin now exports a Props interface and defaultProps constant. React components use a generic useSyncProps hook that dirty-checks against defaults, replacing per-property boilerplate with a single call. Also renames CastableMediaProps → CastableMedia (full mixin shape), CastableMediaBase → CastableMediaHost, CastableMediaSuperclass → CastableMediaHostConstructor, and introduces CastableMediaProps as the settable-only props interface. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 056d71e. Configure here.
… default - Replace ?? with isUndefined() so null passes through to setters (e.g. castCustomData) - Spread hlsMediaDefaultProps.config in field initializer to avoid shared reference Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
mihar-22
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
mediaProps) with explicit per-property dirty checks, and memoized the attach/detach ref callback viauseAttachMediahookInferClassPropsexposed every settable property on the media class (e.g.currentTime,volume,playbackRate) as React props, but React has no two-way binding — setting these during render would fight with the browser's own state. Now only props that are genuine configuration (likesrc,preload,config,debug) are exposed.Changes
useAttachMediahook wrappingMediaEngineHost.attach/detachin a stableuseCallbackref callbackmediaPropsruntime prop spreading with explicit destructuring and per-property dirty checksPartial<Pick<...>>media prop interfaces per component, usingOmit<..., keyof MediaProps>to resolve HTML attribute conflictsattach-media-element.ts,media-props.ts, andInferClassProps+ helpers from@videojs/utilsTesting
pnpm typecheck— passespnpm -F @videojs/react test— 200 tests passpnpm -F @videojs/react build— builds successfullypnpm check:workspace— 6/6 checks passNote
Medium Risk
Touches the React wrappers’ prop-to-media synchronization and ref attachment paths, which can subtly change when/which media properties are applied. Risk is mitigated by narrowing to explicit config props, but regressions could show up as missing/ignored props or changed defaulting behavior.
Overview
Refactors the React media components (
DashVideo,HlsVideo,NativeHlsVideo,SimpleHlsVideo,MuxVideo,MuxAudio) to stop prototype-walking and auto-exposing all writable media fields as React props, and instead sync only explicit configuration props to the underlying media instances via a newuseSyncPropshelper.Replaces the old
attachMediaElementref helper with a memoizeduseAttachMediahook, and introduces explicit*MediaProps+*DefaultPropsexports in core/SPF media hosts (Dash/HLS/NativeHLS/Castable/Mux/SPF) to centralize default values and clarify which properties are supported as controllable props. Removesmedia-props.ts,attach-media-element.ts, and theInferClassPropsutility type from@videojs/utils.Reviewed by Cursor Bugbot for commit 762fcdc. Bugbot is set up for automated code reviews on this repo. Configure here.