Update admin gallery to fetch images directly from Cloudinary
Integrates Cloudinary API to fetch image details for the admin gallery page, replacing previous data sources. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: eb361b34-3147-44e1-a7c3-11100d3e83b8 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/ncMMRQ9 Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic
parent
9d8d29208a
commit
d9278f6fb6
@ -1,12 +1,32 @@
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useState, useRef } from "react";
|
||||
import { Link } from "wouter";
|
||||
import { ArrowLeft, Crosshair, X, Check, RotateCcw, User, Search, Filter } from "lucide-react";
|
||||
import { ArrowLeft, Crosshair, X, Check, RotateCcw, User, Search, Filter, Cloud, HardDrive, Image } from "lucide-react";
|
||||
import { apiRequest } from "@/lib/queryClient";
|
||||
import type { GalleryImage, FocalPointMap } from "@/components/photo-gallery";
|
||||
import type { FocalPointMap } from "@/components/photo-gallery";
|
||||
import { getObjectPosition } from "@/components/photo-gallery";
|
||||
|
||||
type ArtistOverrides = Record<string, string>;
|
||||
interface CloudinaryImage {
|
||||
publicId: string;
|
||||
fileName: string;
|
||||
artist: string;
|
||||
artistOverridden: boolean;
|
||||
width: number;
|
||||
height: number;
|
||||
format: string;
|
||||
bytes: number;
|
||||
createdAt: string;
|
||||
thumb: string;
|
||||
large: string;
|
||||
mobile: string;
|
||||
full: string;
|
||||
}
|
||||
|
||||
function formatBytes(bytes: number): string {
|
||||
if (bytes < 1024) return bytes + " B";
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + " MB";
|
||||
}
|
||||
|
||||
function FocalPointEditor({
|
||||
image,
|
||||
@ -17,7 +37,7 @@ function FocalPointEditor({
|
||||
onSaveArtist,
|
||||
onClose,
|
||||
}: {
|
||||
image: GalleryImage;
|
||||
image: CloudinaryImage;
|
||||
currentFocalPoint?: { x: number; y: number };
|
||||
currentArtist: string;
|
||||
onSaveFocal: (x: number, y: number) => Promise<void>;
|
||||
@ -64,25 +84,28 @@ function FocalPointEditor({
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 bg-black/95 flex flex-col items-center justify-center p-4 overflow-y-auto" data-testid="focal-point-editor">
|
||||
<div className="absolute top-4 left-4 right-4 flex items-center justify-between z-50">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<Crosshair className="w-5 h-5 text-yellow-400" />
|
||||
<span className="text-white font-medium text-sm truncate max-w-[60vw]">
|
||||
{image.fileName}
|
||||
</span>
|
||||
<div>
|
||||
<span className="text-white font-medium text-sm block truncate max-w-[50vw]">
|
||||
{image.artist || image.fileName}
|
||||
</span>
|
||||
<span className="text-white/30 text-[10px] block">{image.publicId} · {image.width}x{image.height} · {formatBytes(image.bytes)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={onClose} className="text-white/70 hover:text-white p-2" data-testid="button-focal-close">
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-4 mt-12 w-full max-w-4xl">
|
||||
<div className="flex flex-col items-center gap-4 mt-16 w-full max-w-4xl">
|
||||
<div className="flex items-center gap-3 w-full max-w-md">
|
||||
<User className="w-4 h-4 text-white/50 flex-shrink-0" />
|
||||
<input
|
||||
type="text"
|
||||
value={artistName}
|
||||
onChange={(e) => setArtistName(e.target.value)}
|
||||
placeholder="Interpret / Künstlername"
|
||||
placeholder="Interpret / Künstlername eingeben..."
|
||||
className="flex-1 bg-white/10 border border-white/20 rounded px-3 py-2 text-white text-sm placeholder:text-white/30 focus:outline-none focus:border-yellow-400/60"
|
||||
data-testid="input-artist-name"
|
||||
/>
|
||||
@ -179,27 +202,32 @@ function FocalPointEditor({
|
||||
|
||||
export default function AdminGalleryPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const { data: images, isLoading } = useQuery<GalleryImage[]>({
|
||||
queryKey: ["/api/gallery"],
|
||||
const { data: images, isLoading, error } = useQuery<CloudinaryImage[]>({
|
||||
queryKey: ["/api/admin/cloudinary-gallery"],
|
||||
});
|
||||
const { data: focalPoints } = useQuery<FocalPointMap>({
|
||||
queryKey: ["/api/gallery/focal-points"],
|
||||
});
|
||||
const { data: artistOverrides } = useQuery<ArtistOverrides>({
|
||||
queryKey: ["/api/gallery/artists"],
|
||||
});
|
||||
|
||||
const [editingImage, setEditingImage] = useState<GalleryImage | null>(null);
|
||||
const [editingImage, setEditingImage] = useState<CloudinaryImage | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [filterMode, setFilterMode] = useState<"all" | "no-artist" | "no-focal" | "has-focal">("all");
|
||||
const [sortMode, setSortMode] = useState<"name" | "size" | "date">("name");
|
||||
|
||||
const fp = focalPoints || {};
|
||||
const ao = artistOverrides || {};
|
||||
|
||||
const filteredImages = (images || []).filter((img) => {
|
||||
const sortedImages = [...(images || [])].sort((a, b) => {
|
||||
if (sortMode === "size") return b.bytes - a.bytes;
|
||||
if (sortMode === "date") return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
|
||||
return a.fileName.localeCompare(b.fileName);
|
||||
});
|
||||
|
||||
const filteredImages = sortedImages.filter((img) => {
|
||||
if (searchQuery) {
|
||||
const q = searchQuery.toLowerCase();
|
||||
const matches = img.fileName.toLowerCase().includes(q) || (img.artist || "").toLowerCase().includes(q);
|
||||
const matches = img.fileName.toLowerCase().includes(q) ||
|
||||
img.artist.toLowerCase().includes(q) ||
|
||||
img.publicId.toLowerCase().includes(q);
|
||||
if (!matches) return false;
|
||||
}
|
||||
if (filterMode === "no-artist") return !img.artist;
|
||||
@ -225,30 +253,40 @@ export default function AdminGalleryPage() {
|
||||
await apiRequest("PUT", `/api/gallery/artists/${encodeURIComponent(editingImage.fileName)}`, { artist });
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/gallery/artists"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/gallery"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/admin/cloudinary-gallery"] });
|
||||
};
|
||||
|
||||
const totalImages = images?.length || 0;
|
||||
const totalSize = (images || []).reduce((sum, img) => sum + img.bytes, 0);
|
||||
const withFocal = Object.keys(fp).length;
|
||||
const withoutArtist = (images || []).filter((img) => !img.artist).length;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-950 text-white">
|
||||
<div className="border-b border-white/10 bg-zinc-900/80 sticky top-0 z-40">
|
||||
<div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/">
|
||||
<button className="flex items-center gap-2 text-white/50 hover:text-white text-sm transition-colors" data-testid="button-admin-back">
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Zurück zur Seite
|
||||
</button>
|
||||
</Link>
|
||||
<div className="h-5 w-px bg-white/20" />
|
||||
<h1 className="font-bold text-lg" data-testid="text-admin-title">Galerie Admin</h1>
|
||||
<div className="border-b border-white/10 bg-zinc-900/80 sticky top-0 z-40 backdrop-blur-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/">
|
||||
<button className="flex items-center gap-2 text-white/50 hover:text-white text-sm transition-colors" data-testid="button-admin-back">
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Zurück
|
||||
</button>
|
||||
</Link>
|
||||
<div className="h-5 w-px bg-white/20" />
|
||||
<div className="flex items-center gap-2">
|
||||
<Cloud className="w-5 h-5 text-blue-400" />
|
||||
<h1 className="font-bold text-lg" data-testid="text-admin-title">Cloudinary Galerie</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-xs text-white/40">
|
||||
<span>{totalImages} Bilder</span>
|
||||
<span>{withFocal} mit Fokus</span>
|
||||
<span className={withoutArtist > 0 ? "text-yellow-400" : ""}>{withoutArtist} ohne Name</span>
|
||||
<div className="flex items-center gap-4 mt-2 text-xs text-white/40">
|
||||
<span className="flex items-center gap-1"><Image className="w-3 h-3" /> {totalImages} Bilder</span>
|
||||
<span className="flex items-center gap-1"><HardDrive className="w-3 h-3" /> {formatBytes(totalSize)}</span>
|
||||
<span className="flex items-center gap-1"><Crosshair className="w-3 h-3" /> {withFocal} mit Fokus</span>
|
||||
<span className={`flex items-center gap-1 ${withoutArtist > 0 ? "text-yellow-400" : ""}`}>
|
||||
<User className="w-3 h-3" /> {withoutArtist} ohne Name
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -261,12 +299,12 @@ export default function AdminGalleryPage() {
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Suche nach Dateiname oder Künstler..."
|
||||
className="w-full pl-9 pr-3 py-2 bg-white/5 border border-white/10 rounded-lg text-sm text-white placeholder:text-white/30 focus:outline-none focus:border-yellow-400/50"
|
||||
placeholder="Suche nach Name, Künstler, Public ID..."
|
||||
className="w-full pl-9 pr-3 py-2 bg-white/5 border border-white/10 rounded-lg text-sm text-white placeholder:text-white/30 focus:outline-none focus:border-blue-400/50"
|
||||
data-testid="input-admin-search"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Filter className="w-4 h-4 text-white/30" />
|
||||
{(["all", "no-artist", "no-focal", "has-focal"] as const).map((mode) => (
|
||||
<button
|
||||
@ -274,7 +312,7 @@ export default function AdminGalleryPage() {
|
||||
onClick={() => setFilterMode(mode)}
|
||||
className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
|
||||
filterMode === mode
|
||||
? "bg-yellow-500 text-black"
|
||||
? "bg-blue-500 text-white"
|
||||
: "bg-white/5 text-white/50 hover:text-white hover:bg-white/10"
|
||||
}`}
|
||||
data-testid={`button-filter-${mode}`}
|
||||
@ -285,14 +323,34 @@ export default function AdminGalleryPage() {
|
||||
{mode === "has-focal" && "Mit Fokus"}
|
||||
</button>
|
||||
))}
|
||||
<div className="h-4 w-px bg-white/10 mx-1" />
|
||||
{(["name", "size", "date"] as const).map((s) => (
|
||||
<button
|
||||
key={s}
|
||||
onClick={() => setSortMode(s)}
|
||||
className={`px-2 py-1 rounded text-[10px] font-medium transition-colors ${
|
||||
sortMode === s ? "bg-white/20 text-white" : "text-white/30 hover:text-white/60"
|
||||
}`}
|
||||
data-testid={`button-sort-${s}`}
|
||||
>
|
||||
{s === "name" && "A-Z"}
|
||||
{s === "size" && "Größe"}
|
||||
{s === "date" && "Datum"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
|
||||
{Array.from({ length: 20 }).map((_, i) => (
|
||||
<div key={i} className="aspect-[3/4] bg-white/5 rounded-lg animate-pulse" />
|
||||
))}
|
||||
{error ? (
|
||||
<div className="text-center py-12">
|
||||
<Cloud className="w-12 h-12 text-red-400/50 mx-auto mb-3" />
|
||||
<p className="text-red-400 text-sm">Cloudinary Verbindung fehlgeschlagen</p>
|
||||
<p className="text-white/30 text-xs mt-1">{(error as Error).message}</p>
|
||||
</div>
|
||||
) : isLoading ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-8 h-8 border-2 border-blue-400 border-t-transparent rounded-full animate-spin mx-auto mb-3" />
|
||||
<p className="text-white/50 text-sm">Lade Bilder von Cloudinary...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
@ -300,14 +358,14 @@ export default function AdminGalleryPage() {
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
|
||||
{filteredImages.map((img) => (
|
||||
<button
|
||||
key={img.fileName}
|
||||
key={img.publicId}
|
||||
onClick={() => setEditingImage(img)}
|
||||
className="group relative rounded-lg overflow-hidden bg-white/5 border border-white/10 hover:border-yellow-500/50 cursor-pointer flex flex-col text-left transition-colors"
|
||||
data-testid={`button-admin-image-${img.fileName}`}
|
||||
className="group relative rounded-lg overflow-hidden bg-white/5 border border-white/10 hover:border-blue-400/50 cursor-pointer flex flex-col text-left transition-colors"
|
||||
data-testid={`button-admin-image-${img.publicId}`}
|
||||
>
|
||||
<div className="relative w-full aspect-[16/9]">
|
||||
<img
|
||||
src={img.mobile || img.thumb}
|
||||
src={img.thumb}
|
||||
alt={img.artist || img.fileName}
|
||||
className="w-full h-full object-cover"
|
||||
style={{ objectPosition: getObjectPosition(img.fileName, fp) }}
|
||||
@ -326,23 +384,25 @@ export default function AdminGalleryPage() {
|
||||
|
||||
<div className="absolute top-1 right-1 flex items-center gap-1">
|
||||
{fp[img.fileName] && (
|
||||
<span className="bg-yellow-500 text-black text-[8px] px-1 py-0.5 rounded font-bold">
|
||||
F
|
||||
</span>
|
||||
<span className="bg-yellow-500 text-black text-[8px] px-1 py-0.5 rounded font-bold">F</span>
|
||||
)}
|
||||
{!img.artist && (
|
||||
<span className="bg-red-500/80 text-white text-[8px] px-1 py-0.5 rounded font-bold">
|
||||
?
|
||||
</span>
|
||||
<span className="bg-red-500/80 text-white text-[8px] px-1 py-0.5 rounded font-bold">?</span>
|
||||
)}
|
||||
{img.artistOverridden && (
|
||||
<span className="bg-green-500/80 text-white text-[8px] px-1 py-0.5 rounded font-bold">E</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-2 py-1.5 flex-1">
|
||||
<div className="px-2 py-1.5 flex-1 min-h-[48px]">
|
||||
<p className="text-[10px] text-white/70 font-medium line-clamp-1">
|
||||
{img.artist || <span className="text-white/30 italic">Kein Name</span>}
|
||||
</p>
|
||||
<p className="text-[9px] text-white/30 line-clamp-1 mt-0.5">{img.fileName}</p>
|
||||
<p className="text-[9px] text-white/30 line-clamp-1 mt-0.5">{img.publicId}</p>
|
||||
<p className="text-[8px] text-white/20 mt-0.5">
|
||||
{img.width}x{img.height} · {img.format} · {formatBytes(img.bytes)}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
|
||||
@ -116,6 +116,63 @@ export async function listCloudinaryGallery(): Promise<string[]> {
|
||||
}
|
||||
}
|
||||
|
||||
export interface CloudinaryResourceInfo {
|
||||
publicId: string;
|
||||
fileName: string;
|
||||
artist: string;
|
||||
width: number;
|
||||
height: number;
|
||||
format: string;
|
||||
bytes: number;
|
||||
createdAt: string;
|
||||
thumb: string;
|
||||
large: string;
|
||||
mobile: string;
|
||||
full: string;
|
||||
}
|
||||
|
||||
export async function listCloudinaryGalleryDetailed(): Promise<CloudinaryResourceInfo[]> {
|
||||
try {
|
||||
let allResources: any[] = [];
|
||||
let nextCursor: string | undefined;
|
||||
|
||||
do {
|
||||
const result = await cloudinary.api.resources({
|
||||
type: "upload",
|
||||
prefix: GALLERY_FOLDER + "/",
|
||||
max_results: 500,
|
||||
resource_type: "image",
|
||||
...(nextCursor ? { next_cursor: nextCursor } : {}),
|
||||
});
|
||||
allResources = allResources.concat(result.resources);
|
||||
nextCursor = result.next_cursor;
|
||||
} while (nextCursor);
|
||||
|
||||
return allResources.map((r: any) => {
|
||||
const urls = generateImageUrls(r.public_id);
|
||||
const rawName = r.public_id.replace(`${GALLERY_FOLDER}/`, "").replace(/_/g, " ");
|
||||
let originalFileName = rawName;
|
||||
const ext = r.format || "jpg";
|
||||
originalFileName = rawName + "." + ext;
|
||||
|
||||
return {
|
||||
publicId: r.public_id,
|
||||
fileName: originalFileName,
|
||||
artist: extractArtistFromPublicId(r.public_id),
|
||||
width: r.width,
|
||||
height: r.height,
|
||||
format: r.format,
|
||||
bytes: r.bytes,
|
||||
createdAt: r.created_at,
|
||||
...urls,
|
||||
};
|
||||
});
|
||||
} catch (err: any) {
|
||||
console.error("Cloudinary detailed list failed:", err.message);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export function extractArtistFromPublicId(publicId: string): string {
|
||||
const name = publicId.replace(`${GALLERY_FOLDER}/`, "").replace(/_/g, " ");
|
||||
if (/^DSC\d/i.test(name) || /^IMG[\s_]\d/i.test(name)) return "";
|
||||
|
||||
@ -2,5 +2,13 @@
|
||||
"DSC07135.jpg": {
|
||||
"x": 50,
|
||||
"y": 30
|
||||
},
|
||||
"Arina 1.jpg": {
|
||||
"x": 79,
|
||||
"y": 56
|
||||
},
|
||||
"Anita Hofmann.jpg": {
|
||||
"x": 42,
|
||||
"y": 13
|
||||
}
|
||||
}
|
||||
@ -7,6 +7,7 @@ import { generateDailyHoroscopes, getHoroscopesForToday, getOrGenerateHoroscope
|
||||
import { analyzeAllArticleImages, getCachedFocalPoints } from "./focal-point";
|
||||
import { optimizeImage } from "./image-optimizer";
|
||||
import { getAuthUrl, exchangeCodeForTokens, isConnected, fetchGalleryFromDropbox, getValidAccessToken, migrateGalleryToCloudinary } from "./dropbox";
|
||||
import { listCloudinaryGalleryDetailed } from "./cloudinary";
|
||||
import multer from "multer";
|
||||
import path from "path";
|
||||
import fs from "fs";
|
||||
@ -411,6 +412,28 @@ export async function registerRoutes(
|
||||
}
|
||||
});
|
||||
|
||||
app.get("/api/admin/cloudinary-gallery", async (_req, res) => {
|
||||
try {
|
||||
const images = await listCloudinaryGalleryDetailed();
|
||||
const aPath = path.join(process.cwd(), "server/gallery-artist-overrides.json");
|
||||
let artistOverrides: Record<string, string> = {};
|
||||
if (fs.existsSync(aPath)) {
|
||||
artistOverrides = JSON.parse(fs.readFileSync(aPath, "utf-8"));
|
||||
}
|
||||
const result = images.map((img) => {
|
||||
const overriddenArtist = artistOverrides[img.fileName];
|
||||
return {
|
||||
...img,
|
||||
artist: overriddenArtist || img.artist,
|
||||
artistOverridden: !!overriddenArtist,
|
||||
};
|
||||
});
|
||||
res.json(result);
|
||||
} catch (err: any) {
|
||||
res.status(500).json({ message: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
app.get("/api/gallery/artists", (_req, res) => {
|
||||
try {
|
||||
const aPath = path.join(process.cwd(), "server/gallery-artist-overrides.json");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user