root/video_socket-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

邀请弹窗

Browse Source
This commit is contained in:
stary
2026-05-18 21:18:55 +08:00
parent 66656c961c
commit 2c6a7af31b
1 changed files with 101 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
client/public/main.js
View File

@@ -17,6 +17,99 @@ let connectionId = "";
// 当前视图状态：'connect' 或 'call'（可用于未来扩展）
let currentView = 'connect';
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 || '';
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 (targetConnectionId) {
connectionId = targetConnectionId;
localStorage.setItem('connectionId', targetConnectionId);
}
dialog.classList.remove('hidden');
}
function bindInviteDialogEvents() {
window.showCallRequest = function (caller) {
showCallRequestDialog(caller);
};
window.rejectCall = function () {
const dialog = document.getElementById('callRequestDialog');
if (dialog) {
dialog.classList.add('hidden');
}
showNotification('已拒绝通话请求');
};
window.acceptCall = async function () {
const dialog = document.getElementById('callRequestDialog');
if (dialog) {
dialog.classList.add('hidden');
}
const targetConnectionId =
connectionId ||
localStorage.getItem('connectionId') ||
new URLSearchParams(window.location.search).get('connectionId');
if (!targetConnectionId) {
showNotification('缺少连接ID，无法接受邀请', 'error');
return;
}
connectionId = targetConnectionId;
localStorage.setItem('connectionId', targetConnectionId);
showNotification('已接受通话请求');
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';
}
}
/**
* 切换到call视图（创建/加入通话后）
* @param {string} connectionId - 连接ID
@@ -152,45 +245,6 @@ function bindCallViewDomEvents() {
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();
@@ -232,11 +286,7 @@ function bindCallViewDomEvents() {
}
});
// 绑定通话请求对话框事件
const rejectCall = document.getElementById('rejectCall');
const acceptCall = document.getElementById('acceptCall');
if (rejectCall) rejectCall.addEventListener('click', window.rejectCall);
if (acceptCall) acceptCall.addEventListener('click', window.acceptCall);
bindInviteDialogEvents();
}
// 页面加载完成后初始化（SPA入口）
@@ -257,14 +307,21 @@ window.addEventListener('DOMContentLoaded', async () => {
// 绑定connect视图事件（加入通话、创建通话等）
bindConnectViewEvents(handleJoinCall, handleCreateCall);
bindInviteDialogEvents();
// 检查是否有保存的连接ID，填入输入框
const savedConnectionId = localStorage.getItem('connectionId');
if (savedConnectionId) {
connectionId = savedConnectionId;
const connectionIdInput = document.getElementById('connectionIdInput');
if (connectionIdInput) connectionIdInput.value = savedConnectionId;
}
const invitePayload = getInvitePayloadFromUrl();
if (invitePayload) {
window.showCallRequest(invitePayload);
}
console.log('SPA initialized, showing connect view');
} catch (error) {
console.error('Error initializing SPA:', error);