npm - @videojs/react - Versions diffs - 10.0.0-alpha.3 → 10.0.0-alpha.4 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (152) hide show

package/dist/dev/presets/video/minimal-skin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"minimal-skin.js","names":["Controls.Root","Time.Group","Time.Value","Time.Separator"],"sources":["../../../../src/presets/video/minimal-skin.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 { BaseSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nexport type MinimalVideoSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n return <button ref={ref} type=\"button\" className={cn('media-button', className)} {...props} />;\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, { 'media-icon--hidden': !ended })} />\n <PlayIcon {...rest} className={cn(className, { 'media-icon--hidden': ended \|\| !paused })} />\n <PauseIcon {...rest} className={cn(className, { 'media-icon--hidden': 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, { 'media-icon--hidden': !muted })} />\n <VolumeLowIcon {...rest} className={cn(className, { 'media-icon--hidden': muted \|\| volumeLevel !== 'low' })} />\n <VolumeHighIcon {...rest} className={cn(className, { 'media-icon--hidden': 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, { 'media-icon--hidden': active })} />\n <CaptionsOnIcon {...rest} className={cn(className, { 'media-icon--hidden': !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, { 'media-icon--hidden': !fullscreen })} />\n <FullscreenEnterIcon {...rest} className={cn(className, { 'media-icon--hidden': fullscreen })} />\n </>\n );\n}\n\nexport function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn('media-minimal-skin', className)} {...rest}>\n {children}\n\n <BufferingIndicator\n render={(props, state) =>\n state.visible ? (\n <div {...props} className=\"media-buffering-indicator\">\n <SpinnerIcon className=\"media-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 {...props} className=\"media-error\">\n <div className=\"media-error__dialog\">\n <div className=\"media-error__content\">\n <p id=\"media-error-title\" className=\"media-error__title\">\n Something went wrong.\n </p>\n <p id=\"media-error-description\" className=\"media-error__description\">\n An error occurred while trying to play the video. Please try again.\n </p>\n </div>\n <div className=\"media-error__actions\">\n <Button onClick={onDismiss}>OK</Button>\n </div>\n </div>\n </div>\n )}\n />\n\n <Controls.Root className=\"media-controls\">\n <span className=\"media-button-group\">\n <PlayButton\n render={(props, state) => (\n <Button {...props} className=\"media-button--icon\">\n <PlayButtonIcon state={state} className=\"media-icon\" />\n </Button>\n )}\n />\n\n <SeekButton\n seconds={-SEEK_TIME}\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--seek\">\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n\n <SeekButton\n seconds={SEEK_TIME}\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--seek\">\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n </span>\n\n <span className=\"media-time-controls\">\n <Time.Group className=\"media-time\">\n <Time.Value type=\"current\" className=\"media-time__value media-time__value--current\" />\n <Time.Separator className=\"media-time__separator\" />\n <Time.Value type=\"duration\" className=\"media-time__value media-time__value--duration\" />\n </Time.Group>\n\n {/* Temporary spacer /}\n <span className=\"media-slider\" style={{ height: '4px', background: 'oklch(1 0 0 / 0.2)' }} />\n </span>\n\n <span className=\"media-button-group\">\n <MuteButton\n render={(props, state) => (\n <Button {...props} className=\"media-button--icon\">\n <MuteButtonIcon state={state} className=\"media-icon\" />\n </Button>\n )}\n />\n\n <CaptionsButton\n render={(props, state) => (\n <Button {...props} className=\"media-button--icon\">\n <CaptionsButtonIcon state={state} className=\"media-icon\" />\n </Button>\n )}\n />\n\n <PiPButton\n render={(props) => (\n <Button {...props} className=\"media-button--icon\">\n <PipIcon className=\"media-icon\" />\n </Button>\n )}\n />\n\n <FullscreenButton\n render={(props, state) => (\n <Button {...props} className=\"media-button--icon\">\n <FullscreenButtonIcon state={state} className=\"media-icon\" />\n </Button>\n )}\n />\n </span>\n </Controls.Root>\n\n {/ <div className=\"media-captions\">\n <div className=\"media-captions__container\">\n <span className=\"media-captions__text\">An example cue</span>\n <span className=\"media-captions__text\">\n <p>Another example cue with HTML</p>\n </span>\n </div>\n </div> */}\n\n <div className=\"media-overlay\" />\n </Container>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"minimal-skin.js","names":["Controls.Root","Time.Group","Time.Value","Time.Separator"],"sources":["../../../../src/presets/video/minimal-skin.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 { BaseSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nexport type MinimalVideoSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n return <button ref={ref} type=\"button\" className={cn('media-button', className)} {...props} />;\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, { 'media-icon--hidden': !ended })} />\n <PlayIcon {...rest} className={cn(className, { 'media-icon--hidden': ended \|\| !paused })} />\n <PauseIcon {...rest} className={cn(className, { 'media-icon--hidden': 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, { 'media-icon--hidden': !muted })} />\n <VolumeLowIcon {...rest} className={cn(className, { 'media-icon--hidden': muted \|\| volumeLevel !== 'low' })} />\n <VolumeHighIcon {...rest} className={cn(className, { 'media-icon--hidden': 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, { 'media-icon--hidden': active })} />\n <CaptionsOnIcon {...rest} className={cn(className, { 'media-icon--hidden': !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, { 'media-icon--hidden': !fullscreen })} />\n <FullscreenEnterIcon {...rest} className={cn(className, { 'media-icon--hidden': fullscreen })} />\n </>\n );\n}\n\nexport function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn('media-minimal-skin', className)} {...rest}>\n {children}\n\n <BufferingIndicator\n render={(props, state) =>\n state.visible ? (\n <div {...props} className=\"media-buffering-indicator\">\n <SpinnerIcon className=\"media-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 {...props} className=\"media-error\">\n <div className=\"media-error__dialog\">\n <div className=\"media-error__content\">\n <p id=\"media-error-title\" className=\"media-error__title\">\n Something went wrong.\n </p>\n <p id=\"media-error-description\" className=\"media-error__description\">\n An error occurred while trying to play the video. Please try again.\n </p>\n </div>\n <div className=\"media-error__actions\">\n <Button onClick={onDismiss}>OK</Button>\n </div>\n </div>\n </div>\n )}\n />\n\n <Controls.Root className=\"media-controls\">\n <span className=\"media-button-group\">\n <PlayButton\n render={(props, state) => (\n <Button {...props} className=\"media-button--icon\">\n <PlayButtonIcon state={state} className=\"media-icon\" />\n </Button>\n )}\n />\n\n <SeekButton\n seconds={-SEEK_TIME}\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--seek\">\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n\n <SeekButton\n seconds={SEEK_TIME}\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--seek\">\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n </span>\n\n <span className=\"media-time-controls\">\n <Time.Group className=\"media-time\">\n <Time.Value type=\"current\" className=\"media-time__value media-time__value--current\" />\n <Time.Separator className=\"media-time__separator\" />\n <Time.Value type=\"duration\" className=\"media-time__value media-time__value--duration\" />\n </Time.Group>\n\n {/* Temporary spacer /}\n <span className=\"media-slider\" style={{ height: '4px', background: 'oklch(1 0 0 / 0.2)' }} />\n </span>\n\n <span className=\"media-button-group\">\n <MuteButton\n render={(props, state) => (\n <Button {...props} className=\"media-button--icon\">\n <MuteButtonIcon state={state} className=\"media-icon\" />\n </Button>\n )}\n />\n\n <CaptionsButton\n render={(props, state) => (\n <Button {...props} className=\"media-button--icon\">\n <CaptionsButtonIcon state={state} className=\"media-icon\" />\n </Button>\n )}\n />\n\n <PiPButton\n render={(props) => (\n <Button {...props} className=\"media-button--icon\">\n <PipIcon className=\"media-icon\" />\n </Button>\n )}\n />\n\n <FullscreenButton\n render={(props, state) => (\n <Button {...props} className=\"media-button--icon\">\n <FullscreenButtonIcon state={state} className=\"media-icon\" />\n </Button>\n )}\n />\n </span>\n </Controls.Root>\n\n {/ <div className=\"media-captions\">\n <div className=\"media-captions__container\">\n <span className=\"media-captions__text\">An example cue</span>\n <span className=\"media-captions__text\">\n <p>Another example cue with HTML</p>\n </span>\n </div>\n </div> */}\n\n <div className=\"media-overlay\" />\n </Container>\n );\n}\n"],"mappings":"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"}

package/dist/dev/presets/video/minimal-skin.tailwind.js CHANGED Viewed

@@ -9,11 +9,23 @@ import { SeekButton } from "../../ui/seek-button/seek-button.js";
 import { Group } from "../../ui/time/time-group.js";
 import { Separator } from "../../ui/time/time-separator.js";
 import { Value } from "../../ui/time/time-value.js";
+import CaptionsOffIcon from "../../icons/dist/react/minimal/captions-off.js";
+import CaptionsOnIcon from "../../icons/dist/react/minimal/captions-on.js";
+import FullscreenEnterIcon from "../../icons/dist/react/minimal/fullscreen-enter.js";
+import FullscreenExitIcon from "../../icons/dist/react/minimal/fullscreen-exit.js";
+import PauseIcon from "../../icons/dist/react/minimal/pause.js";
+import PipIcon from "../../icons/dist/react/minimal/pip.js";
+import PlayIcon from "../../icons/dist/react/minimal/play.js";
+import RestartIcon from "../../icons/dist/react/minimal/restart.js";
+import SeekIcon from "../../icons/dist/react/minimal/seek.js";
+import SpinnerIcon from "../../icons/dist/react/minimal/spinner.js";
+import VolumeHighIcon from "../../icons/dist/react/minimal/volume-high.js";
+import VolumeLowIcon from "../../icons/dist/react/minimal/volume-low.js";
+import VolumeOffIcon from "../../icons/dist/react/minimal/volume-off.js";
 import { CaptionsButton } from "../../ui/captions-button/captions-button.js";
 import { ErrorDialog } from "../../ui/error-dialog/error-dialog.js";
 import { forwardRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CaptionsOffIcon, CaptionsOnIcon, FullscreenEnterIcon, FullscreenExitIcon, PauseIcon, PipIcon, PlayIcon, RestartIcon, SeekIcon, SpinnerIcon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from "@videojs/icons/react/minimal";
 import { cn } from "@videojs/utils/style";
 //#region src/presets/video/minimal-skin.tailwind.tsx

package/dist/dev/presets/video/minimal-skin.tailwind.js.map CHANGED Viewed

	@@ -1 +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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"}
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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"}

package/dist/dev/presets/video/skin.js CHANGED Viewed

@@ -10,10 +10,22 @@ import { Group } from "../../ui/time/time-group.js";
 import { Value } from "../../ui/time/time-value.js";
 import { CaptionsButton } from "../../ui/captions-button/captions-button.js";
 import { ErrorDialog } from "../../ui/error-dialog/error-dialog.js";
+import CaptionsOffIcon from "../../icons/dist/react/default/captions-off.js";
+import CaptionsOnIcon from "../../icons/dist/react/default/captions-on.js";
+import FullscreenEnterIcon from "../../icons/dist/react/default/fullscreen-enter.js";
+import FullscreenExitIcon from "../../icons/dist/react/default/fullscreen-exit.js";
+import PauseIcon from "../../icons/dist/react/default/pause.js";
+import PipIcon from "../../icons/dist/react/default/pip.js";
+import PlayIcon from "../../icons/dist/react/default/play.js";
+import RestartIcon from "../../icons/dist/react/default/restart.js";
+import SeekIcon from "../../icons/dist/react/default/seek.js";
+import SpinnerIcon from "../../icons/dist/react/default/spinner.js";
+import VolumeHighIcon from "../../icons/dist/react/default/volume-high.js";
+import VolumeLowIcon from "../../icons/dist/react/default/volume-low.js";
+import VolumeOffIcon from "../../icons/dist/react/default/volume-off.js";
 import { forwardRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
-import { CaptionsOffIcon, CaptionsOnIcon, FullscreenEnterIcon, FullscreenExitIcon, PauseIcon, PipIcon, PlayIcon, RestartIcon, SeekIcon, SpinnerIcon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from "@videojs/icons/react";
 //#region src/presets/video/skin.tsx
 const SEEK_TIME = 10;

package/dist/dev/presets/video/skin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skin.js","names":["Controls.Root","Time.Group","Time.Value"],"sources":["../../../../src/presets/video/skin.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';\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 { BaseSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nexport type VideoSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n return <button ref={ref} type=\"button\" className={cn('media-button', className)} {...props} />;\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, { 'media-icon--hidden': !ended })} />\n <PlayIcon {...rest} className={cn(className, { 'media-icon--hidden': ended \|\| !paused })} />\n <PauseIcon {...rest} className={cn(className, { 'media-icon--hidden': 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, { 'media-icon--hidden': !muted })} />\n <VolumeLowIcon {...rest} className={cn(className, { 'media-icon--hidden': muted \|\| volumeLevel !== 'low' })} />\n <VolumeHighIcon {...rest} className={cn(className, { 'media-icon--hidden': 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, { 'media-icon--hidden': active })} />\n <CaptionsOnIcon {...rest} className={cn(className, { 'media-icon--hidden': !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, { 'media-icon--hidden': !fullscreen })} />\n <FullscreenEnterIcon {...rest} className={cn(className, { 'media-icon--hidden': fullscreen })} />\n </>\n );\n}\n\nexport function VideoSkin(props: VideoSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn('media-default-skin', className)} {...rest}>\n {children}\n\n <BufferingIndicator\n render={(props, state) =>\n state.visible ? (\n <div {...props} className=\"media-buffering-indicator\">\n <div className=\"media-surface\">\n <SpinnerIcon className=\"media-icon\" />\n </div>\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 {...props} className=\"media-error\">\n <div className=\"media-error__dialog media-surface\">\n <div className=\"media-error__content\">\n <p id=\"media-error-title\" className=\"media-error__title\">\n Something went wrong.\n </p>\n <p id=\"media-error-description\" className=\"media-error__description\">\n An error occurred while trying to play the video. Please try again.\n </p>\n </div>\n <div className=\"media-error__actions\">\n <Button onClick={onDismiss}>OK</Button>\n </div>\n </div>\n </div>\n )}\n />\n\n <Controls.Root className=\"media-surface media-controls\">\n <PlayButton\n render={(props, state) => (\n <Button {...props} className=\"media-button--icon\">\n <PlayButtonIcon state={state} className=\"media-icon\" />\n </Button>\n )}\n />\n\n <SeekButton\n seconds={-SEEK_TIME}\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--seek\">\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n\n <SeekButton\n seconds={SEEK_TIME}\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--seek\">\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n\n <Time.Group className=\"media-time\">\n <Time.Value type=\"current\" className=\"media-time__value\" />\n {/* Temporary spacer /}\n <div className=\"media-slider\" style={{ height: '4px', background: 'oklab(1 0 0 / 0.2)' }} />\n <Time.Value type=\"duration\" className=\"media-time__value\" />\n </Time.Group>\n\n <MuteButton\n render={(props, state) => (\n <Button {...props} className=\"media-button--icon\">\n <MuteButtonIcon state={state} className=\"media-icon\" />\n </Button>\n )}\n />\n\n <CaptionsButton\n render={(props, state) => (\n <Button {...props} className=\"media-button--icon\">\n <CaptionsButtonIcon state={state} className=\"media-icon\" />\n </Button>\n )}\n />\n\n <PiPButton\n render={(props) => (\n <Button {...props} className=\"media-button--icon\">\n <PipIcon className=\"media-icon\" />\n </Button>\n )}\n />\n\n <FullscreenButton\n render={(props, state) => (\n <Button {...props} className=\"media-button--icon\">\n <FullscreenButtonIcon state={state} className=\"media-icon\" />\n </Button>\n )}\n />\n </Controls.Root>\n\n {/ <div className=\"media-captions\">\n <div className=\"media-captions__container\">\n <span className=\"media-captions__text\">An example cue</span>\n <span className=\"media-captions__text\">\n <p>Another example cue with HTML</p>\n </span>\n </div>\n </div> */}\n\n <div className=\"media-overlay\" />\n </Container>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA+BA,MAAM,YAAY;AAIlB,MAAM,SAAS,WAAwD,SAAS,OAAO,EAAE,WAAW,GAAG,SAAS,KAAK;AACnH,QAAO,oBAAC;EAAY;EAAK,MAAK;EAAS,WAAW,GAAG,gBAAgB,UAAU;EAAE,GAAI;GAAS;EAC9F;AAEF,SAAS,eAAe,EAAE,OAAO,WAAW,GAAG,QAA4D;CACzG,MAAM,EAAE,OAAO,WAAW;AAC1B,QACE;EACE,oBAAC;GAAY,GAAI;GAAM,WAAW,GAAG,WAAW,EAAE,sBAAsB,CAAC,OAAO,CAAC;IAAI;EACrF,oBAAC;GAAS,GAAI;GAAM,WAAW,GAAG,WAAW,EAAE,sBAAsB,SAAS,CAAC,QAAQ,CAAC;IAAI;EAC5F,oBAAC;GAAU,GAAI;GAAM,WAAW,GAAG,WAAW,EAAE,sBAAsB,QAAQ,CAAC;IAAI;KAClF;;AAIP,SAAS,eAAe,EAAE,OAAO,WAAW,GAAG,QAA4D;CACzG,MAAM,EAAE,OAAO,gBAAgB;AAC/B,QACE;EACE,oBAAC;GAAc,GAAI;GAAM,WAAW,GAAG,WAAW,EAAE,sBAAsB,CAAC,OAAO,CAAC;IAAI;EACvF,oBAAC;GAAc,GAAI;GAAM,WAAW,GAAG,WAAW,EAAE,sBAAsB,SAAS,gBAAgB,OAAO,CAAC;IAAI;EAC/G,oBAAC;GAAe,GAAI;GAAM,WAAW,GAAG,WAAW,EAAE,sBAAsB,SAAS,gBAAgB,OAAO,CAAC;IAAI;KAC/G;;AAIP,SAAS,mBAAmB,EAAE,OAAO,WAAW,GAAG,QAAgE;CACjH,MAAM,EAAE,WAAW;AACnB,QACE,4CACE,oBAAC;EAAgB,GAAI;EAAM,WAAW,GAAG,WAAW,EAAE,sBAAsB,QAAQ,CAAC;GAAI,EACzF,oBAAC;EAAe,GAAI;EAAM,WAAW,GAAG,WAAW,EAAE,sBAAsB,CAAC,QAAQ,CAAC;GAAI,IACxF;;AAIP,SAAS,qBAAqB,EAAE,OAAO,WAAW,GAAG,QAAkE;CACrH,MAAM,EAAE,eAAe;AACvB,QACE,4CACE,oBAAC;EAAmB,GAAI;EAAM,WAAW,GAAG,WAAW,EAAE,sBAAsB,CAAC,YAAY,CAAC;GAAI,EACjG,oBAAC;EAAoB,GAAI;EAAM,WAAW,GAAG,WAAW,EAAE,sBAAsB,YAAY,CAAC;GAAI,IAChG;;AAIP,SAAgB,UAAU,OAAkC;CAC1D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AAEzC,QACE,qBAAC;EAAU,WAAW,GAAG,sBAAsB,UAAU;EAAE,GAAI;;GAC5D;GAED,oBAAC,sBACC,SAAS,OAAO,UACd,MAAM,UACJ,oBAAC;IAAI,GAAI;IAAO,WAAU;cACxB,oBAAC;KAAI,WAAU;eACb,oBAAC,eAAY,WAAU,eAAe;MAClC;KACF,GACJ,OAEN;GAEF,oBAAC;IACC,mBAAgB;IAChB,oBAAiB;IACjB,SAAS,OAAO,EAAE,gBAChB,oBAAC;KAAI,GAAI;KAAO,WAAU;eACxB,qBAAC;MAAI,WAAU;iBACb,qBAAC;OAAI,WAAU;kBACb,oBAAC;QAAE,IAAG;QAAoB,WAAU;kBAAqB;SAErD,EACJ,oBAAC;QAAE,IAAG;QAA0B,WAAU;kBAA2B;SAEjE;QACA,EACN,oBAAC;OAAI,WAAU;iBACb,oBAAC;QAAO,SAAS;kBAAW;SAAW;QACnC;OACF;MACF;KAER;GAEF,qBAACA;IAAc,WAAU;;KACvB,oBAAC,cACC,SAAS,OAAO,UACd,oBAAC;MAAO,GAAI;MAAO,WAAU;gBAC3B,oBAAC;OAAsB;OAAO,WAAU;QAAe;OAChD,GAEX;KAEF,oBAAC;MACC,SAAS,CAAC;MACV,SAAS,UACP,oBAAC;OAAO,GAAI;OAAO,WAAU;iBAC3B,qBAAC;QAAK,WAAU;mBACd,oBAAC,YAAS,WAAU,oDAAoD,EACxE,oBAAC;SAAK,WAAU;mBAAqB;UAAiB;SACjD;QACA;OAEX;KAEF,oBAAC;MACC,SAAS;MACT,SAAS,UACP,oBAAC;OAAO,GAAI;OAAO,WAAU;iBAC3B,qBAAC;QAAK,WAAU;mBACd,oBAAC,YAAS,WAAU,gCAAgC,EACpD,oBAAC;SAAK,WAAU;mBAAqB;UAAiB;SACjD;QACA;OAEX;KAEF,qBAACC;MAAW,WAAU;;OACpB,oBAACC;QAAW,MAAK;QAAU,WAAU;SAAsB;OAE3D,oBAAC;QAAI,WAAU;QAAe,OAAO;SAAE,QAAQ;SAAO,YAAY;SAAsB;SAAI;OAC5F,oBAACA;QAAW,MAAK;QAAW,WAAU;SAAsB;;OACjD;KAEb,oBAAC,cACC,SAAS,OAAO,UACd,oBAAC;MAAO,GAAI;MAAO,WAAU;gBAC3B,oBAAC;OAAsB;OAAO,WAAU;QAAe;OAChD,GAEX;KAEF,oBAAC,kBACC,SAAS,OAAO,UACd,oBAAC;MAAO,GAAI;MAAO,WAAU;gBAC3B,oBAAC;OAA0B;OAAO,WAAU;QAAe;OACpD,GAEX;KAEF,oBAAC,aACC,SAAS,UACP,oBAAC;MAAO,GAAI;MAAO,WAAU;gBAC3B,oBAAC,WAAQ,WAAU,eAAe;OAC3B,GAEX;KAEF,oBAAC,oBACC,SAAS,OAAO,UACd,oBAAC;MAAO,GAAI;MAAO,WAAU;gBAC3B,oBAAC;OAA4B;OAAO,WAAU;QAAe;OACtD,GAEX;;KACY;GAWhB,oBAAC,SAAI,WAAU,kBAAkB;;GACvB"}
1	+ {"version":3,"file":"skin.js","names":["Controls.Root","Time.Group","Time.Value"],"sources":["../../../../src/presets/video/skin.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';\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 { BaseSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nexport type VideoSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n return <button ref={ref} type=\"button\" className={cn('media-button', className)} {...props} />;\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, { 'media-icon--hidden': !ended })} />\n <PlayIcon {...rest} className={cn(className, { 'media-icon--hidden': ended \|\| !paused })} />\n <PauseIcon {...rest} className={cn(className, { 'media-icon--hidden': 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, { 'media-icon--hidden': !muted })} />\n <VolumeLowIcon {...rest} className={cn(className, { 'media-icon--hidden': muted \|\| volumeLevel !== 'low' })} />\n <VolumeHighIcon {...rest} className={cn(className, { 'media-icon--hidden': 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, { 'media-icon--hidden': active })} />\n <CaptionsOnIcon {...rest} className={cn(className, { 'media-icon--hidden': !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, { 'media-icon--hidden': !fullscreen })} />\n <FullscreenEnterIcon {...rest} className={cn(className, { 'media-icon--hidden': fullscreen })} />\n </>\n );\n}\n\nexport function VideoSkin(props: VideoSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn('media-default-skin', className)} {...rest}>\n {children}\n\n <BufferingIndicator\n render={(props, state) =>\n state.visible ? (\n <div {...props} className=\"media-buffering-indicator\">\n <div className=\"media-surface\">\n <SpinnerIcon className=\"media-icon\" />\n </div>\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 {...props} className=\"media-error\">\n <div className=\"media-error__dialog media-surface\">\n <div className=\"media-error__content\">\n <p id=\"media-error-title\" className=\"media-error__title\">\n Something went wrong.\n </p>\n <p id=\"media-error-description\" className=\"media-error__description\">\n An error occurred while trying to play the video. Please try again.\n </p>\n </div>\n <div className=\"media-error__actions\">\n <Button onClick={onDismiss}>OK</Button>\n </div>\n </div>\n </div>\n )}\n />\n\n <Controls.Root className=\"media-surface media-controls\">\n <PlayButton\n render={(props, state) => (\n <Button {...props} className=\"media-button--icon\">\n <PlayButtonIcon state={state} className=\"media-icon\" />\n </Button>\n )}\n />\n\n <SeekButton\n seconds={-SEEK_TIME}\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--seek\">\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n\n <SeekButton\n seconds={SEEK_TIME}\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--seek\">\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n\n <Time.Group className=\"media-time\">\n <Time.Value type=\"current\" className=\"media-time__value\" />\n {/* Temporary spacer /}\n <div className=\"media-slider\" style={{ height: '4px', background: 'oklab(1 0 0 / 0.2)' }} />\n <Time.Value type=\"duration\" className=\"media-time__value\" />\n </Time.Group>\n\n <MuteButton\n render={(props, state) => (\n <Button {...props} className=\"media-button--icon\">\n <MuteButtonIcon state={state} className=\"media-icon\" />\n </Button>\n )}\n />\n\n <CaptionsButton\n render={(props, state) => (\n <Button {...props} className=\"media-button--icon\">\n <CaptionsButtonIcon state={state} className=\"media-icon\" />\n </Button>\n )}\n />\n\n <PiPButton\n render={(props) => (\n <Button {...props} className=\"media-button--icon\">\n <PipIcon className=\"media-icon\" />\n </Button>\n )}\n />\n\n <FullscreenButton\n render={(props, state) => (\n <Button {...props} className=\"media-button--icon\">\n <FullscreenButtonIcon state={state} className=\"media-icon\" />\n </Button>\n )}\n />\n </Controls.Root>\n\n {/ <div className=\"media-captions\">\n <div className=\"media-captions__container\">\n <span className=\"media-captions__text\">An example cue</span>\n <span className=\"media-captions__text\">\n <p>Another example cue with HTML</p>\n </span>\n </div>\n </div> */}\n\n <div className=\"media-overlay\" />\n </Container>\n );\n}\n"],"mappings":"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"}

package/dist/dev/presets/video/skin.tailwind.js CHANGED Viewed

@@ -10,10 +10,22 @@ import { Group } from "../../ui/time/time-group.js";
 import { Value } from "../../ui/time/time-value.js";
 import { CaptionsButton } from "../../ui/captions-button/captions-button.js";
 import { ErrorDialog } from "../../ui/error-dialog/error-dialog.js";
+import CaptionsOffIcon from "../../icons/dist/react/default/captions-off.js";
+import CaptionsOnIcon from "../../icons/dist/react/default/captions-on.js";
+import FullscreenEnterIcon from "../../icons/dist/react/default/fullscreen-enter.js";
+import FullscreenExitIcon from "../../icons/dist/react/default/fullscreen-exit.js";
+import PauseIcon from "../../icons/dist/react/default/pause.js";
+import PipIcon from "../../icons/dist/react/default/pip.js";
+import PlayIcon from "../../icons/dist/react/default/play.js";
+import RestartIcon from "../../icons/dist/react/default/restart.js";
+import SeekIcon from "../../icons/dist/react/default/seek.js";
+import SpinnerIcon from "../../icons/dist/react/default/spinner.js";
+import VolumeHighIcon from "../../icons/dist/react/default/volume-high.js";
+import VolumeLowIcon from "../../icons/dist/react/default/volume-low.js";
+import VolumeOffIcon from "../../icons/dist/react/default/volume-off.js";
 import { forwardRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
-import { CaptionsOffIcon, CaptionsOnIcon, FullscreenEnterIcon, FullscreenExitIcon, PauseIcon, PipIcon, PlayIcon, RestartIcon, SeekIcon, SpinnerIcon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from "@videojs/icons/react";
 //#region src/presets/video/skin.tailwind.tsx
 const SEEK_TIME = 10;

package/dist/dev/presets/video/skin.tailwind.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skin.tailwind.js","names":["Controls.Root","Time.Group","Time.Value"],"sources":["../../../../src/presets/video/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';\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 { VideoSkinProps } from './skin';\n\nconst SEEK_TIME = 10;\n\n/* ------------------------------------ Reused fragments ------------------------------------- /\n\nconst surface = cn(\n 'bg-white/10',\n 'backdrop-blur-3xl backdrop-brightness-90 backdrop-saturate-150',\n // Border and shadow\n 'ring ring-white/5 ring-inset shadow-sm shadow-black/15',\n // Border to enhance contrast on lighter videos\n 'after:absolute after:inset-0 after:ring after:rounded-[inherit] after:ring-black/15 after:pointer-events-none after:z-10',\n // Reduced transparency for users with preference\n '[@media(prefers-reduced-transparency:reduce)]:bg-black/70 [@media(prefers-reduced-transparency:reduce)]:ring-black [@media(prefers-reduced-transparency:reduce)]:after:ring-white/20',\n // High contrast mode\n 'contrast-more:bg-black/90 contrast-more:ring-black contrast-more:after:ring-white/20'\n);\n\nconst icon = cn(\n '[grid-area:1/1] size-4.5 shrink-0',\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 bg-transparent rounded-full',\n 'text-white/90',\n 'text-shadow-2xs text-shadow-black/25',\n 'hover:bg-white/10 hover:text-white hover:no-underline',\n 'focus-visible:bg-white/10 focus-visible:text-white',\n 'focus-visible:outline-blue-500 focus-visible:outline-offset-2',\n 'aria-expanded:bg-white/10 aria-expanded:text-white'\n )\n : cn(\n 'flex items-center justify-center py-2 px-4 bg-white rounded-full',\n 'text-black font-medium',\n 'focus-visible:outline-blue-500 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 VideoSkinTailwind(props: VideoSkinProps): 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,2rem)] 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 // Inner highlight ring (::before)\n 'before:absolute before:pointer-events-none before:rounded-[inherit] before:z-10',\n 'before:inset-px before:ring-1 before:ring-inset before:ring-white/15',\n // Outer border ring (::after)\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/10',\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 <div className={cn('p-1 rounded-full', surface)}>\n <SpinnerIcon className={icon} />\n </div>\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-72 p-3 rounded-[1.75rem] text-white text-sm pointer-events-auto',\n 'group-data-[visible]/error:flex',\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 surface\n )}\n >\n <div className=\"flex flex-col gap-2 px-2 pt-2 pb-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\" className=\"opacity-70\">\n An error occurred while trying to play the video. Please try again.\n </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 // Surface\n surface,\n // Layout\n 'absolute @container/media-controls bottom-3 inset-x-3',\n 'p-[0.175rem] flex items-center gap-[0.075rem]',\n 'text-white rounded-full z-10',\n // Transitions\n 'will-change-[scale,transform,filter,opacity]',\n 'transition-[scale,transform,filter,opacity] ease-out',\n 'delay-0 duration-100 origin-bottom',\n // Hidden state\n 'not-data-[visible]:pointer-events-none not-data-[visible]:blur-[8px]',\n 'not-data-[visible]:scale-90 not-data-[visible]:opacity-0',\n 'not-data-[visible]:delay-500 not-data-[visible]:duration-300',\n // Reduced motion + hidden\n 'motion-reduce:not-data-[visible]:duration-100',\n 'motion-reduce:not-data-[visible]:blur-none',\n 'motion-reduce:not-data-[visible]:scale-100',\n // Wider container\n '@2xl/media-root:p-1 @2xl/media-root:gap-0.5'\n )}\n >\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\">{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=\"@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\">{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n\n <Time.Group className=\"@container/media-time flex items-center flex-1 gap-3 px-2\">\n <Time.Value\n type=\"current\"\n className=\"hidden @2xs/media-time:block text-shadow-2xs text-shadow-black/25 tabular-nums\"\n />\n {/* Temporary spacer /}\n <div className=\"flex-1 h-1 rounded-full bg-white/20\" />\n <Time.Value type=\"duration\" className=\"text-shadow-2xs text-shadow-black/25 tabular-nums\" />\n </Time.Group>\n\n <CaptionsButton\n render={(props, state) => (\n <Button variant=\"icon\" {...props}>\n <CaptionsButtonIcon state={state} className={icon} />\n </Button>\n )}\n />\n\n <MuteButton\n render={(props, state) => (\n <Button variant=\"icon\" {...props}>\n <MuteButtonIcon 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 </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-12 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/50 via-black/30 to-transparent',\n 'backdrop-blur-[0px] backdrop-saturate-120 backdrop-brightness-90',\n // Transitions\n 'transition-[opacity,backdrop-filter] ease-out',\n 'duration-300 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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"}
1	+ {"version":3,"file":"skin.tailwind.js","names":["Controls.Root","Time.Group","Time.Value"],"sources":["../../../../src/presets/video/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';\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 { VideoSkinProps } from './skin';\n\nconst SEEK_TIME = 10;\n\n/* ------------------------------------ Reused fragments ------------------------------------- /\n\nconst surface = cn(\n 'bg-white/10',\n 'backdrop-blur-3xl backdrop-brightness-90 backdrop-saturate-150',\n // Border and shadow\n 'ring ring-white/5 ring-inset shadow-sm shadow-black/15',\n // Border to enhance contrast on lighter videos\n 'after:absolute after:inset-0 after:ring after:rounded-[inherit] after:ring-black/15 after:pointer-events-none after:z-10',\n // Reduced transparency for users with preference\n '[@media(prefers-reduced-transparency:reduce)]:bg-black/70 [@media(prefers-reduced-transparency:reduce)]:ring-black [@media(prefers-reduced-transparency:reduce)]:after:ring-white/20',\n // High contrast mode\n 'contrast-more:bg-black/90 contrast-more:ring-black contrast-more:after:ring-white/20'\n);\n\nconst icon = cn(\n '[grid-area:1/1] size-4.5 shrink-0',\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 bg-transparent rounded-full',\n 'text-white/90',\n 'text-shadow-2xs text-shadow-black/25',\n 'hover:bg-white/10 hover:text-white hover:no-underline',\n 'focus-visible:bg-white/10 focus-visible:text-white',\n 'focus-visible:outline-blue-500 focus-visible:outline-offset-2',\n 'aria-expanded:bg-white/10 aria-expanded:text-white'\n )\n : cn(\n 'flex items-center justify-center py-2 px-4 bg-white rounded-full',\n 'text-black font-medium',\n 'focus-visible:outline-blue-500 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 VideoSkinTailwind(props: VideoSkinProps): 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,2rem)] 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 // Inner highlight ring (::before)\n 'before:absolute before:pointer-events-none before:rounded-[inherit] before:z-10',\n 'before:inset-px before:ring-1 before:ring-inset before:ring-white/15',\n // Outer border ring (::after)\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/10',\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 <div className={cn('p-1 rounded-full', surface)}>\n <SpinnerIcon className={icon} />\n </div>\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-72 p-3 rounded-[1.75rem] text-white text-sm pointer-events-auto',\n 'group-data-[visible]/error:flex',\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 surface\n )}\n >\n <div className=\"flex flex-col gap-2 px-2 pt-2 pb-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\" className=\"opacity-70\">\n An error occurred while trying to play the video. Please try again.\n </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 // Surface\n surface,\n // Layout\n 'absolute @container/media-controls bottom-3 inset-x-3',\n 'p-[0.175rem] flex items-center gap-[0.075rem]',\n 'text-white rounded-full z-10',\n // Transitions\n 'will-change-[scale,transform,filter,opacity]',\n 'transition-[scale,transform,filter,opacity] ease-out',\n 'delay-0 duration-100 origin-bottom',\n // Hidden state\n 'not-data-[visible]:pointer-events-none not-data-[visible]:blur-[8px]',\n 'not-data-[visible]:scale-90 not-data-[visible]:opacity-0',\n 'not-data-[visible]:delay-500 not-data-[visible]:duration-300',\n // Reduced motion + hidden\n 'motion-reduce:not-data-[visible]:duration-100',\n 'motion-reduce:not-data-[visible]:blur-none',\n 'motion-reduce:not-data-[visible]:scale-100',\n // Wider container\n '@2xl/media-root:p-1 @2xl/media-root:gap-0.5'\n )}\n >\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\">{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=\"@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\">{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n\n <Time.Group className=\"@container/media-time flex items-center flex-1 gap-3 px-2\">\n <Time.Value\n type=\"current\"\n className=\"hidden @2xs/media-time:block text-shadow-2xs text-shadow-black/25 tabular-nums\"\n />\n {/* Temporary spacer /}\n <div className=\"flex-1 h-1 rounded-full bg-white/20\" />\n <Time.Value type=\"duration\" className=\"text-shadow-2xs text-shadow-black/25 tabular-nums\" />\n </Time.Group>\n\n <CaptionsButton\n render={(props, state) => (\n <Button variant=\"icon\" {...props}>\n <CaptionsButtonIcon state={state} className={icon} />\n </Button>\n )}\n />\n\n <MuteButton\n render={(props, state) => (\n <Button variant=\"icon\" {...props}>\n <MuteButtonIcon 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 </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-12 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/50 via-black/30 to-transparent',\n 'backdrop-blur-[0px] backdrop-saturate-120 backdrop-brightness-90',\n // Transitions\n 'transition-[opacity,backdrop-filter] ease-out',\n 'duration-300 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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"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/react",
   "type": "module",
-  "version": "10.0.0-alpha.3",
+  "version": "10.0.0-alpha.4",
   "description": "React library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -28,30 +28,19 @@
       "default": "./dist/default/media/*/index.js"
     },
     "./*.css": "./dist/default/presets/*.css",
-    "./audio": {
-      "types": "./dist/dev/presets/audio/index.d.ts",
-      "development": "./dist/dev/presets/audio/index.js",
-      "default": "./dist/default/presets/audio/index.js"
-    },
-    "./background": {
-      "types": "./dist/dev/presets/background/index.d.ts",
-      "development": "./dist/dev/presets/background/index.js",
-      "default": "./dist/default/presets/background/index.js"
-    },
-    "./video": {
-      "types": "./dist/dev/presets/video/index.d.ts",
-      "development": "./dist/dev/presets/video/index.js",
-      "default": "./dist/default/presets/video/index.js"
+    "./*": {
+      "types": "./dist/dev/presets/*/index.d.ts",
+      "development": "./dist/dev/presets/*/index.js",
+      "default": "./dist/default/presets/*/index.js"
     }
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "@videojs/core": "10.0.0-alpha.3",
-    "@videojs/store": "10.0.0-alpha.3",
-    "@videojs/icons": "10.0.0-alpha.3",
-    "@videojs/utils": "10.0.0-alpha.3"
+    "@videojs/utils": "10.0.0-alpha.4",
+    "@videojs/store": "10.0.0-alpha.4",
+    "@videojs/core": "10.0.0-alpha.4"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
@@ -61,7 +50,8 @@
     "react-dom": "^19.2.1",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "@videojs/icons": "10.0.0-alpha.4"
   },
   "publishConfig": {
     "access": "public"