{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "live-audio",
  "title": "Default Live Audio Skin",
  "description": "A complete live audio skin with play, live-edge, volume, error, and keyboard feedback controls.",
  "dependencies": [
    "@videojs/react@10.0.0-beta.32",
    "react"
  ],
  "registryDependencies": [
    "@videojs/_button-tooltip",
    "@videojs/_resolve-class-name",
    "@videojs/_style-theme",
    "@videojs/buffering-indicator",
    "@videojs/button",
    "@videojs/container",
    "@videojs/live-button",
    "@videojs/play-button",
    "@videojs/status-announcer",
    "@videojs/volume-popover"
  ],
  "files": [
    {
      "path": "skins/files/live-audio/skins/live-audio/controls.tsx",
      "content": "/** @jsxImportSource react */\n\nimport { Controls, Tooltip } from '@videojs/react';\n\nimport { cn } from '@/components/videojs/lib/resolve-class-name';\nimport { LiveButton } from '@/components/videojs/ui/live-button';\nimport { VolumePopover } from '@/components/videojs/ui/volume-popover';\n\nimport { AudioPlayButton } from './play-button';\n\nexport function DefaultLiveAudioControls() {\n  return (\n    <Controls.Root visibility=\"always\">\n      <Controls.Content\n        className={cn(\n          'audio-controls',\n          'relative z-20 flex items-center rounded-media-controls bg-media-controls p-1 text-media-controls-foreground text-shadow-media',\n          'surface-media after:surface-media-inset'\n        )}\n      >\n        <Tooltip.Provider>\n          <Controls.Group className={'flex items-center gap-px'}>\n            <AudioPlayButton />\n            <LiveButton />\n          </Controls.Group>\n\n          <div aria-hidden=\"true\" className={'flex-1'} />\n\n          <Controls.Group className={'flex items-center gap-px'}>\n            <VolumePopover boundary=\"viewport\" />\n          </Controls.Group>\n        </Tooltip.Provider>\n      </Controls.Content>\n    </Controls.Root>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/skins/live-audio/controls.tsx"
    },
    {
      "path": "skins/files/live-audio/skins/live-audio/error-dialog.tsx",
      "content": "/** @jsxImportSource react */\n\nimport { ErrorDialog } from '@videojs/react';\n\nimport { Button } from '@/components/videojs/ui/button';\n\nexport function AudioErrorDialog() {\n  return (\n    <ErrorDialog.Root>\n      <ErrorDialog.Backdrop className={'hidden'} />\n      <ErrorDialog.Popup\n        className={\n          'absolute inset-0 z-50 flex h-full max-h-none w-full translate-none flex-row items-center rounded-media-pill py-0 pe-1 outline-hidden not-data-open:hidden bg-media-background text-media-controls-foreground backdrop-filter-media-dialog transition-[opacity,filter] duration-media-slower ease-out media-transitioning:blur-media-hidden-popup media-transitioning:opacity-0 gap-3 px-5'\n        }\n      >\n        <div className={'flex min-h-0 flex-1 flex-row items-center gap-2 overflow-visible'}>\n          <ErrorDialog.Title className={'m-0 text-media font-semibold leading-tight'} />\n          <ErrorDialog.Description className={'m-0 opacity-70 wrap-anywhere'} />\n        </div>\n        <div className={'flex shrink-0 gap-2'}>\n          <ErrorDialog.Close\n            render={<Button />}\n            className={\n              'h-media-control w-auto flex-none bg-media-primary! px-3 font-medium text-media-primary-foreground!'\n            }\n          />\n        </div>\n      </ErrorDialog.Popup>\n    </ErrorDialog.Root>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/skins/live-audio/error-dialog.tsx"
    },
    {
      "path": "skins/files/live-audio/skins/live-audio/play-button.tsx",
      "content": "/** @jsxImportSource react */\n\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/components/videojs/lib/resolve-class-name';\nimport { BufferingIndicator } from '@/components/videojs/ui/buffering-indicator';\nimport { ButtonTooltip } from '@/components/videojs/ui/button-tooltip';\nimport { PlayButton } from '@/components/videojs/ui/play-button';\n\nexport type AudioPlayButtonProps = Omit<ComponentProps<'div'>, 'children'>;\n\nexport function AudioPlayButton({ className, ...props }: AudioPlayButtonProps = {}) {\n  return (\n    <div className={cn('relative inline-flex', className)} {...props}>\n      <BufferingIndicator\n        className={'z-20 rounded-media-control text-inherit! before:hidden data-visible:bg-media-controls'}\n      />\n      <ButtonTooltip boundary=\"viewport\" side=\"top\">\n        <PlayButton />\n      </ButtonTooltip>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/skins/live-audio/play-button.tsx"
    },
    {
      "path": "skins/files/live-audio/skins/live-audio/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 { Container } from '@/components/videojs/ui/container';\nimport { StatusAnnouncer } from '@/components/videojs/ui/status-announcer';\n\nimport { LivePlaybackHotkeys } from '../shared/live-playback-hotkeys';\nimport { DefaultLiveAudioControls } from './controls';\nimport { AudioErrorDialog } from './error-dialog';\n\nexport interface DefaultLiveAudioSkinProps extends Omit<NonNullable<ComponentProps<typeof Container>>, 'children'> {\n  children?: ReactNode;\n}\n\nexport function DefaultLiveAudioSkin({ children, className, ...props }: DefaultLiveAudioSkinProps = {}) {\n  return (\n    <Container\n      className={cn('h-auto! overflow-visible! bg-transparent! [container-type:inline-size]! after:hidden', className)}\n      data-theme=\"default\"\n      data-preset=\"live-audio\"\n      {...props}\n    >\n      {children}\n      <AudioErrorDialog />\n      <DefaultLiveAudioControls />\n      <LivePlaybackHotkeys />\n      <StatusAnnouncer />\n    </Container>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/skins/live-audio/skin.tsx"
    },
    {
      "path": "skins/files/live-audio/skins/shared/live-playback-hotkeys.tsx",
      "content": "/** @jsxImportSource react */\n\nimport { Hotkey } from '@videojs/react';\n\nexport interface LivePlaybackHotkeysProps {\n  disabled?: boolean | undefined;\n}\n\nexport function LivePlaybackHotkeys({ disabled = false }: LivePlaybackHotkeysProps = {}) {\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=\"ArrowUp\" action=\"volumeStep\" />\n      <Hotkey disabled={disabled} keys=\"ArrowDown\" action=\"volumeStep\" />\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/videojs/skins/shared/live-playback-hotkeys.tsx"
    }
  ],
  "meta": {
    "framework": "react",
    "style": "tailwind",
    "role": "skin",
    "styling": "tailwind",
    "preset": "live-audio",
    "media": "audio",
    "theme": "default",
    "public": true
  },
  "docs": "Requires `@videojs/react@10.0.0-beta.32`, which is installed with this item.\n\n```tsx\nimport { HlsAudio } from '@videojs/react/media/hls-audio';\nimport { LiveAudioPlayer } from '@videojs/react/live-audio';\n\nimport { DefaultLiveAudioSkin } from '@/components/videojs/skins/live-audio/skin';\n\nexport function Player({ src }: { src: string }) {\n  return (\n    <LiveAudioPlayer>\n      <DefaultLiveAudioSkin className=\"aspect-video w-full\">\n        <HlsAudio src={src} />\n      </DefaultLiveAudioSkin>\n    </LiveAudioPlayer>\n  );\n}\n```",
  "categories": [
    "media",
    "skins",
    "live-audio"
  ],
  "type": "registry:block"
}