update emoji picker and id saving logic
This commit is contained in:
parent
d5b16a6105
commit
48a7b54675
@ -100,6 +100,7 @@ class AppState {
|
||||
this.peerConnections = {};
|
||||
this.lastSaveTime = 0;
|
||||
this.currentUsername = null;
|
||||
this.currentId = null;
|
||||
this.isMuted = false;
|
||||
this.isDeafened = false;
|
||||
this.isInVoiceChat = false;
|
||||
@ -125,6 +126,7 @@ class AppState {
|
||||
try {
|
||||
const saveState = {
|
||||
currentUsername: this.currentUsername,
|
||||
currentId: this.currentId,
|
||||
isMuted: this.isMuted,
|
||||
isDeafened: this.isDeafened,
|
||||
mutedUsers: Array.from(this.mutedUsers),
|
||||
@ -145,6 +147,7 @@ class AppState {
|
||||
if (savedState) {
|
||||
const appState = JSON.parse(savedState);
|
||||
this.currentUsername = appState.currentUsername || null;
|
||||
this.currentId = appState.currentId || "";
|
||||
this.isMuted = appState.isMuted || false;
|
||||
this.isDeafened = appState.isDeafened || false;
|
||||
this.micVolume = appState.micVolume || CONFIG.MEDIA.MAX_VOLUME;
|
||||
@ -225,7 +228,7 @@ class Utils {
|
||||
}
|
||||
static getWebSocketUrl() {
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
let clientId = (localStorage.getItem('client_id') || '').trim();
|
||||
let clientId = (state.currentId || '').trim();
|
||||
console.log("🔑 Telling backend to use client id:", clientId);
|
||||
return `${protocol}//${window.location.host}/ws?client_id=${encodeURIComponent(clientId)}`;
|
||||
}
|
||||
@ -432,14 +435,18 @@ class UIManager {
|
||||
emojiPicker.style.gridTemplateColumns = 'repeat(auto-fill, minmax(3rem, 1fr))';
|
||||
emojiPicker.style.gap = '0.5rem';
|
||||
emojiPicker.style.position = 'absolute';
|
||||
emojiPicker.style.bottom = '1rem';
|
||||
emojiPicker.style.right = '1rem';
|
||||
emojiPicker.style.width = '30rem';
|
||||
emojiPicker.style.height = '10rem';
|
||||
emojiPicker.style.overflowY = 'scroll';
|
||||
emojiPicker.style.overflowX = 'hidden';
|
||||
emojiPicker.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.1)";
|
||||
|
||||
const chatRect = chatSection.getBoundingClientRect();
|
||||
const btnRect = emojiBtn.getBoundingClientRect();
|
||||
|
||||
emojiPicker.style.bottom = '1rem';
|
||||
emojiPicker.style.right = '1rem';
|
||||
|
||||
// Add emojis to the picker
|
||||
EMOJIS.forEach(emoji => {
|
||||
const emojiSpan = document.createElement('span');
|
||||
@ -645,7 +652,7 @@ class AudioManager {
|
||||
console.log('🎤 AudioContext for analysis, state:', audioContext.state);
|
||||
const analyser = audioContext.createAnalyser();
|
||||
|
||||
// Connect analyser to the gain node if available, otherwise directly to source
|
||||
// Connect analyzer to the gain node if available, otherwise directly to source
|
||||
if (state.micGainNode) {
|
||||
state.micGainNode.connect(analyser);
|
||||
console.log('🎤 Connected analyser to gain node');
|
||||
@ -814,7 +821,8 @@ class WebSocketManager {
|
||||
switch (message.type) {
|
||||
case 'client_id':
|
||||
console.log('🔑 Client ID received:', message.clientId);
|
||||
localStorage.setItem('client_id', message.clientId);
|
||||
state.currentId = message.clientId;
|
||||
state.save();
|
||||
case 'users_list':
|
||||
console.log('🔵 This is a users_list message with data:', message.data);
|
||||
UserManager.updateUsersList(message.data);
|
||||
@ -1576,14 +1584,14 @@ class ModalManager {
|
||||
const modalBody = modal.querySelector('.modal-body');
|
||||
modalBody.innerHTML = `
|
||||
<div class="control-section">
|
||||
<label>Username</label>
|
||||
<h1>Username</h1>
|
||||
<div class="modal-username">
|
||||
<input type="text" id="modal-username-input" placeholder="Enter your username" value="${state.currentUsername}"></input>
|
||||
<input type="button" value="Apply" class="control-btn secondary" onclick="UserManager.setUsername()"></input>
|
||||
</div >
|
||||
</div>
|
||||
<div class="control-section">
|
||||
<label>Microphone Volume</label>
|
||||
<h1>Microphone Volume</h1>
|
||||
<div class="volume-control">
|
||||
<span>🎤</span>
|
||||
<input type="range" id="mic-volume-slider" min="0" max="100" value="${state.micVolume}" oninput="VoiceControls.updateMicVolume()">
|
||||
@ -1592,7 +1600,7 @@ class ModalManager {
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-section">
|
||||
<label>Headphone Volume (All Incoming)</label>
|
||||
<h1>Headphone Volume (All Incoming)</h1>
|
||||
<div class="volume-control">
|
||||
<span>🔇</span>
|
||||
<input type="range" id="headphone-volume-slider" min="0" max="100" value=${state.headphoneVolume} oninput="VoiceControls.updateHeadphoneVolume()">
|
||||
@ -1601,7 +1609,7 @@ class ModalManager {
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-section">
|
||||
<label>Audio Controls</label>
|
||||
<h1>Audio Controls</h1>
|
||||
<div class="audio-controls">
|
||||
<button onclick="VoiceControls.resetAllVolumes()" class="control-btn secondary">
|
||||
🔄 Reset All Volumes
|
||||
@ -1633,14 +1641,14 @@ class ModalManager {
|
||||
const modalBody = modal.querySelector('.modal-body');
|
||||
modalBody.innerHTML = `
|
||||
<div class="control-section">
|
||||
<label>Volume Control</label>
|
||||
<h1>Volume Control</h1>
|
||||
<div class="volume-control">
|
||||
<span>🔇</span>
|
||||
<input type="range" id="user-volume-slider" min="0" max="100" value="100" oninput="ModalManager.updateUserVolume()">
|
||||
<span>🔊</span>
|
||||
<span id="volume-percentage">100%</span>
|
||||
</div>
|
||||
<label>Audio Controls</label>
|
||||
<h1>Audio Controls</h1>
|
||||
<div class="audio-controls">
|
||||
<button id="modal-mute-btn" onclick="ModalManager.toggleUserMuteFromModal()" class="control-btn">
|
||||
🔇 Mute User
|
||||
@ -1959,7 +1967,6 @@ for (let { event, target } of [
|
||||
// ================== DE-INITIALIZATION ===================
|
||||
for (let { event, target } of [
|
||||
{ event: 'beforeunload', target: window },
|
||||
{ event: 'unload', target: window },
|
||||
{ event: 'offline', target: window },
|
||||
{ event: 'blur', target: window },
|
||||
{ event: 'pagehide', target: window },
|
||||
@ -1991,5 +1998,4 @@ window.requestMicrophonePermission = AudioManager.requestMicrophonePermission;
|
||||
window.toggleEmojiPicker = UIManager.toggleEmojiPicker;
|
||||
// Debug functions
|
||||
window.debugVoiceSetup = DebugUtils.debugVoiceSetup;
|
||||
window.fixVoice = DebugUtils.fixVoice;
|
||||
|
||||
window.fixVoice = DebugUtils.fixVoice;
|
||||
@ -125,7 +125,7 @@
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="control-section">
|
||||
<label>Volume Control</label>
|
||||
<h1>Volume Control</h1>
|
||||
<div class="volume-control">
|
||||
<span>🔇</span>
|
||||
<input type="range" id="user-volume-slider" min="0" max="100" value="100" oninput="updateUserVolume()">
|
||||
@ -134,7 +134,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-section">
|
||||
<label>Audio Controls</label>
|
||||
<h1>Audio Controls</h1>
|
||||
<div class="audio-controls">
|
||||
<button id="modal-mute-btn" onclick="toggleUserMuteFromModal()" class="control-btn">
|
||||
🔇 Mute User
|
||||
|
||||
@ -1121,7 +1121,7 @@ button:disabled {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.control-section label {
|
||||
.control-section h1 {
|
||||
display: block;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 500;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user