|
| 1 | +import React, { useState, useRef, useEffect } from 'react'; |
| 2 | +import { motion, AnimatePresence } from 'framer-motion'; |
| 3 | +import { ChevronLeft, ChevronRight, Download, Maximize2, Share2 } from 'lucide-react'; |
| 4 | +import { cn } from '@/lib/utils'; |
| 5 | +import { Button } from '@/components/ui/button'; |
| 6 | +import { type MediaContent, type MediaItem } from '@/services/mediaService'; |
| 7 | + |
| 8 | +interface InstagramCarouselProps { |
| 9 | + content: MediaContent; |
| 10 | + className?: string; |
| 11 | +} |
| 12 | + |
| 13 | +export const InstagramCarousel: React.FC<InstagramCarouselProps> = ({ content, className }) => { |
| 14 | + const [currentIndex, setCurrentIndex] = useState(0); |
| 15 | + const [direction, setDirection] = useState(0); |
| 16 | + const items = content.items || []; |
| 17 | + |
| 18 | + const nextSlide = () => { |
| 19 | + if (currentIndex < items.length - 1) { |
| 20 | + setDirection(1); |
| 21 | + setCurrentIndex(currentIndex + 1); |
| 22 | + } |
| 23 | + }; |
| 24 | + |
| 25 | + const prevSlide = () => { |
| 26 | + if (currentIndex > 0) { |
| 27 | + setDirection(-1); |
| 28 | + setCurrentIndex(currentIndex - 1); |
| 29 | + } |
| 30 | + }; |
| 31 | + |
| 32 | + const handleDownloadPDF = () => { |
| 33 | + const pdfUrl = content.metadata?.pdf_url; |
| 34 | + if (pdfUrl) { |
| 35 | + window.open(pdfUrl, '_blank'); |
| 36 | + } else { |
| 37 | + console.warn('No PDF URL found for this content'); |
| 38 | + } |
| 39 | + }; |
| 40 | + |
| 41 | + // Keyboard navigation |
| 42 | + useEffect(() => { |
| 43 | + const handleKeyDown = (e: KeyboardEvent) => { |
| 44 | + if (e.key === 'ArrowLeft') prevSlide(); |
| 45 | + if (e.key === 'ArrowRight') nextSlide(); |
| 46 | + }; |
| 47 | + window.addEventListener('keydown', handleKeyDown); |
| 48 | + return () => window.removeEventListener('keydown', handleKeyDown); |
| 49 | + }, [currentIndex]); |
| 50 | + |
| 51 | + if (items.length === 0) return null; |
| 52 | + |
| 53 | + const currentItem = items[currentIndex]; |
| 54 | + |
| 55 | + return ( |
| 56 | + <div className={cn("relative group max-w-xl mx-auto bg-black rounded-xl overflow-hidden shadow-2xl", className)}> |
| 57 | + {/* Aspect Ratio Container (Square for IG feel) */} |
| 58 | + <div className="relative aspect-square w-full"> |
| 59 | + <AnimatePresence initial={false} custom={direction}> |
| 60 | + <motion.div |
| 61 | + key={currentIndex} |
| 62 | + custom={direction} |
| 63 | + variants={{ |
| 64 | + enter: (direction: number) => ({ |
| 65 | + x: direction > 0 ? '100%' : '-100%', |
| 66 | + opacity: 0 |
| 67 | + }), |
| 68 | + center: { |
| 69 | + x: 0, |
| 70 | + opacity: 1 |
| 71 | + }, |
| 72 | + exit: (direction: number) => ({ |
| 73 | + x: direction < 0 ? '100%' : '-100%', |
| 74 | + opacity: 0 |
| 75 | + }) |
| 76 | + }} |
| 77 | + initial="enter" |
| 78 | + animate="center" |
| 79 | + exit="exit" |
| 80 | + transition={{ |
| 81 | + x: { type: "spring", stiffness: 300, damping: 30 }, |
| 82 | + opacity: { duration: 0.2 } |
| 83 | + }} |
| 84 | + className="absolute inset-0 flex items-center justify-center" |
| 85 | + > |
| 86 | + {currentItem.type === 'image' ? ( |
| 87 | + <img |
| 88 | + src={currentItem.file_url || ''} |
| 89 | + alt={`${content.title} - Slide ${currentIndex + 1}`} |
| 90 | + className="w-full h-full object-cover" |
| 91 | + /> |
| 92 | + ) : currentItem.type === 'video' ? ( |
| 93 | + <video |
| 94 | + src={currentItem.file_url || ''} |
| 95 | + controls |
| 96 | + className="w-full h-full object-contain" |
| 97 | + /> |
| 98 | + ) : ( |
| 99 | + <div className="flex flex-col items-center justify-center text-white/50"> |
| 100 | + <Maximize2 size={48} className="mb-2" /> |
| 101 | + <span>Unsupported Media Type</span> |
| 102 | + </div> |
| 103 | + )} |
| 104 | + </motion.div> |
| 105 | + </AnimatePresence> |
| 106 | + |
| 107 | + {/* Overlays / Controls */} |
| 108 | + <div className="absolute inset-0 pointer-events-none"> |
| 109 | + {/* Navigation Buttons */} |
| 110 | + <div className="absolute inset-y-0 left-0 flex items-center pl-2 pointer-events-auto opacity-0 group-hover:opacity-100 transition-opacity"> |
| 111 | + {currentIndex > 0 && ( |
| 112 | + <Button |
| 113 | + variant="ghost" |
| 114 | + size="icon" |
| 115 | + onClick={prevSlide} |
| 116 | + className="rounded-full bg-black/30 hover:bg-black/50 text-white border-none h-8 w-8" |
| 117 | + > |
| 118 | + <ChevronLeft size={20} /> |
| 119 | + </Button> |
| 120 | + )} |
| 121 | + </div> |
| 122 | + <div className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-auto opacity-0 group-hover:opacity-100 transition-opacity"> |
| 123 | + {currentIndex < items.length - 1 && ( |
| 124 | + <Button |
| 125 | + variant="ghost" |
| 126 | + size="icon" |
| 127 | + onClick={nextSlide} |
| 128 | + className="rounded-full bg-black/30 hover:bg-black/50 text-white border-none h-8 w-8" |
| 129 | + > |
| 130 | + <ChevronRight size={20} /> |
| 131 | + </Button> |
| 132 | + )} |
| 133 | + </div> |
| 134 | + |
| 135 | + {/* Content Header (Floating) */} |
| 136 | + <div className="absolute top-0 inset-x-0 p-4 bg-gradient-to-b from-black/60 to-transparent flex justify-between items-start text-white"> |
| 137 | + <div className="flex flex-col"> |
| 138 | + <span className="text-xs font-semibold uppercase tracking-wider text-kenya-red">{content.type}</span> |
| 139 | + <h3 className="text-sm font-bold line-clamp-1">{content.title}</h3> |
| 140 | + </div> |
| 141 | + <div className="flex gap-2 pointer-events-auto"> |
| 142 | + <Button variant="ghost" size="icon" className="h-8 w-8 text-white hover:bg-white/20 rounded-full"> |
| 143 | + <Share2 size={16} /> |
| 144 | + </Button> |
| 145 | + </div> |
| 146 | + </div> |
| 147 | + |
| 148 | + {/* Indicators (Instagram Style) */} |
| 149 | + <div className="absolute bottom-4 inset-x-0 flex justify-center gap-1.5"> |
| 150 | + {items.length > 1 && items.map((_, i) => ( |
| 151 | + <div |
| 152 | + key={i} |
| 153 | + className={cn( |
| 154 | + "h-1.5 w-1.5 rounded-full transition-all duration-300", |
| 155 | + i === currentIndex ? "bg-white scale-125" : "bg-white/40" |
| 156 | + )} |
| 157 | + /> |
| 158 | + ))} |
| 159 | + </div> |
| 160 | + </div> |
| 161 | + </div> |
| 162 | + |
| 163 | + {/* Bottom Panel (Download Action) */} |
| 164 | + <div className="bg-background border-t p-4 flex items-center justify-between"> |
| 165 | + <div className="flex-1 mr-4"> |
| 166 | + <p className="text-sm text-foreground/80 line-clamp-1 italic"> |
| 167 | + {currentIndex + 1} / {items.length} |
| 168 | + </p> |
| 169 | + </div> |
| 170 | + {content.metadata?.pdf_url && ( |
| 171 | + <Button |
| 172 | + onClick={handleDownloadPDF} |
| 173 | + className="bg-kenya-red hover:bg-kenya-red/90 text-white gap-2 rounded-full h-9 px-4 text-xs font-bold" |
| 174 | + > |
| 175 | + <Download size={14} /> |
| 176 | + DOWNLOAD PDF |
| 177 | + </Button> |
| 178 | + )} |
| 179 | + </div> |
| 180 | + </div> |
| 181 | + ); |
| 182 | +}; |
| 183 | + |
| 184 | +export default InstagramCarousel; |
0 commit comments