@djangocfg/ui-tools 2.1.110 → 2.1.112

package/src/tools/Gallery/components/GalleryVideo.tsx

@@ -0,0 +1,222 @@
+'use client'
+
+import { memo, useCallback, useMemo, useRef, useState } from 'react'
+import { cn } from '@djangocfg/ui-core/lib'
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n'
+import { Play, Pause, Volume2, VolumeX, Maximize, AlertCircle } from 'lucide-react'
+import type { GalleryMediaItem } from '../types'
+
+export interface GalleryVideoProps {
+  /** Video data */
+  media: GalleryMediaItem
+  /** Whether video should autoplay */
+  autoPlay?: boolean
+  /** Whether video should be muted by default */
+  muted?: boolean
+  /** Whether video should loop */
+  loop?: boolean
+  /** Show controls overlay */
+  showControls?: boolean
+  /** Additional CSS class */
+  className?: string
+}
+
+/**
+ * GalleryVideo - Video player for gallery items
+ */
+export const GalleryVideo = memo(function GalleryVideo({
+  media,
+  autoPlay = false,
+  muted = true,
+  loop = true,
+  showControls = true,
+  className,
+}: GalleryVideoProps) {
+  const t = useTypedT<I18nTranslations>()
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const [isPlaying, setIsPlaying] = useState(autoPlay)
+  const [isMuted, setIsMuted] = useState(muted)
+  const [showOverlay, setShowOverlay] = useState(true)
+  const [hasError, setHasError] = useState(false)
+
+  const labels = useMemo(() => ({
+    play: t('tools.video.play'),
+    fullscreen: t('tools.video.fullscreen'),
+    unavailable: t('tools.video.unavailable'),
+  }), [t])
+
+  const handlePlayPause = useCallback((e?: React.MouseEvent) => {
+    e?.stopPropagation()
+    const video = videoRef.current
+    if (!video) return
+
+    if (video.paused) {
+      video.play()
+      setIsPlaying(true)
+    } else {
+      video.pause()
+      setIsPlaying(false)
+    }
+  }, [])
+
+  const handleMuteToggle = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    const video = videoRef.current
+    if (!video) return
+
+    video.muted = !video.muted
+    setIsMuted(video.muted)
+  }, [])
+
+  const handleFullscreen = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    const video = videoRef.current
+    if (!video) return
+
+    if (video.requestFullscreen) {
+      video.requestFullscreen()
+    }
+  }, [])
+
+  const handleVideoClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    handlePlayPause()
+  }, [handlePlayPause])
+
+  const handleMouseEnter = useCallback(() => {
+    setShowOverlay(true)
+  }, [])
+
+  const handleMouseLeave = useCallback(() => {
+    if (isPlaying) {
+      setShowOverlay(false)
+    }
+  }, [isPlaying])
+
+  const handleError = useCallback(() => {
+    setHasError(true)
+    setIsPlaying(false)
+  }, [])
+
+  const handleContainerClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+  }, [])
+
+  if (!media.videoSrc) {
+    return null
+  }
+
+  // Error state - show poster with error overlay
+  if (hasError) {
+    return (
+      <div
+        className={cn('relative w-full h-full bg-black', className)}
+        onClick={handleContainerClick}
+      >
+        {media.src && (
+          <img
+            src={media.src}
+            alt={media.alt || 'Video thumbnail'}
+            className="w-full h-full object-contain opacity-50"
+          />
+        )}
+        <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/50">
+          <AlertCircle className="w-12 h-12 text-white/70 mb-2" />
+          <span className="text-white/70 text-sm">{labels.unavailable}</span>
+        </div>
+        <div className="absolute top-3 left-3 px-2 py-1 bg-black/60 rounded text-white text-xs font-medium">
+          Video
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={cn('relative w-full h-full bg-black', className)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onClick={handleContainerClick}
+    >
+      <video
+        ref={videoRef}
+        className="w-full h-full object-contain"
+        src={media.videoSrc}
+        poster={media.src}
+        autoPlay={autoPlay}
+        muted={muted}
+        loop={loop}
+        playsInline
+        onClick={handleVideoClick}
+        onError={handleError}
+      >
+        {media.videoType && (
+          <source src={media.videoSrc} type={media.videoType} />
+        )}
+      </video>
+
+      {/* Play button overlay */}
+      {!isPlaying && (
+        <div className="absolute inset-0 flex items-center justify-center bg-black/30">
+          <button
+            type="button"
+            className="w-16 h-16 rounded-full bg-white/90 flex items-center justify-center shadow-lg hover:bg-white transition-colors"
+            onClick={handlePlayPause}
+            aria-label={labels.play}
+          >
+            <Play className="w-8 h-8 text-black ml-1" />
+          </button>
+        </div>
+      )}
+
+      {/* Controls overlay */}
+      {showControls && showOverlay && isPlaying && (
+        <div className="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/60 to-transparent">
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              className="p-2 rounded-full bg-white/20 hover:bg-white/30 text-white transition-colors"
+              onClick={handlePlayPause}
+              aria-label={isPlaying ? 'Pause' : 'Play'}
+            >
+              {isPlaying ? (
+                <Pause className="w-5 h-5" />
+              ) : (
+                <Play className="w-5 h-5" />
+              )}
+            </button>
+
+            <button
+              type="button"
+              className="p-2 rounded-full bg-white/20 hover:bg-white/30 text-white transition-colors"
+              onClick={handleMuteToggle}
+              aria-label={isMuted ? 'Unmute' : 'Mute'}
+            >
+              {isMuted ? (
+                <VolumeX className="w-5 h-5" />
+              ) : (
+                <Volume2 className="w-5 h-5" />
+              )}
+            </button>
+
+            <div className="flex-1" />
+
+            <button
+              type="button"
+              className="p-2 rounded-full bg-white/20 hover:bg-white/30 text-white transition-colors"
+              onClick={handleFullscreen}
+              aria-label={labels.fullscreen}
+            >
+              <Maximize className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Video indicator badge */}
+      <div className="absolute top-3 left-3 px-2 py-1 bg-black/60 rounded text-white text-xs font-medium">
+        Video
+      </div>
+    </div>
+  )
+})

package/src/tools/Gallery/components/index.ts

@@ -0,0 +1,13 @@
+export { Gallery } from './Gallery'
+export { GalleryCarousel } from './GalleryCarousel'
+export type { GalleryCarouselProps } from './GalleryCarousel'
+export { GalleryCompact } from './GalleryCompact'
+export type { GalleryCompactProps } from './GalleryCompact'
+export { GalleryGrid } from './GalleryGrid'
+export type { GalleryGridProps, GalleryGridLayout } from './GalleryGrid'
+export { GalleryImage } from './GalleryImage'
+export { GalleryVideo } from './GalleryVideo'
+export { GalleryMedia } from './GalleryMedia'
+export { GalleryThumbnails } from './GalleryThumbnails'
+export { GalleryThumbnailsVirtual } from './GalleryThumbnailsVirtual'
+export { GalleryLightbox } from './GalleryLightbox'

package/src/tools/Gallery/hooks/index.ts

@@ -0,0 +1,23 @@
+export { useGallery } from './useGallery'
+export type { UseGalleryOptions } from './useGallery'
+
+export { useSwipe } from './useSwipe'
+export type { UseSwipeOptions } from './useSwipe'
+
+export { usePreloadImages, preloadImage, preloadImages } from './usePreloadImages'
+
+export { useZoom } from './useZoom'
+export type { ZoomState, UseZoomOptions, UseZoomReturn } from './useZoom'
+
+export { usePinchZoom } from './usePinchZoom'
+export type { PinchZoomState, UsePinchZoomOptions, UsePinchZoomReturn } from './usePinchZoom'
+
+export { useVirtualList } from './useVirtualList'
+export type { VirtualListOptions, VirtualListReturn, VirtualItem } from './useVirtualList'
+
+export { useImageDimensions, clearDimensionsCache, getCachedDimensions } from './useImageDimensions'
+export type {
+  ImageWithDimensions,
+  UseImageDimensionsResult,
+  UseImageDimensionsOptions,
+} from './useImageDimensions'

package/src/tools/Gallery/hooks/useGallery.ts

@@ -0,0 +1,137 @@
+'use client'
+
+import { useState, useCallback, useMemo, useEffect } from 'react'
+import type { GalleryMediaItem, GalleryContextValue } from '../types'
+
+export interface UseGalleryOptions {
+  /** Array of images */
+  images: GalleryMediaItem[]
+  /** Initial selected index */
+  initialIndex?: number
+  /** Loop navigation */
+  loop?: boolean
+  /** Callback when image changes */
+  onImageChange?: (index: number, image: GalleryMediaItem) => void
+}
+
+/**
+ * Hook for managing gallery state
+ */
+export function useGallery({
+  images,
+  initialIndex = 0,
+  loop = true,
+  onImageChange,
+}: UseGalleryOptions): GalleryContextValue {
+  const [currentIndex, setCurrentIndex] = useState(initialIndex)
+  const [isLightboxOpen, setIsLightboxOpen] = useState(false)
+  const [isZoomed, setIsZoomed] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const total = images.length
+  const hasMultiple = total > 1
+  const currentImage = images[currentIndex] ?? null
+
+  // Reset state when images change
+  useEffect(() => {
+    if (currentIndex >= total) {
+      setCurrentIndex(Math.max(0, total - 1))
+    }
+  }, [total, currentIndex])
+
+  // Reset zoom when image changes
+  useEffect(() => {
+    setIsZoomed(false)
+    setIsLoading(true)
+  }, [currentIndex])
+
+  const goTo = useCallback(
+    (index: number) => {
+      if (index < 0 || index >= total) return
+      setCurrentIndex(index)
+      onImageChange?.(index, images[index]!)
+    },
+    [total, images, onImageChange]
+  )
+
+  const next = useCallback(() => {
+    if (!hasMultiple) return
+    const nextIndex = loop
+      ? (currentIndex + 1) % total
+      : Math.min(currentIndex + 1, total - 1)
+    if (nextIndex !== currentIndex) {
+      goTo(nextIndex)
+    }
+  }, [currentIndex, total, hasMultiple, loop, goTo])
+
+  const prev = useCallback(() => {
+    if (!hasMultiple) return
+    const prevIndex = loop
+      ? (currentIndex - 1 + total) % total
+      : Math.max(currentIndex - 1, 0)
+    if (prevIndex !== currentIndex) {
+      goTo(prevIndex)
+    }
+  }, [currentIndex, total, hasMultiple, loop, goTo])
+
+  const openLightbox = useCallback((index?: number) => {
+    if (index !== undefined) {
+      setCurrentIndex(index)
+    }
+    setIsLightboxOpen(true)
+    setIsZoomed(false)
+  }, [])
+
+  const closeLightbox = useCallback(() => {
+    setIsLightboxOpen(false)
+    setIsZoomed(false)
+  }, [])
+
+  const toggleZoom = useCallback(() => {
+    setIsZoomed((prev) => !prev)
+  }, [])
+
+  const setLoadingState = useCallback((loading: boolean) => {
+    setIsLoading(loading)
+  }, [])
+
+  return useMemo(
+    () => ({
+      // State
+      currentIndex,
+      isLightboxOpen,
+      isZoomed,
+      isLoading,
+      // Computed
+      images,
+      currentImage,
+      total,
+      hasMultiple,
+      // Actions
+      goTo,
+      next,
+      prev,
+      openLightbox,
+      closeLightbox,
+      toggleZoom,
+      setLoading: setLoadingState,
+    }),
+    [
+      currentIndex,
+      isLightboxOpen,
+      isZoomed,
+      isLoading,
+      images,
+      currentImage,
+      total,
+      hasMultiple,
+      goTo,
+      next,
+      prev,
+      openLightbox,
+      closeLightbox,
+      toggleZoom,
+      setLoadingState,
+    ]
+  )
+}

package/src/tools/Gallery/hooks/useImageDimensions.ts

@@ -0,0 +1,223 @@
+'use client'
+
+import { useState, useEffect, useRef, useMemo } from 'react'
+import type { GalleryMediaItem } from '../types'
+
+/**
+ * Image with loaded dimensions
+ */
+export interface ImageWithDimensions extends GalleryMediaItem {
+  width: number
+  height: number
+  loaded: boolean
+}
+
+/**
+ * Result of useImageDimensions hook
+ */
+export interface UseImageDimensionsResult {
+  /** Images with dimensions (loaded or from props) */
+  images: ImageWithDimensions[]
+  /** Whether all images have dimensions */
+  isReady: boolean
+  /** Whether currently loading */
+  isLoading: boolean
+  /** Number of images loaded */
+  loadedCount: number
+}
+
+/**
+ * Options for useImageDimensions
+ */
+export interface UseImageDimensionsOptions {
+  /** Only load dimensions for first N images */
+  maxToLoad?: number
+  /** Skip loading if dimensions already present */
+  skipIfPresent?: boolean
+  /** Timeout per image in ms */
+  timeout?: number
+}
+
+// Cache for loaded dimensions
+const dimensionsCache = new Map<string, { width: number; height: number }>()
+
+/**
+ * Load image dimensions
+ */
+function loadImageDimensions(
+  src: string,
+  timeout: number = 5000
+): Promise<{ width: number; height: number }> {
+  // Check cache
+  const cached = dimensionsCache.get(src)
+  if (cached) return Promise.resolve(cached)
+
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    const timeoutId = setTimeout(() => {
+      reject(new Error('Timeout loading image'))
+    }, timeout)
+
+    img.onload = () => {
+      clearTimeout(timeoutId)
+      const dims = { width: img.naturalWidth, height: img.naturalHeight }
+      dimensionsCache.set(src, dims)
+      resolve(dims)
+    }
+
+    img.onerror = () => {
+      clearTimeout(timeoutId)
+      reject(new Error('Failed to load image'))
+    }
+
+    img.src = src
+  })
+}
+
+/**
+ * Hook to load image dimensions for gallery images
+ *
+ * Uses thumbnail URL when available (faster to load)
+ * Caches results to avoid reloading
+ */
+export function useImageDimensions(
+  images: GalleryMediaItem[],
+  options: UseImageDimensionsOptions = {}
+): UseImageDimensionsResult {
+  const {
+    maxToLoad = 5,
+    skipIfPresent = true,
+    timeout = 5000,
+  } = options
+
+  // Create stable key from image IDs
+  const imageIds = useMemo(() => {
+    return images.slice(0, maxToLoad).map(img => img.id).join(',')
+  }, [images, maxToLoad])
+
+  // Track dimensions in a map by ID (stable across re-renders)
+  const dimensionsRef = useRef(new Map<string, { width: number; height: number; loaded: boolean }>())
+  const [version, setVersion] = useState(0) // Force re-render when dimensions load
+  const [isLoading, setIsLoading] = useState(true)
+  const loadingRef = useRef(false)
+  const prevImageIdsRef = useRef('')
+
+  // Initialize dimensions from props or cache
+  useEffect(() => {
+    const targetImages = images.slice(0, maxToLoad)
+    const idsChanged = prevImageIdsRef.current !== imageIds
+    prevImageIdsRef.current = imageIds
+
+    // Update dimensions map with any new images
+    for (const img of targetImages) {
+      if (!dimensionsRef.current.has(img.id)) {
+        // Check cache first
+        const src = img.thumbnail || img.src
+        const cached = dimensionsCache.get(src)
+
+        if (cached) {
+          dimensionsRef.current.set(img.id, { ...cached, loaded: true })
+        } else if (img.width && img.height && skipIfPresent) {
+          dimensionsRef.current.set(img.id, { width: img.width, height: img.height, loaded: true })
+        } else {
+          dimensionsRef.current.set(img.id, { width: 0, height: 0, loaded: false })
+        }
+      }
+    }
+
+    // Find images that need loading
+    const toLoad = targetImages.filter(img => {
+      const dims = dimensionsRef.current.get(img.id)
+      return !dims?.loaded
+    })
+
+    // Nothing to load
+    if (toLoad.length === 0) {
+      setIsLoading(false)
+      if (idsChanged) setVersion(v => v + 1)
+      return
+    }
+
+    // Already loading
+    if (loadingRef.current) return
+
+    loadingRef.current = true
+    setIsLoading(true)
+
+    // Load dimensions
+    Promise.all(
+      toLoad.map(async (img) => {
+        try {
+          const src = img.thumbnail || img.src
+          const dims = await loadImageDimensions(src, timeout)
+          dimensionsRef.current.set(img.id, { ...dims, loaded: true })
+          return { id: img.id, success: true }
+        } catch {
+          // Use default dimensions on error
+          dimensionsRef.current.set(img.id, { width: 1600, height: 900, loaded: true })
+          return { id: img.id, success: false }
+        }
+      })
+    ).then(() => {
+      loadingRef.current = false
+      setIsLoading(false)
+      setVersion(v => v + 1)
+    })
+  }, [imageIds, images, maxToLoad, skipIfPresent, timeout])
+
+  // Build result array
+  const result = useMemo((): ImageWithDimensions[] => {
+    return images.slice(0, maxToLoad).map(img => {
+      const dims = dimensionsRef.current.get(img.id)
+      return {
+        ...img,
+        width: dims?.width || img.width || 0,
+        height: dims?.height || img.height || 0,
+        loaded: dims?.loaded || false,
+      }
+    })
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [imageIds, version])
+
+  // Also return all images (not just maxToLoad) with available dimensions
+  const allImages = useMemo((): ImageWithDimensions[] => {
+    return images.map(img => {
+      const dims = dimensionsRef.current.get(img.id)
+      return {
+        ...img,
+        width: dims?.width || img.width || 0,
+        height: dims?.height || img.height || 0,
+        loaded: dims?.loaded || Boolean(img.width && img.height),
+      }
+    })
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [images, version])
+
+  const loadedCount = result.filter(img => img.loaded).length
+  const targetCount = Math.min(images.length, maxToLoad)
+
+  const isReady = !isLoading && loadedCount >= targetCount
+
+  return {
+    images: allImages,
+    isReady,
+    isLoading,
+    loadedCount,
+  }
+}
+
+/**
+ * Clear dimensions cache
+ */
+export function clearDimensionsCache(): void {
+  dimensionsCache.clear()
+}
+
+/**
+ * Get cached dimensions for an image
+ */
+export function getCachedDimensions(
+  src: string
+): { width: number; height: number } | null {
+  return dimensionsCache.get(src) || null
+}