Media Gallery

​

CDN helpers

const CLOUDFLARE_IMAGES_BASE = 'https://imagedelivery.net/vdFY6FzpM3Q9zi31qlYmGA/'

// Standard quality — used for most gallery images
export const getCloudflareImage = (imageId: string) =>
  `${CLOUDFLARE_IMAGES_BASE}${imageId}/bigger?format=auto&quality=90`

// Mobile wallpaper variant — 9:19.5 portrait aspect ratio
export const getCloudflareImageMobileWp = (imageId: string) =>
  `${CLOUDFLARE_IMAGES_BASE}${imageId}/mobileWP?format=auto&quality=90`

// Highest quality — used where maximum fidelity is required
export const getCloudflareImageBiggest = (imageId: string) =>
  `${CLOUDFLARE_IMAGES_BASE}${imageId}/biggest?format=auto&quality=100`

​

Image gallery components

​

ImageCarouselModal

• Left/right arrow buttons navigate between images
• Dot indicators at the bottom jump to a specific image
• Touch drag is supported via Framer Motion’s drag="x" with a swipe power threshold of 10000

const swipePower = (offset: number, velocity: number) =>
  Math.abs(offset) * velocity

// Swipe left (next) or right (previous) when power exceeds threshold
if (swipe < -swipeConfidenceThreshold) paginate(1)
if (swipe >  swipeConfidenceThreshold) paginate(-1)

• Images use object-contain inside a aspect-video container with an orange-to-red gradient background
• The active dot expands to w-8; inactive dots are w-2 bg-white/50

​

PhotoAlbumModal

• Thumbnail strip — a horizontally scrollable row of 64×64px thumbnails below the main image. The active thumbnail scales up and gains an border-orange-500 border.
• Counter badge — top-left overlay showing {currentIndex + 1} / {photos.length}
• Keyboard navigation — ArrowLeft, ArrowRight, and Escape keys are handled via a window keydown listener
• initialIndex prop — opens the modal at a specific photo, useful when clicking a thumbnail in a grid
• Reset on open — useEffect resets currentIndex to initialIndex whenever open changes to true

​

ResponsiveImageGallery

interface ImageData {
  id: number
  src: string
  alt: string
}

​

Video components

​

AashirwadVideoPlayer

• The section has a dark radial gradient background (from-slate-950 via-blue-950 to-slate-900)
• A Gujarati heading સુવર્ણ યુગ નો રજત મહોત્સવ and English subtitle A Silver Celebration of a Golden Era appear above the player
• On initial render a click-to-play poster is shown using the Cloudflare Stream animated GIF thumbnail:
  https://customer-kss5h1dwt4mkz0x3.cloudflarestream.com/
    6f4c127cc7b339c9b1b7875c1dc8e745/
    thumbnails/thumbnail.gif?time=95s&duration=4s
  
• Clicking the play button sets videoLoaded = true and replaces the poster with a Cloudflare Stream <iframe> with autoplay=true
• The iframe uses padding-top: 56.42633228840125% for exact aspect ratio preservation

​

VideoSection

• Before play: shows YouTube maxresdefault.jpg thumbnail with an animated play icon
• On click: pauses the site background audio via useAudioContext().pause(), then renders the YouTube embed with autoplay=1
• The play icon pulses (scale: [1, 1.05, 1], opacity: [0.7, 0.9, 0.7]) on a 2.5–3s loop and rotates 360° on hover

​

VideoBackgroundSection

• Detects device type via useDeviceType() and loads different Vimeo video IDs for mobile vs desktop
• Desktop: Vimeo 1128421609, Mobile: Vimeo 1128421563
• Both use autoplay=1&muted=1&loop=1&background=1 for a silent looping background
• Top and bottom gradient overlays (from-slate-900) fade the video into the surrounding page sections
• The iframe is centered and sized to always fill the viewport: width: 177.78vh, height: 100vh

​

Media page — downloadable wallpapers

https://cdn.njrajatmahotsav.com/wallpapers/rajat_mobile_wallpaper_gm_1.jpeg

const handleDownload = (wallpaper: typeof wallpapers[0]) => {
  const filename = `rajat-mahotsav-${wallpaper.title.toLowerCase().replace(/\s+/g, "-")}.jpg`
  const downloadUrl = `/api/download?url=${encodeURIComponent(wallpaper.fullRes)}&filename=${encodeURIComponent(filename)}`
  const link = document.createElement("a")
  link.href = downloadUrl
  link.download = filename
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

​

Latest events feed

interface EventData {
  id: string
  date: string          // ISO format: "2025-03-15"
  title: string
  description: string
  tags: string[]        // "community seva" | "religious" | "cultural" | "youth event"
  youtubeVideoId?: string
  instagramUrl?: string
  photos: EventPhoto[]
}

interface EventPhoto {
  url: string
  caption?: string
}

• Tag filter — OR logic: an event is shown if it matches any selected tag
• Date range filter — inclusive start and end dates
• URL parameter ?tags=community+seva,religious pre-selects tags on load
• Events are sorted newest-first

​

GuruCarousel

• Auto-advances every 4000ms when the carousel is visible (tracked via IntersectionObserver at threshold: 0.5)
• Auto-advance resets after a manual swipe or dot click (resetKey state)
• Dot indicators use orange (bg-orange-500) for the active slide and gray (bg-gray-300) otherwise
• Each slide renders a GuruCard molecule with an imageId and name

interface Guru {
  imageId: string   // Cloudflare Images image ID
  name: string
}