Skip to content

docs(site): add ejected skin section to installation guide#1524

Open
ronald-urbina wants to merge 1 commit intomainfrom
docs/add-ejected-skin-to-install-guide
Open

docs(site): add ejected skin section to installation guide#1524
ronald-urbina wants to merge 1 commit intomainfrom
docs/add-ejected-skin-to-install-guide

Conversation

@ronald-urbina
Copy link
Copy Markdown
Collaborator

@ronald-urbina ronald-urbina commented May 7, 2026

Closes 1385

Adds a new "Ejecting a skin" section to the installation guide so users
can access the ejected skin workflow without going back to the homepage.

Changes

  • New EjectedSkinToggle component with a default/minimal radio switcher
    that shows the correct ejected-skin install steps per variant
  • installation.mdx wired up with the toggle and a teaser link near the
    skin picker section

Note

Low Risk
Low risk documentation/UI addition; changes are limited to new site components and MDX content with no impact on player/runtime logic.

Overview
Adds an “Ejecting a skin” section to the installation guide, including a teaser link near the skin picker to drive users to the new workflow.

Introduces EjectedSkinToggle (.astro + client TSX) that lets readers switch between Default and Minimal variants via an ImageRadioGroup, showing the corresponding EjectedSkin code snippets for the current framework (HTML vs React).

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

@vercel
Copy link
Copy Markdown

vercel Bot commented May 7, 2026

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

Project Deployment Actions Updated (UTC)
v10-sandbox Ready Ready Preview, Comment May 7, 2026 5:32pm

Request Review

@netlify
Copy link
Copy Markdown

netlify Bot commented May 7, 2026

Deploy Preview for vjs10-site ready!

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

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 7, 2026

📦 Bundle Size Report

🎨 @videojs/html — no changes
Presets (7)
Entry Size
/video (default) 32.84 kB
/video (default + hls) 166.51 kB
/video (minimal) 32.45 kB
/video (minimal + hls) 166.01 kB
/audio (default) 27.36 kB
/audio (minimal) 24.45 kB
/background 4.15 kB
Media (8)
Entry Size
/media/background-video 1.04 kB
/media/container 1.72 kB
/media/dash-video 236.58 kB
/media/hls-video 134.87 kB
/media/mux-audio 160.89 kB
/media/mux-video 161.01 kB
/media/native-hls-video 4.62 kB
/media/simple-hls-video 15.99 kB
Players (5)
Entry Size
/video/player 7.00 kB
/audio/player 5.12 kB
/background/player 3.86 kB
/live-video/player 7.02 kB
/live-audio/player 5.14 kB
Skins (30)
Entry Type Size
/video/minimal-skin.css css 4.46 kB
/video/skin.css css 4.46 kB
/video/minimal-skin js 32.45 kB
/video/minimal-skin.tailwind js 32.82 kB
/video/skin js 32.82 kB
/video/skin.tailwind js 33.22 kB
/audio/minimal-skin.css css 2.69 kB
/audio/skin.css css 2.65 kB
/audio/minimal-skin js 24.48 kB
/audio/minimal-skin.tailwind js 24.62 kB
/audio/skin js 27.33 kB
/audio/skin.tailwind js 27.52 kB
/background/skin.css css 115 B
/background/skin js 1.15 kB
/live-video/minimal-skin.css css 4.46 kB
/live-video/skin.css css 4.46 kB
/live-video/minimal-skin js 32.17 kB
/live-video/minimal-skin.tailwind js 32.47 kB
/live-video/skin js 32.24 kB
/live-video/skin.tailwind js 32.49 kB
/live-audio/minimal-skin.css css 2.69 kB
/live-audio/skin.css css 2.65 kB
/live-audio/minimal-skin js 24.35 kB
/live-audio/minimal-skin.tailwind js 24.28 kB
/live-audio/skin js 26.85 kB
/live-audio/skin.tailwind js 26.86 kB
/global.css css 176 B
/shared.css css 88 B
/tailwind.css css 228 B
/skin-element js 1.37 kB
UI Components (34)
Entry Size
/ui/alert-dialog 648 B
/ui/alert-dialog-close 303 B
/ui/alert-dialog-description 286 B
/ui/alert-dialog-title 290 B
/ui/buffering-indicator 2.07 kB
/ui/captions-button 2.00 kB
/ui/cast-button 2.01 kB
/ui/compounds 5.19 kB
/ui/controls 1.92 kB
/ui/error-dialog 2.45 kB
/ui/fullscreen-button 2.01 kB
/ui/hotkey 2.75 kB
/ui/menu 1.99 kB
/ui/mute-button 2.06 kB
/ui/pip-button 1.97 kB
/ui/play-button 2.01 kB
/ui/playback-rate-button 2.15 kB
/ui/popover 1.51 kB
/ui/poster 1.79 kB
/ui/seek-button 2.04 kB
/ui/seek-indicator 2.67 kB
/ui/seek-indicator-value 293 B
/ui/slider 1.20 kB
/ui/status-announcer 2.39 kB
/ui/status-indicator 2.42 kB
/ui/status-indicator-value 189 B
/ui/thumbnail 2.47 kB
/ui/time 1.90 kB
/ui/time-slider 2.99 kB
/ui/tooltip 1.63 kB
/ui/volume-indicator 2.68 kB
/ui/volume-indicator-fill 301 B
/ui/volume-indicator-value 301 B
/ui/volume-slider 3.49 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes
Presets (7)
Entry Size
/video (default) 26.33 kB
/video (default + hls) 158.76 kB
/video (minimal) 26.34 kB
/video (minimal + hls) 158.81 kB
/audio (default) 19.20 kB
/audio (minimal) 17.66 kB
/background 756 B
Media (7)
Entry Size
/media/background-video 575 B
/media/dash-video 235.21 kB
/media/hls-video 133.39 kB
/media/mux-audio 159.70 kB
/media/mux-video 159.68 kB
/media/native-hls-video 3.13 kB
/media/simple-hls-video 14.56 kB
Skins (27)
Entry Type Size
/tailwind.css css 228 B
/video/minimal-skin.css css 4.38 kB
/video/skin.css css 4.37 kB
/video/minimal-skin js 26.31 kB
/video/minimal-skin.tailwind js 30.87 kB
/video/skin js 26.25 kB
/video/skin.tailwind js 30.82 kB
/audio/minimal-skin.css css 2.56 kB
/audio/skin.css css 2.51 kB
/audio/minimal-skin js 17.61 kB
/audio/minimal-skin.tailwind js 20.23 kB
/audio/skin js 19.11 kB
/audio/skin.tailwind js 20.24 kB
/background/skin.css css 90 B
/background/skin js 272 B
/live-video/minimal-skin.css css 4.38 kB
/live-video/skin.css css 4.37 kB
/live-video/minimal-skin js 22.92 kB
/live-video/minimal-skin.tailwind js 27.39 kB
/live-video/skin js 22.99 kB
/live-video/skin.tailwind js 27.47 kB
/live-audio/minimal-skin.css css 2.56 kB
/live-audio/skin.css css 2.51 kB
/live-audio/minimal-skin js 16.23 kB
/live-audio/minimal-skin.tailwind js 18.70 kB
/live-audio/skin js 17.85 kB
/live-audio/skin.tailwind js 18.81 kB
UI Components (27)
Entry Size
/ui/alert-dialog 1.16 kB
/ui/buffering-indicator 1.95 kB
/ui/captions-button 2.17 kB
/ui/cast-button 2.13 kB
/ui/controls 1.92 kB
/ui/error-dialog 2.37 kB
/ui/fullscreen-button 2.14 kB
/ui/gesture 1.37 kB
/ui/hotkey 1.93 kB
/ui/live-button 2.12 kB
/ui/menu 3.86 kB
/ui/mute-button 2.13 kB
/ui/pip-button 2.13 kB
/ui/play-button 2.15 kB
/ui/playback-rate-button 2.19 kB
/ui/popover 1.95 kB
/ui/poster 1.80 kB
/ui/seek-button 2.14 kB
/ui/seek-indicator 1.95 kB
/ui/slider 3.25 kB
/ui/status-indicator 2.01 kB
/ui/thumbnail 2.05 kB
/ui/time 2.58 kB
/ui/time-slider 3.03 kB
/ui/tooltip 2.33 kB
/ui/volume-indicator 2.00 kB
/ui/volume-slider 2.27 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes
Entries (9)
Entry Size
. 7.24 kB
/dom 14.54 kB
/dom/media/custom-media-element 1.90 kB
/dom/media/dash 234.36 kB
/dom/media/google-cast 4.07 kB
/dom/media/hls 132.98 kB
/dom/media/mux 159.10 kB
/dom/media/native-hls 2.52 kB
/dom/media/simple-hls 13.93 kB
🏷️ @videojs/element — no changes
Entries (2)
Entry Size
. 996 B
/context 943 B
📦 @videojs/store — no changes
Entries (3)
Entry Size
. 1.39 kB
/html 695 B
/react 360 B
🔧 @videojs/utils — no changes
Entries (10)
Entry Size
/array 104 B
/dom 1.92 kB
/events 319 B
/function 327 B
/object 275 B
/predicate 265 B
/string 192 B
/style 190 B
/time 478 B
/number 158 B
📦 @videojs/spf — no changes
Entries (3)
Entry Size
. 4.29 kB
/dom 7.48 kB
/hls 13.32 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.

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.

Reviewed by Cursor Bugbot for commit 74cceee. Configure here.

import HumanCase from '@/components/docs/HumanCase.astro';
import LLMCase from '@/components/docs/LLMCase.astro';
import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs.tsx';
import EjectedSkin from '@/components/docs/EjectedSkin.astro';
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Unused EjectedSkin import in installation MDX

Low Severity

EjectedSkin is imported in installation.mdx but never referenced as a component anywhere in the file. Only EjectedSkinToggle is used (line 158), and that component already imports EjectedSkin internally in EjectedSkinToggle.astro. This import is dead code.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 74cceee. Configure here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

Docs: Add Ejected Skins to the Install Guide

1 participant