blocks-dusted 0.1.10 → 0.1.12

package/templates/blocks/DD-Lottie/Component.tsx

@@ -0,0 +1,459 @@
+'use client'
+
+import React, { useEffect, useRef, useState, Suspense } from 'react'
+import { cn } from '@/utilities/ui'
+import { motion, useInView } from 'framer-motion'
+import type { Media } from '@/payload-types'
+import dynamic from 'next/dynamic'
+
+const DotLottieReact = dynamic(
+  () => import('@lottiefiles/dotlottie-react').then((m) => m.DotLottieReact),
+  { ssr: false, loading: () => null }
+)
+
+type DotLottieInstance = any
+
+export interface LottieBlockProps {
+  blockName?: string
+  lottieFile: Media | string
+  format?: 'json' | 'lottie'
+  autoplay?: boolean
+  loop?: boolean
+  controls?: boolean
+  hover?: boolean
+  speed?: number
+  direction?: '1' | '-1'
+  width?: string
+  height?: string
+  objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+  playOnScroll?: boolean
+  scrollBehavior?: 'once' | 'always' | 'sync'
+  scrollStart?: number
+  scrollEnd?: number
+  containerClass?: string
+  customStyle?: React.CSSProperties
+  customCSS?: string
+  alt?: string
+  title?: string
+  reducedMotion?: boolean
+}
+
+const lottieBaseClass = cn(
+  'lottie-block group relative inline-block overflow-hidden',
+  '[&_.lottie-animation]:block [&_.lottie-animation]:h-full [&_.lottie-animation]:w-full',
+  '[&_.lottie-loading]:flex [&_.lottie-loading]:min-h-[100px] [&_.lottie-loading]:min-w-[100px] [&_.lottie-loading]:items-center [&_.lottie-loading]:justify-center [&_.lottie-loading]:rounded [&_.lottie-loading]:!bg-transparent [&_.lottie-loading]:text-sm [&_.lottie-loading]:text-[#6c757d]',
+  '[&_.lottie-placeholder]:flex [&_.lottie-placeholder]:min-h-[100px] [&_.lottie-placeholder]:min-w-[100px] [&_.lottie-placeholder]:items-center [&_.lottie-placeholder]:justify-center [&_.lottie-placeholder]:rounded [&_.lottie-placeholder]:!bg-transparent [&_.lottie-placeholder]:text-sm [&_.lottie-placeholder]:text-[#6c757d] dark:[&_.lottie-placeholder]:text-[#adb5bd]',
+  '[&_.lottie-controls]:absolute [&_.lottie-controls]:bottom-2.5 [&_.lottie-controls]:left-1/2 [&_.lottie-controls]:flex [&_.lottie-controls]:-translate-x-1/2 [&_.lottie-controls]:gap-2 [&_.lottie-controls]:rounded-[20px] [&_.lottie-controls]:bg-black/70 [&_.lottie-controls]:px-3 [&_.lottie-controls]:py-2 [&_.lottie-controls]:opacity-0 [&_.lottie-controls]:backdrop-blur-sm [&_.lottie-controls]:transition-opacity [&_.lottie-controls]:duration-300 group-hover:[&_.lottie-controls]:opacity-100 max-md:[&_.lottie-controls]:opacity-100',
+  '[&_.lottie-control-btn]:cursor-pointer [&_.lottie-control-btn]:rounded [&_.lottie-control-btn]:border-0 [&_.lottie-control-btn]:bg-transparent [&_.lottie-control-btn]:px-2 [&_.lottie-control-btn]:py-1 [&_.lottie-control-btn]:text-base [&_.lottie-control-btn]:text-white [&_.lottie-control-btn]:transition-colors [&_.lottie-control-btn]:duration-200 hover:[&_.lottie-control-btn]:bg-white/20 focus:[&_.lottie-control-btn]:outline focus:[&_.lottie-control-btn]:outline-2 focus:[&_.lottie-control-btn]:outline-offset-2 focus:[&_.lottie-control-btn]:outline-[#007bff]',
+  '[&_.lottie-reduced-motion-notice]:absolute [&_.lottie-reduced-motion-notice]:right-2.5 [&_.lottie-reduced-motion-notice]:top-2.5 [&_.lottie-reduced-motion-notice]:rounded [&_.lottie-reduced-motion-notice]:bg-black/80 [&_.lottie-reduced-motion-notice]:px-2 [&_.lottie-reduced-motion-notice]:py-1 [&_.lottie-reduced-motion-notice]:text-xs [&_.lottie-reduced-motion-notice]:text-white',
+  '[&_.sr-only]:absolute [&_.sr-only]:m-[-1px] [&_.sr-only]:h-px [&_.sr-only]:w-px [&_.sr-only]:overflow-hidden [&_.sr-only]:whitespace-nowrap [&_.sr-only]:border-0 [&_.sr-only]:p-0 [&_.sr-only]:[clip:rect(0,0,0,0)]',
+  'motion-reduce:[&_.lottie-animation]:![animation-play-state:paused]'
+)
+
+const getPresetClass = (containerClass?: string) =>
+  cn(
+    containerClass?.includes('lottie-block--small') && 'h-[100px] w-[100px]',
+    containerClass?.includes('lottie-block--medium') && 'h-[200px] w-[200px]',
+    containerClass?.includes('lottie-block--large') && 'h-[400px] w-[400px]',
+    containerClass?.includes('lottie-block--full-width') && 'h-auto w-full',
+    containerClass?.includes('lottie-block--square') && 'aspect-square',
+    containerClass?.includes('lottie-block--rounded') && 'rounded-lg',
+    containerClass?.includes('lottie-block--circular') && 'overflow-hidden rounded-full',
+    containerClass?.includes('lottie-block--shadow') &&
+      'shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-1px_rgba(0,0,0,0.06)]',
+    containerClass?.includes('lottie-block--border') && 'border-2 border-[#e5e7eb]'
+  )
+
+const LottieBlockComponent: React.FC<LottieBlockProps> = ({
+  blockName,
+  lottieFile,
+  format,
+  autoplay = true,
+  loop = true,
+  controls = false,
+  hover = false,
+  speed = 1,
+  direction = '1',
+  width,
+  height,
+  objectFit = 'contain',
+  playOnScroll = false,
+  scrollBehavior = 'once',
+  scrollStart = 0,
+  scrollEnd = 100,
+  containerClass,
+  customStyle,
+  customCSS,
+  alt,
+  title,
+  reducedMotion = true
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const lottieRef = useRef<HTMLDivElement>(null)
+
+  const lottieInstanceRef = useRef<any>(null)
+  const dotLottieRef = useRef<DotLottieInstance | null>(null)
+
+  const isLoadingRef = useRef(false)
+  const loadedFileRef = useRef<string | null>(null)
+
+  const [hasPlayed, setHasPlayed] = useState(false)
+  const [isClient, setIsClient] = useState(false)
+  const [animationLoaded, setAnimationLoaded] = useState(false)
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false)
+
+  const inView = useInView(containerRef, { once: scrollBehavior === 'once' })
+
+  const scrollHeight = 6000
+
+  useEffect(() => {
+    setIsClient(true)
+
+    if (typeof window === 'undefined') return
+
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
+
+    const updateReducedMotion = () => {
+      setPrefersReducedMotion(mediaQuery.matches)
+    }
+
+    updateReducedMotion()
+    mediaQuery.addEventListener?.('change', updateReducedMotion)
+
+    return () => {
+      mediaQuery.removeEventListener?.('change', updateReducedMotion)
+    }
+  }, [])
+
+  const fileUrl = React.useMemo(() => {
+    if (typeof lottieFile === 'string') return lottieFile
+
+    if (lottieFile && typeof lottieFile === 'object') {
+      if ('url' in lottieFile && lottieFile.url) {
+        return lottieFile.url as string
+      }
+
+      if ('filename' in lottieFile && lottieFile.filename) {
+        return `/media/${lottieFile.filename}`
+      }
+    }
+
+    return null
+  }, [lottieFile])
+
+  const resolvedFormat = React.useMemo<'json' | 'lottie'>(() => {
+    if (format === 'lottie') return 'lottie'
+    if (format === 'json') return 'json'
+
+    const lowerUrl = fileUrl?.toLowerCase() || ''
+
+    if (lowerUrl.endsWith('.lottie')) return 'lottie'
+    if (lowerUrl.includes('.lottie?')) return 'lottie'
+
+    return 'json'
+  }, [format, fileUrl])
+
+  useEffect(() => {
+    if (resolvedFormat !== 'json') return
+    if (!isClient || !lottieRef.current || !fileUrl || isLoadingRef.current) return
+
+    if (loadedFileRef.current === fileUrl && lottieInstanceRef.current) return
+
+    isLoadingRef.current = true
+
+    const loadLottie = async () => {
+      try {
+        const lottie = await import('lottie-web')
+
+        if (lottieInstanceRef.current) {
+          lottieInstanceRef.current.destroy()
+          lottieInstanceRef.current = null
+        }
+
+        dotLottieRef.current = null
+
+        const instance = lottie.default.loadAnimation({
+          container: lottieRef.current!,
+          renderer: 'svg',
+          loop: loop && !prefersReducedMotion,
+          autoplay: autoplay && !playOnScroll && !hover && !prefersReducedMotion,
+          path: fileUrl,
+          rendererSettings: {
+            preserveAspectRatio: `xMidYMid ${objectFit === 'contain' ? 'meet' : 'slice'}`
+          }
+        })
+
+        instance.setSpeed(speed)
+        instance.setDirection(parseInt(direction) as 1 | -1)
+
+        lottieInstanceRef.current = instance
+        loadedFileRef.current = fileUrl
+        isLoadingRef.current = false
+        setAnimationLoaded(true)
+
+        if (reducedMotion && prefersReducedMotion) {
+          instance.pause()
+          instance.goToAndStop(0, true)
+        }
+      } catch (error) {
+        console.error('LottieBlock: Failed to load Lottie animation:', error)
+        isLoadingRef.current = false
+        setAnimationLoaded(false)
+      }
+    }
+
+    void loadLottie()
+
+    return () => {
+      if (lottieInstanceRef.current) {
+        lottieInstanceRef.current.destroy()
+        lottieInstanceRef.current = null
+      }
+
+      loadedFileRef.current = null
+      isLoadingRef.current = false
+      setAnimationLoaded(false)
+    }
+  }, [
+    isClient,
+    fileUrl,
+    resolvedFormat,
+    loop,
+    autoplay,
+    playOnScroll,
+    hover,
+    prefersReducedMotion,
+    objectFit,
+    speed,
+    direction,
+    reducedMotion
+  ])
+
+  useEffect(() => {
+    if (!playOnScroll || prefersReducedMotion) return
+
+    if (scrollBehavior === 'sync') {
+      const handleScroll = () => {
+        const el = containerRef.current
+        if (!el) return
+
+        const elementTopOffset = el.offsetTop
+        const scrolled = window.pageYOffset - elementTopOffset
+        const scrollProgress = Math.max(0, Math.min(1, scrolled / scrollHeight))
+
+        const startT = Math.min(scrollStart, scrollEnd) / 100
+        const endT = Math.max(scrollStart, scrollEnd) / 100
+        const t = startT + scrollProgress * (endT - startT)
+
+        if (resolvedFormat === 'json') {
+          const inst = lottieInstanceRef.current
+          if (!inst) return
+
+          const totalFrames = typeof inst.totalFrames === 'number' ? inst.totalFrames : 0
+          if (totalFrames <= 0) return
+
+          const currentFrame = Math.round(t * (totalFrames - 1))
+          inst.goToAndStop(currentFrame, true)
+        } else {
+          const dot = dotLottieRef.current
+          if (!dot) return
+
+          const totalFrames =
+            (typeof dot.totalFrames === 'number' && dot.totalFrames) ||
+            (typeof dot.totalFrames === 'function' && dot.totalFrames()) ||
+            (typeof dot.getTotalFrames === 'function' && dot.getTotalFrames()) ||
+            100
+
+          const currentFrame = Math.round(t * (totalFrames - 1))
+          dot.setFrame?.(currentFrame)
+        }
+      }
+
+      window.addEventListener('scroll', handleScroll, { passive: true })
+      handleScroll()
+
+      return () => window.removeEventListener('scroll', handleScroll)
+    }
+
+    if (inView && (!hasPlayed || scrollBehavior === 'always')) {
+      if (resolvedFormat === 'json') {
+        lottieInstanceRef.current?.play?.()
+      } else {
+        dotLottieRef.current?.play?.()
+      }
+
+      setHasPlayed(true)
+    }
+  }, [
+    playOnScroll,
+    inView,
+    hasPlayed,
+    scrollBehavior,
+    scrollStart,
+    scrollEnd,
+    prefersReducedMotion,
+    animationLoaded,
+    resolvedFormat
+  ])
+
+  const handleMouseEnter = () => {
+    if (!hover || prefersReducedMotion) return
+
+    if (resolvedFormat === 'json') {
+      lottieInstanceRef.current?.play?.()
+    } else {
+      dotLottieRef.current?.play?.()
+    }
+  }
+
+  const handleMouseLeave = () => {
+    if (!hover || prefersReducedMotion) return
+
+    if (resolvedFormat === 'json') {
+      lottieInstanceRef.current?.pause?.()
+    } else {
+      dotLottieRef.current?.pause?.()
+    }
+  }
+
+  const handlePlay = () => {
+    if (prefersReducedMotion) return
+
+    if (resolvedFormat === 'json') {
+      lottieInstanceRef.current?.play?.()
+    } else {
+      dotLottieRef.current?.play?.()
+    }
+  }
+
+  const handlePause = () => {
+    if (resolvedFormat === 'json') {
+      lottieInstanceRef.current?.pause?.()
+    } else {
+      dotLottieRef.current?.pause?.()
+    }
+  }
+
+  const handleStop = () => {
+    if (resolvedFormat === 'json') {
+      lottieInstanceRef.current?.stop?.()
+    } else {
+      dotLottieRef.current?.pause?.()
+      dotLottieRef.current?.setFrame?.(0)
+    }
+  }
+
+  const containerStyles: React.CSSProperties = {
+    width: width || 'auto',
+    height: height || 'auto',
+    display: 'inline-block',
+    paddingBottom: playOnScroll && scrollBehavior === 'sync' ? `${scrollHeight}px` : undefined,
+    ...customStyle
+  }
+
+  const finalContainerClassName = cn(
+    lottieBaseClass,
+    getPresetClass(containerClass),
+    containerClass
+  )
+
+  if (!isClient) {
+    return (
+      <Suspense fallback={'Loading animation...'}>
+        <div
+          className={cn(finalContainerClassName, 'lottie-loading')}
+          style={containerStyles}
+          title={title}
+        >
+          <div className="lottie-placeholder">Loading animation...</div>
+        </div>
+      </Suspense>
+    )
+  }
+
+  return (
+    <Suspense fallback={'Loading animation...'}>
+      <motion.div
+        ref={containerRef}
+        initial={{ filter: 'blur(4px)', opacity: 0 }}
+        animate={{ filter: 'none', opacity: 1 }}
+        transition={{ duration: 0.3, delay: 0, ease: 'easeInOut' }}
+        className={finalContainerClassName}
+        style={containerStyles}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        role="img"
+        aria-label={alt || 'Lottie animation'}
+        title={title}
+        data-block-name={blockName}
+        data-lottie-format={resolvedFormat}
+      >
+        {customCSS ? <style dangerouslySetInnerHTML={{ __html: customCSS }} /> : null}
+
+        {resolvedFormat === 'json' ? (
+          <div
+            ref={lottieRef}
+            className="lottie-animation"
+            style={{ width: '100%', height: '100%', objectFit }}
+          />
+        ) : inView ? (
+          <DotLottieReact
+            src={fileUrl || ''}
+            autoplay={
+              autoplay && !playOnScroll && !hover && !(reducedMotion && prefersReducedMotion)
+            }
+            loop={loop && !(reducedMotion && prefersReducedMotion)}
+            speed={speed}
+            dotLottieRefCallback={(inst) => {
+              dotLottieRef.current = inst
+            }}
+            onLoad={() => {
+              setAnimationLoaded(true)
+            }}
+            style={{ width: '100%', height: '100%' }}
+          />
+        ) : (
+          <div style={{ width: '100%', height: '100%' }} aria-hidden="true" />
+        )}
+
+        {controls && !prefersReducedMotion && (
+          <div className="lottie-controls">
+            <button
+              onClick={handlePlay}
+              className="lottie-control-btn lottie-play"
+              aria-label="Play animation"
+              type="button"
+            >
+              ▶️
+            </button>
+            <button
+              onClick={handlePause}
+              className="lottie-control-btn lottie-pause"
+              aria-label="Pause animation"
+              type="button"
+            >
+              ⏸️
+            </button>
+            <button
+              onClick={handleStop}
+              className="lottie-control-btn lottie-stop"
+              aria-label="Stop animation"
+              type="button"
+            >
+              ⏹️
+            </button>
+          </div>
+        )}
+
+        {reducedMotion && prefersReducedMotion && (
+          <div className="lottie-reduced-motion-notice sr-only">
+            Animation paused due to reduced motion preference
+          </div>
+        )}
+      </motion.div>
+    </Suspense>
+  )
+}
+
+export const DDLottie = LottieBlockComponent
+export default LottieBlockComponent

package/templates/blocks/DD-Lottie/README.md

@@ -0,0 +1,4 @@
+# DD-Lottie
+
+Portable first-pass conversion of `LottieBlock` from ROUND-TWO-CONVERSION. Project-specific roots and nested unconverted block dependencies were intentionally replaced with local rendering so the template can install into a clean Payload project.
+