From b94ebeb3017c0bd224e1175f6cac208dcc35ef8d Mon Sep 17 00:00:00 2001
From: codebude <netblognet@googlemail.com>
Date: Wed, 2 Sep 2026 06:01:07 +0200
Subject: [PATCH 1/2] Zoom and camera selector

---
 .../src/lib/components/BarcodeScanner.svelte  | 290 +++++++++++++--
 .../src/lib/components/BarcodeScanner.test.ts | 338 ++++++++++++++++++
 2 files changed, 594 insertions(+), 34 deletions(-)
 create mode 100644 frontend/src/lib/components/BarcodeScanner.test.ts

diff --git a/frontend/src/lib/components/BarcodeScanner.svelte b/frontend/src/lib/components/BarcodeScanner.svelte
index a6f495ec..54298112 100644
--- a/frontend/src/lib/components/BarcodeScanner.svelte
+++ b/frontend/src/lib/components/BarcodeScanner.svelte
@@ -1,10 +1,10 @@
-	<script lang="ts">
+<script lang="ts">
 	import Alert from '$lib/components/Alert.svelte';
 	import { Html5QrcodeSupportedFormats, BaseLoggger } from 'html5-qrcode/esm/core';
 	import { Html5QrcodeShim } from 'html5-qrcode/esm/code-decoder';
 	import { _ } from '$lib/i18n';
 	import { onDestroy } from 'svelte';
-	import { X } from '@lucide/svelte';
+	import { RefreshCw, X } from '@lucide/svelte';
 
 	let {
 		open = $bindable(false),
@@ -20,10 +20,23 @@
 	let detectionLocked = $state(false);
 	let videoEl = $state<HTMLVideoElement | null>(null);
 
+	let cameras = $state<MediaDeviceInfo[]>([]);
+	let cameraIndex = $state(0);
+	let selectedCameraId = $state<string | null>(null);
+	let zoomSupported = $state(false);
+	let zoom = $state(1);
+	let zoomMax = $state(10);
+	let zoomStep = $state(0.1);
+	let zoomPresets = $state<number[]>([]);
+	let focusContinuousSupported = $state(false);
+
 	let decoder: Html5QrcodeShim | null = null;
 	let scanTimer: ReturnType<typeof setInterval> | null = null;
 	let scanCanvas: HTMLCanvasElement | null = null;
 
+	const CAMERA_PREF_KEY = 'librislog.scanner.cameraId';
+	const ZOOM_PREF_KEY = 'librislog.scanner.zoom';
+
 	const SUPPORTED_FORMATS = [
 		Html5QrcodeSupportedFormats.EAN_13,
 		Html5QrcodeSupportedFormats.EAN_8,
@@ -32,6 +45,11 @@
 		Html5QrcodeSupportedFormats.CODE_128
 	];
 
+	interface CameraCapabilities {
+		focusMode?: string[];
+		zoom?: { min?: number; max?: number; step?: number };
+	}
+
 	function normalizeIsbn(raw: string): string | null {
 		const normalized = raw.trim().replaceAll('-', '').replaceAll(' ', '');
 		if (/^\d{13}$/.test(normalized)) return normalized;
@@ -39,13 +57,50 @@
 		return null;
 	}
 
-	async function stopScanner() {
+	function readCameraPref(): string | null {
+		try {
+			return window.localStorage.getItem(CAMERA_PREF_KEY);
+		} catch {
+			return null;
+		}
+	}
+
+	function writeCameraPref(deviceId: string) {
+		try {
+			window.localStorage.setItem(CAMERA_PREF_KEY, deviceId);
+		} catch {
+			// ignore storage errors (e.g. private browsing)
+		}
+	}
+
+	function readZoomPref(): number | null {
+		try {
+			const value = Number(window.localStorage.getItem(ZOOM_PREF_KEY));
+			return Number.isFinite(value) ? value : null;
+		} catch {
+			return null;
+		}
+	}
+
+	function writeZoomPref(zoomValue: number) {
+		try {
+			window.localStorage.setItem(ZOOM_PREF_KEY, String(zoomValue));
+		} catch {
+			// ignore storage errors (e.g. private browsing)
+		}
+	}
+
+	function clearScanning() {
 		if (scanTimer) {
 			clearInterval(scanTimer);
 			scanTimer = null;
 		}
 		decoder = null;
 		scanCanvas = null;
+	}
+
+	async function stopStream() {
+		clearScanning();
 		if (stream) {
 			for (const track of stream.getTracks()) {
 				track.stop();
@@ -54,6 +109,10 @@
 		}
 	}
 
+	async function stopScanner() {
+		await stopStream();
+	}
+
 	async function closeScanner() {
 		open = false;
 		await stopScanner();
@@ -80,16 +139,20 @@
 		}).catch(() => {});
 	}
 
-	async function startScanner() {
-		if (starting || stream) return;
-		starting = true;
-		scannerError = null;
-		detectionLocked = false;
+	async function enumerateCameras(): Promise<MediaDeviceInfo[]> {
+		const devices = await navigator.mediaDevices.enumerateDevices();
+		return devices.filter((d) => d.kind === 'videoinput');
+	}
 
-		try {
-			let mediaStream: MediaStream;
+	async function ensureCameraSelection() {
+		let devices = await enumerateCameras();
+		const hasLabels = devices.some((d) => d.kind === 'videoinput' && !!d.label);
+		let permissionStream: MediaStream | null = null;
+		if (!hasLabels) {
+			// The first getUserMedia triggers the permission prompt, which makes
+			// device labels available for a meaningful selection.
 			try {
-				mediaStream = await navigator.mediaDevices.getUserMedia({
+				permissionStream = await navigator.mediaDevices.getUserMedia({
 					audio: false,
 					video: {
 						facingMode: { ideal: 'environment' },
@@ -98,39 +161,156 @@
 					}
 				});
 			} catch {
-				if (!navigator.mediaDevices) throw new Error($_('scanner.noCamera'));
-				const devices = await navigator.mediaDevices.enumerateDevices();
-				const cameras = devices.filter((d) => d.kind === 'videoinput');
-				if (!cameras.length) throw new Error($_('scanner.noCamera'));
-				const backCamera = cameras.find((c) =>
-					c.label.toLowerCase().includes('back')
-					|| c.label.toLowerCase().includes('environment')
-				);
-				mediaStream = await navigator.mediaDevices.getUserMedia({
-					audio: false,
-					video: { deviceId: { exact: (backCamera ?? cameras[0]).deviceId } }
-				});
+				// permission denied — surface the no-camera error below
 			}
+			devices = await enumerateCameras();
+			permissionStream?.getTracks().forEach((t) => t.stop());
+		}
 
-			stream = mediaStream;
-			decoder = new Html5QrcodeShim(SUPPORTED_FORMATS, true, false, new BaseLoggger(false));
-			scanCanvas = document.createElement('canvas');
+		cameras = devices;
+		if (!cameras.length) {
+			throw new Error($_('scanner.noCamera'));
+		}
 
-			await waitForVideoEl();
+		const preferred = readCameraPref();
+		let index = cameras.findIndex((c) => c.deviceId === preferred);
+		if (index === -1) {
+			index = cameras.findIndex((c) => /back|environment|rear/i.test(c.label));
+		}
+		if (index === -1) index = 0;
+		cameraIndex = index;
+		selectedCameraId = cameras[index].deviceId;
+		writeCameraPref(selectedCameraId);
+	}
 
-			videoEl!.srcObject = mediaStream;
-			await videoEl!.play();
+	function roundToStep(value: number, step: number): number {
+		return Number((Math.round(value / step) * step).toFixed(6));
+	}
 
-			scanTimer = setInterval(scanFrame, 100);
+	function computeZoomPresets(min: number, max: number, step: number): number[] {
+		// Common Android lens stops (ultra-wide/main/tele/macro). The device's
+		// rear lenses are exposed as a single zoom range, so these presets let
+		// the user switch between them.
+		const stops = [0.5, 1, 2, 3, 5, 10, 20];
+		const presets = new Set<number>();
+		for (const stop of stops) {
+			const clamped = Math.min(max, Math.max(min, stop));
+			if (clamped >= min && clamped <= max) presets.add(roundToStep(clamped, step));
+		}
+		presets.add(min);
+		presets.add(max);
+		return [...presets].sort((a, b) => a - b);
+	}
+
+	async function applyTrackSettings(track: MediaStreamTrack | undefined) {
+		zoomSupported = false;
+		focusContinuousSupported = false;
+		zoomPresets = [];
+		if (!track || typeof track.getCapabilities !== 'function') return;
+		const caps = track.getCapabilities() as MediaTrackCapabilities & CameraCapabilities;
+
+		focusContinuousSupported =
+			Array.isArray(caps.focusMode) && caps.focusMode.includes('continuous');
+
+		const zoomCaps = caps.zoom;
+		if (zoomCaps && typeof zoomCaps.max === 'number' && zoomCaps.max > 1) {
+			const min = zoomCaps.min ?? 1;
+			const step = zoomCaps.step ?? 0.1;
+			zoomSupported = true;
+			zoomMax = zoomCaps.max;
+			zoomStep = step;
+			// Restore the last selected zoom factor if it is still within range.
+			const saved = readZoomPref();
+			zoom = roundToStep(Math.min(zoomMax, Math.max(min, saved ?? 1)), step);
+			zoomPresets = computeZoomPresets(min, zoomMax, step);
+		}
+
+		await applyTrackConstraints(track);
+	}
+
+	async function applyTrackConstraints(track: MediaStreamTrack) {
+		const constraints: Record<string, unknown> = {};
+		if (focusContinuousSupported) {
+			constraints.advanced = [{ focusMode: 'continuous' }];
+		}
+		if (zoomSupported) {
+			constraints.zoom = zoom;
+		}
+		try {
+			await track.applyConstraints(constraints as unknown as MediaTrackConstraints);
+		} catch {
+			// combination of constraints not supported — ignore
+		}
+	}
+
+	async function startStream() {
+		if (!selectedCameraId) throw new Error($_('scanner.noCamera'));
+		clearScanning();
+		const mediaStream = await navigator.mediaDevices.getUserMedia({
+			audio: false,
+			video: {
+				deviceId: { exact: selectedCameraId },
+				width: { min: 640 },
+				height: { min: 480 }
+			}
+		});
+		stream = mediaStream;
+		await applyTrackSettings(mediaStream.getVideoTracks()[0]);
+
+		decoder = new Html5QrcodeShim(SUPPORTED_FORMATS, true, false, new BaseLoggger(false));
+		scanCanvas = document.createElement('canvas');
+
+		await waitForVideoEl();
+		videoEl!.srcObject = mediaStream;
+		await videoEl!.play();
+		scanTimer = setInterval(scanFrame, 100);
+	}
+
+	async function startScanner() {
+		if (starting || stream) return;
+		if (!navigator.mediaDevices?.getUserMedia) throw new Error($_('scanner.noCamera'));
+		starting = true;
+		scannerError = null;
+		detectionLocked = false;
+		try {
+			await ensureCameraSelection();
+			await startStream();
 		} catch (err: unknown) {
-			scannerError =
-				err instanceof Error ? err.message : $_('scanner.startError');
-			await stopScanner();
+			scannerError = err instanceof Error ? err.message : $_('scanner.startError');
+			await stopStream();
 		} finally {
 			starting = false;
 		}
 	}
 
+	async function switchCamera() {
+		if (starting || cameras.length < 2 || !selectedCameraId) return;
+		starting = true;
+		scannerError = null;
+		try {
+			cameraIndex = (cameraIndex + 1) % cameras.length;
+			const next = cameras[cameraIndex];
+			selectedCameraId = next.deviceId;
+			writeCameraPref(next.deviceId);
+			// Stop the previous track before requesting the new stream — otherwise
+			// Android tends to hand back the old stream.
+			await stopStream();
+			await startStream();
+		} catch (err: unknown) {
+			scannerError = err instanceof Error ? err.message : $_('scanner.startError');
+			await stopStream();
+		} finally {
+			starting = false;
+		}
+	}
+
+	async function applyZoom() {
+		const track = stream?.getVideoTracks()[0];
+		if (!track || !zoomSupported) return;
+		writeZoomPref(zoom);
+		await applyTrackConstraints(track);
+	}
+
 	async function waitForVideoEl(): Promise<void> {
 		const timeout = Date.now() + 5000;
 		while (!videoEl && Date.now() < timeout) {
@@ -196,9 +376,51 @@
 								muted
 							></video>
 						</div>
+
+						<div class="flex items-center justify-center gap-4 flex-wrap">
+							{#if zoomSupported}
+								<div class="flex flex-col items-center gap-2">
+									<div class="flex items-center gap-1 flex-wrap justify-center" title={$_('scanner.zoom')}>
+										{#each zoomPresets as preset}
+											<button
+												class="btn btn-xs gap-0 {Math.abs(zoom - preset) < zoomStep / 2 ? 'btn-primary' : 'btn-outline'}"
+												onclick={() => {
+													zoom = preset;
+													void applyZoom();
+												}}
+												aria-label={$_('scanner.zoomLevel', { values: { zoom: preset } })}
+											>{preset}x</button>
+										{/each}
+									</div>
+									<label class="flex items-center gap-2 text-sm text-base-content/70">
+										<input
+											type="range"
+											min={zoomPresets[0]}
+											max={zoomMax}
+											step={zoomStep}
+											bind:value={zoom}
+											oninput={() => void applyZoom()}
+											class="range range-primary range-xs w-40"
+											aria-label={$_('scanner.zoom')}
+										/>
+									</label>
+								</div>
+							{/if}
+							{#if cameras.length > 1}
+								<button
+									class="btn btn-outline btn-sm gap-2"
+									onclick={() => void switchCamera()}
+									disabled={starting}
+									aria-label={$_('scanner.switchCamera')}
+								>
+									<RefreshCw class="w-4 h-4" />
+									{$_('scanner.switchCamera')}
+								</button>
+							{/if}
+						</div>
 					{/if}
 				</div>
 			</div>
 		</div>
 	</div>
-{/if}
+{/if}
\ No newline at end of file
diff --git a/frontend/src/lib/components/BarcodeScanner.test.ts b/frontend/src/lib/components/BarcodeScanner.test.ts
new file mode 100644
index 00000000..ef50641e
--- /dev/null
+++ b/frontend/src/lib/components/BarcodeScanner.test.ts
@@ -0,0 +1,338 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, waitFor, cleanup } from '@testing-library/svelte';
+import BarcodeScanner from './BarcodeScanner.svelte';
+
+// Mock html5-qrcode subpath imports
+vi.mock('html5-qrcode/esm/core', () => {
+	const BaseLoggger = class {
+		log() {} warn() {} logError() {} logErrors() {}
+	};
+	return {
+		Html5QrcodeSupportedFormats: {
+			EAN_13: 9, EAN_8: 10, UPC_A: 14, UPC_E: 15, CODE_128: 5
+		},
+		BaseLoggger
+	};
+});
+
+vi.mock('html5-qrcode/esm/code-decoder', () => {
+	const Html5QrcodeShim = class {
+		decodeAsync: () => Promise<{ text: string }>;
+		constructor() {
+			this.decodeAsync = function () { return Promise.resolve({ text: '' }); };
+		}
+	};
+	return { Html5QrcodeShim };
+});
+
+const CAMERA_PREF_KEY = 'librislog.scanner.cameraId';
+const ZOOM_PREF_KEY = 'librislog.scanner.zoom';
+
+interface FakeTrack {
+	deviceId: string;
+	stop: ReturnType<typeof vi.fn>;
+	getCapabilities: () => Record<string, unknown>;
+	applyConstraints: ReturnType<typeof vi.fn>;
+}
+
+function makeTrack(deviceId: string, caps: Record<string, unknown> = {}): FakeTrack {
+	return {
+		deviceId,
+		stop: vi.fn(),
+		getCapabilities: () => caps,
+		applyConstraints: vi.fn().mockResolvedValue(undefined)
+	};
+}
+
+function makeStream(track: FakeTrack) {
+	return {
+		getTracks: () => [track],
+		getVideoTracks: () => [track]
+	};
+}
+
+interface Camera {
+	deviceId: string;
+	label: string;
+}
+
+function mockMediaDevices(
+	cameras: Camera[],
+	options: { labelsInitiallyHidden?: boolean; caps?: Record<string, unknown> } = {}
+) {
+	const enumerateDevices = vi.fn();
+	const streams: ReturnType<typeof makeStream>[] = [];
+
+	const labelled = cameras.map((c, i) => ({
+		kind: 'videoinput',
+		deviceId: c.deviceId,
+		label: c.label,
+		groupId: `group-${i}`
+	}));
+	const unlabelled = cameras.map((c, i) => ({
+		kind: 'videoinput',
+		deviceId: c.deviceId,
+		label: '',
+		groupId: `group-${i}`
+	}));
+
+	if (options.labelsInitiallyHidden) {
+		enumerateDevices.mockResolvedValueOnce(unlabelled).mockResolvedValue(labelled);
+	} else {
+		enumerateDevices.mockResolvedValue(labelled);
+	}
+
+	const getUserMedia = vi.fn(async (constraints: { video?: { deviceId?: { exact?: string } } }) => {
+		const id = constraints.video?.deviceId?.exact ?? cameras[0].deviceId;
+		const track = makeTrack(id, options.caps ?? {});
+		const stream = makeStream(track);
+		streams.push(stream);
+		return stream;
+	});
+
+	Object.defineProperty(navigator, 'mediaDevices', {
+		configurable: true,
+		value: { enumerateDevices, getUserMedia }
+	});
+
+	return { enumerateDevices, getUserMedia, streams };
+}
+
+function installMediaElementMocks() {
+	if (typeof HTMLMediaElement.prototype.play === 'function') {
+		vi.spyOn(HTMLMediaElement.prototype, 'play').mockResolvedValue(undefined);
+	} else {
+		Object.defineProperty(HTMLMediaElement.prototype, 'play', {
+			configurable: true,
+			value: () => Promise.resolve()
+		});
+	}
+	try {
+		Object.defineProperty(HTMLMediaElement.prototype, 'srcObject', {
+			configurable: true,
+			get(this: HTMLMediaElement) {
+				return (this as HTMLMediaElement & { _srcObject?: unknown })._srcObject ?? null;
+			},
+			set(this: HTMLMediaElement, value: unknown) {
+				(this as HTMLMediaElement & { _srcObject?: unknown })._srcObject = value;
+			}
+		});
+	} catch {
+		// already defined non-configurably by the environment — fine for tests
+	}
+}
+
+describe('BarcodeScanner', () => {
+	const CAMERAS: Camera[] = [
+		{ deviceId: 'cam-front', label: 'Front Camera' },
+		{ deviceId: 'cam-rear', label: 'Rear Camera' },
+		{ deviceId: 'cam-macro', label: 'Macro Camera' }
+	];
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+		window.localStorage.clear();
+		installMediaElementMocks();
+	});
+
+	afterEach(() => {
+		cleanup();
+		vi.restoreAllMocks();
+	});
+
+	it('requests the persisted camera with an exact deviceId', async () => {
+		window.localStorage.setItem(CAMERA_PREF_KEY, 'cam-rear');
+		const { getUserMedia } = mockMediaDevices(CAMERAS);
+
+		render(BarcodeScanner, { props: { open: true } });
+
+		await waitFor(() => {
+			expect(getUserMedia).toHaveBeenCalledWith(
+				expect.objectContaining({
+					video: expect.objectContaining({ deviceId: { exact: 'cam-rear' } })
+				})
+			);
+		});
+	});
+
+	it('falls back to a rear/environment camera and persists the choice', async () => {
+		const { getUserMedia } = mockMediaDevices(CAMERAS);
+
+		render(BarcodeScanner, { props: { open: true } });
+
+		await waitFor(() => {
+			expect(getUserMedia).toHaveBeenCalledWith(
+				expect.objectContaining({
+					video: expect.objectContaining({ deviceId: { exact: 'cam-rear' } })
+				})
+			);
+		});
+		expect(window.localStorage.getItem(CAMERA_PREF_KEY)).toBe('cam-rear');
+	});
+
+	it('cycles to the next camera and stops the previous track when switched', async () => {
+		const { getUserMedia, streams } = mockMediaDevices(CAMERAS);
+
+		render(BarcodeScanner, { props: { open: true } });
+
+		await waitFor(() => {
+			expect(getUserMedia).toHaveBeenCalledTimes(1);
+		});
+		expect(getUserMedia).toHaveBeenCalledWith(
+			expect.objectContaining({
+				video: expect.objectContaining({ deviceId: { exact: 'cam-rear' } })
+			})
+		);
+
+		const switchBtn = await screen.findByRole('button', { name: /switch camera/i });
+		await fireEvent.click(switchBtn);
+
+		await waitFor(() => {
+			expect(getUserMedia).toHaveBeenCalledTimes(2);
+		});
+		expect(getUserMedia).toHaveBeenLastCalledWith(
+			expect.objectContaining({
+				video: expect.objectContaining({ deviceId: { exact: 'cam-macro' } })
+			})
+		);
+		// The previous stream's track must be stopped before requesting the new one.
+		expect(streams[0].getTracks()[0].stop).toHaveBeenCalled();
+		// The chosen camera is remembered for the next session.
+		expect(window.localStorage.getItem(CAMERA_PREF_KEY)).toBe('cam-macro');
+	});
+
+	it('requests permission first when device labels are hidden', async () => {
+		const { enumerateDevices, getUserMedia } = mockMediaDevices(CAMERAS, {
+			labelsInitiallyHidden: true
+		});
+
+		render(BarcodeScanner, { props: { open: true } });
+
+		await waitFor(() => {
+			expect(enumerateDevices).toHaveBeenCalledTimes(2);
+		});
+		// First getUserMedia only triggers the permission prompt (no deviceId).
+		expect(getUserMedia).toHaveBeenNthCalledWith(
+			1,
+			expect.objectContaining({
+				video: expect.objectContaining({ facingMode: { ideal: 'environment' } })
+			})
+		);
+		// The actual stream is then requested for the selected camera.
+		expect(getUserMedia).toHaveBeenLastCalledWith(
+			expect.objectContaining({
+				video: expect.objectContaining({ deviceId: { exact: 'cam-rear' } })
+			})
+		);
+	});
+
+	it('exposes a zoom slider and applies zoom constraints when supported', async () => {
+		const { getUserMedia } = mockMediaDevices(CAMERAS, {
+			caps: { focusMode: ['continuous', 'manual'], zoom: { min: 1, max: 8, step: 1 } }
+		});
+
+		render(BarcodeScanner, { props: { open: true } });
+
+		const slider = await screen.findByRole('slider', { name: /zoom/i });
+		expect(slider).toBeInTheDocument();
+
+		const firstStream = (await getUserMedia.mock.results[0].value) as ReturnType<typeof makeStream>;
+		const track = firstStream.getVideoTracks()[0] as unknown as FakeTrack;
+		// continuous focus mode is requested when the track supports it
+		expect(track.applyConstraints).toHaveBeenCalledWith(
+			expect.objectContaining({ advanced: expect.arrayContaining([{ focusMode: 'continuous' }]) })
+		);
+
+		await fireEvent.input(slider, { target: { value: '4' } });
+		await waitFor(() => {
+			expect(track.applyConstraints).toHaveBeenCalledWith(expect.objectContaining({ zoom: 4 }));
+		});
+	});
+
+	it('offers rear-lens presets derived from the zoom range', async () => {
+		const { getUserMedia } = mockMediaDevices(CAMERAS, {
+			caps: { zoom: { min: 1, max: 8, step: 1 } }
+		});
+
+		render(BarcodeScanner, { props: { open: true } });
+
+		// Common lens stops within [1, 8]: 1x, 2x, 3x, 5x, plus the max 8x.
+		const one = await screen.findByRole('button', { name: /zoom 1x/i });
+		expect(one).toBeInTheDocument();
+		for (const level of ['2x', '3x', '5x', '8x']) {
+			expect(screen.getByRole('button', { name: `Zoom ${level}` })).toBeInTheDocument();
+		}
+		expect(screen.queryByRole('button', { name: /zoom 0.5x/i })).not.toBeInTheDocument();
+
+		const two = screen.getByRole('button', { name: 'Zoom 2x' });
+		await fireEvent.click(two);
+
+		const firstStream = (await getUserMedia.mock.results[0].value) as ReturnType<typeof makeStream>;
+		const track = firstStream.getVideoTracks()[0] as unknown as FakeTrack;
+		await waitFor(() => {
+			expect(track.applyConstraints).toHaveBeenCalledWith(expect.objectContaining({ zoom: 2 }));
+		});
+		// The selected lens is remembered for the next session.
+		expect(window.localStorage.getItem(ZOOM_PREF_KEY)).toBe('2');
+	});
+
+	it('restores the last selected zoom factor and highlights its lens button', async () => {
+		window.localStorage.setItem(ZOOM_PREF_KEY, '5');
+		const { getUserMedia } = mockMediaDevices(CAMERAS, {
+			caps: { zoom: { min: 1, max: 8, step: 1 } }
+		});
+
+		render(BarcodeScanner, { props: { open: true } });
+
+		const five = await screen.findByRole('button', { name: 'Zoom 5x' });
+		expect(five).toBeInTheDocument();
+		// The persisted zoom is applied to the track…
+		const firstStream = (await getUserMedia.mock.results[0].value) as ReturnType<typeof makeStream>;
+		const track = firstStream.getVideoTracks()[0] as unknown as FakeTrack;
+		await waitFor(() => {
+			expect(track.applyConstraints).toHaveBeenCalledWith(expect.objectContaining({ zoom: 5 }));
+		});
+		// …and the matching lens button is active.
+		await waitFor(() => {
+			expect(five.classList.contains('btn-primary')).toBe(true);
+		});
+	});
+
+	it('clamps a persisted zoom that is out of range', async () => {
+		window.localStorage.setItem(ZOOM_PREF_KEY, '50');
+		const { getUserMedia } = mockMediaDevices(CAMERAS, {
+			caps: { zoom: { min: 1, max: 8, step: 1 } }
+		});
+
+		render(BarcodeScanner, { props: { open: true } });
+
+		await screen.findByRole('button', { name: 'Zoom 8x' });
+		const firstStream = (await getUserMedia.mock.results[0].value) as ReturnType<typeof makeStream>;
+		const track = firstStream.getVideoTracks()[0] as unknown as FakeTrack;
+		await waitFor(() => {
+			expect(track.applyConstraints).toHaveBeenCalledWith(expect.objectContaining({ zoom: 8 }));
+		});
+	});
+
+	it('does not show zoom controls when the track has no zoom capability', async () => {
+		const { getUserMedia } = mockMediaDevices(CAMERAS, { caps: {} });
+
+		render(BarcodeScanner, { props: { open: true } });
+
+		await waitFor(() => {
+			expect(getUserMedia).toHaveBeenCalledTimes(1);
+		});
+		expect(screen.queryByRole('slider', { name: /zoom/i })).not.toBeInTheDocument();
+	});
+
+	it('does not show a switch button with a single camera', async () => {
+		mockMediaDevices([CAMERAS[0]]);
+
+		render(BarcodeScanner, { props: { open: true } });
+
+		await waitFor(() => {
+			expect(window.localStorage.getItem(CAMERA_PREF_KEY)).toBe('cam-front');
+		});
+		expect(screen.queryByRole('button', { name: /switch camera/i })).not.toBeInTheDocument();
+	});
+});
\ No newline at end of file

From 7fbc32c836693fd21f3f177839eb6375fec27aa2 Mon Sep 17 00:00:00 2001
From: codebude <netblognet@googlemail.com>
Date: Wed, 2 Sep 2026 06:01:21 +0200
Subject: [PATCH 2/2] Translations for zoom and camera

---
 frontend/src/lib/i18n/locales/de.json | 3 +++
 frontend/src/lib/i18n/locales/en.json | 3 +++
 frontend/src/lib/i18n/locales/es.json | 3 +++
 frontend/src/lib/i18n/locales/fr.json | 3 +++
 frontend/src/lib/i18n/locales/zh.json | 3 +++
 5 files changed, 15 insertions(+)

diff --git a/frontend/src/lib/i18n/locales/de.json b/frontend/src/lib/i18n/locales/de.json
index f55bc157..c092f1fe 100644
--- a/frontend/src/lib/i18n/locales/de.json
+++ b/frontend/src/lib/i18n/locales/de.json
@@ -237,6 +237,9 @@
     "help": "Richte die Kamera auf den Barcode eines Buchs. Nach einem gültigen ISBN-Treffer startet die Suche automatisch.",
     "startError": "Barcode-Scanner konnte nicht gestartet werden. Prüfe die Kameraberechtigungen.",
     "noCamera": "Kein Kameragerät gefunden.",
+    "switchCamera": "Kamera wechseln",
+    "zoom": "Zoom",
+    "zoomLevel": "Zoom {zoom}x",
     "close": "Scanner schließen"
   },
   "coverPicker": {
diff --git a/frontend/src/lib/i18n/locales/en.json b/frontend/src/lib/i18n/locales/en.json
index eabd2185..fdcf470d 100644
--- a/frontend/src/lib/i18n/locales/en.json
+++ b/frontend/src/lib/i18n/locales/en.json
@@ -237,6 +237,9 @@
     "help": "Point your camera at a book barcode. The search starts automatically after a valid ISBN is found.",
     "startError": "Unable to start barcode scanner. Check camera permissions.",
     "noCamera": "No camera device found.",
+    "switchCamera": "Switch camera",
+    "zoom": "Zoom",
+    "zoomLevel": "Zoom {zoom}x",
     "close": "Close scanner"
   },
   "coverPicker": {
diff --git a/frontend/src/lib/i18n/locales/es.json b/frontend/src/lib/i18n/locales/es.json
index 23a14f13..90396b04 100644
--- a/frontend/src/lib/i18n/locales/es.json
+++ b/frontend/src/lib/i18n/locales/es.json
@@ -237,6 +237,9 @@
     "help": "Apunta la cámara al código de barras de un libro. La búsqueda comienza automáticamente tras encontrar un ISBN válido.",
     "startError": "No se pudo iniciar el escáner. Comprueba los permisos de la cámara.",
     "noCamera": "No se encontró ningún dispositivo de cámara.",
+    "switchCamera": "Cambiar cámara",
+    "zoom": "Zoom",
+    "zoomLevel": "Zoom {zoom}x",
     "close": "Cerrar escáner"
   },
   "coverPicker": {
diff --git a/frontend/src/lib/i18n/locales/fr.json b/frontend/src/lib/i18n/locales/fr.json
index 9d27572c..8f5fb132 100644
--- a/frontend/src/lib/i18n/locales/fr.json
+++ b/frontend/src/lib/i18n/locales/fr.json
@@ -237,6 +237,9 @@
     "help": "Dirige la caméra vers le code-barres d'un livre. La recherche démarre automatiquement après avoir trouvé un ISBN valide.",
     "startError": "Impossible de démarrer le scanner. Vérifie les autorisations de la caméra.",
     "noCamera": "Aucun appareil photo trouvé.",
+    "switchCamera": "Changer de caméra",
+    "zoom": "Zoom",
+    "zoomLevel": "Zoom {zoom}x",
     "close": "Fermer le scanner"
   },
   "coverPicker": {
diff --git a/frontend/src/lib/i18n/locales/zh.json b/frontend/src/lib/i18n/locales/zh.json
index d9f7ee4f..e2b49813 100644
--- a/frontend/src/lib/i18n/locales/zh.json
+++ b/frontend/src/lib/i18n/locales/zh.json
@@ -237,6 +237,9 @@
     "help": "将摄像头对准图书条码。识别到有效 ISBN 后自动开始搜索。",
     "startError": "无法启动条码扫描器。请检查摄像头权限。",
     "noCamera": "未找到摄像头设备。",
+    "switchCamera": "切换摄像头",
+    "zoom": "缩放",
+    "zoomLevel": "缩放 {zoom}x",
     "close": "关闭扫描器"
   },
   "coverPicker": {