mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
feat(skin): add audio skins for HTML and React presets (#772)
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sam Potts
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
038ad8b4f5
commit
d751fdabea
@@ -0,0 +1,96 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
import { bufferingIndicator as baseBufferingIndicator } from './components/buffering';
|
||||
import { controls as baseControls } from './components/controls';
|
||||
import { error as baseError } from './components/error';
|
||||
import { popup as basePopup } from './components/popup';
|
||||
import { slider as baseSlider } from './components/slider';
|
||||
import { surface as baseSurface } from './components/surface';
|
||||
|
||||
/* ==========================================================================
|
||||
Surface (shared glass effect for tooltips, popovers, controls)
|
||||
========================================================================== */
|
||||
|
||||
export const surface = cn(
|
||||
baseSurface,
|
||||
'bg-white/50 dark:bg-black/40',
|
||||
'backdrop-brightness-98 backdrop-saturate-120 backdrop-blur',
|
||||
// Border and shadow
|
||||
'ring-white/5 shadow-black/15',
|
||||
// Border to enhance contrast on lighter pages
|
||||
'after:ring-black/5'
|
||||
);
|
||||
|
||||
/* ==========================================================================
|
||||
Controls
|
||||
========================================================================== */
|
||||
|
||||
export const controls = cn(baseControls, surface, 'dark:text-white');
|
||||
|
||||
/* ==========================================================================
|
||||
Sliders
|
||||
========================================================================== */
|
||||
|
||||
export const slider = {
|
||||
...baseSlider,
|
||||
track: cn(baseSlider.track, 'bg-black/10', 'dark:bg-white/20 dark:shadow-[0_0_0_1px_oklch(0_0_0/0.05)]'),
|
||||
};
|
||||
|
||||
/* ==========================================================================
|
||||
Icon State (audio: play + mute only)
|
||||
========================================================================== */
|
||||
|
||||
export const iconState = {
|
||||
play: {
|
||||
button: 'group',
|
||||
restart: 'hidden opacity-0 group-data-ended:block group-data-ended:opacity-100',
|
||||
play: 'hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100',
|
||||
pause:
|
||||
'hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100',
|
||||
},
|
||||
mute: {
|
||||
button: 'group',
|
||||
volumeOff: 'hidden opacity-0 group-data-muted:block group-data-muted:opacity-100',
|
||||
volumeLow:
|
||||
'hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100',
|
||||
volumeHigh:
|
||||
'hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100',
|
||||
},
|
||||
};
|
||||
|
||||
/* ==========================================================================
|
||||
Popup (with audio surface)
|
||||
========================================================================== */
|
||||
|
||||
export const popup = {
|
||||
...basePopup,
|
||||
base: cn(basePopup.base, surface),
|
||||
};
|
||||
|
||||
/* ==========================================================================
|
||||
Buffering (with audio surface)
|
||||
========================================================================== */
|
||||
|
||||
export const bufferingIndicator = {
|
||||
...baseBufferingIndicator,
|
||||
container: cn(baseBufferingIndicator.container, surface),
|
||||
};
|
||||
|
||||
/* ==========================================================================
|
||||
Error (with audio surface)
|
||||
========================================================================== */
|
||||
|
||||
export const error = {
|
||||
...baseError,
|
||||
dialog: cn(baseError.dialog, surface),
|
||||
};
|
||||
|
||||
/* ==========================================================================
|
||||
Shared components (no overrides)
|
||||
========================================================================== */
|
||||
|
||||
export { button } from './components/button';
|
||||
export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon';
|
||||
export { playbackRate } from './components/playback-rate';
|
||||
export { root } from './components/root';
|
||||
export { seek } from './components/seek';
|
||||
export { time } from './components/time';
|
||||
@@ -0,0 +1,4 @@
|
||||
export const bufferingIndicator = {
|
||||
root: 'absolute inset-0 hidden items-center justify-center pointer-events-none text-white data-visible:flex',
|
||||
container: 'p-1 rounded-full',
|
||||
};
|
||||
@@ -0,0 +1,22 @@
|
||||
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',
|
||||
'font-medium',
|
||||
'outline-2 outline-transparent -outline-offset-2',
|
||||
'transition-[background-color,color,outline-offset,scale] duration-150 ease-out',
|
||||
'disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale',
|
||||
'focus-visible:outline-blue-500 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',
|
||||
'hover:bg-current/10 hover:no-underline',
|
||||
'focus-visible:bg-current/10',
|
||||
'aria-expanded:bg-current/10',
|
||||
'active:scale-90'
|
||||
),
|
||||
default: cn('flex py-2 px-4 bg-white rounded-full', 'text-black'),
|
||||
};
|
||||
@@ -0,0 +1,23 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const captions = {
|
||||
root: cn(
|
||||
'absolute z-20 pointer-events-none text-balance text-base',
|
||||
'inset-x-4 bottom-6',
|
||||
'transition-transform duration-150 ease-out delay-600',
|
||||
'motion-reduce:duration-50',
|
||||
// Responsive font sizes
|
||||
'@xs/media-root:text-2xl',
|
||||
'@3xl/media-root:text-3xl',
|
||||
'@7xl/media-root:text-4xl',
|
||||
// Shift up when controls visible
|
||||
'peer-data-visible/controls:-translate-y-12 peer-data-visible/controls:delay-25'
|
||||
),
|
||||
container: 'max-w-[42ch] mx-auto text-center flex flex-col items-center',
|
||||
cue: cn(
|
||||
'block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2',
|
||||
'[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]',
|
||||
'contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70',
|
||||
'*:inline'
|
||||
),
|
||||
};
|
||||
@@ -0,0 +1,17 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const controls = cn(
|
||||
// Peer marker for overlay/captions
|
||||
'peer/controls',
|
||||
// Layout
|
||||
'@container/media-controls',
|
||||
'p-[0.175rem] flex items-center gap-[0.075rem]',
|
||||
'rounded-full',
|
||||
// Shadow color variables (derived from currentColor lightness)
|
||||
'[--media-controls-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.25))]',
|
||||
'[--media-controls-current-shadow-color-subtle:oklch(from_var(--media-controls-current-shadow-color)_l_c_h/calc(alpha*0.4))]',
|
||||
// Text shadow
|
||||
'text-shadow-[0_0_1px_var(--media-controls-current-shadow-color)]',
|
||||
// Wider container
|
||||
'@2xl/media-root:p-1 @2xl/media-root:gap-0.5'
|
||||
);
|
||||
@@ -0,0 +1,19 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const error = {
|
||||
root: 'peer/error group/error flex absolute inset-0 z-20 items-center justify-center',
|
||||
dialog: cn(
|
||||
'flex flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white text-sm',
|
||||
// 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)]',
|
||||
'group-data-starting-style/error:opacity-0 group-data-starting-style/error:scale-50',
|
||||
'group-data-ending-style/error:opacity-0 group-data-ending-style/error:scale-50',
|
||||
// Simple, fast transition for reduced motion users
|
||||
'motion-reduce:duration-100 motion-reduce:ease-out motion-reduce:delay-0'
|
||||
),
|
||||
content: 'flex flex-col gap-2 px-2 pt-2 pb-1.5',
|
||||
title: 'font-semibold leading-tight',
|
||||
description: 'opacity-70',
|
||||
actions: 'flex gap-2 *:flex-1',
|
||||
};
|
||||
@@ -0,0 +1,27 @@
|
||||
export const iconState = {
|
||||
play: {
|
||||
button: 'group',
|
||||
restart: 'hidden opacity-0 group-data-ended:block group-data-ended:opacity-100',
|
||||
play: 'hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100',
|
||||
pause:
|
||||
'hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100',
|
||||
},
|
||||
mute: {
|
||||
button: 'group',
|
||||
volumeOff: 'hidden opacity-0 group-data-muted:block group-data-muted:opacity-100',
|
||||
volumeLow:
|
||||
'hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100',
|
||||
volumeHigh:
|
||||
'hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100',
|
||||
},
|
||||
fullscreen: {
|
||||
button: 'group',
|
||||
enter: 'hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100',
|
||||
exit: 'hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100',
|
||||
},
|
||||
captions: {
|
||||
button: 'group',
|
||||
off: 'hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100',
|
||||
on: 'hidden opacity-0 group-data-active:block group-data-active:opacity-100',
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const icon = cn(
|
||||
'block [grid-area:1/1] size-4.5 shrink-0',
|
||||
'drop-shadow-[0_1px_0_var(--media-controls-current-shadow-color,oklch(0_0_0/0.25))]',
|
||||
'transition-discrete transition-[display,opacity] duration-150 ease-out'
|
||||
);
|
||||
|
||||
export const iconHidden = 'hidden opacity-0';
|
||||
export const iconFlipped = '[scale:-1_1]';
|
||||
export const iconContainer = 'relative';
|
||||
@@ -0,0 +1,25 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const overlay = cn(
|
||||
// Layout
|
||||
'absolute inset-0 flex flex-col items-start',
|
||||
'pointer-events-none rounded-[inherit]',
|
||||
// Default: hidden
|
||||
'opacity-0',
|
||||
'bg-linear-to-t from-black/50 via-black/30 to-transparent',
|
||||
'backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90',
|
||||
// Transitions
|
||||
'transition-[opacity,backdrop-filter] ease-out',
|
||||
'duration-300 delay-500',
|
||||
// Shown when controls visible
|
||||
'peer-data-visible/controls:opacity-100',
|
||||
'peer-data-visible/controls:duration-150',
|
||||
'peer-data-visible/controls:delay-0',
|
||||
// Shown when error visible (+ blur)
|
||||
'peer-data-open/error:opacity-100',
|
||||
'peer-data-open/error:duration-150',
|
||||
'peer-data-open/error:delay-0',
|
||||
'peer-data-open/error:backdrop-blur',
|
||||
// Reduced motion
|
||||
'motion-reduce:duration-100'
|
||||
);
|
||||
@@ -0,0 +1,3 @@
|
||||
export const playbackRate = {
|
||||
button: `after:content-[attr(data-rate)_'×'] after:w-[4ch] after:tabular-nums`,
|
||||
};
|
||||
@@ -0,0 +1,18 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const popup = {
|
||||
base: cn(
|
||||
// Reset default popover styles
|
||||
'm-0 border-0 text-inherit',
|
||||
// Default offset
|
||||
'[--media-popover-side-offset:0.5rem]',
|
||||
// Animation
|
||||
'transition-[transform,scale,opacity,filter] duration-200',
|
||||
'data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm',
|
||||
'data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm',
|
||||
'data-instant:duration-0',
|
||||
// Ensure we animate from the correct origin based on the side the popover is on
|
||||
'data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left'
|
||||
),
|
||||
volume: 'py-2.5 px-1 rounded-full',
|
||||
};
|
||||
@@ -0,0 +1,15 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const root = cn(
|
||||
// Layout & containment
|
||||
'block relative isolate @container/media-root',
|
||||
// Appearance
|
||||
'rounded-(--media-border-radius,2rem)',
|
||||
'font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased',
|
||||
// Resets
|
||||
'**:box-border **:m-0',
|
||||
'[&_button]:font-[inherit]',
|
||||
'motion-safe:[interpolate-size:allow-keywords]',
|
||||
// Fullscreen
|
||||
'[&:fullscreen]:rounded-none'
|
||||
);
|
||||
@@ -0,0 +1,6 @@
|
||||
export const seek = {
|
||||
button: '@max-md/media-controls:hidden',
|
||||
label: 'text-[0.75em] font-[480] tabular-nums',
|
||||
labelForward: 'absolute -right-px -bottom-0.75',
|
||||
labelBackward: 'absolute -left-px -bottom-0.75',
|
||||
};
|
||||
@@ -0,0 +1,60 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const slider = {
|
||||
root: cn(
|
||||
'group/slider relative flex flex-1 items-center justify-center rounded-full outline-none',
|
||||
// Horizontal
|
||||
'data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5',
|
||||
// Vertical
|
||||
'data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-20'
|
||||
),
|
||||
track: cn(
|
||||
'relative isolate overflow-hidden rounded-[inherit] select-none',
|
||||
// Horizontal
|
||||
'data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-1',
|
||||
// Vertical
|
||||
'data-[orientation=vertical]:w-1 data-[orientation=vertical]:h-full'
|
||||
),
|
||||
fill: {
|
||||
base: 'absolute rounded-[inherit] pointer-events-none',
|
||||
fill: cn(
|
||||
'bg-current',
|
||||
// Horizontal
|
||||
'data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0',
|
||||
'data-[orientation=horizontal]:w-(--media-slider-fill)',
|
||||
// Vertical
|
||||
'data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0',
|
||||
'data-[orientation=vertical]:h-(--media-slider-fill)'
|
||||
),
|
||||
buffer: cn(
|
||||
'bg-current/20 duration-250 ease-out',
|
||||
// Horizontal
|
||||
'data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0',
|
||||
'data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer)',
|
||||
// Vertical
|
||||
'data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0',
|
||||
'data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)'
|
||||
),
|
||||
},
|
||||
thumb: {
|
||||
base: cn(
|
||||
'z-10 absolute -translate-x-1/2 -translate-y-1/2',
|
||||
'bg-current rounded-full',
|
||||
'shadow-[0_0_0_1px_var(--media-controls-current-shadow-color-subtle,oklch(0_0_0/0.1)),0_1px_3px_0_oklch(0_0_0/0.15),0_1px_2px_-1px_oklch(0_0_0/0.15)]',
|
||||
'transition-[opacity,height,width,outline-offset] duration-150 ease-out select-none',
|
||||
'outline-4 outline-transparent -outline-offset-4',
|
||||
'hover:outline-current/25 hover:outline-offset-0',
|
||||
'focus-visible:outline-current/25 focus-visible:outline-offset-0',
|
||||
// Horizontal
|
||||
'data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill)',
|
||||
// Vertical
|
||||
'data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill))]'
|
||||
),
|
||||
persistent: 'size-3',
|
||||
interactive: cn(
|
||||
'size-2.5',
|
||||
'opacity-0 focus-visible:opacity-100 group-hover/slider:opacity-100',
|
||||
'group-active/slider:size-3'
|
||||
),
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,8 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const surface = cn(
|
||||
// Border and shadow
|
||||
'ring ring-inset shadow-sm',
|
||||
// Border to enhance contrast on lighter videos
|
||||
'after:absolute after:inset-0 after:ring after:rounded-[inherit] after:pointer-events-none after:z-10'
|
||||
);
|
||||
@@ -0,0 +1,5 @@
|
||||
export const time = {
|
||||
group: '@container/media-time flex items-center flex-1 gap-3 px-2',
|
||||
current: 'hidden @2xs/media-time:block tabular-nums',
|
||||
duration: 'tabular-nums',
|
||||
};
|
||||
@@ -0,0 +1,144 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
import { bufferingIndicator as baseBufferingIndicator } from './components/buffering';
|
||||
import { controls as baseControls } from './components/controls';
|
||||
import { error as baseError } from './components/error';
|
||||
import { popup as basePopup } from './components/popup';
|
||||
import { root as baseRoot } from './components/root';
|
||||
import { slider as baseSlider } from './components/slider';
|
||||
import { surface as baseSurface } from './components/surface';
|
||||
|
||||
/* ==========================================================================
|
||||
Root
|
||||
========================================================================== */
|
||||
|
||||
export const root = (isShadowDOM: boolean) =>
|
||||
cn(
|
||||
baseRoot,
|
||||
'bg-black',
|
||||
// Inner border ring
|
||||
'after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10',
|
||||
'after:inset-0 after:ring-1 after:ring-inset after:ring-black/10 dark:after:ring-white/10',
|
||||
// Video element
|
||||
{
|
||||
'[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-border-radius,2rem)':
|
||||
isShadowDOM,
|
||||
'[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit]': !isShadowDOM,
|
||||
},
|
||||
// Poster image
|
||||
'[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]',
|
||||
'[&>img]:object-cover [&>img]:pointer-events-none',
|
||||
'[&>img]:transition-opacity [&>img]:duration-250',
|
||||
'[&>img:not([data-visible])]:opacity-0',
|
||||
// Caption track CSS variables (consumed by the native caption bridge in light DOM)
|
||||
'[--media-caption-track-delay:600ms]',
|
||||
'[--media-caption-track-y:-0.5rem]',
|
||||
'has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]',
|
||||
'has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]',
|
||||
// Native caption track container
|
||||
!isShadowDOM
|
||||
? [
|
||||
'[&_video::-webkit-media-text-track-container]:transition-transform',
|
||||
'[&_video::-webkit-media-text-track-container]:duration-150',
|
||||
'[&_video::-webkit-media-text-track-container]:ease-out',
|
||||
'[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)',
|
||||
'[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)',
|
||||
'[&_video::-webkit-media-text-track-container]:scale-98',
|
||||
'[&_video::-webkit-media-text-track-container]:z-1',
|
||||
'[&_video::-webkit-media-text-track-container]:font-[inherit]',
|
||||
'motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50',
|
||||
]
|
||||
: [],
|
||||
// Fullscreen
|
||||
'[&:fullscreen]:rounded-none'
|
||||
);
|
||||
|
||||
/* ==========================================================================
|
||||
Surface (shared glass effect for tooltips, popovers, controls)
|
||||
========================================================================== */
|
||||
|
||||
export const surface = cn(
|
||||
baseSurface,
|
||||
'bg-white/10',
|
||||
'backdrop-brightness-90 backdrop-saturate-150 backdrop-blur-3xl',
|
||||
// Border and shadow
|
||||
'ring-white/5 shadow-black/10',
|
||||
// Border to enhance contrast on lighter videos
|
||||
'after:ring-black/15',
|
||||
// Reduced transparency for users with preference
|
||||
'[@media(prefers-reduced-transparency:reduce)]:bg-black/70',
|
||||
// High contrast mode
|
||||
'contrast-more:bg-black/90'
|
||||
);
|
||||
|
||||
/* ==========================================================================
|
||||
Controls (hide/show behavior)
|
||||
========================================================================== */
|
||||
|
||||
export const controls = cn(
|
||||
baseControls,
|
||||
surface,
|
||||
// Position
|
||||
'absolute bottom-3 inset-x-3',
|
||||
'text-white z-10',
|
||||
// Transitions
|
||||
'will-change-[scale,transform,filter,opacity]',
|
||||
'transition-[scale,transform,filter,opacity] ease-out',
|
||||
'delay-0 duration-100 origin-bottom',
|
||||
// Hidden state
|
||||
'not-data-visible:pointer-events-none not-data-visible:blur-sm',
|
||||
'not-data-visible:scale-90 not-data-visible:opacity-0',
|
||||
'not-data-visible:delay-500 not-data-visible:duration-300',
|
||||
// Reduced motion + hidden
|
||||
'motion-reduce:not-data-visible:duration-100',
|
||||
'motion-reduce:not-data-visible:blur-none',
|
||||
'motion-reduce:not-data-visible:scale-100'
|
||||
);
|
||||
|
||||
/* ==========================================================================
|
||||
Sliders
|
||||
========================================================================== */
|
||||
|
||||
export const slider = {
|
||||
...baseSlider,
|
||||
track: cn(baseSlider.track, 'bg-white/20 shadow-[0_0_0_1px_oklch(0_0_0/0.05)]'),
|
||||
};
|
||||
|
||||
/* ==========================================================================
|
||||
Popup (with video surface)
|
||||
========================================================================== */
|
||||
|
||||
export const popup = {
|
||||
...basePopup,
|
||||
base: cn(basePopup.base, surface),
|
||||
};
|
||||
|
||||
/* ==========================================================================
|
||||
Buffering (with video surface)
|
||||
========================================================================== */
|
||||
|
||||
export const bufferingIndicator = {
|
||||
...baseBufferingIndicator,
|
||||
container: cn(baseBufferingIndicator.container, surface),
|
||||
};
|
||||
|
||||
/* ==========================================================================
|
||||
Error (with video surface)
|
||||
========================================================================== */
|
||||
|
||||
export const error = {
|
||||
...baseError,
|
||||
dialog: cn(baseError.dialog, surface),
|
||||
};
|
||||
|
||||
/* ==========================================================================
|
||||
Shared components (no overrides)
|
||||
========================================================================== */
|
||||
|
||||
export { button } from './components/button';
|
||||
export { captions } from './components/captions';
|
||||
export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon';
|
||||
export { iconState } from './components/icon-state';
|
||||
export { overlay } from './components/overlay';
|
||||
export { playbackRate } from './components/playback-rate';
|
||||
export { seek } from './components/seek';
|
||||
export { time } from './components/time';
|
||||
Reference in New Issue
Block a user