webRtc/WebApp/client/public/onebyone/connect/connect.js

/**
 * 连接界面逻辑
 * 处理初始连接、创建通话和加入通话的功能
 */

import store from '../store.js';


// 通知函数
function showNotification(message, type = 'info') {
    const notification = document.getElementById('notification');
    const notificationText = document.getElementById('notificationText');

    if (notification && notificationText) {
        notificationText.textContent = message;

        // 清除之前的类
        notification.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 glass px-6 py-3 rounded-full flex items-center gap-3 opacity-0 pointer-events-none transition-all duration-300 z-50 translate-y-[-20px]';

        // 根据类型添加不同的图标
        const iconElement = notification.querySelector('i');
        if (iconElement) {
            iconElement.className = 'fas fa-info-circle text-indigo-400';
            switch (type) {
                case 'success':
                    iconElement.className = 'fas fa-check-circle text-green-400';
                    break;
                case 'error':
                    iconElement.className = 'fas fa-exclamation-circle text-red-400';
                    break;
                case 'warning':
                    iconElement.className = 'fas fa-exclamation-triangle text-yellow-400';
                    break;
            }
        }

        // 显示通知
        notification.classList.remove('opacity-0', 'translate-y-[-20px]');
        notification.classList.add('opacity-100', 'translate-y-0');

        // 3秒后隐藏
        setTimeout(() => {
            notification.classList.remove('opacity-100', 'translate-y-0');
            notification.classList.add('opacity-0', 'translate-y-[-20px]');
        }, 3000);
    }
}

// 加入通话
function joinCall() {
    const connectionId = document.getElementById('connectionIdInput').value.trim();
    if (connectionId) {
        showNotification(`正在加入通话 (${connectionId})`);

        // 保存连接ID到本地存储
        localStorage.setItem('connectionId', connectionId);

        // 跳转到通话界面
        window.location.href = '../index.html';
    } else {
        showNotification('请输入连接ID', 'error');
    }
}

// 创建通话
function createCall() {
    showNotification('正在创建通话...');

    // 生成随机连接ID
    const connectionId = 'conn_' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);

    // 保存连接ID到本地存储
    localStorage.setItem('connectionId', connectionId);

    // 跳转到通话界面
    window.location.href = '../index.html';
}


// 获取所有连接ID
async function getAllConnectionIds() {
    showNotification('正在获取连接ID列表...');
    try {
        const response = await fetch('/signaling/connection-ids');
        if (!response.ok) {
            throw new Error('Failed to fetch connection IDs');
        }
        const data = await response.json();
        displayConnectionIds(data.connectionIds);
    } catch (error) {
        console.error('Error fetching connection IDs:', error);
        showNotification('获取连接ID失败', 'error');
    }
}

// 显示连接ID列表
function displayConnectionIds(connectionIds) {
    const idsContainer = document.getElementById('idsContainer');
    const connectionIdsList = document.getElementById('connectionIdsList');

    if (idsContainer) {
        // 清空容器
        idsContainer.innerHTML = '';

        if (connectionIds.length === 0) {
            idsContainer.innerHTML = '<p class="text-gray-500 text-sm">暂无可用的连接ID</p>';
        } else {
            // 为每个连接ID创建一个元素
            connectionIds.forEach(id => {
                const idElement = document.createElement('div');
                idElement.className = 'flex items-center justify-between p-2 bg-white/5 rounded-lg hover:bg-white/10 cursor-pointer transition-colors';
                idElement.innerHTML = `
                    <span class="text-sm">${id}</span>
                    <button class="text-xs bg-indigo-600 hover:bg-indigo-700 px-2 py-1 rounded" onclick="selectConnectionId('${id}')">选择</button>
                `;
                idsContainer.appendChild(idElement);
            });
        }

        // 显示连接ID列表
        if (connectionIdsList) {
            connectionIdsList.classList.remove('hidden');
        }

        showNotification(`找到 ${connectionIds.length} 个连接ID`);
    }
}

// 选择连接ID
function selectConnectionId(id) {
    const connectionIdInput = document.getElementById('connectionIdInput');
    if (connectionIdInput) {
        connectionIdInput.value = id;
        showNotification(`已选择连接ID: ${id}`);
    }
}

// 绑定事件监听器
function bindEvents() {
    // 连接按钮
    const connectBtn = document.getElementById('connectBtn');
    if (connectBtn) {
        connectBtn.addEventListener('click', joinCall);
    }

    // 创建通话按钮
    const createCallBtn = document.getElementById('createCallBtn');
    if (createCallBtn) {
        createCallBtn.addEventListener('click', createCall);
    }

    // 浏览全部ID按钮
    const browseIdsBtn = document.getElementById('browseIdsBtn');
    if (browseIdsBtn) {
        browseIdsBtn.addEventListener('click', getAllConnectionIds);
    }

    // 输入框回车事件
    const connectionIdInput = document.getElementById('connectionIdInput');
    if (connectionIdInput) {
        connectionIdInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                joinCall();
            }
        });
    }
}

// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', () => {
    bindEvents();

    // 检查本地存储中是否有连接ID
    const savedConnectionId = localStorage.getItem('connectionId');
    if (savedConnectionId) {
        const connectionIdInput = document.getElementById('connectionIdInput');
        if (connectionIdInput) {
            connectionIdInput.value = savedConnectionId;
        }
    }
});

// 导出全局函数
window.showNotification = showNotification;
window.joinCall = joinCall;
window.createCall = createCall;
window.selectConnectionId = selectConnectionId;
window.selectConnectionId = selectConnectionId;