通话模块拆分
This commit is contained in:
@@ -12,176 +12,16 @@ import {
|
||||
initWebSocket,
|
||||
loadUserSettings
|
||||
} from './connectview.js';
|
||||
import { createInviteController } from './invite-controller.js';
|
||||
// 全局变量
|
||||
let connectionId = "";
|
||||
// 当前视图状态：'connect' 或 'call'（可用于未来扩展）
|
||||
let currentView = 'connect';
|
||||
let pendingIncomingInvite = null;
|
||||
let inviteHandlersBound = false;
|
||||
function updateConnectionId(nextConnectionId) {
|
||||
connectionId = nextConnectionId || '';
|
||||
|
||||
function getInvitePayloadFromUrl() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
if (params.get('invite') !== '1') {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
name: params.get('callerName') || '邀请方',
|
||||
avatar: params.get('callerAvatar') || '/images/p2.png',
|
||||
connectionId: params.get('connectionId') || ''
|
||||
};
|
||||
}
|
||||
|
||||
function showCallRequestDialog(caller = {}) {
|
||||
const dialog = document.getElementById('callRequestDialog');
|
||||
if (!dialog) {
|
||||
return;
|
||||
}
|
||||
|
||||
const callerName = caller.name || '邀请方';
|
||||
const callerAvatar = caller.avatar || '/images/p2.png';
|
||||
const targetConnectionId = caller.connectionId || '';
|
||||
const applyReason = caller.applyReason || caller.reason || '未填写';
|
||||
pendingIncomingInvite = caller;
|
||||
|
||||
if (document.getElementById('callRequestName')) {
|
||||
document.getElementById('callRequestName').textContent = callerName;
|
||||
}
|
||||
if (document.getElementById('callRequestAvatar')) {
|
||||
document.getElementById('callRequestAvatar').src = callerAvatar;
|
||||
}
|
||||
if (document.getElementById('callRequestText')) {
|
||||
document.getElementById('callRequestText').textContent = targetConnectionId
|
||||
? `正在邀请您加入通话 (${targetConnectionId})`
|
||||
: '正在请求与您进行视频通话';
|
||||
}
|
||||
if (document.getElementById('callRequestReason')) {
|
||||
document.getElementById('callRequestReason').textContent = applyReason;
|
||||
}
|
||||
|
||||
if (targetConnectionId) {
|
||||
connectionId = targetConnectionId;
|
||||
localStorage.setItem('connectionId', targetConnectionId);
|
||||
}
|
||||
|
||||
dialog.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function getCurrentUserProfile() {
|
||||
try {
|
||||
const settings = JSON.parse(localStorage.getItem('userSettings') || '{}');
|
||||
return {
|
||||
userId: settings.userId || settings.id || '',
|
||||
name: settings.name || '我',
|
||||
avatar: settings.avatar || '/images/p1.png'
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error parsing user settings:', error);
|
||||
return {
|
||||
userId: '',
|
||||
name: '我',
|
||||
avatar: '/images/p1.png'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function bindInviteSignalHandlers() {
|
||||
if (inviteHandlersBound) {
|
||||
return;
|
||||
}
|
||||
|
||||
store.onSocketEvent('invite-call', (payload) => {
|
||||
pendingIncomingInvite = {
|
||||
connectionId: payload.connectionId,
|
||||
inviterSocketId: payload.inviterSocketId,
|
||||
inviterUserId: payload.inviterUserId,
|
||||
name: payload.inviterName || '邀请方',
|
||||
avatar: payload.inviterAvatar || '/images/p2.png',
|
||||
applyReason: payload.applyReason || payload.reason || ''
|
||||
};
|
||||
showCallRequestDialog(pendingIncomingInvite);
|
||||
showNotification(`${pendingIncomingInvite.name} 邀请你加入通话`);
|
||||
});
|
||||
|
||||
inviteHandlersBound = true;
|
||||
}
|
||||
|
||||
function bindInviteDialogEvents() {
|
||||
window.showCallRequest = function (caller) {
|
||||
showCallRequestDialog(caller);
|
||||
};
|
||||
|
||||
window.rejectCall = function () {
|
||||
const dialog = document.getElementById('callRequestDialog');
|
||||
if (dialog) {
|
||||
dialog.classList.add('hidden');
|
||||
}
|
||||
if (pendingIncomingInvite) {
|
||||
try {
|
||||
store.sendInviteRejected({
|
||||
connectionId: pendingIncomingInvite.connectionId || '',
|
||||
targetSocketId: pendingIncomingInvite.inviterSocketId || '',
|
||||
targetUserId: pendingIncomingInvite.inviterUserId || ''
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error rejecting invite:', error);
|
||||
}
|
||||
}
|
||||
pendingIncomingInvite = null;
|
||||
showNotification('已拒绝通话请求');
|
||||
};
|
||||
|
||||
window.acceptCall = async function () {
|
||||
const dialog = document.getElementById('callRequestDialog');
|
||||
if (dialog) {
|
||||
dialog.classList.add('hidden');
|
||||
}
|
||||
|
||||
const targetConnectionId =
|
||||
(pendingIncomingInvite && pendingIncomingInvite.connectionId) ||
|
||||
connectionId ||
|
||||
localStorage.getItem('connectionId') ||
|
||||
new URLSearchParams(window.location.search).get('connectionId');
|
||||
|
||||
if (!targetConnectionId) {
|
||||
showNotification('缺少连接ID，无法接受邀请', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
connectionId = targetConnectionId;
|
||||
localStorage.setItem('connectionId', targetConnectionId);
|
||||
|
||||
if (pendingIncomingInvite) {
|
||||
try {
|
||||
store.sendInviteAccepted({
|
||||
connectionId: targetConnectionId,
|
||||
targetSocketId: pendingIncomingInvite.inviterSocketId || '',
|
||||
targetUserId: pendingIncomingInvite.inviterUserId || ''
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error accepting invite:', error);
|
||||
showNotification('接受邀请失败，请稍后重试', 'error');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
showNotification('已接受通话请求');
|
||||
pendingIncomingInvite = null;
|
||||
|
||||
if (currentView !== 'call') {
|
||||
await switchToCallView(targetConnectionId);
|
||||
}
|
||||
};
|
||||
|
||||
const rejectCall = document.getElementById('rejectCall');
|
||||
const acceptCall = document.getElementById('acceptCall');
|
||||
if (rejectCall && !rejectCall.dataset.bound) {
|
||||
rejectCall.addEventListener('click', window.rejectCall);
|
||||
rejectCall.dataset.bound = 'true';
|
||||
}
|
||||
if (acceptCall && !acceptCall.dataset.bound) {
|
||||
acceptCall.addEventListener('click', window.acceptCall);
|
||||
acceptCall.dataset.bound = 'true';
|
||||
if (connectionId) {
|
||||
localStorage.setItem('connectionId', connectionId);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -222,13 +62,22 @@ async function switchToCallView(connectionId) {
|
||||
}
|
||||
}
|
||||
|
||||
const inviteController = createInviteController({
|
||||
store,
|
||||
notify: showNotification,
|
||||
onAcceptConnection: switchToCallView,
|
||||
getCurrentView: () => currentView,
|
||||
getConnectionId: () => connectionId,
|
||||
setConnectionId: updateConnectionId
|
||||
});
|
||||
|
||||
/**
|
||||
* 处理加入通话
|
||||
* @param {string} connectionId - 连接ID
|
||||
*/
|
||||
async function handleJoinCall(connectionId) {
|
||||
showNotification(`正在加入通话 (${connectionId})`);
|
||||
localStorage.setItem('connectionId', connectionId);
|
||||
updateConnectionId(connectionId);
|
||||
await switchToCallView(connectionId);
|
||||
}
|
||||
|
||||
@@ -240,7 +89,7 @@ async function handleCreateCall() {
|
||||
//const connectionId = 'conn_' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
|
||||
|
||||
const connectionId = randomMeetingId();
|
||||
localStorage.setItem('connectionId', connectionId);
|
||||
updateConnectionId(connectionId);
|
||||
await switchToCallView(connectionId);
|
||||
}
|
||||
|
||||
@@ -363,7 +212,7 @@ function bindCallViewDomEvents() {
|
||||
}
|
||||
});
|
||||
|
||||
bindInviteDialogEvents();
|
||||
inviteController.bindDialogEvents();
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化（SPA入口）
|
||||
@@ -381,23 +230,23 @@ window.addEventListener('DOMContentLoaded', async () => {
|
||||
|
||||
// 初始化WebSocket连接（在connect视图就建立WebSocket）
|
||||
await initWebSocket();
|
||||
bindInviteSignalHandlers();
|
||||
inviteController.bindSignalHandlers();
|
||||
|
||||
// 绑定connect视图事件（加入通话、创建通话等）
|
||||
bindConnectViewEvents(handleJoinCall, handleCreateCall);
|
||||
bindInviteDialogEvents();
|
||||
inviteController.bindDialogEvents();
|
||||
|
||||
// 检查是否有保存的连接ID，填入输入框
|
||||
const savedConnectionId = localStorage.getItem('connectionId');
|
||||
if (savedConnectionId) {
|
||||
connectionId = savedConnectionId;
|
||||
updateConnectionId(savedConnectionId);
|
||||
const connectionIdInput = document.getElementById('connectionIdInput');
|
||||
if (connectionIdInput) connectionIdInput.value = savedConnectionId;
|
||||
}
|
||||
|
||||
const invitePayload = getInvitePayloadFromUrl();
|
||||
const invitePayload = inviteController.getInvitePayloadFromUrl();
|
||||
if (invitePayload) {
|
||||
window.showCallRequest(invitePayload);
|
||||
inviteController.showCallRequestDialog(invitePayload);
|
||||
}
|
||||
|
||||
console.log('SPA initialized, showing connect view');
|
||||
|
||||
Reference in New Issue
Block a user