[refactor] consolidate WebRTC logic, add config, remove duplicates

index.html

@@ -14,37 +14,36 @@
       <!-- Connection settings + status -->
       <div class="top-card">
         <div class="connection-card">
-          <h2>Connection Settings</h2>
+          <h2>连接设置</h2>
           <div class="option">
-            <label for="transmission-id">Transmission ID:</label>
+            <label for="transmission-id">远程设备 ID:</label>
             <input id="transmission-id" type="text" value="931631602" />
           </div>
           <div class="option">
-            <label for="transmission-pwd">Password:</label>
+            <label for="transmission-pwd">密码:</label>
             <input id="transmission-pwd" type="password" value="111111" />
           </div>
           <div class="actions">
-            <button id="connect" onclick="connect()" disabled>Connect</button>
+            <button id="connect" disabled>连接</button>
             <button
               id="disconnect"
               style="display: none"
-              onclick="disconnect()"
             >
-              Disconnect
+              断开连接
             </button>
           </div>
         </div>
 
         <div class="status-card">
-          <h2>Status</h2>
+          <h2>状态</h2>
           <div class="status-item">
-            ICE Connection State: <span id="ice-connection-state"></span>
+            ICE状态: <span id="ice-connection-state"></span>
           </div>
           <div class="status-item">
-            Signaling State: <span id="signaling-state"></span>
+            信令状态: <span id="signaling-state"></span>
           </div>
           <div class="status-item">
-            Data Channel: <span id="datachannel-state"></span>
+            数据通道: <span id="datachannel-state"></span>
           </div>
         </div>
       </div>
@@ -54,18 +53,18 @@
         <div class="option" style="margin-bottom: 12px">
           <label for="display-id">显示器 ID: </label>
           <select id="display-id" style="width: 160px" disabled>
-            <option value="" selected>Waiting for track ID...</option>
+            <option value="" selected>候选画面 ID...</option>
           </select>
-          <button
-            id="set-display"
-            disabled
-            onclick="CrossDeskControl.setDisplayId()"
-          >
-            Set
+          <button id="set-display" disabled>
+            设置
           </button>
           <!-- Add fullscreen control buttons -->
-          <button id="fullscreen-btn" class="control-btn">Maximize</button>
-          <button id="real-fullscreen-btn" class="control-btn">Fullscreen</button>
+          <button id="fullscreen-btn" class="control-btn">
+            最大化
+          </button>
+          <button id="real-fullscreen-btn" class="control-btn">
+            全屏
+          </button>
         </div>
 
         <!-- Video container, including draggable virtual mouse -->
@@ -82,12 +81,23 @@
 
           <!-- Draggable virtual mouse -->
           <div id="virtual-mouse">
-            <button id="virtual-left-btn" class="virtual-mouse-btn">
-              Left
-            </button>
-            <button id="virtual-right-btn" class="virtual-mouse-btn">
-              Right
-            </button>
+            <div class="virtual-mouse-top">
+              <button id="virtual-left-btn" class="virtual-mouse-btn">
+                左键
+              </button>
+              <div id="virtual-wheel" class="virtual-mouse-wheel">滚轮</div>
+              <button id="virtual-right-btn" class="virtual-mouse-btn">
+                右键
+              </button>
+            </div>
+            <div
+              id="virtual-touchpad"
+              class="virtual-mouse-touchpad"
+              style="touch-action: none"
+            >
+              触摸板区域 (请在此区域滑动控制鼠标)
+            </div>
+            <div id="virtual-mouse-drag-handle" class="drag-handle"></div>
           </div>
         </div>
       </div>
@@ -95,9 +105,9 @@
       <!-- Data Channel UI -->
       <div class="top-card">
         <div class="connection-card">
-          <h2>Data Channel</h2>
+          <h2>数据通道</h2>
           <div class="option">
-            <label for="audio-capture">Capture Audio:</label>
+            <label for="audio-capture">音频捕获:</label>
             <input id="audio-capture" type="checkbox" disabled />
           </div>
 
@@ -115,15 +125,11 @@
             <input
               id="dc-input"
               type="text"
-              placeholder="Enter message to send"
+              placeholder="输入信息发送"
               style="flex: 1; padding: 8px"
             />
-            <button
-              id="dc-send"
-              onclick="CrossDeskControl.sendDataChannelMessage()"
-              disabled
-            >
-              Send
+            <button id="dc-send" disabled>
+              发送
             </button>
           </div>
         </div>
@@ -131,6 +137,6 @@
     </div>
 
     <script src="control.js"></script>
-    <script src="webrtc_client.js"></script>
+    <script src="web_client.js"></script>
   </body>
 </html>