858 lines
31 KiB
TypeScript
858 lines
31 KiB
TypeScript
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
||
import Header from '../components/Header';
|
||
import BottomNav from '../components/BottomNav';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||
import { uploadPhoto } from '../services/photosApi';
|
||
import { useGuestTaskProgress } from '../hooks/useGuestTaskProgress';
|
||
import { useAppearance } from '../../hooks/use-appearance';
|
||
import { cn } from '@/lib/utils';
|
||
import {
|
||
AlertTriangle,
|
||
Camera,
|
||
Grid3X3,
|
||
ImagePlus,
|
||
Info,
|
||
Loader2,
|
||
RotateCcw,
|
||
Sparkles,
|
||
Zap,
|
||
ZapOff,
|
||
} from 'lucide-react';
|
||
import { getEventPackage, type EventPackage } from '../services/eventApi';
|
||
|
||
interface Task {
|
||
id: number;
|
||
title: string;
|
||
description: string;
|
||
instructions?: string;
|
||
duration: number;
|
||
emotion?: { slug: string; name: string };
|
||
difficulty?: 'easy' | 'medium' | 'hard';
|
||
}
|
||
|
||
type PermissionState = 'idle' | 'prompt' | 'granted' | 'denied' | 'error' | 'unsupported';
|
||
type CameraMode = 'preview' | 'countdown' | 'review' | 'uploading';
|
||
|
||
type CameraPreferences = {
|
||
facingMode: 'user' | 'environment';
|
||
countdownSeconds: number;
|
||
countdownEnabled: boolean;
|
||
gridEnabled: boolean;
|
||
mirrorFrontPreview: boolean;
|
||
flashPreferred: boolean;
|
||
};
|
||
|
||
const DEFAULT_PREFS: CameraPreferences = {
|
||
facingMode: 'environment',
|
||
countdownSeconds: 3,
|
||
countdownEnabled: true,
|
||
gridEnabled: true,
|
||
mirrorFrontPreview: true,
|
||
flashPreferred: false,
|
||
};
|
||
|
||
export default function UploadPage() {
|
||
const { slug } = useParams<{ slug: string }>();
|
||
const navigate = useNavigate();
|
||
const [searchParams] = useSearchParams();
|
||
const { appearance } = useAppearance();
|
||
const isDarkMode = appearance === 'dark';
|
||
const { markCompleted } = useGuestTaskProgress(slug);
|
||
|
||
const taskIdParam = searchParams.get('task');
|
||
const emotionSlug = searchParams.get('emotion') || '';
|
||
|
||
const primerStorageKey = slug ? `guestCameraPrimerDismissed_${slug}` : 'guestCameraPrimerDismissed';
|
||
const prefsStorageKey = slug ? `guestCameraPrefs_${slug}` : 'guestCameraPrefs';
|
||
|
||
const supportsCamera = typeof navigator !== 'undefined' && !!navigator.mediaDevices?.getUserMedia;
|
||
|
||
const [task, setTask] = useState<Task | null>(null);
|
||
const [loadingTask, setLoadingTask] = useState(true);
|
||
const [taskError, setTaskError] = useState<string | null>(null);
|
||
|
||
const [permissionState, setPermissionState] = useState<PermissionState>('idle');
|
||
const [permissionMessage, setPermissionMessage] = useState<string | null>(null);
|
||
|
||
const [preferences, setPreferences] = useState<CameraPreferences>(DEFAULT_PREFS);
|
||
const [mode, setMode] = useState<CameraMode>('preview');
|
||
const [countdownValue, setCountdownValue] = useState(DEFAULT_PREFS.countdownSeconds);
|
||
const [statusMessage, setStatusMessage] = useState<string>('');
|
||
|
||
const [reviewPhoto, setReviewPhoto] = useState<{ dataUrl: string; file: File } | null>(null);
|
||
const [uploadProgress, setUploadProgress] = useState(0);
|
||
const [uploadError, setUploadError] = useState<string | null>(null);
|
||
|
||
const [eventPackage, setEventPackage] = useState<EventPackage | null>(null);
|
||
const [canUpload, setCanUpload] = useState(true);
|
||
|
||
const [showPrimer, setShowPrimer] = useState<boolean>(() => {
|
||
if (typeof window === 'undefined') return false;
|
||
return window.localStorage.getItem(primerStorageKey) !== '1';
|
||
});
|
||
|
||
const videoRef = useRef<HTMLVideoElement | null>(null);
|
||
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||
const liveRegionRef = useRef<HTMLDivElement | null>(null);
|
||
|
||
const streamRef = useRef<MediaStream | null>(null);
|
||
const countdownTimerRef = useRef<number | null>(null);
|
||
const uploadProgressTimerRef = useRef<number | null>(null);
|
||
|
||
const taskId = useMemo(() => {
|
||
if (!taskIdParam) return null;
|
||
const parsed = parseInt(taskIdParam, 10);
|
||
return Number.isFinite(parsed) ? parsed : null;
|
||
}, [taskIdParam]);
|
||
|
||
// Load preferences from storage
|
||
useEffect(() => {
|
||
if (typeof window === 'undefined') return;
|
||
try {
|
||
const stored = window.localStorage.getItem(prefsStorageKey);
|
||
if (stored) {
|
||
const parsed = JSON.parse(stored) as Partial<CameraPreferences>;
|
||
setPreferences((prev) => ({ ...prev, ...parsed }));
|
||
}
|
||
} catch (error) {
|
||
console.warn('Failed to parse camera preferences', error);
|
||
}
|
||
}, [prefsStorageKey]);
|
||
|
||
// Persist preferences when they change
|
||
useEffect(() => {
|
||
if (typeof window === 'undefined') return;
|
||
try {
|
||
window.localStorage.setItem(prefsStorageKey, JSON.stringify(preferences));
|
||
} catch (error) {
|
||
console.warn('Failed to persist camera preferences', error);
|
||
}
|
||
}, [preferences, prefsStorageKey]);
|
||
|
||
// Load task metadata
|
||
useEffect(() => {
|
||
if (!slug || !taskId) {
|
||
setTaskError('Keine Aufgabeninformationen gefunden.');
|
||
setLoadingTask(false);
|
||
return;
|
||
}
|
||
|
||
let active = true;
|
||
|
||
async function loadTask() {
|
||
try {
|
||
setLoadingTask(true);
|
||
setTaskError(null);
|
||
|
||
const res = await fetch(`/api/v1/events/${encodeURIComponent(slug!)}/tasks`);
|
||
if (!res.ok) throw new Error('Tasks konnten nicht geladen werden');
|
||
const tasks = await res.json();
|
||
const found = Array.isArray(tasks) ? tasks.find((entry: any) => entry.id === taskId!) : null;
|
||
|
||
if (!active) return;
|
||
|
||
if (found) {
|
||
setTask({
|
||
id: found.id,
|
||
title: found.title || `Aufgabe ${taskId!}`,
|
||
description: found.description || 'Halte den Moment fest und teile ihn mit allen Gästen.',
|
||
instructions: found.instructions,
|
||
duration: found.duration || 2,
|
||
emotion: found.emotion,
|
||
difficulty: found.difficulty ?? 'medium',
|
||
});
|
||
} else {
|
||
setTask({
|
||
id: taskId!,
|
||
title: `Aufgabe ${taskId!}`,
|
||
description: 'Halte den Moment fest und teile ihn mit allen Gästen.',
|
||
instructions: 'Positioniere alle im Bild, starte den Countdown und lass die Emotion wirken.',
|
||
duration: 2,
|
||
emotion: emotionSlug
|
||
? { slug: emotionSlug, name: emotionSlug.replace('-', ' ').replace(/\b\w/g, (l) => l.toUpperCase()) }
|
||
: undefined,
|
||
difficulty: 'medium',
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to fetch task', error);
|
||
if (active) {
|
||
setTaskError('Aufgabe konnte nicht geladen werden. Du kannst trotzdem ein Foto machen.');
|
||
setTask({
|
||
id: taskId!,
|
||
title: `Aufgabe ${taskId!}`,
|
||
description: 'Halte den Moment fest und teile ihn mit allen Gästen.',
|
||
instructions: 'Positioniere alle im Bild, starte den Countdown und lass die Emotion wirken.',
|
||
duration: 2,
|
||
emotion: emotionSlug
|
||
? { slug: emotionSlug, name: emotionSlug.replace('-', ' ').replace(/\b\w/g, (l) => l.toUpperCase()) }
|
||
: undefined,
|
||
difficulty: 'medium',
|
||
});
|
||
}
|
||
} finally {
|
||
if (active) setLoadingTask(false);
|
||
}
|
||
}
|
||
|
||
loadTask();
|
||
return () => {
|
||
active = false;
|
||
};
|
||
}, [slug, taskId, emotionSlug]);
|
||
|
||
// Check upload limits
|
||
useEffect(() => {
|
||
if (!slug || !task) return;
|
||
|
||
const checkLimits = async () => {
|
||
try {
|
||
const pkg = await getEventPackage(slug);
|
||
setEventPackage(pkg);
|
||
if (pkg && pkg.used_photos >= pkg.package.max_photos) {
|
||
setCanUpload(false);
|
||
setUploadError('Upload-Limit erreicht. Kontaktieren Sie den Organisator für ein Upgrade.');
|
||
} else {
|
||
setCanUpload(true);
|
||
}
|
||
} catch (err) {
|
||
console.error('Failed to check package limits', err);
|
||
setCanUpload(false);
|
||
setUploadError('Fehler beim Prüfen des Limits. Upload deaktiviert.');
|
||
}
|
||
};
|
||
|
||
checkLimits();
|
||
}, [slug, task]);
|
||
|
||
const stopStream = useCallback(() => {
|
||
if (streamRef.current) {
|
||
streamRef.current.getTracks().forEach((track) => track.stop());
|
||
streamRef.current = null;
|
||
}
|
||
}, []);
|
||
|
||
const attachStreamToVideo = useCallback((stream: MediaStream) => {
|
||
if (!videoRef.current) return;
|
||
videoRef.current.srcObject = stream;
|
||
videoRef.current
|
||
.play()
|
||
.then(() => {
|
||
if (videoRef.current) {
|
||
videoRef.current.muted = true;
|
||
}
|
||
})
|
||
.catch((error) => console.error('Video play error', error));
|
||
}, []);
|
||
|
||
const createConstraint = useCallback(
|
||
(mode: 'user' | 'environment'): MediaStreamConstraints => ({
|
||
video: {
|
||
width: { ideal: 1920 },
|
||
height: { ideal: 1080 },
|
||
facingMode: { ideal: mode },
|
||
},
|
||
audio: false,
|
||
}),
|
||
[]
|
||
);
|
||
|
||
const startCamera = useCallback(async () => {
|
||
if (!supportsCamera) {
|
||
setPermissionState('unsupported');
|
||
setPermissionMessage('Dieses Gerät oder der Browser unterstützt keine Kamera-Zugriffe.');
|
||
return;
|
||
}
|
||
|
||
if (!task || mode === 'uploading') return;
|
||
|
||
try {
|
||
setPermissionState('prompt');
|
||
setPermissionMessage(null);
|
||
|
||
const stream = await navigator.mediaDevices.getUserMedia(createConstraint(preferences.facingMode));
|
||
stopStream();
|
||
streamRef.current = stream;
|
||
attachStreamToVideo(stream);
|
||
setPermissionState('granted');
|
||
} catch (error: any) {
|
||
console.error('Camera access error', error);
|
||
stopStream();
|
||
|
||
if (error?.name === 'NotAllowedError') {
|
||
setPermissionState('denied');
|
||
setPermissionMessage(
|
||
'Kamera-Zugriff wurde blockiert. Prüfe die Berechtigungen deines Browsers und versuche es erneut.'
|
||
);
|
||
} else if (error?.name === 'NotFoundError') {
|
||
setPermissionState('error');
|
||
setPermissionMessage('Keine Kamera gefunden. Du kannst stattdessen ein Foto aus deiner Galerie wählen.');
|
||
} else {
|
||
setPermissionState('error');
|
||
setPermissionMessage(`Kamera konnte nicht gestartet werden: ${error?.message || 'Unbekannter Fehler'}`);
|
||
}
|
||
}
|
||
}, [attachStreamToVideo, createConstraint, mode, preferences.facingMode, stopStream, supportsCamera, task]);
|
||
|
||
useEffect(() => {
|
||
if (!task || loadingTask) return;
|
||
startCamera();
|
||
return () => {
|
||
stopStream();
|
||
};
|
||
}, [task, loadingTask, startCamera, stopStream, preferences.facingMode]);
|
||
|
||
// Countdown live region updates
|
||
useEffect(() => {
|
||
if (!liveRegionRef.current) return;
|
||
if (mode === 'countdown') {
|
||
liveRegionRef.current.textContent = `Foto wird in ${countdownValue} Sekunden aufgenommen.`;
|
||
} else if (mode === 'review') {
|
||
liveRegionRef.current.textContent = 'Foto aufgenommen. <20>berpr<70>fe die Vorschau.';
|
||
} else if (mode === 'uploading') {
|
||
liveRegionRef.current.textContent = 'Foto wird hochgeladen.';
|
||
} else {
|
||
liveRegionRef.current.textContent = '';
|
||
}
|
||
}, [mode, countdownValue]);
|
||
|
||
const dismissPrimer = useCallback(() => {
|
||
setShowPrimer(false);
|
||
if (typeof window !== 'undefined') {
|
||
window.localStorage.setItem(primerStorageKey, '1');
|
||
}
|
||
}, [primerStorageKey]);
|
||
|
||
const handleToggleGrid = useCallback(() => {
|
||
setPreferences((prev) => ({ ...prev, gridEnabled: !prev.gridEnabled }));
|
||
}, []);
|
||
|
||
const handleToggleMirror = useCallback(() => {
|
||
setPreferences((prev) => ({ ...prev, mirrorFrontPreview: !prev.mirrorFrontPreview }));
|
||
}, []);
|
||
|
||
const handleToggleCountdown = useCallback(() => {
|
||
setPreferences((prev) => ({ ...prev, countdownEnabled: !prev.countdownEnabled }));
|
||
}, []);
|
||
|
||
const handleSwitchCamera = useCallback(() => {
|
||
setPreferences((prev) => ({
|
||
...prev,
|
||
facingMode: prev.facingMode === 'user' ? 'environment' : 'user',
|
||
}));
|
||
}, []);
|
||
|
||
const handleToggleFlashPreference = useCallback(() => {
|
||
setPreferences((prev) => ({ ...prev, flashPreferred: !prev.flashPreferred }));
|
||
}, []);
|
||
|
||
const resetCountdownTimer = useCallback(() => {
|
||
if (countdownTimerRef.current) {
|
||
window.clearInterval(countdownTimerRef.current);
|
||
countdownTimerRef.current = null;
|
||
}
|
||
}, []);
|
||
|
||
const performCapture = useCallback(() => {
|
||
if (!videoRef.current || !canvasRef.current) {
|
||
setUploadError('Kamera nicht bereit. Bitte versuche es erneut.');
|
||
setMode('preview');
|
||
return;
|
||
}
|
||
|
||
const video = videoRef.current;
|
||
const canvas = canvasRef.current;
|
||
const width = video.videoWidth;
|
||
const height = video.videoHeight;
|
||
|
||
if (!width || !height) {
|
||
setUploadError('Kamera liefert kein Bild. Bitte starte die Kamera neu.');
|
||
setMode('preview');
|
||
startCamera();
|
||
return;
|
||
}
|
||
|
||
canvas.width = width;
|
||
canvas.height = height;
|
||
const context = canvas.getContext('2d');
|
||
if (!context) {
|
||
setUploadError('Canvas konnte nicht initialisiert werden.');
|
||
setMode('preview');
|
||
return;
|
||
}
|
||
|
||
context.save();
|
||
const shouldMirror = preferences.facingMode === 'user' && preferences.mirrorFrontPreview;
|
||
if (shouldMirror) {
|
||
context.scale(-1, 1);
|
||
context.drawImage(video, -width, 0, width, height);
|
||
} else {
|
||
context.drawImage(video, 0, 0, width, height);
|
||
}
|
||
context.restore();
|
||
|
||
canvas.toBlob(
|
||
(blob) => {
|
||
if (!blob) {
|
||
setUploadError('Foto konnte nicht erstellt werden.');
|
||
setMode('preview');
|
||
return;
|
||
}
|
||
const timestamp = Date.now();
|
||
const fileName = `photo-${timestamp}.jpg`;
|
||
const file = new File([blob], fileName, { type: 'image/jpeg', lastModified: timestamp });
|
||
const dataUrl = canvas.toDataURL('image/jpeg', 0.92);
|
||
setReviewPhoto({ dataUrl, file });
|
||
setMode('review');
|
||
},
|
||
'image/jpeg',
|
||
0.92
|
||
);
|
||
}, [preferences.facingMode, preferences.mirrorFrontPreview, startCamera]);
|
||
|
||
const beginCapture = useCallback(() => {
|
||
setUploadError(null);
|
||
if (preferences.countdownEnabled && preferences.countdownSeconds > 0) {
|
||
setMode('countdown');
|
||
setCountdownValue(preferences.countdownSeconds);
|
||
resetCountdownTimer();
|
||
countdownTimerRef.current = window.setInterval(() => {
|
||
setCountdownValue((prev) => {
|
||
if (prev <= 1) {
|
||
resetCountdownTimer();
|
||
performCapture();
|
||
return preferences.countdownSeconds;
|
||
}
|
||
return prev - 1;
|
||
});
|
||
}, 1000);
|
||
} else {
|
||
performCapture();
|
||
}
|
||
}, [performCapture, preferences.countdownEnabled, preferences.countdownSeconds, resetCountdownTimer]);
|
||
|
||
const handleRetake = useCallback(() => {
|
||
setReviewPhoto(null);
|
||
setUploadProgress(0);
|
||
setUploadError(null);
|
||
setMode('preview');
|
||
}, []);
|
||
|
||
const navigateAfterUpload = useCallback(
|
||
(photoId: number | undefined) => {
|
||
if (!slug || !task) return;
|
||
const params = new URLSearchParams();
|
||
params.set('uploaded', 'true');
|
||
if (task.id) params.set('task', String(task.id));
|
||
if (photoId) params.set('photo', String(photoId));
|
||
if (emotionSlug) params.set('emotion', emotionSlug);
|
||
navigate(`/e/${encodeURIComponent(slug!)}/gallery?${params.toString()}`);
|
||
},
|
||
[emotionSlug, navigate, slug, task]
|
||
);
|
||
|
||
const handleUsePhoto = useCallback(async () => {
|
||
if (!slug || !reviewPhoto || !task || !canUpload) return;
|
||
setMode('uploading');
|
||
setUploadProgress(5);
|
||
setUploadError(null);
|
||
setStatusMessage('Foto wird vorbereitet...');
|
||
|
||
if (uploadProgressTimerRef.current) {
|
||
window.clearInterval(uploadProgressTimerRef.current);
|
||
}
|
||
uploadProgressTimerRef.current = window.setInterval(() => {
|
||
setUploadProgress((prev) => (prev < 90 ? prev + 5 : prev));
|
||
}, 400);
|
||
|
||
try {
|
||
const photoId = await uploadPhoto(slug, reviewPhoto.file, task.id, emotionSlug || undefined);
|
||
setUploadProgress(100);
|
||
setStatusMessage('Upload abgeschlossen.');
|
||
markCompleted(task.id);
|
||
stopStream();
|
||
navigateAfterUpload(photoId);
|
||
} catch (error: any) {
|
||
console.error('Upload failed', error);
|
||
setUploadError(error?.message || 'Upload fehlgeschlagen. Bitte versuche es erneut.');
|
||
setMode('review');
|
||
} finally {
|
||
if (uploadProgressTimerRef.current) {
|
||
window.clearInterval(uploadProgressTimerRef.current);
|
||
uploadProgressTimerRef.current = null;
|
||
}
|
||
setStatusMessage('');
|
||
}
|
||
}, [emotionSlug, markCompleted, navigateAfterUpload, reviewPhoto, slug, stopStream, task, canUpload]);
|
||
|
||
const handleGalleryPick = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
||
if (!canUpload) return;
|
||
const file = event.target.files?.[0];
|
||
if (!file) return;
|
||
setUploadError(null);
|
||
const reader = new FileReader();
|
||
reader.onload = () => {
|
||
setReviewPhoto({ dataUrl: reader.result as string, file });
|
||
setMode('review');
|
||
};
|
||
reader.onerror = () => {
|
||
setUploadError('Auswahl fehlgeschlagen. Bitte versuche es erneut.');
|
||
};
|
||
reader.readAsDataURL(file);
|
||
}, [canUpload]);
|
||
|
||
const difficultyBadgeClass = useMemo(() => {
|
||
if (!task) return 'text-white';
|
||
switch (task.difficulty) {
|
||
case 'easy':
|
||
return 'text-emerald-400';
|
||
case 'hard':
|
||
return 'text-rose-400';
|
||
default:
|
||
return 'text-amber-300';
|
||
}
|
||
}, [task]);
|
||
|
||
const isCameraActive = permissionState === 'granted' && mode !== 'uploading';
|
||
const showTaskOverlay = task && mode !== 'uploading';
|
||
|
||
const isUploadDisabled = !canUpload || !task;
|
||
|
||
useEffect(() => () => {
|
||
resetCountdownTimer();
|
||
if (uploadProgressTimerRef.current) {
|
||
window.clearInterval(uploadProgressTimerRef.current);
|
||
}
|
||
}, [resetCountdownTimer]);
|
||
|
||
if (!supportsCamera && !task) {
|
||
return (
|
||
<div className="pb-16">
|
||
<Header slug={slug} title="Kamera" />
|
||
<main className="px-4 py-6">
|
||
<Alert>
|
||
<AlertDescription>
|
||
Dieses Gerät unterstützt keine Kamera-Zugriffe. Du kannst stattdessen Fotos aus deiner Galerie hochladen.
|
||
</AlertDescription>
|
||
</Alert>
|
||
</main>
|
||
<BottomNav />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (loadingTask) {
|
||
return (
|
||
<div className="pb-16">
|
||
<Header slug={slug} title="Kamera" />
|
||
<main className="px-4 py-6 flex flex-col items-center justify-center text-center">
|
||
<Loader2 className="h-10 w-10 animate-spin text-pink-500 mb-4" />
|
||
<p className="text-sm text-muted-foreground">Aufgabe und Kamera werden vorbereitet ...</p>
|
||
</main>
|
||
<BottomNav />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!canUpload) {
|
||
return (
|
||
<div className="pb-16">
|
||
<Header slug={slug} title="Kamera" />
|
||
<main className="px-4 py-6">
|
||
<Alert variant="destructive">
|
||
<AlertTriangle className="h-4 w-4" />
|
||
<AlertDescription>
|
||
Upload-Limit erreicht ({eventPackage?.used_photos || 0} / {eventPackage?.package.max_photos || 0} Fotos).
|
||
Kontaktieren Sie den Organisator für ein Package-Upgrade.
|
||
</AlertDescription>
|
||
</Alert>
|
||
</main>
|
||
<BottomNav />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const renderPrimer = () => (
|
||
showPrimer && (
|
||
<div className="mx-4 mt-3 rounded-xl border border-pink-200 bg-white/90 p-4 text-sm text-pink-900 shadow">
|
||
<div className="flex items-start gap-3">
|
||
<Info className="mt-0.5 h-5 w-5 flex-shrink-0" />
|
||
<div className="text-left">
|
||
<p className="font-semibold">Bereit für dein Shooting?</p>
|
||
<p className="mt-1">
|
||
Suche dir gutes Licht, halte die Stimmung der Aufgabe fest und nutze die Kontrollleiste für Countdown, Grid und Kamerawechsel.
|
||
</p>
|
||
</div>
|
||
<Button variant="ghost" size="sm" onClick={dismissPrimer}>
|
||
Alles klar
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)
|
||
);
|
||
|
||
const renderPermissionNotice = () => {
|
||
if (permissionState === 'granted') return null;
|
||
if (permissionState === 'unsupported') {
|
||
return (
|
||
<Alert className="mx-4">
|
||
<AlertDescription>
|
||
Dieses Gerät unterstützt keine Kamera. Nutze den Button `Foto aus Galerie wählen`, um dennoch teilzunehmen.
|
||
</AlertDescription>
|
||
</Alert>
|
||
);
|
||
}
|
||
if (permissionState === 'denied' || permissionState === 'error') {
|
||
return (
|
||
<Alert variant="destructive" className="mx-4">
|
||
<AlertDescription className="space-y-3">
|
||
<div>{permissionMessage}</div>
|
||
<Button size="sm" variant="outline" onClick={startCamera}>
|
||
Erneut versuchen
|
||
</Button>
|
||
</AlertDescription>
|
||
</Alert>
|
||
);
|
||
}
|
||
return (
|
||
<Alert className="mx-4">
|
||
<AlertDescription>
|
||
Wir benötigen Zugriff auf deine Kamera. Bestätige die Browser-Abfrage oder nutze alternativ ein Foto aus deiner Galerie.
|
||
</AlertDescription>
|
||
</Alert>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<div className="pb-16">
|
||
<Header slug={slug} title="Kamera" />
|
||
<main className="relative flex flex-col gap-4 pb-4">
|
||
<div className="absolute left-0 right-0 top-0" aria-hidden="true">
|
||
{renderPrimer()}
|
||
</div>
|
||
<div className="pt-32" />
|
||
{permissionState !== 'granted' && renderPermissionNotice()}
|
||
|
||
<section className="relative mx-4 overflow-hidden rounded-2xl border border-white/10 bg-black text-white shadow-xl">
|
||
<div className="relative aspect-[3/4] sm:aspect-video">
|
||
<video
|
||
ref={videoRef}
|
||
className={cn(
|
||
'absolute inset-0 h-full w-full object-cover transition-transform duration-200',
|
||
preferences.facingMode === 'user' && preferences.mirrorFrontPreview ? '-scale-x-100' : 'scale-x-100',
|
||
!isCameraActive && 'opacity-30'
|
||
)}
|
||
playsInline
|
||
muted
|
||
/>
|
||
|
||
{preferences.gridEnabled && (
|
||
<div
|
||
className="pointer-events-none absolute inset-0 z-10"
|
||
style={{
|
||
backgroundImage:
|
||
'linear-gradient(90deg, rgba(255,255,255,0.25) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,0.25) 1px, transparent 1px)',
|
||
backgroundSize: '33.333% 100%, 100% 33.333%',
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{!isCameraActive && (
|
||
<div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-black/70 text-center text-sm">
|
||
<Camera className="mb-3 h-8 w-8 text-pink-400" />
|
||
<p className="max-w-xs text-white/90">
|
||
Kamera ist nicht aktiv. {permissionMessage || 'Tippe auf `Kamera starten`, um loszulegen.'}
|
||
</p>
|
||
<div className="mt-4 flex flex-wrap gap-2">
|
||
<Button size="sm" onClick={startCamera}>
|
||
Kamera starten
|
||
</Button>
|
||
<Button size="sm" variant="secondary" onClick={() => fileInputRef.current?.click()}>
|
||
Foto aus Galerie wählen
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showTaskOverlay && task && (
|
||
<div className="absolute left-3 right-3 top-3 z-30 flex flex-col gap-2 rounded-xl border border-white/15 bg-black/40 p-3 backdrop-blur-sm">
|
||
<div className="flex items-center justify-between gap-2">
|
||
<Badge variant="secondary" className="flex items-center gap-2 text-xs">
|
||
<Sparkles className="h-3.5 w-3.5" />
|
||
Aufgabe #{task.id}
|
||
</Badge>
|
||
<span className={cn('text-xs font-medium uppercase tracking-wide', difficultyBadgeClass)}>
|
||
{task.difficulty === 'easy'
|
||
? 'Leicht'
|
||
: task.difficulty === 'hard'
|
||
? 'Herausfordernd'
|
||
: 'Medium'}
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<h1 className="text-lg font-semibold leading-tight">{task.title}</h1>
|
||
<p className="mt-1 text-xs leading-relaxed text-white/80">{task.description}</p>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-2 text-[11px] text-white/70">
|
||
{task.instructions && <span>Hinweis: {task.instructions}</span>}
|
||
{emotionSlug && (
|
||
<span className="rounded-full border border-white/20 px-2 py-0.5">Stimmung: {task.emotion?.name || emotionSlug}</span>
|
||
)}
|
||
{preferences.countdownEnabled && (
|
||
<span className="rounded-full border border-white/20 px-2 py-0.5">
|
||
Countdown: {preferences.countdownSeconds}s
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{mode === 'countdown' && (
|
||
<div className="absolute inset-0 z-40 flex flex-col items-center justify-center bg-black/60 text-white">
|
||
<div className="text-6xl font-bold">{countdownValue}</div>
|
||
<p className="mt-2 text-sm text-white/70">Bereit machen ...</p>
|
||
</div>
|
||
)}
|
||
|
||
{mode === 'review' && reviewPhoto && (
|
||
<div className="absolute inset-0 z-40 flex flex-col bg-black">
|
||
<img src={reviewPhoto.dataUrl} alt="Aufgenommenes Foto" className="h-full w-full object-contain" />
|
||
</div>
|
||
)}
|
||
|
||
{mode === 'uploading' && (
|
||
<div className="absolute inset-0 z-40 flex flex-col items-center justify-center gap-4 bg-black/80 text-white">
|
||
<Loader2 className="h-10 w-10 animate-spin" />
|
||
<div className="w-1/2 min-w-[200px] max-w-sm">
|
||
<div className="h-2 rounded-full bg-white/20">
|
||
<div
|
||
className="h-2 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 transition-all"
|
||
style={{ width: `${uploadProgress}%` }}
|
||
/>
|
||
</div>
|
||
{statusMessage && <p className="mt-2 text-center text-xs text-white/80">{statusMessage}</p>}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="relative z-30 flex flex-col gap-3 bg-gradient-to-t from-black via-black/80 to-transparent p-4">
|
||
{uploadError && (
|
||
<Alert variant="destructive" className="bg-red-500/10 text-white">
|
||
<AlertDescription className="flex items-center gap-2 text-xs">
|
||
<AlertTriangle className="h-4 w-4" />
|
||
{uploadError}
|
||
</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
|
||
<div className="flex flex-wrap justify-between gap-3">
|
||
<div className="flex flex-wrap gap-2">
|
||
<Button
|
||
size="icon"
|
||
variant={preferences.gridEnabled ? 'default' : 'secondary'}
|
||
className="h-10 w-10 rounded-full bg-white/15 text-white"
|
||
onClick={handleToggleGrid}
|
||
>
|
||
<Grid3X3 className="h-5 w-5" />
|
||
<span className="sr-only">Raster umschalten</span>
|
||
</Button>
|
||
<Button
|
||
size="icon"
|
||
variant={preferences.countdownEnabled ? 'default' : 'secondary'}
|
||
className="h-10 w-10 rounded-full bg-white/15 text-white"
|
||
onClick={handleToggleCountdown}
|
||
>
|
||
<span className="text-sm font-semibold">{preferences.countdownSeconds}s</span>
|
||
<span className="sr-only">Countdown umschalten</span>
|
||
</Button>
|
||
{preferences.facingMode === 'user' && (
|
||
<Button
|
||
size="icon"
|
||
variant={preferences.mirrorFrontPreview ? 'default' : 'secondary'}
|
||
className="h-10 w-10 rounded-full bg-white/15 text-white"
|
||
onClick={handleToggleMirror}
|
||
>
|
||
<span className="text-sm font-semibold">?</span>
|
||
<span className="sr-only">Spiegelung für Frontkamera umschalten</span>
|
||
</Button>
|
||
)}
|
||
<Button
|
||
size="icon"
|
||
variant={preferences.flashPreferred ? 'default' : 'secondary'}
|
||
className="h-10 w-10 rounded-full bg-white/15 text-white"
|
||
onClick={handleToggleFlashPreference}
|
||
disabled={preferences.facingMode !== 'environment'}
|
||
>
|
||
{preferences.flashPreferred ? <Zap className="h-5 w-5 text-yellow-300" /> : <ZapOff className="h-5 w-5" />}
|
||
<span className="sr-only">Blitzpräferenz umschalten</span>
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap gap-2">
|
||
<Button
|
||
variant="secondary"
|
||
size="sm"
|
||
className="rounded-full border-white/30 bg-white/10 text-white"
|
||
onClick={handleSwitchCamera}
|
||
>
|
||
<RotateCcw className="mr-1 h-4 w-4" />
|
||
Kamera wechseln
|
||
</Button>
|
||
<Button
|
||
variant="secondary"
|
||
size="sm"
|
||
className="rounded-full border-white/30 bg-white/10 text-white"
|
||
onClick={() => fileInputRef.current?.click()}
|
||
>
|
||
<ImagePlus className="mr-1 h-4 w-4" />
|
||
Foto aus Galerie
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-center">
|
||
{mode === 'review' && reviewPhoto ? (
|
||
<div className="flex w-full max-w-md flex-col gap-3 sm:flex-row">
|
||
<Button variant="secondary" className="flex-1" onClick={handleRetake}>
|
||
Noch einmal
|
||
</Button>
|
||
<Button className="flex-1" onClick={handleUsePhoto}>
|
||
Foto verwenden
|
||
</Button>
|
||
</div>
|
||
) : (
|
||
<Button
|
||
size="lg"
|
||
className="h-16 w-16 rounded-full border-4 border-white/40 bg-white/90 text-black shadow-xl"
|
||
onClick={beginCapture}
|
||
disabled={!isCameraActive || mode === 'countdown'}
|
||
>
|
||
<Camera className="h-7 w-7" />
|
||
<span className="sr-only">Foto aufnehmen</span>
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
className="hidden"
|
||
onChange={handleGalleryPick}
|
||
/>
|
||
|
||
<div ref={liveRegionRef} className="sr-only" aria-live="assertive" />
|
||
</main>
|
||
<BottomNav />
|
||
<canvas ref={canvasRef} className="hidden" />
|
||
</div>
|
||
);
|
||
}
|