Merge pull request #273 from boostcampwm-2024/feat/#251/mediasoup-ref…

…actor

[Refactor] Context API를 통한 mediasoup 관련 로직 분리

apps/media/src/mediasoup/mediasoup.service.ts

@@ -109,9 +109,15 @@ export class MediasoupService implements OnModuleInit {
     const peer = room.getPeer(socketId);
     const transport = peer.getTransport(transportId);
 
-    const producer = await transport.produce({ kind, rtpParameters, appData });
+    const producer = await transport.produce({
+      kind,
+      rtpParameters,
+      appData,
+      paused: appData.mediaTypes !== 'screen',
+    });
 
     peer.addProducer(producer);
+
     return { nickname: peer.nickname, producerId: producer.id, paused: producer.paused };
   }
 
@@ -126,10 +132,15 @@ export class MediasoupService implements OnModuleInit {
     const peer = room.getPeer(socketId);
     const transport = peer.getTransport(transportId);
 
+    const isExistConsumer = peer.checkConsumerByProducerId(producerId);
+
+    if (!isExistConsumer) {
+      return;
+    }
+
     const consumer = await transport.consume({
       producerId,
       rtpCapabilities,
-      paused: false,
     });
 
     consumer.on('producerclose', () => {

apps/media/src/room/peer.ts

@@ -29,6 +29,14 @@ export class Peer {
     return transport;
   }
 
+  checkConsumerByProducerId(producerId: string) {
+    const consumer = Array.from(this.consumers.values()).find(
+      (consumer) => consumer.producerId === producerId
+    );
+
+    return !Boolean(consumer);
+  }
+
   addProducer(producer: types.Producer) {
     this.producers.set(producer.id, producer);
   }

apps/media/src/signaling/signaling.gateway.ts

@@ -91,14 +91,13 @@ export class SignalingGateway implements OnGatewayDisconnect {
   ): Promise<client.CreateConsumerRes> {
     const { transportId, producerId, roomId, rtpCapabilities } = createConsumerDto;
 
-    const createConsumerRes = this.mediasoupService.consume(
+    return this.mediasoupService.consume(
       client.id,
       producerId,
       roomId,
       transportId,
       rtpCapabilities
     );
-    return createConsumerRes;
   }
 
   @SubscribeMessage(SOCKET_EVENTS.getProducer)
@@ -133,6 +132,7 @@ export class SignalingGateway implements OnGatewayDisconnect {
     @MessageBody() changeProducerState: server.ChangeProducerStateDto
   ) {
     const { roomId, producerId, status } = changeProducerState;
+
     this.mediasoupService.changeProducerStatus(client.id, changeProducerState);
 
     if (status === STREAM_STATUS.pause) {

apps/web/.eslintrc.cjs

@@ -42,5 +42,7 @@ module.exports = {
     'no-multiple-empty-lines': ['error', { max: 1 }],
     'import/no-duplicates': 'error',
     'no-console': 'error',
+    'jsx-a11y/click-events-have-key-events': 'off',
+    'jsx-a11y/no-static-element-interactions': 'off',
   },
 };

apps/web/src/components/live/ControlBar/index.tsx

@@ -1,3 +1,5 @@
+import { SOCKET_EVENTS } from '@repo/mediasoup';
+
 import CameraOffIc from '@/assets/icons/camera-off.svg?react';
 import CameraOnIc from '@/assets/icons/camera-on.svg?react';
 import ExitIc from '@/assets/icons/exit.svg?react';
@@ -7,51 +9,85 @@ import ScreenOffIc from '@/assets/icons/screen-off.svg?react';
 import ScreenOnIc from '@/assets/icons/screen-on.svg?react';
 import ToggleButton from '@/components/live/ControlBar/ToggleButton';
 import ExitDialog from '@/components/live/ExitDialog';
+import { useLocalStreamAction, useLocalStreamState } from '@/contexts/localStream/context';
+import { useMediasoupAction, useMediasoupState } from '@/contexts/mediasoup/context';
 import useModal from '@/hooks/useModal';
 
-interface ControlBarProps {
-  isVideoPaused: boolean;
-  isAudioMuted: boolean;
-  isScreenSharing: boolean;
-  toggleVideo: () => void;
-  toggleAudio: () => void;
-  toggleScreenShare: () => void;
-  handleExit: (isOwner: boolean) => void;
-}
-
-const ControlBar = (props: ControlBarProps) => {
-  const {
-    isVideoPaused,
-    isAudioMuted,
-    isScreenSharing,
-    toggleVideo,
-    toggleAudio,
-    toggleScreenShare,
-    handleExit,
-  } = props;
-
+const ControlBar = () => {
   const { isOpen, onClose, onOpen } = useModal();
 
+  const { socketRef } = useMediasoupState();
+  const { video, screen, audio } = useLocalStreamState();
+
+  const { disconnect } = useMediasoupAction();
+  const { closeStream, pauseStream, resumeStream, startScreenStream } = useLocalStreamAction();
+
+  const toggleScreenShare = async () => {
+    const { paused, stream } = screen;
+
+    try {
+      if (stream && paused) {
+        closeStream('screen');
+      } else {
+        startScreenStream();
+      }
+    } catch (_) {
+      closeStream('screen');
+    }
+  };
+
+  const toggleVideo = () => {
+    const { paused, stream } = video;
+
+    if (!stream) return;
+
+    if (paused) {
+      resumeStream('video');
+    } else {
+      pauseStream('video');
+    }
+  };
+
+  const toggleAudio = () => {
+    const { paused, stream } = audio;
+
+    if (!stream) return;
+
+    if (paused) {
+      resumeStream('audio');
+    } else {
+      pauseStream('audio');
+    }
+  };
+
+  const handleExit = (isOwner: boolean) => {
+    if (isOwner) {
+      socketRef.current?.emit(SOCKET_EVENTS.closeRoom);
+    }
+
+    disconnect();
+  };
+
   return (
     <>
       <div className="flex items-center justify-start gap-x-[14px]">
         <ToggleButton
           ActiveIcon={MicOnIc}
           InactiveIcon={MicOffIc}
           onToggle={toggleAudio}
-          isActivated={!isAudioMuted}
+          isActivated={!audio.paused}
         />
         <ToggleButton
           ActiveIcon={CameraOnIc}
           InactiveIcon={CameraOffIc}
           onToggle={toggleVideo}
-          isActivated={!isVideoPaused}
+          isActivated={!video.paused}
         />
         <ToggleButton
           ActiveIcon={ScreenOnIc}
           InactiveIcon={ScreenOffIc}
           onToggle={toggleScreenShare}
-          isActivated={!isScreenSharing}
+          isActivated={!screen.paused}
         />
         <ToggleButton type="exit" ActiveIcon={ExitIc} InactiveIcon={ExitIc} onToggle={onOpen} />
       </div>

apps/web/src/components/live/SubVideoGrid.tsx → apps/web/src/components/live/StreamView/SubVideoGrid.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
+import { StreamData } from '..';
 import VideoPlayer from './VideoPlayer';
 
-import { StreamData } from '.';
-
 interface SubVideoGridProps {
   videoStreamData: StreamData[];
   onVideoClick: (consumerId?: string) => void;

apps/web/src/components/live/VideoGrid.tsx → apps/web/src/components/live/StreamView/VideoGrid.tsx

@@ -1,11 +1,8 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { cva } from 'class-variance-authority';
-import { useEffect } from 'react';
 
-import VideoPlayer from './VideoPlayer';
+import { StreamData } from '@/components/live/StreamView';
 
-import { StreamData } from '.';
+import VideoPlayer from './VideoPlayer';
 
 const containerVariants = cva('flex-1 gap-5 overflow-hidden', {
   variants: {
@@ -42,9 +39,9 @@ function VideoGrid({
 
   return (
     <div className={containerVariants({ layout: isFixedGrid ? 'grid' : 'flex' })}>
-      {videoStreamData.map((streamData) => (
+      {videoStreamData.map((streamData, idx) => (
         <div
-          key={streamData.consumer?.id}
+          key={`${streamData.consumer?.id}${idx}`}
           className="aspect-video"
           style={{ width: videoWidth }}
           onClick={() => onVideoClick(streamData.consumer?.id)}

apps/web/src/components/live/VideoPlayer.tsx → apps/web/src/components/live/StreamView/VideoPlayer.tsx

@@ -3,10 +3,9 @@ import { useEffect, useRef, useState } from 'react';
 
 import MicOffIc from '@/assets/icons/mic-off.svg?react';
 import MicOnIc from '@/assets/icons/mic-on.svg?react';
-
-import Avatar from '../common/Avatar';
-import Badge from '../common/Badge';
-import Loading from '../common/Loading';
+import Avatar from '@/components/common/Avatar';
+import Badge from '@/components/common/Badge';
+import Loading from '@/components/common/Loading';
 
 const videoVariants = cva('h-full w-full rounded-lg object-cover transition-opacity duration-300', {
   variants: {