@daugasauron/dolly-host-microphone 0.1.5 → 0.1.6

package/microphone.mjs

@@ -17,7 +17,7 @@ function indicate({ mount, indicators }, state) {
     element.className = "page-indicator";
     element.setAttribute("role", "status");
     element.style.cssText = "position:absolute;left:0.5rem;bottom:2rem;z-index:8;max-width:calc(100% - 1rem);" +
-      "padding:0.15rem 0.45rem;background:#262626;border:1px solid #e98773;color:#e98773;font-size:13px;pointer-events:none";
+      "padding:0.15rem 0.45rem;background:var(--dolly-ui-background);border:1px solid var(--dolly-ui-alert);color:var(--dolly-ui-alert);font-size:13px;pointer-events:none";
   }
   const text = { waiting: "Microphone: waiting for permission", capturing: "Microphone on" }[state];
   element.hidden = !text;
@@ -25,8 +25,30 @@ function indicate({ mount, indicators }, state) {
   indicators.hold(element, Boolean(text));
 }
 
-export function browser({ mount, send, indicators }) {
-  const provider = createMicrophoneProvider(() => indicate({ mount, indicators }, provider.status().state));
+// A session that enabled the module itself (nena@0, `switched`) captures only
+// after the user says yes on the page, once a session: the browser's own
+// prompt is per origin and remembered, so it may not ask again.
+function asked(mount) {
+  return new Promise(resolve => {
+    const element = mount.appendChild(document.createElement("div"));
+    element.setAttribute("role", "alertdialog");
+    element.style.cssText = "position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:9;padding:0.8rem 1rem;" +
+      "background:#262626;border:1px solid #e98773;color:#e8e3d7;font-size:14px;max-width:min(30rem,calc(100% - 2rem))";
+    element.textContent = "A program in this session asks to use the microphone.";
+    const choice = allowed => () => { element.remove(); resolve(allowed); };
+    for (const [label, allowed] of [["Allow", true], ["Refuse", false]]) {
+      const button = Object.assign(document.createElement("button"), { type: "button", textContent: label });
+      button.style.cssText = "margin:0.6rem 0.6rem 0 0;padding:0.2rem 0.9rem;color:inherit;background:transparent;border:1px solid currentColor";
+      button.addEventListener("click", choice(allowed));
+      element.append(button);
+    }
+  });
+}
+
+export function browser({ mount, send, indicators, switched }) {
+  let consented = !switched;
+  const consent = async () => consented ||= await asked(mount);
+  const provider = createMicrophoneProvider(() => indicate({ mount, indicators }, provider.status().state), consent);
   return {
     page: { get microphone() { return provider.status(); } },
     messages: {

package/package.json

@@ -1,10 +1,10 @@
 {
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "name": "@daugasauron/dolly-host-microphone",
   "license": "MIT",
   "dependencies": {
-    "@daugasauron/dolly": "0.1.5"
+    "@daugasauron/dolly": "0.1.6"
   },
   "description": "Dolly's microphone@0 host module: the default microphone, behind the browser's permission prompt.",
   "repository": {

package/provider.mjs

@@ -8,8 +8,9 @@ const names = { [M.DOLLY_MICROPHONE_WAITING]: "waiting", [M.DOLLY_MICROPHONE_CAP
 
 // The page side of microphone@0: one capture of the browser's default input.
 // OPEN asks the browser, whose own prompt decides; nothing here grants it.
-// `changed` runs whenever the capture's state does.
-export function createMicrophoneProvider(changed = () => {}) {
+// `changed` runs whenever the capture's state does; `consent` resolves to
+// whether the user lets the capture go ahead, before the browser is asked.
+export function createMicrophoneProvider(changed = () => {}, consent = async () => true) {
   let capture, generation = 0;
 
   function set(target, state) {
@@ -36,6 +37,8 @@ export function createMicrophoneProvider(changed = () => {}) {
   }
   async function start(target) {
     try {
+      if (!await consent()) return set(target, M.DOLLY_MICROPHONE_DENIED);
+      if (target.released) return;
       target.stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
       if (target.released) return stop(target);
       target.context = new AudioContext({ sampleRate: M.DOLLY_MICROPHONE_RATE });