🎨 refactor: Migrate video chat from P2P to SFU architecture using MediaSoup

- Replace P2P WebRTC implementation with MediaSoup-based SFU architecture
- Restructure LiveClass component for scalable video streaming:
  - Add ConnectionStatus for improved connection state management
  - Extract ControlButtons for better media control handling
  - Create VideoBox for unified video stream rendering
  - Implement MediaSoup producer/consumer pattern
- Enhance WebSocket signaling for SFU communication
- Add robust error handling and reconnection logic
- Improve stream management and cleanup

Technical Details:
- Switch from direct P2P connections to MediaSoup-based routing
- Implement proper stream producer/consumer lifecycle
- Add TypeScript interfaces for MediaSoup integration
- Update WebSocket protocol for SFU requirements

Dependencies:
- Add mediasoup-client
- Add @types/webrtc

Author: yuminn-k

package.json

@@ -26,11 +26,13 @@
     "@tanstack/react-query": "^5.17.10",
     "@types/event-source-polyfill": "^1.0.5",
     "@types/js-cookie": "^3.0.6",
+    "@types/webrtc": "^0.0.44",
     "axios": "^1.6.5",
     "date-fns": "^3.6.0",
     "event-source-polyfill": "^1.0.31",
     "ion-sdk-js": "^1.8.2",
     "js-cookie": "^3.0.5",
+    "mediasoup-client": "^3.7.17",
     "moment": "^2.30.1",
     "next": "^14.2.7",
     "react": "^18",

src/app/classes/[cId]/[mId]/components/manageSubComponents/ConnectionStatus.tsx

@@ -0,0 +1,36 @@
+import React, {memo} from 'react';
+
+interface ConnectionStatusProps {
+  state: 'connecting' | 'connected' | 'disconnected';
+}
+
+const ConnectionStatus: React.FC<ConnectionStatusProps> = memo(({state}) => {
+  const getStatusData = (): {color: string; text: string} => {
+    const statusMap = {
+      connected: {color: 'bg-green-500', text: '接続中'},
+      connecting: {color: 'bg-yellow-500', text: '接続試行中...'},
+      disconnected: {color: 'bg-red-500', text: '未接続'},
+    };
+    return statusMap[state];
+  };
+
+  const {color, text} = getStatusData();
+
+  return (
+    <div
+      className="flex items-center mb-4"
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+    >
+      <div
+        className={`w-3 h-3 rounded-full ${color} mr-2`}
+        aria-hidden="true"
+      />
+      <span className="text-sm text-gray-600">{text}</span>
+    </div>
+  );
+});
+
+ConnectionStatus.displayName = 'ConnectionStatus';
+export default ConnectionStatus;

src/app/classes/[cId]/[mId]/components/manageSubComponents/ControlButtons.tsx

@@ -0,0 +1,92 @@
+import React, {memo} from 'react';
+
+interface MediaState {
+  video: boolean;
+  audio: boolean;
+}
+
+interface ControlButtonsProps {
+  isTeacher: boolean;
+  isSharingScreen: boolean;
+  mediaState: MediaState;
+  isLoading?: boolean;
+  disabled?: boolean;
+  onEndClass: () => void;
+  onToggleScreen: () => void;
+  onToggleAudio: () => void;
+  onToggleVideo: () => void;
+}
+
+const ControlButtons: React.FC<ControlButtonsProps> = memo(
+  ({
+    isTeacher,
+    isSharingScreen,
+    mediaState,
+    isLoading = false,
+    disabled = false,
+    onEndClass,
+    onToggleScreen,
+    onToggleAudio,
+    onToggleVideo,
+  }) => {
+    const buttonClass = (active: boolean, color: string) =>
+      `${active ? `bg-${color}-500 hover:bg-${color}-600` : 'bg-gray-500'} 
+     text-white font-bold py-2 px-4 rounded-md transition-colors
+     disabled:opacity-50 disabled:cursor-not-allowed`;
+
+    return (
+      <div className="flex flex-col items-center gap-4">
+        <button
+          onClick={onEndClass}
+          disabled={disabled || isLoading}
+          className={buttonClass(true, 'red')}
+          aria-label="授業を終了する"
+        >
+          {isLoading ? '処理中...' : '授業終了'}
+        </button>
+
+        {isTeacher && (
+          <button
+            onClick={onToggleScreen}
+            disabled={disabled}
+            className={buttonClass(
+              isSharingScreen,
+              isSharingScreen ? 'yellow' : 'green'
+            )}
+            aria-label={
+              isSharingScreen ? '画面共有を停止する' : '画面共有を開始する'
+            }
+          >
+            {isSharingScreen ? '画面共有停止' : '画面共有開始'}
+          </button>
+        )}
+
+        <div className="flex justify-center gap-4">
+          <button
+            onClick={onToggleAudio}
+            disabled={disabled}
+            className={buttonClass(mediaState.audio, 'blue')}
+            aria-label={
+              mediaState.audio ? 'マイクをオフにする' : 'マイクをオンにする'
+            }
+          >
+            {mediaState.audio ? 'マイクオン' : 'マイクオフ'}
+          </button>
+          <button
+            onClick={onToggleVideo}
+            disabled={disabled}
+            className={buttonClass(mediaState.video, 'blue')}
+            aria-label={
+              mediaState.video ? 'カメラをオフにする' : 'カメラをオンにする'
+            }
+          >
+            {mediaState.video ? 'カメラオン' : 'カメラオフ'}
+          </button>
+        </div>
+      </div>
+    );
+  }
+);
+
+ControlButtons.displayName = 'ControlButtons';
+export default ControlButtons;