277 lines
9.0 KiB
JavaScript
277 lines
9.0 KiB
JavaScript
/**
|
||
* 主入口文件
|
||
* 初始化应用，连接各个模块
|
||
* SPA架构：connect视图和call视图在同一页面切换
|
||
*/
|
||
import store from './store.js';
|
||
import UIRenderer from './renderer.js';
|
||
import { showNotification, randomMeetingId } from './utils.js';
|
||
import chatMessage from './chatmessage.js';
|
||
import {
|
||
bindConnectViewEvents,
|
||
initWebSocket,
|
||
loadUserSettings
|
||
} from './connectview.js';
|
||
// 全局变量
|
||
let connectionId = "";
|
||
// 当前视图状态：'connect' 或 'call'（可用于未来扩展）
|
||
let currentView = 'connect';
|
||
|
||
/**
|
||
* 切换到call视图（创建/加入通话后）
|
||
* @param {string} connectionId - 连接ID
|
||
*/
|
||
async function switchToCallView(connectionId) {
|
||
const connectView = document.getElementById('connectView');
|
||
const callView = document.getElementById('callView');
|
||
|
||
if (connectView) connectView.classList.add('hidden');
|
||
if (callView) callView.classList.remove('hidden');
|
||
|
||
currentView = 'call';
|
||
|
||
try {
|
||
// 初始化渲染器
|
||
const renderer = new UIRenderer(store);
|
||
|
||
// 加入通话
|
||
await store.joinCall(connectionId);
|
||
|
||
// 设置WebRTC连接
|
||
await store.setUp(connectionId);
|
||
|
||
renderer.renderHeaderTitle();
|
||
|
||
// 绑定DOM事件
|
||
bindCallViewDomEvents();
|
||
|
||
console.log('Video call app initialized successfully');
|
||
} catch (error) {
|
||
console.error('Error initializing app:', error);
|
||
showNotification('初始化失败，请刷新页面重试', 'error');
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 处理加入通话
|
||
* @param {string} connectionId - 连接ID
|
||
*/
|
||
async function handleJoinCall(connectionId) {
|
||
showNotification(`正在加入通话 (${connectionId})`);
|
||
localStorage.setItem('connectionId', connectionId);
|
||
await switchToCallView(connectionId);
|
||
}
|
||
|
||
/**
|
||
* 处理创建通话
|
||
*/
|
||
async function handleCreateCall() {
|
||
showNotification('正在创建通话...');
|
||
//const connectionId = 'conn_' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
|
||
|
||
const connectionId = randomMeetingId();
|
||
localStorage.setItem('connectionId', connectionId);
|
||
await switchToCallView(connectionId);
|
||
}
|
||
|
||
/**
|
||
* 绑定call视图DOM事件
|
||
*/
|
||
function bindCallViewDomEvents() {
|
||
// 切换侧边栏
|
||
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();
|
||
}
|
||
});
|
||
|
||
// 绑定对话框事件
|
||
const cancelEndCall = document.getElementById('cancelEndCall');
|
||
const confirmEndCall = document.getElementById('confirmEndCall');
|
||
if (cancelEndCall) cancelEndCall.addEventListener('click', window.cancelEndCall);
|
||
if (confirmEndCall) 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');
|
||
}
|
||
});
|
||
|
||
// 绑定通话请求对话框事件
|
||
const rejectCall = document.getElementById('rejectCall');
|
||
const acceptCall = document.getElementById('acceptCall');
|
||
if (rejectCall) rejectCall.addEventListener('click', window.rejectCall);
|
||
if (acceptCall) acceptCall.addEventListener('click', window.acceptCall);
|
||
}
|
||
|
||
// 页面加载完成后初始化（SPA入口）
|
||
window.addEventListener('DOMContentLoaded', async () => {
|
||
try {
|
||
// 显示connect视图，隐藏call视图
|
||
const connectView = document.getElementById('connectView');
|
||
const callView = document.getElementById('callView');
|
||
if (connectView) connectView.classList.remove('hidden');
|
||
if (callView) callView.classList.add('hidden');
|
||
currentView = 'connect';
|
||
|
||
// 加载用户设置
|
||
loadUserSettings();
|
||
|
||
// 初始化WebSocket连接（在connect视图就建立WebSocket）
|
||
await initWebSocket();
|
||
|
||
// 绑定connect视图事件（加入通话、创建通话等）
|
||
bindConnectViewEvents(handleJoinCall, handleCreateCall);
|
||
|
||
// 检查是否有保存的连接ID，填入输入框
|
||
const savedConnectionId = localStorage.getItem('connectionId');
|
||
if (savedConnectionId) {
|
||
const connectionIdInput = document.getElementById('connectionIdInput');
|
||
if (connectionIdInput) connectionIdInput.value = savedConnectionId;
|
||
}
|
||
|
||
console.log('SPA initialized, showing connect view');
|
||
} catch (error) {
|
||
console.error('Error initializing SPA:', error);
|
||
showNotification('初始化失败，请刷新页面重试', 'error');
|
||
}
|
||
});
|
||
|
||
// 导出全局变量
|
||
export { store };
|