"use client" import React, { useEffect, useRef, useState } from 'react' import { motion, AnimatePresence } from 'framer-motion' import { X } from 'lucide-react'; // MediaItemType defines the structure of a media item interface MediaItemType { id: number; type: string; title: string; desc: string; url: string; span: string; } // MediaItem component renders either a video or image based on item.type const MediaItem = ({ item, className, onClick }: { item: MediaItemType, className?: string, onClick?: () => void }) => { const videoRef = useRef(null); // Reference for video element const [isInView, setIsInView] = useState(false); // To track if video is in the viewport const [isBuffering, setIsBuffering] = useState(true); // To track if video is buffering // Intersection Observer to detect if video is in view and play/pause accordingly useEffect(() => { const options = { root: null, rootMargin: '50px', threshold: 0.1 }; const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { setIsInView(entry.isIntersecting); // Set isInView to true if the video is in view }); }, options); if (videoRef.current) { observer.observe(videoRef.current); // Start observing the video element } return () => { if (videoRef.current) { observer.unobserve(videoRef.current); // Clean up observer when component unmounts } }; }, []); // Handle video play/pause based on whether the video is in view or not useEffect(() => { let mounted = true; const handleVideoPlay = async () => { if (!videoRef.current || !isInView || !mounted) return; // Don't play if video is not in view or component is unmounted try { if (videoRef.current.readyState >= 3) { setIsBuffering(false); await videoRef.current.play(); // Play the video if it's ready } else { setIsBuffering(true); await new Promise((resolve) => { if (videoRef.current) { videoRef.current.oncanplay = resolve; // Wait until the video can start playing } }); if (mounted) { setIsBuffering(false); await videoRef.current.play(); } } } catch (error) { console.warn("Video playback failed:", error); } }; if (isInView) { handleVideoPlay(); } else if (videoRef.current) { videoRef.current.pause(); } return () => { mounted = false; if (videoRef.current) { videoRef.current.pause(); videoRef.current.removeAttribute('src'); videoRef.current.load(); } }; }, [isInView]); // Render either a video or image based on item.type if (item.type === 'video') { return (

{isBuffering && (

)}

); } return ( {item.title}

); }; // GalleryModal component displays the selected media item in a modal interface GalleryModalProps { selectedItem: MediaItemType; isOpen: boolean; onClose: () => void; setSelectedItem: (item: MediaItemType | null) => void; mediaItems: MediaItemType[]; // List of media items to display in the modal } const GalleryModal = ({ selectedItem, isOpen, onClose, setSelectedItem, mediaItems }: GalleryModalProps) => { const [dockPosition, setDockPosition] = useState({ x: 0, y: 0 }); // Track the position of the dockable panel if (!isOpen) return null; // Return null if the modal is not open return ( <> {/* Main Modal */} {/* Main Content */}

{selectedItem.title}

{selectedItem.desc}

{/* Close Button */} {/* Draggable Dock */} { setDockPosition(prev => ({ x: prev.x + info.offset.x, y: prev.y + info.offset.y })); }} className="fixed z-50 left-1/2 bottom-4 -translate-x-1/2 touch-none" >

{mediaItems.map((item, index) => ( { e.stopPropagation(); setSelectedItem(item); }} style={{ zIndex: selectedItem.id === item.id ? 30 : mediaItems.length - index, }} className={` relative group w-8 h-8 sm:w-9 sm:h-9 md:w-10 md:h-10 flex-shrink-0 rounded-lg overflow-hidden cursor-pointer hover:z-20 ${selectedItem.id === item.id ? 'ring-2 ring-white/70 shadow-lg' : 'hover:ring-2 hover:ring-white/30'} `} initial={{ rotate: index % 2 === 0 ? -15 : 15 }} animate={{ scale: selectedItem.id === item.id ? 1.2 : 1, rotate: selectedItem.id === item.id ? 0 : index % 2 === 0 ? -15 : 15, y: selectedItem.id === item.id ? -8 : 0, }} whileHover={{ scale: 1.3, rotate: 0, y: -10, transition: { type: "spring", stiffness: 400, damping: 25 } }} > setSelectedItem(item)} />

{selectedItem.id === item.id && ( )} ))}

); }; interface InteractiveBentoGalleryProps { mediaItems: MediaItemType[] title: string description: string } const InteractiveBentoGallery: React.FC = ({ mediaItems, title, description }) => { const [selectedItem, setSelectedItem] = useState(null); const [items, setItems] = useState(mediaItems); const [isDragging, setIsDragging] = useState(false); return (

{title} {description}

{selectedItem ? ( setSelectedItem(null)} setSelectedItem={setSelectedItem} mediaItems={items} /> ) : ( {items.map((item, index) => ( !isDragging && setSelectedItem(item)} variants={{ hidden: { y: 50, scale: 0.9, opacity: 0 }, visible: { y: 0, scale: 1, opacity: 1, transition: { type: "spring", stiffness: 350, damping: 25, delay: index * 0.05 } } }} whileHover={{ scale: 1.02 }} drag dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }} dragElastic={1} onDragStart={() => setIsDragging(true)} onDragEnd={(e, info) => { setIsDragging(false); const moveDistance = info.offset.x + info.offset.y; if (Math.abs(moveDistance) > 50) { const newItems = [...items]; const draggedItem = newItems[index]; const targetIndex = moveDistance > 0 ? Math.min(index + 1, items.length - 1) : Math.max(index - 1, 0); newItems.splice(index, 1); newItems.splice(targetIndex, 0, draggedItem); setItems(newItems); } }} > !isDragging && setSelectedItem(item)} />

{item.title}

{item.desc}

))} )}

); }; export default InteractiveBentoGallery