Feature(#82,#83,#84,#85) 화이트보드 다시보기 구현 #252
Merged
Conversation
This file contains hidden or 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
1차 프로토타입을 구현했습니다. 아직 화면 깜빡임과 같은 오류가 있습니다.
화면 비율 계산 과정에서의 문제점을 개선하여 더 매끄럽게 다시보기가 가능하도록 개선했습니다.
강의자 화이트보드를 불러오는 과정을 최적화하고, 불러오기 함수의 인자를 더 명시적으로 확인 할 수 있게 개선했습니다.
다시보기 페이지에서 일시정지가 가능하도록 개선했습니다.
브라우저창의 크기를 변경할 때 캔버스 크기를 조절할 수 있도록 최적화 했습니다.
경과시간을 progressMsTimeState을 이용하여 관리하도록 했습니다.
resize 이벤트를 강의자의 화이트보드 내용 수신과 별개로 작동하도록 해서 참여자 페이지와 리뷰어 페이지에서 일시정지 상황에서도 브라우저 크기에 따라 resize 이벤트가 일어나도록 했습니다.
프로그래스바의 상태를 prograssBarState로 관리하도록 개선했습니다.
프로그래스바의 재생/정지 버튼 클릭 시 강의를 재생 정지할 수 있고, 재생/정지 버튼 클릭시 재생, 정지 여부에 따라 버튼을 토글합니다.
프로그래스 바 클릭 이벤트와 review 페이지를 연결하고, 일시정지 중에 변경시 원래 일시정지 상태를 유지하도록 했습니다.
시간을 프로그래스 바나 logcontainer에서 변경할 때 화이트보드 내용도 함께 변경하도록 개선했습니다.
마지막 canvas 데이터 재생 이후 onFrame이 멈추는 문제를 해결했습니다.
사용하지 않는 주석과 파일을 삭제했습니다
디버깅에 사용한 console.log를 삭제했습니다.
✅ Deploy Preview for boarlog ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Byeonjin
reviewed
Dec 11, 2023
| @@ -22,46 +22,65 @@ export const saveCanvasData = async (fabricCanvas: fabric.Canvas, currentData: I | |||
| currentData.canvasJSON = newJSONData; | |||
| currentData.viewport = newViewport; | |||
| currentData.eventTime = Date.now() - startTime; | |||
| console.log(currentData.eventTime); | |||
There was a problem hiding this comment.
혹시 디버깅을 위한 로그라면 제거해도 좋을 것 같습니다!
Byeonjin
reviewed
Dec 11, 2023
Comment on lines
+25
to
+32
| interface ProgressBarProps { | ||
| className: string; | ||
| totalTime: number; | ||
| prograssBarState: "disabled" | "playing" | "paused"; | ||
| play: () => void; | ||
| pause: () => void; | ||
| updateProgressMsTime: (time: number) => void; | ||
| } |
Byeonjin
approved these changes
Dec 11, 2023
LellowMellow
approved these changes
Dec 11, 2023
Comment on lines
104
to
105
| console.log(replayFileArray); | ||
|
|
There was a problem hiding this comment.
이 부분도 불필요한 console.log라면 지워주셔도 좋을 것 같습니다.
| height: 0 | ||
| }; | ||
| // 추후 해당 다시보기의 전체 플레이 타임을 받아올 수 있어야 할 것 같습니다. | ||
| let TOTAL_MS_TIME_OF_REVIEW = 200000; |
There was a problem hiding this comment.
임시로 지정해둔 전체 플레이 타임이군요. 좋습니다.
logContainer 컴포넌트의 인자가 증가해서 생긴 배포 오류를 수정하고 리뷰 내용을 반영했습니다.
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.
작업 개요
벌써 100번째 PR이네요..!
화이트보드 다시보기 프로토타입 데이터 (frontend/public/dummyCanvasData.json)를 가지고 화이트보드 다시보기를 구현했습니다.
close #82
프롬프트의 내용을 클릭 시 해당 시간대로 재생 시간 이동할 수 있다.close #83
재생/정지 버튼 클릭 시 강의를 재생 정지할 수 있다. 재생/정지 버튼 클릭시 재생, 정지 여부에 따라 버튼을 토글한다.close #84
강의 재생 정도에 따라 재생바를 표시하고, 강의 진행 시간을 표시한다.close #85
강의 시간에 따라 화이트보드를 표시한다.해당 작업과 함께 참여자 페이지 화이트보드 렌더링 과정도 조금 더 최적화 했습니다.
서버에 API요청을 해서 음성과 화이트보드를 불러오는 과정을 마친 후에 새로운 PR을 올리겠습니다.
작업 사항
스크린샷
231211.mp4