294 lines
9.2 KiB
TypeScript
294 lines
9.2 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useParams, useLocation, useNavigate } from 'react-router-dom';
|
|
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Heart, ChevronLeft, ChevronRight, X } from 'lucide-react';
|
|
import { likePhoto } from '../services/photosApi';
|
|
|
|
type Photo = {
|
|
id: number;
|
|
file_path?: string;
|
|
thumbnail_path?: string;
|
|
likes_count?: number;
|
|
created_at?: string;
|
|
task_id?: number;
|
|
task_title?: string;
|
|
};
|
|
|
|
type Task = { id: number; title: string };
|
|
|
|
interface Props {
|
|
photos?: Photo[];
|
|
currentIndex?: number;
|
|
onClose?: () => void;
|
|
onIndexChange?: (index: number) => void;
|
|
slug?: string;
|
|
}
|
|
|
|
export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexChange, slug }: Props) {
|
|
const params = useParams();
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const photoId = params.photoId;
|
|
const eventSlug = params.slug || slug;
|
|
|
|
const [standalonePhoto, setStandalonePhoto] = useState<Photo | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [task, setTask] = useState<Task | null>(null);
|
|
const [taskLoading, setTaskLoading] = useState(false);
|
|
const [likes, setLikes] = useState<number>(0);
|
|
const [liked, setLiked] = useState(false);
|
|
|
|
// Determine mode and photo
|
|
const isStandalone = !photos || photos.length === 0;
|
|
const currentPhotos = isStandalone ? (standalonePhoto ? [standalonePhoto] : []) : photos || [];
|
|
const currentIndexVal = isStandalone ? 0 : (currentIndex || 0);
|
|
const photo = currentPhotos[currentIndexVal];
|
|
|
|
// Fallback onClose for standalone
|
|
const handleClose = onClose || (() => navigate(-1));
|
|
|
|
// Fetch single photo for standalone mode
|
|
useEffect(() => {
|
|
if (isStandalone && photoId && !standalonePhoto && eventSlug) {
|
|
const fetchPhoto = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const res = await fetch(`/api/v1/photos/${photoId}`);
|
|
if (res.ok) {
|
|
const fetchedPhoto: Photo = await res.json();
|
|
setStandalonePhoto(fetchedPhoto);
|
|
// Check state for initial photo
|
|
if (location.state?.photo) {
|
|
setStandalonePhoto(location.state.photo);
|
|
}
|
|
} else {
|
|
setError('Foto nicht gefunden');
|
|
}
|
|
} catch (err) {
|
|
setError('Fehler beim Laden des Fotos');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchPhoto();
|
|
} else if (!isStandalone) {
|
|
setLoading(false);
|
|
}
|
|
}, [isStandalone, photoId, eventSlug, standalonePhoto, location.state]);
|
|
|
|
// Update likes when photo changes
|
|
React.useEffect(() => {
|
|
if (photo) {
|
|
setLikes(photo.likes_count ?? 0);
|
|
// Check if liked from localStorage
|
|
try {
|
|
const raw = localStorage.getItem('liked-photo-ids');
|
|
const likedIds = raw ? JSON.parse(raw) : [];
|
|
setLiked(likedIds.includes(photo.id));
|
|
} catch {
|
|
setLiked(false);
|
|
}
|
|
}
|
|
}, [photo]);
|
|
|
|
const touchRef = React.useRef<HTMLDivElement>(null);
|
|
const startX = React.useRef(0);
|
|
const currentX = React.useRef(0);
|
|
|
|
const handleTouchStart = (e: React.TouchEvent) => {
|
|
startX.current = e.touches[0].clientX;
|
|
};
|
|
|
|
const handleTouchMove = (e: React.TouchEvent) => {
|
|
if (!touchRef.current) return;
|
|
currentX.current = e.touches[0].clientX;
|
|
const deltaX = currentX.current - startX.current;
|
|
touchRef.current.style.transform = `translateX(${deltaX}px)`;
|
|
};
|
|
|
|
const handleTouchEnd = () => {
|
|
if (!touchRef.current) return;
|
|
const deltaX = currentX.current - startX.current;
|
|
const threshold = 50; // pixels
|
|
|
|
touchRef.current.style.transform = 'translateX(0)';
|
|
|
|
if (Math.abs(deltaX) > threshold) {
|
|
if (deltaX > 0 && currentIndexVal > 0) {
|
|
// Swipe right - previous
|
|
onIndexChange?.(currentIndexVal - 1);
|
|
} else if (deltaX < 0 && currentIndexVal < currentPhotos.length - 1) {
|
|
// Swipe left - next
|
|
onIndexChange?.(currentIndexVal + 1);
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
// Load task info if photo has task_id and slug is available
|
|
React.useEffect(() => {
|
|
if (!photo?.task_id || !slug) {
|
|
setTask(null);
|
|
setTaskLoading(false);
|
|
return;
|
|
}
|
|
|
|
const taskId = photo.task_id;
|
|
|
|
(async () => {
|
|
setTaskLoading(true);
|
|
try {
|
|
const res = await fetch(`/api/v1/events/${slug}/tasks`);
|
|
if (res.ok) {
|
|
const tasks = await res.json();
|
|
const foundTask = tasks.find((t: any) => t.id === taskId);
|
|
if (foundTask) {
|
|
setTask({
|
|
id: foundTask.id,
|
|
title: foundTask.title || `Aufgabe ${taskId}`
|
|
});
|
|
} else {
|
|
setTask({
|
|
id: taskId,
|
|
title: `Unbekannte Aufgabe ${taskId}`
|
|
});
|
|
}
|
|
} else {
|
|
setTask({
|
|
id: taskId,
|
|
title: `Unbekannte Aufgabe ${taskId}`
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load task:', error);
|
|
setTask({
|
|
id: taskId,
|
|
title: `Unbekannte Aufgabe ${taskId}`
|
|
});
|
|
} finally {
|
|
setTaskLoading(false);
|
|
}
|
|
})();
|
|
}, [photo?.task_id, slug]);
|
|
|
|
async function onLike() {
|
|
if (liked || !photo) return;
|
|
setLiked(true);
|
|
try {
|
|
const count = await likePhoto(photo.id);
|
|
setLikes(count);
|
|
// Update localStorage
|
|
try {
|
|
const raw = localStorage.getItem('liked-photo-ids');
|
|
const arr: number[] = raw ? JSON.parse(raw) : [];
|
|
if (!arr.includes(photo.id)) {
|
|
localStorage.setItem('liked-photo-ids', JSON.stringify([...arr, photo.id]));
|
|
}
|
|
} catch {}
|
|
} catch (error) {
|
|
console.error('Like failed:', error);
|
|
setLiked(false);
|
|
}
|
|
}
|
|
|
|
function onOpenChange(open: boolean) {
|
|
if (!open) handleClose();
|
|
}
|
|
|
|
return (
|
|
<Dialog open={true} onOpenChange={onOpenChange}>
|
|
<DialogContent hideClose className="max-w-5xl border-0 bg-black p-0 text-white">
|
|
{/* Header with controls */}
|
|
<div className="flex items-center justify-between p-2">
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={onLike}
|
|
disabled={liked}
|
|
>
|
|
<Heart className={`mr-1 h-4 w-4 ${liked ? 'fill-red-400 text-red-400' : ''}`} />
|
|
{likes}
|
|
</Button>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
{currentIndexVal > 0 && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => onIndexChange?.(currentIndexVal - 1)}
|
|
className="h-8 w-8 p-0"
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={onClose}
|
|
className="h-8 w-8 p-0"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
{currentIndexVal < currentPhotos.length - 1 && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => onIndexChange?.(currentIndexVal + 1)}
|
|
className="h-8 w-8 p-0"
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Task Info Overlay */}
|
|
{task && (
|
|
<div className="absolute bottom-4 left-4 right-4 z-20 bg-black/60 backdrop-blur-sm rounded-xl p-3 border border-white/20 max-w-md">
|
|
<div className="text-sm">
|
|
<div className="font-semibold mb-1 text-white">Task: {task.title}</div>
|
|
{taskLoading && (
|
|
<div className="text-xs opacity-70 text-gray-300">Lade Aufgabe...</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Photo Display */}
|
|
<div
|
|
ref={touchRef}
|
|
className="flex items-center justify-center min-h-[60vh] p-4 relative overflow-hidden"
|
|
onTouchStart={handleTouchStart}
|
|
onTouchMove={handleTouchMove}
|
|
onTouchEnd={handleTouchEnd}
|
|
>
|
|
<img
|
|
src={photo?.file_path || photo?.thumbnail_path}
|
|
alt={`Foto ${photo?.id || ''}${photo?.task_title ? ` - ${photo.task_title}` : ''}`}
|
|
className="max-h-[80vh] max-w-full object-contain transition-transform duration-200"
|
|
onError={(e) => {
|
|
console.error('Image load error:', e);
|
|
(e.target as HTMLImageElement).style.display = 'none';
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Loading state for task */}
|
|
{taskLoading && !task && (
|
|
<div className="absolute top-4 left-4 right-4 z-20 bg-black/60 backdrop-blur-sm rounded-xl p-3 border border-white/20 max-w-md">
|
|
<div className="text-sm text-center">
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mx-auto mb-1"></div>
|
|
<div className="text-xs opacity-70">Lade Aufgabe...</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|