From 261bdaf7bf1fa4ecddc1608ade88ed463b5e6686 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sun, 10 Nov 2024 17:18:16 +0900 Subject: [PATCH 001/106] =?UTF-8?q?feat:=20=EC=A2=8B=EC=95=84=EC=9A=94=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EC=86=8C?= =?UTF-8?q?=EC=BC=93=EC=97=90=20thumbs=5Fup=20=EC=9D=B4=EB=B2=A4=ED=8A=B8?= =?UTF-8?q?=20=EB=B0=9C=EC=8B=A0=ED=95=98=EB=8F=84=EB=A1=9D=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/session/SessionToolbar.tsx | 3 +++ frontend/src/pages/SessionPage.tsx | 9 +++++++++ 2 files changed, 12 insertions(+) diff --git a/frontend/src/components/session/SessionToolbar.tsx b/frontend/src/components/session/SessionToolbar.tsx index 410f74e9..9d3df4e6 100644 --- a/frontend/src/components/session/SessionToolbar.tsx +++ b/frontend/src/components/session/SessionToolbar.tsx @@ -10,6 +10,7 @@ import { interface Props { handleVideoToggle: () => void; handleMicToggle: () => void; + handleThumbsUp: () => void; userVideoDevices: MediaDeviceInfo[]; userAudioDevices: MediaDeviceInfo[]; setSelectedVideoDeviceId: (deviceId: string) => void; @@ -20,6 +21,7 @@ interface Props { const SessionToolbar = ({ handleVideoToggle, handleMicToggle, + handleThumbsUp, userVideoDevices, userAudioDevices, setSelectedVideoDeviceId, @@ -55,6 +57,7 @@ const SessionToolbar = ({ {isMicOn ? : } + ); +}; + +export default ParticipantButton; From 4739a3f85fc55b25eb93f52cfe2e462a807fb1a7 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Mon, 11 Nov 2024 19:41:54 +0900 Subject: [PATCH 007/106] =?UTF-8?q?chore:=20=EC=BD=98=EC=86=94=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/src/socket/socket.gateway.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/backend/src/socket/socket.gateway.ts b/backend/src/socket/socket.gateway.ts index 63475c92..6e1f64d2 100644 --- a/backend/src/socket/socket.gateway.ts +++ b/backend/src/socket/socket.gateway.ts @@ -130,7 +130,6 @@ export class SocketGateway implements OnGatewayConnection, OnGatewayDisconnect { reaction: string; } ) { - console.log("현재 연결", socket); this.server .to(data.roomId) .emit("reaction", { senderId: socket.id, reaction: data.reaction }); From e875cf8120a3f5a56375b607c952e4a7c881cd54 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Mon, 11 Nov 2024 19:44:02 +0900 Subject: [PATCH 008/106] =?UTF-8?q?feat:=20=EB=A6=AC=EC=95=A1=EC=85=98=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 시행착오를 많이 하느라 커밋을 나누지 못했다. - 공감 기능 구현은 금방했는데 깜빡임 문제해결을 하느라 오래걸렸다. - ref를 전달하는 방식에서 stream을 전달하는 방식으로 수정 - stream 송출만을 담당하는 DisplayMediaStream 컴포넌트 분리 --- .../components/session/DisplayMediaStream.tsx | 32 +++++++ .../src/components/session/VideoContainer.tsx | 85 +++++++++++++------ frontend/src/pages/SessionPage.tsx | 76 ++++++++++------- 3 files changed, 134 insertions(+), 59 deletions(-) create mode 100644 frontend/src/components/session/DisplayMediaStream.tsx diff --git a/frontend/src/components/session/DisplayMediaStream.tsx b/frontend/src/components/session/DisplayMediaStream.tsx new file mode 100644 index 00000000..3a6564b6 --- /dev/null +++ b/frontend/src/components/session/DisplayMediaStream.tsx @@ -0,0 +1,32 @@ +import { useEffect, useRef } from "react"; + +interface DisplayMediaStreamProps { + mediaStream: MediaStream | null; + isLocal: boolean; +} +const DisplayMediaStream = ({ + mediaStream, + isLocal, +}: DisplayMediaStreamProps) => { + const videoRef = useRef(null); + + useEffect(() => { + if (mediaStream !== null && videoRef.current) { + videoRef.current.srcObject = mediaStream; + } else if (videoRef.current && mediaStream === null) { + videoRef.current.srcObject = null; + } + }, [mediaStream]); + + return ( +