Revert AudioSharing

Author: tyouwei

peerprep-fe/src/app/collaboration/components/AudioSharing.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState } from 'react';
 import io, { Socket } from 'socket.io-client';
 import SimplePeer, { Instance } from 'simple-peer';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -15,59 +15,38 @@ const AudioSharing = () => {
   const [connectionStatus, setConnectionStatus] = useState<
     'Not Connected' | 'Connecting' | 'Connected'
   >('Not Connected');
-
-  // Use refs for persistent state across remounts
   const socketRef = useRef<Socket | null>(null);
   const peerRef = useRef<Instance | null>(null);
   const audioStreamRef = useRef<MediaStream | null>(null);
-  const audioElementsRef = useRef<HTMLAudioElement[]>([]);
-  const mountCountRef = useRef(0);
-  const lastCleanupTimeRef = useRef(0);
+  const initializedRef = useRef(false);
 
-  // Constants
-  const CLEANUP_THRESHOLD = 1000; // Minimum time between cleanups in ms
   const SERVER_URL =
     process.env.NEXT_PUBLIC_AUDIO_SERVER_URL || 'http://localhost:5555';
+
+  // Add TURN server credentials from environment variables
   const TURN_SERVER = process.env.NEXT_PUBLIC_TURN_SERVER || '';
   const TURN_USERNAME = process.env.NEXT_PUBLIC_TURN_USERNAME;
   const TURN_CREDENTIAL = process.env.NEXT_PUBLIC_TURN_PASSWORD;
 
-  const cleanupAudio = (force = false) => {
-    const now = Date.now();
-
-    // Prevent rapid cleanup unless forced
-    if (!force && now - lastCleanupTimeRef.current < CLEANUP_THRESHOLD) {
-      console.log('Skipping cleanup due to threshold');
-      return;
-    }
-
-    console.log('Cleaning up audio connections...');
-    lastCleanupTimeRef.current = now;
-
+  if (!TURN_SERVER || !TURN_USERNAME || !TURN_CREDENTIAL) {
+    // Log which specific TURN variables are missing
+    console.error('Missing TURN env:', {
+      server: !!TURN_SERVER,
+      username: !!TURN_USERNAME,
+      credential: !!TURN_CREDENTIAL,
+    });
+  }
+  const cleanupAudio = () => {
     if (audioStreamRef.current) {
       audioStreamRef.current.getTracks().forEach((track) => {
         track.stop();
       });
       audioStreamRef.current = null;
     }
-
     if (peerRef.current) {
       peerRef.current.destroy();
       peerRef.current = null;
     }
-
-    // Only disconnect socket if we're actually cleaning up (not remounting)
-    if (force && socketRef.current) {
-      socketRef.current.disconnect();
-      socketRef.current = null;
-    }
-
-    audioElementsRef.current.forEach((audio) => {
-      audio.pause();
-      audio.srcObject = null;
-    });
-    audioElementsRef.current = [];
-
     setIsAudioEnabled(false);
     setConnectionStatus('Not Connected');
   };
@@ -82,8 +61,10 @@ const AudioSharing = () => {
       trickle: false,
       config: {
         iceServers: [
+          // Maintain existing STUN servers
           { urls: 'stun:stun.l.google.com:19302' },
           { urls: 'stun:global.stun.twilio.com:3478' },
+          // Add TURN server configuration
           {
             urls: TURN_SERVER,
             username: TURN_USERNAME,
@@ -94,45 +75,42 @@ const AudioSharing = () => {
     });
 
     peer.on('signal', (data: SignalData) => {
+      console.log('Sending signal data:', data);
       socketRef.current?.emit('signal', data);
     });
 
     peer.on('stream', (remoteStream: MediaStream) => {
       console.log('Received remote stream');
       const audio = new Audio();
       audio.srcObject = remoteStream;
-      audioElementsRef.current.push(audio);
       audio
         .play()
         .catch((error) => console.error('Error playing audio:', error));
     });
 
     peer.on('error', (err: Error) => {
       console.error('Peer connection error:', err);
-      cleanupAudio(true);
+      cleanupAudio();
     });
 
     peer.on('close', () => {
       console.log('Peer connection closed');
-      cleanupAudio(true);
+      cleanupAudio();
     });
 
+    // Add connection state logging
     peer.on('connect', () => {
-      console.log('Peer connection established');
+      console.log('Peer connection established successfully');
       setConnectionStatus('Connected');
     });
 
     return peer;
   };
 
   const initializeSocketAndPeer = () => {
-    // If socket exists and is connected, reuse it
-    if (socketRef.current?.connected) {
-      console.log('Reusing existing socket connection');
-      return;
-    }
+    if (initializedRef.current) return;
+    initializedRef.current = true;
 
-    console.log('Initializing new socket connection');
     socketRef.current = io(SERVER_URL, {
       transports: ['websocket'],
       path: '/socket.io/',
@@ -147,10 +125,12 @@ const AudioSharing = () => {
 
     socketRef.current.on('connect_error', (error: Error) => {
       console.error('Connection error:', error);
-      cleanupAudio(true);
+      cleanupAudio();
     });
 
     socketRef.current.on('signal', async (data: SignalData) => {
+      console.log('Received signal data:', data);
+
       if (data.type === 'offer' && !peerRef.current) {
         try {
           const stream = await navigator.mediaDevices.getUserMedia({
@@ -167,7 +147,7 @@ const AudioSharing = () => {
           peerRef.current = createPeer(stream, false);
         } catch (error) {
           console.error('Error accessing audio devices:', error);
-          cleanupAudio(true);
+          cleanupAudio();
         }
       }
 
@@ -176,7 +156,7 @@ const AudioSharing = () => {
           peerRef.current.signal(data as SimplePeer.SignalData);
         } catch (error) {
           console.error('Error signaling peer:', error);
-          cleanupAudio(true);
+          cleanupAudio();
         }
       }
     });
@@ -211,39 +191,10 @@ const AudioSharing = () => {
       }
     } catch (error) {
       console.error('Error toggling audio:', error);
-      cleanupAudio(true);
+      cleanupAudio();
     }
   };
 
-  // Mount/unmount handling
-  useEffect(() => {
-    mountCountRef.current++;
-    console.log(`Component mounted (count: ${mountCountRef.current})`);
-
-    // Only do full cleanup when actually leaving the page
-    return () => {
-      mountCountRef.current--;
-      console.log(`Component unmounting (count: ${mountCountRef.current})`);
-
-      // If this is the last mount point, do a full cleanup
-      if (mountCountRef.current === 0) {
-        cleanupAudio(true);
-      }
-    };
-  }, []);
-
-  // Handle page unload
-  useEffect(() => {
-    const handleUnload = () => {
-      cleanupAudio(true);
-    };
-
-    window.addEventListener('beforeunload', handleUnload);
-    return () => {
-      window.removeEventListener('beforeunload', handleUnload);
-    };
-  }, []);
-
   return (
     <div className="flex items-center gap-4">
       <button