fix(frontend): QRコードリーダーがページを離れても停止しない問題を修正 (#17761)

* fix(frontend): QRコードリーダーがページを離れても停止しない問題を修正

* Update Changelog

* fix

* fix

CHANGELOG.md

@@ -39,6 +39,7 @@
 - Fix: ローカルユーザーへのホスト付きメンションが本文に含まれる指名ノートの作成時、投稿フォームにて、当該ユーザーが宛先に含まれていても正しく認識されない問題を修正
 - Fix: チャートの描画終了後にリソースが解放されない問題を修正
 - Fix: ドライブの「このファイルからノートを作成」やギャラリーの「ノートで共有」、誕生日ウィジェットからのノート作成において、通常投稿の下書きが表示される問題を修正
+- Fix: QRコードリーダーがページを離れても停止しない問題を修正
 
 ### Server
 - Feat: OpenTelemetryサポート

packages/frontend/src/pages/qr.read.vue

@@ -247,24 +247,48 @@ async function toggleFlash(to = false) {
 	}
 }
 
-async function startQr() {
+// hasFlashなどの後続の処理がカメラを再起動する可能性があるため、
+// start() が完了するまでの間に停止された場合は結果を破棄する必要がある
+let initializeId = 0;
+
+function startQr() {
 	if (!scannerInstance.value) return;
-	await scannerInstance.value.start();
-	qrStarted.value = true;
+	const currentInitializeId = ++initializeId;
+	qrStarted.value = false;
+	scannerInstance.value.start()
+		.then(async () => {
+			if (currentInitializeId !== initializeId) return;
+			qrStarted.value = true;
+			if (!scannerInstance.value) return;
+			const hasFlash = await scannerInstance.value.hasFlash();
+			if (currentInitializeId !== initializeId) return;
+			flashCanToggle.value = hasFlash;
+			flash.value = scannerInstance.value.isFlashOn();
+		})
+		.catch(err => {
+			if (currentInitializeId !== initializeId) return;
+			qrStarted.value = false;
+			os.alert({
+				type: 'error',
+				text: err.toString(),
+			});
+			console.error(err);
+		});
 }
 
 function stopQr() {
+	initializeId++;
 	if (!scannerInstance.value) return;
 	scannerInstance.value.stop();
 	qrStarted.value = false;
 }
 
 onActivated(() => {
-	startQr;
+	startQr();
 });
 
 onDeactivated(() => {
-	stopQr;
+	stopQr();
 });
 
 const alertLock = ref(false);
@@ -311,21 +335,7 @@ onMounted(() => {
 		},
 	);
 
-	scannerInstance.value.start()
-		.then(async () => {
-			qrStarted.value = true;
-			if (!scannerInstance.value) return;
-			flashCanToggle.value = await scannerInstance.value.hasFlash();
-			flash.value = scannerInstance.value.isFlashOn();
-		})
-		.catch(err => {
-			qrStarted.value = false;
-			os.alert({
-				type: 'error',
-				text: err.toString(),
-			});
-			console.error(err);
-		});
+	startQr();
 });
 
 onUnmounted(() => {
@@ -334,6 +344,7 @@ onUnmounted(() => {
 		timer.value = null;
 	}
 
+	initializeId++;
 	scannerInstance.value?.destroy();
 });
 </script>