"use client" import { useEffect, useState } from "react" import { Maximize2, Minimize2, Play } from "lucide-react" import { AnimatePresence, motion } from "motion/react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" interface YouTubePlayerProps { videoId: string title?: string defaultExpanded?: boolean customThumbnail?: string // Container & Layout className?: string containerClassName?: string expandedClassName?: string // Thumbnail & Media thumbnailClassName?: string thumbnailImageClassName?: string // Play Button playButtonClassName?: string playIconClassName?: string // Title titleClassName?: string // Controls controlsClassName?: string expandButtonClassName?: string // Backdrop backdropClassName?: string // Player playerClassName?: string } export function YouTubePlayer({ videoId, title, defaultExpanded = false, customThumbnail, // Styling props className, containerClassName, expandedClassName, thumbnailClassName, thumbnailImageClassName, playButtonClassName, playIconClassName, titleClassName, controlsClassName, expandButtonClassName, backdropClassName, playerClassName, }: YouTubePlayerProps) { const [expanded, setExpanded] = useState(defaultExpanded) const [playing, setPlaying] = useState(false) const [isHovered, setIsHovered] = useState(false) // Extract video ID from full URL if needed const extractVideoId = (id: string) => { if (id.includes("youtube.com") || id.includes("youtu.be")) { try { const url = new URL(id) if (id.includes("youtube.com")) { return url.searchParams.get("v") || "" } else { return url.pathname.substring(1) } } catch (error) { console.error("Invalid YouTube URL:", error) return id } } return id } const actualVideoId = extractVideoId(videoId) const handlePlay = () => { setPlaying(true) } const toggleExpand = () => { setExpanded(!expanded) } // Handle Escape key to minimize when expanded useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape" && expanded) { setExpanded(false) } } if (expanded) { document.addEventListener("keydown", handleKeyDown) } return () => { document.removeEventListener("keydown", handleKeyDown) } }, [expanded]) const getThumbnailUrl = () => { if (customThumbnail) return customThumbnail return actualVideoId ? `https://i.ytimg.com/vi/${actualVideoId}/hqdefault.jpg` : "" } return ( <> {/* Main container - always in the document flow */}

{!playing && ( <> {getThumbnailUrl() && ( )} {title && ( {title} )} )} {playing && (

Youtube Video Player

Instalação

Dependências

Registry dependencies