[FE] feat: Room UI구성, Room에 입장 한 후에도 캠, 오디오 켜고 끄는 기능 추가 #61
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
공통 - common 나머지는 section별로 폴더를 만들어서 분리
Room페이지 섹션별 컴포넌트 구성 (#60)
비디오, 오디오 on/off상태 공유를 위한 전역 상태 추가 (#60)
마이크 비디오 상태 컨트롤을 위한 공통 컴포넌트 작성 (#60)
Room 페이지에서 stream 상태를 조정할 수 있는 버튼/기능 추가 (#60)
Closed
3 tasks
MediaControlButton 컴포넌트 기능 테스트 추가 Video on/off 테스트추가 Audio on/off 테스트추가 (#60)
HBSPS
approved these changes
Nov 16, 2023
Comment on lines
8
to
11
| if (kind === 'mic' && state) return micOnSVG; | ||
| if (kind === 'mic' && !state) return micOffSVG; | ||
| if (kind === 'video' && state) return videoOnSVG; | ||
| if (kind === 'video' && !state) return videoOffSVG; |
There was a problem hiding this comment.
state 대신에 어떤 상태인지 명확하게 나타내면 좋을 것 같아요
예를 들면 isOn과 같은걸 사용할 수 있을 것 같아요!
There was a problem hiding this comment.
function selectImage(kind: 'mic' | 'video', isOn: boolean) {
if (kind === 'mic' && isOn) return micOnSVG;
if (kind === 'mic' && !isOn) return micOffSVG;
if (kind === 'video' && isOn) return videoOnSVG;
if (kind === 'video' && !isOn) return videoOffSVG;
throw new Error('잘못된 입력입니다!');
}반영했습니다!
Comment on lines
8
to
12
| mediaObject: MediaObject; | ||
| streamList: { | ||
| id: string; | ||
| stream: MediaStream; | ||
| }[]; |
There was a problem hiding this comment.
줄이 바뀌게 되어 한 눈에 파악하기 어려운 것 같아요
대신에 interface 또는 type으로 별도로 선언해도 좋지 않을까요?
There was a problem hiding this comment.
반영하였습니다!
type StreamType = {
id: string;
stream: MediaStream;
};코드리뷰 반영 state -> isOn 복잡한 타입 선언을 커스텀 타입 생성하여 표기
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR 설명
Room UI구성, Room에 입장 한 후에도 캠, 오디오 켜고 끄는 기능 추가
✅ 완료한 기능 명세
📸 스크린샷
고민과 해결과정
Video 높이 조정이 안되는 건에 대하여...
Video는 width를 기준으로 렌더링되고, height를 기준으로 렌더링 되지는 않는다.
이 문제를 해결하기위해 absolute를 활용해서 처리해주었다.
... <div className="relative w-full h-full"> <video ref={videoRef} autoPlay className="absolute object-cover w-full h-full rounded-3xl shadow-black drop-shadow-2xl" playsInline muted={muted} > <track kind="captions" /> </video>다만, 이렇게 했더니 방 참여전 setting컴포넌트에서는 높이가 명시되지 않아서 지정해줘야하는 문제가 발생했다.
일단 높이를 주는 형태로 구현해두었다.
비디오,오디오 on/off 상태 관리, 버튼 공통컴포넌트로 처리
설정 창에서 설정한 내용을 방 입장시에도 유지할 수 있어야 하므로 해당 부분을 전역으로 관리할 필요가 생겼다.
또한, 이걸 관리하는 버튼은 기능적으로는 똑같으므로, 하나의 공통 컴포넌트로 묶어줄 수 있었다.
kind가 audio냐 video냐에 따라 다른 기능, 다른 이미지를 보여주도록 분기시켰다.