@inoo-ch/payload-image-optimizer 1.1.0 → 1.1.1

package/src/components/OptimizationStatus.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import React from 'react'
+import { thumbHashToDataURL } from 'thumbhash'
+import { useAllFormFields } from '@payloadcms/ui'
+
+const formatBytes = (bytes: number): string => {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`
+}
+
+const statusColors: Record<string, string> = {
+  pending: '#f59e0b',
+  processing: '#3b82f6',
+  complete: '#10b981',
+  error: '#ef4444',
+}
+
+export const OptimizationStatus: React.FC<{ path?: string }> = (props) => {
+  const [formState] = useAllFormFields()
+  const basePath = props.path ?? 'imageOptimizer'
+
+  const status = formState[`${basePath}.status`]?.value as string | undefined
+  const originalSize = formState[`${basePath}.originalSize`]?.value as number | undefined
+  const optimizedSize = formState[`${basePath}.optimizedSize`]?.value as number | undefined
+  const thumbHash = formState[`${basePath}.thumbHash`]?.value as string | undefined
+  const error = formState[`${basePath}.error`]?.value as string | undefined
+
+  const thumbHashUrl = React.useMemo(() => {
+    if (!thumbHash) return null
+    try {
+      const bytes = Uint8Array.from(atob(thumbHash), c => c.charCodeAt(0))
+      return thumbHashToDataURL(bytes)
+    } catch {
+      return null
+    }
+  }, [thumbHash])
+
+  // Read variants array from form state
+  const variantsField = formState[`${basePath}.variants`]
+  const rowCount = (variantsField as any)?.rows?.length ?? 0
+  const variants: Array<{
+    format?: string
+    filename?: string
+    filesize?: number
+    width?: number
+    height?: number
+  }> = []
+
+  for (let i = 0; i < rowCount; i++) {
+    variants.push({
+      format: formState[`${basePath}.variants.${i}.format`]?.value as string | undefined,
+      filename: formState[`${basePath}.variants.${i}.filename`]?.value as string | undefined,
+      filesize: formState[`${basePath}.variants.${i}.filesize`]?.value as number | undefined,
+      width: formState[`${basePath}.variants.${i}.width`]?.value as number | undefined,
+      height: formState[`${basePath}.variants.${i}.height`]?.value as number | undefined,
+    })
+  }
+
+  if (!status) {
+    return (
+      <div style={{ padding: '12px 0' }}>
+        <div style={{ color: '#6b7280', fontSize: '13px' }}>
+          No optimization data yet. Upload an image to optimize.
+        </div>
+      </div>
+    )
+  }
+
+  const savings =
+    originalSize && optimizedSize
+      ? Math.round((1 - optimizedSize / originalSize) * 100)
+      : null
+
+  return (
+    <div style={{ padding: '12px 0' }}>
+      <div style={{ marginBottom: '8px' }}>
+        <span
+          style={{
+            backgroundColor: statusColors[status] || '#6b7280',
+            borderRadius: '4px',
+            color: '#fff',
+            display: 'inline-block',
+            fontSize: '12px',
+            fontWeight: 600,
+            padding: '2px 8px',
+            textTransform: 'uppercase',
+          }}
+        >
+          {status}
+        </span>
+      </div>
+
+      {error && (
+        <div style={{ color: '#ef4444', fontSize: '13px', marginBottom: '8px' }}>{error}</div>
+      )}
+
+      {originalSize != null && optimizedSize != null && (
+        <div style={{ fontSize: '13px', marginBottom: '8px' }}>
+          <div>Original: <strong>{formatBytes(originalSize)}</strong></div>
+          <div>
+            Optimized: <strong>{formatBytes(optimizedSize)}</strong>
+            {savings != null && savings > 0 && (
+              <span style={{ color: '#10b981', marginLeft: '4px' }}>(-{savings}%)</span>
+            )}
+          </div>
+        </div>
+      )}
+
+      {thumbHashUrl && (
+        <div style={{ marginBottom: '8px' }}>
+          <div style={{ fontSize: '12px', marginBottom: '4px', opacity: 0.7 }}>Blur Preview</div>
+          <img
+            alt="Blur placeholder"
+            src={thumbHashUrl}
+            style={{ borderRadius: '4px', height: '40px', width: 'auto' }}
+          />
+        </div>
+      )}
+
+      {variants.length > 0 && (
+        <div>
+          <div style={{ fontSize: '12px', marginBottom: '4px', opacity: 0.7 }}>Variants</div>
+          {variants.map((v, i) => (
+            <div key={i} style={{ fontSize: '12px', marginBottom: '2px' }}>
+              <strong>{v.format?.toUpperCase()}</strong> — {v.filesize ? formatBytes(v.filesize) : '?'}{' '}
+              ({v.width}x{v.height})
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/RegenerationButton.tsx

@@ -0,0 +1,356 @@
+'use client'
+
+import React, { useState, useEffect, useCallback, useRef } from 'react'
+
+type RegenerationProgress = {
+  total: number
+  complete: number
+  errored: number
+  pending: number
+}
+
+const STALL_THRESHOLD = 5
+
+export const RegenerationButton: React.FC = () => {
+  const [isRunning, setIsRunning] = useState(false)
+  const [progress, setProgress] = useState<RegenerationProgress | null>(null)
+  const [queued, setQueued] = useState<number | null>(null)
+  const [force, setForce] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [stalled, setStalled] = useState(false)
+  const [collectionSlug, setCollectionSlug] = useState<string | null>(null)
+  const [stats, setStats] = useState<RegenerationProgress | null>(null)
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const stallRef = useRef({ lastProcessed: 0, stallCount: 0 })
+  const prevIsRunningRef = useRef(false)
+
+  // Extract collection slug from URL after mount to avoid hydration mismatch
+  useEffect(() => {
+    const slug = window.location.pathname.split('/collections/')[1]?.split('/')[0] ?? null
+    setCollectionSlug(slug)
+  }, [])
+
+  // Fetch optimization stats (independent of regeneration)
+  const fetchStats = useCallback(async () => {
+    if (!collectionSlug) return
+    try {
+      const res = await fetch(
+        `/api/image-optimizer/regenerate?collection=${collectionSlug}`,
+      )
+      if (res.ok) {
+        const data: RegenerationProgress = await res.json()
+        setStats(data)
+      }
+    } catch {
+      // ignore stats fetch errors
+    }
+  }, [collectionSlug])
+
+  const stopPolling = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current)
+      intervalRef.current = null
+    }
+  }, [])
+
+  const pollProgress = useCallback(async () => {
+    if (!collectionSlug) return
+    try {
+      const res = await fetch(
+        `/api/image-optimizer/regenerate?collection=${collectionSlug}`,
+      )
+      if (res.ok) {
+        const data: RegenerationProgress = await res.json()
+        setProgress(data)
+
+        // Stop polling when no more pending
+        if (data.pending <= 0) {
+          setIsRunning(false)
+          stopPolling()
+          return
+        }
+
+        // Stall detection
+        const processed = data.complete + data.errored
+        if (processed === stallRef.current.lastProcessed) {
+          stallRef.current.stallCount += 1
+        } else {
+          stallRef.current.stallCount = 0
+          stallRef.current.lastProcessed = processed
+        }
+
+        if (stallRef.current.stallCount >= STALL_THRESHOLD) {
+          stopPolling()
+          setIsRunning(false)
+          setStalled(true)
+        }
+      }
+    } catch {
+      // ignore polling errors
+    }
+  }, [collectionSlug, stopPolling])
+
+  // On mount (once collectionSlug is known), check if there's an ongoing job and resume polling
+  useEffect(() => {
+    if (!collectionSlug) return
+    let cancelled = false
+    const checkOngoing = async () => {
+      try {
+        const res = await fetch(
+          `/api/image-optimizer/regenerate?collection=${collectionSlug}`,
+        )
+        if (!res.ok || cancelled) return
+        const data: RegenerationProgress = await res.json()
+        // Always store stats on mount
+        setStats(data)
+        if (data.pending > 0) {
+          setProgress(data)
+          setIsRunning(true)
+          setStalled(false)
+          setQueued(null)
+          stallRef.current = { lastProcessed: data.complete + data.errored, stallCount: 0 }
+          intervalRef.current = setInterval(pollProgress, 2000)
+        }
+      } catch {
+        // ignore
+      }
+    }
+    checkOngoing()
+    return () => {
+      cancelled = true
+    }
+  }, [collectionSlug, pollProgress])
+
+  // Refresh stats when regeneration finishes (isRunning transitions from true to false)
+  useEffect(() => {
+    if (prevIsRunningRef.current && !isRunning) {
+      fetchStats()
+    }
+    prevIsRunningRef.current = isRunning
+  }, [isRunning, fetchStats])
+
+  const handleRegenerate = async () => {
+    if (!collectionSlug) return
+    setError(null)
+    setStalled(false)
+    setIsRunning(true)
+    setQueued(null)
+    setProgress(null)
+    stallRef.current = { lastProcessed: 0, stallCount: 0 }
+
+    try {
+      const res = await fetch('/api/image-optimizer/regenerate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ collectionSlug, force }),
+      })
+
+      if (!res.ok) {
+        const data = await res.json()
+        throw new Error(data.error || 'Failed to start regeneration')
+      }
+
+      const data = await res.json()
+      setQueued(data.queued)
+
+      if (data.queued === 0) {
+        setIsRunning(false)
+        return
+      }
+
+      // Start polling
+      intervalRef.current = setInterval(pollProgress, 2000)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+      setIsRunning(false)
+    }
+  }
+
+  // Cleanup interval on unmount
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current)
+    }
+  }, [])
+
+  if (!collectionSlug) return null
+
+  const progressPercent =
+    progress && progress.total > 0
+      ? Math.round((progress.complete / progress.total) * 100)
+      : 0
+
+  const showProgressBar = (isRunning && progress) || (stalled && progress)
+
+  // Stats computations
+  const statsPercent =
+    stats && stats.total > 0
+      ? Math.round((stats.complete / stats.total) * 100)
+      : 0
+  const allOptimized = stats && stats.total > 0 && stats.complete === stats.total
+
+  return (
+    <div
+      style={{
+        padding: '16px 24px',
+        borderBottom: '1px solid #e5e7eb',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '16px',
+        flexWrap: 'wrap',
+      }}
+    >
+      <button
+        onClick={handleRegenerate}
+        disabled={isRunning}
+        style={{
+          backgroundColor: isRunning ? '#9ca3af' : '#4f46e5',
+          color: '#fff',
+          border: 'none',
+          borderRadius: '6px',
+          padding: '8px 16px',
+          fontSize: '14px',
+          fontWeight: 500,
+          cursor: isRunning ? 'not-allowed' : 'pointer',
+        }}
+      >
+        {isRunning ? 'Regenerating...' : 'Regenerate Images'}
+      </button>
+
+      <label
+        style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '13px' }}
+      >
+        <input
+          type="checkbox"
+          checked={force}
+          onChange={(e) => setForce(e.target.checked)}
+          disabled={isRunning}
+        />
+        Force re-process all
+      </label>
+
+      {error && (
+        <span style={{ color: '#ef4444', fontSize: '13px' }}>{error}</span>
+      )}
+
+      {queued === 0 && !isRunning && !stalled && (
+        <span style={{ color: '#10b981', fontSize: '13px' }}>
+          All images already optimized.
+        </span>
+      )}
+
+      {stalled && progress && (
+        <span style={{ color: '#f59e0b', fontSize: '13px' }}>
+          Process stalled. {progress.pending} image{progress.pending !== 1 ? 's' : ''} failed to process.
+        </span>
+      )}
+
+      {showProgressBar && (
+        <div style={{ flex: 1, minWidth: '200px' }}>
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              fontSize: '12px',
+              marginBottom: '4px',
+            }}
+          >
+            <span>
+              {progress.complete} / {progress.total} complete
+            </span>
+            {progress.errored > 0 && (
+              <span style={{ color: '#ef4444' }}>{progress.errored} errors</span>
+            )}
+            <span>{progressPercent}%</span>
+          </div>
+          <div
+            style={{
+              height: '6px',
+              backgroundColor: '#e5e7eb',
+              borderRadius: '3px',
+              overflow: 'hidden',
+            }}
+          >
+            <div
+              style={{
+                height: '100%',
+                width: `${progressPercent}%`,
+                backgroundColor: stalled ? '#f59e0b' : '#10b981',
+                borderRadius: '3px',
+                transition: 'width 0.3s ease',
+              }}
+            />
+          </div>
+        </div>
+      )}
+
+      {!isRunning && !stalled && progress && progress.complete > 0 && queued !== 0 && (
+        <span style={{ fontSize: '13px' }}>
+          <span style={{ color: '#10b981' }}>
+            Done! {progress.complete}/{progress.total} optimized.
+          </span>
+          {progress.errored > 0 && (
+            <span style={{ color: '#ef4444' }}>
+              {' '}{progress.errored} failed.
+            </span>
+          )}
+        </span>
+      )}
+
+      {/* Persistent optimization stats — always visible when not actively regenerating */}
+      {!isRunning && stats && stats.total > 0 && (
+        <div
+          style={{
+            marginLeft: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            gap: '4px',
+            minWidth: '180px',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px' }}>
+            {allOptimized ? (
+              <span style={{ color: '#10b981' }}>
+                &#10003; All {stats.total} images optimized
+              </span>
+            ) : (
+              <>
+                <span style={{ color: '#6b7280' }}>
+                  {stats.complete}/{stats.total} optimized
+                </span>
+                {stats.errored > 0 && (
+                  <>
+                    <span style={{ color: '#d1d5db' }}>&middot;</span>
+                    <span style={{ color: '#ef4444' }}>{stats.errored} errors</span>
+                  </>
+                )}
+              </>
+            )}
+          </div>
+          {!allOptimized && (
+            <div
+              style={{
+                width: '100%',
+                height: '3px',
+                backgroundColor: '#e5e7eb',
+                borderRadius: '2px',
+                overflow: 'hidden',
+              }}
+            >
+              <div
+                style={{
+                  height: '100%',
+                  width: `${statsPercent}%`,
+                  backgroundColor: stats.errored > 0 ? '#f59e0b' : '#10b981',
+                  borderRadius: '2px',
+                  transition: 'width 0.3s ease',
+                }}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/defaults.ts

@@ -0,0 +1,36 @@
+import type { CollectionSlug } from 'payload'
+
+import type { ImageOptimizerConfig, ResolvedCollectionOptimizerConfig, ResolvedImageOptimizerConfig } from './types.js'
+
+export const resolveConfig = (config: ImageOptimizerConfig): ResolvedImageOptimizerConfig => ({
+  collections: config.collections,
+  disabled: config.disabled ?? false,
+  formats: config.formats ?? [
+    { format: 'webp', quality: 80 },
+  ],
+  generateThumbHash: config.generateThumbHash ?? true,
+  maxDimensions: config.maxDimensions ?? { width: 2560, height: 2560 },
+  replaceOriginal: config.replaceOriginal ?? true,
+  stripMetadata: config.stripMetadata ?? true,
+})
+
+export const resolveCollectionConfig = (
+  resolvedConfig: ResolvedImageOptimizerConfig,
+  collectionSlug: string,
+): ResolvedCollectionOptimizerConfig => {
+  const collectionValue = resolvedConfig.collections[collectionSlug as CollectionSlug]
+
+  if (!collectionValue || collectionValue === true) {
+    return {
+      formats: resolvedConfig.formats,
+      maxDimensions: resolvedConfig.maxDimensions,
+      replaceOriginal: resolvedConfig.replaceOriginal,
+    }
+  }
+
+  return {
+    formats: collectionValue.formats ?? resolvedConfig.formats,
+    maxDimensions: collectionValue.maxDimensions ?? resolvedConfig.maxDimensions,
+    replaceOriginal: collectionValue.replaceOriginal ?? resolvedConfig.replaceOriginal,
+  }
+}

package/src/endpoints/regenerate.ts

@@ -0,0 +1,125 @@
+import type { PayloadHandler } from 'payload'
+import type { CollectionSlug } from 'payload'
+
+import type { ResolvedImageOptimizerConfig } from '../types.js'
+
+export const createRegenerateHandler = (resolvedConfig: ResolvedImageOptimizerConfig) => {
+  const handler: PayloadHandler = async (req) => {
+    if (!req.user) {
+      return Response.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    let body: { collectionSlug?: string; force?: boolean }
+    try {
+      body = await req.json!()
+    } catch {
+      body = {}
+    }
+
+    const collectionSlug = body.collectionSlug
+    if (!collectionSlug || !resolvedConfig.collections[collectionSlug as CollectionSlug]) {
+      return Response.json(
+        { error: 'Invalid or unconfigured collection slug' },
+        { status: 400 },
+      )
+    }
+
+    // Find all image documents in the collection
+    const where: any = {
+      mimeType: { contains: 'image/' },
+    }
+    // Unless force=true, skip already-processed docs
+    if (!body.force) {
+      where.or = [
+        { 'imageOptimizer.status': { not_equals: 'complete' } },
+        { 'imageOptimizer.status': { exists: false } },
+      ]
+    }
+
+    let queued = 0
+    let page = 1
+    let hasMore = true
+
+    while (hasMore) {
+      const result = await req.payload.find({
+        collection: collectionSlug as CollectionSlug,
+        limit: 50,
+        page,
+        depth: 0,
+        where,
+        sort: 'createdAt',
+      })
+
+      for (const doc of result.docs) {
+        await req.payload.jobs.queue({
+          task: 'imageOptimizer_regenerateDocument',
+          input: {
+            collectionSlug,
+            docId: String(doc.id),
+          },
+        })
+        queued++
+      }
+
+      hasMore = result.hasNextPage
+      page++
+    }
+
+    // Fire the job runner (non-blocking)
+    if (queued > 0) {
+      req.payload.jobs.run().catch((err: unknown) => {
+        req.payload.logger.error({ err }, 'Regeneration job runner failed')
+      })
+    }
+
+    return Response.json({ queued, collectionSlug })
+  }
+
+  return handler
+}
+
+export const createRegenerateStatusHandler = (resolvedConfig: ResolvedImageOptimizerConfig) => {
+  const handler: PayloadHandler = async (req) => {
+    if (!req.user) {
+      return Response.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const url = new URL(req.url!)
+    const collectionSlug = url.searchParams.get('collection')
+
+    if (!collectionSlug || !resolvedConfig.collections[collectionSlug as CollectionSlug]) {
+      return Response.json({ error: 'Invalid collection slug' }, { status: 400 })
+    }
+
+    const total = await req.payload.count({
+      collection: collectionSlug as CollectionSlug,
+      where: { mimeType: { contains: 'image/' } },
+    })
+
+    const complete = await req.payload.count({
+      collection: collectionSlug as CollectionSlug,
+      where: {
+        mimeType: { contains: 'image/' },
+        'imageOptimizer.status': { equals: 'complete' },
+      },
+    })
+
+    const errored = await req.payload.count({
+      collection: collectionSlug as CollectionSlug,
+      where: {
+        mimeType: { contains: 'image/' },
+        'imageOptimizer.status': { equals: 'error' },
+      },
+    })
+
+    return Response.json({
+      collectionSlug,
+      total: total.totalDocs,
+      complete: complete.totalDocs,
+      errored: errored.totalDocs,
+      pending: total.totalDocs - complete.totalDocs - errored.totalDocs,
+    })
+  }
+
+  return handler
+}

package/src/exports/client.ts

@@ -0,0 +1,6 @@
+export { OptimizationStatus } from '../components/OptimizationStatus.js'
+export { ImageBox } from '../components/ImageBox.js'
+export type { ImageBoxProps } from '../components/ImageBox.js'
+export { getImageOptimizerProps } from '../utilities/getImageOptimizerProps.js'
+export type { ImageOptimizerProps } from '../utilities/getImageOptimizerProps.js'
+export { RegenerationButton } from '../components/RegenerationButton.js'

package/src/exports/rsc.ts

@@ -0,0 +1 @@
+// No RSC components exported by this plugin