EventSnap/frontend/src/lib/components/CameraCapture.svelte

<script lang="ts">
	import { onMount, onDestroy } from 'svelte';
	import { vibrate } from '$lib/haptics';

	interface Props {
		oncapture: (blob: Blob, type: 'photo' | 'video') => void;
		onclose: () => void;
	}

	let { oncapture, onclose }: Props = $props();

	let videoEl: HTMLVideoElement = $state()!;
	let canvasEl: HTMLCanvasElement = $state()!;
	let stream: MediaStream | null = $state(null);
	let facingMode = $state<'environment' | 'user'>('environment');
	let mode = $state<'photo' | 'video'>('photo');
	let recording = $state(false);
	let recordingTime = $state(0);
	let error = $state<string | null>(null);
	let mediaRecorder: MediaRecorder | null = null;
	let recordedChunks: Blob[] = [];
	let recordingInterval: ReturnType<typeof setInterval> | null = null;

	function handleShutter() {
		vibrate(15);
		if (mode === 'photo') {
			capturePhoto();
		} else if (recording) {
			stopRecording();
		} else {
			startRecording();
		}
	}

	onMount(() => {
		startCamera();
	});

	onDestroy(() => {
		stopCamera();
		if (recordingInterval) clearInterval(recordingInterval);
	});

	async function startCamera() {
		error = null;
		stopCamera();

		try {
			stream = await navigator.mediaDevices.getUserMedia({
				video: { facingMode, width: { ideal: 1920 }, height: { ideal: 1080 } },
				// Only request the mic for video — a photo-only session shouldn't trigger
				// a mic permission prompt (which also blocks capture on mic-less devices).
				audio: mode === 'video'
			});
			if (videoEl) {
				videoEl.srcObject = stream;
			}
		} catch (err) {
			if (err instanceof DOMException && err.name === 'NotAllowedError') {
				error =
					'Kamerazugriff wurde verweigert. Bitte erlaube den Zugriff in den Browsereinstellungen.';
			} else if (err instanceof DOMException && err.name === 'NotFoundError') {
				error = 'Keine Kamera gefunden.';
			} else {
				error = 'Kamera konnte nicht gestartet werden.';
			}
		}
	}

	function stopCamera() {
		if (stream) {
			for (const track of stream.getTracks()) {
				track.stop();
			}
			stream = null;
		}
	}

	async function toggleCamera() {
		facingMode = facingMode === 'environment' ? 'user' : 'environment';
		await startCamera();
	}

	// Switching between photo and video changes whether we need the mic, so
	// re-acquire the stream (lazily adding the mic for video, dropping it for photo).
	async function setMode(next: 'photo' | 'video') {
		if (mode === next) return;
		mode = next;
		await startCamera();
	}

	function capturePhoto() {
		if (!videoEl || !canvasEl) return;
		const ctx = canvasEl.getContext('2d');
		if (!ctx) return;

		canvasEl.width = videoEl.videoWidth;
		canvasEl.height = videoEl.videoHeight;
		ctx.drawImage(videoEl, 0, 0);

		canvasEl.toBlob(
			(blob) => {
				if (blob) oncapture(blob, 'photo');
			},
			'image/jpeg',
			0.92
		);
	}

	function startRecording() {
		if (!stream) return;

		recordedChunks = [];
		recordingTime = 0;

		const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
			? 'video/webm;codecs=vp9'
			: MediaRecorder.isTypeSupported('video/webm')
				? 'video/webm'
				: 'video/mp4';

		mediaRecorder = new MediaRecorder(stream, { mimeType });

		mediaRecorder.ondataavailable = (e) => {
			if (e.data.size > 0) recordedChunks.push(e.data);
		};

		mediaRecorder.onstop = () => {
			const blob = new Blob(recordedChunks, { type: mediaRecorder?.mimeType ?? mimeType });
			oncapture(blob, 'video');
			recordedChunks = [];
		};

		mediaRecorder.start(1000);
		recording = true;

		recordingInterval = setInterval(() => {
			recordingTime += 1;
		}, 1000);
	}

	function stopRecording() {
		if (mediaRecorder && mediaRecorder.state !== 'inactive') {
			mediaRecorder.stop();
		}
		recording = false;
		if (recordingInterval) {
			clearInterval(recordingInterval);
			recordingInterval = null;
		}
	}

	function formatRecordingTime(seconds: number): string {
		const m = Math.floor(seconds / 60);
		const s = seconds % 60;
		return `${m}:${String(s).padStart(2, '0')}`;
	}
</script>

<div class="fixed inset-0 z-50 flex flex-col bg-black">
	<!-- Camera preview -->
	<div class="relative flex-1 overflow-hidden">
		{#if error}
			<div class="flex h-full items-center justify-center p-8">
				<div class="rounded-lg bg-gray-900 p-6 text-center">
					<svg
						class="mx-auto mb-3 h-12 w-12 text-red-400"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="1.5"
							d="M15 10l-4 4m0-4l4 4m6-4a9 9 0 11-18 0 9 9 0 0118 0z"
						/>
					</svg>
					<p class="text-sm text-white">{error}</p>
					<div class="mt-4 flex justify-center gap-2">
						<button
							onclick={startCamera}
							class="rounded-lg bg-white px-4 py-2 text-sm font-medium text-gray-900"
						>
							Erneut versuchen
						</button>
						<button onclick={onclose} class="rounded-lg bg-white/20 px-4 py-2 text-sm text-white">
							Schließen
						</button>
					</div>
				</div>
			</div>
		{:else}
			<!-- svelte-ignore a11y_media_has_caption -->
			<video
				bind:this={videoEl}
				autoplay
				playsinline
				muted
				class="h-full w-full object-cover {facingMode === 'user' ? 'scale-x-[-1]' : ''}"
			></video>

			{#if recording}
				<div
					class="absolute left-4 top-4 flex items-center gap-2 rounded-full bg-red-600 px-3 py-1"
				>
					<div class="h-2 w-2 animate-pulse rounded-full bg-white"></div>
					<span class="text-sm font-medium text-white">{formatRecordingTime(recordingTime)}</span>
				</div>
			{/if}
		{/if}
	</div>

	<!-- Controls -->
	{#if !error}
		<!-- Mode toggle — segmented control above the shutter. Hidden while recording. -->
		{#if !recording}
			<div class="flex justify-center bg-black/80 pt-3 pb-1">
				<div
					class="inline-flex rounded-full bg-white/10 p-0.5"
					role="tablist"
					aria-label="Aufnahmemodus"
					data-testid="camera-mode"
				>
					<button
						type="button"
						role="tab"
						aria-selected={mode === 'photo'}
						onclick={() => setMode('photo')}
						data-testid="camera-mode-photo"
						class="rounded-full px-4 py-1 text-sm font-medium transition {mode === 'photo'
							? 'bg-white text-gray-900'
							: 'text-white/70 hover:text-white active:text-white'}"
					>
						Foto
					</button>
					<button
						type="button"
						role="tab"
						aria-selected={mode === 'video'}
						onclick={() => setMode('video')}
						data-testid="camera-mode-video"
						class="rounded-full px-4 py-1 text-sm font-medium transition {mode === 'video'
							? 'bg-white text-gray-900'
							: 'text-white/70 hover:text-white active:text-white'}"
					>
						Video
					</button>
				</div>
			</div>
		{/if}

		<div
			class="flex items-center justify-center gap-8 bg-black/80 px-4 pt-4 pb-6"
			style="padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem)"
		>
			<!-- Close -->
			<button
				onclick={onclose}
				class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white transition active:bg-white/30"
				aria-label="Schließen"
			>
				<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M6 18L18 6M6 6l12 12"
					/>
				</svg>
			</button>

			<!-- Shutter — single button, behaviour depends on mode + recording state. -->
			<button
				onclick={handleShutter}
				data-testid="camera-shutter"
				class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white transition active:scale-95 {recording
					? 'bg-red-600'
					: 'bg-white/20'}"
				aria-label={mode === 'photo'
					? 'Foto aufnehmen'
					: recording
						? 'Aufnahme stoppen'
						: 'Video aufnehmen'}
			>
				{#if mode === 'photo'}
					<div class="h-12 w-12 rounded-full bg-white"></div>
				{:else if recording}
					<div class="h-6 w-6 rounded-sm bg-white"></div>
				{:else}
					<div class="h-10 w-10 rounded-full bg-red-500"></div>
				{/if}
			</button>

			<!-- Toggle camera (hidden while recording to discourage interruption). -->
			{#if recording}
				<div class="h-12 w-12"></div>
			{:else}
				<button
					onclick={toggleCamera}
					class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white transition active:bg-white/30"
					aria-label="Kamera wechseln"
				>
					<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
						/>
					</svg>
				</button>
			{/if}
		</div>
	{/if}
</div>

<!-- Hidden canvas for photo capture -->
<canvas bind:this={canvasEl} class="hidden"></canvas>