From 35908cf8982993a229590a00b98b96219b65bd86 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Wed, 3 Jun 2026 12:24:50 -0400
Subject: [PATCH] zebra-spaces: remember screen-share across refresh, one-click
 resume banner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Camera silently auto-resumes on refresh (getUserMedia keeps the
permission grant); screen-share couldn't because getDisplayMedia
requires transient activation — a fresh user gesture. The previous
attempt fired in a setTimeout after welcome, which has no gesture, so
the browser instantly returned NotAllowedError. We then dropped
screen-state tracking entirely.

This time: track ACTIVE_SCREEN_KEY in sessionStorage when sfuPublishScreen
succeeds; on welcome, if the user can speak AND the key is set,
unhide #sec-screen-resume — a banner with a single 'resume screen
share' button. The button click is the gesture; its handler calls
sfuPublishScreen() synchronously, and getDisplayMedia is the first
await inside, so the transient-activation flag is preserved through
the chain (same shape as the regular 'share screen' button, which
proves the mechanic works every day).

UX:
- Camera: silent resume on welcome (unchanged)
- Screen: banner appears, user taps once, picker opens
- Mobile: getDisplayMedia missing — the resume button rejects with a
  logLine error and self-clears the key (handled by .catch on the
  resume click)

Key clears on explicit unshare + on demote to listener + on rejection,
so the banner doesn't linger after the underlying state changes.
---
 web/zebra-spaces.html | 48 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 42 insertions(+), 6 deletions(-)

diff --git a/web/zebra-spaces.html b/web/zebra-spaces.html
index 492ef41..8939a2c 100644
--- a/web/zebra-spaces.html
+++ b/web/zebra-spaces.html
@@ -731,6 +731,12 @@ try {
     <select id="camera-select" title="camera device — applies on next start"><option value="">default camera</option></select>
   </div>
 </section>
+<section id="sec-screen-resume" class="hidden">
+  <div class="notice-banner warn">
+    <span>you were sharing your screen before this refresh — tap to resume (browsers need a fresh click to grant screen capture)</span>
+    <button id="btn-screen-resume" class="small invert">resume screen share</button>
+  </div>
+</section>
 
 <section id="sec-listener-actions" class="hidden">
   <h2>your hand</h2>
@@ -1286,11 +1292,14 @@ const THEME_KEY      = 'zebra-theme-v1';
  * hard refresh auto-rejoins. Different tabs can sit in different
  * spaces because sessionStorage doesn't bleed across tabs. */
 const ACTIVE_CALL_KEY = 'zebra-spaces-active-call-v1';
-/* camera resume only — screen-share recovery isn't possible silently
- * (getDisplayMedia needs a fresh gesture) and offering a separate
- * 'resume screen' button is the same friction as clicking 'share
- * screen' again, so we just don't track screen state across reload. */
 const ACTIVE_CAM_KEY = 'zebra-spaces-active-cam-v1';
+/* screen-share resume — getDisplayMedia REQUIRES a fresh user gesture
+ * (Chrome / Firefox block silent triggers after a hard refresh), so
+ * unlike the camera we can't just re-acquire silently on welcome.
+ * Instead we surface a one-click resume banner if the user was sharing
+ * before the refresh — the click IS the gesture and counts toward the
+ * getDisplayMedia call inside the same task. */
+const ACTIVE_SCREEN_KEY = 'zebra-spaces-active-screen-v1';
 /* mute state for the current tab — '1' means muted. Survives a hard
  * refresh via sessionStorage so the page reconnects in the same state
  * the user last set. Cleared on explicit leave. NOT cleared on role
@@ -2179,6 +2188,8 @@ async function sfuPublishScreen(){
   renderScreenTile(myKeys.pubHex, stream, { local: true });
   $('btn-screen-share').classList.add('hidden');
   $('btn-screen-stop').classList.remove('hidden');
+  try { sessionStorage.setItem(ACTIVE_SCREEN_KEY, '1'); } catch(_){}
+  $('sec-screen-resume').classList.add('hidden');
 }
 async function sfuUnpublishScreen(){
   if (!sfuScreenPC && !sfuScreenStream) return;
@@ -2191,6 +2202,8 @@ async function sfuUnpublishScreen(){
   }
   $('btn-screen-share').classList.remove('hidden');
   $('btn-screen-stop').classList.add('hidden');
+  try { sessionStorage.removeItem(ACTIVE_SCREEN_KEY); } catch(_){}
+  $('sec-screen-resume').classList.add('hidden');
   logLine('', 'screen share stopped');
 }
 
@@ -2998,8 +3011,20 @@ async function handleSignal(raw){
             });
           }, 250);
         }
+        /* screen — getDisplayMedia requires a fresh user gesture per
+         * browser security policy, so we surface a one-click resume
+         * banner instead. The click IS the gesture. */
+        let wantScreen = false;
+        try { wantScreen = sessionStorage.getItem(ACTIVE_SCREEN_KEY) === '1'; } catch(_){}
+        if (wantScreen){
+          $('sec-screen-resume').classList.remove('hidden');
+        } else {
+          $('sec-screen-resume').classList.add('hidden');
+        }
       } else {
         try { sessionStorage.removeItem(ACTIVE_CAM_KEY); } catch(_){}
+        try { sessionStorage.removeItem(ACTIVE_SCREEN_KEY); } catch(_){}
+        $('sec-screen-resume').classList.add('hidden');
       }
       renderShareUrl();
       onRoleEntered();
@@ -3489,6 +3514,17 @@ function renderRoom(){
 $('btn-raise').addEventListener('click', () => { send({ type:'raise-hand' }); });
 $('btn-lower').addEventListener('click', () => { send({ type:'lower-hand' }); });
 $('btn-screen-share').addEventListener('click', () => { logLine('', 'click: btn-screen-share'); sfuPublishScreen().catch(e => logLine('err','screen share: '+e.message)); });
+$('btn-screen-resume').addEventListener('click', () => {
+  /* The user gesture from this click is what unlocks getDisplayMedia
+   * after a refresh — chained directly into sfuPublishScreen so the
+   * browser counts it toward the same task. */
+  logLine('', 'click: btn-screen-resume');
+  sfuPublishScreen().catch(e => {
+    logLine('err', 'screen resume: ' + e.message);
+    try { sessionStorage.removeItem(ACTIVE_SCREEN_KEY); } catch(_){}
+    $('sec-screen-resume').classList.add('hidden');
+  });
+});
 $('btn-screen-stop').addEventListener('click', () => {
   /* click telemetry — the 'screen share stopped' line lower in
    * sfuUnpublishScreen only fires AFTER the early-return, so logging
@@ -3907,8 +3943,8 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');
 
 <footer style="margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
   <span id="pi-seal" style="color:#777;cursor:default;user-select:none" title="">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-03</span><br>
-  md5 <span class="stamp-md5">4a65393cf64a26c8601730505bc60933</span><br>
-  sha256 <span class="stamp-sha">3bdefbf96334c8e4c92b0831381f2257e53178809225077be2c7752b13324a97</span><br>
+  md5 <span class="stamp-md5">2439f48e2bbd34e36b34209e29d631df</span><br>
+  sha256 <span class="stamp-sha">afb06260b27c0e1d2a0b76b228c3b7af5138b826fd6b123100d1ccd4d763543b</span><br>
   <span style="color:#bbb">hashes are of this page with these two fields zeroed — to verify, blank them and re-hash</span><br>
   <span style="color:#bbb">one self-contained file — <strong>save a copy</strong> and verify against these hashes; point at your own servers with ?signal= and ?turncred=, or <a href="host-your-own.html" style="color:#999">host your own community</a></span>
 </footer>