@videojs/react 10.0.0-alpha.4 → 10.0.0-alpha.5

package/dist/default/presets/video/minimal-skin.tailwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.tailwind.js","names":["Controls.Root","Time.Group","Time.Value","Time.Separator"],"sources":["../../../../src/presets/video/minimal-skin.tailwind.tsx"],"sourcesContent":["import type { FullscreenButtonState, MuteButtonState, PlayButtonState } from '@videojs/core';\nimport {\n  CaptionsOffIcon,\n  CaptionsOnIcon,\n  FullscreenEnterIcon,\n  FullscreenExitIcon,\n  PauseIcon,\n  PipIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  SpinnerIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react/minimal';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container } from '@/player/context';\nimport { BufferingIndicator } from '@/ui/buffering-indicator';\nimport { CaptionsButton, type CaptionsButtonState } from '@/ui/captions-button';\nimport { Controls } from '@/ui/controls';\nimport { ErrorDialog } from '@/ui/error-dialog';\nimport { FullscreenButton } from '@/ui/fullscreen-button';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PiPButton } from '@/ui/pip-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport type { MinimalVideoSkinProps } from './minimal-skin';\n\nconst SEEK_TIME = 10;\n\n/* ------------------------------------ Reused fragments ------------------------------------- */\n\nconst icon = cn(\n  '[grid-area:1/1] size-4.5',\n  'drop-shadow-[0_1px_0_var(--tw-drop-shadow-color)] drop-shadow-black/25',\n  'transition-discrete transition-[display,opacity] duration-150 ease-out'\n);\n\nconst iconHidden = 'hidden opacity-0';\n\n/* --------------------------------------- Components ---------------------------------------- */\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'> & { variant?: 'icon' }>(function Button(\n  { className, variant, ...props },\n  ref\n) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn(\n        // Shared\n        'shrink-0 border-none cursor-pointer select-none',\n        'outline-2 outline-transparent -outline-offset-2',\n        'transition-[background-color,color,outline-offset] duration-150 ease-out',\n        'disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale',\n        // Variant\n        variant === 'icon'\n          ? cn(\n              'grid p-2.5 bg-transparent rounded-md',\n              'text-white',\n              'hover:text-white/80 hover:no-underline',\n              'focus-visible:text-white/80',\n              'focus-visible:outline-white focus-visible:outline-offset-2',\n              'aria-expanded:text-white/80'\n            )\n          : cn(\n              'flex items-center justify-center py-2 px-4 bg-white rounded-lg',\n              'text-black font-medium',\n              'focus-visible:outline-white focus-visible:outline-offset-2'\n            ),\n        className\n      )}\n      {...props}\n    />\n  );\n});\n\nfunction PlayButtonIcon({ state, className, ...rest }: { state: PlayButtonState } & ComponentProps<'svg'>) {\n  const { ended, paused } = state;\n  return (\n    <>\n      <RestartIcon {...rest} className={cn(className, { [iconHidden]: !ended })} />\n      <PlayIcon {...rest} className={cn(className, { [iconHidden]: ended || !paused })} />\n      <PauseIcon {...rest} className={cn(className, { [iconHidden]: paused })} />\n    </>\n  );\n}\n\nfunction MuteButtonIcon({ state, className, ...rest }: { state: MuteButtonState } & ComponentProps<'svg'>) {\n  const { muted, volumeLevel } = state;\n  return (\n    <>\n      <VolumeOffIcon {...rest} className={cn(className, { [iconHidden]: !muted })} />\n      <VolumeLowIcon {...rest} className={cn(className, { [iconHidden]: muted || volumeLevel !== 'low' })} />\n      <VolumeHighIcon {...rest} className={cn(className, { [iconHidden]: muted || volumeLevel === 'low' })} />\n    </>\n  );\n}\n\nfunction CaptionsButtonIcon({ state, className, ...rest }: { state: CaptionsButtonState } & ComponentProps<'svg'>) {\n  const { active } = state;\n  return (\n    <>\n      <CaptionsOffIcon {...rest} className={cn(className, { [iconHidden]: active })} />\n      <CaptionsOnIcon {...rest} className={cn(className, { [iconHidden]: !active })} />\n    </>\n  );\n}\n\nfunction FullscreenButtonIcon({ state, className, ...rest }: { state: FullscreenButtonState } & ComponentProps<'svg'>) {\n  const { fullscreen } = state;\n  return (\n    <>\n      <FullscreenExitIcon {...rest} className={cn(className, { [iconHidden]: !fullscreen })} />\n      <FullscreenEnterIcon {...rest} className={cn(className, { [iconHidden]: fullscreen })} />\n    </>\n  );\n}\n\n/* ------------------------------------------ Skin ------------------------------------------- */\n\nexport function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container\n      className={cn(\n        // Layout & containment\n        'relative isolate overflow-clip @container/media-root',\n        // Appearance\n        'rounded-[var(--media-border-radius,0.75rem)] bg-black',\n        'font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased',\n        // Resets\n        '**:box-border **:m-0',\n        '[&_button]:font-[inherit]',\n        'motion-safe:[interpolate-size:allow-keywords]',\n        // Outer border ring (::after only)\n        'after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10',\n        'after:inset-0 after:ring-1 after:ring-inset after:ring-black/15',\n        'dark:after:ring-white/15',\n        // Video element\n        '[&>video]:block [&>video]:w-full [&>video]:h-full',\n        // Poster image\n        '[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full',\n        '[&>img]:object-cover [&>img]:pointer-events-none',\n        '[&>img]:transition-opacity [&>img]:duration-[250ms]',\n        '[&>img:not([data-visible])]:opacity-0',\n        // Fullscreen\n        '[&:fullscreen]:rounded-none',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n\n      <BufferingIndicator\n        render={(props, state) =>\n          state.visible ? (\n            <div\n              {...props}\n              className=\"absolute inset-0 flex items-center justify-center pointer-events-none z-10 text-white\"\n            >\n              <SpinnerIcon className={icon} />\n            </div>\n          ) : null\n        }\n      />\n\n      <ErrorDialog\n        aria-labelledby=\"media-error-title\"\n        aria-describedby=\"media-error-description\"\n        render={(props, { onDismiss }) => (\n          <div\n            {...props}\n            className=\"peer/error group/error absolute inset-0 z-20 items-center justify-center pointer-events-none hidden data-[visible]:flex\"\n          >\n            <div\n              className={cn(\n                'hidden flex-col gap-3 max-w-64 p-4 text-white text-sm pointer-events-auto',\n                'group-data-[visible]/error:flex',\n                'text-shadow-2xs text-shadow-black/50',\n                'transition-[display,opacity,scale,transform] duration-500 delay-100 transition-discrete',\n                'starting:opacity-0 starting:scale-50',\n                '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)]'\n              )}\n            >\n              <div className=\"flex flex-col gap-2 py-1.5\">\n                <p id=\"media-error-title\" className=\"font-semibold leading-tight\">\n                  Something went wrong.\n                </p>\n                <p id=\"media-error-description\">An error occurred while trying to play the video. Please try again.</p>\n              </div>\n              <div className=\"flex gap-2 *:flex-1\">\n                <Button onClick={onDismiss}>OK</Button>\n              </div>\n            </div>\n          </div>\n        )}\n      />\n\n      <Controls.Root\n        className={cn(\n          // Peer marker for overlay/captions\n          'peer/controls',\n          // Layout\n          'absolute @container/media-controls bottom-0 inset-x-0',\n          'pt-8 px-1.5 pb-1.5 flex items-center gap-2',\n          'text-white z-10',\n          // Transitions\n          'will-change-[translate,filter,opacity]',\n          'transition-[translate,filter,opacity] ease-out',\n          'delay-0 duration-75',\n          // Hidden state\n          'not-data-[visible]:opacity-0 not-data-[visible]:translate-y-full',\n          'not-data-[visible]:blur-[8px] not-data-[visible]:pointer-events-none',\n          'not-data-[visible]:delay-500 not-data-[visible]:duration-500',\n          // Reduced motion + hidden\n          'motion-reduce:not-data-[visible]:duration-100',\n          'motion-reduce:not-data-[visible]:translate-y-0',\n          'motion-reduce:not-data-[visible]:blur-none motion-reduce:not-data-[visible]:scale-100',\n          // Wider container\n          '@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3',\n          '@sm/media-root:gap-3.5'\n        )}\n      >\n        <span className={cn('flex items-center gap-[0.075rem]', '@2xl/media-root:gap-0.5')}>\n          <PlayButton\n            render={(props, state) => (\n              <Button variant=\"icon\" {...props}>\n                <PlayButtonIcon state={state} className={icon} />\n              </Button>\n            )}\n          />\n\n          <SeekButton\n            seconds={-SEEK_TIME}\n            render={(props) => (\n              <Button variant=\"icon\" {...props} className=\"@max-md/media-controls:hidden\">\n                <span className=\"relative\">\n                  <SeekIcon className={cn(icon, '[scale:-1_1]')} />\n                  <span className=\"absolute left-0 -bottom-0.75 text-[0.75em] font-[480] tabular-nums\">\n                    {SEEK_TIME}\n                  </span>\n                </span>\n              </Button>\n            )}\n          />\n\n          <SeekButton\n            seconds={SEEK_TIME}\n            render={(props) => (\n              <Button variant=\"icon\" {...props} className=\"@max-md/media-controls:hidden\">\n                <span className=\"relative\">\n                  <SeekIcon className={icon} />\n                  <span className=\"absolute right-0 -bottom-0.75 text-[0.75em] font-[480] tabular-nums\">\n                    {SEEK_TIME}\n                  </span>\n                </span>\n              </Button>\n            )}\n          />\n        </span>\n\n        <span className={cn('flex flex-row-reverse items-center flex-1 gap-3', '@md/media-controls:flex-row')}>\n          <Time.Group className=\"flex items-center gap-1\">\n            <Time.Value\n              type=\"current\"\n              className={cn('hidden tabular-nums text-shadow-2xs text-shadow-black/25', '@md/media-controls:inline')}\n            />\n            <Time.Separator className={cn('hidden', '@md/media-controls:inline @md/media-controls:text-white/50')} />\n            <Time.Value\n              type=\"duration\"\n              className={cn('tabular-nums text-shadow-2xs text-shadow-black/25', '@md/media-controls:text-white/50')}\n            />\n          </Time.Group>\n\n          {/* Temporary spacer */}\n          <span className=\"flex-1 h-[3px] rounded-full bg-white/20\" />\n        </span>\n\n        <span className={cn('flex items-center gap-[0.075rem]', '@2xl/media-root:gap-0.5')}>\n          <MuteButton\n            render={(props, state) => (\n              <Button variant=\"icon\" {...props}>\n                <MuteButtonIcon state={state} className={icon} />\n              </Button>\n            )}\n          />\n\n          <CaptionsButton\n            render={(props, state) => (\n              <Button variant=\"icon\" {...props}>\n                <CaptionsButtonIcon state={state} className={icon} />\n              </Button>\n            )}\n          />\n\n          <PiPButton\n            render={(props) => (\n              <Button variant=\"icon\" {...props}>\n                <PipIcon className={icon} />\n              </Button>\n            )}\n          />\n\n          <FullscreenButton\n            render={(props, state) => (\n              <Button variant=\"icon\" {...props}>\n                <FullscreenButtonIcon state={state} className={icon} />\n              </Button>\n            )}\n          />\n        </span>\n      </Controls.Root>\n\n      {/* <div\n        className={cn(\n          'absolute z-20 pointer-events-none text-balance text-base',\n          'inset-x-4 bottom-6',\n          'transition-transform duration-150 ease-out delay-600',\n          'motion-reduce:duration-50',\n          // Responsive font sizes\n          '@xs/media-root:text-2xl',\n          '@3xl/media-root:text-3xl',\n          '@7xl/media-root:text-4xl',\n          // Shift up when controls visible\n          'peer-data-[visible]/controls:-translate-y-10 peer-data-[visible]/controls:delay-25',\n        )}\n      >\n        <div className=\"max-w-[42ch] mx-auto text-center flex flex-col items-center\">\n          <span className={cn(\n            'block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2',\n            '[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]',\n            'contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70',\n            '*:inline',\n          )}>\n            An example cue\n          </span>\n        </div>\n      </div> */}\n\n      <div\n        className={cn(\n          // Layout\n          'absolute inset-0 flex flex-col items-start',\n          'pointer-events-none rounded-[inherit]',\n          // Default: hidden\n          'opacity-0',\n          'bg-gradient-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent',\n          'backdrop-blur-[0px] backdrop-saturate-120 backdrop-brightness-90',\n          // Transitions\n          'transition-[opacity,backdrop-filter] ease-out',\n          'duration-500 delay-500',\n          // Shown when controls visible\n          'peer-data-[visible]/controls:opacity-100',\n          'peer-data-[visible]/controls:duration-150',\n          'peer-data-[visible]/controls:delay-0',\n          // Shown when error visible (+ blur)\n          'peer-data-[visible]/error:opacity-100',\n          'peer-data-[visible]/error:duration-150',\n          'peer-data-[visible]/error:delay-0',\n          'peer-data-[visible]/error:backdrop-blur-[8px]',\n          // Reduced motion\n          'motion-reduce:duration-100'\n        )}\n      />\n    </Container>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"minimal-skin.tailwind.js","names":["Controls.Root","Time.Group","Time.Value","Time.Separator","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb"],"sources":["../../../../src/presets/video/minimal-skin.tailwind.tsx"],"sourcesContent":["import {\n  CaptionsOffIcon,\n  CaptionsOnIcon,\n  FullscreenEnterIcon,\n  FullscreenExitIcon,\n  PauseIcon,\n  PipIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  SpinnerIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react/minimal';\nimport { playbackRate } from '@videojs/skins/video/default.tailwind';\nimport {\n  bufferingIndicator,\n  button,\n  buttonGroup,\n  controls,\n  error,\n  icon,\n  iconContainer,\n  iconFlipped,\n  iconState,\n  overlay,\n  popup,\n  root,\n  seek,\n  slider,\n  time,\n} from '@videojs/skins/video/minimal.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container } from '@/player/context';\nimport { BufferingIndicator } from '@/ui/buffering-indicator';\nimport { CaptionsButton } from '@/ui/captions-button';\nimport { Controls } from '@/ui/controls';\nimport { ErrorDialog } from '@/ui/error-dialog';\nimport { FullscreenButton } from '@/ui/fullscreen-button';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PiPButton } from '@/ui/pip-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { MinimalVideoSkinProps } from './minimal-skin';\n\nconst SEEK_TIME = 10;\n\n/* --------------------------------------- Components ---------------------------------------- */\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'> & { variant?: 'icon' }>(function Button(\n  { className, variant, ...props },\n  ref\n) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn(button.base, variant === 'icon' ? button.icon : button.default, className)}\n      {...props}\n    />\n  );\n});\n\nconst SliderRoot = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderRoot({ className, ...props }, ref) {\n  return <div ref={ref} className={cn(slider.root, className)} {...props} />;\n});\n\nconst SliderTrack = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderTrack(\n  { className, ...props },\n  ref\n) {\n  return <div ref={ref} className={cn(slider.track, className)} {...props} />;\n});\n\nconst SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: 'fill' | 'buffer' }>(function SliderFill(\n  { type = 'fill', className, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}\n      {...props}\n    />\n  );\n});\n\nconst SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persistent?: boolean }>(function SliderThumb(\n  { persistent, className, ...props },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(slider.thumb.base, persistent ? undefined : slider.thumb.interactive, className)}\n      {...props}\n    />\n  );\n});\n\n/* ------------------------------------------ Skin ------------------------------------------- */\n\nexport function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container className={cn(root, className)} {...rest}>\n      <BufferingIndicator\n        render={(props) => (\n          <div {...props} className={bufferingIndicator}>\n            <SpinnerIcon className={icon} />\n          </div>\n        )}\n      />\n\n      <ErrorDialog\n        aria-labelledby=\"media-error-title\"\n        aria-describedby=\"media-error-description\"\n        render={(props, { onDismiss }) => (\n          <div {...props} className={error.root}>\n            <div className={error.dialog}>\n              <div className={error.content}>\n                <p id=\"media-error-title\" className={error.title}>\n                  Something went wrong.\n                </p>\n                <p id=\"media-error-description\">An error occurred while trying to play the video. Please try again.</p>\n              </div>\n              <div className={error.actions}>\n                <Button onClick={onDismiss}>OK</Button>\n              </div>\n            </div>\n          </div>\n        )}\n      />\n\n      <Controls.Root\n        data-controls=\"\" // Used as a hook for Tailwind has-[] styles\n        className={controls}\n      >\n        <span className={buttonGroup}>\n          <PlayButton\n            render={(props) => (\n              <Button variant=\"icon\" {...props} className={iconState.play.button}>\n                <RestartIcon className={cn(icon, iconState.play.restart)} />\n                <PlayIcon className={cn(icon, iconState.play.play)} />\n                <PauseIcon className={cn(icon, iconState.play.pause)} />\n              </Button>\n            )}\n          />\n\n          <SeekButton\n            seconds={-SEEK_TIME}\n            render={(props) => (\n              <Button variant=\"icon\" {...props} className={seek.button}>\n                <span className={iconContainer}>\n                  <SeekIcon className={cn(icon, iconFlipped)} />\n                  <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>\n                </span>\n              </Button>\n            )}\n          />\n\n          <SeekButton\n            seconds={SEEK_TIME}\n            render={(props) => (\n              <Button variant=\"icon\" {...props} className={seek.button}>\n                <span className={iconContainer}>\n                  <SeekIcon className={icon} />\n                  <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>\n                </span>\n              </Button>\n            )}\n          />\n        </span>\n\n        <span className={time.controls}>\n          <Time.Group className={time.group}>\n            <Time.Value type=\"current\" className={time.current} />\n            <Time.Separator className={time.separator} />\n            <Time.Value type=\"duration\" className={time.duration} />\n          </Time.Group>\n\n          <TimeSlider.Root render={(props) => <SliderRoot {...props} />}>\n            <TimeSlider.Track render={(props) => <SliderTrack {...props} />}>\n              <TimeSlider.Fill render={(props) => <SliderFill {...props} />} />\n              <TimeSlider.Buffer render={(props) => <SliderFill type=\"buffer\" {...props} />} />\n            </TimeSlider.Track>\n            <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />\n          </TimeSlider.Root>\n        </span>\n\n        <span className={buttonGroup}>\n          <PlaybackRateButton\n            render={(props) => <Button variant=\"icon\" {...props} className={playbackRate.button} />}\n          />\n\n          <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n            <Popover.Trigger\n              render={\n                <MuteButton\n                  render={(props) => (\n                    <Button variant=\"icon\" {...props} className={iconState.mute.button}>\n                      <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />\n                      <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />\n                      <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />\n                    </Button>\n                  )}\n                />\n              }\n            />\n            <Popover.Popup className={cn(popup.base, popup.volume)}>\n              <VolumeSlider.Root\n                orientation=\"vertical\"\n                thumbAlignment=\"edge\"\n                render={(props) => <SliderRoot {...props} />}\n              >\n                <VolumeSlider.Track render={(props) => <SliderTrack {...props} />}>\n                  <VolumeSlider.Fill render={(props) => <SliderFill {...props} />} />\n                </VolumeSlider.Track>\n                <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />\n              </VolumeSlider.Root>\n            </Popover.Popup>\n          </Popover.Root>\n\n          <CaptionsButton\n            render={(props) => (\n              <Button variant=\"icon\" {...props} className={iconState.captions.button}>\n                <CaptionsOffIcon className={cn(icon, iconState.captions.off)} />\n                <CaptionsOnIcon className={cn(icon, iconState.captions.on)} />\n              </Button>\n            )}\n          />\n\n          <PiPButton\n            render={(props) => (\n              <Button variant=\"icon\" {...props}>\n                <PipIcon className={icon} />\n              </Button>\n            )}\n          />\n\n          <FullscreenButton\n            render={(props) => (\n              <Button variant=\"icon\" {...props} className={iconState.fullscreen.button}>\n                <FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />\n                <FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />\n              </Button>\n            )}\n          />\n        </span>\n      </Controls.Root>\n\n      {/* <div className={captions.root}>\n        <div className={captions.container}>\n          <span className={captions.cue}>\n            An example cue\n          </span>\n        </div>\n      </div> */}\n\n      <div className={overlay} />\n\n      {children}\n    </Container>\n  );\n}\n"],"mappings":"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"}

package/dist/default/presets/video/skin.css

@@ -1,3 +1,54 @@
+/* ==========================================================================
+   Icon State Visibility
+
+   Data-attribute-driven visibility rules for multi-state icon buttons.
+   Uses :is() with both element selectors (for HTML custom element wrappers)
+   and class selectors (for React rendered SVG elements).
+   ========================================================================== */
+
+/* --- All icons hidden by default --- */
+
+.media-button--play .media-icon--restart,
+.media-button--play .media-icon--play,
+.media-button--play .media-icon--pause,
+.media-button--mute .media-icon--volume-off,
+.media-button--mute .media-icon--volume-low,
+.media-button--mute .media-icon--volume-high,
+.media-button--fullscreen .media-icon--fullscreen-enter,
+.media-button--fullscreen .media-icon--fullscreen-exit,
+.media-button--captions .media-icon--captions-off,
+.media-button--captions .media-icon--captions-on {
+  display: none;
+  opacity: 0;
+}
+
+/* --- Active icon per state --- */
+
+/* Play: ended → restart */
+.media-button--play[data-ended] .media-icon--restart,
+/* Play: paused (not ended) → play */
+.media-button--play:not([data-ended])[data-paused] .media-icon--play,
+/* Play: playing (not paused, not ended) → pause */
+.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,
+/* Mute: muted → volume off */
+.media-button--mute[data-muted] .media-icon--volume-off,
+/* Mute: volume low (not muted) → volume low */
+.media-button--mute:not([data-muted])[data-volume-level="low"] .media-icon--volume-low,
+/* Mute: volume high (not muted, not low) → volume high */
+.media-button--mute:not([data-muted]):not([data-volume-level="low"]) .media-icon--volume-high,
+/* Fullscreen: not fullscreen → enter */
+.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,
+/* Fullscreen: fullscreen → exit */
+.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,
+/* Captions: not active → captions off */
+.media-button--captions:not([data-active]) .media-icon--captions-off,
+/* Captions: active → captions on */
+.media-button--captions[data-active] .media-icon--captions-on {
+  display: block;
+  opacity: 1;
+}
+
+
 /* ==========================================================================
    Reset
    ========================================================================== */
@@ -30,6 +81,7 @@
 .media-default-skin {
   position: relative;
   isolation: isolate;
+  display: block;
   container: media-root / inline-size;
   overflow: clip;
   border-radius: var(--media-border-radius, 2rem);
@@ -78,6 +130,7 @@
   display: block;
   width: 100%;
   height: 100%;
+  border-radius: inherit;
 }
 
 /* ==========================================================================
@@ -89,6 +142,7 @@
   inset: 0;
   width: 100%;
   height: 100%;
+  border-radius: inherit;
   object-fit: cover;
   transition: opacity 0.25s;
   pointer-events: none;
@@ -104,6 +158,7 @@
 .media-default-skin .media-overlay {
   position: absolute;
   inset: 0;
+  z-index: 1;
   border-radius: inherit;
   background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));
   backdrop-filter: blur(0) saturate(1.2) brightness(0.9);
@@ -137,12 +192,15 @@
   position: absolute;
   inset: 0;
   z-index: 10;
-  display: flex;
+  display: none;
   align-items: center;
   justify-content: center;
   color: oklch(1 0 0);
   pointer-events: none;
 }
+.media-default-skin .media-buffering-indicator[data-visible] {
+  display: flex;
+}
 .media-default-skin .media-buffering-indicator .media-surface {
   padding: 0.25rem;
   border-radius: 100%;
@@ -339,6 +397,7 @@
   outline-offset: -2px;
   color: oklch(0 0 0);
   font-weight: 500;
+  text-align: center;
   transition-property: background-color, color, outline-offset;
   transition-duration: 150ms;
   transition-timing-function: ease-out;
@@ -358,7 +417,9 @@
 /* Icon button variant */
 .media-default-skin .media-button--icon {
   display: grid;
-  padding: 0.5rem;
+  width: 2.125rem;
+  padding: 0;
+  aspect-ratio: 1;
   background: transparent;
   color: oklch(1 0 0 / 0.9);
   text-shadow: 0 1px 0 oklch(0 0 0 / 0.25);
@@ -374,13 +435,35 @@
   filter: drop-shadow(0 1px 0 oklch(0 0 0 / 0.25));
 }
 
-/* Seek button variant — hidden at small sizes */
+/* Seek button */
+.media-default-skin .media-button--seek .media-icon__label {
+  position: absolute;
+  right: -1px;
+  bottom: -3px;
+  font-size: 0.75em;
+  font-weight: 480;
+  font-variant-numeric: tabular-nums;
+}
+.media-default-skin .media-button--seek:has(.media-icon--flipped) .media-icon__label {
+  right: unset;
+  left: -1px;
+}
 @container media-controls (width < 28rem) {
   .media-default-skin .media-button--seek {
     display: none;
   }
 }
 
+/* Playback rate button */
+.media-default-skin .media-button--playback-rate {
+  padding: 0;
+}
+.media-default-skin .media-button--playback-rate::after {
+  content: attr(data-rate) "\00D7";
+  width: 4ch;
+  font-variant-numeric: tabular-nums;
+}
+
 /* ==========================================================================
    Icons
    ========================================================================== */
@@ -389,6 +472,8 @@
   position: relative;
 }
 .media-default-skin .media-icon {
+  display: block;
+  flex-shrink: 0;
   grid-area: 1 / 1;
   width: 18px;
   height: 18px;
@@ -397,28 +482,10 @@
   transition-duration: 150ms;
   transition-timing-function: ease-out;
 }
-.media-default-skin .media-icon--hidden {
-  display: none;
-  opacity: 0;
-}
 .media-default-skin .media-icon--flipped {
   scale: -1 1;
 }
 
-/* Seek icon label positioning */
-.media-default-skin .media-icon--seek ~ .media-icon__label {
-  position: absolute;
-  right: 0;
-  bottom: -3px;
-  font-size: 0.75em;
-  font-weight: 480;
-  font-variant-numeric: tabular-nums;
-}
-.media-default-skin .media-icon--seek.media-icon--flipped ~ .media-icon__label {
-  right: unset;
-  left: 0;
-}
-
 /* ==========================================================================
    Slider
    ========================================================================== */
@@ -453,10 +520,7 @@
   overflow: hidden;
   background-color: oklch(1 0 0 / 0.2);
   border-radius: inherit;
-  outline: 2px solid transparent;
-  outline-offset: -2px;
   box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);
-  transition: outline-offset 150ms ease-out;
   user-select: none;
 }
 .media-default-skin .media-slider__track[data-orientation="horizontal"] {
@@ -467,14 +531,12 @@
   width: 0.25rem;
   height: 100%;
 }
-.media-default-skin .media-slider:focus-visible .media-slider__track {
-  outline-color: oklch(62.3% 0.214 259.815);
-  outline-offset: 6px;
-}
 
 /* Thumb */
 .media-default-skin .media-slider__thumb {
   z-index: 10;
+  position: absolute;
+  transform: translate(-50%, -50%);
   width: 0.625rem;
   height: 0.625rem;
   background-color: oklch(1 0 0);
@@ -484,36 +546,78 @@
     0 1px 3px 0 oklch(0 0 0 / 0.15),
     0 1px 2px -1px oklch(0 0 0 / 0.15);
   opacity: 0;
-  transition-property: opacity, height, width;
+  transition-property: opacity, height, width, outline-offset;
   transition-duration: 150ms;
   transition-timing-function: ease-out;
   user-select: none;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
 }
-.media-default-skin .media-slider__thumb:active {
+.media-default-skin .media-slider__thumb[data-orientation="horizontal"] {
+  top: 50%;
+  left: var(--media-slider-fill);
+}
+.media-default-skin .media-slider__thumb[data-orientation="vertical"] {
+  left: 50%;
+  top: calc(100% - var(--media-slider-fill));
+}
+.media-default-skin .media-slider__thumb:focus-visible {
+  outline-color: oklch(62.3% 0.214 259.815);
+  outline-offset: 2px;
+}
+.media-default-skin .media-slider:active .media-slider__thumb,
+.media-default-skin .media-slider__thumb--persistent {
   width: 0.75rem;
   height: 0.75rem;
 }
 .media-default-skin .media-slider:hover .media-slider__thumb,
-.media-default-skin .media-slider:focus-within .media-slider__thumb {
+.media-default-skin .media-slider__thumb:focus-visible,
+.media-default-skin .media-slider__thumb--persistent {
   opacity: 1;
 }
-.media-default-skin .media-slider__track[data-orientation="horizontal"] .media-slider__thumb {
-  cursor: ew-resize;
+
+/* Shared track fills */
+.media-default-skin .media-slider__buffer,
+.media-default-skin .media-slider__fill {
+  position: absolute;
+  border-radius: inherit;
+  pointer-events: none;
 }
-.media-default-skin .media-slider__track[data-orientation="vertical"] .media-slider__thumb {
-  cursor: ns-resize;
+.media-default-skin .media-slider__buffer[data-orientation="horizontal"],
+.media-default-skin .media-slider__fill[data-orientation="horizontal"] {
+  inset-block: 0;
+  left: 0;
+}
+.media-default-skin .media-slider__buffer[data-orientation="vertical"],
+.media-default-skin .media-slider__fill[data-orientation="vertical"] {
+  inset-inline: 0;
+  bottom: 0;
 }
 
-/* Pointer (hover preview) */
-.media-default-skin .media-slider__pointer {
+/* Buffer */
+.media-default-skin .media-slider__buffer {
   background-color: oklch(1 0 0 / 0.2);
-  border-radius: inherit;
+  transition-duration: 0.25s;
+  transition-timing-function: ease-out;
+}
+.media-default-skin .media-slider__buffer[data-orientation="horizontal"] {
+  width: var(--media-slider-buffer);
+  transition-property: width;
+}
+.media-default-skin .media-slider__buffer[data-orientation="vertical"] {
+  height: var(--media-slider-buffer);
+  transition-property: height;
 }
 
-/* Progress fill */
-.media-default-skin .media-slider__progress {
+/* Fill */
+.media-default-skin .media-slider__fill {
   background-color: oklch(1 0 0);
-  border-radius: inherit;
+}
+.media-default-skin .media-slider__fill[data-orientation="horizontal"] {
+  width: var(--media-slider-fill);
+}
+.media-default-skin .media-slider__fill[data-orientation="vertical"] {
+  height: var(--media-slider-fill);
 }
 
 /* Time display within slider */
@@ -543,10 +647,13 @@
   transition-duration: 0ms;
 }
 
-.media-default-skin .media-popover-popup {
+.media-default-skin .media-popup {
   margin: 0;
-  padding: 0.75rem 0.25rem;
   border: 0;
+  --media-popover-side-offset: 0.5rem;
+}
+.media-default-skin .media-popup--volume {
+  padding: 0.625rem 0.25rem;
   border-radius: calc(infinity * 1px);
 }
 
@@ -574,16 +681,8 @@
   z-index: 20;
   font-size: 1rem;
   text-wrap: balance;
-  /* The delay must account for the controls delay/duration */
-  transition: transform 150ms ease-out;
-  transition-delay: 600ms;
   pointer-events: none;
 }
-@media (prefers-reduced-motion: reduce) {
-  .media-default-skin .media-captions {
-    transition-duration: 50ms;
-  }
-}
 .media-default-skin .media-captions__container {
   display: flex;
   flex-direction: column;
@@ -631,8 +730,34 @@
   }
 }
 
-/* Shift captions up when controls visible */
+/* Caption shifting styles (custom and native) */
+.media-default-skin {
+  --media-caption-track-delay: 600ms;
+  --media-caption-track-y: -0.5rem;
+}
+.media-default-skin:has(.media-controls[data-visible]) {
+  --media-caption-track-delay: 25ms;
+  --media-caption-track-y: -3.5rem;
+}
+.media-default-skin .media-captions,
+.media-default-skin video::-webkit-media-text-track-container {
+  /* NOTE: The delay must account for the controls delay/duration */
+  transition: transform 150ms ease-out;
+  transition-delay: var(--media-caption-track-delay);
+}
+.media-default-skin video::-webkit-media-text-track-container {
+  transform: translateY(var(--media-caption-track-y)) scale(0.98);
+  z-index: 1;
+  font-family: inherit;
+}
+/* When controls are visible, shift captions up to avoid overlap */
 .media-default-skin .media-controls[data-visible] ~ .media-captions {
-  transform: translateY(-3rem);
-  transition-delay: 25ms;
+  transform: translateY(calc(var(--media-caption-track-y) - 0.5rem));
 }
+@media (prefers-reduced-motion: reduce) {
+  .media-default-skin .media-captions,
+  .media-default-skin video::-webkit-media-text-track-container {
+    transition-duration: 50ms;
+  }
+}
+