From ac1e29586f79127e1fe31db61f6371e14d33e04d Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Mon, 14 Jul 2025 13:59:22 +0100
Subject: [PATCH] fix: improve QR scanning a bit

---
 src/components/submit-form/qr-scanner.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/submit-form/qr-scanner.tsx b/src/components/submit-form/qr-scanner.tsx
index 4f1186c..9dafad1 100644
--- a/src/components/submit-form/qr-scanner.tsx
+++ b/src/components/submit-form/qr-scanner.tsx
@@ -28,7 +28,7 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
 
 	const cameraItems = devices.map((device) => ({
 		value: device.deviceId,
-		label: device.label || `Camera ${device.deviceId.slice(-5)}`,
+		label: device.label || `Camera ${devices.indexOf(device) + 1}`,
 	}));
 
 	const {
@@ -73,6 +73,7 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
 		// Cancel animation frame to stop scanning
 		if (requestRef.current) {
 			cancelAnimationFrame(requestRef.current);
+			requestRef.current = null;
 		}
 
 		setQrBytesRaw(code.binaryData!);
@@ -115,8 +116,15 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
 	}, [isOpen, selectedDeviceId]);
 
 	useEffect(() => {
-		if (!isOpen && !permissionGranted) return;
+		if (!isOpen || !permissionGranted) return;
+
 		requestRef.current = requestAnimationFrame(scanQRCode);
+
+		return () => {
+			if (requestRef.current) {
+				cancelAnimationFrame(requestRef.current);
+			}
+		};
 	}, [isOpen, permissionGranted, scanQRCode]);
 
 	if (!isOpen) return null;
@@ -191,12 +199,18 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
 					) : (
 						<>
 							<Webcam
+								key={selectedDeviceId}
 								ref={webcamRef}
 								audio={false}
 								videoConstraints={{
 									deviceId: selectedDeviceId ? { exact: selectedDeviceId } : undefined,
 									facingMode: { ideal: "environment" },
 								}}
+								onUserMedia={async () => {
+									const newDevices = await navigator.mediaDevices.enumerateDevices();
+									const videoDevices = newDevices.filter((d) => d.kind === "videoinput");
+									setDevices(videoDevices);
+								}}
 								className="size-full object-cover rounded-2xl border-2 border-amber-500"
 							/>
 							<QrFinder />