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,84 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
import { controls as baseControls } from './components/controls';
|
||||
import { popup as basePopup } from './components/popup';
|
||||
import { root as baseRoot } from './components/root';
|
||||
|
||||
/* ==========================================================================
|
||||
Root
|
||||
========================================================================== */
|
||||
|
||||
export const root = cn(
|
||||
baseRoot,
|
||||
'[--media-controls-background-color:oklch(1_0_0)]',
|
||||
'[--media-controls-border-color:oklch(0_0_0/0.1)]',
|
||||
'[--media-controls-text-color:oklch(0_0_0)]',
|
||||
'dark:[--media-controls-background-color:oklch(0_0_0)]',
|
||||
'dark:[--media-controls-border-color:oklch(1_0_0/0.1)]',
|
||||
'dark:[--media-controls-text-color:oklch(1_0_0)]'
|
||||
);
|
||||
|
||||
/* ==========================================================================
|
||||
Controls
|
||||
========================================================================== */
|
||||
|
||||
export const controls = cn(
|
||||
baseControls,
|
||||
// Layout
|
||||
'gap-2 p-1.5',
|
||||
// Appearance
|
||||
'rounded-(--media-border-radius,0.75rem)',
|
||||
'bg-(--media-controls-background-color)',
|
||||
'text-(--media-controls-text-color)',
|
||||
// Backdrop filter
|
||||
'backdrop-blur backdrop-brightness-[0.98] backdrop-saturate-[1.2]',
|
||||
// Border
|
||||
'ring-1 ring-(color:--media-controls-border-color)'
|
||||
);
|
||||
|
||||
/* ==========================================================================
|
||||
Popup
|
||||
========================================================================== */
|
||||
|
||||
export const popup = {
|
||||
...basePopup,
|
||||
volume: cn(
|
||||
'py-2 pr-0 pl-16',
|
||||
'bg-transparent bg-gradient-to-l from-(--media-controls-background-color) from-80% to-transparent',
|
||||
'[--media-popover-side-offset:0.75rem]'
|
||||
),
|
||||
};
|
||||
|
||||
/* ==========================================================================
|
||||
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',
|
||||
},
|
||||
};
|
||||
|
||||
/* ==========================================================================
|
||||
Shared components (no overrides)
|
||||
========================================================================== */
|
||||
|
||||
export { bufferingIndicator } from './components/buffering';
|
||||
export { button } from './components/button';
|
||||
export { buttonGroup } from './components/button-group';
|
||||
export { error } from './components/error';
|
||||
export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon';
|
||||
export { seek } from './components/seek';
|
||||
export { slider } from './components/slider';
|
||||
export { time } from './components/time';
|
||||
@@ -0,0 +1,2 @@
|
||||
export const bufferingIndicator =
|
||||
'absolute inset-0 hidden items-center justify-center pointer-events-none text-white data-visible:flex';
|
||||
@@ -0,0 +1,3 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const buttonGroup = cn('flex items-center gap-[0.075rem]', '@2xl/media-root:gap-0.5');
|
||||
@@ -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',
|
||||
'outline-2 outline-transparent -outline-offset-2',
|
||||
'font-medium text-shadow-inherit',
|
||||
'transition-[background-color,color,outline-offset,scale] duration-150 ease-out',
|
||||
'focus-visible:outline-current focus-visible:outline-offset-2',
|
||||
'disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale',
|
||||
'data-[availability=unavailable]:hidden'
|
||||
),
|
||||
icon: cn(
|
||||
'grid w-[2.375rem] aspect-square bg-transparent rounded-lg',
|
||||
'text-inherit',
|
||||
'hover:text-current/80 hover:no-underline',
|
||||
'focus-visible:text-current/80',
|
||||
'aria-expanded:text-current/80',
|
||||
'active:scale-90'
|
||||
),
|
||||
default: cn('flex py-2 px-4 bg-white rounded-lg', '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-10 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,14 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const controls = cn(
|
||||
// Peer marker for overlay/captions
|
||||
'peer/controls',
|
||||
// Layout
|
||||
'@container/media-controls',
|
||||
'flex items-center',
|
||||
// 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)]'
|
||||
);
|
||||
@@ -0,0 +1,20 @@
|
||||
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-64 p-4 text-white text-sm',
|
||||
'text-shadow-2xs text-shadow-black/50',
|
||||
// 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 py-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',
|
||||
'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/70 via-black/50 via-[7.5rem] to-transparent',
|
||||
'backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90',
|
||||
// Transitions
|
||||
'transition-[opacity,backdrop-filter] ease-out',
|
||||
'duration-500 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,15 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const popup = {
|
||||
base: cn(
|
||||
// Reset default popover styles
|
||||
'm-0 border-0 text-inherit',
|
||||
// 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'
|
||||
),
|
||||
};
|
||||
@@ -0,0 +1,13 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const root = cn(
|
||||
// Layout & containment
|
||||
'block relative isolate @container/media-root',
|
||||
// Appearance
|
||||
'rounded-(--media-border-radius,0.75rem)',
|
||||
'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]'
|
||||
);
|
||||
@@ -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,58 @@
|
||||
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-[4.5rem]'
|
||||
),
|
||||
track: cn(
|
||||
'relative isolate overflow-hidden bg-current/20 rounded-[inherit] select-none',
|
||||
// Horizontal
|
||||
'data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75',
|
||||
// Vertical
|
||||
'data-[orientation=vertical]:w-0.75 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,0)',
|
||||
// Vertical
|
||||
'data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0',
|
||||
'data-[orientation=vertical]:h-(--media-slider-fill,0)'
|
||||
),
|
||||
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,0)',
|
||||
// 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 size-3 -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,scale,outline-offset] duration-150 ease-out select-none',
|
||||
'outline-2 outline-transparent -outline-offset-2',
|
||||
'focus-visible:outline-current focus-visible:outline-offset-2',
|
||||
// Horizontal
|
||||
'data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)',
|
||||
// Vertical
|
||||
'data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]'
|
||||
),
|
||||
interactive: cn(
|
||||
'opacity-0 scale-70 origin-center',
|
||||
'group-hover/slider:opacity-100 group-hover/slider:scale-100',
|
||||
'group-focus-within/slider:opacity-100 group-focus-within/slider:scale-100'
|
||||
),
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,9 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const time = {
|
||||
group: 'flex items-center gap-1',
|
||||
current: cn('hidden tabular-nums', '@md/media-controls:inline'),
|
||||
separator: cn('hidden', '@md/media-controls:inline @md/media-controls:text-white/50'),
|
||||
duration: cn('tabular-nums', '@md/media-controls:text-current/60'),
|
||||
controls: cn('flex flex-row-reverse items-center flex-1 gap-3', '@md/media-controls:flex-row'),
|
||||
};
|
||||
@@ -0,0 +1,111 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
import { controls as baseControls } from './components/controls';
|
||||
import { popup as basePopup } from './components/popup';
|
||||
import { root as baseRoot } from './components/root';
|
||||
import { slider as baseSlider } from './components/slider';
|
||||
|
||||
/* ==========================================================================
|
||||
Root
|
||||
========================================================================== */
|
||||
|
||||
export const root = (isShadowDOM: boolean) =>
|
||||
cn(
|
||||
baseRoot,
|
||||
'bg-black',
|
||||
// Border ring (::after)
|
||||
'after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10',
|
||||
'after:inset-0 after:ring-1 after:ring-inset after:ring-black/15',
|
||||
'dark:after:ring-white/15',
|
||||
// Video element
|
||||
{
|
||||
'[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-border-radius,0.75rem)':
|
||||
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'
|
||||
);
|
||||
|
||||
/* ==========================================================================
|
||||
Controls (hide/show behavior)
|
||||
========================================================================== */
|
||||
|
||||
export const controls = cn(
|
||||
baseControls,
|
||||
// Position
|
||||
'absolute bottom-0 inset-x-0',
|
||||
'pt-8 px-1.5 pb-1.5 gap-2',
|
||||
'text-white z-10',
|
||||
// Transitions
|
||||
'will-change-[translate,filter,opacity]',
|
||||
'transition-[translate,filter,opacity] ease-out',
|
||||
'delay-0 duration-75',
|
||||
// Hidden state
|
||||
'not-data-visible:opacity-0 not-data-visible:translate-y-full',
|
||||
'not-data-visible:blur-sm not-data-visible:pointer-events-none',
|
||||
'not-data-visible:delay-500 not-data-visible:duration-500',
|
||||
// Reduced motion + hidden
|
||||
'motion-reduce:not-data-visible:duration-100',
|
||||
'motion-reduce:not-data-visible:translate-y-0',
|
||||
'motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100',
|
||||
// Wider container
|
||||
'@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3',
|
||||
'@sm/media-root:gap-3.5'
|
||||
);
|
||||
|
||||
/* ==========================================================================
|
||||
Sliders
|
||||
========================================================================== */
|
||||
|
||||
export const slider = {
|
||||
...baseSlider,
|
||||
track: cn(baseSlider.track, 'shadow-[0_0_0_1px_oklch(0_0_0/0.05)]'),
|
||||
};
|
||||
|
||||
/* ==========================================================================
|
||||
Popup
|
||||
========================================================================== */
|
||||
|
||||
export const popup = {
|
||||
...basePopup,
|
||||
volume: cn('[--media-popover-side-offset:0.5rem] p-1 bg-transparent'),
|
||||
};
|
||||
|
||||
/* ==========================================================================
|
||||
Shared components (no overrides)
|
||||
========================================================================== */
|
||||
|
||||
export { bufferingIndicator } from './components/buffering';
|
||||
export { button } from './components/button';
|
||||
export { buttonGroup } from './components/button-group';
|
||||
export { captions } from './components/captions';
|
||||
export { error } from './components/error';
|
||||
export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon';
|
||||
export { iconState } from './components/icon-state';
|
||||
export { overlay } from './components/overlay';
|
||||
export { seek } from './components/seek';
|
||||
export { time } from './components/time';
|
||||
Reference in New Issue
Block a user