mats/gibbz
1
0 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Show users in voice channels before joining
Build and Publish / Metadata (push) Successful in 1s
Details
Build and Publish / BuildAndDeployAmd64 (push) Successful in 24s
Details

Browse Source
This commit is contained in:
mats committed 2026-09-22 10:45:08 +02:00
1 parent a29bd58b0c
commit dee8ef4f7c
3 files changed
+185 -82
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/app.js
+139 -79
View File
@@ -27,6 +27,7 @@ const S = {
connecting: false,
pingTimer: null,
reconnect: { room: null, attempt: 0, timer: null, countdownTimer: null },
channelRosters: {}, // roomId -> [snapshot]
};
window.__dbg = S; // POC debug handle
@@ -116,6 +117,20 @@ async function fetchIce() {
return res.json();
}
async function fetchRooms() {
try {
const headers = window.rum && typeof window.rum.traceHeaders === 'function' ? window.rum.traceHeaders() : {};
const res = await fetch('/api/rooms', { headers });
if (res.ok) {
S.channelRosters = await res.json();
renderTiles();
renderChannelCounts();
}
} catch (err) {
console.warn('fetchRooms failed', err);
}
}
function leaveVoice(reason) {
if (!S.room && !S.ws) return;
if (S.sharing) stopScreenShare(true);
@@ -135,6 +150,7 @@ function leaveVoice(reason) {
updateDeafenButton();
renderAll();
setStatus(reason || 'not connected');
fetchRooms();
}
function setStatus(text, state = '') {
@@ -264,6 +280,12 @@ function send(msg) {
function handleSignal(msg) {
switch (msg.type) {
case 'rosters': {
S.channelRosters = msg.rooms || {};
renderTiles();
renderChannelCounts();
break;
}
case 'hello': {
S.myId = msg.id;
S.room = msg.room;
@@ -628,10 +650,17 @@ function renderStageEmpty() {
function renderChannelCounts() {
const counts = {};
for (const p of S.peers.values()) counts[S.room] = (counts[S.room] || 0) + 1;
// Count users across all rooms known from snapshot
for (const [rId, users] of Object.entries(S.channelRosters || {})) {
counts[rId] = users ? users.length : 0;
}
// If active room has peers, ensure active count includes me + peers
if (S.room) {
counts[S.room] = S.peers.size + 1;
}
document.querySelectorAll('[data-room-count]').forEach((el) => {
const n = counts[el.dataset.roomCount] || 0;
el.textContent = n ? `${n + (el.dataset.roomCount === S.room ? 1 : 0)}` : '';
el.textContent = n ? `${n}` : '';
});
}
@@ -639,87 +668,108 @@ function renderTiles() {
// Clear any existing user rosters in voice channels
document.querySelectorAll('.channel-users').forEach((el) => { el.innerHTML = ''; });
if (!S.room) {
renderStageEmpty();
return;
}
// For each voice channel element in the sidebar
document.querySelectorAll('.channel.voice').forEach((channelEl) => {
const roomId = channelEl.dataset.room;
if (!roomId) return;
const activeChannelEl = document.querySelector(`.channel.voice[data-room="${S.room}"]`);
if (!activeChannelEl) {
renderStageEmpty();
return;
}
let roster = activeChannelEl.nextElementSibling;
if (!roster || !roster.classList.contains('channel-users')) {
roster = document.createElement('div');
roster.className = 'channel-users';
activeChannelEl.after(roster);
}
// Render "Me" first
const meItem = document.createElement('div');
meItem.className = 'channel-user-item' + (els.meAvatar.classList.contains('speaking') ? ' speaking' : '');
const meAv = document.createElement('div');
meAv.className = 'avatar user-line-avatar';
setAvatar(meAv, S.name, S.myId || 'me');
const meName = document.createElement('span');
meName.className = 'user-line-name';
meName.textContent = `${S.name} (you)`;
const meBadges = document.createElement('span');
meBadges.className = 'user-line-badges';
if (S.muted) meBadges.innerHTML += '<span class="badge-mute" title="Muted">&#127908;&#65039;&#8205;&#10060;</span>';
if (S.deafened) meBadges.innerHTML += '<span class="badge-deafen" title="Deafened">&#128066;&#10060;</span>';
if (S.sharing) meBadges.innerHTML += '<span class="badge-share" title="Sharing screen">&#128421;&#65039;</span>';
meItem.append(meAv, meName, meBadges);
roster.appendChild(meItem);
// Render Peers
for (const peer of S.peers.values()) {
const item = document.createElement('div');
item.className = 'channel-user-item' + (peer.speaking ? ' speaking' : '');
const av = document.createElement('div');
av.className = 'avatar user-line-avatar';
setAvatar(av, peer.name, peer.id);
const name = document.createElement('span');
name.className = 'user-line-name';
name.textContent = peer.name;
const badges = document.createElement('span');
badges.className = 'user-line-badges';
if (!peer.pc || peer.pc.connectionState !== 'connected') {
badges.innerHTML += '<span class="badge-conn" title="Connecting...">…</span>';
let roster = channelEl.nextElementSibling;
if (!roster || !roster.classList.contains('channel-users')) {
roster = document.createElement('div');
roster.className = 'channel-users';
channelEl.after(roster);
}
if (peer.state.muted) badges.innerHTML += '<span class="badge-mute" title="Muted">&#127908;&#65039;&#8205;&#10060;</span>';
if (peer.state.sharing) badges.innerHTML += '<span class="badge-share" title="Sharing screen">&#128421;&#65039;</span>';
// Volume hover popup
const volPop = document.createElement('div');
volPop.className = 'volume-popup';
const volLabel = document.createElement('div');
volLabel.className = 'vol-title';
volLabel.textContent = `User Volume: ${Math.round(peer.vol * 100)}%`;
const volInput = document.createElement('input');
volInput.type = 'range';
volInput.min = 0;
volInput.max = 2;
volInput.step = 0.05;
volInput.value = peer.vol;
volInput.oninput = (e) => {
e.stopPropagation();
peer.vol = Number(volInput.value);
volLabel.textContent = `User Volume: ${Math.round(peer.vol * 100)}%`;
if (peer.gain && !S.deafened) peer.gain.gain.value = peer.vol;
};
volPop.append(volLabel, volInput);
if (S.room && S.room === roomId) {
// Current active room: render Me + live peers (with interactive volume sliders)
const meItem = document.createElement('div');
meItem.className = 'channel-user-item' + (els.meAvatar.classList.contains('speaking') ? ' speaking' : '');
const meAv = document.createElement('div');
meAv.className = 'avatar user-line-avatar';
setAvatar(meAv, S.name, S.myId || 'me');
const meName = document.createElement('span');
meName.className = 'user-line-name';
meName.textContent = `${S.name} (you)`;
item.append(av, name, badges, volPop);
roster.appendChild(item);
}
const meBadges = document.createElement('span');
meBadges.className = 'user-line-badges';
if (S.muted) meBadges.innerHTML += '<span class="badge-mute" title="Muted">&#127908;&#65039;&#8205;&#10060;</span>';
if (S.deafened) meBadges.innerHTML += '<span class="badge-deafen" title="Deafened">&#128066;&#10060;</span>';
if (S.sharing) meBadges.innerHTML += '<span class="badge-share" title="Sharing screen">&#128421;&#65039;</span>';
meItem.append(meAv, meName, meBadges);
roster.appendChild(meItem);
for (const peer of S.peers.values()) {
const item = document.createElement('div');
item.className = 'channel-user-item' + (peer.speaking ? ' speaking' : '');
const av = document.createElement('div');
av.className = 'avatar user-line-avatar';
setAvatar(av, peer.name, peer.id);
const name = document.createElement('span');
name.className = 'user-line-name';
name.textContent = peer.name;
const badges = document.createElement('span');
badges.className = 'user-line-badges';
if (!peer.pc || peer.pc.connectionState !== 'connected') {
badges.innerHTML += '<span class="badge-conn" title="Connecting...">…</span>';
}
if (peer.state.muted) badges.innerHTML += '<span class="badge-mute" title="Muted">&#127908;&#65039;&#8205;&#10060;</span>';
if (peer.state.sharing) badges.innerHTML += '<span class="badge-share" title="Sharing screen">&#128421;&#65039;</span>';
// Volume hover popup
const volPop = document.createElement('div');
volPop.className = 'volume-popup';
const volLabel = document.createElement('div');
volLabel.className = 'vol-title';
volLabel.textContent = `User Volume: ${Math.round(peer.vol * 100)}%`;
const volInput = document.createElement('input');
volInput.type = 'range';
volInput.min = 0;
volInput.max = 2;
volInput.step = 0.05;
volInput.value = peer.vol;
volInput.oninput = (e) => {
e.stopPropagation();
peer.vol = Number(volInput.value);
volLabel.textContent = `User Volume: ${Math.round(peer.vol * 100)}%`;
if (peer.gain && !S.deafened) peer.gain.gain.value = peer.vol;
};
volPop.append(volLabel, volInput);
item.append(av, name, badges, volPop);
roster.appendChild(item);
}
} else {
// Remote / unjoined channel: render users from server roster snapshot
const occupants = S.channelRosters && S.channelRosters[roomId];
if (Array.isArray(occupants) && occupants.length > 0) {
for (const user of occupants) {
const item = document.createElement('div');
item.className = 'channel-user-item';
const av = document.createElement('div');
av.className = 'avatar user-line-avatar';
setAvatar(av, user.name, user.id);
const name = document.createElement('span');
name.className = 'user-line-name';
name.textContent = user.name;
const badges = document.createElement('span');
badges.className = 'user-line-badges';
if (user.state?.muted) badges.innerHTML += '<span class="badge-mute" title="Muted">&#127908;&#65039;&#8205;&#10060;</span>';
if (user.state?.sharing) badges.innerHTML += '<span class="badge-share" title="Sharing screen">&#128421;&#65039;</span>';
item.append(av, name, badges);
roster.appendChild(item);
}
}
}
});
renderStageEmpty();
}
@@ -1200,6 +1250,16 @@ document.querySelectorAll('.channel.voice').forEach((el) => {
});
};
});
// Initial roster fetch and lightweight periodic sync (especially for unjoined clients)
fetchRooms();
setInterval(() => {
// If not connected to websocket, poll for changes across rooms
if (!S.ws || S.ws.readyState !== 1) {
fetchRooms();
}
}, 5000);
// spawn me somewhere spread out, not dead-center on top of others
(() => {
let h = 0;