Move Windows camera help into overlay

The privacy instructions no longer bloat the launcher card.
A "Help" button in the navbar opens them in a native dialog
(Esc, backdrop and button close it). The button only shows
for Windows users, reusing the existing OS detection.

Translations may contain <kbd>, <b> and <i> markup now. The
renderer builds nodes from a tag whitelist instead of using
innerHTML, so smuggled tags from i18n.json cannot execute.

All help texts live under meetingPrivacySettings.windows;
sibling keys for other operating systems can follow.

AGENTS.md

@@ -1,4 +1,4 @@
-# AGENT.MD
+# AGENTS.MD
 
 - When writing something intended for human consumption, (comment, commit message, reply to prompt) use as few words as possible. Pick every word meticulously to reduce the volume to a strict minimum. Be down to the point. Less is more.
 

assets/css/launch.css

@@ -206,11 +206,46 @@ button, .button {
   background: #f5f5f5;
 }
 
+/* Windows help overlay – long text needs left
+ * alignment, the page is centered */
+dialog.privacy {
+  width: min(1000px, calc(100% - 32px));
+  max-height: calc(100vh - 48px);
+  border: 0;
+  border-radius: 14px;
+  background: #f5f5f5;
+  padding: 20px;
+  text-align: left;
+  overflow-y: auto;
+}
+
+dialog.privacy::backdrop {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.help-actions {
+  margin-top: 24px;
+  text-align: center;
+}
+
 .room {
+  display: block;
+  margin-top: 20px;
   font-family: monospace;
   word-break: break-all;
 }
 
+/* Keyboard keys, marked with <kbd> in i18n.json */
+kbd {
+  padding: 1px 6px;
+  border: 1px solid #ccc;
+  border-bottom-width: 3px;
+  border-radius: 4px;
+  background: #f0f0f0;
+  font-family: monospace;
+  font-size: 0.9em;
+}
+
 .error {
   padding: 16px;
   border-radius: 8px;
@@ -459,13 +494,19 @@ button, .button {
   color: #bbb;
 }
 
+:root.dark kbd {
+  border-color: #555;
+  background: #404040;
+}
+
 :root.dark .secondary {
   background: #444;
   color: #eee;
 }
 
 :root.dark .status,
-:root.dark .download {
+:root.dark .download,
+:root.dark .privacy {
   background: #303030;
 }
 

assets/i18n.json

@@ -5,8 +5,7 @@
     "source": "Source",
     "launcher": {
       "title": "Jitsi Meeting",
-      "meetingPrefix": "The meeting",
-      "meetingSuffix": "will be joined.",
+      "meetingText": "Please click the button, to join the meeting:",
       "openButton": "Join meeting"
     },
     "starting": {
@@ -87,6 +86,26 @@
       "organizerRequired": "Please enter an organizer email",
       "organizerInvalid": "Please enter a valid organizer email address",
       "nextcloudButton": "Create in Nextcloud Calendar"
+    },
+    "meetingPrivacySettings": {
+      "windows": {
+        "title": "Camera and microphone in Windows: How to control your privacy",
+        "intro": "Your camera and microphone are sensitive devices. Windows therefore ensures that they can only be used with your permission. A few steps give you full control, especially when you use video calls or voice messages directly in your web browser.",
+        "step1Title": "Step 1: Open the Windows settings",
+        "step1Description": "Open the <b>Windows Settings</b> (<kbd>⊞ Windows</kbd> + <kbd>I</kbd>). There, select the area <b>Privacy & security</b> and then <b>Camera</b> or <b>Microphone</b>.",
+        "step2Title": "Step 2: Regulate overall access",
+        "step2Description": "At the top of the page you will find the central switch for camera and microphone access. If it is disabled, no application and no website can access the device. If it is enabled, you decide on the same page whether applications are allowed access in principle.",
+        "step3Title": "Step 3: Check website permissions in the browser",
+        "step3Description": "Even if Windows allows access, your browser asks each website individually whether the camera or microphone may be used. This is the most important protection in everyday use: only when you agree does the access actually become possible.",
+        "browserPermissions": "You can change or revoke these decisions at any time. To do so, click the lock or website-permissions icon in your browser's address bar and select the option for site settings. There you can allow the camera and microphone for the respective site, ask each time, or block them permanently.",
+        "goodToKnowTitle": "Good to know",
+        "goodToKnow1": "You can revoke permissions for individual websites at any time without changing Windows settings.",
+        "goodToKnow2": "An active microphone or camera is indicated in Windows by a small camera or microphone icon in the taskbar. This way you immediately recognize when a site is accessing a device.",
+        "goodToKnow3": "If a website does not get access despite working hardware, the cause is often not the device itself, but one of the two permission levels, in Windows or in the browser.",
+        "adminSupport": "If you need support finding the right settings, please ask <b>your administrator</b>.",
+        "navButton": "Help",
+        "closeButton": "Close"
+      }
     }
   },
   "de": {
@@ -95,8 +114,7 @@
     "source": "Quellcode",
     "launcher": {
       "title": "Jitsi Meeting",
-      "meetingPrefix": "Das Meeting",
-      "meetingSuffix": "wird geöffnet.",
+      "meetingText": "Bitte klicken Sie auf die Schaltfläche, um an dem Meeting teilzunehmen:",
       "openButton": "An Meeting teilnehmen"
     },
     "starting": {
@@ -177,6 +195,26 @@
       "organizerRequired": "Bitte geben Sie eine Organisator-E-Mail ein",
       "organizerInvalid": "Bitte geben Sie eine gültige Organisator-E-Mail-Adresse ein",
       "nextcloudButton": "Im Nextcloud-Kalender erstellen"
+    },
+    "meetingPrivacySettings": {
+      "windows": {
+        "title": "Kamera und Mikrofon in Windows: So kontrollieren Sie Ihre Privatsphäre",
+        "intro": "Ihre Kamera und Ihr Mikrofon sind sensible Geräte. Windows sorgt dafür, dass sie nur mit Ihrer Erlaubnis genutzt werden können. Mit wenigen Schritten behalten Sie die volle Kontrolle, insbesondere wenn Sie Videotelefonie oder Sprachnachrichten direkt im Webbrowser nutzen.",
+        "step1Title": "Schritt 1: Windows-Einstellungen öffnen",
+        "step1Description": "Öffnen Sie die <b>Windows-Einstellungen</b> (<kbd>⊞ Windows</kbd> + <kbd>I</kbd>). Wählen Sie dort den Bereich <b>Datenschutz und Sicherheit</b> und anschließend <b>Kamera</b> oder <b>Mikrofon</b>.",
+        "step2Title": "Schritt 2: Gesamtzugriff regeln",
+        "step2Description": "Oben auf der Seite finden Sie den zentralen Schalter für den Kamera- bzw. Mikrofonzugriff. Ist er deaktiviert, kann keine Anwendung und keine Website auf das Gerät zugreifen. Ist er aktiviert, entscheiden Sie auf der gleichen Seite, ob Anwendungen den Zugriff grundsätzlich erhalten dürfen.",
+        "step3Title": "Schritt 3: Website-Berechtigungen im Browser prüfen",
+        "step3Description": "Auch wenn Windows den Zugriff erlaubt, fragt Ihr Browser bei jeder Website einzeln nach, ob Kamera oder Mikrofon genutzt werden dürfen. Das ist der wichtigste Schutz im Alltag: Erst wenn Sie zustimmen, wird der Zugriff tatsächlich möglich.",
+        "browserPermissions": "Sie können diese Entscheidungen jederzeit ändern oder widerrufen. Klicken Sie dazu in der Adressleiste Ihres Browsers auf das Schloss- respektive Symbol für die Website-Berechtigungen und wählen Sie die Option für Website-Einstellungen. Dort lassen sich Kamera und Mikrofon für die jeweilige Seite gezielt erlauben, einmalig anfragen oder dauerhaft blockieren.",
+        "goodToKnowTitle": "Gut zu wissen",
+        "goodToKnow1": "Sie können Berechtigungen für einzelne Websites jederzeit zurückziehen, ohne Windows-Einstellungen zu ändern.",
+        "goodToKnow2": "Ein aktives Mikrofon oder eine aktive Kamera wird unter Windows durch ein kleines Kamera- oder Mikrofonsymbol in der Taskleiste angezeigt. So erkennen Sie sofort, wenn eine Seite auf ein Gerät zugreift.",
+        "goodToKnow3": "Wenn eine Website trotz funktionierender Hardware keinen Zugriff erhält, liegt die Ursache häufig nicht am Gerät selbst, sondern an einer der beiden Berechtigungsebenen, in Windows oder im Browser.",
+        "adminSupport": "Sollten Sie Unterstützung dabei benötigen, die passenden Einstellungen zu finden, fragen Sie bitte <b>Ihren Administrator</b>.",
+        "navButton": "Hilfe",
+        "closeButton": "Schließen"
+      }
     }
   },
   "fr": {
@@ -185,8 +223,7 @@
     "source": "Code source",
     "launcher": {
       "title": "Réunion Jitsi",
-      "meetingPrefix": "La réunion",
-      "meetingSuffix": "va être ouverte.",
+      "meetingText": "Veuillez cliquer sur le bouton pour rejoindre la réunion :",
       "openButton": "Rejoindre la réunion"
     },
     "starting": {
@@ -267,6 +304,26 @@
       "organizerRequired": "Veuillez entrer un email d'organisateur",
       "organizerInvalid": "Veuillez entrer une adresse email d'organisateur valide",
       "nextcloudButton": "Créer dans le calendrier Nextcloud"
+    },
+    "meetingPrivacySettings": {
+      "windows": {
+        "title": "Caméra et microphone sous Windows : comment contrôler votre vie privée",
+        "intro": "Votre caméra et votre microphone sont des appareils sensibles. Windows veille donc à ce qu'ils ne puissent être utilisés qu'avec votre autorisation. En quelques étapes, vous gardez le contrôle total, surtout lorsque vous utilisez la visioconférence ou les messages vocaux directement dans votre navigateur.",
+        "step1Title": "Étape 1 : Ouvrir les paramètres Windows",
+        "step1Description": "Ouvrez les <b>paramètres Windows</b> (<kbd>⊞ Windows</kbd> + <kbd>I</kbd>). Sélectionnez ensuite la section <b>Confidentialité et sécurité</b>, puis <b>Caméra</b> ou <b>Micro</b>.",
+        "step2Title": "Étape 2 : Régler l'accès global",
+        "step2Description": "En haut de la page se trouve l'interrupteur central de l'accès à la caméra ou au microphone. S'il est désactivé, aucune application ni aucun site web ne peut accéder à l'appareil. S'il est activé, vous décidez sur la même page si les applications peuvent y accéder en principe.",
+        "step3Title": "Étape 3 : Vérifier les autorisations du site dans le navigateur",
+        "step3Description": "Même si Windows autorise l'accès, votre navigateur demande site par site si la caméra ou le microphone peuvent être utilisés. C'est la protection la plus importante au quotidien : seul votre consentement rend l'accès réellement possible.",
+        "browserPermissions": "Vous pouvez modifier ou révoquer ces décisions à tout moment. Pour cela, cliquez dans la barre d'adresse de votre navigateur sur l'icône du cadenas ou des autorisations du site, puis choisissez l'option des paramètres du site. Vous y pouvez autoriser, demander à chaque fois ou bloquer définitivement la caméra et le microphone pour le site concerné.",
+        "goodToKnowTitle": "Bon à savoir",
+        "goodToKnow1": "Vous pouvez retirer à tout moment les autorisations de sites individuels sans modifier les paramètres Windows.",
+        "goodToKnow2": "Un microphone ou une caméra active est signalé sous Windows par une petite icône de caméra ou de microphone dans la barre des tâches. Vous reconnaissez ainsi immédiatement quand un site accède à un appareil.",
+        "goodToKnow3": "Si un site n'obtient pas l'accès malgré un matériel fonctionnel, la cause n'est souvent pas l'appareil lui-même, mais l'un des deux niveaux d'autorisation, sous Windows ou dans le navigateur.",
+        "adminSupport": "Si vous avez besoin d'aide pour trouver les bons réglages, veuillez demander à <b>votre administrateur</b>.",
+        "navButton": "Aide",
+        "closeButton": "Fermer"
+      }
     }
   },
   "zh": {
@@ -275,8 +332,7 @@
     "source": "源代码",
     "launcher": {
       "title": "Jitsi 会议",
-      "meetingPrefix": "会议",
-      "meetingSuffix": "即将打开。",
+      "meetingText": "请点击按钮加入会议：",
       "openButton": "加入会议"
     },
     "starting": {
@@ -357,6 +413,26 @@
       "organizerRequired": "请输入组织者邮箱",
       "organizerInvalid": "请输入有效的组织者邮箱地址",
       "nextcloudButton": "在 Nextcloud 日历中创建"
+    },
+    "meetingPrivacySettings": {
+      "windows": {
+        "title": "Windows 中的摄像头和麦克风：如何掌控您的隐私",
+        "intro": "摄像头和麦克风是敏感设备。因此，Windows 确保只有获得您的许可才能使用它们。只需几个步骤，您就能完全掌控，尤其是在浏览器中直接使用视频通话或语音消息时。",
+        "step1Title": "步骤 1：打开 Windows 设置",
+        "step1Description": "打开 <b>Windows 设置</b>(<kbd>⊞ Windows</kbd> + <kbd>I</kbd>)。选择<b>隐私和安全性</b>，然后选择<b>摄像头</b>或<b>麦克风</b>。",
+        "step2Title": "步骤 2：管理总体访问权限",
+        "step2Description": "页面顶部有控制摄像头或麦克风访问的总开关。如果关闭，任何应用和网站都无法访问设备。如果开启，您可以在同一页面决定是否允许应用访问。",
+        "step3Title": "步骤 3：检查浏览器中的网站权限",
+        "step3Description": "即使 Windows 允许访问，浏览器也会逐个询问每个网站是否可以使用摄像头或麦克风。这是日常使用中最重要的保护：只有您同意后，访问才会真正生效。",
+        "browserPermissions": "您可以随时更改或撤销这些决定。为此，请点击浏览器地址栏中的锁形或网站权限图标，并选择网站设置选项。在那里可以为相应网站专门允许、每次询问或永久阻止摄像头和麦克风。",
+        "goodToKnowTitle": "实用提示",
+        "goodToKnow1": "您可以随时撤销单个网站的权限，而无需更改 Windows 设置。",
+        "goodToKnow2": "在 Windows 中，使用中的麦克风或摄像头会通过任务栏中的小摄像头或麦克风图标显示。这样您可以立即发现某个网站正在访问设备。",
+        "goodToKnow3": "如果网站在硬件正常的情况下仍无法获得访问权限，原因往往不在设备本身，而在两个权限层级之一：Windows 或浏览器。",
+        "adminSupport": "如果您需要帮助查找相应的设置，请咨询<b>您的管理员</b>。",
+        "navButton": "帮助",
+        "closeButton": "关闭"
+      }
     }
   }
 }

assets/launch.js

@@ -89,6 +89,46 @@ let translation = {};
  * ============================================================
  */
 
+/*
+ * "<b>", "<i>" and "<kbd>" are the only markup allowed
+ * in translations (no nesting). Hand-built nodes instead
+ * of innerHTML: a smuggled tag from i18n.json can never
+ * execute.
+ *
+ * "Settings (<kbd>I</kbd>)" becomes
+ *
+ * Settings ("I")[text](kbd)
+ */
+const MARKUP_PATTERN = /<(b|i|kbd)>(.*?)<\/\1>/g;
+
+function renderTranslation(element, text) {
+  element.replaceChildren();
+
+  let lastIndex = 0;
+
+  for (const match of text.matchAll(MARKUP_PATTERN)) {
+    /*
+     * The pattern restricts the tag to the whitelist,
+     * so createElement() cannot create foreign elements.
+     */
+    element.append(
+      document.createTextNode(
+        text.slice(lastIndex, match.index)
+      ),
+      Object.assign(
+        document.createElement(match[1]),
+        { textContent: match[2] }
+      )
+    );
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  element.append(
+    document.createTextNode(text.slice(lastIndex))
+  );
+}
+
 function applyTranslations() {
   document.documentElement.lang = currentLanguage;
   if (translation.pageTitle) {
@@ -102,7 +142,7 @@ function applyTranslations() {
       const value = getTranslation(key);
 
       if (value !== null) {
-        element.textContent = value;
+        renderTranslation(element, value);
       }
     });
 
@@ -399,6 +439,22 @@ function applyLegalNoticeLink() {
   legalNoticeLink.classList.remove("hidden");
 }
 
+/* ============================================================
+ * WINDOWS HELP BUTTON
+ * ============================================================ */
+
+/*
+ * The camera/microphone help (opens windowsHelpOverlay)
+ * only concerns Windows users.
+ */
+function applyWindowsHelpButton() {
+  if (detectOperatingSystem() !== OS_NAMES.Windows) {
+    return;
+  }
+
+  windowsHelpButton.classList.remove("hidden");
+}
+
 /* ============================================================
  * DOM elements
  * ============================================================
@@ -450,6 +506,7 @@ const navbar = document.querySelector(".navbar");
 const navToggle = document.getElementById("navToggle");
 const navActions = document.getElementById("navActions");
 const legalNoticeLink = document.getElementById("legalNoticeLink");
+const windowsHelpButton = document.getElementById("windowsHelpButton");
 
 /* Language menu DOM elements */
 const langMenu = document.getElementById("langMenu");
@@ -479,6 +536,10 @@ const themeButton = document.getElementById("themeButton");
 const themeIconSun = document.getElementById("themeIconSun");
 const themeIconMoon = document.getElementById("themeIconMoon");
 
+/* Windows help overlay DOM elements */
+const windowsHelpOverlay = document.getElementById("windowsHelpOverlay");
+const windowsHelpClose = document.getElementById("windowsHelpClose");
+
 /* ============================================================
  * GET ROOM FROM QUERY-PARAMETER
  * ============================================================
@@ -1399,6 +1460,10 @@ function cancelCreateMeeting() {
  * ============================================================
  */
 
+/* ============================================================
+ * INITIALIZATION
+ * ============================================================ */
+
 function initialize() {
   const room = getRoom();
 
@@ -1580,6 +1645,31 @@ navToggle.addEventListener(
   toggleNavMenu
 );
 
+/* Windows help events */
+windowsHelpButton.addEventListener(
+  "click",
+  () => {
+    windowsHelpOverlay.showModal();
+  }
+);
+
+windowsHelpClose.addEventListener(
+  "click",
+  () => {
+    windowsHelpOverlay.close();
+  }
+);
+
+/* Clicks on the backdrop close the overlay */
+windowsHelpOverlay.addEventListener(
+  "click",
+  (event) => {
+    if (event.target === windowsHelpOverlay) {
+      windowsHelpOverlay.close();
+    }
+  }
+);
+
 /*
  * Follow the system if no choice is saved.
  */
@@ -1640,6 +1730,7 @@ async function start() {
   applyNextcloudButton();
   applyAdhocButton();
   applyLegalNoticeLink();
+  applyWindowsHelpButton();
 
   await loadTranslations();
 

launch.html

@@ -33,6 +33,9 @@
       <a id="legalNoticeLink" class="button secondary hidden" href="#" target="_blank" rel="noopener noreferrer" data-i18n="legal_notice">
         Legal Notice
       </a>
+      <button id="windowsHelpButton" class="button secondary hidden" type="button" data-i18n="meetingPrivacySettings.windows.navButton">
+        Help
+      </button>
       <a class="button secondary" href="https://git.bnvb.eu/stefan.tollkuehn/jitsi-launch" target="_blank" rel="noopener noreferrer" data-i18n="source">
         Source
       </a>
@@ -68,19 +71,16 @@
           <h1 data-i18n="launcher.title">Jitsi Meeting</h1>
 
           <p>
-            <span data-i18n="launcher.meetingPrefix">
-              The meeting
+            <span data-i18n="launcher.meetingText">
+              Please click the button, to join the meeting:
             </span>
             <span class="room">
               <strong id="roomName"></strong>
             </span>
-            <span data-i18n="launcher.meetingSuffix">
-              will be opened.
-            </span>
           </p>
 
           <button id="openButton" class="button primary" type="button" data-i18n="launcher.openButton">
-            Open meeting
+            Join meeting
           </button>
           
           <button id="createNewFromLauncherButton" class="button secondary hidden" type="button" data-i18n="creator.createNewButton">
@@ -319,6 +319,39 @@
 
       </div>
     </div>
+
+    <!-- WINDOWS-HILFE OVERLAY -->
+    <dialog id="windowsHelpOverlay" class="privacy">
+      <h2 data-i18n="meetingPrivacySettings.windows.title"></h2>
+      <p data-i18n="meetingPrivacySettings.windows.intro"></p>
+
+      <h3 data-i18n="meetingPrivacySettings.windows.step1Title"></h3>
+      <p data-i18n="meetingPrivacySettings.windows.step1Description"></p>
+
+      <h3 data-i18n="meetingPrivacySettings.windows.step2Title"></h3>
+      <p data-i18n="meetingPrivacySettings.windows.step2Description"></p>
+
+      <h3 data-i18n="meetingPrivacySettings.windows.step3Title"></h3>
+      <p data-i18n="meetingPrivacySettings.windows.step3Description"></p>
+
+      <p data-i18n="meetingPrivacySettings.windows.browserPermissions"></p>
+
+      <h3 data-i18n="meetingPrivacySettings.windows.goodToKnowTitle"></h3>
+      <ul>
+        <li data-i18n="meetingPrivacySettings.windows.goodToKnow1"></li>
+        <li data-i18n="meetingPrivacySettings.windows.goodToKnow2"></li>
+        <li data-i18n="meetingPrivacySettings.windows.goodToKnow3"></li>
+      </ul>
+
+      <p data-i18n="meetingPrivacySettings.windows.adminSupport"></p>
+
+      <div class="help-actions">
+        <button id="windowsHelpClose" class="button secondary" type="button" data-i18n="meetingPrivacySettings.windows.closeButton">
+          Close
+        </button>
+      </div>
+    </dialog>
+
     <script src="assets/lib/ua-parser.min.js"></script>
     <script src="assets/launch.js"></script>
   </body>