feat(skin): add error handling for audio players (#1048)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

packages/skins/src/default/tailwind/audio.tailwind.ts

@@ -13,8 +13,8 @@ import { surface as baseSurface } from './components/surface';
 
 export const root = cn(
   baseRoot,
-  '[--media-controls-text-color:var(--media-color-primary,oklch(0_0_0))]',
-  'dark:[--media-controls-text-color:var(--media-color-primary,oklch(1_0_0))]'
+  '[--media-text-color:var(--media-color-primary,oklch(0_0_0))]',
+  'dark:[--media-text-color:var(--media-color-primary,oklch(1_0_0))]'
 );
 
 /* ==========================================================================
@@ -39,7 +39,7 @@ export const surface = cn(
    Controls
    ========================================================================== */
 
-export const controls = cn(baseControls, surface, 'text-(--media-controls-text-color)');
+export const controls = cn(baseControls, surface, 'text-(--media-text-color)', 'peer-data-open/error:[&_*]:invisible');
 
 /* ==========================================================================
    Sliders
@@ -75,7 +75,16 @@ export const bufferingIndicator = {
 
 export const error = {
   ...baseError,
-  dialog: cn(baseError.dialog, surface),
+  dialog: cn(
+    'absolute inset-0 z-20 flex items-center gap-3 rounded-full px-5 pr-0.5',
+    'bg-(--media-surface-background-color) text-(--media-text-color)',
+    'backdrop-blur-lg backdrop-saturate-150',
+    'transition-[opacity,filter] duration-300 delay-100 ease-out',
+    'group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-[4px]',
+    'group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-[4px]',
+    'motion-reduce:duration-100 motion-reduce:delay-0'
+  ),
+  content: 'flex flex-1 items-center gap-2',
 };
 
 /* ==========================================================================

packages/skins/src/default/tailwind/components/button.ts

@@ -2,21 +2,21 @@ import { cn } from '@videojs/utils/style';
 
 export const button = {
   base: cn(
-    'items-center justify-center shrink-0 border-none cursor-pointer select-none text-center touch-manipulation',
-    'font-medium',
+    'flex items-center justify-center shrink-0 border-none cursor-pointer select-none text-center touch-manipulation',
+    'py-2 px-4 rounded-full',
     'outline-2 outline-transparent -outline-offset-2',
-    'transition-[background-color,color,outline-offset,scale] duration-150 ease-out',
+    'transition-[background-color,outline-offset,scale] duration-150 ease-out',
+    'active:scale-[0.98]',
     'disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale',
-    'focus-visible:outline-blue-500 focus-visible:outline-offset-2',
+    'focus-visible:outline-current focus-visible:outline-offset-2',
     'data-[availability=unavailable]:hidden'
   ),
-  icon: cn(
-    'grid w-[2.125rem] aspect-square bg-transparent rounded-full',
-    'text-inherit text-shadow-inherit',
+  primary: 'bg-white text-black font-medium text-center',
+  subtle: cn(
+    'bg-transparent text-inherit text-shadow-inherit',
     'hover:bg-current/10 hover:no-underline',
     'focus-visible:bg-current/10',
-    'aria-expanded:bg-current/10',
-    'active:scale-90'
+    'aria-expanded:bg-current/10'
   ),
-  default: cn('flex py-2 px-4 bg-white rounded-full', 'text-black'),
+  icon: cn('grid w-[2.125rem] aspect-square p-0', 'active:scale-90'),
 };

packages/skins/src/default/tailwind/components/error.ts

@@ -1,9 +1,9 @@
 import { cn } from '@videojs/utils/style';
 
 export const error = {
-  root: 'peer/error group/error flex absolute inset-0 z-20 items-center justify-center',
+  root: 'peer/error group/error flex absolute inset-0 z-20 items-center justify-center outline-none',
   dialog: cn(
-    'flex flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white text-sm',
+    'flex flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white',
     // Animation
     'transition-[opacity,scale,transform] duration-500 delay-100',
     'ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]',

packages/skins/src/default/tailwind/components/seek.ts

@@ -1,6 +1,6 @@
 export const seek = {
   button: '@max-md/media-controls:hidden',
-  label: 'text-[0.75em] font-[480] tabular-nums',
+  label: 'text-[10px] font-[480] tabular-nums',
   labelForward: 'absolute -right-px -bottom-0.75',
   labelBackward: 'absolute -left-px -bottom-0.75',
 };

packages/skins/src/default/tailwind/video.tailwind.ts

@@ -87,6 +87,7 @@ export const controls = cn(
   // Position
   'absolute bottom-3 inset-x-3',
   '[color:var(--media-color-primary,oklch(1_0_0))] z-10',
+  'peer-data-open/error:hidden',
   'ease-out origin-bottom',
   'duration-(--media-controls-transition-duration)',
   'delay-(--media-controls-transition-delay)',
@@ -153,7 +154,9 @@ export const bufferingIndicator = {
 
 export const error = {
   ...baseError,
-  dialog: cn(baseError.dialog, surface),
+  dialog: cn(baseError.dialog, surface, 'text-shadow-[0_1px_0_oklch(0_0_0/0.25)]'),
+  content: cn(baseError.content, 'text-shadow-inherit'),
+  title: cn(baseError.title, 'text-base'),
 };
 
 /* ==========================================================================