52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T3599,"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 && (