@jhits/plugin-images 0.0.14 → 0.0.15

package/src/components/Image.tsx

@@ -1,10 +1,8 @@
 'use client';
 
 import NextImage from 'next/image';
-import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { Edit2, Loader2 } from 'lucide-react';
-import { getImageTransform, getImageFilter } from '../utils/transforms';
-import { getFallbackImageUrl } from '../utils/fallback';
 
 export let authCache: boolean | null = null;
 let authFetching: Promise<boolean> | null = null;
@@ -41,12 +39,6 @@ export interface PluginImageProps {
     objectPosition?: string;
     style?: React.CSSProperties;
     editable?: boolean;
-    // Props take precedence over API-fetched values
-    scale?: number;
-    positionX?: number;
-    positionY?: number;
-    brightness?: number;
-    blur?: number;
 }
 
 export function Image({
@@ -62,296 +54,149 @@ export function Image({
     objectPosition = 'center',
     style,
     editable = true,
-    ...props // Using rest for override props
 }: PluginImageProps) {
-    // 1. State management (Local only, used if props are undefined)
-    const [apiData, setApiData] = useState({
-        filename: null as string | null,
-        brightness: 100,
-        blur: 0,
-        scale: 1.0,
-        positionX: 0,
-        positionY: 0,
-    });
-
+    const [resolvedFilename, setResolvedFilename] = useState<string | null>(null);
     const [isResolving, setIsResolving] = useState(true);
-    const [baseScale, setBaseScale] = useState(1);
-    const [isAuthenticated, setIsAuthenticated] = useState(false);
-    const [imageError, setImageError] = useState(false);
-
-    const imageRef = useRef<HTMLImageElement | null>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
+    const [brightness, setBrightness] = useState<number>(100);
+    const [blur, setBlur] = useState<number>(0);
+    const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+    const [authChecked, setAuthChecked] = useState<boolean>(false);
 
-    // 2. Derive "Effective" values (Prop > Local State)
-    const effective = useMemo(() => ({
-        brightness: props.brightness ?? apiData.brightness,
-        blur: props.blur ?? apiData.blur,
-        scale: props.scale ?? apiData.scale,
-        positionX: props.positionX ?? apiData.positionX,
-        positionY: props.positionY ?? apiData.positionY,
-        filename: apiData.filename || id
-    }), [props, apiData, id]);
+    // Check authentication status if editable is true (default)
+    useEffect(() => {
+        if (editable && !authChecked) {
+            const checkAuth = async () => {
+                try {
+                    const res = await fetch('/api/me');
+                    const data = await res.json();
+                    if (data.loggedIn && (data.user?.role === 'admin' || data.user?.role === 'dev')) {
+                        setIsAuthenticated(true);
+                    }
+                } catch (error) {
+                    // User is not authenticated or API call failed
+                    setIsAuthenticated(false);
+                } finally {
+                    setAuthChecked(true);
+                }
+            };
+            checkAuth();
+        } else if (!editable) {
+            // If explicitly set to false, skip auth check
+            setAuthChecked(true);
+        }
+    }, [editable, authChecked]);
 
-    // 3. Optimized Image Resolution
-    const fetchImageMetadata = useCallback(async (targetId: string) => {
-        const isLikelyPath = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(targetId) || /^\d+-/.test(targetId);
+    // Only allow editing if editable is true AND user is authenticated
+    const canEdit = editable && isAuthenticated;
 
-        if (isLikelyPath) {
-            setApiData(prev => ({ ...prev, filename: targetId }));
+    const resolveImage = useCallback(() => {
+        const looksLikeFilename = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(id) || /^\d+-/.test(id);
+        if (looksLikeFilename) {
+            setResolvedFilename(id);
             setIsResolving(false);
             return;
         }
 
-        try {
-            const res = await fetch(`/api/plugin-images/resolve?id=${encodeURIComponent(targetId)}`);
-            if (!res.ok) throw new Error();
-            const data = await res.json();
-            const apiPositionX = data.positionX ?? 0;
-            const apiPositionY = data.positionY ?? 0;
-            const apiScale = data.scale ?? 1.0;
-            setApiData({
-                filename: data.filename || targetId,
-                brightness: data.brightness ?? 100,
-                blur: data.blur ?? 0,
-                scale: apiScale,
-                positionX: apiPositionX,
-                positionY: apiPositionY,
+        fetch(`/api/plugin-images/resolve?id=${encodeURIComponent(id)}`)
+            .then(res => res.ok ? res.json() : { filename: id, brightness: 100, blur: 0 })
+            .then(data => {
+                setResolvedFilename(data.filename || id);
+                setBrightness(data.brightness ?? 100);
+                setBlur(data.blur ?? 0);
+                setIsResolving(false);
+            })
+            .catch(() => {
+                setResolvedFilename(id);
+                setBrightness(100);
+                setBlur(0);
+                setIsResolving(false);
             });
-            // Reset error state when resolution succeeds (in case it was set during pre-check)
-            setImageError(false);
-        } catch {
-            setApiData(prev => ({ ...prev, filename: targetId }));
-        } finally {
-            setIsResolving(false);
-        }
-    }, []);
-
-    // 4. Auth Check (Cached - only fetches once)
-    useEffect(() => {
-        if (!editable) return;
-        checkAuthOnce().then(setIsAuthenticated);
-    }, [editable]);
+    }, [id]);
 
-    // 5. Stable Event Listener (Prevents closure staleness)
-    // Only fetch from API if props are not provided (parent controls the values)
-    const hasProps = props.scale !== undefined || props.positionX !== undefined || props.positionY !== undefined || props.brightness !== undefined || props.blur !== undefined;
-    
     useEffect(() => {
-        fetchImageMetadata(id);
-
-        // Only listen to events if props are not provided
-        if (hasProps) return;
-
-        const handleUpdate = (e: any) => {
+        resolveImage();
+        const handleMappingUpdate = (e: any) => {
             if (e.detail?.id === id) {
-                // Only update if the event contains new data
-                const eventData = e.detail;
-                if (eventData.scale !== undefined || eventData.positionX !== undefined || eventData.positionY !== undefined || eventData.brightness !== undefined || eventData.blur !== undefined) {
-                    // Update local state directly from event to avoid unnecessary API call
-                    setApiData(prev => ({
-                        ...prev,
-                        brightness: eventData.brightness ?? prev.brightness,
-                        blur: eventData.blur ?? prev.blur,
-                        scale: eventData.scale ?? prev.scale,
-                        positionX: eventData.positionX ?? prev.positionX,
-                        positionY: eventData.positionY ?? prev.positionY,
-                    }));
-                }
+                setIsResolving(true);
+                if (e.detail.brightness !== undefined) setBrightness(e.detail.brightness);
+                if (e.detail.blur !== undefined) setBlur(e.detail.blur);
+                setTimeout(() => resolveImage(), 100);
             }
         };
+        window.addEventListener('image-mapping-updated', handleMappingUpdate as EventListener);
+        return () => window.removeEventListener('image-mapping-updated', handleMappingUpdate as EventListener);
+    }, [id, resolveImage]);
 
-        window.addEventListener('image-mapping-updated', handleUpdate);
-        return () => window.removeEventListener('image-mapping-updated', handleUpdate);
-    }, [id, fetchImageMetadata, hasProps]);
+    const src = resolvedFilename
+        ? `/api/uploads/${encodeURIComponent(resolvedFilename)}`
+        : `/api/uploads/${encodeURIComponent(id)}`;
 
-    // 6. Layout & Transforms
-    const calculateBaseScale = useCallback(() => {
-        if (!imageRef.current || !containerRef.current) return;
-        const containerWidth = containerRef.current.offsetWidth;
-        const containerHeight = containerRef.current.offsetHeight;
-        
-        // Ensure container has dimensions before calculating
-        if (containerWidth === 0 || containerHeight === 0) {
-            // Try to get dimensions from computed styles or parent
-            const parentWidth = containerRef.current.parentElement?.clientWidth;
-            const parentHeight = containerRef.current.parentElement?.clientHeight;
-            
-            if (parentWidth && parentHeight && imageRef.current.naturalWidth > 0) {
-                const widthRatio = parentWidth / imageRef.current.naturalWidth;
-                const heightRatio = parentHeight / imageRef.current.naturalHeight;
-                const calculatedBaseScale = Math.max(widthRatio, heightRatio);
-                setBaseScale(calculatedBaseScale);
-            }
-            return;
-        }
-        
-        if (imageRef.current.naturalWidth === 0 || imageRef.current.naturalHeight === 0) return;
-        
-        const widthRatio = containerWidth / imageRef.current.naturalWidth;
-        const heightRatio = containerHeight / imageRef.current.naturalHeight;
-        const calculatedBaseScale = Math.max(widthRatio, heightRatio);
-        setBaseScale(calculatedBaseScale);
-    }, []);
-
-    // Only construct image URL if we have a valid filename (not a semantic ID)
-    // Check if filename looks like an actual file (has extension or starts with timestamp)
-    const filename = effective.filename;
-    const hasFileExtension = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(filename);
-    const looksLikeTimestamp = /^\d+-/.test(filename);
-    const isValidFilename = hasFileExtension || looksLikeTimestamp;
-    
-    // Don't construct URL until resolution is complete AND we have a valid filename
-    const shouldConstructUrl = !isResolving && isValidFilename;
-    const baseSrc = shouldConstructUrl ? `/api/uploads/${encodeURIComponent(filename)}` : null;
-    const src = imageError ? getFallbackImageUrl() : (baseSrc || getFallbackImageUrl());
+    // Logic: If the user passes 'w-full' or 'h-full', or explicit 'fill', 
+    // we must use Next.js fill mode to make object-fit work.
     const shouldFill = fill || className.includes('w-full') || className.includes('h-full');
-    const hasTransforms = effective.scale !== 1 || effective.positionX !== 0 || effective.positionY !== 0;
 
-    // Pre-check image URL to detect errors early (only for valid filenames after resolution)
-    useEffect(() => {
-        // Don't check if:
-        // 1. Already in error state
-        // 2. Still resolving
-        // 3. No valid base src
-        // 4. Base src is the fallback URL
-        if (imageError || isResolving || !baseSrc || baseSrc === getFallbackImageUrl() || !isValidFilename) return;
-        
-        const testImg = document.createElement('img');
-        const handleError = () => {
-            setImageError(true);
-        };
-        const handleLoad = () => {
-            setImageError(false);
-        };
-        
-        testImg.onerror = handleError;
-        testImg.onload = handleLoad;
-        testImg.src = baseSrc;
-        
-        return () => {
-            testImg.onerror = null;
-            testImg.onload = null;
-        };
-    }, [baseSrc, imageError, isResolving, isValidFilename]);
+    // Default sizes for fill images when not provided - use unoptimized since these are API routes
+    const imageSizes = shouldFill ? (sizes || undefined) : sizes;
 
-    // Recalculate baseScale when container is resized
-    useEffect(() => {
-        if (!hasTransforms || !shouldFill || !containerRef.current) return;
-        
-        const resizeObserver = new ResizeObserver(() => {
-            calculateBaseScale();
-        });
-        
-        resizeObserver.observe(containerRef.current);
-        return () => resizeObserver.disconnect();
-    }, [hasTransforms, shouldFill, calculateBaseScale]);
+    const filterStyle = brightness !== 100 || blur !== 0
+        ? `brightness(${brightness}%) blur(${blur}px)`
+        : undefined;
 
-    const transformStyle = hasTransforms && baseScale > 0 ? (() => {
-        return getImageTransform({
-            scale: effective.scale,
-            positionX: effective.positionX,
-            positionY: effective.positionY,
-            baseScale
-        }, true);
-    })() : undefined;
-
-    const filterStyle = getImageFilter(effective.brightness, effective.blur);
+    const handleEditClick = (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        window.dispatchEvent(new CustomEvent('open-image-editor', {
+            detail: { id, currentBrightness: brightness, currentBlur: blur }
+        }));
+    };
 
     return (
         <div
-            ref={containerRef}
             className={`group/image relative overflow-hidden transition-all duration-300 ${className}`}
-            style={{ 
-                ...style, 
-                filter: filterStyle || style?.filter,
-                // Ensure container has explicit positioning context
+            style={{
+                ...style,
                 position: 'relative',
+                filter: filterStyle || style?.filter,
             }}
             data-image-id={id}
         >
+            {/* RESOLVING STATE */}
             {isResolving && (
                 <div className="absolute inset-0 z-20 flex items-center justify-center bg-neutral-100 dark:bg-neutral-800 animate-pulse">
                     <Loader2 className="w-5 h-5 animate-spin text-neutral-400" />
                 </div>
             )}
 
-            {hasTransforms && shouldFill ? (
-                baseSrc ? (
-                    <img
-                        ref={imageRef}
-                        src={src}
-                        alt={alt}
-                        loading={priority ? 'eager' : 'lazy'}
-                        onLoad={calculateBaseScale}
-                        onError={() => setImageError(true)}
-                        className="absolute max-w-none select-none"
-                        style={{
-                            top: '50%',
-                            left: '50%',
-                            width: 'auto',  // Allow image to maintain natural aspect ratio
-                            height: 'auto', // Allow image to maintain natural aspect ratio
-                            minWidth: '100%', // Ensure image covers container width
-                            minHeight: '100%', // Ensure image covers container height
-                            transform: baseScale > 0 && transformStyle 
-                                ? transformStyle 
-                                : 'translate(-50%, -50%)',
-                            transformOrigin: 'center center',
-                            position: 'absolute',
-                        }}
-                        draggable={false}
-                    />
-                ) : null
-            ) : imageError || !baseSrc ? (
-                // Fallback to regular img tag when error occurs or no valid filename yet
-                <img
-                    src={getFallbackImageUrl()}
-                    alt={alt}
-                    loading={priority ? 'eager' : 'lazy'}
-                    className={`transition-all duration-500 ${editable ? 'group-hover/image:scale-105' : ''}`}
-                    style={{
-                        objectFit,
-                        objectPosition,
-                        width: shouldFill ? '100%' : width,
-                        height: shouldFill ? '100%' : height,
-                        ...(transformStyle ? { transform: transformStyle } : {}),
-                        ...style,
-                    }}
-                />
-            ) : (
-                <NextImage
-                    src={src}
-                    alt={alt}
-                    width={!shouldFill ? width : undefined}
-                    height={!shouldFill ? height : undefined}
-                    fill={shouldFill}
-                    sizes={sizes || (shouldFill ? "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" : undefined)}
-                    priority={priority}
-                    loading={priority ? 'eager' : undefined}
-                    className={`transition-all duration-500 ${editable ? 'group-hover/image:scale-105' : ''}`}
-                    style={{
-                        objectFit,
-                        objectPosition,
-                        ...(transformStyle ? { transform: transformStyle } : {}),
-                        ...style,
-                    }}
-                />
-            )}
-
-            {editable && isAuthenticated && (
-                <button
-                    onClick={(e) => {
-                        e.preventDefault();
-                        window.dispatchEvent(new CustomEvent('open-image-editor', {
-                            detail: { id, currentBrightness: effective.brightness, currentBlur: effective.blur }
-                        }));
-                    }}
-                    className="absolute inset-0 z-30 flex items-center justify-center opacity-0 group-hover/image:opacity-100 transition-all duration-300 bg-neutral-900/40 backdrop-blur-[2px]"
+            {/* THE IMAGE */}
+            <NextImage
+                src={src}
+                alt={alt}
+                width={!shouldFill ? width : undefined}
+                height={!shouldFill ? height : undefined}
+                fill={shouldFill}
+                sizes={imageSizes}
+                unoptimized
+                priority={priority}
+                className={`transition-all duration-500 ease-in-out ${editable ? 'group-hover/image:scale-105' : ''}`}
+                style={{
+                    objectFit: objectFit,
+                    objectPosition: objectPosition,
+                }}
+            />
+
+            {/* EDIT OVERLAY - Dashboard Theme */}
+            {canEdit && (
+                <div
+                    onClick={handleEditClick}
+                    className="absolute inset-0 z-30 flex items-center justify-center opacity-0 group-hover/image:opacity-100 transition-all duration-300 cursor-pointer"
                 >
-                    <div className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 rounded-full shadow-xl">
-                        <Edit2 size={14} className="text-primary" />
-                        <span className="text-[10px] font-bold uppercase tracking-widest">Edit</span>
+                    <div className="absolute inset-0 bg-neutral-900/40 dark:bg-neutral-900/60 backdrop-blur-[2px]" />
+
+                    <div className="relative flex items-center gap-2 px-4 py-2.5 bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-full shadow-2xl scale-90 group-hover/image:scale-100 transition-all duration-300 border border-neutral-300 dark:border-neutral-700">
+                        <Edit2 size={14} strokeWidth={2.5} className="text-primary" />
+                        <span className="text-[10px] font-black uppercase tracking-widest">Edit</span>
                     </div>
-                </button>
+                </div>
             )}
         </div>
     );