Skip to content

feat(packages): export media component building blocks#1098

Merged
mihar-22 merged 1 commit intomainfrom
feat/export-media-building-blocks
Mar 24, 2026
Merged

feat(packages): export media component building blocks#1098
mihar-22 merged 1 commit intomainfrom
feat/export-media-building-blocks

Conversation

@mihar-22
Copy link
Copy Markdown
Member

@mihar-22 mihar-22 commented Mar 24, 2026

Closes #1099

Summary

Export internal media component building blocks so external consumers can build custom media components (e.g., new streaming protocol integrations) without reaching into internal module paths.

Changes

  • Export Delegate interface and DelegateMixin from @videojs/core, re-exported through @videojs/html and @videojs/react
  • Export MediaProxyMixin from @videojs/core/dom (auto-flows to @videojs/html and @videojs/react)
  • Export useOptionalPlayer hook from @videojs/react
  • Export media utilities from @videojs/react: useMediaInstance, attachMediaElement, mediaProps, composeRefs, useComposedRefs, useDestroy, useLatestRef
Implementation details

All items were already exported from their source files but not re-exported from package entry points. The built-in HLS, DASH, and SimpleHLS components used them via relative imports. This change makes the same APIs available to external consumers.

Delegate requires export type due to verbatimModuleSyntax.

MediaProxyMixin added to @videojs/core/dom automatically flows to both @videojs/html and @videojs/react via their existing export * from '@videojs/core/dom' re-exports.

Testing

Covered by existing tests — re-exports only, no behavior changes. All 956 tests pass across core, react, and html packages.


Note

Low Risk
Low risk because this is limited to package entry-point re-exports (types/mixins/hooks/utilities) with no runtime behavior changes, but it does expand the public API surface that must be supported going forward.

Overview
Exposes previously-internal media building blocks via public package entry points so downstream consumers can build custom media components without importing internal paths.

@videojs/core now re-exports Delegate/DelegateMixin, and @videojs/core/dom re-exports MediaProxyMixin, which then flow through @videojs/html and @videojs/react. @videojs/react also re-exports useOptionalPlayer plus several media/React utilities (attachMediaElement, mediaProps, useMediaInstance, composeRefs/useComposedRefs, useDestroy, useLatestRef).

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

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 24, 2026

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

Project Deployment Actions Updated (UTC)
v10-sandbox Ready Ready Preview, Comment Mar 24, 2026 7:30am

Request Review

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 24, 2026

Deploy Preview for vjs10-site ready!

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

@github-actions
Copy link
Copy Markdown
Contributor

📦 Bundle Size Report

🎨 @videojs/html — no changes
Presets (7)
Entry Size
/video (default) 23.62 kB
/video (default + hls) 153.85 kB
/video (minimal) 23.49 kB
/video (minimal + hls) 153.76 kB
/audio (default) 21.79 kB
/audio (minimal) 21.80 kB
/background 6.74 kB
Media (5)
Entry Size
/media/background-video 1.03 kB
/media/container 1.59 kB
/media/dash-video 236.13 kB
/media/hls-video 131.53 kB
/media/simple-hls-video 12.40 kB
Players (3)
Entry Size
/video/player 6.47 kB
/audio/player 6.46 kB
/background/player 6.46 kB
Skins (16)
Entry Type Size
/video/minimal-skin.css css 3.25 kB
/video/skin.css css 3.31 kB
/video/minimal-skin js 22.72 kB
/video/minimal-skin.tailwind js 23.08 kB
/video/skin js 22.83 kB
/video/skin.tailwind js 23.11 kB
/audio/minimal-skin.css css 2.37 kB
/audio/skin.css css 2.37 kB
/audio/minimal-skin js 21.00 kB
/audio/minimal-skin.tailwind js 21.33 kB
/audio/skin js 21.00 kB
/audio/skin.tailwind js 21.27 kB
/background/skin.css css 117 B
/background/skin js 1.13 kB
/base.css css 157 B
/shared.css css 86 B
UI Components (21)
Entry Size
/ui/alert-dialog 2.15 kB
/ui/alert-dialog-close 1.67 kB
/ui/alert-dialog-description 1.55 kB
/ui/alert-dialog-title 1.59 kB
/ui/buffering-indicator 1.85 kB
/ui/captions-button 1.81 kB
/ui/controls 1.68 kB
/ui/fullscreen-button 1.83 kB
/ui/mute-button 1.83 kB
/ui/pip-button 1.85 kB
/ui/play-button 1.83 kB
/ui/playback-rate-button 1.84 kB
/ui/popover 3.35 kB
/ui/poster 1.78 kB
/ui/seek-button 1.90 kB
/ui/slider 2.07 kB
/ui/thumbnail 1.97 kB
/ui/time 1.67 kB
/ui/time-slider 2.15 kB
/ui/tooltip 2.39 kB
/ui/volume-slider 2.21 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes
Presets (7)
Entry Size
/video (default) 19.23 kB
/video (default + hls) 149.76 kB
/video (minimal) 19.26 kB
/video (minimal + hls) 149.70 kB
/audio (default) 16.04 kB
/audio (minimal) 16.11 kB
/background 3.13 kB
Media (4)
Entry Size
/media/background-video 476 B
/media/dash-video 236.18 kB
/media/hls-video 131.66 kB
/media/simple-hls-video 12.53 kB
Skins (14)
Entry Type Size
/video/minimal-skin.css css 3.25 kB
/video/skin.css css 3.31 kB
/video/minimal-skin js 19.19 kB
/video/minimal-skin.tailwind js 22.42 kB
/video/skin js 19.16 kB
/video/skin.tailwind js 22.43 kB
/audio/minimal-skin.css css 2.37 kB
/audio/skin.css css 2.37 kB
/audio/minimal-skin js 16.01 kB
/audio/minimal-skin.tailwind js 18.43 kB
/audio/skin js 15.99 kB
/audio/skin.tailwind js 18.37 kB
/background/skin.css css 90 B
/background/skin js 272 B
UI Components (18)
Entry Size
/ui/alert-dialog 2.81 kB
/ui/buffering-indicator 2.31 kB
/ui/captions-button 2.31 kB
/ui/controls 2.27 kB
/ui/fullscreen-button 2.30 kB
/ui/mute-button 2.31 kB
/ui/pip-button 2.29 kB
/ui/play-button 2.31 kB
/ui/playback-rate-button 2.29 kB
/ui/popover 3.32 kB
/ui/poster 2.11 kB
/ui/seek-button 2.31 kB
/ui/slider 3.20 kB
/ui/thumbnail 2.64 kB
/ui/time 2.02 kB
/ui/time-slider 2.81 kB
/ui/tooltip 2.97 kB
/ui/volume-slider 2.78 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes
Entries (6)
Entry Size
. 4.97 kB
/dom 8.70 kB
/dom/media/custom-media-element 1.81 kB
/dom/media/dash 235.79 kB
/dom/media/hls 131.11 kB
/dom/media/simple-hls 11.96 kB
🏷️ @videojs/element — no changes
Entries (2)
Entry Size
. 999 B
/context 943 B
📦 @videojs/store — no changes
Entries (3)
Entry Size
. 1.32 kB
/html 700 B
/react 360 B
🔧 @videojs/utils — no changes
Entries (10)
Entry Size
/array 104 B
/dom 1.25 kB
/events 227 B
/function 261 B
/object 119 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 10.12 kB
/playback-engine 10.02 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 marked this pull request as ready for review March 24, 2026 07:34
@mihar-22 mihar-22 merged commit bc2929e into main Mar 24, 2026
21 checks passed
@mihar-22 mihar-22 deleted the feat/export-media-building-blocks branch March 24, 2026 07:36
@luwes luwes mentioned this pull request Mar 24, 2026
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.

Feature: Export media component building blocks

1 participant