public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Discord Audio Gateway v4</title>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #5865F2;
            --success: #43b581;
            --danger: #f04747;
            --bg: #36393f;
            --card: #2f3136;
            --text: #ffffff;
            --text-muted: #b9bbbe;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Outfit', sans-serif;
        }

        body {
            background-color: var(--bg);
            color: var(--text);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            background-color: var(--card);
            padding: 2rem;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            width: 100%;
            max-width: 500px;
            text-align: center;
            border: 1px solid rgba(255,255,255,0.05);
        }

        .status-card {
            background: rgba(0,0,0,0.2);
            padding: 1.5rem;
            border-radius: 15px;
            margin-bottom: 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #4f545c;
        }

        .status-indicator.active {
            background-color: var(--success);
            box-shadow: 0 0 15px var(--success);
        }

        .btn {
            padding: 12px 24px;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.2s ease;
            width: 100%;
            font-size: 1rem;
        }

        .btn-primary { background-color: var(--primary); color: white; }
        .btn-success { background-color: var(--success); color: white; }
        .btn-danger { background-color: var(--danger); color: white; }

        .visualizer {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 3px;
            height: 50px;
            margin-top: 10px;
            width: 100%;
        }

        .bar {
            width: 6px;
            background: linear-gradient(to top, var(--primary), #8088f5);
            border-radius: 3px;
            height: 2px;
        }

        #userList {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 1rem;
            text-align: left;
        }

        .user-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            border-radius: 10px;
            background: rgba(255,255,255,0.03);
            border-left: 4px solid transparent;
        }

        .user-item.speaking {
            border-left-color: var(--success);
            background: rgba(67, 181, 129, 0.1);
        }

        .connection-panel {
            gap: 0.75rem;
            text-align: left;
        }

        .field-group {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .field-group label {
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        .field-group select {
            padding: 0.65rem;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.12);
            background: #2f3136;
            color: var(--text);
        }

        .button-row {
            display: flex;
            gap: 0.5rem;
        }

        .voice-status {
            font-size: 0.85rem;
            color: var(--text-muted);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 style="margin-bottom: 0.5rem;">Discord Gateway v4</h1>
        <p style="color: var(--text-muted); font-size: 0.8rem; margin-bottom: 2rem;">Optimized 24kHz Mono Bridge</p>

        <div class="status-card connection-panel">
            <div class="field-group">
                <label for="guildSelect">Guild</label>
                <select id="guildSelect"></select>
            </div>
            <div class="field-group">
                <label for="channelSelect">Voice Channel</label>
                <select id="channelSelect"></select>
            </div>
            <div class="button-row">
                <button id="joinVoiceBtn" class="btn btn-success">Join Channel</button>
                <button id="disconnectVoiceBtn" class="btn btn-danger">Disconnect</button>
            </div>
            <div id="voiceStatusText" class="voice-status">Not connected</div>
        </div>

        <div class="status-card">
            <div style="display: flex; align-items: center; gap: 10px;">
                <div id="statusIndicator" class="status-indicator"></div>
                <span id="statusText">Connecting...</span>
            </div>
            <button id="toggleBtn" class="btn btn-primary">Start Transmitting</button>
            <div class="visualizer" id="visualizer"></div>
        </div>

        <div class="status-card">
            <span id="listenStatus" style="color: var(--text-muted);">Speaker Off</span>
            <button id="listenBtn" class="btn btn-success">Join Listen Channel</button>
        </div>

        <div style="margin-top: 1.5rem;">
            <h3 style="font-size: 0.9rem; color: var(--text-muted); text-align: left; margin-bottom: 10px;">Participants</h3>
            <div id="userList"></div>
        </div>
    </div>

    <script>
        const toggleBtn = document.getElementById('toggleBtn');
        const listenBtn = document.getElementById('listenBtn');
        const statusIndicator = document.getElementById('statusIndicator');
        const statusText = document.getElementById('statusText');
        const listenStatus = document.getElementById('listenStatus');
        const userList = document.getElementById('userList');
        const visualizer = document.getElementById('visualizer');
        const guildSelect = document.getElementById('guildSelect');
        const channelSelect = document.getElementById('channelSelect');
        const joinVoiceBtn = document.getElementById('joinVoiceBtn');
        const disconnectVoiceBtn = document.getElementById('disconnectVoiceBtn');
        const voiceStatusText = document.getElementById('voiceStatusText');

        for (let i = 0; i < 32; i++) {
            const bar = document.createElement('div');
            bar.className = 'bar';
            visualizer.appendChild(bar);
        }
        const bars = document.querySelectorAll('.bar');

        let socket = null;
        let isStreaming = false;
        let isListening = false;
        let audioContextTransmit = null;
        let audioContextListen = null;
        let processor = null;
        let nextStartTime = 0;

        // Optimized settings (1/4 bandwidth compared to 48k Stereo)
        const SAMPLE_RATE = 24000;
        const CHANNELS = 1;
        const NOISE_GATE_THRESHOLD = 0.01;
        const NOISE_GATE_HOLD_FRAMES = 3;
        let noiseGateHold = 0;

        async function apiRequest(url, options = {}) {
            const response = await fetch(url, {
                headers: { 'Content-Type': 'application/json', ...(options.headers || {}) },
                ...options,
            });
            if (!response.ok) {
                const error = await response.json().catch(() => ({ message: response.statusText }));
                throw new Error(error.message || response.statusText);
            }
            return response.json();
        }

        function setVoiceStatus(message, isError = false) {
            voiceStatusText.innerText = message;
            voiceStatusText.style.color = isError ? '#f04747' : 'var(--text-muted)';
        }

        function renderSelect(select, items, placeholder) {
            select.replaceChildren();
            const placeholderOption = document.createElement('option');
            placeholderOption.value = '';
            placeholderOption.textContent = placeholder;
            select.appendChild(placeholderOption);
            for (const item of items) {
                const option = document.createElement('option');
                option.value = item.id;
                option.textContent = item.name;
                select.appendChild(option);
            }
        }

        async function loadGuilds() {
            const guilds = await apiRequest('/api/guilds');
            renderSelect(guildSelect, guilds, 'Select guild');
        }

        async function loadVoiceChannels(guildId) {
            if (!guildId) {
                renderSelect(channelSelect, [], 'Select voice channel');
                return;
            }
            const channels = await apiRequest(`/api/guilds/${guildId}/voice-channels`);
            renderSelect(channelSelect, channels, 'Select voice channel');
        }

        async function refreshVoiceStatus() {
            const status = await apiRequest('/api/status');
            if (status.connected) {
                setVoiceStatus(`Connected to ${status.activeChannelName || status.activeChannelId}`);
            } else if (status.ready) {
                setVoiceStatus('Discord ready. Select a voice channel.');
            } else {
                setVoiceStatus('Discord client is not ready yet.');
            }
        }

        function initWebSocket() {
            if (socket && (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING)) return;
            const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
            socket = new WebSocket(`${wsProtocol}//${window.location.host}/ws`);
            socket.binaryType = 'arraybuffer';

            socket.onopen = () => {
                statusText.innerText = 'Server Connected';
                statusIndicator.classList.add('active');
            };

            socket.onmessage = (event) => {
                if (event.data instanceof ArrayBuffer) {
                    handleIncomingPCM(event.data);
                } else {
                    try {
                        const data = JSON.parse(event.data);
                        if (data.type === 'user_state') updateUserList(data.users);
                    } catch (e) {}
                }
            };

            socket.onclose = () => {
                statusText.innerText = 'Server Offline';
                statusIndicator.classList.remove('active');
                setTimeout(initWebSocket, 2000);
            };
        }

        function updateUserList(users) {
            userList.innerHTML = users.map(user => `
                <div class="user-item ${user.speaking ? 'speaking' : ''}">
                    <img src="${user.avatar}" style="width: 32px; height: 32px; border-radius: 50%;">
                    <div style="flex: 1;">
                        <div style="font-size: 0.85rem; font-weight: 600;">${user.username}</div>
                        <div style="font-size: 0.7rem; color: ${user.speaking ? '#43b581' : '#b9bbbe'};">
                            ${user.speaking ? 'Speaking' : 'Idle'}
                        </div>
                    </div>
                </div>
            `).join('');
        }

        const userTimelines = new Map();

        function handleIncomingPCM(data) {
            if (!isListening || !audioContextListen) return;
            
            // Parse 4-byte hash header
            const headerView = new DataView(data, 0, 4);
            const userIdHash = headerView.getInt32(0, true);
            const audioData = data.slice(4);

            const int16Array = new Int16Array(audioData);
            const float32Array = new Float32Array(int16Array.length);
            for (let i = 0; i < int16Array.length; i++) float32Array[i] = int16Array[i] / 32768;

            const audioBuffer = audioContextListen.createBuffer(CHANNELS, float32Array.length / CHANNELS, SAMPLE_RATE);
            const nowBuffering = audioBuffer.getChannelData(0);
            for (let i = 0; i < audioBuffer.length; i++) nowBuffering[i] = float32Array[i];

            const source = audioContextListen.createBufferSource();
            source.buffer = audioBuffer;
            source.connect(audioContextListen.destination);

            const currentTime = audioContextListen.currentTime;
            let userNextStartTime = userTimelines.get(userIdHash) || 0;
            
            if (userNextStartTime < currentTime) userNextStartTime = currentTime + 0.05;
            source.start(userNextStartTime);
            userNextStartTime += audioBuffer.duration;
            userTimelines.set(userIdHash, userNextStartTime);
        }

        guildSelect.onchange = async () => {
            try {
                await loadVoiceChannels(guildSelect.value);
            } catch (error) {
                setVoiceStatus(error.message, true);
            }
        };

        joinVoiceBtn.onclick = async () => {
            try {
                if (!guildSelect.value || !channelSelect.value) {
                    setVoiceStatus('Select guild and voice channel first.', true);
                    return;
                }
                joinVoiceBtn.disabled = true;
                const status = await apiRequest('/api/connect', {
                    method: 'POST',
                    body: JSON.stringify({ guildId: guildSelect.value, channelId: channelSelect.value }),
                });
                setVoiceStatus(`Connected to ${status.activeChannelName || status.activeChannelId}`);
            } catch (error) {
                setVoiceStatus(error.message, true);
            } finally {
                joinVoiceBtn.disabled = false;
            }
        };

        disconnectVoiceBtn.onclick = async () => {
            try {
                disconnectVoiceBtn.disabled = true;
                await apiRequest('/api/disconnect', { method: 'POST' });
                setVoiceStatus('Disconnected.');
            } catch (error) {
                setVoiceStatus(error.message, true);
            } finally {
                disconnectVoiceBtn.disabled = false;
            }
        };

        toggleBtn.onclick = async () => {
            if (isStreaming) {
                stopStreaming();
            } else {
                await startStreaming();
            }
        };

        function calculateRms(samples) {
            let sum = 0;
            for (let i = 0; i < samples.length; i++) {
                sum += samples[i] * samples[i];
            }
            return Math.sqrt(sum / samples.length);
        }

        async function startStreaming() {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({
                    audio: {
                        echoCancellation: true,
                        noiseSuppression: true,
                        autoGainControl: true,
                        channelCount: 1,
                        sampleRate: SAMPLE_RATE,
                    },
                });
                isStreaming = true;
                toggleBtn.innerText = 'Stop Transmitting';
                toggleBtn.className = 'btn btn-danger';

                audioContextTransmit = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: SAMPLE_RATE });
                const source = audioContextTransmit.createMediaStreamSource(stream);
                
                const analyser = audioContextTransmit.createAnalyser();
                analyser.fftSize = 64;
                source.connect(analyser);
                const dataArray = new Uint8Array(analyser.frequencyBinCount);

                processor = audioContextTransmit.createScriptProcessor(4096, 1, 1);
                source.connect(processor);
                processor.connect(audioContextTransmit.destination);

                processor.onaudioprocess = (e) => {
                    if (!isStreaming || socket.readyState !== WebSocket.OPEN) return;
                    
                    const inputData = e.inputBuffer.getChannelData(0);
                    const rms = calculateRms(inputData);
                    if (rms >= NOISE_GATE_THRESHOLD) {
                        noiseGateHold = NOISE_GATE_HOLD_FRAMES;
                    } else if (noiseGateHold > 0) {
                        noiseGateHold--;
                    }

                    const pcmData = new Int16Array(inputData.length);
                    for (let i = 0; i < inputData.length; i++) {
                        const sample = noiseGateHold > 0 ? inputData[i] : 0;
                        pcmData[i] = Math.max(-1, Math.min(1, sample)) * 32767;
                    }
                    socket.send(pcmData.buffer);

                    analyser.getByteFrequencyData(dataArray);
                    bars.forEach((bar, index) => {
                        const percent = (dataArray[index] / 255) * 100;
                        bar.style.height = `${Math.max(2, percent)}%`;
                    });
                };
            } catch (err) {
                alert('Microphone access denied: ' + err.message);
            }
        }

        function stopStreaming() {
            isStreaming = false;
            noiseGateHold = 0;
            if (processor) processor.disconnect();
            if (audioContextTransmit) audioContextTransmit.close();
            toggleBtn.innerText = 'Start Transmitting';
            toggleBtn.className = 'btn btn-primary';
            bars.forEach(bar => bar.style.height = '2px');
        }

        listenBtn.onclick = () => {
            if (!audioContextListen) audioContextListen = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: SAMPLE_RATE });
            if (isListening) {
                audioContextListen.suspend();
                listenBtn.innerText = 'Join Listen Channel';
                listenStatus.innerText = 'Speaker Off';
                isListening = false;
            } else {
                audioContextListen.resume();
                listenBtn.innerText = 'Stop Listening';
                listenStatus.innerText = 'Listening Live...';
                isListening = true;
            }
        };

        loadGuilds().catch((error) => setVoiceStatus(error.message, true));
        refreshVoiceStatus().catch((error) => setVoiceStatus(error.message, true));
        initWebSocket();
    </script>
</body>
</html>