sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update admin gallery to fetch images directly from Cloudinary

Browse Source 
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 2026-03-06 10:55:08 +00:00
parent 9d8d29208a
commit d9278f6fb6
4 changed files with 203 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
client/src/pages/admin-gallery.tsx
View File

@ -1,12 +1,32 @@
import { useQuery, useQueryClient } from "@tanstack/react-query"; import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useState, useRef } from "react"; import { useState, useRef } from "react";
import { Link } from "wouter"; 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 { 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"; 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({ function FocalPointEditor({
image, image,
@ -17,7 +37,7 @@ function FocalPointEditor({
onSaveArtist, onSaveArtist,
onClose, onClose,
}: { }: {
image: GalleryImage; image: CloudinaryImage;
currentFocalPoint?: { x: number; y: number }; currentFocalPoint?: { x: number; y: number };
currentArtist: string; currentArtist: string;
onSaveFocal: (x: number, y: number) => Promise<void>; onSaveFocal: (x: number, y: number) => Promise<void>;
@ -64,25 +84,28 @@ function FocalPointEditor({
return ( 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="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="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" /> <Crosshair className="w-5 h-5 text-yellow-400" />
<span className="text-white font-medium text-sm truncate max-w-[60vw]"> <div>
{image.fileName} <span className="text-white font-medium text-sm block truncate max-w-[50vw]">
</span> {image.artist || image.fileName}
</span>
<span className="text-white/30 text-[10px] block">{image.publicId} &middot; {image.width}x{image.height} &middot; {formatBytes(image.bytes)}</span>
</div>
</div> </div>
<button onClick={onClose} className="text-white/70 hover:text-white p-2" data-testid="button-focal-close"> <button onClick={onClose} className="text-white/70 hover:text-white p-2" data-testid="button-focal-close">
<X className="w-6 h-6" /> <X className="w-6 h-6" />
</button> </button>
</div> </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"> <div className="flex items-center gap-3 w-full max-w-md">
<User className="w-4 h-4 text-white/50 flex-shrink-0" /> <User className="w-4 h-4 text-white/50 flex-shrink-0" />
<input <input
type="text" type="text"
value={artistName} value={artistName}
onChange={(e) => setArtistName(e.target.value)} 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" 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" data-testid="input-artist-name"
/> />
@ -179,27 +202,32 @@ function FocalPointEditor({
export default function AdminGalleryPage() { export default function AdminGalleryPage() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { data: images, isLoading } = useQuery<GalleryImage[]>({ const { data: images, isLoading, error } = useQuery<CloudinaryImage[]>({
queryKey: ["/api/gallery"], queryKey: ["/api/admin/cloudinary-gallery"],
}); });
const { data: focalPoints } = useQuery<FocalPointMap>({ const { data: focalPoints } = useQuery<FocalPointMap>({
queryKey: ["/api/gallery/focal-points"], 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 [searchQuery, setSearchQuery] = useState("");
const [filterMode, setFilterMode] = useState<"all" | "no-artist" | "no-focal" | "has-focal">("all"); const [filterMode, setFilterMode] = useState<"all" | "no-artist" | "no-focal" | "has-focal">("all");
const [sortMode, setSortMode] = useState<"name" | "size" | "date">("name");
const fp = focalPoints || {}; 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) { if (searchQuery) {
const q = searchQuery.toLowerCase(); 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 (!matches) return false;
} }
if (filterMode === "no-artist") return !img.artist; 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 }); await apiRequest("PUT", `/api/gallery/artists/${encodeURIComponent(editingImage.fileName)}`, { artist });
queryClient.invalidateQueries({ queryKey: ["/api/gallery/artists"] }); queryClient.invalidateQueries({ queryKey: ["/api/gallery/artists"] });
queryClient.invalidateQueries({ queryKey: ["/api/gallery"] }); queryClient.invalidateQueries({ queryKey: ["/api/gallery"] });
queryClient.invalidateQueries({ queryKey: ["/api/admin/cloudinary-gallery"] });
}; };
const totalImages = images?.length || 0; const totalImages = images?.length || 0;
const totalSize = (images || []).reduce((sum, img) => sum + img.bytes, 0);
const withFocal = Object.keys(fp).length; const withFocal = Object.keys(fp).length;
const withoutArtist = (images || []).filter((img) => !img.artist).length; const withoutArtist = (images || []).filter((img) => !img.artist).length;
return ( return (
<div className="min-h-screen bg-zinc-950 text-white"> <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="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 flex items-center justify-between"> <div className="max-w-7xl mx-auto px-4 py-3">
<div className="flex items-center gap-4"> <div className="flex items-center justify-between">
<Link href="/"> <div className="flex items-center gap-4">
<button className="flex items-center gap-2 text-white/50 hover:text-white text-sm transition-colors" data-testid="button-admin-back"> <Link href="/">
<ArrowLeft className="w-4 h-4" /> <button className="flex items-center gap-2 text-white/50 hover:text-white text-sm transition-colors" data-testid="button-admin-back">
Zurück zur Seite <ArrowLeft className="w-4 h-4" />
</button> Zurück
</Link> </button>
<div className="h-5 w-px bg-white/20" /> </Link>
<h1 className="font-bold text-lg" data-testid="text-admin-title">Galerie Admin</h1> <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>
<div className="flex items-center gap-4 text-xs text-white/40"> <div className="flex items-center gap-4 mt-2 text-xs text-white/40">
<span>{totalImages} Bilder</span> <span className="flex items-center gap-1"><Image className="w-3 h-3" /> {totalImages} Bilder</span>
<span>{withFocal} mit Fokus</span> <span className="flex items-center gap-1"><HardDrive className="w-3 h-3" /> {formatBytes(totalSize)}</span>
<span className={withoutArtist > 0 ? "text-yellow-400" : ""}>{withoutArtist} ohne Name</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> </div>
</div> </div>
@ -261,12 +299,12 @@ export default function AdminGalleryPage() {
type="text" type="text"
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Suche nach Dateiname oder Künstler..." 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-yellow-400/50" 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" data-testid="input-admin-search"
/> />
</div> </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" /> <Filter className="w-4 h-4 text-white/30" />
{(["all", "no-artist", "no-focal", "has-focal"] as const).map((mode) => ( {(["all", "no-artist", "no-focal", "has-focal"] as const).map((mode) => (
<button <button
@ -274,7 +312,7 @@ export default function AdminGalleryPage() {
onClick={() => setFilterMode(mode)} onClick={() => setFilterMode(mode)}
className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${ className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
filterMode === mode 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" : "bg-white/5 text-white/50 hover:text-white hover:bg-white/10"
}`} }`}
data-testid={`button-filter-${mode}`} data-testid={`button-filter-${mode}`}
@ -285,14 +323,34 @@ export default function AdminGalleryPage() {
{mode === "has-focal" && "Mit Fokus"} {mode === "has-focal" && "Mit Fokus"}
</button> </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>
</div> </div>
{isLoading ? ( {error ? (
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3"> <div className="text-center py-12">
{Array.from({ length: 20 }).map((_, i) => ( <Cloud className="w-12 h-12 text-red-400/50 mx-auto mb-3" />
<div key={i} className="aspect-[3/4] bg-white/5 rounded-lg animate-pulse" /> <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> </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"> <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
{filteredImages.map((img) => ( {filteredImages.map((img) => (
<button <button
key={img.fileName} key={img.publicId}
onClick={() => setEditingImage(img)} 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" 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.fileName}`} data-testid={`button-admin-image-${img.publicId}`}
> >
<div className="relative w-full aspect-[16/9]"> <div className="relative w-full aspect-[16/9]">
<img <img
src={img.mobile || img.thumb} src={img.thumb}
alt={img.artist || img.fileName} alt={img.artist || img.fileName}
className="w-full h-full object-cover" className="w-full h-full object-cover"
style={{ objectPosition: getObjectPosition(img.fileName, fp) }} 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"> <div className="absolute top-1 right-1 flex items-center gap-1">
{fp[img.fileName] && ( {fp[img.fileName] && (
<span className="bg-yellow-500 text-black text-[8px] px-1 py-0.5 rounded font-bold"> <span className="bg-yellow-500 text-black text-[8px] px-1 py-0.5 rounded font-bold">F</span>
F
</span>
)} )}
{!img.artist && ( {!img.artist && (
<span className="bg-red-500/80 text-white text-[8px] px-1 py-0.5 rounded font-bold"> <span className="bg-red-500/80 text-white text-[8px] px-1 py-0.5 rounded font-bold">?</span>
? )}
</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> </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"> <p className="text-[10px] text-white/70 font-medium line-clamp-1">
{img.artist || <span className="text-white/30 italic">Kein Name</span>} {img.artist || <span className="text-white/30 italic">Kein Name</span>}
</p> </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} &middot; {img.format} &middot; {formatBytes(img.bytes)}
</p>
</div> </div>
</button> </button>
))} ))}

57
server/cloudinary.ts
View File

@ -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 { export function extractArtistFromPublicId(publicId: string): string {
const name = publicId.replace(`${GALLERY_FOLDER}/`, "").replace(/_/g, " "); const name = publicId.replace(`${GALLERY_FOLDER}/`, "").replace(/_/g, " ");
if (/^DSC\d/i.test(name) || /^IMG[\s_]\d/i.test(name)) return ""; if (/^DSC\d/i.test(name) || /^IMG[\s_]\d/i.test(name)) return "";

8
server/gallery-focal-points.json
View File

@ -2,5 +2,13 @@
"DSC07135.jpg": { "DSC07135.jpg": {
"x": 50, "x": 50,
"y": 30 "y": 30
},
"Arina 1.jpg": {
"x": 79,
"y": 56
},
"Anita Hofmann.jpg": {
"x": 42,
"y": 13
} }
} }

23
server/routes.ts
View File

@ -7,6 +7,7 @@ import { generateDailyHoroscopes, getHoroscopesForToday, getOrGenerateHoroscope
import { analyzeAllArticleImages, getCachedFocalPoints } from "./focal-point"; import { analyzeAllArticleImages, getCachedFocalPoints } from "./focal-point";
import { optimizeImage } from "./image-optimizer"; import { optimizeImage } from "./image-optimizer";
import { getAuthUrl, exchangeCodeForTokens, isConnected, fetchGalleryFromDropbox, getValidAccessToken, migrateGalleryToCloudinary } from "./dropbox"; import { getAuthUrl, exchangeCodeForTokens, isConnected, fetchGalleryFromDropbox, getValidAccessToken, migrateGalleryToCloudinary } from "./dropbox";
import { listCloudinaryGalleryDetailed } from "./cloudinary";
import multer from "multer"; import multer from "multer";
import path from "path"; import path from "path";
import fs from "fs"; 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) => { app.get("/api/gallery/artists", (_req, res) => {
try { try {
const aPath = path.join(process.cwd(), "server/gallery-artist-overrides.json"); const aPath = path.join(process.cwd(), "server/gallery-artist-overrides.json");