屏幕共享优化

src/hooks/useWatchRoom.ts

@@ -30,9 +30,15 @@ export function useWatchRoom(
   const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
   const [isOwner, setIsOwner] = useState(false);
   const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const rejoinInFlightRef = useRef(false);
 
   // 重新加入房间（自动重连）
   const rejoinRoom = useCallback(async (info: StoredRoomInfo) => {
+    if (rejoinInFlightRef.current) {
+      return;
+    }
+
+    rejoinInFlightRef.current = true;
     console.log('[WatchRoom] Auto-rejoining room:', info);
     try {
       const sock = watchRoomSocketManager.getSocket();
@@ -64,9 +70,21 @@ export function useWatchRoom(
     } catch (error) {
       console.error('[WatchRoom] Failed to rejoin room:', error);
       clearStoredRoomInfo();
+    } finally {
+      rejoinInFlightRef.current = false;
     }
   }, []);
 
+  const scheduleRejoin = useCallback((info: StoredRoomInfo, delay = 300) => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+    }
+
+    reconnectTimeoutRef.current = setTimeout(() => {
+      rejoinRoom(info);
+    }, delay);
+  }, [rejoinRoom]);
+
   // 连接到服务器
   const connect = useCallback(async (config: WatchRoomConfig) => {
     try {
@@ -78,15 +96,13 @@ export function useWatchRoom(
       const storedInfo = getStoredRoomInfo();
       if (storedInfo) {
         console.log('[WatchRoom] Attempting to reconnect to room:', storedInfo.roomId);
-        reconnectTimeoutRef.current = setTimeout(() => {
-          rejoinRoom(storedInfo);
-        }, 1000);
+        scheduleRejoin(storedInfo);
       }
     } catch (error) {
       console.error('[WatchRoom] Failed to connect:', error);
       setIsConnected(false);
     }
-  }, [rejoinRoom]);
+  }, [scheduleRejoin]);
 
   // 断开连接
   const disconnect = useCallback(() => {
@@ -99,6 +115,7 @@ export function useWatchRoom(
     setCurrentRoom(null);
     setMembers([]);
     setChatMessages([]);
+    setIsOwner(false);
   }, []);
 
   // 创建房间
@@ -142,7 +159,7 @@ export function useWatchRoom(
 
   // 加入房间
   const joinRoom = useCallback(
-    async (data: { roomId: string; password?: string; userName: string }) => {
+    async (data: { roomId: string; password?: string; userName: string; ownerToken?: string }) => {
       const sock = watchRoomSocketManager.getSocket();
       if (!sock || !watchRoomSocketManager.isConnected()) {
         throw new Error('Not connected');
@@ -162,7 +179,7 @@ export function useWatchRoom(
               isOwner: isRoomOwner,
               userName: data.userName,
               password: data.password,
-              ownerToken: isRoomOwner ? response.room.ownerToken : undefined,
+              ownerToken: isRoomOwner ? (response.room.ownerToken || data.ownerToken) : undefined,
               timestamp: Date.now(),
             });
             resolve({ room: response.room, members: response.members });
@@ -343,7 +360,11 @@ export function useWatchRoom(
     });
 
     socket.on('room:member-joined', (member) => {
-      setMembers((prev) => [...prev, member]);
+      setMembers((prev) => {
+        const next = prev.filter((existing) => existing.id !== member.id);
+        next.push(member);
+        return next;
+      });
     });
 
     socket.on('room:member-left', (userId) => {
@@ -415,6 +436,10 @@ export function useWatchRoom(
     // 连接状态
     socket.on('connect', () => {
       setIsConnected(true);
+      const storedInfo = getStoredRoomInfo();
+      if (storedInfo) {
+        scheduleRejoin(storedInfo);
+      }
     });
 
     socket.on('disconnect', () => {
@@ -436,7 +461,7 @@ export function useWatchRoom(
       socket.off('connect');
       socket.off('disconnect');
     };
-  }, [socket, currentRoom, onRoomDeleted, onStateCleared]);
+  }, [socket, currentRoom, onRoomDeleted, onStateCleared, scheduleRejoin]);
 
   // 清理
   useEffect(() => {