{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "video-player-chrome",
  "type": "registry:ui",
  "title": "Video player chrome",
  "description": "Video player chrome with a 16:9 stage, a centered play and pause button, a volume icon, a playback progress bar and a title. Bring your own video in React.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/icon-button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/video-player-chrome.tsx",
      "type": "registry:ui",
      "target": "components/ui/video-player-chrome.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { PauseIcon, PlayIcon, Volume2Icon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { IconButton } from \"@/components/ui/icon-button\"\n\nfunction VideoPlayerChrome({\n  title,\n  playing,\n  onToggle,\n  progress = 0,\n  className,\n}: {\n  title?: string\n  playing?: boolean\n  onToggle?: () => void\n  progress?: number\n  className?: string\n}) {\n  return (\n    <div\n      data-slot=\"video-player-chrome\"\n      className={cn(\n        \"overflow-hidden rounded-xl border border-border bg-sunken\",\n        className\n      )}\n    >\n      <div className=\"grid aspect-video place-items-center bg-fg/5\">\n        <IconButton type=\"button\" variant=\"secondary\" size=\"icon-lg\" aria-label={playing ? \"Pause\" : \"Play\"} onClick={onToggle}>\n          {playing ? <PauseIcon /> : <PlayIcon />}\n        </IconButton>\n      </div>\n      <div className=\"flex items-center gap-3 border-t border-border bg-surface px-3 py-2\">\n        <Volume2Icon className=\"size-4 text-fg-muted\" aria-hidden />\n        <div className=\"h-1 flex-1 overflow-hidden rounded-full bg-sunken\" role=\"progressbar\" aria-valuenow={progress} aria-valuemin={0} aria-valuemax={100} aria-label=\"Playback progress\">\n          <div className=\"h-full bg-accent\" style={{ width: `${progress}%` }} />\n        </div>\n        {title ? <span className=\"truncate text-xs text-fg-muted\">{title}</span> : null}\n      </div>\n    </div>\n  )\n}\nexport { VideoPlayerChrome }\n"
    }
  ]
}