Michilis
498d7d8a7d
Uploads skip per-gallery duplicates, checksums can be backfilled, and STORAGE_BACKEND plus sync tooling make switching storage backends safe.
642 lines
25 KiB
TypeScript
642 lines
25 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useRef, useCallback } from 'react';
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import { useLanguage } from '@/context/LanguageContext';
|
|
import { photosApi, eventsApi, PhotoGallery, Photo, Event, GalleryVisibility } from '@/lib/api';
|
|
import Card from '@/components/ui/Card';
|
|
import Button from '@/components/ui/Button';
|
|
import { Skeleton, ImageGridSkeleton } from '@/components/ui/Skeleton';
|
|
import Lightbox from '@/components/Lightbox';
|
|
import VisibilityBadge from '../VisibilityBadge';
|
|
import {
|
|
ArrowLeftIcon,
|
|
ArrowUpTrayIcon,
|
|
ArrowPathIcon,
|
|
CheckIcon,
|
|
CheckCircleIcon,
|
|
ChevronDownIcon,
|
|
ChevronUpIcon,
|
|
DocumentDuplicateIcon,
|
|
ExclamationCircleIcon,
|
|
ExclamationTriangleIcon,
|
|
LinkIcon,
|
|
PhotoIcon,
|
|
StarIcon,
|
|
TrashIcon,
|
|
XMarkIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
import { StarIcon as StarIconSolid } from '@heroicons/react/24/solid';
|
|
import toast from 'react-hot-toast';
|
|
|
|
interface UploadItem {
|
|
key: string;
|
|
name: string;
|
|
sizeBytes: number;
|
|
progress: number; // 0..1 while uploading
|
|
// 'duplicate' is terminal: the gallery already held these bytes, so nothing
|
|
// was stored and no new tile appears in the grid.
|
|
status: 'queued' | 'uploading' | 'processing' | 'error' | 'duplicate';
|
|
error?: string;
|
|
photoId?: string;
|
|
}
|
|
|
|
function formatBytes(n: number) {
|
|
if (n >= 1 << 20) return `${(n / (1 << 20)).toFixed(1)} MB`;
|
|
if (n >= 1 << 10) return `${Math.round(n / (1 << 10))} KB`;
|
|
return `${n} B`;
|
|
}
|
|
|
|
export default function AdminGalleryDetailPage() {
|
|
const { id } = useParams<{ id: string }>();
|
|
const router = useRouter();
|
|
const { locale } = useLanguage();
|
|
const es = locale === 'es';
|
|
|
|
const [gallery, setGallery] = useState<PhotoGallery | null>(null);
|
|
const [photos, setPhotos] = useState<Photo[]>([]);
|
|
const [events, setEvents] = useState<Event[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [copied, setCopied] = useState(false);
|
|
const [dragId, setDragId] = useState<string | null>(null);
|
|
const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
// Uploader panel state (Google Drive style: one row per file).
|
|
const [uploads, setUploads] = useState<UploadItem[]>([]);
|
|
const [panelCollapsed, setPanelCollapsed] = useState(false);
|
|
const uploadQueue = useRef<{ key: string; file: File }[]>([]);
|
|
const pumpRunning = useRef(false);
|
|
|
|
const load = useCallback(async () => {
|
|
try {
|
|
const [detail, ev] = await Promise.all([photosApi.getGallery(id), eventsApi.getAll()]);
|
|
setGallery(detail.gallery);
|
|
setPhotos(detail.photos);
|
|
setEvents(ev.events);
|
|
} catch {
|
|
toast.error(es ? 'No se pudo cargar la galería' : 'Failed to load gallery');
|
|
router.push('/admin/photos');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [id]);
|
|
|
|
useEffect(() => {
|
|
load();
|
|
}, [load]);
|
|
|
|
// Poll while any photo is still processing so thumbnails (and the
|
|
// uploader panel rows) update as the worker finishes them.
|
|
const processingCount = photos.filter((p) => p.status === 'queued' || p.status === 'processing').length;
|
|
useEffect(() => {
|
|
if (processingCount === 0) return;
|
|
const timer = setInterval(async () => {
|
|
try {
|
|
const detail = await photosApi.getGallery(id);
|
|
setGallery(detail.gallery);
|
|
setPhotos(detail.photos);
|
|
} catch {
|
|
/* transient; next tick retries */
|
|
}
|
|
}, 3000);
|
|
return () => clearInterval(timer);
|
|
}, [processingCount, id]);
|
|
|
|
const patchUpload = (key: string, patch: Partial<UploadItem>) => {
|
|
setUploads((prev) => prev.map((u) => (u.key === key ? { ...u, ...patch } : u)));
|
|
};
|
|
|
|
// Sequential upload pump: one file at a time, byte progress per file.
|
|
const pump = useCallback(async () => {
|
|
if (pumpRunning.current) return;
|
|
pumpRunning.current = true;
|
|
while (uploadQueue.current.length > 0) {
|
|
const { key, file } = uploadQueue.current.shift()!;
|
|
patchUpload(key, { status: 'uploading', progress: 0 });
|
|
try {
|
|
const { photos: added } = await photosApi.uploadPhotoWithProgress(id, file, (fraction) =>
|
|
patchUpload(key, { progress: fraction })
|
|
);
|
|
// A duplicate echoes back a photo already in the grid, so merge by id
|
|
// instead of appending (`duplicate` is an upload outcome, not photo
|
|
// state, so it is dropped here).
|
|
setPhotos((prev) => {
|
|
const byId = new Map(prev.map((p) => [p.id, p]));
|
|
added.forEach(({ duplicate: _duplicate, ...photo }) => byId.set(photo.id, photo));
|
|
return Array.from(byId.values());
|
|
});
|
|
patchUpload(key, {
|
|
status: added[0]?.duplicate ? 'duplicate' : 'processing',
|
|
progress: 1,
|
|
photoId: added[0]?.id,
|
|
});
|
|
} catch (err) {
|
|
patchUpload(key, {
|
|
status: 'error',
|
|
error: err instanceof Error ? err.message : 'Upload failed',
|
|
});
|
|
}
|
|
}
|
|
pumpRunning.current = false;
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [id]);
|
|
|
|
const handleUpload = (files: FileList | File[]) => {
|
|
const list = Array.from(files);
|
|
if (list.length === 0) return;
|
|
const items: UploadItem[] = list.map((file) => ({
|
|
key: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
|
|
name: file.name,
|
|
sizeBytes: file.size,
|
|
progress: 0,
|
|
status: 'queued',
|
|
}));
|
|
uploadQueue.current.push(...items.map((item, i) => ({ key: item.key, file: list[i] })));
|
|
setUploads((prev) => [...prev, ...items]);
|
|
setPanelCollapsed(false);
|
|
pump();
|
|
if (fileInputRef.current) fileInputRef.current.value = '';
|
|
};
|
|
|
|
// A row is "done" once its photo finished processing; the panel derives
|
|
// this from the photos list instead of tracking it separately. 'duplicate'
|
|
// is terminal and never reconciled — its photo was already there.
|
|
const displayStatus = (u: UploadItem): { state: string; error?: string } => {
|
|
if (u.status === 'processing' && u.photoId) {
|
|
const photo = photos.find((p) => p.id === u.photoId);
|
|
if (photo?.status === 'ready') return { state: 'done' };
|
|
if (photo?.status === 'failed') return { state: 'error', error: photo.lastError || 'Processing failed' };
|
|
}
|
|
return { state: u.status, error: u.error };
|
|
};
|
|
|
|
const activeUploads = uploads.filter((u) => {
|
|
const s = displayStatus(u).state;
|
|
return s === 'queued' || s === 'uploading' || s === 'processing';
|
|
}).length;
|
|
|
|
const saveField = async (patch: Parameters<typeof photosApi.updateGallery>[1], okMsg?: string) => {
|
|
try {
|
|
const { gallery: updated } = await photosApi.updateGallery(id, patch);
|
|
setGallery(updated);
|
|
if (okMsg) toast.success(okMsg);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : 'Update failed');
|
|
}
|
|
};
|
|
|
|
const copyShareLink = async () => {
|
|
if (!gallery?.shareUrl) return;
|
|
try {
|
|
await navigator.clipboard.writeText(gallery.shareUrl);
|
|
setCopied(true);
|
|
toast.success(es ? 'Enlace copiado' : 'Share link copied');
|
|
setTimeout(() => setCopied(false), 2000);
|
|
} catch {
|
|
toast.error(es ? 'No se pudo copiar' : 'Failed to copy');
|
|
}
|
|
};
|
|
|
|
const rotateToken = async () => {
|
|
if (!confirm(es ? '¿Invalidar el enlace actual y generar uno nuevo?' : 'Invalidate the current link and generate a new one?'))
|
|
return;
|
|
try {
|
|
const { gallery: updated } = await photosApi.rotateShareToken(id);
|
|
setGallery(updated);
|
|
toast.success(es ? 'Nuevo enlace generado' : 'New share link generated');
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : 'Failed');
|
|
}
|
|
};
|
|
|
|
const deletePhoto = async (photoId: string): Promise<boolean> => {
|
|
if (!confirm(es ? '¿Eliminar esta foto?' : 'Delete this photo?')) return false;
|
|
try {
|
|
await photosApi.deletePhoto(photoId);
|
|
setPhotos((prev) => prev.filter((p) => p.id !== photoId));
|
|
toast.success(es ? 'Foto eliminada' : 'Photo deleted');
|
|
return true;
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : 'Failed to delete');
|
|
return false;
|
|
}
|
|
};
|
|
|
|
const retryPhoto = async (photoId: string) => {
|
|
try {
|
|
const { photo } = await photosApi.retryPhoto(photoId);
|
|
setPhotos((prev) => prev.map((p) => (p.id === photoId ? photo : p)));
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : 'Failed to retry');
|
|
}
|
|
};
|
|
|
|
const deleteGallery = async () => {
|
|
if (!confirm(es ? '¿Eliminar toda la galería y sus fotos?' : 'Delete the whole gallery and its photos?')) return;
|
|
try {
|
|
await photosApi.deleteGallery(id);
|
|
toast.success(es ? 'Galería eliminada' : 'Gallery deleted');
|
|
router.push('/admin/photos');
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : 'Failed to delete');
|
|
}
|
|
};
|
|
|
|
// HTML5 drag-and-drop reorder; persisted on drop.
|
|
const onDropReorder = async (targetId: string) => {
|
|
if (!dragId || dragId === targetId) return;
|
|
const ids = photos.map((p) => p.id);
|
|
const from = ids.indexOf(dragId);
|
|
const to = ids.indexOf(targetId);
|
|
if (from < 0 || to < 0) return;
|
|
ids.splice(to, 0, ids.splice(from, 1)[0]);
|
|
const reordered = ids
|
|
.map((pid) => photos.find((p) => p.id === pid))
|
|
.filter((p): p is Photo => !!p);
|
|
setPhotos(reordered);
|
|
setDragId(null);
|
|
try {
|
|
await photosApi.reorderPhotos(id, ids);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : 'Failed to save order');
|
|
load();
|
|
}
|
|
};
|
|
|
|
if (loading || !gallery) {
|
|
return (
|
|
<div>
|
|
<Skeleton className="h-8 w-64 mb-6" />
|
|
<ImageGridSkeleton />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const readyPhotos = photos.filter((p) => p.status === 'ready' && p.urls.thumb);
|
|
const lightboxItems = readyPhotos.map((p) => ({
|
|
id: p.id,
|
|
previewUrl: p.urls.preview || p.urls.original,
|
|
downloadUrl: p.urls.original,
|
|
filename: p.originalFilename,
|
|
thumbUrl: p.urls.thumb,
|
|
}));
|
|
const openLightboxFor = (photoId: string) => {
|
|
const idx = readyPhotos.findIndex((p) => p.id === photoId);
|
|
if (idx >= 0) setLightboxIndex(idx);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
onDragOver={(e) => {
|
|
if (e.dataTransfer.types.includes('Files')) e.preventDefault();
|
|
}}
|
|
onDrop={(e) => {
|
|
if (e.dataTransfer.files.length > 0) {
|
|
e.preventDefault();
|
|
handleUpload(e.dataTransfer.files);
|
|
}
|
|
}}
|
|
>
|
|
<div className="flex flex-wrap items-center justify-between gap-3 mb-6">
|
|
<div className="flex items-center gap-3 min-w-0">
|
|
<Link href="/admin/photos" className="text-gray-400 hover:text-gray-600">
|
|
<ArrowLeftIcon className="w-6 h-6" />
|
|
</Link>
|
|
<h1 className="text-2xl font-bold text-primary-dark truncate">
|
|
{es && gallery.titleEs ? gallery.titleEs : gallery.title}
|
|
</h1>
|
|
<VisibilityBadge visibility={gallery.visibility} />
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button onClick={() => fileInputRef.current?.click()}>
|
|
<ArrowUpTrayIcon className="w-5 h-5 mr-2" />
|
|
{es ? 'Subir fotos' : 'Upload photos'}
|
|
</Button>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept="image/jpeg,image/png,image/gif,image/webp,image/heic,.heic"
|
|
multiple
|
|
onChange={(e) => e.target.files && handleUpload(e.target.files)}
|
|
className="hidden"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Settings */}
|
|
<Card className="p-4 mb-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">{es ? 'Visibilidad' : 'Visibility'}</label>
|
|
<select
|
|
value={gallery.visibility}
|
|
onChange={(e) =>
|
|
saveField(
|
|
{ visibility: e.target.value as GalleryVisibility },
|
|
es ? 'Visibilidad actualizada' : 'Visibility updated'
|
|
)
|
|
}
|
|
className="w-full px-4 py-2 rounded-btn border border-secondary-light-gray"
|
|
>
|
|
<option value="private">{es ? 'Privada (solo admins)' : 'Private (admins only)'}</option>
|
|
<option value="public">{es ? 'Pública (listada)' : 'Public (listed)'}</option>
|
|
<option value="link">{es ? 'Solo con enlace' : 'Link only'}</option>
|
|
<option value="ticket">{es ? 'Con entrada del evento' : 'Ticket holders of the event'}</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">{es ? 'Evento vinculado' : 'Linked event'}</label>
|
|
<select
|
|
value={gallery.eventId || ''}
|
|
onChange={(e) =>
|
|
saveField({ eventId: e.target.value }, es ? 'Evento actualizado' : 'Event updated')
|
|
}
|
|
className="w-full px-4 py-2 rounded-btn border border-secondary-light-gray"
|
|
>
|
|
<option value="">{es ? 'Ninguno' : 'None'}</option>
|
|
{events.map((ev) => (
|
|
<option key={ev.id} value={ev.id}>
|
|
{ev.title}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{gallery.visibility === 'ticket' && !gallery.eventId && (
|
|
<p className="text-xs text-red-600 mt-1">
|
|
{es
|
|
? 'El modo "con entrada" necesita un evento vinculado'
|
|
: 'Ticket mode needs a linked event'}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">{es ? 'Enlace para compartir' : 'Share link'}</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
readOnly
|
|
value={gallery.shareUrl || ''}
|
|
className="flex-1 min-w-0 px-3 py-2 text-sm border rounded-btn bg-gray-50"
|
|
/>
|
|
<Button size="sm" onClick={copyShareLink} title={es ? 'Copiar' : 'Copy'}>
|
|
{copied ? <CheckIcon className="w-4 h-4" /> : <LinkIcon className="w-4 h-4" />}
|
|
</Button>
|
|
<Button size="sm" variant="outline" onClick={rotateToken} title={es ? 'Regenerar' : 'Regenerate'}>
|
|
<ArrowPathIcon className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
{gallery.event && (
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
{es
|
|
? 'Publicada en la página del evento: '
|
|
: 'Published on the event page: '}
|
|
<span className="font-mono">/events/{gallery.event.slug}/gallery</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{processingCount > 0 && (
|
|
<p className="text-sm text-gray-600 mb-4">
|
|
{es
|
|
? `Procesando ${processingCount} foto(s)…`
|
|
: `Processing ${processingCount} photo(s)…`}
|
|
</p>
|
|
)}
|
|
|
|
{/* Photo grid */}
|
|
{photos.length === 0 ? (
|
|
<Card className="p-12 text-center">
|
|
<ArrowUpTrayIcon className="w-16 h-16 mx-auto text-gray-300 mb-4" />
|
|
<p className="text-gray-500">
|
|
{es
|
|
? 'Arrastra fotos aquí o usa el botón de subir'
|
|
: 'Drag photos here or use the upload button'}
|
|
</p>
|
|
</Card>
|
|
) : (
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
|
{photos.map((photo) => (
|
|
<Card
|
|
key={photo.id}
|
|
draggable
|
|
onDragStart={() => setDragId(photo.id)}
|
|
onDragOver={(e) => {
|
|
if (dragId) e.preventDefault();
|
|
}}
|
|
onDrop={(e) => {
|
|
if (dragId) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onDropReorder(photo.id);
|
|
}
|
|
}}
|
|
className={`group relative overflow-hidden aspect-square cursor-grab ${
|
|
dragId === photo.id ? 'opacity-50' : ''
|
|
}`}
|
|
>
|
|
{photo.status === 'ready' && photo.urls.thumb ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={photo.urls.thumb}
|
|
alt=""
|
|
className="w-full h-full object-cover cursor-pointer"
|
|
draggable={false}
|
|
onClick={() => openLightboxFor(photo.id)}
|
|
/>
|
|
) : photo.status === 'failed' ? (
|
|
<div className="w-full h-full flex flex-col items-center justify-center bg-red-50 text-red-600 p-2 text-center">
|
|
<ExclamationTriangleIcon className="w-8 h-8 mb-1" />
|
|
<span className="text-xs line-clamp-3">{photo.lastError || 'Failed'}</span>
|
|
</div>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center bg-gray-100">
|
|
<div className="animate-spin w-6 h-6 border-2 border-primary-yellow border-t-transparent rounded-full" />
|
|
</div>
|
|
)}
|
|
|
|
{gallery.coverPhotoId === photo.id && (
|
|
<StarIconSolid className="absolute top-2 left-2 w-5 h-5 text-primary-yellow drop-shadow" />
|
|
)}
|
|
|
|
<div className="absolute inset-x-0 bottom-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1 py-1.5">
|
|
{photo.status === 'ready' && (
|
|
<button
|
|
onClick={() =>
|
|
saveField({ coverPhotoId: photo.id }, es ? 'Portada actualizada' : 'Cover updated')
|
|
}
|
|
className="p-1.5 text-white hover:text-primary-yellow"
|
|
title={es ? 'Usar como portada' : 'Set as cover'}
|
|
>
|
|
<StarIcon className="w-5 h-5" />
|
|
</button>
|
|
)}
|
|
{photo.status === 'failed' && (
|
|
<button
|
|
onClick={() => retryPhoto(photo.id)}
|
|
className="p-1.5 text-white hover:text-primary-yellow"
|
|
title={es ? 'Reintentar' : 'Retry'}
|
|
>
|
|
<ArrowPathIcon className="w-5 h-5" />
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => deletePhoto(photo.id)}
|
|
className="p-1.5 text-white hover:text-red-400"
|
|
title={es ? 'Eliminar' : 'Delete'}
|
|
>
|
|
<TrashIcon className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Danger zone */}
|
|
<div className="mt-10 pt-6 border-t border-secondary-light-gray flex justify-end">
|
|
<Button variant="danger" onClick={deleteGallery}>
|
|
<TrashIcon className="w-5 h-5 mr-2" />
|
|
{es ? 'Eliminar galería' : 'Delete gallery'}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Lightbox with admin actions */}
|
|
{lightboxIndex !== null && lightboxItems.length > 0 && (
|
|
<Lightbox
|
|
items={lightboxItems}
|
|
index={Math.min(lightboxIndex, lightboxItems.length - 1)}
|
|
onClose={() => setLightboxIndex(null)}
|
|
onNavigate={setLightboxIndex}
|
|
renderActions={(item) => (
|
|
<>
|
|
<button
|
|
onClick={() =>
|
|
saveField({ coverPhotoId: item.id }, es ? 'Portada actualizada' : 'Cover updated')
|
|
}
|
|
className="text-white hover:text-primary-yellow"
|
|
title={es ? 'Usar como portada' : 'Set as cover'}
|
|
>
|
|
{gallery.coverPhotoId === item.id ? (
|
|
<StarIconSolid className="w-7 h-7 text-primary-yellow" />
|
|
) : (
|
|
<StarIcon className="w-7 h-7" />
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={async () => {
|
|
const before = readyPhotos.length;
|
|
const deleted = await deletePhoto(item.id);
|
|
if (!deleted) return;
|
|
if (before <= 1) setLightboxIndex(null);
|
|
else setLightboxIndex((i) => (i === null ? null : Math.max(0, Math.min(i, before - 2))));
|
|
}}
|
|
className="text-white hover:text-red-400"
|
|
title={es ? 'Eliminar' : 'Delete'}
|
|
>
|
|
<TrashIcon className="w-7 h-7" />
|
|
</button>
|
|
</>
|
|
)}
|
|
/>
|
|
)}
|
|
|
|
{/* Uploader panel (Google Drive style) */}
|
|
{uploads.length > 0 && (
|
|
<div className="fixed bottom-4 right-4 z-40 w-96 max-w-[calc(100vw-2rem)]">
|
|
<div className="bg-white rounded-card shadow-card-hover border border-secondary-light-gray overflow-hidden">
|
|
<div className="flex items-center justify-between px-4 py-3 bg-primary-dark text-white">
|
|
<p className="text-sm font-medium">
|
|
{activeUploads > 0
|
|
? es
|
|
? `Subiendo ${uploads.length - activeUploads}/${uploads.length}…`
|
|
: `Uploading ${uploads.length - activeUploads}/${uploads.length}…`
|
|
: es
|
|
? `${uploads.length} subida(s) completada(s)`
|
|
: `${uploads.length} upload(s) complete`}
|
|
</p>
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={() => setPanelCollapsed((c) => !c)}
|
|
className="p-1 hover:text-primary-yellow"
|
|
aria-label={panelCollapsed ? 'Expand' : 'Collapse'}
|
|
>
|
|
{panelCollapsed ? <ChevronUpIcon className="w-5 h-5" /> : <ChevronDownIcon className="w-5 h-5" />}
|
|
</button>
|
|
{activeUploads === 0 && (
|
|
<button
|
|
onClick={() => setUploads([])}
|
|
className="p-1 hover:text-primary-yellow"
|
|
aria-label="Close"
|
|
>
|
|
<XMarkIcon className="w-5 h-5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{!panelCollapsed && (
|
|
<ul className="max-h-72 overflow-y-auto divide-y divide-secondary-light-gray">
|
|
{uploads.map((u) => {
|
|
const ds = displayStatus(u);
|
|
return (
|
|
<li key={u.key} className="px-4 py-2.5">
|
|
<div className="flex items-center gap-3">
|
|
<PhotoIcon className="w-5 h-5 text-gray-400 shrink-0" />
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm text-primary-dark truncate" title={u.name}>
|
|
{u.name}
|
|
</p>
|
|
<p className="text-xs text-gray-500">
|
|
{ds.state === 'uploading' && `${Math.round(u.progress * 100)}% · ${formatBytes(u.sizeBytes)}`}
|
|
{ds.state === 'queued' && (es ? 'En cola' : 'Queued')}
|
|
{ds.state === 'processing' && (es ? 'Procesando…' : 'Processing…')}
|
|
{ds.state === 'done' && formatBytes(u.sizeBytes)}
|
|
{ds.state === 'duplicate' && (
|
|
<span className="text-amber-600">
|
|
{es ? 'Ya está en esta galería' : 'Already in this gallery'}
|
|
</span>
|
|
)}
|
|
{ds.state === 'error' && (
|
|
<span className="text-red-600" title={ds.error}>
|
|
{ds.error}
|
|
</span>
|
|
)}
|
|
</p>
|
|
</div>
|
|
<span className="shrink-0">
|
|
{ds.state === 'done' && <CheckCircleIcon className="w-6 h-6 text-green-600" />}
|
|
{ds.state === 'duplicate' && (
|
|
<DocumentDuplicateIcon className="w-6 h-6 text-amber-600" />
|
|
)}
|
|
{ds.state === 'error' && <ExclamationCircleIcon className="w-6 h-6 text-red-600" />}
|
|
{ds.state === 'processing' && (
|
|
<div className="animate-spin w-5 h-5 border-2 border-primary-yellow border-t-transparent rounded-full" />
|
|
)}
|
|
{ds.state === 'uploading' && (
|
|
<span className="text-xs text-gray-600 tabular-nums">{Math.round(u.progress * 100)}%</span>
|
|
)}
|
|
</span>
|
|
</div>
|
|
{ds.state === 'uploading' && (
|
|
<div className="mt-1.5 h-1 rounded-full bg-secondary-gray overflow-hidden">
|
|
<div
|
|
className="h-full bg-primary-yellow transition-[width] duration-200"
|
|
style={{ width: `${Math.round(u.progress * 100)}%` }}
|
|
/>
|
|
</div>
|
|
)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|