feat(compiler): improve skin transform dx

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

@@ -2,6 +2,18 @@ import { cn } from '@videojs/utils/style';
 
 export const error = {
   root: 'peer/error group/error hidden data-[open]:flex absolute inset-0 z-20 items-center justify-center outline-none',
+  popup: cn(
+    'peer/error group/error hidden data-[open]:flex absolute left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2 outline-none',
+    'flex-col gap-3 max-w-72 p-5 rounded-[1.75rem] text-white',
+    // Animation
+    'transition-[opacity,scale,transform]',
+    'duration-(--media-error-dialog-transition-duration)',
+    'delay-(--media-error-dialog-transition-delay)',
+    'ease-(--media-error-dialog-transition-timing-function)',
+    'data-starting-style:opacity-0 data-starting-style:scale-50',
+    'data-ending-style:opacity-0 data-ending-style:scale-50',
+    'data-ending-style:delay-0'
+  ),
   dialog: cn(
     'flex flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white',
     // Animation
@@ -17,4 +29,5 @@ export const error = {
   title: 'font-semibold leading-tight',
   description: 'opacity-70 wrap-anywhere',
   actions: 'flex gap-2 *:flex-1',
+  close: 'w-full',
 };

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

@@ -187,6 +187,7 @@ export const bufferingIndicator = {
 
 export const error = {
   ...baseError,
+  popup: cn(baseError.popup, surface, 'text-shadow-2xs text-shadow-black/25'),
   dialog: cn(baseError.dialog, surface, 'text-shadow-2xs text-shadow-black/25'),
   content: cn(baseError.content, 'text-shadow-inherit'),
   title: cn(baseError.title, 'text-base'),

packages/skins/src/default/video.skin.tsx

@@ -1,13 +1,16 @@
 import {
   AirPlayButton,
+  BufferingIndicator,
   CastButton,
   Container,
   Controls,
+  ErrorDialog,
   FullscreenButton,
   Gesture,
   Hotkey,
   PiPButton,
   PlayButton,
+  Poster,
   SeekButton,
   StatusAnnouncer,
   Time,
@@ -27,15 +30,18 @@ import {
   PlayIcon,
   RestartIcon,
   SeekIcon,
+  SpinnerIcon,
 } from '@videojs/icons/components';
 import {
   airplayIcon,
+  bufferingIndicator,
   button,
   buttonGroupEnd,
   buttonGroupStart,
   castIcon,
   container,
   controls,
+  error,
   fullscreenIcon,
   icon,
   iconContainer,
@@ -48,9 +54,10 @@ import {
 } from './tailwind/video.tailwind';
 
 const SEEK_TIME = 10;
+const iconButton = [button.base, button.subtle, button.icon];
 
 export interface DefaultVideoSkinProps {
-  className?: string | undefined;
+  className?: string;
   children?: unknown;
 }
 
@@ -59,12 +66,26 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
     <Container className={[container, className]}>
       {children}
 
+      <Poster />
+
+      <BufferingIndicator className={bufferingIndicator.root}>
+        <SpinnerIcon className={icon} />
+      </BufferingIndicator>
+
+      <ErrorDialog.Root>
+        <ErrorDialog.Popup className={error.popup}>
+          <ErrorDialog.Title className={error.title}>Something went wrong.</ErrorDialog.Title>
+          <ErrorDialog.Description className={error.description} />
+          <ErrorDialog.Close className={[button.base, button.primary, error.close]}>OK</ErrorDialog.Close>
+        </ErrorDialog.Popup>
+      </ErrorDialog.Root>
+
       <Controls.Root className={controls}>
         <Tooltip.Provider>
           <Controls.Group className={buttonGroupStart}>
             <Tooltip.Root side="top">
               <Tooltip.Trigger>
-                <PlayButton className={[button.base, button.subtle, button.icon, playIcon.button]}>
+                <PlayButton className={[iconButton, playIcon.button]}>
                   <RestartIcon className={[icon, playIcon.restart]} />
                   <PlayIcon className={[icon, playIcon.play]} />
                   <PauseIcon className={[icon, playIcon.pause]} />
@@ -78,7 +99,7 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
 
             <Tooltip.Root side="top">
               <Tooltip.Trigger>
-                <SeekButton seconds={-SEEK_TIME} className={[button.base, button.subtle, button.icon]}>
+                <SeekButton seconds={-SEEK_TIME} className={[iconButton]}>
                   <SeekIcon className={[icon, iconContainer, iconFlipped]} />
                 </SeekButton>
               </Tooltip.Trigger>
@@ -90,7 +111,7 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
 
             <Tooltip.Root side="top">
               <Tooltip.Trigger>
-                <SeekButton seconds={SEEK_TIME} className={[button.base, button.subtle, button.icon]}>
+                <SeekButton seconds={SEEK_TIME} className={[iconButton]}>
                   <SeekIcon className={[icon, iconContainer]} />
                 </SeekButton>
               </Tooltip.Trigger>
@@ -119,7 +140,7 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
           <Controls.Group className={buttonGroupEnd}>
             <Tooltip.Root side="top">
               <Tooltip.Trigger>
-                <CastButton className={[button.base, button.subtle, button.icon, castIcon.button]}>
+                <CastButton className={[iconButton, castIcon.button]}>
                   <CastEnterIcon className={[icon, castIcon.enter]} />
                   <CastExitIcon className={[icon, castIcon.exit]} />
                 </CastButton>
@@ -132,7 +153,7 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
 
             <Tooltip.Root side="top">
               <Tooltip.Trigger>
-                <AirPlayButton className={[button.base, button.subtle, button.icon, airplayIcon.button]}>
+                <AirPlayButton className={[iconButton, airplayIcon.button]}>
                   <AirPlayEnterIcon className={[icon, airplayIcon.enter]} />
                   <AirPlayExitIcon className={[icon, airplayIcon.exit]} />
                 </AirPlayButton>
@@ -145,7 +166,7 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
 
             <Tooltip.Root side="top">
               <Tooltip.Trigger>
-                <PiPButton className={[button.base, button.subtle, button.icon, pipIcon.button]}>
+                <PiPButton className={[iconButton, pipIcon.button]}>
                   <PipEnterIcon className={[icon, pipIcon.off]} />
                   <PipExitIcon className={[icon, pipIcon.on]} />
                 </PiPButton>
@@ -158,7 +179,7 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
 
             <Tooltip.Root side="top">
               <Tooltip.Trigger>
-                <FullscreenButton className={[button.base, button.subtle, button.icon, fullscreenIcon.button]}>
+                <FullscreenButton className={[iconButton, fullscreenIcon.button]}>
                   <FullscreenEnterIcon className={[icon, fullscreenIcon.enter]} />
                   <FullscreenExitIcon className={[icon, fullscreenIcon.exit]} />
                 </FullscreenButton>