{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "video",
  "title": "Default Video Skin",
  "description": "A complete on-demand video skin with responsive controls, settings, feedback, and input controls.",
  "dependencies": [
    "@videojs/react@10.0.0-beta.32",
    "react"
  ],
  "registryDependencies": [
    "@videojs/_button-tooltip",
    "@videojs/_resolve-class-name",
    "@videojs/_style-theme",
    "@videojs/airplay-button",
    "@videojs/audio-track-menu",
    "@videojs/buffering-indicator",
    "@videojs/captions-button",
    "@videojs/captions-submenu",
    "@videojs/cast-button",
    "@videojs/container",
    "@videojs/error-dialog",
    "@videojs/fullscreen-button",
    "@videojs/pip-button",
    "@videojs/play-button",
    "@videojs/playback-rate-submenu",
    "@videojs/poster",
    "@videojs/quality-menu",
    "@videojs/seek-indicator",
    "@videojs/settings-menu",
    "@videojs/status-announcer",
    "@videojs/status-indicator",
    "@videojs/time-slider",
    "@videojs/volume-indicator",
    "@videojs/volume-popover"
  ],
  "files": [
    {
      "path": "skins/files/video/skins/shared/playback-hotkeys.tsx",
      "content": "/** @jsxImportSource react */\n\nimport { Hotkey } from '@videojs/react';\n\nexport interface PlaybackHotkeysProps {\n  disabled?: boolean | undefined;\n}\n\nexport function PlaybackHotkeys({ disabled = false }: PlaybackHotkeysProps = {}) {\n  return (\n    <>\n      <Hotkey disabled={disabled} keys=\"Space\" action=\"togglePaused\" />\n      <Hotkey disabled={disabled} keys=\"k\" action=\"togglePaused\" />\n      <Hotkey disabled={disabled} keys=\"m\" action=\"toggleMuted\" />\n      <Hotkey disabled={disabled} keys=\"ArrowRight\" action=\"seekStep\" />\n      <Hotkey disabled={disabled} keys=\"ArrowLeft\" action=\"seekStep\" />\n      <Hotkey disabled={disabled} keys=\"l\" action=\"seekStep\" />\n      <Hotkey disabled={disabled} keys=\"j\" action=\"seekStep\" />\n      <Hotkey disabled={disabled} keys=\"ArrowUp\" action=\"volumeStep\" />\n      <Hotkey disabled={disabled} keys=\"ArrowDown\" action=\"volumeStep\" />\n      <Hotkey disabled={disabled} keys=\"0-9\" action=\"seekToPercent\" />\n      <Hotkey disabled={disabled} keys=\"Home\" action=\"seekToPercent\" value={0} />\n      <Hotkey disabled={disabled} keys=\"End\" action=\"seekToPercent\" value={100} />\n      <Hotkey disabled={disabled} keys=\">\" action=\"speedUp\" />\n      <Hotkey disabled={disabled} keys=\"<\" action=\"speedDown\" />\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/skins/shared/playback-hotkeys.tsx"
    },
    {
      "path": "skins/files/video/skins/video/controls.tsx",
      "content": "/** @jsxImportSource react */\n\nimport { Controls, Time, Tooltip } from '@videojs/react';\n\nimport { cn } from '@/components/videojs/lib/resolve-class-name';\nimport { AirPlayButton } from '@/components/videojs/ui/airplay-button';\nimport { ButtonTooltip } from '@/components/videojs/ui/button-tooltip';\nimport { CaptionsButton } from '@/components/videojs/ui/captions-button';\nimport { CastButton } from '@/components/videojs/ui/cast-button';\nimport { FullscreenButton } from '@/components/videojs/ui/fullscreen-button';\nimport { PiPButton } from '@/components/videojs/ui/pip-button';\nimport { PlayButton } from '@/components/videojs/ui/play-button';\nimport { TimeSlider } from '@/components/videojs/ui/time-slider';\nimport { VolumePopover } from '@/components/videojs/ui/volume-popover';\n\nimport { VideoSettingsMenu } from './settings-menu';\n\nexport function DefaultVideoControls() {\n  return (\n    <Controls.Root>\n      <Controls.Backdrop\n        className={\n          'pointer-events-none absolute inset-0 z-10 rounded-[inherit] bg-(image:--media-controls-gradient) transition-opacity duration-media-controls ease-out not-data-visible:opacity-0'\n        }\n      />\n      <Controls.Content\n        className={cn(\n          'video-controls',\n          'group/controls text-media-controls-foreground text-shadow-media',\n          'duration-media-controls-half ease-out',\n          'contents p-1 transition-[filter,opacity,scale,translate]',\n          'media-compact:absolute media-compact:inset-x-2 media-compact:bottom-2 media-compact:z-10',\n          'media-compact:flex media-compact:items-center media-compact:rounded-media-controls',\n          'media-compact:bg-media-popover media-compact:text-media-popover-foreground',\n          'media-compact:surface-media media-compact:after:surface-media-inset',\n          'media-wide:inset-x-3 media-wide:bottom-3',\n          'media-compact:not-data-visible:pointer-events-none media-compact:not-data-visible:opacity-0',\n          'media-compact:not-data-visible:scale-media-hidden media-compact:not-data-visible:translate-y-media-hidden-offset',\n          'media-compact:pointer-fine:not-data-visible:blur-media-hidden',\n          'media-compact:not-data-visible:duration-media-controls'\n        )}\n      >\n        <Tooltip.Provider>\n          <Controls.Group\n            className={\n              'absolute inset-x-2 bottom-2 z-10 flex origin-bottom items-center rounded-media-controls p-1 media-max-compact:bg-media-popover media-max-compact:text-media-popover-foreground media-max-compact:surface-media media-max-compact:after:surface-media-inset media-compact:contents media-max-compact:group-[:not([data-visible])]/controls:pointer-events-none media-max-compact:group-[:not([data-visible])]/controls:opacity-0 media-max-compact:group-[:not([data-visible])]/controls:scale-media-hidden media-max-compact:pointer-fine:group-[:not([data-visible])]/controls:blur-media-hidden transition-[filter,opacity,scale,translate] duration-media-controls-half ease-out media-max-compact:group-[:not([data-visible])]/controls:duration-media-controls media-max-compact:group-[:not([data-visible])]/controls:translate-y-media-hidden-offset'\n            }\n          >\n            <ButtonTooltip side=\"top\">\n              <PlayButton />\n            </ButtonTooltip>\n            <VolumePopover className={'ms-px'} />\n\n            <Controls.Group\n              className={'@container/media-time flex flex-1 items-center gap-2.5 px-2 media-compact:px-3'}\n            >\n              <Time.Value className={cn('tabular-nums', '@max-[16rem]/media-time:hidden')} type=\"current\" />\n              <TimeSlider />\n              <Time.Value\n                className={cn(\n                  'cursor-pointer rounded-sm tabular-nums focus-ring-media',\n                  'transition-[outline-color,outline-offset] duration-media-fast ease-out',\n                  'focus-visible:outline-media-ring focus-visible:outline-offset-2',\n                  '@max-[16rem]/media-time:hidden'\n                )}\n                type=\"remaining\"\n                toggle\n              />\n            </Controls.Group>\n\n            <ButtonTooltip side=\"top\">\n              <CaptionsButton className={'media-max-compact:hidden'} />\n            </ButtonTooltip>\n            <VideoSettingsMenu className={'media-compact:ms-px'} />\n          </Controls.Group>\n\n          <Controls.Group\n            className={\n              'absolute top-2 right-2 z-10 flex origin-top items-center gap-px rounded-media-controls p-1 media-max-compact:bg-media-popover media-max-compact:text-media-popover-foreground media-max-compact:surface-media media-max-compact:after:surface-media-inset media-compact:static media-compact:p-0 media-max-compact:group-[:not([data-visible])]/controls:pointer-events-none media-max-compact:group-[:not([data-visible])]/controls:opacity-0 media-max-compact:group-[:not([data-visible])]/controls:scale-media-hidden media-max-compact:pointer-fine:group-[:not([data-visible])]/controls:blur-media-hidden transition-[filter,opacity,scale,translate] duration-media-controls-half ease-out media-max-compact:group-[:not([data-visible])]/controls:duration-media-controls media-max-compact:group-[:not([data-visible])]/controls:-translate-y-media-hidden-offset'\n            }\n          >\n            <ButtonTooltip side=\"top\">\n              <CastButton />\n            </ButtonTooltip>\n            <ButtonTooltip side=\"top\">\n              <AirPlayButton />\n            </ButtonTooltip>\n            <ButtonTooltip side=\"top\">\n              <PiPButton />\n            </ButtonTooltip>\n            <ButtonTooltip side=\"top\">\n              <FullscreenButton />\n            </ButtonTooltip>\n          </Controls.Group>\n        </Tooltip.Provider>\n      </Controls.Content>\n    </Controls.Root>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/skins/video/controls.tsx"
    },
    {
      "path": "skins/files/video/skins/video/gestures.tsx",
      "content": "/** @jsxImportSource react */\n\nimport { Gesture } from '@videojs/react';\n\nexport interface VideoGesturesProps {\n  disabled?: boolean | undefined;\n}\n\nexport function VideoGestures({ disabled = false }: VideoGesturesProps = {}) {\n  return (\n    <>\n      <Gesture disabled={disabled} type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\" />\n      <Gesture disabled={disabled} type=\"tap\" action=\"toggleControls\" pointer=\"touch\" />\n      <Gesture disabled={disabled} type=\"doubletap\" action=\"seekStep\" region=\"left\" />\n      <Gesture disabled={disabled} type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\" />\n      <Gesture disabled={disabled} type=\"doubletap\" action=\"seekStep\" region=\"right\" />\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/skins/video/gestures.tsx"
    },
    {
      "path": "skins/files/video/skins/video/hotkeys.tsx",
      "content": "/** @jsxImportSource react */\n\nimport { Hotkey } from '@videojs/react';\n\nimport { PlaybackHotkeys } from '../shared/playback-hotkeys';\n\nexport interface VideoHotkeysProps {\n  disabled?: boolean | undefined;\n}\n\nexport function VideoHotkeys({ disabled = false }: VideoHotkeysProps = {}) {\n  return (\n    <>\n      <PlaybackHotkeys disabled={disabled} />\n      <Hotkey disabled={disabled} keys=\"f\" action=\"toggleFullscreen\" />\n      <Hotkey disabled={disabled} keys=\"c\" action=\"toggleSubtitles\" />\n      <Hotkey disabled={disabled} keys=\"i\" action=\"togglePictureInPicture\" />\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/skins/video/hotkeys.tsx"
    },
    {
      "path": "skins/files/video/skins/video/settings-menu.tsx",
      "content": "/** @jsxImportSource react */\n\nimport type { ComponentProps } from 'react';\n\nimport { AudioTrackMenu } from '@/components/videojs/ui/audio-track-menu';\nimport { CaptionsSubmenu } from '@/components/videojs/ui/captions-submenu';\nimport { PlaybackRateSubmenu } from '@/components/videojs/ui/playback-rate-submenu';\nimport { QualityMenu } from '@/components/videojs/ui/quality-menu';\nimport { SettingsMenu } from '@/components/videojs/ui/settings-menu';\n\nexport type VideoSettingsMenuProps = Omit<NonNullable<ComponentProps<typeof SettingsMenu>>, 'children'>;\n\nexport function VideoSettingsMenu(props: VideoSettingsMenuProps = {}) {\n  return (\n    <SettingsMenu {...props}>\n      <QualityMenu />\n      <AudioTrackMenu />\n      <PlaybackRateSubmenu />\n      <CaptionsSubmenu />\n    </SettingsMenu>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/skins/video/settings-menu.tsx"
    },
    {
      "path": "skins/files/video/skins/video/skin.tsx",
      "content": "/** @jsxImportSource react */\n\nimport '../../styles/theme.css';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '@/components/videojs/lib/resolve-class-name';\nimport { BufferingIndicator } from '@/components/videojs/ui/buffering-indicator';\nimport { Container } from '@/components/videojs/ui/container';\nimport { ErrorDialog } from '@/components/videojs/ui/error-dialog';\nimport { Poster } from '@/components/videojs/ui/poster';\n\nimport { DefaultVideoControls } from './controls';\nimport { VideoGestures } from './gestures';\nimport { VideoHotkeys } from './hotkeys';\nimport { VideoStatusIndicators } from './status-indicators';\n\nexport interface DefaultVideoSkinProps extends Omit<NonNullable<ComponentProps<typeof Container>>, 'children'> {\n  children?: ReactNode;\n  renderPoster?: NonNullable<ComponentProps<typeof Poster>>['children'];\n}\n\nexport function DefaultVideoSkin({ children, className, renderPoster, ...props }: DefaultVideoSkinProps = {}) {\n  return (\n    <Container\n      className={cn('pointer-fine:not-data-controls-visible:cursor-none', className)}\n      data-theme=\"default\"\n      data-preset=\"video\"\n      {...props}\n    >\n      {children}\n      <Poster>{renderPoster}</Poster>\n      <BufferingIndicator />\n      <ErrorDialog />\n\n      <DefaultVideoControls />\n\n      <VideoHotkeys />\n      <VideoGestures />\n      <VideoStatusIndicators />\n    </Container>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/skins/video/skin.tsx"
    },
    {
      "path": "skins/files/video/skins/video/status-indicators.tsx",
      "content": "/** @jsxImportSource react */\n\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/components/videojs/lib/resolve-class-name';\nimport { SeekIndicator } from '@/components/videojs/ui/seek-indicator';\nimport { StatusAnnouncer } from '@/components/videojs/ui/status-announcer';\nimport { PlaybackStatusIndicator, StatusIndicator } from '@/components/videojs/ui/status-indicator';\nimport { VolumeIndicator } from '@/components/videojs/ui/volume-indicator';\n\nexport type VideoStatusIndicatorsProps = Omit<ComponentProps<'div'>, 'children'>;\n\nexport function VideoStatusIndicators({ className, ...props }: VideoStatusIndicatorsProps = {}) {\n  return (\n    <>\n      <StatusAnnouncer />\n      <div\n        className={cn(\n          'pointer-events-none absolute inset-0 grid grid-cols-3 items-center justify-items-center text-media-controls-foreground',\n          className\n        )}\n        {...props}\n      >\n        <VolumeIndicator />\n        <StatusIndicator />\n        <SeekIndicator />\n        <PlaybackStatusIndicator />\n      </div>\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/skins/video/status-indicators.tsx"
    }
  ],
  "meta": {
    "framework": "react",
    "style": "tailwind",
    "role": "skin",
    "styling": "tailwind",
    "preset": "video",
    "media": "video",
    "theme": "default",
    "public": true
  },
  "docs": "Requires `@videojs/react@10.0.0-beta.32`, which is installed with this item.\n\n```tsx\nimport { HlsJsVideo } from '@videojs/react/media/hlsjs-video';\nimport { VideoPlayer } from '@videojs/react/video';\n\nimport { DefaultVideoSkin } from '@/components/videojs/skins/video/skin';\n\nexport function Player({ src }: { src: string }) {\n  return (\n    <VideoPlayer>\n      <DefaultVideoSkin className=\"aspect-video w-full\">\n        <HlsJsVideo src={src} />\n      </DefaultVideoSkin>\n    </VideoPlayer>\n  );\n}\n```",
  "categories": [
    "media",
    "skins",
    "video"
  ],
  "type": "registry:block"
}