Skip to content

feat(react): add createMediaComponent - #2604

Open
mihar-22 wants to merge 1 commit into
pr6a/create-media-elementfrom
pr6b/create-media-component
Open

feat(react): add createMediaComponent#2604
mihar-22 wants to merge 1 commit into
pr6a/create-media-elementfrom
pr6b/create-media-component

Conversation

@mihar-22

@mihar-22 mihar-22 commented Sep 3, 2026 •
edited by cursor Bot
Loading

Copy link
Copy Markdown
Member

What this does

Adds createMediaComponent, the React façade factory, and builds every React media component with it except WistiaVideo and HlsBackgroundVideo.

import { HlsJsAdapter } from '@videojs/hlsjs-video';
import { createMediaComponent, type MediaComponentProps } from '@videojs/react';

export type HlsJsVideoProps = MediaComponentProps<typeof HlsJsAdapter>;

export const HlsJsVideo = createMediaComponent(
  HlsJsAdapter,
  ({ props, children, ref }) => (
    <video {...props} ref={ref}>
      {children}
    </video>
  ),
  { displayName: 'HlsJsVideo' }
);

Shape

createMediaComponent(Adapter, render, options?)

The render callback receives:

Arg What it is
adapter the adapter instance, already synced with this render's props
props the native attributes left after adapter props were synced onto the adapter
children children
ref attaches the adapter to the element it lands on and forwards the consumer's ref
initialProps frozen first-render adapter props, for values that must not change after mount (an embed's initial src)

Types follow from the adapter alone: the ref and native attributes come from its attach() target (MediaAdapterTarget), and the adapter props from its static defaultProps. No tag parameter, so iframe embeds and the Mux components (with their storyboard child) use the same factory.

Also

  • useAttachMedia accepts any element target; useAttachIframe is gone.
  • The media reference builder reads the target from the element the render callback returns and the defaults from the adapter, with a fixture and e2e assertion.
  • New createMediaComponent reference page.

Validation

Build, typecheck, lint, @videojs/react tests, builder e2e suite, site tests, regenerated media references.

🤖 Generated with Claude Code

Note

Medium Risk
Wide refactor across every migrated media component and public prop typings; behavior should be equivalent but regressions in embed initial URLs, prop sync, or Mux storyboard wiring are the main risk areas.

Overview
Introduces createMediaComponent, a shared factory that wires useMediaInstance, prop sync, attach refs, and frozen initialProps into a render callback, and rebuilds nearly all built-in React media components (video/audio <video>/<audio> and iframe embeds) on top of it instead of duplicated forwardRef + hooks.

Public API: exports the factory plus MediaComponentProps and related types from @videojs/react; component prop types are now MediaComponentProps<typeof SomeAdapter> rather than hand-written intersections (notably simpler Mux variants). Embed components keep first-mount URL behavior via initialProps and read live adapter state (e.g. referrerPolicy, Spotify controls/visibility) from adapter.

Internals: removes useAttachIframe and loosens useAttachMedia to generic element targets. Adds unit tests for attach, prop splitting, initialProps, and ref/displayName.

Docs/tooling: new reference page and sidebar entry; the API docs builder detects createMediaComponent(Adapter, render) to infer DOM target from the callback’s root JSX and defaults from Adapter.defaultProps, with fixture/e2e updates.

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

@vercel

vercel Bot commented Sep 3, 2026 •
edited
Loading

Copy link
Copy Markdown

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

Project Deployment Actions Updated
v10-sandbox Ready Ready Preview Sep 3, 2026 10:31pm UTC

Request Review

@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from d56298a to 84cab08 Compare September 3, 2026 00:00
@pkg-pr-new

pkg-pr-new Bot commented Sep 3, 2026 •
edited
Loading

Copy link
Copy Markdown
@videojs/cdn

pnpm add https://pkg.pr.new/videojs/v10/@videojs/cdn@2604

@videojs/cloudflare-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/cloudflare-video@2604

@videojs/core

pnpm add https://pkg.pr.new/videojs/v10/@videojs/core@2604

@videojs/dash-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/dash-video@2604

@videojs/element

pnpm add https://pkg.pr.new/videojs/v10/@videojs/element@2604

@videojs/google-cast

pnpm add https://pkg.pr.new/videojs/v10/@videojs/google-cast@2604

@videojs/hlsjs-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/hlsjs-video@2604

@videojs/html

pnpm add https://pkg.pr.new/videojs/v10/@videojs/html@2604

@videojs/media

pnpm add https://pkg.pr.new/videojs/v10/@videojs/media@2604

@videojs/mux-audio

pnpm add https://pkg.pr.new/videojs/v10/@videojs/mux-audio@2604

@videojs/mux-data

pnpm add https://pkg.pr.new/videojs/v10/@videojs/mux-data@2604

@videojs/mux-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/mux-video@2604

@videojs/native-hls-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/native-hls-video@2604

@videojs/react

pnpm add https://pkg.pr.new/videojs/v10/@videojs/react@2604

@videojs/shaka-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/shaka-video@2604

@videojs/spf

pnpm add https://pkg.pr.new/videojs/v10/@videojs/spf@2604

@videojs/spotify-audio

pnpm add https://pkg.pr.new/videojs/v10/@videojs/spotify-audio@2604

@videojs/store

pnpm add https://pkg.pr.new/videojs/v10/@videojs/store@2604

@videojs/tiktok-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/tiktok-video@2604

@videojs/twitch-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/twitch-video@2604

@videojs/utils

pnpm add https://pkg.pr.new/videojs/v10/@videojs/utils@2604

@videojs/vimeo-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/vimeo-video@2604

@videojs/wistia-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/wistia-video@2604

@videojs/youtube-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/youtube-video@2604

commit: 7878580

@github-actions

github-actions Bot commented Sep 3, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

📦 Bundle Size Report

🎨 @videojs/html — no changes
Presets (7)
Entry Initial Lazy
/video (default) 62.79 kB 56.87 kB
/video (default + hls) 64.45 kB 56.87 kB
/video (minimal) 63.04 kB 56.87 kB
/video (minimal + hls) 64.78 kB 56.87 kB
/audio (default) 46.99 kB 56.87 kB
/audio (minimal) 47.21 kB 56.87 kB
/background 11.57 kB 56.87 kB
Media (18)
Entry Initial
/media/mux-video 3.06 kB
/media/mux-audio 2.74 kB
/media/background-video 1.16 kB
/media/cloudflare-video 2.94 kB
/media/dash-video 2.65 kB
/media/hls-audio 22.10 kB
/media/hls-background-video 16.86 kB
/media/hls-video 28.08 kB
/media/hlsjs-video 2.65 kB
/media/mux-background-video 16.86 kB
/media/native-hls-video 7.60 kB
/media/shaka-video 2.65 kB
/media/spotify-audio 3.05 kB
/media/tiktok-video 3.16 kB
/media/twitch-video 2.96 kB
/media/vimeo-video 2.93 kB
/media/wistia-video 607 B
/media/youtube-video 2.93 kB
Players (5)
Entry Initial Lazy
/video/player 9.69 kB 56.87 kB
/audio/player 6.14 kB 56.87 kB
/background/player 4.46 kB 56.87 kB
/live-video/player 9.06 kB 56.87 kB
/live-audio/player 6.15 kB 56.87 kB
Skins (29)
Entry Type Initial Lazy
/video/minimal-skin.css css 7.65 kB —
/video/skin.css css 7.46 kB —
/video/minimal-skin js 61.46 kB 56.87 kB
/video/minimal-skin2 js 8.09 kB —
/video/skin js 61.34 kB 56.87 kB
/video/skin2 js 7.95 kB —
/audio/minimal-skin.css css 5.53 kB —
/audio/skin.css css 5.34 kB —
/audio/minimal-skin js 45.77 kB 56.87 kB
/audio/minimal-skin2 js 5.83 kB —
/audio/skin js 45.50 kB 56.87 kB
/audio/skin2 js 5.65 kB —
/background/skin.css css 139 B —
/background/skin js 9.81 kB 56.87 kB
/background/skin2 js 187 B —
/live-video/minimal-skin.css css 6.21 kB —
/live-video/skin.css css 6.18 kB —
/live-video/minimal-skin js 49.42 kB 56.87 kB
/live-video/minimal-skin2 js 6.55 kB —
/live-video/skin js 49.43 kB 56.87 kB
/live-video/skin2 js 6.58 kB —
/live-audio/minimal-skin.css css 4.39 kB —
/live-audio/skin.css css 4.37 kB —
/live-audio/minimal-skin js 35.43 kB 56.87 kB
/live-audio/minimal-skin2 js 4.64 kB —
/live-audio/skin js 35.36 kB 56.87 kB
/live-audio/skin2 js 4.63 kB —
/global.css css 190 B —
/shared.css css 118 B —
UI Components (62)
Entry Initial Lazy
/ui/airplay-button 11.26 kB 56.87 kB
/ui/alert-dialog 8.79 kB 56.87 kB
/ui/audio-track-radio-group 11.38 kB 56.87 kB
/ui/buffering-indicator 8.60 kB 56.87 kB
/ui/captions-button 11.51 kB 56.87 kB
/ui/captions-radio-group 11.45 kB 56.87 kB
/ui/cast-button 11.25 kB 56.87 kB
/ui/container 9.47 kB 56.87 kB
/ui/controls 8.77 kB 56.87 kB
/ui/controls-backdrop 1.69 kB 56.87 kB
/ui/controls-content 1.67 kB 56.87 kB
/ui/dialog 8.73 kB 56.87 kB
/ui/dialog-backdrop 1.70 kB 56.87 kB
/ui/dialog-close 2.06 kB 56.87 kB
/ui/dialog-description 1.69 kB 56.87 kB
/ui/dialog-popup 1.90 kB 56.87 kB
/ui/dialog-title 1.70 kB 56.87 kB
/ui/error-dialog 12.38 kB 56.87 kB
/ui/fullscreen-button 11.26 kB 56.87 kB
/ui/gesture 9.57 kB 56.87 kB
/ui/hotkey 9.97 kB 56.87 kB
/ui/live-button 9.74 kB 56.87 kB
/ui/menu 18.45 kB 56.87 kB
/ui/menu-checkbox-item 1.97 kB 56.87 kB
/ui/menu-content 7.52 kB 56.87 kB
/ui/menu-group 2.09 kB 56.87 kB
/ui/menu-group-label 1.64 kB —
/ui/menu-item 2.29 kB 56.87 kB
/ui/menu-item-indicator 1.37 kB 56.87 kB
/ui/menu-radio-group 3.01 kB 56.87 kB
/ui/menu-radio-item 2.13 kB 56.87 kB
/ui/menu-separator 1.30 kB 56.87 kB
/ui/mute-button 11.28 kB 56.87 kB
/ui/pip-button 11.22 kB 56.87 kB
/ui/play-button 11.22 kB 56.87 kB
/ui/playback-rate-button 11.32 kB 56.87 kB
/ui/playback-rate-radio-group 11.38 kB 56.87 kB
/ui/popover 8.57 kB 56.87 kB
/ui/poster 8.67 kB 56.87 kB
/ui/quality-radio-group 11.97 kB 56.87 kB
/ui/seek-button 11.27 kB 56.87 kB
/ui/seek-indicator 12.69 kB 56.87 kB
/ui/seek-indicator-value 1.10 kB —
/ui/slider 11.65 kB 56.87 kB
/ui/slider-preview 2.01 kB 56.87 kB
/ui/status-announcer 10.60 kB 56.87 kB
/ui/status-indicator 13.01 kB 56.87 kB
/ui/status-indicator-value 1.10 kB —
/ui/thumbnail 9.84 kB 56.87 kB
/ui/time 10.80 kB 56.87 kB
/ui/time-slider 12.99 kB 56.87 kB
/ui/time-slider-chapter-title 8.79 kB 56.87 kB
/ui/time-slider-chapters 9.63 kB 56.87 kB
/ui/title 8.17 kB 56.87 kB
/ui/tooltip 9.95 kB 56.87 kB
/ui/tooltip-label 1.21 kB —
/ui/tooltip-shortcut 1.18 kB —
/ui/volume-indicator 13.02 kB 56.87 kB
/ui/volume-indicator-fill 1.11 kB —
/ui/volume-indicator-value 1.10 kB —
/ui/volume-popover 14.74 kB 56.87 kB
/ui/volume-slider 12.31 kB 56.87 kB
⚛️ @videojs/react — 22 small size changes
Path Base initial PR initial Initial diff Lazy diff
/extensions/google-cast 1.59 kB 1.59 kB +3 B (+0.2%) —
/extensions/mux-data 1.64 kB 1.66 kB +18 B (+1.1%) —
/media/mux-video/hls-js 958 B 1.02 kB +84 B (+8.8%) —
/media/mux-video/spf 961 B 1.02 kB +87 B (+9.1%) —
/media/mux-audio/hls-js 699 B 777 B +78 B (+11.2%) —
/media/mux-audio/spf 703 B 783 B +80 B (+11.4%) —
/media/cloudflare-video 911 B 981 B +70 B (+7.7%) —
/media/dash-video 693 B 772 B +79 B (+11.4%) —
/media/hls-audio 20.36 kB 20.46 kB +98 B (+0.5%) —
/media/hls-video 26.35 kB 26.46 kB +116 B (+0.4%) —
/media/hlsjs-video 695 B 775 B +80 B (+11.5%) —
/media/mux-audio 693 B 771 B +78 B (+11.3%) —
/media/mux-video 950 B 1.00 kB +76 B (+8.0%) —
/media/native-hls-video 5.77 kB 5.85 kB +79 B (+1.3%) —
/media/shaka-video 704 B 775 B +71 B (+10.1%) —
/media/spotify-audio 901 B 977 B +76 B (+8.4%) —
/media/tiktok-video 906 B 982 B +76 B (+8.4%) —
/media/twitch-video 929 B 1005 B +76 B (+8.2%) —
/media/vimeo-video 888 B 955 B +67 B (+7.5%) —
/media/youtube-video 897 B 964 B +67 B (+7.5%) —
/video (default + hls) 50.83 kB 50.89 kB +60 B (+0.1%) 0 B
/video (minimal + hls) 51.06 kB 51.02 kB -37 B (-0.1%) 0 B
Presets (7)
Entry Initial Lazy
/video (default) 50.61 kB 56.87 kB
/video (default + hls) 50.89 kB 56.87 kB
/video (minimal) 50.66 kB 56.87 kB
/video (minimal + hls) 51.02 kB 56.87 kB
/audio (default) 39.50 kB 56.87 kB
/audio (minimal) 39.56 kB 56.87 kB
/background 581 B 56.87 kB
Media (22)
Entry Initial
/media/mux-video/hls-js 1.02 kB
/media/mux-video/spf 1.02 kB
/media/mux-audio/hls-js 777 B
/media/mux-audio/spf 783 B
/media/background-video 402 B
/media/cloudflare-video 981 B
/media/dash-video 772 B
/media/hls-audio 20.46 kB
/media/hls-background-video 16.40 kB
/media/hls-video 26.46 kB
/media/hlsjs-video 775 B
/media/mux-audio 771 B
/media/mux-background-video 16.47 kB
/media/mux-video 1.00 kB
/media/native-hls-video 5.85 kB
/media/shaka-video 775 B
/media/spotify-audio 977 B
/media/tiktok-video 982 B
/media/twitch-video 1005 B
/media/vimeo-video 955 B
/media/wistia-video 619 B
/media/youtube-video 964 B
Extensions (2)
Entry Initial
/extensions/google-cast 1.59 kB
/extensions/mux-data 1.66 kB
Players (5)
Entry Initial Lazy
/video/player 7.56 kB 56.87 kB
/audio/player 4.00 kB 56.87 kB
/background/player 2.27 kB 56.87 kB
/live-video/player 6.95 kB 56.87 kB
/live-audio/player 3.99 kB 56.87 kB
Skins (18)
Entry Type Initial Lazy
/video/minimal-skin.css css 7.52 kB —
/video/skin.css css 7.34 kB —
/video/minimal-skin js 50.63 kB 56.87 kB
/video/skin js 50.50 kB 56.87 kB
/audio/minimal-skin.css css 5.37 kB —
/audio/skin.css css 5.18 kB —
/audio/minimal-skin js 39.46 kB 56.87 kB
/audio/skin js 39.40 kB 56.87 kB
/background/skin.css css 90 B —
/background/skin js 277 B —
/live-video/minimal-skin.css css 6.07 kB —
/live-video/skin.css css 6.05 kB —
/live-video/minimal-skin js 42.57 kB 56.87 kB
/live-video/skin js 42.52 kB 56.87 kB
/live-audio/minimal-skin.css css 4.24 kB —
/live-audio/skin.css css 4.21 kB —
/live-audio/minimal-skin js 30.35 kB 56.87 kB
/live-audio/skin js 30.36 kB 56.87 kB
UI Components (39)
Entry Initial Lazy
/ui/airplay-button 10.45 kB 56.87 kB
/ui/alert-dialog 4.73 kB 56.87 kB
/ui/audio-track 7.92 kB 56.87 kB
/ui/audio-track-radio-group 9.48 kB 56.87 kB
/ui/buffering-indicator 7.79 kB 56.87 kB
/ui/captions-button 10.43 kB 56.87 kB
/ui/captions-radio-group 9.59 kB 56.87 kB
/ui/cast-button 10.43 kB 56.87 kB
/ui/controls 7.71 kB 56.87 kB
/ui/dialog 4.75 kB 56.87 kB
/ui/error-dialog 11.80 kB 56.87 kB
/ui/fullscreen-button 10.39 kB 56.87 kB
/ui/gesture 7.98 kB 56.87 kB
/ui/hotkey 8.38 kB 56.87 kB
/ui/live-button 8.80 kB 56.87 kB
/ui/menu 19.45 kB 56.87 kB
/ui/mute-button 10.44 kB 56.87 kB
/ui/pip-button 10.39 kB 56.87 kB
/ui/play-button 10.37 kB 56.87 kB
/ui/playback-rate 7.99 kB 56.87 kB
/ui/playback-rate-button 10.37 kB 56.87 kB
/ui/playback-rate-radio-group 9.53 kB 56.87 kB
/ui/popover 8.16 kB 56.87 kB
/ui/poster 7.57 kB 56.87 kB
/ui/quality 8.42 kB 56.87 kB
/ui/quality-radio-group 9.96 kB 56.87 kB
/ui/seek-button 10.41 kB 56.87 kB
/ui/seek-indicator 11.98 kB 56.87 kB
/ui/slider 12.74 kB 56.87 kB
/ui/status-announcer 10.10 kB 56.87 kB
/ui/status-indicator 12.29 kB 56.87 kB
/ui/thumbnail 8.73 kB 56.87 kB
/ui/time 9.77 kB 56.87 kB
/ui/time-slider 14.17 kB 56.87 kB
/ui/title 7.28 kB 56.87 kB
/ui/tooltip 8.93 kB 56.87 kB
/ui/volume-indicator 12.34 kB 56.87 kB
/ui/volume-popover 14.20 kB 56.87 kB
/ui/volume-slider 12.13 kB 56.87 kB
🧩 @videojs/core — no changes
Entries (76)
Entry Initial Lazy
. 13.15 kB —
/dom 22.53 kB 56.87 kB
/vjsc 1.82 kB —
/i18n 3.23 kB 56.87 kB
/i18n/locales/all 34.97 kB —
/i18n/locales/ar 1.22 kB —
/i18n/locales/az 1.09 kB —
/i18n/locales/bg 1.29 kB —
/i18n/locales/bn 1.23 kB —
/i18n/locales/bs 1.00 kB —
/i18n/locales/ca 1.07 kB —
/i18n/locales/cs 1.07 kB —
/i18n/locales/cy 1.02 kB —
/i18n/locales/da 1006 B —
/i18n/locales/de 1.09 kB —
/i18n/locales/el 1.49 kB —
/i18n/locales/en 785 B —
/i18n/locales/es 1018 B —
/i18n/locales/et 1.05 kB —
/i18n/locales/eu 1.03 kB —
/i18n/locales/fa 1.22 kB —
/i18n/locales/fi 1.04 kB —
/i18n/locales/fr 1.07 kB —
/i18n/locales/gd 1.10 kB —
/i18n/locales/gl 1022 B —
/i18n/locales/he 1.14 kB —
/i18n/locales/hi 1.30 kB —
/i18n/locales/hr 1.02 kB —
/i18n/locales/hu 1.10 kB —
/i18n/locales/id 919 B —
/i18n/locales/it 1.01 kB —
/i18n/locales/ja 1.18 kB —
/i18n/locales/ko 1.14 kB —
/i18n/locales/lt 1.02 kB —
/i18n/locales/lv 1.09 kB —
/i18n/locales/mr 1.30 kB —
/i18n/locales/nb 987 B —
/i18n/locales/ne 1.29 kB —
/i18n/locales/nl 1.00 kB —
/i18n/locales/nn 987 B —
/i18n/locales/oc 1.08 kB —
/i18n/locales/pl 1.14 kB —
/i18n/locales/pt 1.03 kB —
/i18n/locales/pt-BR 1.03 kB —
/i18n/locales/pt-PT 1.01 kB —
/i18n/locales/ro 1.07 kB —
/i18n/locales/ru 1.40 kB —
/i18n/locales/sk 1.10 kB —
/i18n/locales/sl 1.04 kB —
/i18n/locales/sr 1.07 kB —
/i18n/locales/sv 1.01 kB —
/i18n/locales/te 1.32 kB —
/i18n/locales/th 1.29 kB —
/i18n/locales/tr 1.08 kB —
/i18n/locales/uk 1.41 kB —
/i18n/locales/vi 1.11 kB —
/i18n/locales/zh 1.02 kB —
/i18n/locales/zh-CN 1.02 kB —
/i18n/locales/zh-TW 1.02 kB —
/i18n/text/airplay 101 B —
/i18n/text/buttons 137 B —
/i18n/text/captions 93 B —
/i18n/text/cast 114 B —
/i18n/text/common 90 B —
/i18n/text/container 75 B —
/i18n/text/errors 285 B —
/i18n/text/fullscreen 98 B —
/i18n/text/live 126 B —
/i18n/text/menu 249 B —
/i18n/text/pip 101 B —
/i18n/text/playback 80 B —
/i18n/text/seek 105 B —
/i18n/text/slider 65 B —
/i18n/text/status 222 B —
/i18n/text/time 280 B —
/i18n/text/volume 133 B —
🏷️ @videojs/element — no changes
Entries (2)
Entry Initial
. 1.05 kB
/context 943 B
📦 @videojs/store — no changes
Entries (3)
Entry Initial
. 1.72 kB
/html 703 B
/react 365 B
🔧 @videojs/utils — no changes
Entries (13)
Entry Initial
/array 271 B
/dom 5.02 kB
/events 320 B
/function 386 B
/i18n 249 B
/jwt 176 B
/object 535 B
/predicate 297 B
/percent 281 B
/string 239 B
/style 212 B
/time 976 B
/number 199 B
📦 @videojs/cdn — no changes
📦 @videojs/cloudflare-video — no changes
📦 @videojs/dash-video — no changes
📦 @videojs/google-cast — no changes
📦 @videojs/hlsjs-video — no changes
📦 @videojs/media — no changes
Entries (3)
Entry Initial
. 1.14 kB
/dom 4.12 kB
/media-tracks 2.05 kB
📦 @videojs/mux — no changes
📦 @videojs/mux-audio — no changes
Entries (2)
Entry Initial
. 135.58 kB
/spf 20.84 kB
📦 @videojs/mux-data — no changes
📦 @videojs/mux-video — no changes
Entries (2)
Entry Initial
. 135.56 kB
/spf 26.75 kB
📦 @videojs/native-hls-video — no changes
📦 @videojs/shaka-video — no changes
📦 @videojs/spf — no changes
Entries (7)
Entry Initial
. 4.55 kB
/dom 6.60 kB
/hls 22.06 kB
/media-tracks 504 B
/hls-background-video 15.84 kB
/hls-audio 19.84 kB
/hls-video 25.89 kB
📦 @videojs/spotify-audio — no changes
📦 @videojs/tiktok-video — no changes
📦 @videojs/twitch-video — no changes
📦 @videojs/vimeo-video — no changes
📦 @videojs/wistia-video — no changes
Entries (2)
Entry Initial
. 1.91 kB
/helpers 1.77 kB
📦 @videojs/youtube-video — no changes
ℹ️ How to interpret

Each entry is independently bundled, minified, and brotli-compressed. Initial size includes its static import graph; lazy dynamic chunks are reported separately.

Entries are not additive because their dependency graphs overlap. Preset rows represent realistic combined bundles.

Changes of 300 B or less across initial, lazy, and total size are collapsed, not discarded.

Run pnpm size locally to check current initial sizes.

@mihar-22
mihar-22 marked this pull request as draft September 3, 2026 00:04
@netlify

netlify Bot commented Sep 3, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for vjs10-site ready!

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

@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 84cab08 to 7c1d2e6 Compare September 3, 2026 03:19
@mihar-22 mihar-22 mentioned this pull request Sep 3, 2026
Merged
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 7c1d2e6 to e155a0c Compare September 3, 2026 04:13
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from e155a0c to 46f504b Compare September 3, 2026 05:34
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 46f504b to fa437f8 Compare September 3, 2026 06:08
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from fa437f8 to 3601865 Compare September 3, 2026 06:19
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 3601865 to 3e68162 Compare September 3, 2026 06:31
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 3e68162 to b81d177 Compare September 3, 2026 06:40
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 7878580 to 82c5e3d Compare September 3, 2026 20:06
cursor[bot]
cursor Bot reviewed Sep 3, 2026
View reviewed changes
Comment thread packages/react/src/media/create-media-component.tsx
@github-actions github-actions Bot mentioned this pull request Sep 3, 2026
Closed
@github-actions

github-actions Bot commented Sep 3, 2026

Copy link
Copy Markdown
Contributor

E2E triage: real regression — the generated Next.js registry consumer cannot resolve the required @videojs/hlsjs-video peer while building @videojs/react/media/hlsjs-video; Playwright did not start. Tracking issue: #2622.

@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 82c5e3d to 8ae67eb Compare September 3, 2026 20:41
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 8ae67eb to eac3726 Compare September 3, 2026 20:56
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from eac3726 to 5fc9903 Compare September 3, 2026 21:02
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 5fc9903 to 657b514 Compare September 3, 2026 21:04
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 657b514 to 30e54dc Compare September 3, 2026 21:11
cursor[bot]
cursor Bot reviewed Sep 3, 2026
View reviewed changes

@cursor cursor Bot left a comment

Copy link
Copy Markdown

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 using default effort 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.

Reviewed by Cursor Bugbot for commit 30e54dc. Configure here.

Comment thread packages/react/src/media/twitch-video/adapter.tsx
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 30e54dc to 4ff3522 Compare September 3, 2026 22:13
@mihar-22 @claude
feat(react): add createMediaComponent
06d6e5d 
`createMediaComponent(tag, Adapter, options?)` builds a component that renders
a native `<video>` or `<audio>`, drives it through one adapter instance, syncs
the adapter's props from React props against `Adapter.defaultProps`, forwards
everything else (and the ref) to the element, and registers with the Player.
The six built-in components that followed that exact shape now use it.

The media reference builder reads the target and defaults straight from the
factory call, so those components keep their generated React prop tables.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 4ff3522 to 06d6e5d Compare September 3, 2026 22:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@cursor cursor[bot] cursor[bot] left review comments
@luwes luwes Awaiting requested review from luwes

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@mihar-22