diff --git a/server/public/home.html b/server/public/home.html index 608cc8d..32569b6 100644 --- a/server/public/home.html +++ b/server/public/home.html @@ -388,6 +388,11 @@ .meet-grid{flex:1;min-height:0;display:grid;gap:.6rem;padding:.8rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-content:center;overflow:hidden;background:#0b1220;} /* #16: center tiles + no stray scrollbar on 1:1/small calls */ .meet-tile{position:relative;background:#0b1220;border-radius:12px;overflow:hidden;aspect-ratio:4/3;border:1px solid #1e293b;transition:box-shadow .12s,border-color .12s;} .meet-tile .meet-sharing-self{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:.3rem;font-size:.72rem;color:#fff;background:rgba(37,99,235,.9);padding:.25rem;} + /* "Stop sharing" banner shown while you're sharing your screen — floats at the top, on top of everything. */ + .stop-share-bar{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:.6rem;max-width:calc(100% - 24px);background:rgba(17,24,39,.94);color:#fff;padding:.35rem .4rem .35rem .85rem;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.4);font-size:.85rem;white-space:nowrap;} + .stop-share-bar .ssb-lbl{display:inline-flex;align-items:center;gap:.35rem;overflow:hidden;text-overflow:ellipsis;} + .stop-share-bar .ssb-stop{flex:0 0 auto;border:none;background:#dc2626;color:#fff;border-radius:999px;padding:.4rem .8rem;font-weight:600;font-size:.8rem;display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;} + .stop-share-bar .ssb-stop:hover{background:#b91c1c;} /* #3: "Ringing…" sits in the MIDDLE of the tile over a dimmed avatar/name, so it reads as the tile's state instead of a caption tucked under the name. */ .meet-tile.waiting{border-color:#334155;} @@ -5293,7 +5298,20 @@ function stopScreen(){ addTile('__local', meetLocalStream, (ME&&ME.name)?ME.name:'You', true); setLocalSharing(false); updateScreenBtn(); meetSend({ type:'meeting-screen', on:false }); } -function updateScreenBtn(){ const b=document.getElementById('meetScreenBtn'); if(!b) return; b.classList.toggle('on', meetScreen); b.title=meetScreen?'Stop sharing':'Share screen'; b.innerHTML=ic('monitor',20); } +function updateScreenBtn(){ const b=document.getElementById('meetScreenBtn'); if(b){ b.classList.toggle('on', meetScreen); b.title=meetScreen?'Stop sharing':'Share screen'; b.innerHTML=ic('monitor',20); } bzShowStopShare(meetScreen); } +// A clear, always-visible "Stop sharing" banner while YOU are sharing your screen — the share button is buried +// in the ⋮ More menu on mobile, so toggling it off wasn't discoverable. Works on iOS/desktop/web (all route +// through toggleScreen). Renders on top (web UI is above the native video under hole-punch). +function bzShowStopShare(on){ + let el=document.getElementById('stopShareBar'); + if(on){ + if(!el){ el=document.createElement('div'); el.id='stopShareBar'; el.className='stop-share-bar'; + el.innerHTML=''+ic('monitor',15)+' You’re sharing your screen'; + const meet=document.querySelector('.meet'); (meet||document.body).appendChild(el); + el.querySelector('.ssb-stop').onclick=()=>{ try{ toggleScreen(); }catch(_){} }; + } + } else if(el){ el.remove(); } +} function setTileScreen(id, on){ const t=document.getElementById('meet-tile-'+id); if(!t) return; t.classList.toggle('sharing', !!on); let b=t.querySelector('.meet-screen'); if(on){ if(!b){ b=document.createElement('div'); b.className='meet-screen'; b.innerHTML=ic('monitor',12)+' Screen'; t.appendChild(b); } } else if(b){ b.remove(); } updateShareMode(); } // Stage mode: one chosen shared screen fills the area; other screens + people are small on the right. function getSharerIds(){ const a=[]; meetSharers.forEach(id=>a.push(id)); return a; } // #9: '__local' excluded — I don't display my own screen, so it's never the local stage