From 76c1e848a52e2a2ef74c0b84aada269a335641d6 Mon Sep 17 00:00:00 2001 From: jiho-bae Date: Fri, 3 Dec 2021 15:17:57 +0900 Subject: [PATCH 1/8] =?UTF-8?q?Refactor:=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?= =?UTF-8?q?=EB=B8=8C=EB=9D=BC=EC=9A=B0=EC=A0=80=20=EC=9D=B4=ED=83=88?= =?UTF-8?q?=EC=8B=9C=20=EC=9D=B8=EC=9B=90=EA=B0=90=EC=86=8C=20api=20?= =?UTF-8?q?=EC=9A=94=EC=B2=AD=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 사용자가 새로고침/브라우저 종료를 통한 브라우저 이탈시 인원감소 api 요청을 삭제했습니다. - 이제 서버에서 disconnect 이벤트를 기반으로 수행하게 됩니다. --- client/src/pages/Campfire/Campfire.tsx | 2 -- client/src/pages/Tadak/Tadak.tsx | 2 -- 2 files changed, 4 deletions(-) diff --git a/client/src/pages/Campfire/Campfire.tsx b/client/src/pages/Campfire/Campfire.tsx index 27cc96b9..5cfe6698 100644 --- a/client/src/pages/Campfire/Campfire.tsx +++ b/client/src/pages/Campfire/Campfire.tsx @@ -12,7 +12,6 @@ import BGMContextProvider from '@contexts/bgmContext'; import { useUser } from '@contexts/userContext'; import { RoomType } from '@utils/constant'; import { RoomInfoType } from '@src/types'; -import { postLeaveRoom } from '@src/apis'; interface LocationProps { pathname: string; @@ -35,7 +34,6 @@ const Campfire = ({ location }: RoomProps): JSX.Element => { useEffect(() => { if (!userInfo.login) { - postLeaveRoom(uuid); history.goBack(); return; } diff --git a/client/src/pages/Tadak/Tadak.tsx b/client/src/pages/Tadak/Tadak.tsx index 7e68795e..4a412f41 100644 --- a/client/src/pages/Tadak/Tadak.tsx +++ b/client/src/pages/Tadak/Tadak.tsx @@ -9,7 +9,6 @@ import VideoList from '@components/video/VideoList'; import Loader from '@components/common/Loader'; import { useUser } from '@contexts/userContext'; import { RoomInfoType } from '@src/types'; -import { postLeaveRoom } from '@src/apis'; interface LocationProps { pathname: string; @@ -31,7 +30,6 @@ const Tadak = ({ location }: TadakProps): JSX.Element => { useEffect(() => { if (!userInfo.login) { - postLeaveRoom(uuid); history.goBack(); return; } From 34d88c1ecc4da206f6578d2058736a88c41c3fb7 Mon Sep 17 00:00:00 2001 From: jiho-bae Date: Fri, 3 Dec 2021 15:27:33 +0900 Subject: [PATCH 2/8] =?UTF-8?q?Design:=20=EB=A9=94=EC=9D=B8=20=EB=A3=B8?= =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=EC=B5=9C=EC=86=8C=EB=84=88=EB=B9=84=20?= =?UTF-8?q?=EB=B6=80=EC=97=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 룸카드와 룸카드의 개발필드 부분에 최소너비를 부여해 찌그러지지 않도록 디자인 개선 --- client/src/components/room/RoomCard/style.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/src/components/room/RoomCard/style.ts b/client/src/components/room/RoomCard/style.ts index e3e52506..d487d24c 100644 --- a/client/src/components/room/RoomCard/style.ts +++ b/client/src/components/room/RoomCard/style.ts @@ -7,6 +7,7 @@ export const RoomCardWrapper = styled.div` flex-direction: column; background-color: ${({ theme }) => theme.colors.white}; padding: ${({ theme }) => theme.paddings.base}; + min-width: 15rem; width: 100%; height: ${ROOM_CARD.height}rem; border-radius: ${({ theme }) => theme.borderRadius.base}; @@ -77,6 +78,7 @@ export const RoomCardBottom = styled.div` `; export const RoomFieldType = styled.div<{ bgColor: DevFieldType }>` + min-width: 5.1rem; width: 6rem; height: 2rem; ${({ theme, bgColor }) => css` From 443584981005246a6b5254f7508d3df3ccd76831 Mon Sep 17 00:00:00 2001 From: jiho-bae Date: Sat, 4 Dec 2021 17:43:21 +0900 Subject: [PATCH 3/8] =?UTF-8?q?Fix:=20=ED=99=94=EB=A9=B4=EA=B3=B5=EC=9C=A0?= =?UTF-8?q?=EC=8B=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=EA=B0=80=20=EA=B9=9C?= =?UTF-8?q?=EB=B9=A1=EC=9D=B4=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - isLoading 상태를 도입하여, 초기에만 로더가 돌아가도록 수정 --- client/src/pages/Tadak/Tadak.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/client/src/pages/Tadak/Tadak.tsx b/client/src/pages/Tadak/Tadak.tsx index 4a412f41..b8dc90f9 100644 --- a/client/src/pages/Tadak/Tadak.tsx +++ b/client/src/pages/Tadak/Tadak.tsx @@ -22,7 +22,8 @@ interface TadakProps { const Tadak = ({ location }: TadakProps): JSX.Element => { const { agoraAppId, agoraToken, uuid, owner, maxHeadcount } = location?.state; const [users, setUsers] = useState([]); - const [start, setStart] = useState(false); + const [start, setStart] = useState(false); + const [isLoading, setIsLoading] = useState(true); const client = useClient(); const { ready, tracks } = useMicrophoneAndCameraTracks(); const userInfo = useUser(); @@ -72,6 +73,7 @@ const Tadak = ({ location }: TadakProps): JSX.Element => { await tracks[1].setEnabled(false); await tracks[0].setEnabled(false); } + setIsLoading(false); setStart(true); }; @@ -83,14 +85,14 @@ const Tadak = ({ location }: TadakProps): JSX.Element => { return ( - {!start ? ( + {isLoading ? ( ) : ( <> - {tracks && } - {tracks && } + {start && tracks && } + {ready && tracks && } )} From b71dfdac0a7f6300eb2d23fcd459f0e670291b50 Mon Sep 17 00:00:00 2001 From: jiho-bae Date: Sat, 4 Dec 2021 17:51:27 +0900 Subject: [PATCH 4/8] =?UTF-8?q?Fix:=20#302=20-=20=ED=99=94=EB=A9=B4?= =?UTF-8?q?=EA=B3=B5=EC=9C=A0=EB=A5=BC=20=EC=8B=9C=EB=8F=84=ED=95=A0=20?= =?UTF-8?q?=EB=95=8C=20=EC=83=88=EB=A1=9C=EC=9A=B4=20=EC=84=A4=EC=A0=95?= =?UTF-8?q?=EC=9D=84=20=EB=B0=98=EC=98=81=ED=95=98=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 버그의 내용은 이슈에 담겨있습니다. - createScrenVideoTrack이 비디오/오디오 권한과는 달리 일회성 허가를 받지 않는 듯 합니다. - 그리하여 새로운 변수를 생성해서, 매번 실행할 때 마다 다른 스트림을 가지도록 변경했습니다. --- client/src/components/video/config.ts | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/client/src/components/video/config.ts b/client/src/components/video/config.ts index 8a0ea086..b2e8a5c6 100644 --- a/client/src/components/video/config.ts +++ b/client/src/components/video/config.ts @@ -4,6 +4,9 @@ import { createMicrophoneAndCameraTracks, createMicrophoneAudioTrack, createScreenVideoTrack, + ILocalAudioTrack, + ILocalVideoTrack, + AgoraRTCError, } from 'agora-rtc-react'; const config: ClientConfig = { @@ -14,12 +17,19 @@ const config: ClientConfig = { const useClient = createClient(config); const useMicrophoneAndCameraTracks = createMicrophoneAndCameraTracks(); const useMicrophoneTrack = createMicrophoneAudioTrack(); -const useScreenVideoTrack = createScreenVideoTrack( - { - encoderConfig: '1080p_1', - optimizationMode: 'detail', - }, - 'disable', -); +const useScreenVideoTrack = (): { + ready: boolean; + tracks: ILocalVideoTrack | [ILocalVideoTrack, ILocalAudioTrack]; + error: AgoraRTCError | null; +} => { + const screenShare = createScreenVideoTrack( + { + encoderConfig: '1080p_1', + optimizationMode: 'detail', + }, + 'disable', + ); + return screenShare(); +}; export { useClient, useMicrophoneAndCameraTracks, useMicrophoneTrack, useScreenVideoTrack }; From 163e319e788f8f11af05c4f2c65aa254bc14ae6c Mon Sep 17 00:00:00 2001 From: jiho-bae Date: Sat, 4 Dec 2021 17:56:40 +0900 Subject: [PATCH 5/8] =?UTF-8?q?Refactor:=20=EC=8A=A4=ED=81=AC=EB=A6=B0?= =?UTF-8?q?=EA=B3=B5=EC=9C=A0=EB=B2=84=ED=8A=BC=20=ED=95=B8=EB=93=A4?= =?UTF-8?q?=EB=9F=AC=ED=95=A8=EC=88=98=20callback=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 스크린공유버튼의 핸들러함수를 콜백처리하였습니다. - 컴포넌트가 리렌더링되어도 함수가 재생성되지 않습니다. --- client/src/components/video/VideoController/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/src/components/video/VideoController/index.tsx b/client/src/components/video/VideoController/index.tsx index dd66b40d..31ad3bf4 100644 --- a/client/src/components/video/VideoController/index.tsx +++ b/client/src/components/video/VideoController/index.tsx @@ -43,7 +43,9 @@ const VideoController = ({ tracks, setStart, uuid, ownerId }: VideoControllerPro } }; - const handleScreenShare = () => setScreenShare(!screenShare); + const handleScreenShare = useCallback(() => { + setScreenShare((prev) => !prev); + }, []); const leaveChannel = useCallback(async () => { if (ownerId === user.id) { From fb648bf229612aa2723b7b4028713b8d046e9b28 Mon Sep 17 00:00:00 2001 From: jiho-bae Date: Sat, 4 Dec 2021 17:59:35 +0900 Subject: [PATCH 6/8] =?UTF-8?q?Fix:=20#303=20-=20=ED=99=94=EB=A9=B4?= =?UTF-8?q?=EA=B3=B5=EC=9C=A0=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 기존에 타닥타닥방에 isLoading 변수를 도입하여 화면깜빡임 문제를 해결했습니다. - 화면공유시 타닥타닥방의 start 상태를 변경하지 않습니다. - 트랙이 종료되었을때(화면공유를 끊었을 때) 트랙을 닫도록 합니다. - 그리고 최종적으로 screenshare 상태를 false로 바꿔 screenshare 컴포넌트를 비활성화합니다. - unmount시에는 트랙이 남아있을때만 퍼블리시 해제 및 트랙을 닫습니다. - 바뀐 useScreenVideoTrack 함수를 사용하므로 매번 공유시마다 새로운 스트림이 생성됩니다. --- client/src/components/video/Screenshare/index.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/client/src/components/video/Screenshare/index.tsx b/client/src/components/video/Screenshare/index.tsx index 30f47bfb..a45ad9de 100644 --- a/client/src/components/video/Screenshare/index.tsx +++ b/client/src/components/video/Screenshare/index.tsx @@ -22,24 +22,27 @@ const ScreenShare = ({ useEffect(() => { const pulishScreenShare = async () => { - setStart(false); await client.unpublish(preTracks[1]); await client.publish(tracks); - setStart(true); if (!Array.isArray(tracks)) { tracks.on('track-ended', async () => { - setScreenShare(false); await client.unpublish(tracks); + tracks.close(); if (trackState.video) { await client.publish(preTracks[1]); } + setScreenShare(false); }); } }; - if (ready) pulishScreenShare(); + if (ready && tracks) pulishScreenShare(); if (error) setScreenShare(false); + return () => { - client.unpublish(tracks); + if (!error && !Array.isArray(tracks)) { + client.unpublish(tracks); + tracks.close(); + } }; }, [setStart, setScreenShare, screenShare, client, preTracks, trackState, tracks, ready, error]); From df801c866f439d4abf9a6ef17b78b31c965ff6ca Mon Sep 17 00:00:00 2001 From: jiho-bae Date: Sat, 4 Dec 2021 18:17:59 +0900 Subject: [PATCH 7/8] =?UTF-8?q?Fix:=20#303=20-=20=EC=B2=AB=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=EA=B3=B5=EC=9C=A0=EC=8B=9C=20unmount=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B8=ED=95=9C=20=ED=8A=B8=EB=9E=99=EB=8B=AB=ED=9E=98?= =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 화면공유시 간헐적으로 unmount에 달린 트랙닫힘로직이 수행되던 문제 - firstRenderRef 변수를 도입하여 트랙변화로 인한 첫 unmount시에, - 트랙닫힘로직을 수행하지 않도록 개선 - 두번째 unmount부터 화면닫힘로직이 수행되므로, - 화면공유 후 페이지 이탈시 기존의 트랙닫힘로직 실행 가능 --- client/src/components/video/Screenshare/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/client/src/components/video/Screenshare/index.tsx b/client/src/components/video/Screenshare/index.tsx index a45ad9de..a449cbe0 100644 --- a/client/src/components/video/Screenshare/index.tsx +++ b/client/src/components/video/Screenshare/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useRef } from 'react'; import { ICameraVideoTrack, IMicrophoneAudioTrack } from 'agora-rtc-react'; import { useClient, useScreenVideoTrack } from '@components/video/config'; @@ -19,6 +19,7 @@ const ScreenShare = ({ }: ScreenShareDivProps): JSX.Element => { const client = useClient(); const { ready, tracks, error } = useScreenVideoTrack(); + const firstRenderRef = useRef(true); useEffect(() => { const pulishScreenShare = async () => { @@ -39,6 +40,10 @@ const ScreenShare = ({ if (error) setScreenShare(false); return () => { + if (firstRenderRef.current) { + firstRenderRef.current = false; + return; + } if (!error && !Array.isArray(tracks)) { client.unpublish(tracks); tracks.close(); From b5d5711150b86b8c88d8aa11dcbc24d2ed771abe Mon Sep 17 00:00:00 2001 From: jiho-bae Date: Sat, 4 Dec 2021 18:53:18 +0900 Subject: [PATCH 8/8] =?UTF-8?q?Fix:=20=ED=99=94=EB=A9=B4=EA=B3=B5=EC=9C=A0?= =?UTF-8?q?=EB=90=9C=20=EB=B9=84=EB=94=94=EC=98=A4=EB=A5=BC=20=EB=88=84?= =?UTF-8?q?=EB=A5=BC=EC=8B=9C=EC=97=90=EB=A7=8C=20=EC=A0=84=EC=B2=B4?= =?UTF-8?q?=ED=99=94=EB=A9=B4=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 기존의 비디오를 구분하지 않던 방식에서 화면공유된 비디오를 누르면 전체화면으로 변경 --- client/src/components/video/VideoCard/index.tsx | 7 ++++--- client/src/components/video/config.ts | 3 ++- client/src/utils/constant.ts | 4 +++- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/client/src/components/video/VideoCard/index.tsx b/client/src/components/video/VideoCard/index.tsx index f6894ba6..fe1a1e12 100644 --- a/client/src/components/video/VideoCard/index.tsx +++ b/client/src/components/video/VideoCard/index.tsx @@ -7,7 +7,7 @@ import { AgoraVideoPlayer, } from 'agora-rtc-react'; import { VideoWrap, VolumeVisualizer } from './style'; -import { SPEAK } from '@utils/constant'; +import { SCREEN_SHARE_HEIGHT, SPEAK } from '@utils/constant'; import { useToast } from '@hooks/useToast'; import { TOAST_MESSAGE } from '@utils/constant'; @@ -69,8 +69,9 @@ const VideoCard = ({ videoTrack, audioTrack }: VideoCardProps): JSX.Element => { { - // eslint-disable-next-line @typescript-eslint/no-unused-expressions - videoTrack?.getMediaStreamTrack().readyState === 'live' && openFullscreen(); + if (videoTrack?.getCurrentFrameData()?.height === SCREEN_SHARE_HEIGHT) { + openFullscreen(); + } }} ref={videoRef}> {videoTrack && ( diff --git a/client/src/components/video/config.ts b/client/src/components/video/config.ts index b2e8a5c6..883aeec5 100644 --- a/client/src/components/video/config.ts +++ b/client/src/components/video/config.ts @@ -8,6 +8,7 @@ import { ILocalVideoTrack, AgoraRTCError, } from 'agora-rtc-react'; +import { SCREEN_SHARE_HEIGHT } from '@utils/constant'; const config: ClientConfig = { mode: 'rtc', @@ -24,7 +25,7 @@ const useScreenVideoTrack = (): { } => { const screenShare = createScreenVideoTrack( { - encoderConfig: '1080p_1', + encoderConfig: `${SCREEN_SHARE_HEIGHT}p_1`, optimizationMode: 'detail', }, 'disable', diff --git a/client/src/utils/constant.ts b/client/src/utils/constant.ts index 21fa7ca4..00e7c50b 100644 --- a/client/src/utils/constant.ts +++ b/client/src/utils/constant.ts @@ -34,6 +34,8 @@ export const INPUT = { export const TOAST_TIME = 2000; +export const SCREEN_SHARE_HEIGHT = 1080; + export const MODAL_NAME = { login: '로그인', join: '회원가입', @@ -86,7 +88,7 @@ export const TOAST_MESSAGE = { introduceHost: '호스트는 참가자를 강퇴할 수 있습니다.　 강퇴 당한 사용자는 다시 이 방에 들어올 수 없으니 신중하게 사용해주세요!', narcissism: '누구나 자기 자신을 좋아합니다...!', - infoDoubleClick: '더블 클릭 하면 어떤 일이 일어날까요...?', + infoDoubleClick: '화면공유된 블록을 더블 클릭 하면 어떤 일이 일어날까요...?', introFireAnimation: '자세히 보시면 불꽃이 일렁입니다...!', introMoon: '자세히 보시면 달이 반짝입니다...!', introSky: '자세히 보시면 별이 반짝이고 별똥별이 떨어집니다...!',