refactor: 사용하지 않는 코드 삭제 (#392)

Author: wcho21

client/src/components/MeetingMediaBar/index.tsx

@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
 import useSocketContext from 'src/hooks/context/useSocketContext';
 import {
   MeetingMediaStream,
-  useMeetingMediaStreamsV2,
-} from 'src/hooks/useMeetingMediaStreamsV2';
+  useMeetingMediaStreams,
+} from 'src/hooks/useMeetingMediaStreams';
 
 import MeetingMedia from './MeetingMedia';
 import StreamButton from './StreamButton';
@@ -12,7 +12,7 @@ import style from './style.module.scss';
 function MeetingMediaBar() {
   const { workspaceSocket: socket } = useSocketContext();
   const [streams, setLocalAudio, setLocalVideo] =
-    useMeetingMediaStreamsV2(socket);
+    useMeetingMediaStreams(socket);
 
   const [isMicOn, setIsMicOn] = useState(true);
   const [isCamOn, setIsCamOn] = useState(true);

client/src/hooks/useMeetingMediaStreams.ts

@@ -1,50 +1,59 @@
-// DEPRECATED.
-// use 'useMeetingMediaStreamsV2' instead
-
 import { useEffect, useState } from 'react';
-import { Socket } from 'socket.io-client';
+import { Socket, io } from 'socket.io-client';
 import { STUN_SERVER } from 'src/constants/rtc';
 import RTC from 'src/utils/rtc';
-import { setTrack, TrackKind } from 'src/utils/trackSetter';
+import { setTrack } from 'src/utils/trackSetter';
+
+export interface MeetingMediaStream {
+  stream: MediaStream;
+  id: string;
+  type: 'local' | 'remote';
+  audioOn: boolean;
+  videoOn: boolean;
+}
+
+export type SetLocalAudio = (audioOn: boolean) => void;
+export type SetLocalVideo = (videoOn: boolean) => void;
 
 export function useMeetingMediaStreams(
   socket: Socket,
-): [Map<string, MediaStream>, (kind: TrackKind, turnOn: boolean) => void] {
-  const [mediaStreams, setMediaStreams] = useState<Map<string, MediaStream>>(
-    new Map(),
-  );
-  const [myStream, setMyStream] = useState<MediaStream>();
-
-  const setMyTrack = async (kind: TrackKind, turnOn: boolean) => {
-    if (!myStream) {
-      return;
-    }
-    setTrack(myStream, kind, turnOn);
-  };
+): [MeetingMediaStream[], SetLocalAudio, SetLocalVideo] {
+  const [meetingMediaStreams, setMeetingMediaStreams] = useState<
+    MeetingMediaStream[]
+  >([]);
+  const [localStream, setLocalStream] = useState<MediaStream>();
 
   const initRTC = async () => {
-    const userMedia = await navigator.mediaDevices.getUserMedia({
-      video: true,
-      audio: true,
-    });
-
-    setMyStream(userMedia);
-    setMediaStreams((prev) =>
-      copyMapWithOperation(prev, (map) => map.set('me', userMedia)),
+    const userMediaConstraints = { video: true, audio: true };
+    const userStream = await navigator.mediaDevices.getUserMedia(
+      userMediaConstraints,
     );
+    setLocalStream(userStream);
 
-    const rtc = new RTC(socket, STUN_SERVER, userMedia);
+    // note: local MeetingMediaStream has empty id
+    const localMeetingMediaStream: MeetingMediaStream = {
+      stream: userStream,
+      id: '',
+      type: 'local',
+      audioOn: true,
+      videoOn: true,
+    };
+    setMeetingMediaStreams((prev) => [...prev, localMeetingMediaStream]);
 
+    const rtc = new RTC(socket, STUN_SERVER, userStream);
     rtc.onMediaConnected((socketId, remoteStream) => {
-      setMediaStreams((prev) =>
-        copyMapWithOperation(prev, (map) => map.set(socketId, remoteStream)),
-      );
+      const remoteMeetingMediaStream: MeetingMediaStream = {
+        stream: remoteStream,
+        id: socketId,
+        type: 'remote',
+        audioOn: true,
+        videoOn: true,
+      };
+      setMeetingMediaStreams((prev) => [...prev, remoteMeetingMediaStream]);
     });
 
     rtc.onMediaDisconnected((socketId) => {
-      setMediaStreams((prev) =>
-        copyMapWithOperation(prev, (map) => map.delete(socketId)),
-      );
+      setMeetingMediaStreams((prev) => prev.filter((_) => _.id !== socketId));
     });
 
     rtc.connect();
@@ -54,15 +63,33 @@ export function useMeetingMediaStreams(
     initRTC();
   }, []);
 
-  return [mediaStreams, setMyTrack];
-}
+  const setLocalAudio: SetLocalAudio = async (audioOn) => {
+    if (!localStream) {
+      return;
+    }
+    setTrack(localStream, 'audio', audioOn);
+    socket.emit('audio_state_changed', audioOn);
+  };
+
+  const setLocalVideo: SetLocalVideo = async (videoOn) => {
+    if (!localStream) {
+      return;
+    }
+    setTrack(localStream, 'video', videoOn);
+    socket.emit('video_state_changed', videoOn);
+  };
+
+  socket.on('audio_state_changed', (socketId, audioOn) => {
+    setMeetingMediaStreams((prev) =>
+      prev.map((_) => (_.id === socketId ? { ..._, audioOn } : _)),
+    );
+  });
+
+  socket.on('video_state_changed', (socketId, videoOn) => {
+    setMeetingMediaStreams((prev) =>
+      prev.map((_) => (_.id === socketId ? { ..._, videoOn } : _)),
+    );
+  });
 
-// TODO: 코드 반복때문에 만든 함수. 더 좋은 방법 있으면 고치기
-function copyMapWithOperation<K, V>(
-  prev: Map<K, V>,
-  operation: (cur: Map<K, V>) => void,
-) {
-  const cur = new Map(prev);
-  operation(cur);
-  return cur;
+  return [meetingMediaStreams, setLocalAudio, setLocalVideo];
 }

client/src/hooks/useMeetingMediaStreamsV2.ts

@@ -5,14 +5,6 @@ function workspaceSocketServer(io: Server) {
   const namespace = io.of(/^\/workspace\/\d+$/);
 
   namespace.on('connection', (socket) => {
-    socket.on(WORKSPACE_EVENT.START_MEETING, () => {
-      namespace.emit(WORKSPACE_EVENT.START_MEETING);
-    });
-
-    socket.on(WORKSPACE_EVENT.END_MEETING, () => {
-      namespace.emit(WORKSPACE_EVENT.END_MEETING);
-    });
-
     socket.on(WORKSPACE_EVENT.SEND_HELLO, () => {
       const senderId = socket.id;