mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
refactor(compiler)!: move component generation to core
This commit is contained in:
Rahim
@@ -0,0 +1,123 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
import { container as baseContainer } from './components/container';
|
||||
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';
|
||||
|
||||
/* ===========================================================================
|
||||
Container
|
||||
========================================================================== */
|
||||
|
||||
export const container = cn(
|
||||
baseContainer,
|
||||
'[--media-controls-background-color:oklch(1_0_0)]',
|
||||
'[--media-controls-backdrop-filter:blur(16px)_saturate(1.5)]',
|
||||
'[--media-controls-border-color:oklch(0_0_0/0.05)]',
|
||||
'[--media-controls-text-color:var(--media-color-primary,oklch(0_0_0))]',
|
||||
'[--media-error-dialog-transition-duration:250ms]',
|
||||
'[--media-error-dialog-transition-delay:100ms]',
|
||||
'[--media-popup-transition-duration:100ms]',
|
||||
'[--media-popup-transition-timing-function:ease-out]',
|
||||
'[--media-tooltip-background-color:oklch(1_0_0/0.1)]',
|
||||
'[--media-tooltip-border-color:oklch(0_0_0/0.05)]',
|
||||
'[--media-tooltip-backdrop-filter:blur(16px)_saturate(1.5)]',
|
||||
'[--media-tooltip-text-color:currentColor]',
|
||||
'[--media-tooltip-side-offset:0.75rem]',
|
||||
'[--media-tooltip-boundary-offset:0.75rem]',
|
||||
'[--media-popover-background-color:oklch(1_0_0/0.1)]',
|
||||
'[--media-popover-border-color:oklch(0_0_0/0.05)]',
|
||||
'[--media-popover-backdrop-filter:blur(16px)_saturate(1.5)]',
|
||||
'[--media-popover-side-offset:0.75rem]',
|
||||
'[--media-popover-boundary-offset:0.75rem]',
|
||||
'motion-reduce:[--media-error-dialog-transition-duration:50ms]',
|
||||
'motion-reduce:[--media-error-dialog-transition-delay:0ms]',
|
||||
'motion-reduce:[--media-popup-transition-duration:0ms]',
|
||||
'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:var(--media-color-primary,oklch(1_0_0))]',
|
||||
'[@media(prefers-reduced-transparency:reduce)]:[--media-tooltip-background-color:oklch(1_0_0)]',
|
||||
'contrast-more:[--media-tooltip-background-color:oklch(1_0_0)]',
|
||||
'dark:[@media(prefers-reduced-transparency:reduce)]:[--media-tooltip-background-color:oklch(0_0_0)]',
|
||||
'dark:contrast-more:[--media-tooltip-background-color:oklch(0_0_0)]'
|
||||
);
|
||||
|
||||
/* ===========================================================================
|
||||
Controls
|
||||
========================================================================== */
|
||||
|
||||
export const controls = cn(
|
||||
baseControls,
|
||||
// Layout
|
||||
'p-1.5 gap-2',
|
||||
'rounded-(--media-border-radius,1rem)',
|
||||
'peer-data-open/error:**:invisible',
|
||||
// Appearance
|
||||
'text-(--media-controls-text-color)',
|
||||
// Border
|
||||
'ring-1 ring-(color:--media-controls-border-color)'
|
||||
);
|
||||
|
||||
/* ===========================================================================
|
||||
Popup
|
||||
========================================================================== */
|
||||
|
||||
export const popup = {
|
||||
...basePopup,
|
||||
volume: cn(
|
||||
basePopup.popover,
|
||||
'p-0 pl-16',
|
||||
'bg-transparent bg-gradient-to-l from-(--media-controls-background-color) from-80% to-transparent'
|
||||
),
|
||||
};
|
||||
|
||||
/* ===========================================================================
|
||||
Sliders
|
||||
========================================================================== */
|
||||
|
||||
export const slider = {
|
||||
...baseSlider,
|
||||
value: cn(baseSlider.value, 'bottom-10'),
|
||||
};
|
||||
|
||||
/* ===========================================================================
|
||||
Error
|
||||
========================================================================== */
|
||||
|
||||
export const error = {
|
||||
...baseError,
|
||||
dialog: cn(
|
||||
'absolute inset-0 z-20 flex items-center gap-4 rounded-full px-5 pr-2',
|
||||
'bg-(--media-controls-background-color)',
|
||||
'transition-[opacity,filter,scale] ease-out',
|
||||
'duration-(--media-error-dialog-transition-duration)',
|
||||
'delay-(--media-error-dialog-transition-delay)',
|
||||
'group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-xs group-data-starting-style/error:scale-95',
|
||||
'group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-xs group-data-ending-style/error:scale-95',
|
||||
'group-data-ending-style/error:delay-0'
|
||||
),
|
||||
content: 'flex flex-1 items-center gap-2',
|
||||
};
|
||||
|
||||
/* ===========================================================================
|
||||
Shared components (no overrides)
|
||||
========================================================================== */
|
||||
|
||||
export {
|
||||
airplayIcon,
|
||||
captionsIcon,
|
||||
castIcon,
|
||||
fullscreenIcon,
|
||||
muteIcon,
|
||||
pipIcon,
|
||||
playIcon,
|
||||
} from '../../shared/tailwind/icon-state';
|
||||
export { badge } from './components/badge';
|
||||
export { bufferingIndicator } from './components/buffering';
|
||||
export { button } from './components/button';
|
||||
export { buttonGroup } from './components/button-group';
|
||||
export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon';
|
||||
export { menu } from './components/menu';
|
||||
export { playbackRate } from './components/playback-rate';
|
||||
export { seek } from './components/seek';
|
||||
export { time } from './components/time';
|
||||
@@ -0,0 +1,2 @@
|
||||
export const badge =
|
||||
'rounded-full bg-current/10 px-1.5 py-0.5 text-[0.6875rem] font-medium leading-none text-current/70';
|
||||
@@ -0,0 +1,2 @@
|
||||
export const bufferingIndicator =
|
||||
'absolute inset-0 hidden items-center justify-center pointer-events-none text-white not-data-visible:[--media-spinner-animation:none] 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,38 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const button = {
|
||||
base: cn(
|
||||
'flex items-center justify-center shrink-0 border-none cursor-pointer select-none text-center touch-manipulation min-h-0',
|
||||
'py-2 px-4 rounded-lg',
|
||||
'outline-2 outline-transparent -outline-offset-2',
|
||||
'transition-[background-color,outline-offset,scale] will-change-[scale] duration-150 ease-out',
|
||||
'focus-visible:outline-current focus-visible:outline-offset-2',
|
||||
'active:scale-[0.98]',
|
||||
'disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale',
|
||||
'supports-[corner-shape:squircle]:rounded-[1rem]',
|
||||
'supports-[corner-shape:squircle]:[corner-shape:squircle]',
|
||||
'data-[availability=unavailable]:hidden',
|
||||
'data-[availability=unsupported]:hidden'
|
||||
),
|
||||
primary: 'bg-white text-black font-medium text-shadow-none',
|
||||
subtle: cn(
|
||||
'bg-transparent text-inherit text-shadow-inherit',
|
||||
'hover:bg-current/10',
|
||||
'focus-visible:bg-current/10',
|
||||
'aria-expanded:bg-current/10'
|
||||
),
|
||||
icon: cn('grid w-[2.375rem] aspect-square p-0', 'active:scale-90'),
|
||||
/**
|
||||
* Live variant: wide pill button with a status dot rendered via `::before`
|
||||
* (gray -> red at the live edge) and "LIVE" as the button's own text.
|
||||
*/
|
||||
live: cn(
|
||||
'inline-flex items-center gap-1.5',
|
||||
'aspect-auto w-auto px-3 py-2',
|
||||
'text-xs font-semibold uppercase tracking-wider leading-none',
|
||||
'before:inline-block before:size-2 before:shrink-0 before:rounded-full',
|
||||
'before:bg-current/40 before:transition-colors before:duration-150 before:ease-out',
|
||||
'before:content-[""]',
|
||||
'data-[live-edge]:before:bg-red-500'
|
||||
),
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
import { reset } from './reset';
|
||||
|
||||
export const container = cn(
|
||||
reset,
|
||||
// Layout & containment
|
||||
'block relative isolate h-full w-full @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',
|
||||
// Focus ring
|
||||
'outline-2 outline-transparent -outline-offset-4',
|
||||
'transition-[outline-offset,outline-color] duration-100 ease-out',
|
||||
'focus-visible:outline-current focus-visible:outline-offset-2',
|
||||
// Shadow color variables (derived from currentColor lightness)
|
||||
'[--media-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.15))]',
|
||||
'[--media-current-shadow-color-subtle:oklch(from_var(--media-current-shadow-color)_l_c_h/calc(alpha*0.4))]',
|
||||
// Icon sizing
|
||||
'[--media-icon-size:18px]'
|
||||
);
|
||||
@@ -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',
|
||||
// Appearance (driven by CSS variables set on the container)
|
||||
'bg-(--media-controls-background-color)',
|
||||
'[backdrop-filter:var(--media-controls-backdrop-filter)]',
|
||||
// Text shadow
|
||||
'text-shadow-2xs text-shadow-(color:--media-current-shadow-color)'
|
||||
);
|
||||
@@ -0,0 +1,21 @@
|
||||
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',
|
||||
dialog: cn(
|
||||
'flex flex-col gap-3 max-w-64 p-4 text-white',
|
||||
'text-shadow-2xs text-shadow-black/50',
|
||||
// Animation
|
||||
'transition-[opacity,scale,transform]',
|
||||
'duration-(--media-error-dialog-transition-duration)',
|
||||
'delay-(--media-error-dialog-transition-delay)',
|
||||
'ease-(--media-error-dialog-transition-timing-function)',
|
||||
'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',
|
||||
'group-data-ending-style/error:delay-0'
|
||||
),
|
||||
content: 'flex flex-col gap-2 py-1.5',
|
||||
title: 'font-semibold leading-tight',
|
||||
description: 'opacity-70 wrap-anywhere',
|
||||
actions: 'flex gap-2 *:flex-1',
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const icon = cn(
|
||||
'block [grid-area:1/1] size-(--media-icon-size)',
|
||||
'drop-shadow-[0_1px_0_var(--media-current-shadow-color)]',
|
||||
'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 grid';
|
||||
@@ -0,0 +1,151 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
/**
|
||||
* NOTE: tailwind.css is required to support the `@property --media-progress-fill` registration and animation keyframes. You should import from either:
|
||||
* - "@videojs/html/tailwind.css" for HTML skins
|
||||
* - "@videojs/react/tailwind.css" for React skins
|
||||
*/
|
||||
export const inputFeedback = {
|
||||
root: cn(
|
||||
// Layout
|
||||
'absolute inset-x-0 top-0 bottom-14 pointer-events-none',
|
||||
'grid grid-cols-3 items-center justify-items-center overflow-hidden',
|
||||
'rounded-[inherit]',
|
||||
// Shift to full extent in larger containers
|
||||
'@2xl/media-root:bottom-0',
|
||||
// Color
|
||||
'[color:var(--media-color-primary,oklch(1_0_0))]'
|
||||
),
|
||||
|
||||
island: {
|
||||
// Minimal island is a top strip with a gradient backdrop (no surface treatment)
|
||||
base: cn(
|
||||
'group/input-indicator',
|
||||
'absolute top-0 inset-x-0',
|
||||
'pt-3 pb-32',
|
||||
'flex justify-center',
|
||||
'text-inherit font-medium',
|
||||
'origin-top pointer-events-none',
|
||||
// Transition
|
||||
'duration-100 ease-out',
|
||||
'data-starting-style:opacity-0',
|
||||
'data-ending-style:opacity-0',
|
||||
'data-starting-style:duration-400',
|
||||
'data-starting-style:ease-in',
|
||||
'data-ending-style:duration-400',
|
||||
'data-ending-style:ease-in',
|
||||
'[background-image:linear-gradient(to_bottom,oklch(0_0_0/0.35),oklch(0_0_0/0.2)_3rem,oklch(0_0_0/0))]',
|
||||
'text-shadow-2xs text-shadow-(color:--media-current-shadow-color)',
|
||||
// Pointer-dependent transition props
|
||||
'pointer-fine:will-change-[translate,filter,opacity]',
|
||||
'pointer-fine:transition-[translate,filter,opacity]',
|
||||
'pointer-coarse:will-change-[translate,opacity]',
|
||||
'pointer-coarse:transition-[translate,opacity]',
|
||||
'pointer-fine:motion-safe:data-starting-style:blur-sm',
|
||||
'pointer-fine:motion-safe:data-ending-style:blur-sm',
|
||||
'motion-safe:data-ending-style:-translate-y-full'
|
||||
),
|
||||
content: cn(
|
||||
'flex justify-between items-center gap-2 px-2.5 py-1',
|
||||
// Keep the label pinned to the end even when the icon is hidden during dismissal
|
||||
'*:last:ml-auto',
|
||||
// Reduced transparency / high contrast: solid content background
|
||||
'[@media(prefers-reduced-transparency:reduce)]:bg-(--media-controls-background-color)',
|
||||
'[@media(prefers-reduced-transparency:reduce)]:rounded-lg',
|
||||
'contrast-more:bg-(--media-controls-background-color) contrast-more:rounded-lg'
|
||||
),
|
||||
// Volume island sizing + progress-fill on nested __progress element
|
||||
volume: cn('*:data-feedback-island-content:w-[min(80%,14rem)]'),
|
||||
// Progress bar (nested inside content) - its own element in the minimal variant
|
||||
volumeProgress: cn(
|
||||
'[--media-progress-fill:var(--media-volume-fill)]',
|
||||
'w-full h-0.75 rounded-full',
|
||||
'[background-image:linear-gradient(to_right,currentColor_0%,currentColor_var(--media-progress-fill),oklch(from_currentColor_l_c_h/0.2)_var(--media-progress-fill),oklch(from_currentColor_l_c_h/0.2)_100%)]',
|
||||
'shadow-[0_1px_0_var(--media-current-shadow-color-subtle)]'
|
||||
),
|
||||
// Shown state - applied on the active item itself
|
||||
shownVolume: cn(
|
||||
'data-open:duration-100',
|
||||
// Boundary shake (keyframes must be registered and media-shake added to @theme - see note at top)
|
||||
'data-min:*:data-feedback-island-content:animate-media-shake',
|
||||
'data-max:*:data-feedback-island-content:animate-media-shake',
|
||||
'motion-reduce:data-min:*:data-feedback-island-content:animate-none',
|
||||
'motion-reduce:data-max:*:data-feedback-island-content:animate-none'
|
||||
),
|
||||
shownStatus: cn('data-open:duration-100'),
|
||||
// Icon inside island - hidden by default; specific icons opt in via shown* below.
|
||||
icon: cn('hidden shrink-0', 'drop-shadow-[0_1px_0_var(--media-current-shadow-color)]'),
|
||||
shownVolumeHigh: 'group-data-[level=high]/input-indicator:block',
|
||||
shownVolumeLow: 'group-data-[level=low]/input-indicator:block',
|
||||
shownVolumeOff: 'group-data-[level=off]/input-indicator:block',
|
||||
shownCaptionsOn: 'group-data-[status=captions-on]/input-indicator:block',
|
||||
shownCaptionsOff: 'group-data-[status=captions-off]/input-indicator:block',
|
||||
shownFullscreenEnter: cn(
|
||||
'group-data-[status=fullscreen]/input-indicator:block',
|
||||
'motion-safe:group-not-data-starting-style/input-indicator:group-data-[status=fullscreen]/input-indicator:animate-media-pop-in'
|
||||
),
|
||||
shownFullscreenExit: cn(
|
||||
'group-data-[status=exit-fullscreen]/input-indicator:block',
|
||||
'motion-safe:group-not-data-starting-style/input-indicator:group-data-[status=exit-fullscreen]/input-indicator:animate-media-pop-in'
|
||||
),
|
||||
shownPipEnter: cn(
|
||||
'group-data-[status=pip]/input-indicator:block',
|
||||
'motion-safe:group-not-data-starting-style/input-indicator:group-data-[status=pip]/input-indicator:animate-media-pop-in'
|
||||
),
|
||||
shownPipExit: cn(
|
||||
'group-data-[status=exit-pip]/input-indicator:block',
|
||||
'motion-safe:group-not-data-starting-style/input-indicator:group-data-[status=exit-pip]/input-indicator:animate-media-pop-in'
|
||||
),
|
||||
value: 'ml-auto',
|
||||
},
|
||||
|
||||
bubble: {
|
||||
base: cn(
|
||||
'group/input-indicator',
|
||||
// Default placement - center column for status bubbles and undirected seeks
|
||||
'col-start-2 row-start-1',
|
||||
'flex flex-col items-center justify-center p-4',
|
||||
'transition-opacity duration-250 ease-out',
|
||||
'data-starting-style:opacity-0',
|
||||
'data-ending-style:opacity-0',
|
||||
'data-starting-style:duration-200',
|
||||
'data-starting-style:ease-in',
|
||||
'data-ending-style:duration-200',
|
||||
'data-ending-style:ease-in',
|
||||
'@2xl/media-root:p-8',
|
||||
'not-data-direction:[transition-property:opacity,scale]',
|
||||
'not-data-direction:duration-600',
|
||||
'not-data-direction:[transition-timing-function:ease-out,linear(0,0.12_1.5%,1.35_9.7%,2.2_13.9%,3_19.9%,2.7_21.8%,0.62_37.5%,0.96_50.9%,1)]',
|
||||
'motion-reduce:not-data-direction:transition-opacity',
|
||||
'motion-reduce:not-data-direction:duration-100',
|
||||
'motion-reduce:not-data-direction:ease-out',
|
||||
'not-data-direction:data-starting-style:scale-80',
|
||||
'not-data-direction:data-ending-style:scale-80',
|
||||
'not-data-direction:data-starting-style:duration-200',
|
||||
'not-data-direction:data-starting-style:ease-in',
|
||||
'not-data-direction:data-ending-style:duration-200',
|
||||
'not-data-direction:data-ending-style:ease-in',
|
||||
// Direction placement
|
||||
'data-[direction=backward]:col-start-1 data-[direction=backward]:justify-self-start',
|
||||
'data-[direction=forward]:col-start-3 data-[direction=forward]:justify-self-end'
|
||||
),
|
||||
icon: 'hidden w-9 h-9',
|
||||
shownSeek: cn(
|
||||
'group-data-direction/input-indicator:block',
|
||||
'group-data-[direction=backward]/input-indicator:-scale-x-100',
|
||||
// Slide animation (keyframes registered in companion CSS)
|
||||
'group-not-data-starting-style/input-indicator:group-data-[direction=forward]/input-indicator:animate-media-slide-in-forward',
|
||||
'group-not-data-starting-style/input-indicator:group-data-[direction=backward]/input-indicator:animate-media-slide-in-backward',
|
||||
'motion-reduce:group-data-direction/input-indicator:animate-none'
|
||||
),
|
||||
shownPause: cn(
|
||||
'group-data-[status=pause]/input-indicator:block',
|
||||
'motion-safe:group-not-data-starting-style/input-indicator:group-data-[status=pause]/input-indicator:animate-media-pop-in'
|
||||
),
|
||||
shownPlay: cn(
|
||||
'group-data-[status=play]/input-indicator:block',
|
||||
'motion-safe:group-not-data-starting-style/input-indicator:group-data-[status=play]/input-indicator:animate-media-pop-in'
|
||||
),
|
||||
time: 'tabular-nums',
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,80 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
import { popup } from './popup';
|
||||
|
||||
const panelBase = cn(
|
||||
'absolute inset-0 overflow-auto overscroll-none p-1 outline-none translate-none',
|
||||
'data-starting-style:overflow-hidden data-ending-style:overflow-hidden',
|
||||
'transition-[translate,filter] duration-(--menu-transition-duration) ease-out will-change-[translate,filter]'
|
||||
);
|
||||
|
||||
const rootView = cn(
|
||||
panelBase,
|
||||
'data-[menu-view-state=inactive]:-translate-x-full data-[menu-view-state=inactive]:blur'
|
||||
);
|
||||
|
||||
const submenuPanel = cn(
|
||||
panelBase,
|
||||
'z-10',
|
||||
'not-data-open:not-data-ending-style:-translate-x-full',
|
||||
'not-data-open:not-data-ending-style:transition-none',
|
||||
'data-starting-style:pointer-events-none data-ending-style:pointer-events-none',
|
||||
'data-starting-style:blur data-ending-style:blur',
|
||||
'data-starting-style:data-[direction=forward]:translate-x-full',
|
||||
'data-ending-style:data-[direction=forward]:-translate-x-full',
|
||||
'data-starting-style:data-[direction=back]:-translate-x-full',
|
||||
'data-ending-style:data-[direction=back]:translate-x-full'
|
||||
);
|
||||
|
||||
const itemBase = cn(
|
||||
'flex cursor-pointer select-none items-center gap-2 rounded-lg py-1.5 px-2.5',
|
||||
'text-shadow-2xs text-shadow-(color:--media-current-shadow-color)',
|
||||
'outline-2 -outline-offset-2 outline-transparent',
|
||||
'transition-colors duration-100 ease-out',
|
||||
'hover:bg-current/10 data-highlighted:bg-current/10',
|
||||
'focus-visible:outline-current focus-visible:outline-offset-2'
|
||||
);
|
||||
|
||||
const menuTokens = cn(
|
||||
'[--menu-transition-duration:250ms] [--menu-max-height:14rem]',
|
||||
'[--popup-transition-property:,_width,_height] [--popup-transition-duration:,_var(--menu-transition-duration),_var(--menu-transition-duration)]',
|
||||
'motion-reduce:[--menu-transition-duration:0ms]'
|
||||
);
|
||||
|
||||
const menuHostShell = cn(
|
||||
popup.popover,
|
||||
menuTokens,
|
||||
'max-w-(--media-popover-available-width,none) max-h-[min(var(--media-popover-available-height,var(--menu-max-height)),var(--menu-max-height))]',
|
||||
'bg-(--media-popover-background-color) [backdrop-filter:var(--media-popover-backdrop-filter)]',
|
||||
'shadow-[0_0_0_1px_var(--media-popover-border-color),0_4px_6px_-1px_oklch(0_0_0/0.1),0_2px_4px_-2px_oklch(0_0_0/0.1)]',
|
||||
'box-border rounded-xl p-1 overscroll-none'
|
||||
);
|
||||
|
||||
export const menu = {
|
||||
/** Standalone menu popover host (audio playback rate, sandbox demos). */
|
||||
root: cn(menuHostShell, 'min-w-24 !overflow-auto'),
|
||||
/** Settings menu viewport host with nested submenu navigation. */
|
||||
settings: cn(menuHostShell, 'min-w-44 w-(--media-menu-width) h-(--media-menu-height)', '!overflow-hidden'),
|
||||
group: 'flex flex-col gap-0.5',
|
||||
item: cn(
|
||||
itemBase,
|
||||
'group/menu-item justify-between tabular-nums text-inherit',
|
||||
'data-[availability=unavailable]:hidden data-[availability=unsupported]:hidden',
|
||||
'aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50'
|
||||
),
|
||||
separator: 'my-1 -mx-1 border-b border-[oklch(0_0_0/0.075)] shadow-[0_1px_0_0_oklch(1_0_0/0.05)]',
|
||||
tier: 'self-start -ml-1 pt-px text-[0.5625rem] font-semibold leading-none text-current/70',
|
||||
badge: 'ml-auto',
|
||||
indicator: '-mr-1 shrink-0 opacity-0 group-aria-checked/menu-item:opacity-100',
|
||||
/** Root settings view - slides out when a submenu is active. */
|
||||
rootView,
|
||||
/** Submenu panel - slides in/out alongside the root view. */
|
||||
submenuPanel,
|
||||
back: cn(itemBase, 'mb-0.5 w-full font-medium'),
|
||||
hint: 'ml-auto flex min-w-0 items-center gap-1 text-xs text-current/65',
|
||||
hintLabel: 'max-w-24 overflow-hidden text-ellipsis whitespace-nowrap',
|
||||
chevron: 'size-3.5 first:-ml-1 last:-mr-1',
|
||||
settingsGroup: 'group/settings',
|
||||
settingsTrigger: 'group hidden group-has-[[data-availability=available]]/settings:grid',
|
||||
settingsIcon: 'transition-transform duration-150 ease-in-out group-aria-expanded:rotate-90 motion-reduce:duration-0',
|
||||
};
|
||||
@@ -0,0 +1,23 @@
|
||||
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-100',
|
||||
// Transitions
|
||||
'transition-[opacity,backdrop-filter]',
|
||||
'duration-(--media-controls-transition-duration)',
|
||||
'ease-out',
|
||||
// Shown when controls visible
|
||||
'peer-data-visible/controls:opacity-100',
|
||||
// Shown when error visible (+ blur)
|
||||
// Light DOM: peer/error is a direct sibling (React)
|
||||
'peer-data-open/error:opacity-100',
|
||||
'peer-data-open/error:duration-(--media-error-dialog-transition-duration)',
|
||||
'peer-data-open/error:delay-(--media-error-dialog-transition-delay)',
|
||||
'peer-data-open/error:backdrop-blur-lg peer-data-open/error:backdrop-saturate-120'
|
||||
);
|
||||
@@ -0,0 +1,3 @@
|
||||
export const playbackRate = {
|
||||
button: `tabular-nums after:w-[4ch] after:content-[attr(data-rate)_'×'] data-[inline-rate-label]:after:content-none`,
|
||||
};
|
||||
@@ -0,0 +1,43 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
const base = cn(
|
||||
// Reset default popover styles
|
||||
'm-0 border-0 text-inherit overflow-visible',
|
||||
// Animation
|
||||
'transition-[scale,opacity,filter_var(--popup-transition-property,)]',
|
||||
'duration-[var(--media-popup-transition-duration),var(--media-popup-transition-duration),var(--media-popup-transition-duration)_var(--popup-transition-duration,)]',
|
||||
'ease-(--media-popup-transition-timing-function)',
|
||||
'data-starting-style:opacity-0 data-starting-style:scale-50 data-starting-style:blur-sm',
|
||||
'data-ending-style:opacity-0 data-ending-style:scale-50 data-ending-style:blur-sm',
|
||||
'data-ending-style:duration-[max(0ms,calc(var(--media-popup-transition-duration)-50ms))]',
|
||||
// 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',
|
||||
// Safe area between trigger and popup
|
||||
'before:absolute before:pointer-events-[inherit]',
|
||||
'data-[side=top]:before:left-0 data-[side=top]:before:right-0 data-[side=top]:before:top-full',
|
||||
'data-[side=bottom]:before:left-0 data-[side=bottom]:before:right-0 data-[side=bottom]:before:bottom-full',
|
||||
'data-[side=left]:before:top-0 data-[side=left]:before:bottom-0 data-[side=left]:before:left-full',
|
||||
'data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:right-full'
|
||||
);
|
||||
|
||||
export const popup = {
|
||||
base,
|
||||
popover: cn(
|
||||
base,
|
||||
'data-[side=top]:before:h-(--media-popover-side-offset) data-[side=bottom]:before:h-(--media-popover-side-offset)',
|
||||
'data-[side=left]:before:w-(--media-popover-side-offset) data-[side=right]:before:w-(--media-popover-side-offset)'
|
||||
),
|
||||
tooltip: cn(
|
||||
base,
|
||||
'px-2 py-1 rounded-lg text-[0.75rem] whitespace-nowrap',
|
||||
'data-[open]:flex data-[open]:items-center data-[open]:gap-1',
|
||||
'bg-(--media-tooltip-background-color) [backdrop-filter:var(--media-tooltip-backdrop-filter)]',
|
||||
'ring-1 ring-(color:--media-tooltip-border-color) shadow-md shadow-black/10',
|
||||
'text-(--media-tooltip-text-color)',
|
||||
'data-[side=top]:before:h-(--media-tooltip-side-offset) data-[side=bottom]:before:h-(--media-tooltip-side-offset)',
|
||||
'data-[side=left]:before:w-(--media-tooltip-side-offset) data-[side=right]:before:w-(--media-tooltip-side-offset)'
|
||||
),
|
||||
tooltipShortcut: cn(
|
||||
'min-w-[1.5em] -mr-1 p-[0.1em] bg-current/15 text-[90%] font-semibold font-[inherit] leading-[1.25] text-center rounded'
|
||||
),
|
||||
};
|
||||
@@ -0,0 +1,9 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const poster = cn(
|
||||
'absolute inset-0 w-full h-full pointer-events-none',
|
||||
// Fade in/out with the `data-visible` attribute
|
||||
'transition-opacity duration-250',
|
||||
'not-data-visible:opacity-0',
|
||||
'rounded-[inherit] [object-fit:var(--media-object-fit,contain)] [object-position:var(--media-object-position,center)]'
|
||||
);
|
||||
@@ -0,0 +1,9 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const reset = cn(
|
||||
'**:box-border',
|
||||
// Keep authored templates hidden even when component classes set display.
|
||||
'[&_[hidden][hidden]]:hidden',
|
||||
'[&_button]:font-[inherit]',
|
||||
'motion-safe:[interpolate-size:allow-keywords]'
|
||||
);
|
||||
@@ -0,0 +1,5 @@
|
||||
export const seek = {
|
||||
label: 'text-[10px] font-medium tracking-tighter tabular-nums',
|
||||
labelForward: 'absolute -right-px -bottom-0.75',
|
||||
labelBackward: 'absolute -left-px -bottom-0.75',
|
||||
};
|
||||
@@ -0,0 +1,79 @@
|
||||
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 cursor-pointer',
|
||||
// Horizontal
|
||||
'data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-8',
|
||||
// Vertical
|
||||
'data-[orientation=vertical]:w-8 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)',
|
||||
'group-data-dragging/slider:data-[orientation=horizontal]:w-(--media-slider-pointer)',
|
||||
// Vertical
|
||||
'data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0',
|
||||
'data-[orientation=vertical]:h-(--media-slider-fill,0)',
|
||||
'group-data-dragging/slider:data-[orientation=vertical]:h-(--media-slider-pointer)'
|
||||
),
|
||||
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-current-shadow-color,oklch(0_0_0/0.15)),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)',
|
||||
'group-data-dragging/slider:data-[orientation=horizontal]:left-(--media-slider-pointer)',
|
||||
// Vertical
|
||||
'data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]',
|
||||
'group-data-dragging/slider:data-[orientation=vertical]:top-[calc(100%-var(--media-slider-pointer))]'
|
||||
),
|
||||
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'
|
||||
),
|
||||
},
|
||||
preview: cn(
|
||||
'group/preview',
|
||||
'before:block before:bg-current/35 before:opacity-0 before:scale-50',
|
||||
'before:transition-[opacity,scale] before:duration-200 before:ease-out',
|
||||
'data-pointing:not-data-dragging:before:opacity-100 data-pointing:not-data-dragging:before:scale-100',
|
||||
'data-[orientation=horizontal]:before:min-w-px data-[orientation=horizontal]:before:h-5',
|
||||
'data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:min-h-px',
|
||||
'peer-has-[[role=img]:not([data-hidden])]/thumbnail:*:hidden'
|
||||
),
|
||||
value: cn(
|
||||
'absolute bottom-6 tabular-nums',
|
||||
'-translate-x-1/2 translate-y-2 scale-50 opacity-0 blur-lg',
|
||||
'text-shadow-2xs text-shadow-(color:--media-current-shadow-color)',
|
||||
'transition-[filter,opacity,scale,translate] duration-200 ease-out',
|
||||
'group-data-pointing/preview:translate-y-0 group-data-pointing/preview:scale-100',
|
||||
'group-data-pointing/preview:opacity-100 group-data-pointing/preview:blur-none'
|
||||
),
|
||||
};
|
||||
@@ -0,0 +1,13 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
|
||||
export const thumbnail = {
|
||||
root: 'group/thumbnail peer/thumbnail pointer-events-none',
|
||||
imageWrapper: 'relative rounded-lg bg-black/90',
|
||||
image: cn('block rounded-[inherit] transition-opacity duration-150 ease-out', 'data-loading:opacity-0'),
|
||||
time: 'mt-2 block text-center tabular-nums',
|
||||
spinner: cn(
|
||||
'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0',
|
||||
'transition-opacity duration-150 ease-out',
|
||||
'group-not-has-[[role=img][data-loading]]/thumbnail:[--media-spinner-animation:none] group-has-[[role=img][data-loading]]/thumbnail:opacity-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', '@2xl/media-root:inline'),
|
||||
separator: cn('hidden', '@2xl/media-root:inline @2xl/media-root:text-current/60'),
|
||||
duration: cn('tabular-nums', '@2xl/media-root:text-current/60'),
|
||||
controls: cn('@container flex flex-row-reverse items-center flex-1 gap-3', '@2xl/media-root:flex-row'),
|
||||
};
|
||||
@@ -0,0 +1,218 @@
|
||||
import { cn } from '@videojs/utils/style';
|
||||
import { buttonGroup as baseButtonGroup } from './components/button-group';
|
||||
import { container as baseContainer } from './components/container';
|
||||
import { controls as baseControls } from './components/controls';
|
||||
import { error as baseError } from './components/error';
|
||||
import { menu as baseMenu } from './components/menu';
|
||||
import { popup as basePopup } from './components/popup';
|
||||
import { slider as baseSlider } from './components/slider';
|
||||
import { thumbnail as baseThumbnail } from './components/thumbnail';
|
||||
import { time as baseTime } from './components/time';
|
||||
|
||||
/* ===========================================================================
|
||||
Container
|
||||
========================================================================== */
|
||||
|
||||
export const container = cn(
|
||||
baseContainer,
|
||||
'bg-black overflow-clip',
|
||||
// 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
|
||||
'[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit] [&_video]:[object-fit:var(--media-object-fit,contain)] [&_video]:[object-position:var(--media-object-position,center)]',
|
||||
'[--media-video-border-radius:var(--media-border-radius,0.75rem)]',
|
||||
'[--media-controls-background-color:transparent]',
|
||||
'[--media-controls-transition-duration:100ms]',
|
||||
'[--media-controls-transition-timing-function:ease-out]',
|
||||
'[--media-error-dialog-transition-duration:150ms]',
|
||||
'[--media-error-dialog-transition-delay:100ms]',
|
||||
'[--media-error-dialog-transition-timing-function:ease-out]',
|
||||
'[--media-popup-transition-duration:100ms]',
|
||||
'[--media-popup-transition-timing-function:ease-out]',
|
||||
'[--media-tooltip-background-color:oklch(1_0_0/0.1)]',
|
||||
'[--media-tooltip-border-color:transparent]',
|
||||
'[--media-tooltip-backdrop-filter:blur(16px)_saturate(1.5)]',
|
||||
'[--media-tooltip-text-color:currentColor]',
|
||||
'[--media-tooltip-side-offset:0.5rem]',
|
||||
'[--media-tooltip-boundary-offset:0.5rem]',
|
||||
'[--media-popover-background-color:oklch(1_0_0/0.1)]',
|
||||
'[--media-popover-border-color:transparent]',
|
||||
'[--media-popover-backdrop-filter:blur(16px)_saturate(1.5)]',
|
||||
'[--media-popover-side-offset:1.5rem]',
|
||||
'[--media-popover-boundary-offset:0.5rem]',
|
||||
'motion-reduce:[--media-error-dialog-transition-duration:50ms]',
|
||||
'motion-reduce:[--media-error-dialog-transition-delay:0ms]',
|
||||
'motion-reduce:[--media-popup-transition-duration:0ms]',
|
||||
'[@media(prefers-reduced-transparency:reduce)]:[--media-controls-background-color:oklch(0_0_0)]',
|
||||
'contrast-more:[--media-controls-background-color:oklch(0_0_0)]',
|
||||
'[@media(prefers-reduced-transparency:reduce)]:[--media-tooltip-background-color:oklch(0_0_0)]',
|
||||
'contrast-more:[--media-tooltip-background-color:oklch(0_0_0)]',
|
||||
'@2xl/media-root:*:[--media-popover-side-offset:0.5rem]',
|
||||
'pointer-fine:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:300ms]',
|
||||
'pointer-coarse:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:150ms]',
|
||||
'motion-reduce:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:50ms]',
|
||||
// Caption track CSS variables (consumed by the native caption bridge in light DOM)
|
||||
'[--media-caption-track-y:-0.5rem]',
|
||||
'[--media-caption-track-delay:25ms]',
|
||||
'[--media-caption-track-duration:var(--media-controls-transition-duration)]',
|
||||
'has-[[data-controls][data-visible]]:[--media-caption-track-y:-5rem]',
|
||||
'@2xl/media-root:has-[[data-controls][data-visible]]:*:[--media-caption-track-y:-3rem]',
|
||||
// Native caption track container
|
||||
'[&_video::-webkit-media-text-track-container]:transition-[translate]',
|
||||
'[&_video::-webkit-media-text-track-container]:duration-(--media-caption-track-duration)',
|
||||
'[&_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]',
|
||||
// Fullscreen
|
||||
'[&:fullscreen]:[--media-border-radius:0]',
|
||||
'[&:fullscreen_video]:object-contain'
|
||||
);
|
||||
|
||||
/* ===========================================================================
|
||||
Controls (hide/show behavior)
|
||||
========================================================================== */
|
||||
|
||||
export const controls = cn(
|
||||
baseControls,
|
||||
// Position & wrapping layout (small)
|
||||
'absolute bottom-1 inset-x-1',
|
||||
'p-1 gap-x-2 flex-wrap rounded-xl',
|
||||
'text-white z-10',
|
||||
'peer-data-open/error:hidden',
|
||||
'ease-(--media-controls-transition-timing-function)',
|
||||
'duration-(--media-controls-transition-duration)',
|
||||
'pointer-fine:will-change-[translate,filter,opacity]',
|
||||
'pointer-fine:transition-[translate,filter,opacity]',
|
||||
'pointer-coarse:will-change-[translate,opacity]',
|
||||
'pointer-coarse:transition-[translate,opacity]',
|
||||
// Hidden state
|
||||
'not-data-visible:opacity-0 not-data-visible:pointer-events-none',
|
||||
'motion-safe:not-data-visible:translate-y-full',
|
||||
'pointer-fine:motion-safe:not-data-visible:blur-sm',
|
||||
// Single-row layout (large)
|
||||
'@2xl/media-root:flex-nowrap @2xl/media-root:bottom-2 @2xl/media-root:inset-x-2',
|
||||
'@2xl/media-root:*:[--media-popover-side-offset:0rem]'
|
||||
);
|
||||
|
||||
/* ===========================================================================
|
||||
Button groups
|
||||
========================================================================== */
|
||||
|
||||
export const buttonGroupStart = cn(baseButtonGroup, 'flex-1 @2xl/media-root:flex-none');
|
||||
export const buttonGroupEnd = cn(baseButtonGroup, 'flex-1 justify-end @2xl/media-root:flex-none');
|
||||
|
||||
/* ===========================================================================
|
||||
Time
|
||||
========================================================================== */
|
||||
|
||||
export const time = {
|
||||
...baseTime,
|
||||
controls: cn(
|
||||
baseTime.controls,
|
||||
'grow-0 shrink-0 basis-full order-[-1] px-2.5',
|
||||
'@2xl/media-root:grow @2xl/media-root:shrink @2xl/media-root:basis-0 @2xl/media-root:order-[unset]'
|
||||
),
|
||||
};
|
||||
|
||||
/* ===========================================================================
|
||||
Error
|
||||
========================================================================== */
|
||||
|
||||
export const error = {
|
||||
...baseError,
|
||||
root: cn(baseError.root, 'pointer-events-none outline-none'),
|
||||
dialog: cn(baseError.dialog, 'pointer-events-auto'),
|
||||
title: cn(baseError.title, 'text-lg'),
|
||||
};
|
||||
|
||||
/* ===========================================================================
|
||||
Thumbnail
|
||||
========================================================================== */
|
||||
|
||||
export const thumbnail = {
|
||||
...baseThumbnail,
|
||||
root: cn(
|
||||
baseThumbnail.root,
|
||||
'[--media-slider-thumbnail-max-width:11rem] [--media-slider-thumbnail-padding:-0.5rem] [--media-slider-thumbnail-inset:calc(100cqi-100%)]',
|
||||
'absolute [left:clamp(calc(var(--media-slider-thumbnail-max-width)/2+var(--media-slider-thumbnail-padding)),var(--media-slider-pointer),calc(100%-var(--media-slider-thumbnail-max-width)/2-var(--media-slider-thumbnail-padding)+var(--media-slider-thumbnail-inset)))] bottom-full -translate-x-1/2',
|
||||
'@2xl/media-root:[left:var(--media-slider-pointer)]',
|
||||
'opacity-0 scale-80 blur-sm origin-bottom',
|
||||
'transition-[scale,opacity,filter] duration-150',
|
||||
'has-[[role=img]:not([data-hidden])]:group-data-pointing/slider:opacity-100',
|
||||
'has-[[role=img]:not([data-hidden])]:group-data-pointing/slider:scale-100',
|
||||
'has-[[role=img]:not([data-hidden])]:group-data-pointing/slider:blur-none',
|
||||
'has-[[role=img][data-loading]]:max-h-24'
|
||||
),
|
||||
imageWrapper: cn(
|
||||
baseThumbnail.imageWrapper,
|
||||
'after:absolute after:inset-0 after:rounded-[inherit]',
|
||||
'after:ring-1 after:ring-black/5 after:shadow-sm after:shadow-black/20'
|
||||
),
|
||||
image: cn(baseThumbnail.image, 'max-w-(--media-slider-thumbnail-max-width)'),
|
||||
};
|
||||
|
||||
/* ===========================================================================
|
||||
Sliders
|
||||
========================================================================== */
|
||||
|
||||
export const slider = {
|
||||
...baseSlider,
|
||||
track: cn(baseSlider.track, 'ring-1 ring-black/5'),
|
||||
};
|
||||
|
||||
/* ===========================================================================
|
||||
Popup
|
||||
========================================================================== */
|
||||
|
||||
export const popup = {
|
||||
...basePopup,
|
||||
volume: cn(
|
||||
basePopup.popover,
|
||||
'py-3 px-0 bg-transparent rounded-xl',
|
||||
'[@media(prefers-reduced-transparency:reduce)]:bg-(--media-controls-background-color)',
|
||||
'contrast-more:bg-(--media-controls-background-color)'
|
||||
),
|
||||
};
|
||||
|
||||
/* ===========================================================================
|
||||
Menu
|
||||
========================================================================== */
|
||||
|
||||
const menuOffsets = cn(
|
||||
'[--media-popover-side-offset:1.5rem] [--media-popover-boundary-offset:0.5rem]',
|
||||
'@2xl/media-root:[--media-popover-side-offset:0.5rem]'
|
||||
);
|
||||
|
||||
export const menu = {
|
||||
...baseMenu,
|
||||
root: cn(baseMenu.root, menuOffsets),
|
||||
settings: cn(baseMenu.settings, menuOffsets),
|
||||
};
|
||||
|
||||
/* ===========================================================================
|
||||
Shared components (no overrides)
|
||||
========================================================================== */
|
||||
|
||||
export {
|
||||
airplayIcon,
|
||||
captionsIcon,
|
||||
castIcon,
|
||||
fullscreenIcon,
|
||||
muteIcon,
|
||||
pipIcon,
|
||||
playIcon,
|
||||
} from '../../shared/tailwind/icon-state';
|
||||
export { badge } from './components/badge';
|
||||
export { bufferingIndicator } from './components/buffering';
|
||||
export { button } from './components/button';
|
||||
export { buttonGroup } from './components/button-group';
|
||||
export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon';
|
||||
export { inputFeedback } from './components/input-feedback';
|
||||
export { overlay } from './components/overlay';
|
||||
export { playbackRate } from './components/playback-rate';
|
||||
export { poster } from './components/poster';
|
||||
export { seek } from './components/seek';
|
||||
Reference in New Issue
Block a user