engineering/zebra-report
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

zebra-spaces: listeners auto-spotlight the latest screen — audience experience

Browse source 
Per fox: 'listeners should be able to see all shared screens as audience'.

Listeners are passive — they're not running the meeting, they're
watching. So they shouldn't have to know they CAN click the screen
thumbnail to see the screen big; the system should auto-promote the
most recent screen-share into their spotlight.

Promotion rules in renderVideoTile when a new tile arrives:
  - no spotlight up      → first tile auto-promotes (anyone)
  - listener + new screen + spotlight is camera/game
                         → switch to the screen (load-bearing content)
  - listener + new screen + spotlight is older screen
                         → switch to the newer screen
  - listener + new camera
                         → do NOT override an active screen spotlight
  - speakers + new anything
                         → keep their manual choice

All other screens stay in the screens-thumbs column as before, so a
listener can still click any prior screen to view it. The thumbnails
of arriving cameras / screens still render normally — listeners just
get the new screen pre-spotlit instead of buried.

Speakers / hosts keep their existing behavior: first tile auto-
spotlights, subsequent tiles become thumbnails, manual click swaps.
This commit is contained in:
Russell Ballestrini 2026-06-02 11:32:09 -04:00
parent 04e13e1f3a
commit 81b237eaa7
No known key found for this signature in database
1 changed files with 22 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

27
web/zebra-spaces.html
View file

@ -1771,9 +1771,26 @@ function renderVideoTile(kind, pubHex, stream, opts){
if (spotlight && spotlight.kind === kind && spotlight.pubHex === pubHex && spotlight.video){
spotlight.video.srcObject = stream;
}
/* first arrival auto-spotlights — no spotlight up yet AND this is new */
if (isNew && !spotlight){
setSpotlight(kind, pubHex);
/* spotlight promotion rules:
* - no spotlight yet → first tile auto-promotes (anyone)
* - listener role + new SCREEN arrives → auto-promote so the
* audience always sees the most recent share without clicking;
* speakers/hosts get to keep their current focus
* - listener role + new CAMERA → don't override an active screen
* spotlight (cameras are less load-bearing than a screen-share)
*/
if (isNew){
const isListener = !canSpeak(myRole);
if (!spotlight){
setSpotlight(kind, pubHex);
} else if (isListener && !local && kind === 'screen' && spotlight.kind !== 'screen'){
/* listener: a screen just arrived and we're spotlighting a camera
* or game — switch to the screen */
setSpotlight(kind, pubHex);
} else if (isListener && !local && kind === 'screen' && spotlight.kind === 'screen'){
/* listener: prefer the newer screen over the older one */
setSpotlight(kind, pubHex);
}
}
updateContainerVisibility();
if (isNew) logLine('', k.labelPrefix+' share: '+(local?'local preview ':'receiving ')+label);
@ -3331,8 +3348,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-02</span><br>
md5 <span class="stamp-md5">435fd27480ef8c017d88914d3aa9f308</span><br>
sha256 <span class="stamp-sha">2757004e72c5cc250a93476d1bd642e1e6669e589e76387eedd185cb6d5d5aa2</span><br>
md5 <span class="stamp-md5">e7c6d045cf7204add40ff3ae905eab0f</span><br>
sha256 <span class="stamp-sha">76761abd84bcfee8d479b69c8d4a68f90bf8133b15c7b2b99b817732f31d2deb</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>