feat: add gallery
This commit is contained in:
parent
b7bb37f2a7
commit
1b3a357b5d
|
|
@ -0,0 +1,5 @@
|
|||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
|
||||
|
|
@ -1,9 +1,17 @@
|
|||
import { createDbClient } from '@banatie/database';
|
||||
import { config } from 'dotenv';
|
||||
import path from 'path';
|
||||
|
||||
// Load .env from api-service directory BEFORE reading env vars
|
||||
// __dirname in tsx points to src directory, so ../.env goes to api-service/.env
|
||||
config({ path: path.join(__dirname, '../.env'), debug: true });
|
||||
|
||||
const DATABASE_URL =
|
||||
process.env['DATABASE_URL'] ||
|
||||
'postgresql://banatie_user:banatie_secure_password@localhost:5434/banatie_db';
|
||||
|
||||
console.log('[DB] Using DATABASE_URL:', DATABASE_URL);
|
||||
|
||||
export const db = createDbClient(DATABASE_URL);
|
||||
|
||||
console.log(
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import { Router, Request, Response } from 'express';
|
||||
import { StorageFactory } from '../services/StorageFactory';
|
||||
import { asyncHandler } from '../middleware/errorHandler';
|
||||
import { validateApiKey } from '../middleware/auth/validateApiKey';
|
||||
import { requireProjectKey } from '../middleware/auth/requireProjectKey';
|
||||
import { rateLimitByApiKey } from '../middleware/auth/rateLimiter';
|
||||
|
||||
export const imagesRouter = Router();
|
||||
|
||||
|
|
@ -135,3 +138,93 @@ imagesRouter.get(
|
|||
}
|
||||
}),
|
||||
);
|
||||
|
||||
/**
|
||||
* GET /api/images/generated
|
||||
* List generated images for the authenticated project
|
||||
*/
|
||||
imagesRouter.get(
|
||||
'/images/generated',
|
||||
validateApiKey,
|
||||
requireProjectKey,
|
||||
rateLimitByApiKey,
|
||||
asyncHandler(async (req: any, res: Response) => {
|
||||
const timestamp = new Date().toISOString();
|
||||
const requestId = req.requestId;
|
||||
|
||||
// Parse and validate query parameters
|
||||
const limit = Math.min(Math.max(parseInt(req.query.limit as string, 10) || 30, 1), 100);
|
||||
const offset = Math.max(parseInt(req.query.offset as string, 10) || 0, 0);
|
||||
const prefix = (req.query.prefix as string) || undefined;
|
||||
|
||||
// Validate query parameters
|
||||
if (isNaN(limit) || isNaN(offset)) {
|
||||
return res.status(400).json({
|
||||
success: false,
|
||||
message: 'Invalid query parameters',
|
||||
error: 'limit and offset must be valid numbers',
|
||||
});
|
||||
}
|
||||
|
||||
// Extract org/project from validated API key
|
||||
const orgId = req.apiKey?.organizationSlug || 'default';
|
||||
const projectId = req.apiKey?.projectSlug!;
|
||||
|
||||
console.log(
|
||||
`[${timestamp}] [${requestId}] Listing generated images for org:${orgId}, project:${projectId}, limit:${limit}, offset:${offset}, prefix:${prefix || 'none'}`,
|
||||
);
|
||||
|
||||
try {
|
||||
// Get storage service instance
|
||||
const storageService = await StorageFactory.getInstance();
|
||||
|
||||
// List files in generated category
|
||||
const allFiles = await storageService.listFiles(orgId, projectId, 'generated', prefix);
|
||||
|
||||
// Sort by lastModified descending (newest first)
|
||||
allFiles.sort((a, b) => {
|
||||
const dateA = a.lastModified ? new Date(a.lastModified).getTime() : 0;
|
||||
const dateB = b.lastModified ? new Date(b.lastModified).getTime() : 0;
|
||||
return dateB - dateA;
|
||||
});
|
||||
|
||||
// Apply pagination
|
||||
const total = allFiles.length;
|
||||
const paginatedFiles = allFiles.slice(offset, offset + limit);
|
||||
|
||||
// Map to response format with public URLs
|
||||
const images = paginatedFiles.map((file) => ({
|
||||
filename: file.filename,
|
||||
url: storageService.getPublicUrl(orgId, projectId, 'generated', file.filename),
|
||||
size: file.size,
|
||||
contentType: file.contentType,
|
||||
lastModified: file.lastModified ? file.lastModified.toISOString() : new Date().toISOString(),
|
||||
}));
|
||||
|
||||
const hasMore = offset + limit < total;
|
||||
|
||||
console.log(
|
||||
`[${timestamp}] [${requestId}] Successfully listed ${images.length} of ${total} generated images`,
|
||||
);
|
||||
|
||||
return res.status(200).json({
|
||||
success: true,
|
||||
data: {
|
||||
images,
|
||||
total,
|
||||
offset,
|
||||
limit,
|
||||
hasMore,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(`[${timestamp}] [${requestId}] Failed to list generated images:`, error);
|
||||
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: 'Failed to list generated images',
|
||||
error: error instanceof Error ? error.message : 'Unknown error occurred',
|
||||
});
|
||||
}
|
||||
}),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,10 @@
|
|||
// Load environment variables FIRST before any other imports
|
||||
import { config } from 'dotenv';
|
||||
import { resolve } from 'path';
|
||||
|
||||
// Explicitly load from api-service .env file (not root)
|
||||
config({ path: resolve(__dirname, '../.env') });
|
||||
|
||||
import { createApp, appConfig } from './app';
|
||||
import fs from 'fs';
|
||||
|
||||
|
|
|
|||
|
|
@ -449,11 +449,16 @@ export class MinioStorageService implements StorageService {
|
|||
etag: metadata.etag,
|
||||
path: obj.name,
|
||||
});
|
||||
} catch (error) {}
|
||||
} catch (error) {
|
||||
console.error('[MinIO listFiles] Error processing file:', obj.name, error);
|
||||
}
|
||||
});
|
||||
|
||||
stream.on('end', () => resolve(files));
|
||||
stream.on('error', reject);
|
||||
stream.on('error', (error) => {
|
||||
console.error('[MinIO listFiles] Stream error:', error);
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,377 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { MinimizedApiKey } from '@/components/demo/MinimizedApiKey';
|
||||
import { ImageZoomModal } from '@/components/demo/ImageZoomModal';
|
||||
import { ImageGrid } from '@/components/demo/gallery/ImageGrid';
|
||||
import { EmptyGalleryState } from '@/components/demo/gallery/EmptyGalleryState';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
|
||||
const API_KEY_STORAGE_KEY = 'banatie_demo_api_key';
|
||||
const IMAGES_PER_PAGE = 30;
|
||||
|
||||
type ImageItem = {
|
||||
name: string;
|
||||
url: string;
|
||||
size: number;
|
||||
contentType: string;
|
||||
lastModified: string;
|
||||
};
|
||||
|
||||
type ImagesResponse = {
|
||||
success: boolean;
|
||||
data?: {
|
||||
images: ImageItem[];
|
||||
total: number;
|
||||
offset: number;
|
||||
limit: number;
|
||||
hasMore: boolean;
|
||||
};
|
||||
error?: string;
|
||||
message?: string;
|
||||
};
|
||||
|
||||
type ApiKeyInfo = {
|
||||
organizationSlug?: string;
|
||||
projectSlug?: string;
|
||||
};
|
||||
|
||||
type DownloadTimeMap = {
|
||||
[imageId: string]: number;
|
||||
};
|
||||
|
||||
export default function GalleryPage() {
|
||||
const [apiKey, setApiKey] = useState('');
|
||||
const [apiKeyVisible, setApiKeyVisible] = useState(false);
|
||||
const [apiKeyValidated, setApiKeyValidated] = useState(false);
|
||||
const [apiKeyInfo, setApiKeyInfo] = useState<ApiKeyInfo | null>(null);
|
||||
const [apiKeyError, setApiKeyError] = useState('');
|
||||
const [validatingKey, setValidatingKey] = useState(false);
|
||||
|
||||
const [images, setImages] = useState<ImageItem[]>([]);
|
||||
const [offset, setOffset] = useState(0);
|
||||
const [hasMore, setHasMore] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const [zoomedImageUrl, setZoomedImageUrl] = useState<string | null>(null);
|
||||
const [downloadTimes, setDownloadTimes] = useState<DownloadTimeMap>({});
|
||||
|
||||
useEffect(() => {
|
||||
const storedApiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
|
||||
if (storedApiKey) {
|
||||
setApiKey(storedApiKey);
|
||||
validateStoredApiKey(storedApiKey);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const validateStoredApiKey = async (keyToValidate: string) => {
|
||||
setValidatingKey(true);
|
||||
setApiKeyError('');
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/api/info`, {
|
||||
headers: {
|
||||
'X-API-Key': keyToValidate,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setApiKeyValidated(true);
|
||||
if (data.keyInfo) {
|
||||
setApiKeyInfo({
|
||||
organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
|
||||
projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
|
||||
});
|
||||
} else {
|
||||
setApiKeyInfo({
|
||||
organizationSlug: 'Unknown',
|
||||
projectSlug: 'Unknown',
|
||||
});
|
||||
}
|
||||
await fetchImages(keyToValidate, 0);
|
||||
} else {
|
||||
localStorage.removeItem(API_KEY_STORAGE_KEY);
|
||||
setApiKeyError('Stored API key is invalid or expired');
|
||||
setApiKeyValidated(false);
|
||||
}
|
||||
} catch (error) {
|
||||
setApiKeyError('Failed to validate stored API key');
|
||||
setApiKeyValidated(false);
|
||||
} finally {
|
||||
setValidatingKey(false);
|
||||
}
|
||||
};
|
||||
|
||||
const validateApiKey = async () => {
|
||||
if (!apiKey.trim()) {
|
||||
setApiKeyError('Please enter an API key');
|
||||
return;
|
||||
}
|
||||
|
||||
setValidatingKey(true);
|
||||
setApiKeyError('');
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/api/info`, {
|
||||
headers: {
|
||||
'X-API-Key': apiKey,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setApiKeyValidated(true);
|
||||
localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);
|
||||
|
||||
if (data.keyInfo) {
|
||||
setApiKeyInfo({
|
||||
organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
|
||||
projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
|
||||
});
|
||||
} else {
|
||||
setApiKeyInfo({
|
||||
organizationSlug: 'Unknown',
|
||||
projectSlug: 'Unknown',
|
||||
});
|
||||
}
|
||||
|
||||
await fetchImages(apiKey, 0);
|
||||
} else {
|
||||
const error = await response.json();
|
||||
setApiKeyError(error.message || 'Invalid API key');
|
||||
setApiKeyValidated(false);
|
||||
}
|
||||
} catch (error) {
|
||||
setApiKeyError('Failed to validate API key. Please check your connection.');
|
||||
setApiKeyValidated(false);
|
||||
} finally {
|
||||
setValidatingKey(false);
|
||||
}
|
||||
};
|
||||
|
||||
const revokeApiKey = () => {
|
||||
localStorage.removeItem(API_KEY_STORAGE_KEY);
|
||||
setApiKey('');
|
||||
setApiKeyValidated(false);
|
||||
setApiKeyInfo(null);
|
||||
setApiKeyError('');
|
||||
setImages([]);
|
||||
setOffset(0);
|
||||
setHasMore(false);
|
||||
setError('');
|
||||
};
|
||||
|
||||
const fetchImages = async (keyToUse: string, fetchOffset: number) => {
|
||||
if (fetchOffset === 0) {
|
||||
setLoading(true);
|
||||
} else {
|
||||
setLoadingMore(true);
|
||||
}
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${API_BASE_URL}/api/images/generated?limit=${IMAGES_PER_PAGE}&offset=${fetchOffset}`,
|
||||
{
|
||||
headers: {
|
||||
'X-API-Key': keyToUse,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData: ImagesResponse = await response.json();
|
||||
throw new Error(errorData.error || errorData.message || 'Failed to fetch images');
|
||||
}
|
||||
|
||||
const result: ImagesResponse = await response.json();
|
||||
|
||||
if (result.success && result.data) {
|
||||
const { images: newImages, offset: newOffset, hasMore: newHasMore } = result.data;
|
||||
|
||||
if (fetchOffset === 0) {
|
||||
setImages(newImages);
|
||||
} else {
|
||||
setImages((prev) => [...prev, ...newImages]);
|
||||
}
|
||||
setOffset(newOffset);
|
||||
setHasMore(newHasMore);
|
||||
} else {
|
||||
throw new Error(result.error || 'Failed to fetch images');
|
||||
}
|
||||
} catch (error) {
|
||||
setError(error instanceof Error ? error.message : 'Failed to load images');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setLoadingMore(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLoadMore = () => {
|
||||
const newOffset = offset + IMAGES_PER_PAGE;
|
||||
fetchImages(apiKey, newOffset);
|
||||
};
|
||||
|
||||
const handleDownloadMeasured = useCallback((imageId: string, downloadMs: number) => {
|
||||
setDownloadTimes((prev) => ({
|
||||
...prev,
|
||||
[imageId]: downloadMs,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative z-10 max-w-7xl mx-auto px-6 py-12 md:py-16 min-h-screen">
|
||||
{apiKeyValidated && apiKeyInfo && (
|
||||
<MinimizedApiKey
|
||||
organizationSlug={apiKeyInfo.organizationSlug || 'Unknown'}
|
||||
projectSlug={apiKeyInfo.projectSlug || 'Unknown'}
|
||||
apiKey={apiKey}
|
||||
onRevoke={revokeApiKey}
|
||||
/>
|
||||
)}
|
||||
|
||||
<header className="mb-8 md:mb-12">
|
||||
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
|
||||
Image Gallery
|
||||
</h1>
|
||||
<p className="text-gray-400 text-base md:text-lg">
|
||||
Browse your AI-generated images
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{!apiKeyValidated && (
|
||||
<section
|
||||
className="mb-6 p-5 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl"
|
||||
aria-label="API Key Validation"
|
||||
>
|
||||
<h2 className="text-lg font-semibold text-white mb-3">API Key</h2>
|
||||
<div className="flex gap-3">
|
||||
<div className="flex-1 relative">
|
||||
<input
|
||||
type={apiKeyVisible ? 'text' : 'password'}
|
||||
value={apiKey}
|
||||
onChange={(e) => setApiKey(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
validateApiKey();
|
||||
}
|
||||
}}
|
||||
placeholder="Enter your API key"
|
||||
className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent pr-12"
|
||||
aria-label="API key input"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setApiKeyVisible(!apiKeyVisible)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 p-2 text-gray-400 hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-amber-500 rounded"
|
||||
aria-label={apiKeyVisible ? 'Hide API key' : 'Show API key'}
|
||||
>
|
||||
{apiKeyVisible ? (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={validateApiKey}
|
||||
disabled={validatingKey}
|
||||
className="px-6 py-3 rounded-lg bg-amber-600 text-white font-semibold hover:bg-amber-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-slate-950 min-h-[44px]"
|
||||
aria-busy={validatingKey}
|
||||
>
|
||||
{validatingKey ? 'Validating...' : 'Validate'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{apiKeyError && (
|
||||
<div className="mt-3 p-3 bg-red-900/20 border border-red-700/50 rounded-lg" role="alert" aria-live="assertive">
|
||||
<p className="text-sm text-red-400 font-medium mb-1">{apiKeyError}</p>
|
||||
<p className="text-xs text-red-300/80">
|
||||
{apiKeyError.includes('Invalid')
|
||||
? 'Please check your API key and try again. You can create a new key in the admin dashboard.'
|
||||
: 'Please check your internet connection and try again.'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{apiKeyValidated && (
|
||||
<section aria-label="Image Gallery">
|
||||
{loading ? (
|
||||
<div className="flex flex-col items-center justify-center py-16" role="status" aria-live="polite">
|
||||
<div className="animate-spin w-12 h-12 border-4 border-amber-600 border-t-transparent rounded-full mb-4" aria-hidden="true"></div>
|
||||
<p className="text-gray-400">Loading images...</p>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="p-6 bg-red-900/20 border border-red-700/50 rounded-2xl" role="alert" aria-live="assertive">
|
||||
<p className="text-red-400 font-medium mb-2">{error}</p>
|
||||
<p className="text-sm text-red-300/80">
|
||||
{error.includes('fetch') || error.includes('load')
|
||||
? 'Unable to load images. Please check your connection and try refreshing the page.'
|
||||
: 'An error occurred while fetching your images. Please try again later.'}
|
||||
</p>
|
||||
</div>
|
||||
) : images.length === 0 ? (
|
||||
<EmptyGalleryState />
|
||||
) : (
|
||||
<>
|
||||
<ImageGrid
|
||||
images={images}
|
||||
onImageZoom={setZoomedImageUrl}
|
||||
onDownloadMeasured={handleDownloadMeasured}
|
||||
/>
|
||||
|
||||
{hasMore && (
|
||||
<div className="flex justify-center mt-8">
|
||||
<button
|
||||
onClick={handleLoadMore}
|
||||
disabled={loadingMore}
|
||||
className="px-8 py-4 rounded-xl bg-gradient-to-r from-amber-600 to-orange-600 text-white font-semibold hover:from-amber-500 hover:to-orange-500 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-amber-900/30 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-slate-950 min-h-[44px]"
|
||||
aria-busy={loadingMore}
|
||||
aria-live="polite"
|
||||
>
|
||||
{loadingMore ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<div className="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full" aria-hidden="true"></div>
|
||||
Loading more images...
|
||||
</span>
|
||||
) : (
|
||||
'Load More Images'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
<ImageZoomModal imageUrl={zoomedImageUrl} onClose={() => setZoomedImageUrl(null)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
interface ImageZoomModalProps {
|
||||
imageUrl: string | null;
|
||||
|
|
@ -8,6 +8,9 @@ interface ImageZoomModalProps {
|
|||
}
|
||||
|
||||
export const ImageZoomModal = ({ imageUrl, onClose }: ImageZoomModalProps) => {
|
||||
const closeButtonRef = useRef<HTMLButtonElement>(null);
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
|
|
@ -17,6 +20,19 @@ export const ImageZoomModal = ({ imageUrl, onClose }: ImageZoomModalProps) => {
|
|||
|
||||
if (imageUrl) {
|
||||
document.addEventListener('keydown', handleEscape);
|
||||
|
||||
// Focus trap
|
||||
const previousActiveElement = document.activeElement as HTMLElement;
|
||||
closeButtonRef.current?.focus();
|
||||
|
||||
// Disable body scroll
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleEscape);
|
||||
document.body.style.overflow = '';
|
||||
previousActiveElement?.focus();
|
||||
};
|
||||
}
|
||||
|
||||
return () => {
|
||||
|
|
@ -26,25 +42,39 @@ export const ImageZoomModal = ({ imageUrl, onClose }: ImageZoomModalProps) => {
|
|||
|
||||
if (!imageUrl) return null;
|
||||
|
||||
const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (e.target === modalRef.current) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4"
|
||||
onClick={onClose}
|
||||
ref={modalRef}
|
||||
className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4 sm:p-6 md:p-8"
|
||||
onClick={handleBackdropClick}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Zoomed image view"
|
||||
aria-labelledby="modal-title"
|
||||
>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 text-white flex items-center justify-center transition-colors focus:ring-2 focus:ring-white"
|
||||
aria-label="Close zoomed image"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<div className="absolute top-4 right-4 sm:top-6 sm:right-6 flex items-center gap-3">
|
||||
<span id="modal-title" className="sr-only">Full size image viewer</span>
|
||||
<span className="hidden sm:block text-white/70 text-sm font-medium">Press ESC to close</span>
|
||||
<button
|
||||
ref={closeButtonRef}
|
||||
onClick={onClose}
|
||||
className="w-11 h-11 sm:w-12 sm:h-12 rounded-full bg-white/10 hover:bg-white/20 text-white flex items-center justify-center transition-colors focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black/90"
|
||||
aria-label="Close zoomed image"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt="Zoomed"
|
||||
className="max-w-full max-h-full object-contain"
|
||||
alt="Full size view"
|
||||
className="max-w-full max-h-full object-contain rounded-lg"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export const EmptyGalleryState = () => {
|
|||
|
||||
<Link
|
||||
href="/demo/tti"
|
||||
className="px-6 py-3 rounded-lg bg-gradient-to-r from-amber-600 to-orange-600 text-white font-semibold hover:from-amber-500 hover:to-orange-500 transition-all shadow-lg shadow-amber-900/30 focus:ring-2 focus:ring-amber-500"
|
||||
className="inline-block px-8 py-4 rounded-xl bg-gradient-to-r from-amber-600 to-orange-600 text-white font-semibold hover:from-amber-500 hover:to-orange-500 transition-all shadow-lg shadow-amber-900/30 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-slate-950 min-h-[44px]"
|
||||
>
|
||||
Generate Images
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -80,11 +80,11 @@ export const GalleryImageCard = ({
|
|||
className="p-4 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-xl hover:border-slate-600 transition-all h-full"
|
||||
>
|
||||
<div
|
||||
className="aspect-video bg-slate-800 rounded-lg mb-3 overflow-hidden cursor-pointer group relative"
|
||||
className="aspect-video bg-slate-800 rounded-lg mb-3 overflow-hidden cursor-pointer group relative focus:outline-none focus:ring-2 focus:ring-amber-500"
|
||||
onClick={() => onZoom(imageUrl)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label="View full size image"
|
||||
aria-label={`View full size image: ${filename}`}
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
{isVisible ? (
|
||||
|
|
@ -95,47 +95,52 @@ export const GalleryImageCard = ({
|
|||
className="w-full h-full object-cover transition-transform group-hover:scale-105"
|
||||
/>
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black/70 via-transparent to-black/70 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black/70 via-transparent to-black/70 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity">
|
||||
<div className="absolute top-3 left-3">
|
||||
<span className="px-2.5 py-1 bg-black/50 backdrop-blur-sm text-white text-xs font-medium rounded border border-white/10">
|
||||
<span className="px-3 py-2 bg-black/50 backdrop-blur-sm text-white text-xs sm:text-sm font-medium rounded border border-white/10" aria-label={`Created ${formatTimestamp(lastModified)}`}>
|
||||
{formatTimestamp(lastModified)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="absolute top-3 right-3 max-w-[60%]">
|
||||
<span
|
||||
className="px-2.5 py-1 bg-black/50 backdrop-blur-sm text-white text-xs font-medium rounded border border-white/10 truncate block"
|
||||
className="px-3 py-2 bg-black/50 backdrop-blur-sm text-white text-xs sm:text-sm font-medium rounded border border-white/10 truncate block"
|
||||
title={filename}
|
||||
aria-label={`Filename: ${filename}`}
|
||||
>
|
||||
{filename}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<svg
|
||||
className="w-12 h-12 text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||
<div className="bg-black/60 backdrop-blur-sm rounded-full p-4">
|
||||
<svg
|
||||
className="w-10 h-10 sm:w-12 sm:h-12 text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<div className="animate-pulse text-gray-600">
|
||||
<div className="w-full h-full flex items-center justify-center bg-slate-800 animate-pulse" aria-label="Loading image">
|
||||
<div className="text-gray-600">
|
||||
<svg
|
||||
className="w-12 h-12"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
|
|
|
|||
|
|
@ -105,51 +105,51 @@ export const ImageMetadataBar = ({
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center justify-between px-3 py-2 bg-slate-800/50 border border-slate-700 rounded-lg text-xs ${className}`}
|
||||
className={`flex items-center justify-between px-2.5 py-2 sm:px-3 bg-slate-800/50 border border-slate-700 rounded-lg text-xs ${className}`}
|
||||
role="status"
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="font-medium text-white cursor-help whitespace-nowrap" title={dimensionsTooltip}>
|
||||
<div className="flex items-center gap-1.5 sm:gap-2 flex-wrap min-w-0">
|
||||
<span className="font-medium text-white cursor-help whitespace-nowrap text-[11px] sm:text-xs" title={dimensionsTooltip}>
|
||||
{width} × {height}
|
||||
</span>
|
||||
|
||||
<span className="text-gray-600" aria-hidden="true">
|
||||
<span className="text-gray-600 hidden xs:inline" aria-hidden="true">
|
||||
·
|
||||
</span>
|
||||
|
||||
<span className="flex items-center gap-1 text-gray-400 cursor-help whitespace-nowrap" title={aspectRatioTooltip}>
|
||||
<span className="flex items-center gap-1 text-gray-400 cursor-help whitespace-nowrap text-[11px] sm:text-xs" title={aspectRatioTooltip}>
|
||||
<span>{aspectRatio}</span>
|
||||
{showVisualIndicator && (
|
||||
<span title={visualIndicatorTooltip}>
|
||||
<span className="hidden sm:inline" title={visualIndicatorTooltip}>
|
||||
<AspectRatioIcon width={width} height={height} />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
|
||||
<span className="text-gray-600" aria-hidden="true">
|
||||
<span className="text-gray-600 hidden xs:inline" aria-hidden="true">
|
||||
·
|
||||
</span>
|
||||
|
||||
<span className="text-gray-400 cursor-help whitespace-nowrap" title={fileSizeTooltip}>
|
||||
<span className="text-gray-400 cursor-help whitespace-nowrap text-[11px] sm:text-xs" title={fileSizeTooltip}>
|
||||
{formattedSize}
|
||||
</span>
|
||||
|
||||
<span className="text-gray-600" aria-hidden="true">
|
||||
<span className="text-gray-600 hidden sm:inline" aria-hidden="true">
|
||||
·
|
||||
</span>
|
||||
|
||||
<span className="text-gray-400 cursor-help whitespace-nowrap" title={fileTypeTooltip}>
|
||||
<span className="text-gray-400 cursor-help whitespace-nowrap text-[11px] sm:text-xs hidden sm:inline" title={fileTypeTooltip}>
|
||||
{formattedType}
|
||||
</span>
|
||||
|
||||
{downloadMs !== null && downloadMs !== undefined && downloadPerformance && (
|
||||
<>
|
||||
<span className="text-gray-600" aria-hidden="true">
|
||||
<span className="text-gray-600 hidden sm:inline" aria-hidden="true">
|
||||
·
|
||||
</span>
|
||||
|
||||
<span className="flex items-center gap-1.5 cursor-help whitespace-nowrap" title={downloadTooltip}>
|
||||
<span className="flex items-center gap-1.5 cursor-help whitespace-nowrap text-[11px] sm:text-xs hidden sm:flex" title={downloadTooltip}>
|
||||
<DownloadIcon />
|
||||
<span className={downloadPerformance.color}>{downloadTimeText}</span>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ type UseIntersectionObserverOptions = {
|
|||
};
|
||||
|
||||
type UseIntersectionObserverReturn = {
|
||||
ref: React.RefObject<HTMLDivElement>;
|
||||
ref: React.RefObject<HTMLDivElement | null>;
|
||||
isIntersecting: boolean;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
|
||||
Loading…
Reference in New Issue