{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "youtube-video-player",
  "type": "registry:ui",
  "description": "YouTube video player component with custom controls and smooth animations",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/default/ui/youtube-video-player.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { Maximize2, Minimize2, Play } from \"lucide-react\"\nimport { AnimatePresence, motion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ninterface YouTubePlayerProps {\n  videoId: string\n  title?: string\n  defaultExpanded?: boolean\n  customThumbnail?: string\n\n  // Container & Layout\n  className?: string\n  containerClassName?: string\n  expandedClassName?: string\n\n  // Thumbnail & Media\n  thumbnailClassName?: string\n  thumbnailImageClassName?: string\n\n  // Play Button\n  playButtonClassName?: string\n  playIconClassName?: string\n\n  // Title\n  titleClassName?: string\n\n  // Controls\n  controlsClassName?: string\n  expandButtonClassName?: string\n\n  // Backdrop\n  backdropClassName?: string\n\n  // Player\n  playerClassName?: string\n}\n\nexport function YouTubePlayer({\n  videoId,\n  title,\n  defaultExpanded = false,\n  customThumbnail,\n\n  // Styling props\n  className,\n  containerClassName,\n  expandedClassName,\n  thumbnailClassName,\n  thumbnailImageClassName,\n  playButtonClassName,\n  playIconClassName,\n  titleClassName,\n  controlsClassName,\n  expandButtonClassName,\n  backdropClassName,\n  playerClassName,\n}: YouTubePlayerProps) {\n  const [expanded, setExpanded] = useState(defaultExpanded)\n  const [playing, setPlaying] = useState(false)\n  const [isHovered, setIsHovered] = useState(false)\n\n  // Extract video ID from full URL if needed\n  const extractVideoId = (id: string) => {\n    if (id.includes(\"youtube.com\") || id.includes(\"youtu.be\")) {\n      try {\n        const url = new URL(id)\n        if (id.includes(\"youtube.com\")) {\n          return url.searchParams.get(\"v\") || \"\"\n        } else {\n          return url.pathname.substring(1)\n        }\n      } catch (error) {\n        console.error(\"Invalid YouTube URL:\", error)\n        return id\n      }\n    }\n    return id\n  }\n\n  const actualVideoId = extractVideoId(videoId)\n\n  const handlePlay = () => {\n    setPlaying(true)\n  }\n\n  const toggleExpand = () => {\n    setExpanded(!expanded)\n  }\n\n  // Handle Escape key to minimize when expanded\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\" && expanded) {\n        setExpanded(false)\n      }\n    }\n    if (expanded) {\n      document.addEventListener(\"keydown\", handleKeyDown)\n    }\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown)\n    }\n  }, [expanded])\n\n  const getThumbnailUrl = () => {\n    if (customThumbnail) return customThumbnail\n    return actualVideoId\n      ? `https://i.ytimg.com/vi/${actualVideoId}/hqdefault.jpg`\n      : \"\"\n  }\n\n  return (\n    <>\n      {/* Main container - always in the document flow */}\n      <div\n        className={cn(\n          \"relative\",\n          expanded ? \"invisible\" : \"visible\",\n          className\n        )}\n      >\n        <motion.div\n          layoutId={`youtube-player-${videoId}`}\n          className={cn(\n            \"bg-card text-card-foreground overflow-hidden rounded-xl border shadow-lg\",\n            containerClassName\n          )}\n        >\n          <motion.div\n            layoutId={`youtube-player-content-${videoId}`}\n            className={cn(\"bg-muted relative aspect-video\", playerClassName)}\n          >\n            {!playing && (\n              <>\n                <motion.div\n                  layoutId={`youtube-player-thumbnail-container-${videoId}`}\n                  className={cn(\n                    \"from-muted to-muted/80 absolute inset-0 bg-gradient-to-br\",\n                    thumbnailClassName\n                  )}\n                >\n                  {getThumbnailUrl() && (\n                    <motion.img\n                      layoutId={`youtube-player-thumbnail-${videoId}`}\n                      src={getThumbnailUrl()}\n                      alt={title || \"Video thumbnail\"}\n                      className={cn(\n                        \"absolute inset-0 h-full w-full object-cover opacity-70\",\n                        thumbnailImageClassName\n                      )}\n                    />\n                  )}\n                </motion.div>\n\n                <motion.div\n                  layoutId={`youtube-player-content-overlay-${videoId}`}\n                  className=\"absolute inset-0 z-10 flex flex-col items-center justify-center\"\n                >\n                  <Button\n                    size=\"lg\"\n                    variant=\"secondary\"\n                    className={cn(\n                      \"border-border/20 bg-background/80 relative h-16 w-16 rounded-full border p-0 backdrop-blur-sm md:h-20 md:w-20\",\n                      \"focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none\",\n                      playButtonClassName\n                    )}\n                    onClick={handlePlay}\n                    aria-label=\"Play video\"\n                  >\n                    <Play\n                      className={cn(\n                        \"fill-primary text-primary h-6 w-6 translate-x-[2px] md:h-8 md:w-8\",\n                        playIconClassName\n                      )}\n                    />\n                  </Button>\n\n                  {title && (\n                    <motion.h3\n                      layoutId={`youtube-player-title-${videoId}`}\n                      className={cn(\n                        \"text-secondary/90 mt-4 max-w-xs text-center text-sm font-medium md:max-w-md md:text-base\",\n                        titleClassName\n                      )}\n                    >\n                      {title}\n                    </motion.h3>\n                  )}\n                </motion.div>\n              </>\n            )}\n\n            {playing && (\n              <iframe\n                src={`https://www.youtube.com/embed/${actualVideoId}?autoplay=1&rel=0&modestbranding=1&iv_load_policy=3&showinfo=0&controls=1`}\n                title={title}\n                allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                allowFullScreen\n                className=\"h-full w-full border-0\"\n              />\n            )}\n\n            {/* Controls Overlay */}\n            <YouTubePlayerControls\n              videoId={videoId}\n              expanded={expanded}\n              playing={playing}\n              isHovered={isHovered}\n              onToggleExpand={toggleExpand}\n              controlsClassName={controlsClassName}\n              expandButtonClassName={expandButtonClassName}\n            />\n          </motion.div>\n        </motion.div>\n      </div>\n\n      {/* Expanded state - fixed position */}\n      <AnimatePresence>\n        {expanded && (\n          <>\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.2 }}\n              className={cn(\n                \"bg-background/80 fixed inset-0 z-40 backdrop-blur-sm\",\n                backdropClassName\n              )}\n              onClick={toggleExpand}\n              aria-label=\"Close expanded video\"\n            />\n\n            <div className=\"pointer-events-none fixed inset-0 z-50 flex items-center justify-center\">\n              <motion.div\n                layoutId={`youtube-player-${videoId}`}\n                className={cn(\n                  \"bg-card text-card-foreground pointer-events-auto overflow-hidden rounded-lg border shadow-xl\",\n                  \"aspect-video max-h-[90vh] w-[90vw] max-w-[1200px]\",\n                  expandedClassName\n                )}\n              >\n                <motion.div\n                  layoutId={`youtube-player-content-${videoId}`}\n                  className={cn(\n                    \"bg-muted relative aspect-video\",\n                    playerClassName\n                  )}\n                >\n                  {!playing && (\n                    <>\n                      <motion.div\n                        layoutId={`youtube-player-thumbnail-container-${videoId}`}\n                        className={cn(\n                          \"from-muted to-muted/80 absolute inset-0 bg-gradient-to-br\",\n                          thumbnailClassName\n                        )}\n                      >\n                        {getThumbnailUrl() && (\n                          <motion.img\n                            layoutId={`youtube-player-thumbnail-${videoId}`}\n                            src={getThumbnailUrl()}\n                            alt={title || \"Video thumbnail\"}\n                            className={cn(\n                              \"absolute inset-0 h-full w-full object-cover opacity-70\",\n                              thumbnailImageClassName\n                            )}\n                          />\n                        )}\n                      </motion.div>\n\n                      <motion.div\n                        layoutId={`youtube-player-content-overlay-${videoId}`}\n                        className=\"absolute inset-0 z-10 flex flex-col items-center justify-center\"\n                      >\n                        <Button\n                          size=\"lg\"\n                          variant=\"secondary\"\n                          className={cn(\n                            \"border-border/20 bg-background/80 relative h-16 w-16 rounded-full border p-0 backdrop-blur-sm md:h-20 md:w-20\",\n                            \"focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none\",\n                            playButtonClassName\n                          )}\n                          onClick={handlePlay}\n                          aria-label=\"Play video\"\n                        >\n                          <Play\n                            className={cn(\n                              \"fill-primary text-primary h-6 w-6 translate-x-[2px] md:h-8 md:w-8\",\n                              playIconClassName\n                            )}\n                          />\n                        </Button>\n\n                        {title && (\n                          <motion.h3\n                            layoutId={`youtube-player-title-${videoId}`}\n                            className={cn(\n                              \"text-foreground/90 mt-4 max-w-xs text-center text-sm font-medium md:max-w-md md:text-base\",\n                              titleClassName\n                            )}\n                          >\n                            {title}\n                          </motion.h3>\n                        )}\n                      </motion.div>\n                    </>\n                  )}\n\n                  {playing && (\n                    <iframe\n                      src={`https://www.youtube.com/embed/${actualVideoId}?autoplay=1&rel=0&modestbranding=1&iv_load_policy=3&showinfo=0&controls=1`}\n                      title={title}\n                      allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                      allowFullScreen\n                      className=\"h-full w-full border-0\"\n                    />\n                  )}\n\n                  {/* Controls Overlay */}\n                  <YouTubePlayerControls\n                    videoId={videoId}\n                    expanded={expanded}\n                    playing={playing}\n                    isHovered={isHovered}\n                    onToggleExpand={toggleExpand}\n                    controlsClassName={controlsClassName}\n                    expandButtonClassName={expandButtonClassName}\n                  />\n                </motion.div>\n              </motion.div>\n            </div>\n          </>\n        )}\n      </AnimatePresence>\n    </>\n  )\n}\n\n// Controls Component\ninterface YouTubePlayerControlsProps {\n  videoId: string\n  expanded: boolean\n  playing: boolean\n  isHovered: boolean\n  onToggleExpand: () => void\n  controlsClassName?: string\n  expandButtonClassName?: string\n}\n\nfunction YouTubePlayerControls({\n  videoId,\n  expanded,\n  playing,\n  isHovered,\n  onToggleExpand,\n  controlsClassName,\n  expandButtonClassName,\n}: YouTubePlayerControlsProps) {\n  const shouldShow = !playing || isHovered || expanded\n\n  return (\n    <AnimatePresence>\n      {shouldShow && (\n        <motion.div\n          layoutId={`youtube-player-controls-${videoId}`}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          transition={{ duration: 0.2 }}\n          className={cn(\"absolute top-2 right-2 z-20\", controlsClassName)}\n        >\n          <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>\n            <Button\n              variant=\"secondary\"\n              size=\"icon\"\n              onClick={onToggleExpand}\n              className={cn(\n                \"bg-background/40 hover:bg-background/60 focus-visible:ring-ring/50 h-8 w-8 rounded-full backdrop-blur-sm md:h-9 md:w-9\",\n                expandButtonClassName\n              )}\n              aria-label={expanded ? \"Minimize video\" : \"Maximize video\"}\n            >\n              <motion.div\n                animate={{ rotate: expanded ? 180 : 0 }}\n                transition={{ type: \"spring\", stiffness: 300, damping: 20 }}\n              >\n                {expanded ? (\n                  <Minimize2 className=\"h-4 w-4 md:h-5 md:w-5\" />\n                ) : (\n                  <Maximize2 className=\"h-4 w-4 md:h-5 md:w-5\" />\n                )}\n              </motion.div>\n            </Button>\n          </motion.div>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  )\n}\n\n// Export sub-components for advanced customization\nexport { YouTubePlayerControls }\n",
      "type": "registry:ui"
    }
  ]
}