初始化

client/public/onebyone/main.js

@@ -0,0 +1,215 @@
+/**
+ * 主入口文件
+ * 初始化应用，连接各个模块
+ */
+import store from './store.js';
+import UIRenderer from './renderer.js';
+import { showNotification } from './utils.js';
+import chatMessage from './chatmessage.js';
+
+// 全局变量
+let connectionId = "";
+/**
+ * 绑定DOM事件
+ */
+function bindDomEvents() {
+    // 切换侧边栏
+    window.toggleSidebar = function () {
+        chatMessage.toggleSidebar();
+    };
+
+    // 切换麦克风
+    window.toggleMute = function (button) {
+        const state = store.getState();
+        const currentState = state.session.localUser.mediaState.audio;
+        store.updateLocalMedia('audio', !currentState);
+    };
+
+    // 切换视频
+    window.toggleVideo = function (button) {
+        const state = store.getState();
+        const currentState = state.session.localUser.mediaState.video;
+        store.updateLocalMedia('video', !currentState);
+    };
+
+    // 切换本地视频（用于悬停控制）
+    window.toggleLocalVideo = function () {
+        window.toggleVideo();
+    };
+
+    // 切换录屏
+    window.toggleRecording = function (button) {
+        const state = store.getState();
+        const currentState = state.session.localUser.mediaState.recording || false;
+        store.updateLocalMedia('recording', !currentState);
+
+        // 显示录制状态通知
+        if (!currentState) {
+            showNotification('开始录制');
+        } else {
+            showNotification('停止录制');
+        }
+    };
+
+    // 更多选项菜单切换
+    window.toggleMoreOptions = function () {
+        const menu = document.getElementById('moreOptionsMenu');
+        if (menu) {
+            menu.classList.toggle('hidden');
+        }
+    };
+
+    // 切换视频分辨率
+    window.changeResolution = function (width, height) {
+        store.changeResolution(width, height);
+        // 关闭菜单
+        const menu = document.getElementById('moreOptionsMenu');
+        if (menu) {
+            menu.classList.add('hidden');
+        }
+    };
+
+    // 结束通话
+    window.endCall = function () {
+        // 显示确认对话框
+        document.getElementById('endCallDialog').classList.remove('hidden');
+    };
+
+    // 取消结束通话
+    window.cancelEndCall = function () {
+        document.getElementById('endCallDialog').classList.add('hidden');
+    };
+
+    // 确认结束通话
+    window.confirmEndCall = function () {
+        document.getElementById('endCallDialog').classList.add('hidden');
+        store.endCall();
+        showNotification('通话已结束');
+    };
+
+    // 显示通话请求弹窗
+    window.showCallRequest = function (caller) {
+        const dialog = document.getElementById('callRequestDialog');
+        if (dialog) {
+            // 设置通话请求信息
+            if (document.getElementById('callRequestName')) {
+                document.getElementById('callRequestName').textContent = caller.name;
+            }
+            if (document.getElementById('callRequestAvatar')) {
+                document.getElementById('callRequestAvatar').src = caller.avatar;
+            }
+            // 显示弹窗
+            dialog.classList.remove('hidden');
+        }
+    };
+
+    // 拒绝通话
+    window.rejectCall = function () {
+        const dialog = document.getElementById('callRequestDialog');
+        if (dialog) {
+            dialog.classList.add('hidden');
+        }
+        showNotification('已拒绝通话请求');
+        // 可以在这里添加发送拒绝通话请求到服务器的逻辑
+    };
+
+    // 接受通话
+    window.acceptCall = function () {
+        const dialog = document.getElementById('callRequestDialog');
+        if (dialog) {
+            dialog.classList.add('hidden');
+        }
+        showNotification('已接受通话请求');
+        // 可以在这里添加发送接受通话请求到服务器的逻辑
+        // 然后初始化通话
+        store.initCall();
+        store.setUp(connectionId);
+    };
+
+    // 绑定消息相关事件
+    chatMessage.bindMessageEvents();
+
+    // 键盘快捷键
+    document.addEventListener('keydown', (event) => {
+        // 空格键静音
+        if (event.code === 'Space' && !event.target.matches('input, textarea')) {
+            event.preventDefault();
+            window.toggleMute();
+        }
+
+        // Ctrl+V 切换视频
+        if (event.ctrlKey && event.key === 'v') {
+            event.preventDefault();
+            window.toggleVideo();
+        }
+    });
+
+    // 绑定对话框事件
+    document.getElementById('cancelEndCall').addEventListener('click', window.cancelEndCall);
+    document.getElementById('confirmEndCall').addEventListener('click', window.confirmEndCall);
+
+    // 更多选项按钮事件
+    const moreOptionsBtn = document.getElementById('moreOptionsBtn');
+    if (moreOptionsBtn) {
+        moreOptionsBtn.addEventListener('click', window.toggleMoreOptions);
+    }
+
+    // 点击外部关闭更多选项菜单
+    document.addEventListener('click', function(event) {
+        const moreOptionsMenu = document.getElementById('moreOptionsMenu');
+        const moreOptionsBtnEl = document.getElementById('moreOptionsBtn');
+        if (moreOptionsMenu && moreOptionsBtnEl &&
+            !moreOptionsMenu.contains(event.target) &&
+            !moreOptionsBtnEl.contains(event.target)) {
+            moreOptionsMenu.classList.add('hidden');
+        }
+    });
+
+    // 绑定通话请求对话框事件
+    if (document.getElementById('rejectCall')) {
+        document.getElementById('rejectCall').addEventListener('click', window.rejectCall);
+    }
+    if (document.getElementById('acceptCall')) {
+        document.getElementById('acceptCall').addEventListener('click', window.acceptCall);
+    }
+}
+
+
+// 页面加载完成后初始化
+window.addEventListener('DOMContentLoaded', async () => {
+    try {
+        // 检查本地存储中是否有连接ID
+        const connectionId = localStorage.getItem('connectionId');
+
+        if (!connectionId) {
+            // 如果没有连接ID，跳转到连接界面
+            window.location.href = './connect/connect.html';
+            return;
+        }
+
+        // 初始化 store
+        //await store.init();
+
+        // 初始化渲染器
+        const renderer = new UIRenderer(store);
+
+        // 加入通话
+        await store.joinCall(connectionId);
+
+        // 设置WebRTC连接
+        await store.setUp(connectionId);
+
+        renderer.renderHeaderTitle();
+
+        // 绑定DOM事件
+        bindDomEvents();
+
+        console.log('Video call app initialized successfully');
+    } catch (error) {
+        console.error('Error initializing app:', error);
+        showNotification('初始化失败，请刷新页面重试', 'error');
+    }
+});
+
+// 导出全局变量
+export { store };