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

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

package/src/fields/imageOptimizerField.ts

@@ -0,0 +1,70 @@
+import type { GroupField } from 'payload'
+
+export const getImageOptimizerField = (): GroupField => ({
+  name: 'imageOptimizer',
+  type: 'group',
+  admin: {
+    position: 'sidebar',
+    readOnly: true,
+    components: {
+      Field: '@inoo-ch/payload-image-optimizer/client#OptimizationStatus',
+    },
+  },
+  fields: [
+    {
+      name: 'thumbHash',
+      type: 'text',
+    },
+    {
+      name: 'originalSize',
+      type: 'number',
+    },
+    {
+      name: 'optimizedSize',
+      type: 'number',
+    },
+    {
+      name: 'status',
+      type: 'select',
+      options: ['pending', 'processing', 'complete', 'error'],
+    },
+    {
+      name: 'error',
+      type: 'text',
+    },
+    {
+      name: 'variants',
+      type: 'array',
+      fields: [
+        {
+          name: 'format',
+          type: 'text',
+        },
+        {
+          name: 'filename',
+          type: 'text',
+        },
+        {
+          name: 'filesize',
+          type: 'number',
+        },
+        {
+          name: 'width',
+          type: 'number',
+        },
+        {
+          name: 'height',
+          type: 'number',
+        },
+        {
+          name: 'mimeType',
+          type: 'text',
+        },
+        {
+          name: 'url',
+          type: 'text',
+        },
+      ],
+    },
+  ],
+})

package/src/hooks/afterChange.ts

@@ -0,0 +1,77 @@
+import fs from 'fs/promises'
+import path from 'path'
+import type { CollectionAfterChangeHook } from 'payload'
+
+import type { ResolvedImageOptimizerConfig } from '../types.js'
+import { resolveCollectionConfig } from '../defaults.js'
+
+export const createAfterChangeHook = (
+  resolvedConfig: ResolvedImageOptimizerConfig,
+  collectionSlug: string,
+): CollectionAfterChangeHook => {
+  return async ({ context, doc, req }) => {
+    if (context?.imageOptimizer_skip) return doc
+
+    if (!req.file || !req.file.data || !req.file.mimetype?.startsWith('image/')) return doc
+
+    const collectionConfig = req.payload.collections[collectionSlug as keyof typeof req.payload.collections].config
+    let staticDir: string =
+      typeof collectionConfig.upload === 'object' ? collectionConfig.upload.staticDir || '' : ''
+
+    if (staticDir && !path.isAbsolute(staticDir)) {
+      staticDir = path.resolve(process.cwd(), staticDir)
+    }
+
+    const perCollectionConfig = resolveCollectionConfig(resolvedConfig, collectionSlug)
+
+    // Overwrite the file on disk with the processed (stripped/resized/converted) buffer
+    // Payload 3.0 writes the original buffer to disk; we replace it here
+    const processedBuffer = context.imageOptimizer_processedBuffer as Buffer | undefined
+    if (processedBuffer && doc.filename && staticDir) {
+      const safeFilename = path.basename(doc.filename as string)
+      const filePath = path.join(staticDir, safeFilename)
+      await fs.writeFile(filePath, processedBuffer)
+
+      // If replaceOriginal changed the filename, clean up the old file Payload wrote
+      const originalFilename = context.imageOptimizer_originalFilename as string | undefined
+      if (originalFilename && originalFilename !== safeFilename) {
+        const oldFilePath = path.join(staticDir, path.basename(originalFilename))
+        await fs.unlink(oldFilePath).catch(() => {
+          // Old file may not exist if Payload used the new filename
+        })
+      }
+    }
+
+    // When replaceOriginal is on and only one format is configured, the main file
+    // is already converted — skip the async job and mark complete immediately.
+    if (perCollectionConfig.replaceOriginal && perCollectionConfig.formats.length <= 1) {
+      await req.payload.update({
+        collection: collectionSlug,
+        id: doc.id,
+        data: {
+          imageOptimizer: {
+            status: 'complete',
+            variants: [],
+          },
+        },
+        context: { imageOptimizer_skip: true },
+      })
+      return doc
+    }
+
+    // Queue async format conversion job for remaining variants
+    await req.payload.jobs.queue({
+      task: 'imageOptimizer_convertFormats',
+      input: {
+        collectionSlug,
+        docId: String(doc.id),
+      },
+    })
+
+    req.payload.jobs.run().catch((err: unknown) => {
+      req.payload.logger.error({ err }, 'Image optimizer job runner failed')
+    })
+
+    return doc
+  }
+}