{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "video-embed",
  "type": "registry:component",
  "title": "Video Embed",
  "description": "Responsive video embed for YouTube and other providers.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/video-embed/video-embed.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { Play, Video } from \"lucide-react\";\n\nimport { cn } from \"@vllnt/ui\";\n\nexport type VideoEmbedProps = {\n  aspectRatio?: \"1/1\" | \"4/3\" | \"16/9\";\n  src: string;\n  thumbnail?: string;\n  title: string;\n  type?: \"custom\" | \"vimeo\" | \"youtube\";\n};\n\nfunction getEmbedUrl(source: string, type: string): string {\n  if (type === \"youtube\") {\n    const videoId =\n      /(?:youtube\\.com\\/(?:watch\\?v=|embed\\/)|youtu\\.be\\/)([^&?]+)/.exec(\n        source,\n      )?.[1];\n    return videoId ? `https://www.youtube.com/embed/${videoId}` : source;\n  }\n  if (type === \"vimeo\") {\n    const videoId = /vimeo\\.com\\/(\\d+)/.exec(source)?.[1];\n    return videoId ? `https://player.vimeo.com/video/${videoId}` : source;\n  }\n  return source;\n}\n\nexport function VideoEmbed({\n  aspectRatio = \"16/9\",\n  src,\n  thumbnail,\n  title,\n  type = \"youtube\",\n}: VideoEmbedProps) {\n  const [isPlaying, setIsPlaying] = useState(false);\n\n  const embedUrl = getEmbedUrl(src, type);\n  const aspectClass =\n    aspectRatio === \"16/9\"\n      ? \"aspect-video\"\n      : aspectRatio === \"4/3\"\n        ? \"aspect-[4/3]\"\n        : \"aspect-square\";\n\n  return (\n    <div className=\"my-6\">\n      <div\n        className={cn(\n          \"relative rounded-lg overflow-hidden bg-muted border\",\n          aspectClass,\n        )}\n      >\n        {isPlaying ? (\n          <iframe\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n            className=\"absolute inset-0 w-full h-full\"\n            src={`${embedUrl}?autoplay=1`}\n            title={title}\n          />\n        ) : (\n          <button\n            className=\"absolute inset-0 w-full h-full flex items-center justify-center group\"\n            onClick={() => {\n              setIsPlaying(true);\n            }}\n            type=\"button\"\n          >\n            {thumbnail ? (\n              <img\n                alt={title}\n                className=\"absolute inset-0 w-full h-full object-cover\"\n                src={thumbnail}\n              />\n            ) : (\n              <div className=\"absolute inset-0 bg-gradient-to-br from-muted to-muted-foreground/20\" />\n            )}\n            <div className=\"relative z-10 flex size-16 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-transform group-hover:scale-110\">\n              <Play className=\"size-6 ml-1\" />\n            </div>\n          </button>\n        )}\n      </div>\n      <p className=\"mt-2 text-sm text-center text-muted-foreground flex items-center justify-center gap-1\">\n        <Video className=\"size-4\" />\n        {title}\n      </p>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}