Update app.js

app.js

@@ -301,6 +301,7 @@ async function doLogin() {
 async function doLogout() {
   if (!currentUser) return;
   saveSession(null);
+  if (voiceActive) await leaveVoice();
   dbDelete(`online/${currentUser.username}`);
   if (voiceActive) leaveVoice();
   clearInterval(pollTimer);
@@ -323,6 +324,7 @@ async function launchApp() {
   }
   updateTopbar();
   buildChannelList();
+  restoreVoiceState();
   openChannel('allgemein');
   startPolling();
 }
@@ -404,34 +406,38 @@ async function pollTick() {
     }
   }
 
-  // Abgelaufene Voice-Einträge aufräumen
+  // Abgelaufene Voice-Einträge aufräumen (20s Timeout)
   for (const [vcId, parts] of Object.entries(DB.voice||{})) {
     for (const [uname, data] of Object.entries(parts||{})) {
-      if (now-(data.ts||0) > 12000) dbDelete(`voice/${vcId}/${uname}`);
+      if (now-(data.ts||0) > 20000) {
+        delete DB.voice[vcId][uname];
+      }
     }
   }
+
+  // Voice: neue User im Channel erkennen und anrufen
+  voicePollConnect();
+
+  // Voice-Heartbeat: eigenen Eintrag aktuell halten
+  if (voiceActive && voiceChannel && DB.voice?.[voiceChannel]?.[currentUser.username]) {
+    DB.voice[voiceChannel][currentUser.username].ts = now;
+  }
+
   buildChannelList();
 }
 
 // ─── SYNC STATUS INDICATOR ────────────────────────────────────
-function setSyncStatus(state) {
-  let el = document.getElementById('sync-dot');
-  if (!el) {
-    el = document.createElement('div');
-    el.id = 'sync-dot';
-    el.style.cssText = 'position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:9999;font-family:Orbitron,monospace;font-size:.55rem;letter-spacing:.12em;padding:3px 10px;background:rgba(5,10,15,0.9);border-radius:2px;border:1px solid;transition:all .3s;pointer-events:none';
-    document.body.appendChild(el);
-  }
-  if (state==='sync') {
-    el.textContent='⟳ SYNC...';
-    el.style.borderColor='rgba(0,212,255,0.3)';
-    el.style.color='var(--muted)';
-    el.style.opacity='1';
-  } else {
-    el.textContent='● LIVE';
-    el.style.borderColor='rgba(78,255,145,0.3)';
-    el.style.color='var(--green)';
-    setTimeout(()=>{ if(el) el.style.opacity='0'; }, 1500);
+function setSyncStatus(state) { /* deaktiviert – keine störende Animation */ }
+
+function restoreVoiceState() {
+  const vcNames = {'voice-allgemein':'Allgemein','voice-gaming':'Gaming','voice-musik':'Musik'};
+  for (const [vcId, parts] of Object.entries(DB.voice||{})) {
+    if (parts?.[currentUser.username]) {
+      // Nach Reload: Voice neu joinen (stellt PeerJS-Verbindung wieder her)
+      const name = vcNames[vcId] || vcId;
+      joinVoice(vcId, name);
+      break;
+    }
   }
 }
 
@@ -719,42 +725,224 @@ function updateBadge(id,count) {
   else el.style.display='none';
 }
 
-// ─── VOICE ────────────────────────────────────────────────────
-function joinVoice(vcId,vcName) {
-  if (voiceActive&&voiceChannel===vcId) { leaveVoice(); return; }
-  if (voiceActive) leaveVoice();
-  voiceActive=true; voiceChannel=vcId; micMuted=false; deafened=false;
-  if (!DB.voice[vcId]) DB.voice[vcId]={};
-  dbSet(`voice/${vcId}/${currentUser.username}`,{name:currentUser.username,muted:false,ts:Date.now()});
-  document.getElementById('voice-panel').classList.add('active');
-  document.getElementById('voice-channel-name').textContent='🔊 '+vcName;
-  document.getElementById('voice-mute-btn').textContent='🎙 Stumm';
-  document.getElementById('voice-deaf-btn').textContent='🔔 Taub';
-  document.getElementById('voice-mute-btn').classList.remove('active');
-  document.getElementById('voice-deaf-btn').classList.remove('active');
-  buildChannelList();
-  showToast(`🔊 Beigetreten: ${vcName}`,'var(--green)');
+// ═══════════════════════════════════════════════════════════════
+// REAL VOICE — WebRTC via PeerJS
+// ═══════════════════════════════════════════════════════════════
+let myPeer        = null;   // PeerJS-Instanz
+let localStream   = null;   // Mikrofon-Stream
+let activeCalls   = {};     // { peerId: Call }
+let activeAudios  = {};     // { peerId: <audio> }
+
+// Peer-ID aus Username + Channel deterministisch ableiten
+// (damit man nach Reload reconnecten kann)
+function makePeerId(username, vcId) {
+  // PeerJS IDs dürfen nur alphanumeric + - _ sein
+  const safe = (username + '__' + vcId).replace(/[^a-zA-Z0-9_-]/g, '_');
+  return 'nc__' + safe;
 }
-function leaveVoice() {
+
+async function joinVoice(vcId, vcName) {
+  if (voiceActive && voiceChannel === vcId) { leaveVoice(); return; }
+  if (voiceActive) await leaveVoice();
+
+  // Mikrofon anfordern
+  try {
+    localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
+  } catch(e) {
+    showToast('🎙 Mikrofon-Zugriff verweigert!', 'var(--danger)');
+    return;
+  }
+
+  voiceActive = true;
+  voiceChannel = vcId;
+  micMuted = false;
+  deafened = false;
+
+  const peerId = makePeerId(currentUser.username, vcId);
+
+  // Alten Peer aufräumen falls vorhanden
+  if (myPeer && !myPeer.destroyed) {
+    myPeer.destroy();
+    myPeer = null;
+  }
+
+  // PeerJS initialisieren
+  myPeer = new Peer(peerId, {
+    host: 'peerjs-server.netlify.app',  // kostenloser public PeerJS server
+    secure: true,
+    path: '/',
+    debug: 0,
+    config: {
+      iceServers: [
+        { urls: 'stun:stun.l.google.com:19302' },
+        { urls: 'stun:stun1.l.google.com:19302' },
+      ]
+    }
+  });
+
+  myPeer.on('open', (id) => {
+    console.log('[Voice] Peer offen:', id);
+    // In DB eintragen
+    if (!DB.voice[vcId]) DB.voice[vcId] = {};
+    DB.voice[vcId][currentUser.username] = {
+      name: currentUser.username,
+      peerId: id,
+      muted: false,
+      ts: Date.now()
+    };
+    apiSave();
+
+    // Mit allen anderen im Channel verbinden
+    const others = Object.entries(DB.voice[vcId] || {})
+      .filter(([uname]) => uname !== currentUser.username);
+    for (const [uname, data] of others) {
+      if (data.peerId) callPeer(data.peerId);
+    }
+
+    // Panel anzeigen
+    document.getElementById('voice-panel').classList.add('active');
+    document.getElementById('voice-channel-name').textContent = '🔊 ' + vcName;
+    document.getElementById('voice-mute-btn').textContent = '🎙 Stumm';
+    document.getElementById('voice-deaf-btn').textContent = '🔔 Taub';
+    document.getElementById('voice-mute-btn').classList.remove('active');
+    document.getElementById('voice-deaf-btn').classList.remove('active');
+    buildChannelList();
+    showToast(`🔊 Beigetreten: ${vcName}`, 'var(--green)');
+  });
+
+  // Eingehende Anrufe entgegennehmen
+  myPeer.on('call', (call) => {
+    call.answer(localStream);
+    handleCallStream(call);
+  });
+
+  myPeer.on('error', (err) => {
+    // ID bereits vergeben → mit Suffix nochmal versuchen
+    if (err.type === 'unavailable-id') {
+      console.warn('[Voice] Peer-ID besetzt, versuche disconnect...');
+      // Alten Eintrag löschen und nochmal joinen
+      if (DB.voice?.[vcId]?.[currentUser.username]) {
+        delete DB.voice[vcId][currentUser.username];
+        apiSave();
+      }
+      setTimeout(() => joinVoice(vcId, vcName), 1500);
+    } else {
+      console.warn('[Voice] Peer-Fehler:', err.type, err.message);
+      showToast('🔊 Voice-Fehler: ' + err.type, 'var(--warn)');
+    }
+  });
+
+  myPeer.on('disconnected', () => {
+    if (voiceActive) myPeer.reconnect();
+  });
+}
+
+function callPeer(remotePeerId) {
+  if (!localStream || !myPeer || activeCalls[remotePeerId]) return;
+  console.log('[Voice] Rufe an:', remotePeerId);
+  const call = myPeer.call(remotePeerId, localStream);
+  if (!call) return;
+  handleCallStream(call);
+}
+
+function handleCallStream(call) {
+  activeCalls[call.peer] = call;
+  call.on('stream', (remoteStream) => {
+    if (activeAudios[call.peer]) {
+      activeAudios[call.peer].srcObject = remoteStream;
+      return;
+    }
+    const audio = document.createElement('audio');
+    audio.autoplay = true;
+    audio.srcObject = remoteStream;
+    document.body.appendChild(audio);
+    activeAudios[call.peer] = audio;
+    console.log('[Voice] Stream von:', call.peer);
+  });
+  call.on('close', () => {
+    cleanupPeer(call.peer);
+  });
+  call.on('error', (e) => {
+    console.warn('[Voice] Call-Fehler:', e);
+    cleanupPeer(call.peer);
+  });
+}
+
+function cleanupPeer(peerId) {
+  if (activeCalls[peerId]) { try { activeCalls[peerId].close(); } catch {} delete activeCalls[peerId]; }
+  if (activeAudios[peerId]) { activeAudios[peerId].remove(); delete activeAudios[peerId]; }
+}
+
+async function leaveVoice() {
   if (!voiceActive) return;
-  dbDelete(`voice/${voiceChannel}/${currentUser.username}`);
-  voiceActive=false; voiceChannel=null;
+  const ch = voiceChannel;
+  voiceActive = false;
+  voiceChannel = null;
+
+  // Alle Calls beenden
+  for (const pid of Object.keys(activeCalls)) cleanupPeer(pid);
+  activeCalls = {};
+
+  // Mikrofon stoppen
+  if (localStream) {
+    localStream.getTracks().forEach(t => t.stop());
+    localStream = null;
+  }
+
+  // Peer zerstören
+  if (myPeer && !myPeer.destroyed) {
+    myPeer.destroy();
+    myPeer = null;
+  }
+
+  // DB-Eintrag entfernen
+  if (DB.voice?.[ch]?.[currentUser.username]) {
+    delete DB.voice[ch][currentUser.username];
+    apiSave();
+  }
+
   document.getElementById('voice-panel').classList.remove('active');
   buildChannelList();
-  showToast('Voice verlassen','var(--muted)');
+  showToast('Voice verlassen', 'var(--muted)');
 }
+
 function toggleMute() {
-  micMuted=!micMuted;
-  const btn=document.getElementById('voice-mute-btn');
-  btn.textContent=micMuted?'🔇 Stumm':'🎙 Stumm';
-  btn.classList.toggle('active',micMuted);
-  if (voiceActive) dbSet(`voice/${voiceChannel}/${currentUser.username}/muted`,micMuted);
+  micMuted = !micMuted;
+  const btn = document.getElementById('voice-mute-btn');
+  btn.textContent = micMuted ? '🔇 Stumm' : '🎙 Stumm';
+  btn.classList.toggle('active', micMuted);
+  // Mikrofon-Track stumm/laut schalten
+  if (localStream) {
+    localStream.getAudioTracks().forEach(t => { t.enabled = !micMuted; });
+  }
+  if (voiceActive && DB.voice?.[voiceChannel]?.[currentUser.username]) {
+    DB.voice[voiceChannel][currentUser.username].muted = micMuted;
+    DB.voice[voiceChannel][currentUser.username].ts = Date.now();
+    apiSave();
+  }
 }
+
 function toggleDeafen() {
-  deafened=!deafened;
-  const btn=document.getElementById('voice-deaf-btn');
-  btn.textContent=deafened?'🔕 Taub':'🔔 Taub';
-  btn.classList.toggle('active',deafened);
+  deafened = !deafened;
+  const btn = document.getElementById('voice-deaf-btn');
+  btn.textContent = deafened ? '🔕 Taub' : '🔔 Taub';
+  btn.classList.toggle('active', deafened);
+  // Alle eingehenden Audios stumm/laut schalten
+  for (const audio of Object.values(activeAudios)) {
+    audio.muted = deafened;
+  }
+}
+
+// Im Poll-Tick: neue User im Channel erkennen und anrufen
+function voicePollConnect() {
+  if (!voiceActive || !voiceChannel || !myPeer || myPeer.disconnected) return;
+  const others = Object.entries(DB.voice[voiceChannel] || {})
+    .filter(([uname]) => uname !== currentUser.username);
+  for (const [uname, data] of others) {
+    if (data.peerId && !activeCalls[data.peerId]) {
+      callPeer(data.peerId);
+    }
+  }
 }
 
 // ─── USER LIST ────────────────────────────────────────────────