Skip to content

refactor(media)!: extract media package from core - #1879

Merged
mihar-22 merged 4 commits into
mainfrom
t3code/move-media-to-package
Jul 29, 2026
Merged

refactor(media)!: extract media package from core#1879
mihar-22 merged 4 commits into
mainfrom
t3code/move-media-to-package

Conversation

@mihar-22

@mihar-22 mihar-22 commented Jul 27, 2026

Copy link
Copy Markdown
Member

Summary

  • add @videojs/media for media contracts, state, DOM hosts, and playback engines
  • move media-specific dependencies and public subpaths out of @videojs/core
  • update core, HTML, React, sandbox, and API docs consumers to import from the new package
  • register the package with TypeScript, Turbo, CI, release-please, commitlint, and repository documentation

Related to #1861

Verification

  • confirmed @videojs/media is unclaimed on npm (npm view returns E404)
  • built @videojs/media, @videojs/core, @videojs/html, @videojs/react, and the sandbox
  • passed root typecheck, lint, workspace consistency checks, and diff validation
  • passed media tests (411), focused HTML Mux tests (17), focused React Mux tests (12), and API docs builder tests (139)
  • validated the @videojs/media@10.0.0-beta.25 publish artifact with npm pack --dry-run

Test environment note

The combined test command under the repository's Volta Node 22 configuration encounters 31 Intl.DurationFormat availability failures. The affected core, HTML, and React suites pass under Node 26.


Note

High Risk
This is a breaking public API and monorepo-wide import migration touching playback engines, store features, and HTML/React surfaces; regressions would affect streaming, casting, and player state wiring.

Overview
Breaking refactor: media is no longer part of @videojs/core. A new @videojs/media package owns capability contracts and state types (@videojs/media) plus browser hosts and engines under @videojs/media/dom/* (HLS, DASH, Mux, Vimeo, Simple HLS, Google Cast, etc.). Streaming-related dependencies (hls.js, dashjs, mux-embed, @vimeo/player, @videojs/spf) move with that code; core now depends on @videojs/media and drops ./dom/media/* and ./media/predicate exports.

Core UI and DOM store features import media types from @videojs/media; player/media typing is consolidated in packages/core/src/dom/player.ts (replacing ./media/types re-exports). HTML and React pull media and predicates from @videojs/media, and custom media elements are split so implementation lives in media.ts with index.ts re-exporting.

Host helpers are renamed for clarity: addComponentaddMediaComponent, getProp/setProp/getOwnergetMediaProp/setMediaProp/getMediaOwner. Release-please, CI test matrix, issue templates, AGENTS.md, internal design docs, and SPF workflow references are updated to point at packages/media paths.

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

@netlify

netlify Bot commented Jul 27, 2026

Copy link
Copy Markdown

Deploy Preview for vjs10-site ready!

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

@vercel

vercel Bot commented Jul 27, 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 Jul 28, 2026 11:01pm

Request Review

@github-actions

github-actions Bot commented Jul 27, 2026

Copy link
Copy Markdown
Contributor

📦 Bundle Size Report

🎨 @videojs/html — no changes
Presets (7)
Entry Initial Lazy
/video (default) 52.41 kB 50.16 kB
/video (default + hls) 191.64 kB 50.16 kB
/video (minimal) 52.32 kB 50.16 kB
/video (minimal + hls) 191.66 kB 50.16 kB
/audio (default) 45.42 kB 50.16 kB
/audio (minimal) 41.99 kB 50.16 kB
/background 4.20 kB
Media (10)
Entry Initial
/media/background-video 1.14 kB
/media/container 1.71 kB
/media/dash-video 214.86 kB
/media/hlsjs-video 141.54 kB
/media/mux-audio 164.86 kB
/media/mux-video 164.86 kB
/media/native-hls-video 9.07 kB
/media/simple-hls-audio-only 19.08 kB
/media/simple-hls-video 21.13 kB
/media/vimeo-video 12.31 kB
Players (5)
Entry Initial
/video/player 8.22 kB
/audio/player 5.37 kB
/background/player 3.92 kB
/live-video/player 7.63 kB
/live-audio/player 5.38 kB
Skins (30)
Entry Type Initial Lazy
/video/minimal-skin.css css 5.70 kB
/video/skin.css css 5.66 kB
/video/minimal-skin js 52.27 kB 50.16 kB
/video/minimal-skin.tailwind js 53.02 kB 50.16 kB
/video/skin js 52.37 kB 50.16 kB
/video/skin.tailwind js 53.16 kB 50.16 kB
/audio/minimal-skin.css css 3.97 kB
/audio/skin.css css 3.86 kB
/audio/minimal-skin js 41.99 kB 50.16 kB
/audio/minimal-skin.tailwind js 42.49 kB 50.16 kB
/audio/skin js 45.45 kB 50.16 kB
/audio/skin.tailwind js 45.94 kB 50.16 kB
/background/skin.css css 133 B
/background/skin js 1.14 kB
/live-video/minimal-skin.css css 5.70 kB
/live-video/skin.css css 5.66 kB
/live-video/minimal-skin js 48.64 kB 50.16 kB
/live-video/minimal-skin.tailwind js 49.16 kB 50.16 kB
/live-video/skin js 50.84 kB 50.16 kB
/live-video/skin.tailwind js 51.41 kB 50.16 kB
/live-audio/minimal-skin.css css 3.97 kB
/live-audio/skin.css css 3.86 kB
/live-audio/minimal-skin js 34.18 kB 50.16 kB
/live-audio/minimal-skin.tailwind js 33.62 kB 50.16 kB
/live-audio/skin js 37.72 kB 50.16 kB
/live-audio/skin.tailwind js 37.21 kB 50.16 kB
/global.css css 183 B
/shared.css css 153 B
/tailwind.css css 161 B
/skin-element js 1.51 kB
UI Components (39)
Entry Initial
/ui/airplay-button 2.53 kB
/ui/alert-dialog 2.90 kB
/ui/alert-dialog-close 2.47 kB
/ui/alert-dialog-description 2.40 kB
/ui/alert-dialog-title 2.45 kB
/ui/audio-track-radio-group 3.00 kB
/ui/buffering-indicator 2.61 kB
/ui/captions-button 2.60 kB
/ui/captions-radio-group 2.97 kB
/ui/cast-button 2.55 kB
/ui/compounds 3.18 kB
/ui/controls 2.91 kB
/ui/error-dialog 2.94 kB
/ui/fullscreen-button 2.59 kB
/ui/hotkey 2.60 kB
/ui/menu 2.95 kB
/ui/mute-button 2.57 kB
/ui/pip-button 2.53 kB
/ui/play-button 2.57 kB
/ui/playback-rate-button 2.62 kB
/ui/playback-rate-radio-group 2.77 kB
/ui/popover 3.09 kB
/ui/poster 2.38 kB
/ui/quality-radio-group 2.92 kB
/ui/seek-button 2.46 kB
/ui/seek-indicator 2.87 kB
/ui/seek-indicator-value 410 B
/ui/slider 2.93 kB
/ui/status-announcer 2.46 kB
/ui/status-indicator 2.54 kB
/ui/status-indicator-value 369 B
/ui/thumbnail 2.59 kB
/ui/time 2.92 kB
/ui/time-slider 2.95 kB
/ui/tooltip 3.00 kB
/ui/volume-indicator 2.54 kB
/ui/volume-indicator-fill 401 B
/ui/volume-indicator-value 458 B
/ui/volume-slider 2.93 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes
Presets (7)
Entry Initial Lazy
/video (default) 41.52 kB 50.16 kB
/video (default + hls) 179.63 kB 50.16 kB
/video (minimal) 41.88 kB 50.16 kB
/video (minimal + hls) 180.01 kB 50.16 kB
/audio (default) 34.65 kB 50.16 kB
/audio (minimal) 34.71 kB 50.16 kB
/background 581 B
Media (9)
Entry Initial
/media/background-video 394 B
/media/dash-video 213.12 kB
/media/hlsjs-video 139.90 kB
/media/mux-audio 163.12 kB
/media/mux-video 163.36 kB
/media/native-hls-video 7.29 kB
/media/simple-hls-audio-only 17.39 kB
/media/simple-hls-video 19.42 kB
/media/vimeo-video 10.46 kB
Skins (27)
Entry Type Initial Lazy
/tailwind.css css 161 B
/video/minimal-skin.css css 5.56 kB
/video/skin.css css 5.52 kB
/video/minimal-skin js 41.80 kB 50.16 kB
/video/minimal-skin.tailwind js 47.83 kB 50.16 kB
/video/skin js 41.46 kB 50.16 kB
/video/skin.tailwind js 47.51 kB 50.16 kB
/audio/minimal-skin.css css 3.79 kB
/audio/skin.css css 3.68 kB
/audio/minimal-skin js 34.61 kB 50.16 kB
/audio/minimal-skin.tailwind js 36.63 kB 50.16 kB
/audio/skin js 34.54 kB 50.16 kB
/audio/skin.tailwind js 38.79 kB 50.16 kB
/background/skin.css css 90 B
/background/skin js 272 B
/live-video/minimal-skin.css css 5.56 kB
/live-video/skin.css css 5.52 kB
/live-video/minimal-skin js 36.14 kB 50.16 kB
/live-video/minimal-skin.tailwind js 41.99 kB 50.16 kB
/live-video/skin js 36.14 kB 50.16 kB
/live-video/skin.tailwind js 42.07 kB 50.16 kB
/live-audio/minimal-skin.css css 3.79 kB
/live-audio/skin.css css 3.68 kB
/live-audio/minimal-skin js 24.70 kB 50.16 kB
/live-audio/minimal-skin.tailwind js 27.76 kB 50.16 kB
/live-audio/skin js 24.73 kB 50.16 kB
/live-audio/skin.tailwind js 27.86 kB 50.16 kB
UI Components (33)
Entry Initial
/ui/airplay-button 2.53 kB
/ui/alert-dialog 2.72 kB
/ui/audio-track 2.43 kB
/ui/buffering-indicator 2.63 kB
/ui/captions-button 2.52 kB
/ui/captions-radio-group 2.33 kB
/ui/cast-button 2.56 kB
/ui/controls 2.54 kB
/ui/error-dialog 2.55 kB
/ui/fullscreen-button 2.58 kB
/ui/gesture 2.52 kB
/ui/hotkey 2.57 kB
/ui/live-button 2.41 kB
/ui/menu 2.71 kB
/ui/mute-button 2.58 kB
/ui/pip-button 2.57 kB
/ui/play-button 2.50 kB
/ui/playback-rate 2.50 kB
/ui/playback-rate-button 2.52 kB
/ui/popover 3.23 kB
/ui/poster 2.56 kB
/ui/quality 2.35 kB
/ui/seek-button 2.51 kB
/ui/seek-indicator 2.62 kB
/ui/slider 2.53 kB
/ui/status-announcer 2.45 kB
/ui/status-indicator 2.44 kB
/ui/thumbnail 2.55 kB
/ui/time 2.28 kB
/ui/time-slider 2.51 kB
/ui/tooltip 3.21 kB
/ui/volume-indicator 2.47 kB
/ui/volume-slider 2.64 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core

Path Base initial PR initial Diff % Lazy
. 11.33 kB 10.79 kB -545 B -4.7% 🔽
/dom/media/custom-media-element 2.09 kB −2.09 kB −100% 🗑️
/dom/media/dash 208.97 kB −208.97 kB −100% 🗑️
/dom/media/google-cast 4.03 kB −4.03 kB −100% 🗑️
/dom/media/hls-js 136.02 kB −136.02 kB −100% 🗑️
/dom/media/media-host 1.25 kB −1.25 kB −100% 🗑️
/dom/media/media-played-ranges 576 B −576 B −100% 🗑️
/dom/media/mux 159.44 kB −159.44 kB −100% 🗑️
/dom/media/native-hls 3.07 kB −3.07 kB −100% 🗑️
/dom/media/simple-hls 18.96 kB −18.96 kB −100% 🗑️
/dom/media/simple-hls-audio-only 16.89 kB −16.89 kB −100% 🗑️
/dom/media/vimeo 9.87 kB −9.87 kB −100% 🗑️
/media/predicate 563 B −563 B −100% 🗑️
Entries (72)
Entry Initial Lazy
. 10.79 kB
/dom 17.82 kB
/i18n 2.99 kB 50.16 kB
/i18n/locales/all 30.51 kB
/i18n/locales/ar 1.11 kB
/i18n/locales/az 1.01 kB
/i18n/locales/bg 1.17 kB
/i18n/locales/bn 1.20 kB
/i18n/locales/bs 926 B
/i18n/locales/ca 988 B
/i18n/locales/cs 978 B
/i18n/locales/cy 948 B
/i18n/locales/da 918 B
/i18n/locales/de 1023 B
/i18n/locales/el 1.37 kB
/i18n/locales/en 707 B
/i18n/locales/es 925 B
/i18n/locales/et 995 B
/i18n/locales/eu 939 B
/i18n/locales/fa 1.11 kB
/i18n/locales/fi 970 B
/i18n/locales/fr 1001 B
/i18n/locales/gd 1.00 kB
/i18n/locales/gl 929 B
/i18n/locales/he 1.03 kB
/i18n/locales/hi 1.21 kB
/i18n/locales/hr 948 B
/i18n/locales/hu 1019 B
/i18n/locales/it 958 B
/i18n/locales/ja 1.10 kB
/i18n/locales/ko 1.04 kB
/i18n/locales/lv 1012 B
/i18n/locales/mr 1.21 kB
/i18n/locales/nb 908 B
/i18n/locales/ne 1.20 kB
/i18n/locales/nl 934 B
/i18n/locales/nn 913 B
/i18n/locales/oc 999 B
/i18n/locales/pl 1.03 kB
/i18n/locales/pt 955 B
/i18n/locales/pt-BR 955 B
/i18n/locales/pt-PT 914 B
/i18n/locales/ro 996 B
/i18n/locales/ru 1.24 kB
/i18n/locales/sk 1018 B
/i18n/locales/sl 960 B
/i18n/locales/sr 989 B
/i18n/locales/sv 935 B
/i18n/locales/te 1.22 kB
/i18n/locales/th 1.19 kB
/i18n/locales/tr 1003 B
/i18n/locales/uk 1.27 kB
/i18n/locales/vi 1006 B
/i18n/locales/zh 947 B
/i18n/locales/zh-CN 947 B
/i18n/locales/zh-TW 949 B
/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/errors 277 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 179 B
/i18n/text/time 214 B
/i18n/text/volume 133 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 361 B
🔧 @videojs/utils — no changes
Entries (12)
Entry Initial
/array 104 B
/dom 2.94 kB
/events 319 B
/function 327 B
/jwt 176 B
/object 505 B
/predicate 265 B
/percent 281 B
/string 239 B
/style 190 B
/time 813 B
/number 158 B

📦 @videojs/media

Path Base initial PR initial Diff % Lazy
. 959 B 🆕
/dom/audio-host 1.16 kB 🆕
/dom/custom-media-element 2.09 kB 🆕
/dom/dash 209.06 kB 🆕
/dom/google-cast 4.04 kB 🆕
/dom/hls-js 135.95 kB 🆕
/dom/media-host 1.27 kB 🆕
/dom/media-played-ranges 576 B 🆕
/dom/mux 159.27 kB 🆕
/dom/native-hls 3.06 kB 🆕
/dom/simple-hls 18.90 kB 🆕
/dom/simple-hls-audio-only 16.88 kB 🆕
/dom/video-host 1.44 kB 🆕
/dom/vimeo 9.88 kB 🆕
Entries (14)
Entry Initial
. 959 B
/dom/audio-host 1.16 kB
/dom/custom-media-element 2.09 kB
/dom/dash 209.06 kB
/dom/google-cast 4.04 kB
/dom/hls-js 135.95 kB
/dom/media-host 1.27 kB
/dom/media-played-ranges 576 B
/dom/mux 159.27 kB
/dom/native-hls 3.06 kB
/dom/simple-hls 18.90 kB
/dom/simple-hls-audio-only 16.88 kB
/dom/video-host 1.44 kB
/dom/vimeo 9.88 kB
📦 @videojs/spf — no changes
Entries (4)
Entry Initial
. 4.46 kB
/dom 6.49 kB
/hls 17.85 kB
/background-video 13.30 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.

Move media contracts, DOM hosts, and playback engines into
@videojs/media. Update workspace consumers and release metadata.
@mihar-22
mihar-22 marked this pull request as ready for review July 28, 2026 23:13

@luwes luwes left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Amazing job, I went through it quickly but all looks good including some of the renaming and barrel file changes 👍 I'd also like to see this merged sooner than later

@mihar-22
mihar-22 merged commit 75dcc66 into main Jul 29, 2026
27 checks passed
@mihar-22
mihar-22 deleted the t3code/move-media-to-package branch July 29, 2026 04:14
@luwes luwes mentioned this pull request Jul 29, 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.

2 participants