Skip to content

docs(site): add "No Skin" option to installation skin picker#1525

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

docs(site): add "No Skin" option to installation skin picker#1525
ronald-urbina wants to merge 1 commit intomainfrom
docs/add-none-skin-option-to-install-guide

Conversation

@ronald-urbina
Copy link
Copy Markdown
Collaborator

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

Closes 929

Adds a "No Skin" option to the skin picker on the installation page,
letting users see what a bare player setup looks like without any
pre-built skin.

Changes

  • Skin type extended with 'none'
  • SkinPicker shows a third "No Skin" tile (Code2 icon) for both
    video and audio use cases
  • HTML codegen: skips the skin wrapper tag and skin import, only
    registers the player
  • React codegen: omits the skin component, skin CSS import, and skin
    wrapper in the JSX output
  • CDN codegen: resolves to video-player.js / audio-player.js

Note

Medium Risk
Medium risk because it extends the Skin union and changes HTML/React/CDN snippet generation paths, which could impact the correctness of installation code shown for multiple use cases if edge cases are missed.

Overview
Adds a new Skin option ('none') so the installation page can generate examples of a bare player without a pre-built UI skin.

Updates the skin picker UI to include a No Skin tile for both audio and video. Adjusts HTML, React, and CDN code generation to skip skin wrapper tags/components and skin CSS/imports when skin === 'none', while still importing/registering the appropriate player (and renderer/media modules as needed).

Reviewed by Cursor Bugbot for commit 7c2353a. 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 6:06pm

Request Review

@netlify
Copy link
Copy Markdown

netlify Bot commented May 7, 2026

Deploy Preview for vjs10-site ready!

Name Link
🔨 Latest commit 7c2353a
🔍 Latest deploy log https://app.netlify.com/projects/vjs10-site/deploys/69fcd4bee1ca070008e0878c
😎 Deploy Preview https://deploy-preview-1525--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 7c2353a. Configure here.

${mediaComment}
<${tag} src="${src}"${playsInline}></${tag}>
</${providerTag}>`;
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

HTML markup drops skin for background-video when skin is "none"

Medium Severity

In generateHTMLMarkup, the skin === 'none' check on line 140 fires before any background-video handling, producing a bare <background-video-player> without a skin wrapper. Every other codegen function (getCdnFileName, generateHTMLJSImports, generateReactCreateCode) checks for background-video first and always includes the background-video skin. Since the skin store isn't reset when switching use cases and the SkinPicker unmounts for background-video, a user who selects "No Skin" then switches to "Background Video" will see inconsistent generated code — HTML markup without a skin, but JS imports and React output that include the skin.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 7c2353a. 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 "None" Preset and Skin Options to Installation Page

1 participant