Merge pull request #304 from jiho-bae/dev

방 인원 카운트방식 변경, 화면공유 버그 해결, 화면공유시에만 전체화면으로 변경

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`

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,27 +19,35 @@ const ScreenShare = ({
 }: ScreenShareDivProps): JSX.Element => {
   const client = useClient();
   const { ready, tracks, error } = useScreenVideoTrack();
+  const firstRenderRef = useRef(true);
 
   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 (firstRenderRef.current) {
+        firstRenderRef.current = false;
+        return;
+      }
+      if (!error && !Array.isArray(tracks)) {
+        client.unpublish(tracks);
+        tracks.close();
+      }
     };
   }, [setStart, setScreenShare, screenShare, client, preTracks, trackState, tracks, ready, error]);
 

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 => {
     <VideoWrap
       onClick={onClickInfo}
       onDoubleClick={() => {
-        // 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 && (

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) {

client/src/components/video/config.ts

@@ -4,7 +4,11 @@ import {
   createMicrophoneAndCameraTracks,
   createMicrophoneAudioTrack,
   createScreenVideoTrack,
+  ILocalAudioTrack,
+  ILocalVideoTrack,
+  AgoraRTCError,
 } from 'agora-rtc-react';
+import { SCREEN_SHARE_HEIGHT } from '@utils/constant';
 
 const config: ClientConfig = {
   mode: 'rtc',
@@ -14,12 +18,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: `${SCREEN_SHARE_HEIGHT}p_1`,
+      optimizationMode: 'detail',
+    },
+    'disable',
+  );
+  return screenShare();
+};
 
 export { useClient, useMicrophoneAndCameraTracks, useMicrophoneTrack, useScreenVideoTrack };

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;
     }

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;
@@ -23,15 +22,15 @@ interface TadakProps {
 const Tadak = ({ location }: TadakProps): JSX.Element => {
   const { agoraAppId, agoraToken, uuid, owner, maxHeadcount } = location?.state;
   const [users, setUsers] = useState<IAgoraRTCRemoteUser[]>([]);
-  const [start, setStart] = useState<boolean>(false);
+  const [start, setStart] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const client = useClient();
   const { ready, tracks } = useMicrophoneAndCameraTracks();
   const userInfo = useUser();
   const history = useHistory();
 
   useEffect(() => {
     if (!userInfo.login) {
-      postLeaveRoom(uuid);
       history.goBack();
       return;
     }
@@ -74,6 +73,7 @@ const Tadak = ({ location }: TadakProps): JSX.Element => {
         await tracks[1].setEnabled(false);
         await tracks[0].setEnabled(false);
       }
+      setIsLoading(false);
       setStart(true);
     };
 
@@ -85,14 +85,14 @@ const Tadak = ({ location }: TadakProps): JSX.Element => {
 
   return (
     <TadakWrapper>
-      {!start ? (
+      {isLoading ? (
         <Loader isWholeScreen={true} />
       ) : (
         <>
           <RoomSideBar uuid={uuid} hostNickname={owner?.nickname} maxHeadcount={maxHeadcount} />
           <TadakContainer>
-            {tracks && <VideoList users={users} tracks={tracks} />}
-            {tracks && <VideoController tracks={tracks} setStart={setStart} uuid={uuid} ownerId={owner?.id} />}
+            {start && tracks && <VideoList users={users} tracks={tracks} />}
+            {ready && tracks && <VideoController tracks={tracks} setStart={setStart} uuid={uuid} ownerId={owner?.id} />}
           </TadakContainer>
         </>
       )}

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: '자세히 보시면 별이 반짝이고 별똥별이 떨어집니다...!',