fixed like action, better dark mode, bottom navigation working, added taskcollection
This commit is contained in:
@@ -1,99 +1,471 @@
|
||||
import React from 'react';
|
||||
import React, { useState, useRef, useEffect, useCallback } from 'react';
|
||||
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { Page } from './_util';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { getDeviceId } from '../lib/device';
|
||||
import { compressPhoto, formatBytes } from '../lib/image';
|
||||
import { useUploadQueue } from '../queue/hooks';
|
||||
import React from 'react';
|
||||
import { useAppearance } from '../../hooks/use-appearance';
|
||||
import { Camera, RotateCcw, Zap, ZapOff } from 'lucide-react';
|
||||
import BottomNav from '../components/BottomNav';
|
||||
import { uploadPhoto } from '../services/photosApi';
|
||||
|
||||
type Item = { file: File; out?: File; progress: number; done?: boolean; error?: string; id?: number };
|
||||
interface Task {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
instructions?: string;
|
||||
duration: number;
|
||||
emotion?: { slug: string; name: string };
|
||||
difficulty?: 'easy' | 'medium' | 'hard';
|
||||
}
|
||||
|
||||
export default function UploadPage() {
|
||||
const { slug } = useParams();
|
||||
const [items, setItems] = React.useState<Item[]>([]);
|
||||
const queue = useUploadQueue();
|
||||
const [progressMap, setProgressMap] = React.useState<Record<number, number>>({});
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const [searchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const { appearance } = useAppearance();
|
||||
const isDark = appearance === 'dark';
|
||||
|
||||
React.useEffect(() => {
|
||||
const onProg = (e: any) => {
|
||||
const { id, progress } = e.detail || {};
|
||||
if (typeof id === 'number') setProgressMap((m) => ({ ...m, [id]: progress }));
|
||||
};
|
||||
window.addEventListener('queue-progress', onProg);
|
||||
return () => window.removeEventListener('queue-progress', onProg);
|
||||
}, []);
|
||||
// Task data from URL params
|
||||
const taskId = searchParams.get('task');
|
||||
const emotionSlug = searchParams.get('emotion') || '';
|
||||
const [task, setTask] = useState<Task | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
async function onPick(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const files = Array.from(e.target.files ?? []).slice(0, 10);
|
||||
const results: Item[] = [];
|
||||
for (const f of files) {
|
||||
// Camera state
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const [stream, setStream] = useState<MediaStream | null>(null);
|
||||
const [facingMode, setFacingMode] = useState<'user' | 'environment'>('user'); // front = user, back = environment
|
||||
const [flashOn, setFlashOn] = useState(false);
|
||||
const [isPulsing, setIsPulsing] = useState(false);
|
||||
const [countdown, setCountdown] = useState(3);
|
||||
const [capturing, setCapturing] = useState(false);
|
||||
|
||||
// Load task data from API
|
||||
useEffect(() => {
|
||||
if (!slug || !taskId) {
|
||||
setError('Keine Aufgabendaten gefunden');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const taskIdNum = parseInt(taskId);
|
||||
if (isNaN(taskIdNum)) {
|
||||
setError('Ungültige Aufgaben-ID');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
async function fetchTask() {
|
||||
try {
|
||||
const out = await compressPhoto(f, { targetBytes: 1_500_000, maxEdge: 2560, qualityStart: 0.85 });
|
||||
results.push({ file: f, out, progress: 0 });
|
||||
} catch (err: any) {
|
||||
results.push({ file: f, progress: 0, error: err?.message || 'Komprimierung fehlgeschlagen' });
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch(`/api/v1/events/${slug}/tasks`);
|
||||
if (!response.ok) throw new Error('Tasks konnten nicht geladen werden');
|
||||
|
||||
const tasks = await response.json();
|
||||
const foundTask = tasks.find((t: any) => t.id === taskIdNum);
|
||||
|
||||
if (foundTask) {
|
||||
setTask({
|
||||
id: foundTask.id,
|
||||
title: foundTask.title || `Aufgabe ${taskIdNum}`,
|
||||
description: foundTask.description || 'Stelle dich für das Foto auf und lächle in die Kamera.',
|
||||
instructions: foundTask.instructions,
|
||||
duration: foundTask.duration || 2,
|
||||
emotion: foundTask.emotion,
|
||||
difficulty: 'medium' as const
|
||||
});
|
||||
} else {
|
||||
// Fallback for unknown task ID
|
||||
setTask({
|
||||
id: taskIdNum,
|
||||
title: `Unbekannte Aufgabe ${taskIdNum}`,
|
||||
description: 'Stelle dich für das Foto auf und lächle in die Kamera.',
|
||||
instructions: 'Positioniere dich gut und warte auf den Countdown.',
|
||||
duration: 2,
|
||||
emotion: emotionSlug ? { slug: emotionSlug, name: emotionSlug.replace('-', ' ').replace(/\b\w/g, l => l.toUpperCase()) } : undefined,
|
||||
difficulty: 'medium' as const
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch task:', err);
|
||||
setError('Aufgabe konnte nicht geladen werden');
|
||||
// Set fallback task
|
||||
setTask({
|
||||
id: taskIdNum,
|
||||
title: `Unbekannte Aufgabe ${taskIdNum}`,
|
||||
description: 'Stelle dich für das Foto auf und lächle in die Kamera.',
|
||||
instructions: 'Positioniere dich gut und warte auf den Countdown.',
|
||||
duration: 2,
|
||||
emotion: emotionSlug ? { slug: emotionSlug, name: emotionSlug.replace('-', ' ').replace(/\b\w/g, l => l.toUpperCase()) } : undefined,
|
||||
difficulty: 'medium' as const
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
setItems(results);
|
||||
|
||||
fetchTask();
|
||||
}, [slug, taskId, emotionSlug]);
|
||||
|
||||
// Camera setup
|
||||
useEffect(() => {
|
||||
if (!slug || loading || !task) return;
|
||||
|
||||
const setupCamera = async () => {
|
||||
try {
|
||||
const constraints: MediaStreamConstraints = {
|
||||
video: {
|
||||
width: { ideal: 1280 },
|
||||
height: { ideal: 720 },
|
||||
facingMode: facingMode ? { ideal: facingMode } : undefined
|
||||
}
|
||||
};
|
||||
|
||||
console.log('Requesting camera with constraints:', constraints);
|
||||
|
||||
const newStream = await navigator.mediaDevices.getUserMedia(constraints);
|
||||
if (videoRef.current) {
|
||||
videoRef.current.srcObject = newStream;
|
||||
videoRef.current.play().catch(e => console.error('Video play error:', e));
|
||||
// Set video dimensions after metadata is loaded
|
||||
videoRef.current.onloadedmetadata = () => {
|
||||
if (videoRef.current) {
|
||||
videoRef.current.style.display = 'block';
|
||||
}
|
||||
};
|
||||
}
|
||||
setStream(newStream);
|
||||
setError(null); // Clear any previous errors
|
||||
} catch (err: any) {
|
||||
console.error('Camera access error:', err.name, err.message);
|
||||
|
||||
let errorMessage = 'Kamera konnte nicht gestartet werden.';
|
||||
|
||||
switch (err.name) {
|
||||
case 'NotAllowedError':
|
||||
errorMessage = 'Kamera-Zugriff verweigert.\n\n' +
|
||||
'• Chrome: Adressleiste klicken → Kamera-Symbol → "Zulassen"\n' +
|
||||
'• Safari: Einstellungen → Website-Einstellungen → Kamera → "Erlauben"\n' +
|
||||
'• Firefox: Adressleiste → Berechtigungen → Kamera → "Erlauben"\n\n' +
|
||||
'Danach Seite neu laden.';
|
||||
break;
|
||||
case 'NotFoundError':
|
||||
errorMessage = 'Keine Kamera gefunden. Bitte überprüfen Sie:\n' +
|
||||
'• Ob eine Kamera am Gerät verfügbar ist\n' +
|
||||
'• Ob andere Apps die Kamera verwenden\n' +
|
||||
'• Gerätekonfiguration in den Browser-Einstellungen';
|
||||
break;
|
||||
case 'NotSupportedError':
|
||||
errorMessage = 'Kamera nicht unterstützt. Bitte verwenden Sie:\n' +
|
||||
'• Chrome, Firefox oder Safari (neueste Version)\n' +
|
||||
'• HTTPS-Verbindung (nicht HTTP)';
|
||||
break;
|
||||
case 'OverconstrainedError':
|
||||
errorMessage = 'Kamera-Einstellungen nicht verfügbar. Versuche mit Standard-Einstellungen...';
|
||||
// Fallback to basic constraints
|
||||
try {
|
||||
const fallbackConstraints = { video: true };
|
||||
const fallbackStream = await navigator.mediaDevices.getUserMedia(fallbackConstraints);
|
||||
if (videoRef.current) {
|
||||
videoRef.current.srcObject = fallbackStream;
|
||||
videoRef.current.play();
|
||||
}
|
||||
setStream(fallbackStream);
|
||||
setError(null);
|
||||
return;
|
||||
} catch (fallbackErr) {
|
||||
console.error('Fallback camera failed:', fallbackErr);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
errorMessage = `Kamera-Fehler (${err.name}): ${err.message}\n\nBitte versuchen Sie:\n• Seite neu laden\n• Browser neu starten\n• Anderen Browser verwenden`;
|
||||
}
|
||||
|
||||
setError(errorMessage);
|
||||
}
|
||||
};
|
||||
|
||||
setupCamera();
|
||||
|
||||
return () => {
|
||||
if (stream) {
|
||||
stream.getTracks().forEach(track => track.stop());
|
||||
setStream(null);
|
||||
}
|
||||
};
|
||||
}, [slug, loading, task, facingMode]);
|
||||
|
||||
// Handle capture
|
||||
const handleCapture = useCallback(async () => {
|
||||
if (!videoRef.current || !canvasRef.current || !task) return;
|
||||
|
||||
setCapturing(true);
|
||||
setIsPulsing(false);
|
||||
|
||||
// Start countdown
|
||||
let count = 3;
|
||||
setCountdown(count);
|
||||
|
||||
const countdownInterval = setInterval(() => {
|
||||
count--;
|
||||
setCountdown(count);
|
||||
if (count <= 0) {
|
||||
clearInterval(countdownInterval);
|
||||
|
||||
// Capture photo
|
||||
const video = videoRef.current;
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const context = canvas.getContext('2d');
|
||||
if (!context || !video) return;
|
||||
|
||||
canvas.width = video.videoWidth;
|
||||
canvas.height = video.videoHeight;
|
||||
context.drawImage(video, 0, 0);
|
||||
|
||||
// Convert to blob
|
||||
canvas.toBlob(async (blob) => {
|
||||
if (blob && task && slug) {
|
||||
try {
|
||||
// Show uploading state
|
||||
setUploading(true);
|
||||
setCapturing(false);
|
||||
setCountdown(3);
|
||||
setError(null);
|
||||
|
||||
// Use emotionSlug directly (backend expects string slug)
|
||||
|
||||
// Convert Blob to File with proper filename
|
||||
const timestamp = Date.now();
|
||||
const fileName = `photo-${timestamp}-${task.id}.jpg`;
|
||||
const file = new File([blob], fileName, {
|
||||
type: 'image/jpeg',
|
||||
lastModified: timestamp
|
||||
});
|
||||
|
||||
console.log('Uploading photo:', {
|
||||
taskId: task.id,
|
||||
emotionSlug,
|
||||
fileName,
|
||||
fileSize: file.size
|
||||
});
|
||||
|
||||
// Upload the photo
|
||||
const photoId = await uploadPhoto(slug, file, task.id, emotionSlug);
|
||||
|
||||
console.log('Upload successful, photo ID:', photoId);
|
||||
|
||||
// Navigate to gallery with success
|
||||
navigate(`/e/${slug}/gallery?task=${task.id}&emotion=${emotionSlug}&uploaded=true`);
|
||||
} catch (error: any) {
|
||||
console.error('Upload failed:', error);
|
||||
setError(`Upload fehlgeschlagen: ${error.message}\n\nFoto wurde erstellt, aber nicht hochgeladen.\nVersuchen Sie es erneut oder wählen Sie ein anderes Foto aus.`);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
}
|
||||
}, 'image/jpeg', 0.8);
|
||||
|
||||
setCapturing(false);
|
||||
setCountdown(3);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
// Start pulsing animation
|
||||
setIsPulsing(true);
|
||||
}, [task, emotionSlug, slug, navigate]);
|
||||
|
||||
// Switch camera
|
||||
const switchCamera = () => {
|
||||
setFacingMode(prev => prev === 'user' ? 'environment' : 'user');
|
||||
};
|
||||
|
||||
// Toggle flash (for back camera only)
|
||||
const toggleFlash = () => {
|
||||
if (facingMode !== 'environment') return;
|
||||
setFlashOn(prev => !prev);
|
||||
// TODO: Implement actual flash control if possible
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Page title="Kamera laden...">
|
||||
<div className={`flex flex-col items-center justify-center min-h-[60vh] p-4 ${
|
||||
isDark ? 'text-white' : 'text-gray-900'
|
||||
}`}>
|
||||
<Camera className="h-12 w-12 animate-pulse mb-4 text-pink-500" />
|
||||
<p className="text-sm">Kamera wird gestartet...</p>
|
||||
</div>
|
||||
<BottomNav />
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
async function startUpload() {
|
||||
// Enqueue items for offline-friendly processing
|
||||
for (const it of items) {
|
||||
await queue.add({ slug: slug!, fileName: it.out?.name ?? it.file.name, blob: it.out ?? it.file });
|
||||
}
|
||||
setItems([]);
|
||||
if (error || !task) {
|
||||
return (
|
||||
<Page title="Fehler">
|
||||
<div className={`flex flex-col items-center justify-center min-h-[60vh] p-4 ${
|
||||
isDark ? 'text-white' : 'text-gray-900'
|
||||
}`}>
|
||||
<Camera className="h-12 w-12 text-red-500 mb-4" />
|
||||
<div className="text-center space-y-2">
|
||||
<h2 className="text-xl font-semibold">Kamera nicht verfügbar</h2>
|
||||
<p className="text-sm text-muted-foreground max-w-md">{error}</p>
|
||||
<Button onClick={() => navigate(`/e/${slug}`)} variant="outline" className="mt-4">
|
||||
Zurück zur Startseite
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<BottomNav />
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
if (uploading) {
|
||||
return (
|
||||
<Page title="Foto wird hochgeladen...">
|
||||
<div className={`flex flex-col items-center justify-center min-h-screen p-4 ${
|
||||
isDark ? 'text-white' : 'text-gray-900'
|
||||
}`}>
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-pink-500 mb-4"></div>
|
||||
<h2 className="text-xl font-semibold mb-2">Foto wird hochgeladen</h2>
|
||||
<p className="text-sm text-center text-muted-foreground">Bitte warten... Dies kann einen Moment dauern.</p>
|
||||
<Button
|
||||
onClick={() => navigate(`/e/${slug}/gallery`)}
|
||||
variant="outline"
|
||||
className="mt-6"
|
||||
disabled={true}
|
||||
>
|
||||
Zur Galerie
|
||||
</Button>
|
||||
</div>
|
||||
<BottomNav />
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
const difficultyColor = task.difficulty === 'easy' ? 'text-green-400' :
|
||||
task.difficulty === 'medium' ? 'text-yellow-400' : 'text-red-400';
|
||||
|
||||
return (
|
||||
<Page title="Foto aufnehmen/hochladen">
|
||||
<Input type="file" accept="image/*" multiple capture="environment" onChange={onPick} />
|
||||
<div className="h-3" />
|
||||
<Button onClick={startUpload} disabled={items.length === 0}>Hochladen</Button>
|
||||
<div className="mt-4 space-y-2">
|
||||
{items.map((it, i) => (
|
||||
<div key={i} className="rounded border p-2 text-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="truncate">{it.file.name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{formatBytes(it.out?.size ?? it.file.size)}
|
||||
</div>
|
||||
</div>
|
||||
{it.done && <div className="text-xs text-muted-foreground">Fertig</div>}
|
||||
{it.error && <div className="text-xs text-red-500">{it.error}</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<div className="mb-2 text-sm font-medium">Warteschlange</div>
|
||||
{queue.loading ? (
|
||||
<div className="text-sm text-muted-foreground">Lade…</div>
|
||||
) : queue.items.length === 0 ? (
|
||||
<div className="text-sm text-muted-foreground">Keine offenen Uploads.</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{queue.items.map((q) => (
|
||||
<div key={q.id} className="rounded border p-2 text-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="truncate">{q.fileName}</div>
|
||||
<div className="text-xs text-muted-foreground">{q.status}{q.status==='uploading' && typeof q.id==='number' ? ` • ${progressMap[q.id] ?? 0}%` : ''}</div>
|
||||
<Page title={task.title}>
|
||||
<div className={`min-h-screen flex flex-col ${
|
||||
isDark ? 'bg-gray-900 text-white' : 'bg-black text-white'
|
||||
}`}>
|
||||
{/* Camera Preview Container */}
|
||||
<div className="flex-1 relative overflow-hidden">
|
||||
{/* Video Background */}
|
||||
<video
|
||||
ref={videoRef}
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
playsInline
|
||||
muted
|
||||
/>
|
||||
|
||||
{/* Task Info Overlay */}
|
||||
<div className="absolute top-4 left-4 right-4 z-10">
|
||||
<div className="space-y-2 bg-black/40 backdrop-blur-sm rounded-xl p-4 border border-white/20">
|
||||
<h1 className="text-xl font-bold">{task.title}</h1>
|
||||
<p className="text-sm leading-relaxed opacity-90">{task.description}</p>
|
||||
{task.instructions && (
|
||||
<div className="text-xs italic opacity-80 mt-2 pt-2 border-t border-white/20">
|
||||
💡 {task.instructions}
|
||||
</div>
|
||||
{q.status === 'uploading' && typeof q.id==='number' && (
|
||||
<div className="mt-2 h-2 w-full rounded bg-gray-200 dark:bg-gray-700">
|
||||
<div className="h-2 rounded bg-emerald-500" style={{ width: `${progressMap[q.id] ?? 0}%` }} />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<span className={`text-xs font-medium ${difficultyColor}`}>
|
||||
Schwierigkeit: {task.difficulty}
|
||||
</span>
|
||||
{emotionSlug && (
|
||||
<span className="text-xs opacity-80">
|
||||
Stimmung: {task.emotion?.name || emotionSlug}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<div className="flex gap-2">
|
||||
<Button variant="secondary" onClick={queue.retryAll}>Erneut versuchen</Button>
|
||||
<Button variant="secondary" onClick={queue.clearFinished}>Erledigte entfernen</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Camera Controls */}
|
||||
<div className="absolute bottom-20 left-4 right-4 z-10">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
{/* Flash Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={toggleFlash}
|
||||
disabled={facingMode === 'user'}
|
||||
className="h-12 w-12 rounded-full bg-black/40 backdrop-blur-sm border border-white/20"
|
||||
>
|
||||
{flashOn ? <Zap className="h-6 w-6 text-yellow-400" /> : <ZapOff className="h-6 w-6" />}
|
||||
</Button>
|
||||
|
||||
{/* Capture Button */}
|
||||
<div className="relative">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={handleCapture}
|
||||
disabled={capturing}
|
||||
className={`
|
||||
h-20 w-20 rounded-full bg-white/20 backdrop-blur-sm border-4 border-white/30
|
||||
${isPulsing ? 'animate-pulse-ring' : ''}
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
`}
|
||||
>
|
||||
<div className="relative">
|
||||
<Camera className="h-8 w-8" />
|
||||
{capturing && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-lg font-bold text-white">{countdown}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Button>
|
||||
{/* Pulsing Ring Animation */}
|
||||
{isPulsing && (
|
||||
<div className="absolute inset-0 rounded-full h-20 w-20 border-4 border-pink-400/50 animate-ping" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Switch Camera Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={switchCamera}
|
||||
className="h-12 w-12 rounded-full bg-black/40 backdrop-blur-sm border border-white/20"
|
||||
>
|
||||
<RotateCcw className="h-6 w-6" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hidden Canvas for Capture */}
|
||||
<canvas ref={canvasRef} className="hidden" />
|
||||
</div>
|
||||
|
||||
<BottomNav />
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
@keyframes pulse-ring {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.animate-ping {
|
||||
animation: pulse-ring 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
|
||||
}
|
||||
`}</style>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user