From 8dc78dd6e338ffbbe61c3f908e5760a2e6b59874 Mon Sep 17 00:00:00 2001
From: Song367 <601337784@qq.com>
Date: Wed, 6 Aug 2025 13:16:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=AD=89=E5=BE=85=E6=8F=8F?=
 =?UTF-8?q?=E8=BF=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.html | 27 +++++++++++++++++++++++++++
 src/index.js   | 37 ++++++++++++++++++++++++++++++++++++-
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index d2a3976..5706ada 100644
--- a/src/index.html
+++ b/src/index.html
@@ -118,6 +118,27 @@
         .video-loading.show {
             opacity: 1;
         }
+
+        /* 等待连接提示样式 */
+        .connection-waiting {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 20;
+            color: white;
+            font-size: 18px;
+            text-align: center;
+            background: rgba(0, 0, 0, 0.7);
+            padding: 30px;
+            border-radius: 15px;
+            backdrop-filter: blur(10px);
+            transition: opacity 0.3s ease;
+        }
+        
+        .connection-waiting.show {
+            opacity: 1;
+        }
         
         /* 加载动画 */
         .loading-spinner {
@@ -451,6 +472,12 @@
                         <div class="loading-spinner"></div>
                         <!-- <div>正在切换视频...</div> -->
                     </div>
+
+                    <!-- 等待连接提示 -->
+                    <div class="connection-waiting" id="connectionWaiting" style="display: none;">
+                        <div class="loading-spinner"></div>
+                        <div style="color: white; font-size: 18px; margin-top: 10px;">等待连接通话中...</div>
+                    </div>
                 </div>
                 
                 <div class="video-info" style="display: none;">
diff --git a/src/index.js b/src/index.js
index 02f560b..e681cb7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -115,6 +115,9 @@ class WebRTCChat {
         this.messageLog = document.getElementById('messageLog');
         this.currentVideoName = document.getElementById('currentVideoName');
         this.videoList = document.getElementById('videoList');
+
+        // 等待连接提示元素
+        this.connectionWaiting = document.getElementById('connectionWaiting');
     }
 
     initializeSocket() {
@@ -828,8 +831,33 @@ class WebRTCChat {
         // this.stopVoiceButton.onclick = () => this.stopVoiceRecording();
     }
 
+    // 显示等待连接提示
+    showConnectionWaiting() {
+        if (this.connectionWaiting) {
+            this.connectionWaiting.style.display = 'block';
+            // 使用setTimeout确保display设置后再添加show类
+            setTimeout(() => {
+                this.connectionWaiting.classList.add('show');
+            }, 10);
+        }
+    }
+    
+    // 隐藏等待连接提示
+    hideConnectionWaiting() {
+        if (this.connectionWaiting) {
+            this.connectionWaiting.classList.remove('show');
+            // 等待动画完成后隐藏元素
+            setTimeout(() => {
+                this.connectionWaiting.style.display = 'none';
+            }, 300);
+        }
+    }
+
     async startCall() {
         try {
+
+            // 显示等待连接提示
+            this.showConnectionWaiting();
             // 切换到通话中图标
             this.switchToCallingIcon();
             
@@ -870,15 +898,22 @@ class WebRTCChat {
             
             // 开始播放当前场景的默认视频
             await this.startDefaultVideoStream();
+
+            // 隐藏等待连接提示
+            this.hideConnectionWaiting();
             
         } catch (error) {
-            // 如果出错，恢复到默认图标
+            // 如果出错，隐藏等待连接提示并恢复到默认图标
+            this.hideConnectionWaiting();
             this.switchToDefaultIcon();
             this.logMessage('无法访问麦克风: ' + error.message, 'error');
         }
     }
 
     stopCall() {
+
+        // 隐藏等待连接提示
+        this.hideConnectionWaiting();
         // 恢复到默认图标
         this.switchToDefaultIcon();