From d947e4d1c3a6d25be58eb7b35939f237a4ac9c34 Mon Sep 17 00:00:00 2001
From: cursor <cursor@users.noreply.gitea.schwenk.online>
Date: Sun, 5 Jul 2026 15:21:42 +0000
Subject: [PATCH] fix(scoring): separate microphone permission prompt from
 speech start

Android Chrome loses the user gesture when getUserMedia is awaited before
recognition.start(). Add an explicit permission banner/button and only
start speech recognition synchronously after mic access is granted.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 public/scoring/index.html | 149 ++++++++++++++++++++++++++++++++++----
 1 file changed, 135 insertions(+), 14 deletions(-)

diff --git a/public/scoring/index.html b/public/scoring/index.html
index 6959004..c6cd9d8 100644
--- a/public/scoring/index.html
+++ b/public/scoring/index.html
@@ -191,6 +191,46 @@
       display: inline-flex;
     }
 
+    #mic-permission {
+      display: none;
+      align-items: center;
+      justify-content: center;
+      gap: 0.75rem;
+      flex-wrap: wrap;
+      margin: 0 1rem 0.75rem;
+      padding: 0.85rem 1rem;
+      border-radius: 0.75rem;
+      border: 1px solid #7f1d1d;
+      background: rgba(127, 29, 29, 0.15);
+      max-width: 36rem;
+      width: calc(100% - 2rem);
+      margin-left: auto;
+      margin-right: auto;
+      text-align: center;
+      font-size: 0.9rem;
+      line-height: 1.45;
+    }
+
+    #mic-permission.visible {
+      display: flex;
+    }
+
+    #mic-permission p {
+      margin: 0;
+      color: var(--text);
+    }
+
+    #mic-permission.denied {
+      border-color: var(--danger);
+    }
+
+    #mic-permission-btn {
+      border-color: var(--listening);
+      color: var(--listening);
+      font-weight: 700;
+      padding: 0.65rem 1.1rem;
+    }
+
     .status-bar {
       min-height: 2.75rem;
       padding: 0.5rem 1.25rem 1rem;
@@ -262,8 +302,13 @@
     </article>
   </div>
 
+  <div class="mic-permission" id="mic-permission" role="region" aria-label="Mikrofon-Berechtigung">
+    <p id="mic-permission-text">Für Spracheingabe braucht die App Mikrofon-Zugriff.</p>
+    <button type="button" id="mic-permission-btn">Mikrofon erlauben</button>
+  </div>
+
   <div class="toolbar">
-    <button type="button" id="mic-btn" aria-pressed="false">
+    <button type="button" id="mic-btn" aria-pressed="false" disabled>
       <span aria-hidden="true">🎤</span>
       <span id="mic-label">Spracheingabe</span>
     </button>
@@ -276,7 +321,7 @@
   <p class="hint">
     Sprachbefehle (de-DE): <code>eins plus drei</code>, <code>zwei minus eins</code>,
     <code>spieler eins plus fünf</code>, <code>zurücksetzen</code>.
-    Mikrofon-Zugriff nötig; Chrome/Edge/Safari (nicht Firefox). Als App installierbar unter Android/Chrome.
+    Zuerst <strong>Mikrofon erlauben</strong>, dann Spracheingabe starten. Chrome/Edge/Safari (nicht Firefox).
   </p>
 
   <footer>
@@ -289,8 +334,13 @@
     const statusEl = document.getElementById('status');
     const micBtn = document.getElementById('mic-btn');
     const micLabel = document.getElementById('mic-label');
+    const micPermissionEl = document.getElementById('mic-permission');
+    const micPermissionText = document.getElementById('mic-permission-text');
+    const micPermissionBtn = document.getElementById('mic-permission-btn');
     const installBtn = document.getElementById('install-btn');
     let installPrompt = null;
+    let micPermissionGranted = false;
+    let micPermissionStatus = 'prompt';
 
     function getName(player) {
       return document.querySelector(`#player-${player} .player-name`).value.trim()
@@ -409,13 +459,68 @@
       adjust(cmd.player, cmd.delta);
     }
 
-    async function ensureMicPermission() {
-      if (!navigator.mediaDevices?.getUserMedia) return true;
+    function updateMicPermissionUi() {
+      const canUseMic = micPermissionGranted || micPermissionStatus === 'granted';
+      micBtn.disabled = !canUseMic || micBtn.classList.contains('unsupported');
+
+      if (canUseMic) {
+        micPermissionEl.classList.remove('visible', 'denied');
+        return;
+      }
+
+      micPermissionEl.classList.add('visible');
+      micPermissionEl.classList.toggle('denied', micPermissionStatus === 'denied');
+
+      if (micPermissionStatus === 'denied') {
+        micPermissionText.textContent =
+          'Mikrofon blockiert. In Chrome: Schloss-Symbol → Website-Einstellungen → Mikrofon erlauben, dann Seite neu laden.';
+        micPermissionBtn.textContent = 'Erneut versuchen';
+      } else {
+        micPermissionText.textContent = 'Für Spracheingabe braucht die App Mikrofon-Zugriff.';
+        micPermissionBtn.textContent = 'Mikrofon erlauben';
+      }
+    }
+
+    async function queryMicPermission() {
+      if (!navigator.permissions?.query) return;
+      try {
+        const status = await navigator.permissions.query({ name: 'microphone' });
+        micPermissionStatus = status.state;
+        micPermissionGranted = status.state === 'granted';
+        updateMicPermissionUi();
+        status.addEventListener('change', () => {
+          micPermissionStatus = status.state;
+          micPermissionGranted = status.state === 'granted';
+          updateMicPermissionUi();
+        });
+      } catch {
+        /* Permissions API for microphone not supported */
+      }
+    }
+
+    async function requestMicPermission() {
+      if (!navigator.mediaDevices?.getUserMedia) {
+        setStatus('Mikrofon-API nicht verfügbar — Chrome/Edge/Safari probieren.');
+        return false;
+      }
+
       try {
         const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
         stream.getTracks().forEach((track) => track.stop());
+        micPermissionGranted = true;
+        micPermissionStatus = 'granted';
+        updateMicPermissionUi();
+        setStatus('Mikrofon freigegeben — jetzt Spracheingabe starten.');
         return true;
-      } catch {
+      } catch (err) {
+        micPermissionGranted = false;
+        micPermissionStatus = err?.name === 'NotAllowedError' ? 'denied' : 'prompt';
+        updateMicPermissionUi();
+        if (micPermissionStatus === 'denied') {
+          setStatus('Mikrofon verweigert — in den Browser-Einstellungen erlauben.');
+        } else {
+          setStatus('Mikrofon-Zugriff fehlgeschlagen — nochmal versuchen.');
+        }
         return false;
       }
     }
@@ -425,6 +530,7 @@
         micBtn.classList.add('unsupported');
         micLabel.textContent = 'Sprache nicht unterstützt';
         micBtn.disabled = true;
+        micPermissionEl.classList.remove('visible');
         setStatus('Web Speech API nicht verfügbar (Chrome/Edge/Safari probieren).');
         return;
       }
@@ -472,25 +578,36 @@
         if (msg) setStatus(msg);
       });
 
-      micBtn.addEventListener('click', async () => {
+      micPermissionBtn.addEventListener('click', () => {
+        requestMicPermission();
+      });
+
+      micBtn.addEventListener('click', () => {
         if (listening) {
           recognition.stop();
           return;
         }
-        const allowed = await ensureMicPermission();
-        if (!allowed) {
-          setStatus('Mikrofon-Zugriff verweigert — in den Browser-Einstellungen erlauben.');
+        if (!micPermissionGranted && micPermissionStatus !== 'granted') {
+          setStatus('Zuerst „Mikrofon erlauben“ tippen.');
+          micPermissionEl.classList.add('visible');
           return;
         }
         try {
           recognition.start();
-        } catch {
-          recognition.stop();
-          setTimeout(() => {
-            try { recognition.start(); } catch { /* ignore */ }
-          }, 250);
+        } catch (err) {
+          if (err?.name === 'InvalidStateError') {
+            recognition.stop();
+            setTimeout(() => {
+              try { recognition.start(); } catch { /* ignore */ }
+            }, 250);
+            return;
+          }
+          setStatus(`Spracherkennung startet nicht: ${err?.message || 'unbekannter Fehler'}`);
         }
       });
+
+      queryMicPermission();
+      updateMicPermissionUi();
     }
 
     function initPwa() {
@@ -521,6 +638,10 @@
 
     initSpeech();
     initPwa();
+
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') queryMicPermission();
+    });
   </script>
 </body>
 </html>