'
+ (addable.length
? (''
@@ -3021,6 +3040,12 @@ async function openGroupInfo(gid){
}
const addBtn=document.getElementById('giAddBtn'); if(addBtn) addBtn.onclick=async()=>{ const ids=[...ov.querySelectorAll('#giAddWrap input:checked')].map(i=>i.value); if(!ids.length){ toast('Pick members to add'); return; } try{ await postJSON('/api/groups/add',{group:gid,memberIds:ids}); ov.remove(); await refresh(); openGroupInfo(gid); }catch(e){ toast(e.message); } };
const nameOf=(uid)=>{ const mm=info.members.find(x=>x.id===uid); return mm?mm.name:'this person'; };
+ // #9: tapping a member (not their admin/remove buttons) opens the private conversation with them.
+ ov.querySelectorAll('.mrow[data-dm]').forEach(row=>row.addEventListener('click',(e)=>{
+ if(e.target.closest('button')) return; // let the admin / remove buttons do their thing
+ const id=row.dataset.dm; if(!id) return;
+ ov.remove(); switchTab('chat'); selectChat('dm', id);
+ }));
ov.querySelectorAll('[data-rm]').forEach(b=>b.onclick=async()=>{ const nm=nameOf(b.dataset.rm); if(!confirm('Remove '+nm+' from the group?\n\nThey will lose access to this conversation.')) return; try{ await postJSON('/api/groups/remove',{group:gid,userId:b.dataset.rm}); ov.remove(); await refresh(); openGroupInfo(gid); }catch(e){ toast(e.message); } });
ov.querySelectorAll('[data-role]').forEach(b=>b.onclick=async()=>{ const mk=b.dataset.val==='1'; const nm=nameOf(b.dataset.role); if(!confirm(mk?('Make '+nm+' an admin?\n\nThey will be able to add or remove members and manage this group.'):('Remove '+nm+' as an admin?'))) return; try{ await postJSON('/api/groups/admin',{group:gid,userId:b.dataset.role,value:mk}); ov.remove(); await refresh(); openGroupInfo(gid); }catch(e){ toast(e.message); } });
document.getElementById('giLeave').onclick=async()=>{
@@ -3102,6 +3127,10 @@ async function sfuConnect(){
room.on(LK.RoomEvent.TrackSubscribed, (track,pub,participant)=>sfuAttach(pub,track,participant));
room.on(LK.RoomEvent.TrackUnsubscribed, (track,pub,participant)=>sfuDetach(pub,track,participant));
await room.connect(SFU.url, tk.token);
+ // Re-apply the user's saved mic/speaker choice to this room (#3: a picked headset/Bluetooth device
+ // must actually be used, not just remembered).
+ try{ if(meetMicId && room.switchActiveDevice) await room.switchActiveDevice('audioinput', meetMicId); }catch(_){}
+ try{ if(meetSinkId && room.switchActiveDevice) await room.switchActiveDevice('audiooutput', meetSinkId); }catch(_){}
}
// Per-peer track bookkeeping → one tile stream that prefers the screen track over the camera,
// mirroring the mesh's single-video-per-tile model and driving the existing sharing/stage UI.
@@ -3390,12 +3419,14 @@ function renderCall(){
+ ''
+ ''
+ ''
- + ''
- + ''
- + ((ME&&ME.guest)?'':'') // #12: transcript is a signed-in feature (guests can't download it)
- + ''
- + (isMobileUA()?'':'')
- + ''
+ // Mobile keeps only Mic / Camera / Speaker / End on the bar (#8e); everything else moves behind ⋮ More.
+ + ''
+ + ''
+ + ((ME&&ME.guest)?'':'') // #12: transcript is a signed-in feature (guests can't download it)
+ + ''
+ + ''
+ + ''
+ + ''
+ '
';
document.getElementById('meetMicBtn').onclick=toggleMic;
document.getElementById('meetCamBtn').onclick=toggleCam;
@@ -3405,13 +3436,15 @@ function renderCall(){
document.getElementById('meetPplBtn').onclick=toggleMeetPanel;
{ const cb=document.getElementById('meetChatBtn'); if(cb) cb.onclick=toggleMeetChat; }
{ const ab=document.getElementById('meetAudioBtn'); if(ab) ab.onclick=(e)=>{ e.stopPropagation(); openAudioMenu(ab); }; } // desktop: mic ▾ → devices
- { const sb=document.getElementById('meetSpkBtn'); if(sb) sb.onclick=toggleSpeakerphone; } // mobile: speakerphone toggle
+ { const sb=document.getElementById('meetSpkBtn'); if(sb) sb.onclick=toggleSpeakerphone; } // speaker / headset toggle
+ { const mb=document.getElementById('meetMoreBtn'); if(mb) mb.onclick=(e)=>{ e.stopPropagation(); openMeetMore(mb); }; } // mobile: ⋮ → the rest
document.getElementById('meetLeaveBtn').onclick=leaveMeeting;
updateHostControls();
// Click another shared screen (in the side column) to bring it onto the stage.
const grid=document.getElementById('meetGrid'); if(grid) grid.addEventListener('click', e=>{ if(!grid.classList.contains('sharing-mode')) return; const t=e.target.closest('.meet-tile.sharing'); if(t && !t.classList.contains('stage')){ setStage(t.id.replace('meet-tile-','')); } });
addTile('__local', meetLocalStream, (ME&&ME.name)?ME.name:'You', true);
setTileMute('__local', !meetMic);
+ detectBtOutput(); // #8d: pick the right speaker/bluetooth glyph for the current route
}
// ---- Audio devices (#3): one menu behind the MIC's ▾ caret, listing Speaker + Microphone (like Teams),
// instead of a separate headphones button. Choosing a speaker applies setSinkId to every meeting media
@@ -3424,6 +3457,42 @@ function applySink(el){ try{ if(el && meetSinkId && typeof el.setSinkId==='funct
function applySinkAll(){ document.querySelectorAll('#meetGrid video').forEach(applySink); }
// Bluetooth/headset devices report themselves in the label — used to pick a sensible icon on mobile.
function isBtLabel(l){ return /bluetooth|airpod|buds|headset|headphone|wh-|wf-/i.test(l||''); }
+// #8d: the speaker button's icon reflects the ACTUAL route — bluetooth/headset when one is in use,
+// otherwise speaker-on / speaker-off (dimmed when off).
+let _btConnected=false;
+function spkIcon(){ if(_btConnected && !meetSpeakerOn) return 'bluetooth'; return meetSpeakerOn?'speaker':'speakerOff'; }
+function refreshSpkBtn(){
+ const b=document.getElementById('meetSpkBtn'); if(!b) return;
+ b.classList.toggle('off', !meetSpeakerOn);
+ b.innerHTML=ic(spkIcon(),20);
+ b.title=(_btConnected&&!meetSpeakerOn)?'Using headset / Bluetooth':(meetSpeakerOn?'Speaker on':'Speaker off');
+}
+// Detect a connected BT/headset output so the icon can switch to the bluetooth glyph.
+async function detectBtOutput(){
+ try{ const d=await navigator.mediaDevices.enumerateDevices(); _btConnected=d.some(x=>x.kind==='audiooutput' && isBtLabel(x.label)); }catch(_){ _btConnected=false; }
+ refreshSpkBtn();
+}
+try{ if(navigator.mediaDevices && navigator.mediaDevices.addEventListener) navigator.mediaDevices.addEventListener('devicechange', ()=>{ detectBtOutput(); }); }catch(_){}
+// #8e: on mobile the bar keeps only Mic/Camera/Speaker/End — the rest live behind this ⋮ menu.
+function openMeetMore(anchor){
+ document.querySelectorAll('.spk-menu').forEach(x=>x.remove());
+ const items=[];
+ items.push({ic:'monitor', label:'Share screen', fn:toggleScreen});
+ if(meetIsHost) items.push({ic:'record', label:(meetRec?'Stop recording':'Record meeting'), fn:toggleRecord});
+ if(!(ME&&ME.guest)) items.push({ic:'fileText', label:(meetTranscribe?'Stop transcript':'Live transcript'), fn:toggleTranscribe});
+ items.push({ic:'chat', label:'Chat'+(meetChatUnread?(' ('+meetChatUnread+')'):''), fn:toggleMeetChat});
+ items.push({ic:'users', label:'Participants', fn:toggleMeetPanel});
+ items.push({ic:'headphones', label:'Audio devices', fn:()=>openAudioMenu(anchor)});
+ const menu=document.createElement('div'); menu.className='spk-menu';
+ menu.innerHTML=items.map((it,i)=>'').join('');
+ document.body.appendChild(menu);
+ const r=anchor.getBoundingClientRect();
+ menu.style.left=Math.max(8,Math.min(r.left-100, window.innerWidth-menu.offsetWidth-8))+'px';
+ menu.style.top=Math.max(8,(r.top-menu.offsetHeight-10))+'px';
+ menu.querySelectorAll('.mm-opt').forEach(b=>b.onclick=()=>{ const it=items[+b.dataset.i]; menu.remove(); try{ it.fn(); }catch(_){} });
+ const close=(e)=>{ if(!menu.contains(e.target) && !anchor.contains(e.target)){ menu.remove(); document.removeEventListener('mousedown',close); document.removeEventListener('touchstart',close); } };
+ setTimeout(()=>{ document.addEventListener('mousedown',close); document.addEventListener('touchstart',close); },0);
+}
async function setSpeakerDevice(id){
meetSinkId=id||''; try{ localStorage.setItem('bzc_sink', meetSinkId); }catch(_){}
try{ if(SFU.room && SFU.room.switchActiveDevice) await SFU.room.switchActiveDevice('audiooutput', meetSinkId); }catch(_){}
@@ -3443,10 +3512,25 @@ async function setMicDevice(id){
meetPeers.forEach(p=>{ try{ const snd=p.pc.getSenders().find(x=>x.track&&x.track.kind==='audio'); if(snd) snd.replaceTrack(nt); }catch(_){} });
}catch(e){ toast(mediaErrMsg(e,'microphone')); }
}
+// Windows lists the same physical device three times ("Default - X", "Communications - X", "X"). Collapse
+// that into one clean list: a single "System default" entry plus each real device once (#6).
+function cleanDevices(list){
+ const out=[]; const seen=new Set(); let hasDefault=false;
+ for(const d of (list||[])){
+ if(d.deviceId==='communications') continue; // Windows' duplicate "comms" alias
+ if(d.deviceId==='default'){ hasDefault=true; continue; } // folded into the single entry below
+ const label=String(d.label||'').replace(/^\s*(Default|Communications)\s*-\s*/i,'').trim();
+ const key=(d.groupId||d.deviceId||'')+'|'+label.toLowerCase();
+ if(seen.has(key)) continue; seen.add(key);
+ out.push({ deviceId:d.deviceId, label: label||'Device' });
+ }
+ if(hasDefault) out.unshift({ deviceId:'default', label:'System default' });
+ return out;
+}
async function openAudioMenu(anchor){
document.querySelectorAll('.spk-menu').forEach(x=>x.remove());
let outs=[], ins=[];
- try{ const d=await navigator.mediaDevices.enumerateDevices(); outs=d.filter(x=>x.kind==='audiooutput'); ins=d.filter(x=>x.kind==='audioinput'); }catch(_){}
+ try{ const d=await navigator.mediaDevices.enumerateDevices(); outs=cleanDevices(d.filter(x=>x.kind==='audiooutput')); ins=cleanDevices(d.filter(x=>x.kind==='audioinput')); }catch(_){}
const menu=document.createElement('div'); menu.className='spk-menu';
const sel=(id, cur)=> (id===cur || (!cur && (id==='default'||id===''))) ? ' on' : '';
let html='';
@@ -3477,15 +3561,13 @@ async function toggleSpeakerphone(){
const btn=document.getElementById('meetSpkBtn'); if(!btn) return;
meetSpeakerOn=!meetSpeakerOn; try{ localStorage.setItem('bzc_spk', meetSpeakerOn?'1':'0'); }catch(_){}
let outs=[]; try{ outs=(await navigator.mediaDevices.enumerateDevices()).filter(x=>x.kind==='audiooutput'); }catch(_){}
- const bt=outs.find(d=>isBtLabel(d.label));
+ const bt=outs.find(d=>isBtLabel(d.label)); _btConnected=!!bt;
if(meetSpeakerOn){
const spk=outs.find(d=>/speaker/i.test(d.label)) || outs.find(d=>d.deviceId==='default') || outs[0];
if(spk) await setSpeakerDevice(spk.deviceId);
- } else if(bt){ await setSpeakerDevice(bt.deviceId); }
- else { await setSpeakerDevice(''); }
- btn.classList.toggle('off', !meetSpeakerOn);
- btn.innerHTML=ic('headphones',20);
- btn.title=meetSpeakerOn?'Speakerphone on':(bt?('Using '+(bt.label||'headset')):'Speakerphone off');
+ } else if(bt){ await setSpeakerDevice(bt.deviceId); } // speaker off + headset present → route to the headset
+ else { await setSpeakerDevice(''); } // no headset → back to the system default (earpiece on mobile)
+ refreshSpkBtn();
toast(meetSpeakerOn?'Speaker on':(bt?'Using headset':'Speaker off'));
}
function addTile(id, stream, label, muted){
@@ -3531,9 +3613,24 @@ function meetWatchStream(id, stream){
}
function meetUnwatch(id){ const r=meetVU.get(id); if(!r) return; try{cancelAnimationFrame(r.raf);}catch(_){} try{r.src.disconnect();}catch(_){} try{r.ctx.close();}catch(_){} meetVU.delete(id); const t=document.getElementById('meet-tile-'+id); if(t) t.classList.remove('speaking'); }
function meetUnwatchAll(){ for(const id of Array.from(meetVU.keys())) meetUnwatch(id); }
+// #5: the same person showing up as several tiles. Each browser tab / reload / reconnect gets a NEW
+// peerId, so a stale session left a ghost tile behind. One person (uid) = one tile: when a uid reappears
+// on a new peerId, drop their older peer entirely.
+function dropDupPeers(uid, keepPid){
+ if(!uid) return;
+ for(const [pid,u] of [...meetPeerUids]){
+ if(u!==uid || pid===keepPid) continue;
+ const p=meetPeers.get(pid); if(p){ try{ p.pc&&p.pc.close(); }catch(_){} meetPeers.delete(pid); }
+ if(SFU.on){ try{ sfuDropPeer(pid); }catch(_){} }
+ meetSharers.delete(pid); meetPeerUids.delete(pid); meetNames.delete(pid); meetAvatars.delete(pid);
+ removeTile(pid);
+ }
+}
function meetMakePeer(peerId, name){
- // SFU mode: no P2P peer connection — just show the tile (avatar until LiveKit delivers media).
- if(SFU.on){ addTile(peerId, null, meetNames.get(peerId)||name||'Guest', false); return null; }
+ // SFU mode: no P2P peer connection — but we STILL record the peer, otherwise meetPeers stays empty and
+ // the Participants list only ever shows "you" (and the meeting-chat "To" list is empty). pc is null;
+ // every p.pc use is already try/catch-guarded.
+ if(SFU.on){ meetPeers.set(peerId, { pc:null, name, vsender:null }); addTile(peerId, null, meetNames.get(peerId)||name||'Guest', false); return null; }
const pc=new RTCPeerConnection(MEET_ICE);
const entry={ pc, name, vsender:null }; meetPeers.set(peerId, entry);
addTile(peerId, null, meetNames.get(peerId)||name||'Guest', false); // show the tile right away (avatar)
@@ -3707,7 +3804,7 @@ async function onMeetMsg(e){
meetWatchStream('__local', meetLocalStream); // active-speaker detection on my own mic
// Existing peers OFFER to me (their offers carry their tracks incl. any active screen share);
// I just set up the connections and wait. Avoids the "newcomer can't receive screen" bug.
- for(const p of (m.peers||[])){ meetNames.set(p.peerId,p.name); if(p.avatar) meetAvatars.set(p.peerId,p.avatar); if(p.uid){ meetPeerUids.set(p.peerId,p.uid); meetInviteJoined(p.uid); } meetMakePeer(p.peerId,p.name); }
+ for(const p of (m.peers||[])){ meetNames.set(p.peerId,p.name); if(p.avatar) meetAvatars.set(p.peerId,p.avatar); if(p.uid){ meetPeerUids.set(p.peerId,p.uid); meetInviteJoined(p.uid); dropDupPeers(p.uid, p.peerId); } meetMakePeer(p.peerId,p.name); }
if(_dmCallWaiting && !(m.peers&&m.peers.length)) addWaitingTile(_dmCallWaiting.name, _dmCallWaiting.avatar); // #7: show who we're calling while it rings
// SFU: connect to LiveKit for media once (peer uid→peerId map is populated above). Mic/cam are
// off at join, so nothing publishes yet — toggleMic/toggleCam publish on demand.
@@ -3725,7 +3822,7 @@ async function onMeetMsg(e){
if(m.type==='meeting-ended'){ toast(m.reason==='unanswered'?'No answer':'Call ended'); leaveMeeting(true); return; } // 1:1 hangup / host ended / unanswered
if(m.type==='meeting-peer-joined'){
stopRingback(); removeWaitingTile(); _dmCallWaiting=null; // #17/#7: they answered → stop ring + drop the ringing tile
- meetNames.set(m.peerId,m.name); if(m.avatar) meetAvatars.set(m.peerId,m.avatar); if(m.uid){ meetPeerUids.set(m.peerId,m.uid); meetInviteJoined(m.uid); }
+ meetNames.set(m.peerId,m.name); if(m.avatar) meetAvatars.set(m.peerId,m.avatar); if(m.uid){ meetPeerUids.set(m.peerId,m.uid); meetInviteJoined(m.uid); dropDupPeers(m.uid, m.peerId); }
const pc=meetMakePeer(m.peerId,m.name); // I'm an existing peer → I OFFER to the newcomer (carries my screen)
if(pc){ try{ const offer=await pc.createOffer(); await pc.setLocalDescription(offer); meetSend({type:'meeting-signal',to:m.peerId,data:{sdp:pc.localDescription}}); }catch(_){} } // (SFU: LiveKit handles media, no offer)
meetSend({type:'meeting-state', muted:!meetMic, camOff:!meetCam});
@@ -3828,9 +3925,14 @@ let _guestRoom=null;
function renderGuestLeft(){
document.querySelectorAll('.guest-left').forEach(x=>x.remove());
const el=document.createElement('div'); el.className='guest-left';
- el.innerHTML='
'
- +'
You’ve left the meeting
Thanks for joining.
'
- +(_guestRoom?'':'')+'
';
+ el.innerHTML='
'
+ +'
Biz Connect
'
+ +'
'+ic('check',30)+'
'
+ +'
You’ve left the meeting
'
+ +'
Thanks for joining'+((ME&&ME.name)?(', '+pEsc(firstName(ME.name))):'')+'.
'
+ +(_guestRoom?'':'')
+ +'
'+ic('info',13)+' You can close this tab safely.
'
+ +'
';
document.body.appendChild(el);
const rj=el.querySelector('#glRejoin'); if(rj) rj.onclick=()=>{ location.href='/home?meet='+encodeURIComponent(_guestRoom); };
}
diff --git a/server/public/icons.js b/server/public/icons.js
index 22a77ff..bf4ae74 100644
--- a/server/public/icons.js
+++ b/server/public/icons.js
@@ -66,6 +66,10 @@
record: '',
callEnd: '',
settings: '',
+ moreVertical:'',
+ bluetooth: '',
+ speaker: '',
+ speakerOff: '',
};
window.ICON = P;
window.ic = function (name, size) {
diff --git a/server/public/share.html b/server/public/share.html
index df7e8ab..bb05454 100644
--- a/server/public/share.html
+++ b/server/public/share.html
@@ -72,7 +72,7 @@
@keyframes rcpulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.rc-banner button{background:#ef4444;color:#fff;border:none;border-radius:999px;padding:.35rem .8rem;font-size:.8rem;font-weight:700;cursor:pointer;}
-
+
@@ -226,9 +226,22 @@ function stopCustTranscription(){ crecogActive=false; if(crecog){ try{crecog.sto
// after the user explicitly taps "Allow control", and only inside the desktop app. In a plain browser
// there's no OS injection possible, so it stays view-only. The user can stop control at any time.
let rcDesktop=false, rcAllowed=false, rcPrompted=false;
+// Two ways this page runs inside the desktop app:
+// • EMBEDDED in the signed-in app (Share tab iframe) → no direct bridge, relay via the parent frame.
+// • TOP-LEVEL, no login (the landing page's "Share my screen") → the preload bridge is right here.
+// The second case is the whole point of a support tool (the customer isn't a Connect user), and it was
+// broken: we only ever postMessage'd to a parent that didn't exist, so control never armed. #1
+const rcNative=(window.bizConnectNative && typeof window.bizConnectNative.rcAvailable==='function') ? window.bizConnectNative : null;
+if(rcNative){ try{ rcDesktop=!!rcNative.rcAvailable(); }catch(_){ rcDesktop=false; } }
try{ window.addEventListener('message',(e)=>{ if(e.origin!==location.origin) return; const d=e.data||{}; if(d.type==='rc-pong'){ rcDesktop=!!d.desktop; try{ updateRcBtn(); }catch(_){} } }); }catch(_){}
-try{ if(window.parent && window.parent!==window) window.parent.postMessage({type:'rc-ping'}, location.origin); }catch(_){}
-function rcPost(msg){ try{ if(window.parent && window.parent!==window) window.parent.postMessage(msg, location.origin); }catch(_){} }
+try{ if(!rcNative && window.parent && window.parent!==window) window.parent.postMessage({type:'rc-ping'}, location.origin); }catch(_){}
+function rcPost(msg){
+ if(rcNative){
+ try{ if(msg.type==='rc-arm') rcNative.rcArm(!!msg.on); else if(msg.type==='rc-input') rcNative.rcInput(msg.evt); }catch(_){}
+ return;
+ }
+ try{ if(window.parent && window.parent!==window) window.parent.postMessage(msg, location.origin); }catch(_){}
+}
function rcOnInput(data){
let evt; try{ evt=JSON.parse(data); }catch(_){ return; }
if(rcAllowed){ rcPost({type:'rc-input', evt}); return; }
@@ -304,16 +317,18 @@ function buildBar(){
if(document.getElementById('sessionBar'))return;
const bar=document.createElement('div'); bar.id='sessionBar';
bar.style.cssText='position:fixed;right:18px;bottom:18px;z-index:2147483000;display:flex;gap:10px;align-items:center;background:rgba(15,23,42,.94);padding:8px 12px;border-radius:16px;box-shadow:0 10px 28px rgba(0,0,0,.35)';
- const mic=_btn('micBtn',SVG_MICOFF,'Muted','#6b7280');
+ // #2: use the shared Lucide icon set (ic) — the bar was still on the old hand-rolled SVGs.
+ const I=(n,s)=>(window.ic?window.ic(n,s||18):'');
+ const mic=_btn('micBtn',I('micOff'),'Muted','#6b7280');
// Remote-control access, right next to mic/chat, so the customer can see AND flip it at a glance.
- const rcb=_btn('rcBtn',(window.ic?window.ic('monitor',18):''),'Remote control is OFF','#6b7280');
- const chat=_btn('chatBtn',SVG_CHAT,'Chat','#475569');
- const end=_btn('endBtn2',SVG_END,'End','#dc2626');
+ const rcb=_btn('rcBtn',I('monitor'),'Remote control is OFF','#6b7280');
+ const chat=_btn('chatBtn',I('chat'),'Chat','#475569');
+ const end=_btn('endBtn2',I('callEnd'),'End','#dc2626');
bar.appendChild(mic);bar.appendChild(rcb);bar.appendChild(chat);bar.appendChild(end);
document.body.appendChild(bar);
rcb.onclick=()=>{ if(rcAllowed) rcStopControl(); else rcGrantControl(); };
updateRcBtn();
- const setMic=(on)=>{mic.title=on?'Mute':'Unmute';mic.innerHTML=''+(on?SVG_MIC:SVG_MICOFF)+'';mic.style.background=on?'#2563eb':'#6b7280';};
+ const setMic=(on)=>{mic.title=on?'Mute':'Unmute';mic.innerHTML=''+I(on?'mic':'micOff')+'';mic.style.background=on?'#2563eb':'#6b7280';};
mic.onclick=async()=>{
if(!window.__mic){
// First unmute: NOW request mic permission, add the track, and renegotiate.
'
- +'