Merge pull request #305 from boostcampwm-2021/dev

Release 1.0.4

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

server/api/src/builder/dev-field.builder.ts → server/api/src/builder/dev-field/dev-field.builder.ts

@@ -1,5 +1,5 @@
-import { BuilderCommon } from './builder';
-import { DevField } from '../domain/field/dev-field.entity';
+import { BuilderCommon } from '../builder';
+import { DevField } from '../../domain/field/dev-field.entity';
 
 export class DevFieldBuilder extends BuilderCommon<DevField> {
   constructor() {

server/api/src/builder/history.builder.ts → server/api/src/builder/history/history.builder.ts

@@ -1,7 +1,7 @@
 import { LocalDate } from 'js-joda';
-import { BuilderCommon } from './builder';
-import { User } from '../domain/user/user.entity';
-import { History } from '../domain/history/history.entity';
+import { BuilderCommon } from '../builder';
+import { User } from '../../domain/user/user.entity';
+import { History } from '../../domain/history/history.entity';
 
 export class HistoryBuilder extends BuilderCommon<History> {
   constructor() {

server/api/src/builder/index.ts

@@ -1,8 +1,8 @@
 export { RoomBuilder } from './room/room.builder';
 export { UserBuilder } from './user/user.builder';
-export { HistoryBuilder } from './history.builder';
-export { VisitBuilder } from './visit.builder';
-export { DevFieldBuilder } from './dev-field.builder';
+export { HistoryBuilder } from './history/history.builder';
+export { VisitBuilder } from './visit/visit.builder';
+export { DevFieldBuilder } from './dev-field/dev-field.builder';
 export { LoginRequestDtoBuilder } from './auth/login-request.dto.builder';
 export { UserResponseDtoBuilder } from './user/user-response.dto.builder';
 export { UserUpdateDtoBuilder } from './user/user-update.dto.builder';

server/api/src/builder/visit.builder.ts → server/api/src/builder/visit/visit.builder.ts

@@ -1,6 +1,6 @@
 import { LocalDate } from 'js-joda';
-import { BuilderCommon } from './builder';
-import { Visit } from '../domain/history/visit.entity';
+import { BuilderCommon } from '../builder';
+import { Visit } from '../../domain/history/visit.entity';
 export class VisitBuilder extends BuilderCommon<Visit> {
   constructor() {
     super(Visit);

server/api/src/domain/auth/service/auth.service.spec.ts

@@ -18,7 +18,7 @@ import { HistoryBuilder, LoginRequestDtoBuilder, UserBuilder, UserResponseDtoBui
 import { BadRequestException, HttpStatus, UnauthorizedException } from '@nestjs/common';
 import { UserException } from '../../../exception';
 import { LoginRequestDto } from '../dto/login-request.dto';
-import { Bcrypt } from '../../../utils/bcrypt.util';
+import { Bcrypt } from '../../../utils';
 import { User } from '../../user/user.entity';
 import { LocalDate } from 'js-joda';
 import { DevField } from '../../field/dev-field.entity';

server/api/src/domain/auth/service/auth.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 import { JwtService } from '@nestjs/jwt';
 import { LocalDate } from 'js-joda';
-import { Bcrypt } from '../../../utils/bcrypt.util';
+import { Bcrypt } from '../../../utils';
 import { UserBuilder, UserResponseDtoBuilder } from '../../../builder';
 import { DevFieldException, UserException } from '../../../exception';
 import { User } from '../../user/user.entity';

server/api/src/domain/base-time.entity.ts

@@ -1,5 +1,5 @@
 import { CreateDateColumn, Generated, PrimaryColumn, UpdateDateColumn } from 'typeorm';
-import { BigintValueTransformer } from '../transformer/bigint-value.transformer';
+import { BigintValueTransformer } from '../transformer';
 
 export abstract class BaseTimeEntity {
   @Generated('increment')

server/api/src/domain/history/history.entity.ts

@@ -1,6 +1,6 @@
 import { Column, Entity, ManyToOne, PrimaryGeneratedColumn } from 'typeorm';
 import { LocalDate } from 'js-joda';
-import { LocalDateTransformer } from '../../transformer/local-date.transformer.';
+import { LocalDateTransformer } from '../../transformer';
 import { User } from '../user/user.entity';
 
 @Entity()

server/api/src/domain/history/repository/visit.repository.ts

@@ -12,6 +12,6 @@ export class VisitRepository extends Repository<Visit> {
 
   async addVisitCount(count: number) {
     const visit: Visit = new VisitBuilder().setDate(LocalDate.now().minusDays(1)).setTotalVisit(count).build();
-    this.save(visit);
+    await this.save(visit);
   }
 }

server/api/src/domain/history/service/history.service.ts

@@ -34,10 +34,7 @@ export class HistoryService {
     const user: User = await this.userRepository.findUserByUserEmail(email);
     if (!user) throw UserException.userNotFound();
     const year = LocalDate.now().year();
-    const result: HistoryResponseDto = new HistoryResponseDto(
-      await this.historyRepository.getMonthHistoryByUser(user, year),
-    );
-    return result;
+    return new HistoryResponseDto(await this.historyRepository.getMonthHistoryByUser(user, year));
   }
 
   async getLastVisitCount() {

server/api/src/domain/history/visit.entity.ts

@@ -1,6 +1,6 @@
 import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm';
 import { LocalDate } from 'js-joda';
-import { LocalDateTransformer } from '../../transformer/local-date.transformer.';
+import { LocalDateTransformer } from '../../transformer';
 
 @Entity()
 export class Visit {

server/api/src/domain/user/controller/user.controller.ts

@@ -4,7 +4,6 @@ import {
   Req,
   Delete,
   Get,
-  Param,
   Patch,
   Post,
   UploadedFile,

server/api/src/domain/user/user.entity.ts

@@ -1,6 +1,6 @@
 import { Column, Entity, JoinColumn, ManyToOne, OneToMany, PrimaryGeneratedColumn } from 'typeorm';
 import { LocalDate } from 'js-joda';
-import { LocalDateTransformer } from '../../transformer/local-date.transformer.';
+import { LocalDateTransformer } from '../../transformer';
 import { DevField } from '../field/dev-field.entity';
 import { History } from '../history/history.entity';
 

server/api/src/transformer/index.ts

@@ -0,0 +1,3 @@
+export { BigintValueTransformer } from './bigint-value.transformer';
+export { LocalDateTransformer } from './local-date.transformer.';
+export { LocalDateTimeTransformer } from './local-date-time.transformer';

server/api/src/transformer/local-date-time.transformer.ts

@@ -1,6 +1,6 @@
 import { ValueTransformer } from 'typeorm';
 import { LocalDateTime } from 'js-joda';
-import { DateTimeUtil } from '../utils/date-time.util';
+import { DateTimeUtil } from '../utils';
 
 export class LocalDateTimeTransformer implements ValueTransformer {
   to(entityValue: LocalDateTime): Date | null {

server/api/src/transformer/local-date.transformer..ts

@@ -1,6 +1,6 @@
 import { ValueTransformer } from 'typeorm';
 import { LocalDate } from 'js-joda';
-import { DateTimeUtil } from '../utils/date-time.util';
+import { DateTimeUtil } from '../utils';
 
 export class LocalDateTransformer implements ValueTransformer {
   to(entityValue: LocalDate): Date | null {

server/api/src/utils/index.ts

@@ -0,0 +1,2 @@
+export { Bcrypt } from './bcrypt.util';
+export { DateTimeUtil } from './date-time.util';

server/api/test/mock.object.ts

@@ -1,4 +1,4 @@
-import { DevFieldBuilder } from '../src/builder/dev-field.builder';
+import { DevFieldBuilder } from '../src/builder/dev-field/dev-field.builder';
 import { RoomBuilder, UserBuilder } from '../src/builder';
 import { datatype, internet, lorem } from 'faker';
 import { RoomType } from '../src/domain/room/room.entity';

server/socket/package.json

@@ -12,7 +12,7 @@
     "start": "nest start",
     "start:dev": "set NODE_ENV=dev&&nest start --watch",
     "start:debug": "nest start --debug --watch",
-    "start:prod": "set NODE_ENV=prod&&nest start",
+    "start:prod": "set NODE_ENV=production&&nest start",
     "start:3000": "cross-env NODE_PORT=3000 nest start",
     "start:3001": "cross-env NODE_PORT=3001 nest start",
     "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",

server/socket/src/gateway/room.gateway.ts

@@ -10,7 +10,7 @@ import {
 import { Server, Socket } from 'socket.io';
 import { Logger } from '@nestjs/common';
 import { IMessage, IRoomRequest } from './room.interface';
-import { LocalDateTime, ZoneId } from '@js-joda/core';
+import { LocalDateTime} from '@js-joda/core';
 import { RoomEvent } from './room.event';
 import { RoomService } from './room.service';