From 7f4e46c53ac6f2494f4c89b69b3a933b165a271e Mon Sep 17 00:00:00 2001 From: today-is-first Date: Thu, 28 Nov 2024 14:54:43 +0900 Subject: [PATCH 1/7] =?UTF-8?q?chore:=20=ED=8C=8C=EC=9D=BC=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{rightSection => stream}/CameraSettingButton.tsx | 10 +++------- .../{rightSection => stream}/MikeSettingButton.tsx | 12 ++++-------- 2 files changed, 7 insertions(+), 15 deletions(-) rename packages/frontend/src/components/gamePage/{rightSection => stream}/CameraSettingButton.tsx (79%) rename packages/frontend/src/components/gamePage/{rightSection => stream}/MikeSettingButton.tsx (75%) diff --git a/packages/frontend/src/components/gamePage/rightSection/CameraSettingButton.tsx b/packages/frontend/src/components/gamePage/stream/CameraSettingButton.tsx similarity index 79% rename from packages/frontend/src/components/gamePage/rightSection/CameraSettingButton.tsx rename to packages/frontend/src/components/gamePage/stream/CameraSettingButton.tsx index 57b6840..65684f3 100644 --- a/packages/frontend/src/components/gamePage/rightSection/CameraSettingButton.tsx +++ b/packages/frontend/src/components/gamePage/stream/CameraSettingButton.tsx @@ -3,7 +3,7 @@ import CameraOn from '@/assets/images/CameraOn.svg?react'; import CameraOff from '@/assets/images/CameraOff.svg?react'; import { useLocalStreamStore } from '@/states/store/localStreamStore'; -export default function CameraSettingButton() { +export default function CameraSettingButton({ iconColor }: { iconColor: string }) { const { localStream } = useLocalStreamStore(); const [isCameraOn, setIsCameraOn] = useState(false); function handleCamera() { @@ -20,12 +20,8 @@ export default function CameraSettingButton() { className="p-4 w-[120px] bg-transparent rounded-lg flex flex-col items-center justify-center gap-2" onClick={handleCamera} > - {isCameraOn ? ( - - ) : ( - - )} -

+ {isCameraOn ? : } +

카메라 {isCameraOn ? ON : OFF}

diff --git a/packages/frontend/src/components/gamePage/rightSection/MikeSettingButton.tsx b/packages/frontend/src/components/gamePage/stream/MikeSettingButton.tsx similarity index 75% rename from packages/frontend/src/components/gamePage/rightSection/MikeSettingButton.tsx rename to packages/frontend/src/components/gamePage/stream/MikeSettingButton.tsx index 8645b8f..de70aea 100644 --- a/packages/frontend/src/components/gamePage/rightSection/MikeSettingButton.tsx +++ b/packages/frontend/src/components/gamePage/stream/MikeSettingButton.tsx @@ -3,7 +3,7 @@ import MikeOn from '@/assets/images/MikeOn.svg?react'; import MikeOff from '@/assets/images/MikeOff.svg?react'; import { useLocalStreamStore } from '@/states/store/localStreamStore'; -export default function MikeSettingButton() { +export default function MikeSettingButton({ iconColor }: { iconColor: string }) { const { localStream } = useLocalStreamStore(); const [isMikeOn, setIsMikeOn] = useState(false); function handleMike() { @@ -17,15 +17,11 @@ export default function MikeSettingButton() { }, [localStream]); return ( From 6b4ed9089595ec980a3cbd6c5d77d78dfb79d1d7 Mon Sep 17 00:00:00 2001 From: today-is-first Date: Thu, 28 Nov 2024 14:55:06 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20Svg=20currentColor=EB=A1=9C=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=83=89=20=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/assets/images/CameraOff.svg | 4 ++-- packages/frontend/src/assets/images/CameraOn.svg | 5 +++-- packages/frontend/src/assets/images/MikeOff.svg | 4 ++-- packages/frontend/src/assets/images/MikeOn.svg | 4 ++-- 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/frontend/src/assets/images/CameraOff.svg b/packages/frontend/src/assets/images/CameraOff.svg index 7853767..ba45ec4 100644 --- a/packages/frontend/src/assets/images/CameraOff.svg +++ b/packages/frontend/src/assets/images/CameraOff.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/frontend/src/assets/images/CameraOn.svg b/packages/frontend/src/assets/images/CameraOn.svg index caae596..40c945c 100644 --- a/packages/frontend/src/assets/images/CameraOn.svg +++ b/packages/frontend/src/assets/images/CameraOn.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/frontend/src/assets/images/MikeOff.svg b/packages/frontend/src/assets/images/MikeOff.svg index ea00064..95adf6d 100644 --- a/packages/frontend/src/assets/images/MikeOff.svg +++ b/packages/frontend/src/assets/images/MikeOff.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/frontend/src/assets/images/MikeOn.svg b/packages/frontend/src/assets/images/MikeOn.svg index f7843f3..edef5bc 100644 --- a/packages/frontend/src/assets/images/MikeOn.svg +++ b/packages/frontend/src/assets/images/MikeOn.svg @@ -1,3 +1,3 @@ - - + + From e55f0eb161eadf5e5f61c45fcd6cd301be748778 Mon Sep 17 00:00:00 2001 From: today-is-first Date: Thu, 28 Nov 2024 14:55:23 +0900 Subject: [PATCH 3/7] =?UTF-8?q?chore:=20=EA=B2=BD=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/gamePage/rightSection/SettingSection.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/components/gamePage/rightSection/SettingSection.tsx b/packages/frontend/src/components/gamePage/rightSection/SettingSection.tsx index 56eaf0a..a549c19 100644 --- a/packages/frontend/src/components/gamePage/rightSection/SettingSection.tsx +++ b/packages/frontend/src/components/gamePage/rightSection/SettingSection.tsx @@ -1,5 +1,5 @@ -import CameraSettingButton from '@/components/gamePage/rightSection/CameraSettingButton'; -import MikeSettingButton from '@/components/gamePage/rightSection/MikeSettingButton'; +import CameraSettingButton from '@/components/gamePage/stream/CameraSettingButton'; +import MikeSettingButton from '@/components/gamePage/stream/MikeSettingButton'; import LeaveButton from '@/components/gamePage/rightSection/LeaveButton'; export default function SettingSection() { From 4e0ee2d65d8537acf785259a8ecfc1795ec14b43 Mon Sep 17 00:00:00 2001 From: today-is-first Date: Thu, 28 Nov 2024 14:56:01 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20=EB=B9=84=EB=94=94?= =?UTF-8?q?=EC=98=A4/=EC=98=A4=EB=94=94=EC=98=A4=20=ED=86=A0=EA=B8=80=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 --- .../lobbyPage/VideoAudioTestButton.tsx | 21 +++++++++---- .../lobbyPage/VideoAudioTestModal.tsx | 31 +++++++++++++++++++ 2 files changed, 46 insertions(+), 6 deletions(-) create mode 100644 packages/frontend/src/components/lobbyPage/VideoAudioTestModal.tsx diff --git a/packages/frontend/src/components/lobbyPage/VideoAudioTestButton.tsx b/packages/frontend/src/components/lobbyPage/VideoAudioTestButton.tsx index 31ec3bb..3d29c54 100644 --- a/packages/frontend/src/components/lobbyPage/VideoAudioTestButton.tsx +++ b/packages/frontend/src/components/lobbyPage/VideoAudioTestButton.tsx @@ -1,12 +1,21 @@ import Button from '@/components/common/Button'; +import VideoAudioTestModal from '@/components/lobbyPage/VideoAudioTestModal'; +import { useState } from 'react'; export default function VideoAudioTestButton() { - function handleClick() {} + const [isModalOpen, setIsModalOpen] = useState(false); + const title = '비디오 및 오디오 테스트'; + function handleClick() { + setIsModalOpen(true); + } return ( - + <> + + {isModalOpen && setIsModalOpen(false)} />} + ); } diff --git a/packages/frontend/src/components/lobbyPage/VideoAudioTestModal.tsx b/packages/frontend/src/components/lobbyPage/VideoAudioTestModal.tsx new file mode 100644 index 0000000..6a957d5 --- /dev/null +++ b/packages/frontend/src/components/lobbyPage/VideoAudioTestModal.tsx @@ -0,0 +1,31 @@ +import VideoStream from '@/components/gamePage/stream/VideoStream'; +import { useLocalStreamStore } from '@/states/store/localStreamStore'; +import CameraSettingButton from '@/components/gamePage/stream/CameraSettingButton'; +import MikeSettingButton from '@/components/gamePage/stream/MikeSettingButton'; + +interface IVideoAudioTestModalProps { + onClose: () => void; + title: string; +} + +export default function VideoAudioTestModal({ onClose, title }: IVideoAudioTestModalProps) { + const localStream = useLocalStreamStore((state) => state.localStream); + return ( +
+
+

{title}

+ +
+ + +
+ +
+
+ ); +} From a0e825f986cf5de6d9e3ddc9a5b8837048dafd21 Mon Sep 17 00:00:00 2001 From: today-is-first Date: Thu, 28 Nov 2024 15:07:57 +0900 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=EC=98=A4=EB=94=94=EC=98=A4/?= =?UTF-8?q?=EB=B9=84=EB=94=94=EC=98=A4=20=ED=85=8C=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=84=A4=EC=A0=95=ED=95=9C=20=EA=B0=92=20?= =?UTF-8?q?=EB=B0=A9=20=EC=B0=B8=EA=B0=80=20=EC=8B=9C=20=EC=A0=81=EC=9A=A9?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/gamePage/rightSection/SettingSection.tsx | 4 ++-- .../src/components/gamePage/stream/CameraSettingButton.tsx | 2 +- .../src/components/gamePage/stream/MikeSettingButton.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/frontend/src/components/gamePage/rightSection/SettingSection.tsx b/packages/frontend/src/components/gamePage/rightSection/SettingSection.tsx index a549c19..9479180 100644 --- a/packages/frontend/src/components/gamePage/rightSection/SettingSection.tsx +++ b/packages/frontend/src/components/gamePage/rightSection/SettingSection.tsx @@ -5,8 +5,8 @@ import LeaveButton from '@/components/gamePage/rightSection/LeaveButton'; export default function SettingSection() { return (
- - + +
); diff --git a/packages/frontend/src/components/gamePage/stream/CameraSettingButton.tsx b/packages/frontend/src/components/gamePage/stream/CameraSettingButton.tsx index 65684f3..73b18a7 100644 --- a/packages/frontend/src/components/gamePage/stream/CameraSettingButton.tsx +++ b/packages/frontend/src/components/gamePage/stream/CameraSettingButton.tsx @@ -12,7 +12,7 @@ export default function CameraSettingButton({ iconColor }: { iconColor: string } if (camera) camera.enabled = !isCameraOn; } useEffect(() => { - const initSetting = !!localStream?.getVideoTracks()[0]; + const initSetting = !!localStream?.getVideoTracks()[0].enabled; setIsCameraOn(initSetting); }, [localStream]); return ( diff --git a/packages/frontend/src/components/gamePage/stream/MikeSettingButton.tsx b/packages/frontend/src/components/gamePage/stream/MikeSettingButton.tsx index de70aea..dd08f18 100644 --- a/packages/frontend/src/components/gamePage/stream/MikeSettingButton.tsx +++ b/packages/frontend/src/components/gamePage/stream/MikeSettingButton.tsx @@ -12,7 +12,7 @@ export default function MikeSettingButton({ iconColor }: { iconColor: string }) if (mike) mike.enabled = !isMikeOn; } useEffect(() => { - const initSetting = !!localStream?.getAudioTracks()[0]; + const initSetting = !!localStream?.getAudioTracks()[0].enabled; setIsMikeOn(initSetting); }, [localStream]); return ( From ab5cc8649330ec09275d9aca345bdf1da2104cc5 Mon Sep 17 00:00:00 2001 From: today-is-first Date: Thu, 28 Nov 2024 15:10:10 +0900 Subject: [PATCH 6/7] =?UTF-8?q?fix:=20=EB=A1=9C=EB=B9=84=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20settingSection=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/lobbyPage/SettingSection.tsx | 25 ------------------- .../frontend/src/pages/lobbyPage/index.tsx | 5 ---- 2 files changed, 30 deletions(-) delete mode 100644 packages/frontend/src/components/lobbyPage/SettingSection.tsx diff --git a/packages/frontend/src/components/lobbyPage/SettingSection.tsx b/packages/frontend/src/components/lobbyPage/SettingSection.tsx deleted file mode 100644 index 876197a..0000000 --- a/packages/frontend/src/components/lobbyPage/SettingSection.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import MikeOn from '@/assets/images/MikeOn.svg?react'; -import MikeOff from '@/assets/images/MikeOff.svg?react'; -import CameraOn from '@/assets/images/CameraOn.svg?react'; -import CameraOff from '@/assets/images/CameraOff.svg?react'; - -export default function SettingSection() { - return ( - <> -
-
- - - - 마이크 -
-
- - - - 마이크 -
-
- - ); -} diff --git a/packages/frontend/src/pages/lobbyPage/index.tsx b/packages/frontend/src/pages/lobbyPage/index.tsx index f86652e..6d33354 100644 --- a/packages/frontend/src/pages/lobbyPage/index.tsx +++ b/packages/frontend/src/pages/lobbyPage/index.tsx @@ -1,13 +1,11 @@ import { useEffect } from 'react'; import { useSocketStore } from '@/states/store/socketStore'; -import { useAuthStore } from '@/states/store/authStore'; import BackgroundImage from '@/components/layout/BackgroundImage'; import MainLogo from '@/assets/images/MainLogo.svg?react'; import RoomCreationButton from '@/components/lobbyPage/RoomCreationButton'; import RoomJoinButton from '@/components/lobbyPage/RoomJoinButton'; import VideoAudioTestButton from '@/components/lobbyPage/VideoAudioTestButton'; import Header from '@/components/layout/Header'; -import SettingSection from '@/components/lobbyPage/SettingSection'; import { useRoomStore } from '@/states/store/roomStore'; import { useChatStore } from '@/states/store/chatStore'; import { useLocalStreamStore } from '@/states/store/localStreamStore'; @@ -50,9 +48,6 @@ export default function LobbyPage() { -
- -
); From 45ae8252d8073e875eb04fc71d8e1aa34c578473 Mon Sep 17 00:00:00 2001 From: today-is-first Date: Thu, 28 Nov 2024 15:15:15 +0900 Subject: [PATCH 7/7] =?UTF-8?q?fix:=20user=5Fjoined,=20video=5Foffer=20?= =?UTF-8?q?=EB=8B=A8=EA=B3=84=EC=97=90=EC=84=9C=20=EC=83=88=EB=A1=9C?= =?UTF-8?q?=EC=9A=B4=20localStream=20=EC=83=9D=EC=84=B1=ED=95=98=EC=A7=80?= =?UTF-8?q?=20=EC=95=8A=EA=B2=8C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/states/store/signalingSocketStore.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/states/store/signalingSocketStore.ts b/packages/frontend/src/states/store/signalingSocketStore.ts index 1f2b31d..1740f53 100644 --- a/packages/frontend/src/states/store/signalingSocketStore.ts +++ b/packages/frontend/src/states/store/signalingSocketStore.ts @@ -52,7 +52,7 @@ export const useSignalingSocketStore = create((set, get) signalingSocket.on('user_joined', async ({ fromUserId, gsid }) => { console.log('[Client][📢] user_joined', fromUserId, gsid); - const localStream = await getVideoStream(); + const localStream = useLocalStreamStore.getState().localStream; const { setRemoteStream } = usePeerConnectionStore.getState(); const peerConnection = createPeerConnection({ fromUserId, @@ -85,7 +85,7 @@ export const useSignalingSocketStore = create((set, get) }); signalingSocket.on('video_offer', async ({ offer, fromUserId, gsid }) => { - const localStream = await getVideoStream(); + const localStream = useLocalStreamStore.getState().localStream; const { setRemoteStream } = usePeerConnectionStore.getState(); const peerConnection = createPeerConnection({ fromUserId,