Merge pull request #195 from CS3219-AY2425S1/fix/cleanup_features

Fix/cleanup features

Author: tyouwei

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import io, { Socket } from 'socket.io-client';
 import SimplePeer, { Instance } from 'simple-peer';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -15,38 +15,59 @@ 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 initializedRef = useRef(false);
+  const audioElementsRef = useRef<HTMLAudioElement[]>([]);
+  const mountCountRef = useRef(0);
+  const lastCleanupTimeRef = useRef(0);
 
+  // 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;
 
-  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 = () => {
+  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 (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');
   };
@@ -61,10 +82,8 @@ 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,
@@ -75,42 +94,45 @@ 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();
+      cleanupAudio(true);
     });
 
     peer.on('close', () => {
       console.log('Peer connection closed');
-      cleanupAudio();
+      cleanupAudio(true);
     });
 
-    // Add connection state logging
     peer.on('connect', () => {
-      console.log('Peer connection established successfully');
+      console.log('Peer connection established');
       setConnectionStatus('Connected');
     });
 
     return peer;
   };
 
   const initializeSocketAndPeer = () => {
-    if (initializedRef.current) return;
-    initializedRef.current = true;
+    // If socket exists and is connected, reuse it
+    if (socketRef.current?.connected) {
+      console.log('Reusing existing socket connection');
+      return;
+    }
 
+    console.log('Initializing new socket connection');
     socketRef.current = io(SERVER_URL, {
       transports: ['websocket'],
       path: '/socket.io/',
@@ -125,12 +147,10 @@ const AudioSharing = () => {
 
     socketRef.current.on('connect_error', (error: Error) => {
       console.error('Connection error:', error);
-      cleanupAudio();
+      cleanupAudio(true);
     });
 
     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({
@@ -147,7 +167,7 @@ const AudioSharing = () => {
           peerRef.current = createPeer(stream, false);
         } catch (error) {
           console.error('Error accessing audio devices:', error);
-          cleanupAudio();
+          cleanupAudio(true);
         }
       }
 
@@ -156,7 +176,7 @@ const AudioSharing = () => {
           peerRef.current.signal(data as SimplePeer.SignalData);
         } catch (error) {
           console.error('Error signaling peer:', error);
-          cleanupAudio();
+          cleanupAudio(true);
         }
       }
     });
@@ -191,10 +211,39 @@ const AudioSharing = () => {
       }
     } catch (error) {
       console.error('Error toggling audio:', error);
-      cleanupAudio();
+      cleanupAudio(true);
     }
   };
 
+  // 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