feat(skin): add error handling for audio players#1048
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds playback error handling to audio player skins and unifies error-dialog rendering across audio/video while updating button styling to support a “subtle” control variant. It also enables the error feature in the core audio feature preset so audio players can surface errors consistently.
Changes:
- Add shared React
ErrorDialogpreset and wire it into audio skins (default/minimal, CSS + Tailwind variants) while updating video skins to use the shared component. - Introduce/standardize
media-button--subtle(and--primaryusage for confirmation actions), plus small layout tweaks (controls padding/radius, seek label sizing). - Enable
errorFeatureinaudioFeaturesand update core typing/tests accordingly.
Reviewed changes
Copilot reviewed 44 out of 44 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| site/src/content/docs/concepts/skins.mdx | Updates docs examples to use media-button--subtle for icon controls. |
| packages/skins/src/minimal/tailwind/video.tailwind.ts | Adds error styling overrides + padding variable; hides controls when error open. |
| packages/skins/src/minimal/tailwind/components/seek.ts | Adjusts seek label sizing. |
| packages/skins/src/minimal/tailwind/components/root.ts | Introduces --media-controls-radius token. |
| packages/skins/src/minimal/tailwind/components/error.ts | Refines minimal error base styles (outline/text sizing). |
| packages/skins/src/minimal/tailwind/components/button.ts | Adds primary/subtle variants + radius/padding-based rounding. |
| packages/skins/src/minimal/tailwind/audio.tailwind.ts | Adds compact inline audio error dialog styling + error-open visibility behavior. |
| packages/skins/src/minimal/css/video.css | Moves/defines video error dialog styling and control padding token. |
| packages/skins/src/minimal/css/components/root.css | Adds --media-controls-radius token for CSS skin. |
| packages/skins/src/minimal/css/components/error.css | Moves common error styles out; hides controls content when error open. |
| packages/skins/src/minimal/css/components/buttons.css | Adds --primary/--subtle variants and updates base button behavior. |
| packages/skins/src/minimal/css/audio.css | Adds compact inline audio error dialog styling + new tokens. |
| packages/skins/src/default/tailwind/video.tailwind.ts | Hides controls when error open; refines error dialog typography/shadows. |
| packages/skins/src/default/tailwind/components/seek.ts | Adjusts seek label sizing. |
| packages/skins/src/default/tailwind/components/error.ts | Refines default error base styles (outline/text sizing). |
| packages/skins/src/default/tailwind/components/button.ts | Adds primary/subtle variants and tweaks focus/active behavior. |
| packages/skins/src/default/tailwind/audio.tailwind.ts | Adds audio error dialog layout and ties controls visibility to error state. |
| packages/skins/src/default/css/video.css | Moves/defines video error dialog styling + hides controls when error open. |
| packages/skins/src/default/css/components/slider.css | Adds focus ring styling via ::after. |
| packages/skins/src/default/css/components/error.css | Removes shared positioning styles and adds error-open control hiding behavior. |
| packages/skins/src/default/css/components/buttons.css | Adds --primary/--subtle variants and updates base button behavior. |
| packages/skins/src/default/css/audio.css | Adds compact inline audio error dialog styling + new tokens. |
| packages/sandbox/app/shell/navbar.tsx | Adds overflow handling/padding to the sandbox navbar control group. |
| packages/react/src/presets/video/skin.tsx | Switches to shared preset ErrorDialog and uses subtle icon button styling. |
| packages/react/src/presets/video/skin.tailwind.tsx | Switches to shared preset ErrorDialog + updates Tailwind button composition. |
| packages/react/src/presets/video/minimal-skin.tsx | Switches to shared preset ErrorDialog and uses subtle icon button styling. |
| packages/react/src/presets/video/minimal-skin.tailwind.tsx | Switches to shared preset ErrorDialog + updates Tailwind button composition. |
| packages/react/src/presets/error-dialog.tsx | Moves/standardizes shared ErrorDialog preset API (classes → classNames). |
| packages/react/src/presets/audio/skin.tsx | Adds ErrorDialog to default audio skin and updates buttons to subtle style. |
| packages/react/src/presets/audio/skin.tailwind.tsx | Adds ErrorDialog to default audio Tailwind skin + integrates error styles. |
| packages/react/src/presets/audio/minimal-skin.tsx | Adds ErrorDialog to minimal audio skin and updates buttons to subtle style. |
| packages/react/src/presets/audio/minimal-skin.tailwind.tsx | Adds ErrorDialog to minimal audio Tailwind skin + integrates error styles. |
| packages/html/src/player/tests/create-player.test-d.ts | Extends type test coverage for audio store error state/dismiss API. |
| packages/html/src/define/video/skin.ts | Updates video HTML skin control buttons to use subtle variant. |
| packages/html/src/define/video/skin.tailwind.ts | Updates video HTML Tailwind skin control buttons to use subtle variant. |
| packages/html/src/define/video/minimal-skin.ts | Updates minimal video HTML skin control buttons to use subtle variant. |
| packages/html/src/define/video/minimal-skin.tailwind.ts | Updates minimal video HTML Tailwind skin control buttons to use subtle variant. |
| packages/html/src/define/audio/skin.ts | Updates audio HTML skin control buttons to use subtle variant. |
| packages/html/src/define/audio/skin.tailwind.ts | Updates audio HTML Tailwind skin control buttons to use subtle variant. |
| packages/html/src/define/audio/minimal-skin.ts | Updates minimal audio HTML skin control buttons to use subtle variant. |
| packages/html/src/define/audio/minimal-skin.tailwind.ts | Updates minimal audio HTML Tailwind skin control buttons to use subtle variant. |
| packages/core/src/dom/store/features/presets.ts | Adds errorFeature to audioFeatures. |
| packages/core/src/dom/media/types.ts | Updates AudioFeatures tuple type to include MediaErrorState. |
| cspell.json | Adds “squircle” to dictionary for new CSS feature usage. |
Comments suppressed due to low confidence (1)
packages/html/src/define/audio/minimal-skin.ts:33
- The PR description/test plan mentions that the HTML (custom elements) audio skins include error handling, but this minimal audio template still does not include any alert/error UI markup wired to the
errorfeature state. If HTML skins are in scope, add the corresponding dialog elements here as well so errors are visible.
function getTemplateHTML() {
return /*html*/ `
<media-container class="media-minimal-skin media-minimal-skin--audio">
<slot name="media"></slot>
<div class="media-controls">
<media-tooltip-group>
<div class="media-button-group">
<media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
${renderIcon('play', { class: 'media-icon media-icon--play' })}
${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
</media-play-button>
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
sampotts
force-pushed
the
feat/audio-error-handling
branch
from
a541727 to
07259f0
Compare
Contributor
📦 Bundle Size Report🎨 @videojs/html
Presets (7)
Media (5)
Players (3)
Skins (16)
UI Components (21)
Sizes are marginal over the root entry point. ⚛️ @videojs/react
Presets (7)
Media (4)
Skins (14)
UI Components (18)
Sizes are marginal over the root entry point. 🧩 @videojs/core — no changesEntries (6)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (10)
📦 @videojs/spf — no changesEntries (3)
ℹ️ How to interpretAll sizes are standalone totals (minified + brotli).
Run |
sampotts
force-pushed
the
feat/audio-error-handling
branch
from
07259f0 to
6b17b2a
Compare
sampotts
force-pushed
the
feat/audio-error-handling
branch
from
6b17b2a to
230e5d1
Compare
sampotts
force-pushed
the
feat/audio-error-handling
branch
from
230e5d1 to
6e3d055
Compare
Contributor
CI Failure Diagnosis
Fix: run |
Add error dialog to audio skins (default and minimal) with a compact inline layout suited to the audio player form factor. Move the shared ErrorDialog React component from video-specific to a shared presets location so both audio and video skins can reuse it. - Add audio-specific error dialog styles for both CSS and Tailwind skins - Move video error dialog styles from shared component to video-specific - Add `media-button--subtle` variant for transparent background buttons - Update button class names across audio skins for consistency - Add `error` to audio feature presets in core - Update sandbox navbar layout overflow handling Closes #813 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
sampotts
force-pushed
the
feat/audio-error-handling
branch
from
6e3d055 to
80bc005
Compare
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
ErrorDialogReact component frompresets/video/topresets/so both audio and video skins reuse itmedia-button--subtlevariant for transparent background buttons used across audio controlserrorfeature to audio presets in core so audio players surface playback errorsCloses #813
Test plan
prefers-reduced-motiontransitions🤖 Generated with Claude Code