@jhits/plugin-images 0.0.1

package/src/components/Image.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import NextImage from 'next/image';
+import React, { useState, useEffect, useCallback } from 'react';
+import { Edit2, Loader2 } from 'lucide-react';
+
+export interface PluginImageProps {
+    id: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    className?: string;
+    fill?: boolean;
+    sizes?: string;
+    priority?: boolean;
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    objectPosition?: string;
+    style?: React.CSSProperties;
+    editable?: boolean;
+}
+
+export function Image({
+    id,
+    alt,
+    width,
+    height,
+    className = '',
+    fill = false,
+    sizes,
+    priority = false,
+    objectFit = 'cover',
+    objectPosition = 'center',
+    style,
+    editable = true,
+}: PluginImageProps) {
+    const [resolvedFilename, setResolvedFilename] = useState<string | null>(null);
+    const [isResolving, setIsResolving] = useState(true);
+    const [brightness, setBrightness] = useState<number>(100);
+    const [blur, setBlur] = useState<number>(0);
+    const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+    const [authChecked, setAuthChecked] = useState<boolean>(false);
+
+    // 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]);
+
+    // Only allow editing if editable is true AND user is authenticated
+    const canEdit = editable && isAuthenticated;
+
+    const resolveImage = useCallback(() => {
+        const looksLikeFilename = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(id) || /^\d+-/.test(id);
+        if (looksLikeFilename) {
+            setResolvedFilename(id);
+            setIsResolving(false);
+            return;
+        }
+
+        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);
+            });
+    }, [id]);
+
+    useEffect(() => {
+        resolveImage();
+        const handleMappingUpdate = (e: any) => {
+            if (e.detail?.id === id) {
+                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]);
+
+    const src = resolvedFilename
+        ? `/api/uploads/${encodeURIComponent(resolvedFilename)}`
+        : `/api/uploads/${encodeURIComponent(id)}`;
+
+    // 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 filterStyle = brightness !== 100 || blur !== 0
+        ? `brightness(${brightness}%) blur(${blur}px)`
+        : undefined;
+
+    const handleEditClick = (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        window.dispatchEvent(new CustomEvent('open-image-editor', {
+            detail: { id, currentBrightness: brightness, currentBlur: blur }
+        }));
+    };
+
+    return (
+        <div
+            className={`group/image relative overflow-hidden transition-all duration-300 ${className}`}
+            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>
+            )}
+
+            {/* THE IMAGE */}
+            <NextImage
+                src={src}
+                alt={alt}
+                width={!shouldFill ? width : undefined}
+                height={!shouldFill ? height : undefined}
+                fill={shouldFill}
+                sizes={sizes || (shouldFill ? "100vw" : undefined)}
+                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="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>
+                </div>
+            )}
+        </div>
+    );
+}