'use client' import React, { useState, useRef, useEffect } from 'react' import Image from 'next/image' import { motion, AnimatePresence } from 'framer-motion' import { Play, X } from 'lucide-react' interface ThumbnailButtonProps { videoUrl?: string youtubeId?: string thumbnailUrl?: string title?: string className?: string } const DEFAULT_VIDEO_FALLBACK_URL = 'https://me7aitdbxq.ufs.sh/f/2wsMIGDMQRdYqvMy4kaWD2STgaJv9iAfGNzF5E06KYRULuoj' const DEFAULT_VIDEO_THUMBNAIL = 'https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg' const getYouTubeThumbnail = (id: string) => `https://img.youtube.com/vi/${id}/maxresdefault.jpg` const getYouTubeEmbedUrl = (id: string) => `https://www.youtube.com/embed/${id}?autoplay=1&rel=0` const ThumbnailButton: React.FC = ({ videoUrl, youtubeId, thumbnailUrl, title = 'Play Video', className = '' }) => { const [isModalOpen, setIsModalOpen] = useState(false) const [buttonRect, setButtonRect] = useState(null) const buttonRef = useRef(null) const isYouTube = !!youtubeId const finalThumbnail = thumbnailUrl || (isYouTube ? getYouTubeThumbnail(youtubeId!) : DEFAULT_VIDEO_THUMBNAIL) const finalVideoUrl = isYouTube && youtubeId ? getYouTubeEmbedUrl(youtubeId) : videoUrl || DEFAULT_VIDEO_FALLBACK_URL const handleOpenModal = () => { if (buttonRef.current) { setButtonRect(buttonRef.current.getBoundingClientRect()) } setIsModalOpen(true) } const handleCloseModal = () => setIsModalOpen(false) const getTransformOrigin = () => { if (!buttonRect) return 'center center' const centerX = buttonRect.left + buttonRect.width / 2 const centerY = buttonRect.top + buttonRect.height / 2 return `${centerX}px ${centerY}px` } useEffect(() => { const handleEsc = (e: KeyboardEvent) => { if (e.key === 'Escape') handleCloseModal() } if (isModalOpen) { document.addEventListener('keydown', handleEsc) } return () => document.removeEventListener('keydown', handleEsc) }, [isModalOpen]) return ( <>

{/* Thumbnail Image */}

{/* Play Icon Overlay */}

{/* YouTube Badge */} {isYouTube && (

)}

{/* Button Text */}

{title}

{/* Modal */} {isModalOpen && (