✨ feat: Implement initial layout for the student side in video chat

Created the initial layout for the student side in the video chat functionality.

Related issue: #150

Author: Regulus0811

src/app/classes/[cId]/[mId]/components/subComponents/LiveClassViewer.tsx

@@ -95,6 +95,8 @@
 
 // export default LiveClassViewer;
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// LiveClassViewer.tsx
 import React, {useEffect, useRef, useState} from 'react';
 
 interface LiveClassViewerProps {
@@ -105,11 +107,10 @@ interface LiveClassViewerProps {
 const LiveClassViewer: React.FC<LiveClassViewerProps> = ({classId, userId}) => {
   const [inClass, setInClass] = useState(false);
   const localVideoRef = useRef<HTMLVideoElement | null>(null);
-  const peerConnections = useRef<{[key: string]: RTCPeerConnection}>({});
-  const remoteVideoRefs = useRef<{[key: string]: HTMLVideoElement | null}>({});
+  const remoteVideoRef = useRef<HTMLVideoElement | null>(null);
+  const pcRef = useRef<RTCPeerConnection | null>(null);
   const wsRef = useRef<WebSocket | null>(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const iceCandidatesRef = useRef<{[key: string]: any[]}>({});
+  const iceCandidatesRef = useRef<any[]>([]);
 
   const startWebSocket = () => {
     const ws = new WebSocket(
@@ -119,27 +120,50 @@ const LiveClassViewer: React.FC<LiveClassViewerProps> = ({classId, userId}) => {
 
     ws.onopen = async () => {
       console.log('WebSocket connected');
+      iceCandidatesRef.current.forEach(candidate => {
+        ws.send(JSON.stringify({event: 'candidate', data: candidate}));
+      });
+      iceCandidatesRef.current = [];
+
+      if (pcRef.current) {
+        try {
+          const mediaStream = await navigator.mediaDevices.getUserMedia({
+            video: true,
+            audio: true,
+          });
+          mediaStream
+            .getTracks()
+            .forEach(track => pcRef.current?.addTrack(track, mediaStream));
+          if (localVideoRef.current) {
+            localVideoRef.current.srcObject = mediaStream;
+          }
+        } catch (error) {
+          console.error('Failed to start media stream', error);
+        }
+      }
     };
 
     ws.onmessage = async event => {
-      const {event: evt, data, from} = JSON.parse(event.data);
-      console.log('Message received:', evt, data, from);
-
-      if (evt === 'offer') {
-        const pc = createPeerConnection(from);
-        await pc.setRemoteDescription(new RTCSessionDescription(data));
-        const answer = await pc.createAnswer();
-        await pc.setLocalDescription(answer);
-        ws.send(JSON.stringify({event: 'answer', data: answer, to: from}));
-      } else if (evt === 'candidate') {
-        const pc = peerConnections.current[from];
-        if (pc) {
-          await pc.addIceCandidate(new RTCIceCandidate(data));
-        } else {
-          if (!iceCandidatesRef.current[from]) {
-            iceCandidatesRef.current[from] = [];
-          }
-          iceCandidatesRef.current[from].push(data);
+      const {event: evt, data} = JSON.parse(event.data);
+      console.log('Message received:', evt, data);
+      if (evt === 'offer' && pcRef.current) {
+        try {
+          console.log('Received offer:', data);
+          await pcRef.current.setRemoteDescription(
+            new RTCSessionDescription(data)
+          );
+          const answer = await pcRef.current.createAnswer();
+          await pcRef.current.setLocalDescription(answer);
+          ws.send(JSON.stringify({event: 'answer', data: answer}));
+        } catch (error) {
+          console.error('Failed to handle offer:', error);
+        }
+      } else if (evt === 'candidate' && pcRef.current) {
+        try {
+          console.log('Received candidate:', data);
+          await pcRef.current.addIceCandidate(new RTCIceCandidate(data));
+        } catch (error) {
+          console.error('Failed to add ICE candidate:', error);
         }
       }
     };
@@ -149,93 +173,184 @@ const LiveClassViewer: React.FC<LiveClassViewerProps> = ({classId, userId}) => {
     };
   };
 
-  const createPeerConnection = (peerId: string) => {
-    const pc = new RTCPeerConnection({
-      iceServers: [{urls: 'stun:stun.l.google.com:19302'}],
-    });
-    peerConnections.current[peerId] = pc;
+  useEffect(() => {
+    if (inClass) {
+      const pc = new RTCPeerConnection({
+        iceServers: [
+          {
+            urls: [
+              'stun:stun.l.google.com:19302',
+              'stun:stun1.l.google.com:19302',
+              'stun:stun2.l.google.com:19302',
+              'stun:stun3.l.google.com:19302',
+              'stun:stun4.l.google.com:19302',
+            ],
+          },
+        ],
+      });
+      pcRef.current = pc;
 
-    pc.onicecandidate = event => {
-      if (event.candidate) {
-        wsRef.current?.send(
-          JSON.stringify({
+      pc.onicecandidate = event => {
+        if (event.candidate) {
+          const candidateData = JSON.stringify({
             event: 'candidate',
-            data: event.candidate,
-            to: peerId,
-          })
-        );
-      }
-    };
-
-    pc.ontrack = event => {
-      if (!remoteVideoRefs.current[peerId]) {
-        remoteVideoRefs.current[peerId] = document.createElement('video');
-        remoteVideoRefs.current[peerId]!.autoplay = true;
-        remoteVideoRefs.current[peerId]!.playsInline = true;
-        document
-          .getElementById('remoteVideos')
-          ?.appendChild(remoteVideoRefs.current[peerId]!);
-      }
-      remoteVideoRefs.current[peerId]!.srcObject = event.streams[0];
-    };
-
-    if (iceCandidatesRef.current[peerId]) {
-      iceCandidatesRef.current[peerId].forEach(candidate => {
-        pc.addIceCandidate(new RTCIceCandidate(candidate));
-      });
-      iceCandidatesRef.current[peerId] = [];
-    }
+            data: event.candidate.toJSON(),
+          });
+          if (wsRef.current?.readyState === WebSocket.OPEN) {
+            wsRef.current.send(candidateData);
+          } else {
+            iceCandidatesRef.current.push(event.candidate.toJSON());
+          }
+        }
+      };
 
-    return pc;
-  };
+      pc.ontrack = event => {
+        if (remoteVideoRef.current) {
+          remoteVideoRef.current.srcObject = event.streams[0];
+        }
+      };
 
-  useEffect(() => {
-    if (inClass) {
       startWebSocket();
-
-      return () => {
-        Object.values(peerConnections.current).forEach(pc => pc.close());
-        if (wsRef.current) wsRef.current.close();
-        if (localVideoRef.current) localVideoRef.current.srcObject = null;
-        Object.values(remoteVideoRefs.current).forEach(video => {
-          if (video) video.srcObject = null;
-        });
-        remoteVideoRefs.current = {};
-      };
     }
+
+    return () => {
+      pcRef.current?.close();
+      wsRef.current?.close();
+    };
   }, [inClass]);
 
-  const handleJoinClass = async () => {
+  const handleJoinClass = () => {
     setInClass(true);
-    const mediaStream = await navigator.mediaDevices.getUserMedia({
-      video: true,
-      audio: true,
-    });
-    if (localVideoRef.current) {
-      localVideoRef.current.srcObject = mediaStream;
-    }
-    wsRef.current?.send(JSON.stringify({event: 'join', data: null}));
   };
 
   const handleLeaveClass = () => {
+    wsRef.current?.close();
+    pcRef.current?.close();
+    pcRef.current = null;
+    wsRef.current = null;
     setInClass(false);
+    if (localVideoRef.current) {
+      localVideoRef.current.srcObject = null;
+    }
+    if (remoteVideoRef.current) {
+      remoteVideoRef.current.srcObject = null;
+    }
   };
 
   return (
-    <div>
-      {!inClass ? (
-        <button onClick={handleJoinClass}>Join Class</button>
-      ) : (
-        <button onClick={handleLeaveClass}>Leave Class</button>
-      )}
+    <div className="flex flex-col items-center h-screen">
+      <div className="bg-[#ffffff] border border-gray-400 shadow-md rounded-lg p-6 w-80 flex flex-col items-center mb-8 mt-12">
+        {!inClass ? (
+          <button
+            onClick={handleJoinClass}
+            className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md"
+          >
+            수업 입장
+          </button>
+        ) : (
+          <button
+            onClick={handleLeaveClass}
+            className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-md"
+          >
+            수업 퇴장
+          </button>
+        )}
+      </div>
+
       {inClass && (
-        <div>
-          <video ref={localVideoRef} autoPlay playsInline muted />
-          <div id="remoteVideos"></div>
+        <div
+          className="flex flex-col items-center border border-gray-400 rounded-lg p-4 mb-8 overflow-y-auto"
+          style={{
+            height: '60vh',
+          }}
+        >
+          <div
+            className="flex flex-col items-center p-4 mb-8"
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+            }}
+          >
+            <video
+              controls
+              autoPlay
+              ref={localVideoRef}
+              playsInline
+              style={{width: '80%'}}
+            />
+            <input
+              type="text"
+              placeholder="이름 입력"
+              className="mt-2 px-3 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            />
+          </div>
+          <div
+            className="flex flex-col items-center p-4 mb-8"
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+            }}
+          >
+            <video
+              ref={remoteVideoRef}
+              autoPlay
+              playsInline
+              controls
+              style={{width: '80%'}}
+            />
+            <input
+              type="text"
+              placeholder="이름 입력"
+              className="mt-2 px-3 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            />
+          </div>
+          <div
+            className="flex flex-col items-center p-4 mb-8"
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+            }}
+          >
+            <video
+              className="h-full w-full rounded-lg"
+              controls
+              autoPlay
+              playsInline
+              style={{width: '80%'}}
+            />
+            <input
+              type="text"
+              placeholder="이름 입력"
+              className="mt-2 px-3 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            />
+          </div>
+          <div
+            className="flex flex-col items-center p-4 mb-8"
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+            }}
+          >
+            <video
+              className="h-full w-full rounded-lg"
+              controls
+              autoPlay
+              playsInline
+              style={{width: '80%'}}
+            />
+            <input
+              type="text"
+              placeholder="이름 입력"
+              className="mt-2 px-3 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            />
+          </div>
         </div>
       )}
     </div>
   );
 };
-
 export default LiveClassViewer;