diff --git a/WebApp/client/public/onebyone/connect/connect.html b/WebApp/client/public/onebyone/connect/connect.html new file mode 100644 index 0000000..675af68 --- /dev/null +++ b/WebApp/client/public/onebyone/connect/connect.html @@ -0,0 +1,61 @@ + + + + + + VideoCall - 连接界面 + + + + + + +
+
+
+ +
+

VideoCall

+

一对一视频通话

+ +
+
+ + +
+

+ 连接ID是用于建立点对点通话的唯一标识，由发起方生成并分享给接收方。 +

+
+ +
+ + +
+
+
+ + +
+ + 通知内容 +
+ + + + + diff --git a/WebApp/client/public/onebyone/connect/connect.js b/WebApp/client/public/onebyone/connect/connect.js new file mode 100644 index 0000000..81774d8 --- /dev/null +++ b/WebApp/client/public/onebyone/connect/connect.js @@ -0,0 +1,120 @@ +/** + * 连接界面逻辑 + * 处理初始连接、创建通话和加入通话的功能 + */ + +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'; +} + +// 绑定事件监听器 +function bindEvents() { + // 连接按钮 + const connectBtn = document.getElementById('connectBtn'); + if (connectBtn) { + connectBtn.addEventListener('click', joinCall); + } + + // 创建通话按钮 + const createCallBtn = document.getElementById('createCallBtn'); + if (createCallBtn) { + createCallBtn.addEventListener('click', createCall); + } + + // 输入框回车事件 + 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; diff --git a/WebApp/client/public/onebyone/endcall/endcall.html b/WebApp/client/public/onebyone/endcall/endcall.html new file mode 100644 index 0000000..21710db --- /dev/null +++ b/WebApp/client/public/onebyone/endcall/endcall.html @@ -0,0 +1,50 @@ + + + + + + VideoCall - 通话结束 + + + + + + +
+
+
+ +
+

通话已结束

+

连接已断开，请检查网络连接后重试

+
+ + +
+
+

连接ID: --

+

断开时间: --

+
+
+
+ + +
+ + 通知内容 +
+ + + + + diff --git a/WebApp/client/public/onebyone/endcall/endcall.js b/WebApp/client/public/onebyone/endcall/endcall.js new file mode 100644 index 0000000..93f3b9b --- /dev/null +++ b/WebApp/client/public/onebyone/endcall/endcall.js @@ -0,0 +1,98 @@ +/** + * 结束通话界面逻辑 + * 处理通话结束后的操作，如重新连接或返回连接界面 + */ + +// 通知函数 +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 reconnectCall() { + showNotification('正在重新连接...'); + + // 跳转到通话界面 + window.location.href = '../index.html'; +} + +// 离开 +function leaveCall() { + // 清除本地存储中的连接ID + localStorage.removeItem('connectionId'); + + // 跳转到连接界面 + window.location.href = '../connect/connect.html'; +} + +// 绑定事件监听器 +function bindEvents() { + // 重新连接按钮 + const reconnectBtn = document.getElementById('reconnectBtn'); + if (reconnectBtn) { + reconnectBtn.addEventListener('click', reconnectCall); + } + + // 离开按钮 + const leaveBtn = document.getElementById('leaveBtn'); + if (leaveBtn) { + leaveBtn.addEventListener('click', leaveCall); + } +} + +// 页面加载完成后初始化 +window.addEventListener('DOMContentLoaded', () => { + bindEvents(); + + // 更新断开连接信息 + const disconnectConnectionId = document.getElementById('disconnectConnectionId'); + const disconnectTime = document.getElementById('disconnectTime'); + + if (disconnectConnectionId) { + disconnectConnectionId.textContent = localStorage.getItem('connectionId') || '--'; + } + + if (disconnectTime) { + disconnectTime.textContent = new Date().toLocaleString(); + } +}); + +// 导出全局函数 +window.showNotification = showNotification; +window.reconnectCall = reconnectCall; +window.leaveCall = leaveCall; diff --git a/WebApp/client/public/onebyone/index.html b/WebApp/client/public/onebyone/index.html index dbc0fef..e81f48f 100644 --- a/WebApp/client/public/onebyone/index.html +++ b/WebApp/client/public/onebyone/index.html @@ -9,6 +9,12 @@ +