단축키 기능, 재생 중 커서 클릭 시 원하는 위치에서 시작, solo/mute 기능 적용 #124
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
- trackSection에서 audioStartTime을 삭제했습니다. - channelStartTime을 사용하도록 변경했습니다.
- subscribe 부분의 주석을 삭제했습니다.
- CURRENT_POSITION_ZERO_CHANNEL 삭제 - play, pause 아이콘 변경을 위한 PLAY_OR_PAUSE_CHANNEL 추가 - solo 상태를 관리하기 위한 SOLO_CHANNEL 추가 - solo, mute 클릭 시 색상 변경
- changePlayPauseIcon으로 상태에 따라 아이콘 변경 - soloPlay로 전체 solo 선택 상태 변경
- Controller에 단축키에서 사용할 함수 정의. - playbackTool의 함수를 호출한다.
- 재생 중에 커서로 클릭한 마커 위치에서 다시 재생할 수 있는 audioCursorPlay 함수 호출. - play 함수가 호출됨.
- 함수가 받아온 값이 0일 때 0으로 값을 바꾸고 0이 아닐 때는 이전 값에 더해나가는 형식. - 오른쪽 끝으로 옮길 때도 더해나가는 방식이 되어 수정이 필요. 현재 마지막 위치 관련해서 스크롤과 관련해 수정이 필요해보여 메모만 해 둠.
- PlaybackToolClass로 옮겨 controller에서 사용할 수 있도록 함. - 정지와 반복을 제외한 모든 키는 단축키로 사용할 수 있음. - mute, solo에 대한 정보를 지역적으로 가지고 있음.
- 반복 버튼 클릭 시 색상 변화 - 한 번 클릭 시 초록색, 다시 클릭 시 흰색으로 돌아옴. - store에 isRepeat 추가 - playbackTools에서 IS_REPEAT_CHANNEL을 구독 중. - isRepeat 값을 변경할 때 publish 되어 상태 전달.
- 반복재생 버튼 클릭 시 시작 위치가 변경되도록 했습니다. - 재생, 일시정지 버튼 클릭 시 반복재생 버튼의 색상이 초기화되는 문제가 있습니다.
- 클릭 시 green color로 변경되도록 scss에 class를 추가.
- PlaybackTools에서 고민하던 흔적이 담긴 주석을 지웠습니다.
wooojini
approved these changes
Dec 10, 2020
Jeongeun-Choi
approved these changes
Dec 10, 2020
Comment on lines
+404
to
+406
| const ret = playbackTool.audioPlayOrPause(); | ||
|
|
||
| store.changePlayOrPauseIcon(ret); |
There was a problem hiding this comment.
저 ret이 의미하는게 무엇인가요?
There was a problem hiding this comment.
오디오 icon에 대한 정보입니다.
0을 전달받으면 아직 추가된 트랙이 없어서 재생이 안되고, 1을 전달받으면 재생이 되어서 icon이 일시정지로 변경되고 2를 전달받으면 일시정지가 되어서 재생버튼으로 변경됩니다.
변수명이 직관적이지 않았네요.. 수정하겠습니다!
Comment on lines
-422
to
+478
| changeCursorMarkerNumberTime, | ||
| // changeCursorMarkerNumberTime, |
There was a problem hiding this comment.
merge할 때 헷갈릴 것 같아서 일단 살려뒀었습니다 ㅎㅎ.
| this.sourceInfo = []; | ||
|
|
||
| this.trackList.forEach((track: Track) => { | ||
| if (track.trackSectionList.length != 0) { |
There was a problem hiding this comment.
!= 말고 !== 으로 해주시는게 더 정확하게 비교될 것 같아요😄
There was a problem hiding this comment.
넵! ==, != 대신 ===, !== 사용할게요~
|
solo도 여러 개 선택할 수 있도록 수정하고 앞으로 주석 삭제는 style로 commit 날리도록 하겠습니다! |
Songwonseok
approved these changes
Dec 10, 2020
| this.channels.set(channel, data); | ||
| this.notify(channel); | ||
| } | ||
|
|
||
| subscribe(channel: StoreChannelType, callback: Function, bindObj: Object): void { | ||
| let observerDatas: StoreObserverData[] | undefined = this.observers.get(channel); | ||
|
|
||
| // if(!observerDatas) observerDatas = [{callback, bindObj}]; |
There was a problem hiding this comment.
이런 경우에는 커밋타입을 chore대신 style로 주면 좋을 것 같아요
# --- COMMIT END ---
# <타입> 리스트
# style : 스타일 (코드 형식, 세미콜론 추가: 비즈니스 로직에 변경 없음)
# chore : 기타 변경사항 (빌드 스크립트 수정 등)
# ------------------
There was a problem hiding this comment.
사실 commit type 관련해서 저번에도 말씀을 해주셨었던 것 같은데 제가 적용을 안했네요 ㅠㅠ..
번거롭게 두 번 언급하게 해서 죄송합니다..
주의해서 사용하도록 하겠습니다!
|
|
||
| this.render(); | ||
| } | ||
|
|
||
| soloClickHandler(): void { |
There was a problem hiding this comment.
저번 회의에서 이벤트 리스너 관련해서 마지막에 Listener로 하기로 했던거 같아요
soloClickHandler -> soloClickListener 로 변경하시면 좋을 것 같아용
Comment on lines
108
to
110
| //store에 isRepeat이 있고 false일 때는 repeat이 아니라서 흰색이고 | ||
| //true가 되면 초록색으로 바꾸고싶은데. | ||
| //어떻게 하죵..? |
There was a problem hiding this comment.
PlaybackTools에서 렌더링하면서 isRepeat을 확인하고 class를 추가하는 건 어떨까요?
버튼 비활성화 상태일 때 이런식으로 css를 적용했어요
.disabled {
pointer-events: none !important;
path {
fill: gray
}
}
- AudioTrackOption에서 Handler로 쓰인 부분을 Listener로 변경했습니다.
Songwonseok
added a commit
that referenced
this pull request
Dec 11, 2020
* Update README.md * feat: [FE] 오디오 정지, 구간 건너뛰기 기능 구현 (#98) * feat : [FE] Audio Stop 구현 - 정지 버튼을 누르면 오디오 재생이 정지됨 - 마커의 위치가 0으로 이동 - 재생시간이 0으로 초기화 - controller에 setMarkerWidthToZero 메서드 추가 - store에 setMarkerWidthToZero 메서드 추가 - storetype으로 current_position_zero_channel 추가 - Marker는 해당 채널을 subscribe해 마커 위치를 0으로 초기화함 * chore : [FE] 공백 삭제 - enter가 두 번 들어간 부분 삭제 * feat : [FE] 건너뛴 시간이 음수일 때 처리 - markerTime이 음수가 됐을 때 0으로 변경 - playTime이 음수가 넘어왔을 때 재계산 * feat : [FE] 마커의 위치가 음수일 때 처리 - 마커가 움직인 위치가 음수가 넘어와 현재 위치와 계산 시 음수가 됐을 때 0으로 값 적용 * feat : [FE] 구간 건너뛰기 기능 구현 - 구간 건너뛰기 기능 구현 - quantum은 3으로 설정 - 앞으로 건너뛰기, 뒤로 건너뛰기 가능 - markerTime 변경을 audioContext.currentTime을 사용하는 것이 아닌 setInterval에서 주기적으로 변하게 하는 것으로 변경 - setInterval이 건너뛰기에서도 필요하여 따로 함수로 분리해 사용 * chore : [FE] 주석 삭제 - 주석을 몇 개 삭제했습니다. - 이해가 헷갈리는 부분들의 주석은 아직 삭제하지 않았습니다. * feat : [FE] 맨 앞으로 건너뛰기 - 기존의 stop, play 기능을 호출하여 맨 앞으로 건너뛸 수 있도록 구현 - stop을 했을 때 delay가 발생하기 때문에 setTimeout 내에서 play를 호출하도록 함 * feat : [FE] marker position 클릭으로 변경 시 재생 위한 위치 선정 - MarkerEventUtil의 clickMarkerListener에서 play 함수를 호충하면 됨. - 아직 play 함수를 다른 곳에서 호출할 수 없어서 위치를 잡아두기만 함. * fix : [FE] FastRewind 시의 시작 오류 수정 - fastRewind가 0이하로 됐을 때 waitTime 시간이 제대로 계산이 안되어 delay가 생김 - markerTime - QUANTUM이 음수가 됐을 때 waitTime을 0으로 설정. * refactor : [FE] 변수 이름 변경과 주석 삭제 - when, offset, duration 변수 이름을 waitTime, audioStartTime, playDuration으로 변경 - 주석 삭제 close #23, close #25 * feat: [FE] 구간 편집기능(잘라내기, 붙여넣기, 구간 자르기) 구현 (#101) * refactor: [FE] auto increment 초기값 1로 수정 - clipBoard에 저장되는 TrackSection과 구분하기 위하여 auto increment의 초기값을 1로 수정 * refactor: [FE] DeleteCommand CopyUtil 적용 - CopyUtil로 deleteList에 저장하도록 수정 * refactor: [FE] CopyUtil 파라미터 수정 - 파라미터로 id 정보를 받도록 수정했습니다. - 기존에는 clipBoard에 저장하는 용도로 만들었지만 DelelteCommand에서는 id 정보가 필요해서 파라미터로 추가했습니다. * feat: [FE] controller cutCommand() 구현 - 기존에 구현한 copy와 delete 기능을 합쳐서 cutCommand 함수를 구현했습니다. - 잘라내기는 섹션을 1개 선택했을 때만 가능하기 때문에 setClipBoard()의 return값을 boolean으로 수정하여 유효성 체크를 했습니다. * feat: [FE] EditTools 잘라내기 이벤트 등록 - 선택한 구간 잘라내기 기능을 위한 이벤트를 등록했습니다. * feat: [FE] 잘라내기 단축키 구현 - 1개의 구간을 선택하고 ctrl + X 를 누르면 cutCommand()가 실행되도록 구현했습니다. * feat: [FE] icons에 iconInfo 추가 - IconButton에 대한 hover 기능을 위해 아이콘 정보를 알려주는 iconInfo를 구현했습니다. - iconInfo는 iconType에 대한 상세정보를 알려줍니다. * style: [FE] hover시 icon 상세정보가 나오도록 style 적용 - visibility 속성을 이용하여 hover시에 아이콘에 대한 정보가 나오도록 style 적용했습니다. - transition-delay로 0.3초 후에 정보가 나오도록 했습니다. * feat: [FE] 시작위치, 종료위치 이동 단축키 추가 - 시작위치로 이동은 '[', 종료위치로 이동은 ']' 키로 동작하도록 keyType과 keyDown 이벤트를 추가했습니다. * refactor: [FE] publish 빈 인자값 명시적으로 표현 - 빈 인자를 넘기는 경우 null로 표현 * refacot: [FE] Command 클래스 index에서 export하도록 변경 - import하기 쉽게 index.js에서 export 관리 * feat: [FE] CopyUtil copyTrack 함수 구현 - Track을 deep copy하기 위한 함수 구현 * refactor: [FE] store setTrack, setTrackSection 수정 - setTrack은 파라미터의 따라 다르게 동작하도록 변경 - newTrack의 id값이 이미 TrackList에 존재하는 경우에는 값만 변경 - 존재하지 않는 경우에는 TrackList에 새로 추가 - setTrackSection - clipBoard에 복사된 trackSection은 0의 값을 가지므로 새로 id값을 변경 - undo에서 그전에 저장된 상태 그대로 변경해야 되기 때문에 trackSection id값을 그대로 사용 * feat: [FE] controller pasteCommand 함수 구현 - 붙여넣기는 현재 clipBoard에 복사된 구간의 정보를 사용합니다. - 현재는 1개의 구간을 선택한 경우에만 붙여넣기를 할 수 있습니다. - 추후 마커위치 관련해서 붙여넣기 기능 리팩토링 필요 - pasteCommand()에 대한 설명 - 1) focusList의 길이가 1인지 확인합니다. - 2) 붙여넣기의 대상이 되는 track과 clipBoard를 deep copy합니다. - 3) copySection의 trackStartTime을 현재 focus한 trackSection의 endTime으로 변경합니다. - 4) PasteCommand의 인자로 넘겨줍니다. * feat: [FE] PasteCommand 클래스 구현 - beforeTrack은 execute가 실행되기 전 저장하는 상태값입니다. - execute() - 1) track과 section의 정보를 deep copy합니다. - 2) track에서 newSection이 종료되는 시점인 endTime을 구합니다. - 3) newSection의 종료시간 전에 시작하는 section이 있는지 findIndex를 통해 index를 구합니다. - 4-1) firstDelayIndex가 -1이 아니라면 (존재) - endTime에서 해당 section의 시작시간을 빼서 얼마나 delayTime을 구합니다. - firstDelayIndex와 그 뒤에 존재하는 section들의 trackStartTime에 delayTime을 더해줍니다. - 4-2) firstDelayIndex가 -1인 경우 (존재x) - 바로 트랙에 newSection을 추가합니다. - undo() - 저장된 beforeTrack을 deep copy하여 setTrack으로 덮어씌우고 publish합니다. * feat: [FE] EditTools 붙여넣기 이벤트 등록 - 붙여넣기를 위한 click 이벤트 등록 * feat: [FE] 붙여넣기 단축키 기능 구현 - 클립보드에 복사된 상태에서 ctrl + v 를 누르면 붙여넣기 기능이 실행되도록 구현 * style: [FE] PlayBarUtil 주석 추가 - 나중에 리팩토링을 위한 주석추가 - PR merge하면서 지우겠습니다 * feat: [FE] SplitCommand 구현 - 구간 자르기 기능을 위한 SplitCommand 구현 - 클릭한 곳의 시간과 클릭한 trackSection의 trackStartTime으로 splitTime을 구했습니다. - splitTime을 기준으로 왼쪽 오른쪽 섹션을 생성하여 기존의 trackSection을 지우고 새로 track에 추가했습니다. - 기준이 되는 element는 audi-main-audio-track-container div로 설정했습니다. * feat: [FE] AudioTrackSection 컴포넌트 click 이벤트 분기처리 - cursorMode에 따라 focus되거나 split 하도록 조건문을 추가했습니다 * feat: [FE] controller splitCommand() 구현 - SplitCommand를 실행하는 함수를 구현했습니다. - getTrack은 자주 쓰일 것 같아서 구현했습니다. * feat: [FE] AudioTrack 자르기 모드 커트라인 구현 - Track 별로 cut-line 관리하도록 구현했습니다. - 평소에는 class="hide"로 되어있다가 cursorMode가 cut일 때, trackSection의 mousemove 이벤트로 hide가 해체됩니다. * feat: [FE] EventType mouseout 추가 - 마우스가 canvas 밖으로 나갔을 때 cut-line이 다시 hide 되도록 mouseout 이벤트를 추가했습니다. * feat: [FE] AudioTrackSection mousemove, mouseout 이벤트 구현 - TrackSection위에서 cursorMode가 자르기 모드일 경우 마우스 커서 위치에 따라 cut-line이 나오도록 구현했습니다. - mouseout은 커서가 TrackSection 밖 나갔을 경우 다시 hide하기 위한 기능입니다. * style: [FE] image cursor 위치 조정 - 커트라인과 마우스 커서의 위치의 싱크가 잘 맞지 않아서 수정했습니다. close #65, close #68, close #73, close #99, close #100 * feat: [FE] 재생바 마커 드래그로 이동하기 구현 (#102) * feat: [FE] PlayBarMarkerBlurZone 컴포넌트 구현 - 재생바 마커를 움직일시 바깥 영역의 색을 바꾸는 컴포넌트를 구현했습니다. * style: [FE] PlayBarMarkerBlurZone style 구현 - PlayBarMarkerBlurZone style을 적용했습니다. * style: [FE] PlayBarMarker style 수정 - cursor: pointer를 추가했습니다 - z-index: 4를 추가했습니다. * feat: [FE] playbarMarker 드래그 이벤트 추가 - 재생바 마커가 드래그로 움직이도록 했습니다. - 드래그시 바깥 영역에 색이 들어가도록 구현했습니다. * feat: [FE] playbar-event-zone 추가 - 재생바 이벤트가 적용되는 영역에 대한 css 설정 * feat: [FE] eventType 추가 - PLAYBAR_EVENT_ZONE_DROP eventkey 추가 * feat: [FE] 재생바 더블클릭시 바깥영역 색 지정 - 더블클릭 했을때도 바깥 영역의 색이 변경되도록 수정했습니다. Co-authored-by: Woojin Shin <sscj4459@naver.com> * refactor: [FE] AudioTrack Scroll 기능 구현 및 코드리팩토링 (#103) * feat: [FE] store 트랙 최대 너비 사이즈 추가 - 트랙의 최대 너비 사이즈로 모든 트랙의 너비사이즈를 조정하여 전체 트랙을 스크롤하기 위해 store에 최대 트랙 너비사이즈 추가 - 컨트롤러를 통해 최대 트랙 너비사이즈를 업데이트 할 수 있도록 인터페이스 추가 * feat: [FE] eventType에 mouseup, mousemove 이벤트 추가 - Zoombar 마우스 이벤트를 위한 이벤트 추가 * feat: [FE] ZoomBar 컴포넌트 제작 - 트랙 사이즈에 따라 동적으로 사이즈가 변하도록 제작 - 트랙 사이즈에 따라 스크롤하는 px값이 변하도록 제작 * feat: [FE] Main 컴포넌트에 트랙 스크롤 영역 추가 - Zoombar 컴포넌트로 스크롤 하기위한 영역 추가 * refactor: [FE] AudioTrack, AudioTrackSection 스크롤 가능하도록 수정 - 트랙의 너비사이즈를 최대 트랙의 너비 사이즈로 모두 변경하도록 수정 - 트랙영역을 overflow하면 스크롤이 가능하도록 수정 - 트랙의 너비사이즈가 변하면 store에 동기화 하도록 수정 * refactor: [FE] 코드 리팩토링 및 버그수정 - 트랙에 내용이 없는 경우에 Drag&Drop 메세지가 나타나도록 수정 - Zoombar EventType 추가 * style: [FE] 메인 페이지 레이아웃 수정 - 메인 페이지 노트북, 데스크탑 화면 레이아웃 깨지는 스타일 수정 * refactor: [FE] 루트 컴포넌트 이벤트 delegation 처리 추가 - 루트에서 이벤트 실행시 delegation을 적용한 부모 태그를 찾아서 이벤트를 실행하도록 코드 수정 * feat: [FE] TrackOptionType 정의 - TrackOption 컴포넌트 OptionType 정의 * feat: [FE] AudioTrackOptionClick EventKey 정의 - AudioTrackOption 이벤트 처리를 위한 이벤트 키 정의 * feat: [FE] AudioTrackOption 컴포넌트 제작 - AudioTrack에 따라 컴포넌트가 메인페이지가 추가되도록 제작 - Event Delegation으로 event-key를 찾을 수 있도록 수정 * feat: [FE] AudioTrackMenu 컴포넌트 제작 * style: [FE] 메인페이지 레이아웃 조정 - 헤더 레이아웃 데스크탑, 노트북에 따라 조정 close #10, close #12 * feat: [FE] compressor 전체 트랙 압축 기능 구현 (#116) * fix: [FE] PasteCommand trackStartTime 버그 해결 - paste된 TrackSection의 trackStartTime의 값이 이상하게 저장되는 버그 발견 - delayTime을 구할 때 trackStartTime이 아니라 audioStartTime으로 구해서 버그 발생했었음 - audioStartTime -> trackStartTime으로 변경하여 해결 * refactor: [FE] 모든 트랙 merge하여 save하도록 변경 - 파일 생성 단계 - 1) getTrackArrayBuffer()로 해당 트랙을 하나의 ArrayBuffer로 생성합니다. - 2) for문으로 모든 트랙의 ArrayBuffer를 배열에 담아줍니다. - 3) 모든 트랙의 ArrayBuffer가 담긴 arrayBufferList를 mergeTrackArrayBuffer()로 merge시켜줍니다. - 4) merge된 buffer를 ChannelDataToWave()로 wavBuffer로 만들어줍니다. - 5-1) wav로 저장 - wavBuffer를 file로 생성하고 버튼의 href를 변경 - 5-2) mp3로 저장 - wavBuffer를 lamejs 라이브러리로 mp3로 encoding 한 후에 file로 생성하여 href 변경 * fix: [FE] Paste 이후 선택구간 테두리 초기화 버그 - setSection으로 리렌더링 되면서 focus된 구간의 border style을 먹인 class가 사라지는 문제 발생 - trackSection 컴포넌트에서 initState()로 focusList의 section과 동일한 id를 가지고 있다면 focusInfo의 element를 갱신하고, classList.add('focused-section')를 해줬습니다. * feat: [FE] EditorMenu 컴포넌트 init 구현 - 모든 트랙에 trackSection이 하나도 없으면 저장하기 버튼을 비활성화 시켰습니다. - init에서 모든 track의 trackSectionList의 길이를 확인했습니다. * feat: [FE] store publish 추가 - EditorMenu의 리렌더링을 위한 publish 추가 * feat: [FE] controller getSourceList() 구현 - 모든 sourceList를 조회할 수 있는 함수 구현 * refactor: [FE] SourceDowload saveFile 인자 변경 - 기존에 test용으로 사용하던 audio파일을 제거하고 인자를 compressorObject만 넘겨주도록 수정 * refactor: [FE] compressor emptyTime 삭제 - 오늘 스크럼때 설명하면서 깨달았는데 emptyTime이 필요가 없어서 삭제했습니다. - 구현 초기에 사용하고 로직이 변경되어 emptyTime이 필요가 없어서 삭제 - start()의 첫번째 인자로 trackStartTime을 넘겨주면서 필요가 없어졌습니다. * feat: [FE] 변환 완료된 파일명 변경 기능 구현 - 파일을 변환 완료한 상태에서 기존에는 확장자를 바꾸거나 모달창을 닫으면 초기화됩니다. - 하지만 변환 완료된 상태에서 파일명을 바꿀 때도 초기화 되면 너무 비효율적이라고 생각해서 download의 저장된 파일명만 변경되도록 구현했습니다. * refactor: [FE] compressor getTrackArrayBuffer 속도 개선 - 기존에는 for문으로 모든 섹션의 채널데이터를 매번 index 0부터 계속 더하는 식으로 구현했습니다. - offset 변수를 둬서 그전에 저장했던 index는 건너뛸 수 있도록 변경했습니다. * style: [FE] compressor 공백 제거 - 불필요한 공백을 제거했습니다. * refactor: [FE] EffectState 컴포넌트 구현 & PlayBarUtil / controller/ store 함수명, 변수명 리팩토링 (#118) * feat: [FE] EffectState 컴포넌트 제작 - 구간이 선택되면 해당 구간에 적용된 effect 목록을 보여주는 컴포넌트를 구현했습니다. * style: [FE] SectionEffectList style 적용 - SectionEffectList 컴포넌트의 style을 지정했습니다. * feat: [FE] SectionEffectList와 관련된 Util 생성 - hideEffectList는 section 선택을 하지 않았을때 EffectList를 숨기고 SourceList를 보여주는 함수입니다. - showEffectList는 section 선택을 했을 때 EffectList를 보여주고 SourceList를 숨기는 함수입니다. * feat: [FE] SourceList 숨김/표시 함수 추가 - section에 포커스가 있을 경우 sourcelist가 보이지 않도록 하는 함수를 만들었습니다. - section에 포커스가 없을 경우 sourcelist가 보이도록 하는 함수를 만들었습니다. * feat: [FE] SectionEffectList 컴포넌트 Sidebar에 추가 - Sidebar 컴포넌트에 SectionEffectList 컴포넌트를 넣었습니다. * feat: [FE] focus를 줄때 SectionEffectList 숨김/표시 설정 - addFocus시 SectionEffectList가 보이도록 로직 작성 - removeFocus, resetFocus시 SectionEffectList가 숨겨지도록 로직 작성 * feat: [FE] EffectListType 설정 - EffectListType을 설정했습니다. * feat: [FE] eventType 추가 - EffectList Modal 창을 여는 이벤트타입 설정했습니다. * refactor: [FE] setMarkerWidthToZero 관련 함수 삭제 - setMarkerWidth에 함수 인자 0을 넣어주면 마커의 위치가 초기화 되도록했습니다. - 따라서 같은 역할을 하는 setMarkerWidthToZero 함수는 필요가 없다고 생각되어 삭제했습니다. * refactor: [FE] store state 변수명 변경 - 시간을 string으로 나타내는 변수는 ~~StringTime으로 표기했습니다. - 시간을 초단위로 나타내는 변수는 ~~NumberTime으로 표기했습니다. * refactor: [FE] TimeUtil 파일 생성 - PlayBarUtil에서 시간과 관련된 함수들을 분리했습니다. - getSplitTime은 초단위로 정의된 시간을 분, 초, 밀리초로 분해해주는 함수입니다. - getStringPlayBarTime은 재생바 눈금을 나타내주는 함수입니다. - getNumberTime은 마우스 위치를 초단위 시간으로 나타내주는 함수입니다. - getStringTime은 초단위 시간을 문자로 나타내주는 함수입니다. ex) '05:11:236' * refactor: [FE] setCursorStringTime 함수 내용 변경 - 함수 이름과 맞는 로직으로 수정했습니다. 함수 인자로 string 형식의 시간을 받아오고 바로 새로운 stringTime을 state에 넣어줬습니다. - 그 외 잘못 변경된 state 변수명들을 수정하고 그에 맞는 함수들도 이름을 변경했습니다. * refactor: [FE] controller 함수명 변경 - resetPlayTime 함수를 changeMarkerPlayStringTime으로 변경했습니다. - 해당 함수는 재생바를 클릭했을 경우 마커의 시간을 변경해주는 함수입니다. * refactor: [FE] PlayBarUtil 파일명 변경 - WidthUtil로 이름 변경했습니다. - 너비를 구하는 함수들이 모여있습니다. * refactor: [FE] 함수명 변경 - 리팩토링한 함수로 교체했습니다. * refactor: [FE] 왼쪽 재생바 마커 위치 수정 - 100%이던 위치를 99.3%로 바꿨습니다. - 아마 프로젝트가 거의 다 완성되면 또 다시 바뀔 것 같습니다. * refactor: [FE] getNumberTime 명확한 변수명으로 수정 - calculateTimeOfCursorPosition 함수명으로 이름을 바꾸어 무슨 역할을 하는지 명확하게 작성했습니다. Co-authored-by: Woojin Shin <sscj4459@naver.com> close #117 * refactor: [FE] 구간 나누기 버그 수정 및 코드 리팩토링 (#115) * refactor: [FE] SplitCommand 코드 리팩토링 - excute 함수 작은 함수단위로 분리 - PlayBarUtil은 PlayBar와 관련되어 보이는데 섹션을 나누는 커맨드에서 사용되어 코드의 가독성이 떨어지고, PlayBarUtil은 리팩토링 과정이 필요하므로 해당 부분을 삭제하고, 필요한 로직부분만 추가하도록 수정 (추후 공통 유틸이 만들어지면 수정필요) - 트랙 섹션을 나눌 때, 파형이 이상하게 나누어지는 버그 수정. trackStartTime, channelStartTime 설정로직 수정하여 해결 * refactor: [FE] AudioTrackSection 리팩토링 - 타입 관리를 위한 SectionDataType 분리 - CursorMode를 subscribe하여 자동으로 업데이트 되도록 수정 - 함수 네이밍 명확하게 변경 및 작은 함수 단위로 분리 * refactor: [FE] AudioTrack 리팩토링 - TrackSection 모델 parsedChannel 정보 삭제 - 소스리스트에서 드래그앤드랍으로 새로운 트랙을 추가할 때 비즈니스 로직을 컨트롤러로 이동 * refactor: [FE] EditTools 리팩토링 - 함수 네이밍 명확하게 변경 * refactor: [FE] Controller 리팩토링 - getSectionData 함수 가독성 향상 및 유지보수를 위해 함수형으로 기능단위로 분리 * fix: [FE] 머지과정에서 발생한 버그 수정 (#119) - PlaybackTools 리렌더링을 통한 프로퍼티 참조 문제 해결 - Controller 함수 getSourceBySourceId 추가, SpliCommand 수정 사항 반영 * feat: [FE] AudioMeter 컴포넌트 구현 (#120) * feat: [FE] AudioUtil getDecibel() 구현 - analyser의 getFloatTimeDomainData를 Decibel로 변환하는 함수 구현 * feat: [FE] AudioMeter 컴포넌트 구현 - 현재 재생중인 volume에 따라 반응하는 AudioMeter 컴포넌트 구현 - 최대 -72까지를 기준으로 구현했고, 백분율로 다른 gradient 컬러를 먹였습니다. - 스크롤 기능이 다 구현되면 나중에 canvas로 반응형으로 구현해도 될 것 같습니다. * style: [FE] AudioMeter style 적용 - decibel-Marekr는 decibel이 100%를 넘어가는 경우를 위해 -10px 했습니다. * feat: [FE] components/index.js, Main.js에 AudioMeter 적용 - index.js와 Main 컴포넌트에 AudioMeter 컴포넌트를 적용했습니다. * feat: [FE] PlayBackTools의 setInterval 수정 - setInterval로 재생중인 오디오 정보로 AudioMeter의 style을 지속적으로 변경하도록 구현 - 나중에 AudioContext를 따로 store에서 관리하도록 수정해야 될 것 같습니다. - 현재 건너뛰기로 audioContext가 변경되면 AudioMeter에 적용되지 않는 문제가 있어서 store 리팩토링이 끝나면 해결하겠습니다. Co-authored-by: Woojin Shin <sscj4459@naver.com> close #17 * feat: [FE] 구간 이동하기 (드래그 앤 드롭) 기능 구현 (#122) * feat: [FE] MoveCommand 생성 - 드래그하여 trackSection을 이동할 수 있는 MoveCommand를 생성했습니다. - dragstart 할 때의 커서 시간에서 trackStartTime을 빼준 차이를 구합니다. - 그런 후 drop시의 커서 시간에서 빼준 차이를 다시 빼준게 newTrackStartTime입니다. - checkEnterTrack은 아직 미구현 함수입니다! * feat: [FE] audioTrack 관련 eventType 생성 - AUDIO_TRACK_MULTIPLE과 AUDIO_TRACK_AREA_MULTIPLE 타입을 만들었습니다. * refactor: [FE] 사용되지 않는 변수 삭제 - 더이상 사용되지 않는 변수를 삭제했습니다. * feat: [FE] 너비의 차가 항상 양수가 되도록 수정 - 너비의 차가 항상 양수가 되도록 Math.abs 함수를 사용했습니다. * feat: [FE] drop 이벤트 생성 - dropAudioTrackListener - 현재 커서의 위치를 구합니다. - 커서 위치의 시간값을 구합니다. - 필요한 인자들을 moveCommand에 넘겨줍니다. - audio-track-area에 data-track-id를 추가해줬습니다. * feat: [FE] dragstart 이벤트 함수 생성 - 드래그가 시작할 때 해당 함수가 작동하도록 했습니다. - 드래그 시작시 커서 위치를 구하고 그때의 시간값을 구했습니다. - 그런뒤 필요한 변수들을 dataTransfer를 통해 전달해줬습니다. * feat: [FE] moveCommand 함수 추가 - moveCommand를 실행해주는 함수를 생성했습니다. - getSource와 getTrackSection 함수를 만들었습니다. - 각각의 데이터가 필요할 때가 있어 분리하여 만들었습니다. * fix: [FE] 스크롤 기능 추가로 발생한 버그 수정 (#121) * feat: [FE] 트랙 파형 동적인 사이즈 변경 적용 - 트랙 파형을 브라우저의 사이즈 변경에 따라 동적으로 변하도록 구현 * feat: [FE] store maxTrackPlayTime 정의 - 재생바의 시간을 동적으로 변경하기 위해 멀티트랙에서 최대 재생시간을 store에 정의 * feat: [FE] Controller maxTrackPlayTime 변경 함수 추가 - 최대 트랙 재생시간 업데이트하기위한 changeMaxTrackPlayTime 함수 추가 * refactor: [FE] 트랙 영역 반응형 사이즈 적용 - AudioTrack 컴포넌트의 트랙 영역을 최대 트랙 사이즈에 따라 반응형 으로 리사이징 적용 * refactor: [FE] 메인컴포넌트 트랙 스크롤 영역 수정 - 트랙 스크롤 영역을 재생바도 포함하도록 수정 * refactor: [FE] 재생바 동적 사이즈 변경 적용 및 코드리팩토링 - 트랙의 최대사이즈 및 최대재생시간에 따라 재생바가 동적으로 렌더링되도록 수정 - 변수 및 함수 네이밍을 명확하게 변경 * style: [FE] TimeInfo 반응형 사이즈 변경 * feat: [FE] store currentScrollAmount 정의 - 스크롤에 따른 재생바 커서 시간 싱크를 맞추기위해 스크롤한 양(pixel) 상태유지 추가 * refactor: [FE] ZoomBar 현재 스크롤양을 상태유지 하도록 수정 - 현재 스크롤양을 상태유지하기 위해 ZoomBar에서 Controller를 활용하여 스크롤시 스크롤양을 store에 업데이트 * refactor: [FE] TimeUtil / WidthUtil 리팩토링 - 트랙의 재생시간 변경에 따라 커서 시간계산을 위해 재생시간을 300초 고정이 아닌 동적으로 변경될 수 있도록 수정 - 변수 및 함수 네이밍 명확하게 수정 - Util 코드 수정으로 인한 Util 함수를 사용하는 각 컴포넌트 코드 수정 * refactor: [FE] 재생바 playTime 반응형 사이즈 적용 - 브라우저 사이즈에 따라 재생바의 playTime 반응형으로 사이즈 조절 - playTime이 반응형으로 변경되면서 커서 타임 계산도 변경된 사이즈에 맞게 보여주도록 수정 * fix: [FE] 트랙섹션 cutLine 스크롤에 따라 위치 조정 - 스크롤시 트랙섹션의 cutLine이 위치가 조정되지 않는 버그 수정 * refactor: [FE] SplitCommand 나누기 로직 수정 - splitCommand 나누기 로직 동작 버그 수정중 * fix: [FE] 오디오 미터 출력 버그 수정 (#123) - 음악 재생시 오디오미터 출력 버그 수정 - 함수 이름 변경으로 인한 오류 해결 * feat: [FE] 단축키 기능, 재생 중 커서 클릭 시 원하는 위치에서 시작, solo/mute 기능 적용 (#124) * chore : [FE] audioStartTime 삭제와 channelStartTime 사용 - trackSection에서 audioStartTime을 삭제했습니다. - channelStartTime을 사용하도록 변경했습니다. * chore : [FE] 주석 삭제 - subscribe 부분의 주석을 삭제했습니다. * feat : [FE] 채널 삭제 및 추가와 solo, mute 관련 - CURRENT_POSITION_ZERO_CHANNEL 삭제 - play, pause 아이콘 변경을 위한 PLAY_OR_PAUSE_CHANNEL 추가 - solo 상태를 관리하기 위한 SOLO_CHANNEL 추가 - solo, mute 클릭 시 색상 변경 * feat : [FE] play/pause 아이콘 변경, solo 위한 메소드 추가 - changePlayPauseIcon으로 상태에 따라 아이콘 변경 - soloPlay로 전체 solo 선택 상태 변경 * feat : [FE] 단축키 함수 정의 - Controller에 단축키에서 사용할 함수 정의. - playbackTool의 함수를 호출한다. * feat : [FE] 재생 중 커서로 클릭한 곳에서 바로 재생 - 재생 중에 커서로 클릭한 마커 위치에서 다시 재생할 수 있는 audioCursorPlay 함수 호출. - play 함수가 호출됨. * chore : [FE] updateMarkerPosition 고려사항 - 함수가 받아온 값이 0일 때 0으로 값을 바꾸고 0이 아닐 때는 이전 값에 더해나가는 형식. - 오른쪽 끝으로 옮길 때도 더해나가는 방식이 되어 수정이 필요. 현재 마지막 위치 관련해서 스크롤과 관련해 수정이 필요해보여 메모만 해 둠. * feat : [FE] PlaybackTools 기능관련 부분 이동 - PlaybackToolClass로 옮겨 controller에서 사용할 수 있도록 함. - 정지와 반복을 제외한 모든 키는 단축키로 사용할 수 있음. - mute, solo에 대한 정보를 지역적으로 가지고 있음. * feat : [FE] 반복버튼 클릭시 색상 변화 - 반복 버튼 클릭 시 색상 변화 - 한 번 클릭 시 초록색, 다시 클릭 시 흰색으로 돌아옴. - store에 isRepeat 추가 - playbackTools에서 IS_REPEAT_CHANNEL을 구독 중. - isRepeat 값을 변경할 때 publish 되어 상태 전달. * feat : [FE] 반복 재생 버튼 클릭시 시작 위치 변경 - 반복재생 버튼 클릭 시 시작 위치가 변경되도록 했습니다. - 재생, 일시정지 버튼 클릭 시 반복재생 버튼의 색상이 초기화되는 문제가 있습니다. * style : [FE] 반복 재생 버튼 green color - 클릭 시 green color로 변경되도록 scss에 class를 추가. * chore : [FE] 주석 삭제 - PlaybackTools에서 고민하던 흔적이 담긴 주석을 지웠습니다. * refactor : [FE] Handler Listener로 변경 - AudioTrackOption에서 Handler로 쓰인 부분을 Listener로 변경했습니다. Co-authored-by: Woojin Shin <sscj4459@naver.com> close #109, close #108, close #106, close #104 * fix: [FE] Marker 이동 및 AudioMeter 버그 해결 (#125) - 변경된 함수 적용(네이밍, 인자) - PlaybackToolsClass의 모듈화로 AudioMeter 관련 삭제된 로직 추가 * Update README.md * refactor: [FE] Solo 다중 선택할 수 있도록 수정, 오디오 미터 멈춤 현상 수정 (#126) * refactor : [FE] 변수 명 수정 - ret으로 사용해서 명확하지 않았던 변수 명을 수정했습니다. * feat : [FE] Solo 다중 선택 기능 - Solo 기능을 다중선택 할 수 있도록 수정. - Solo 버튼이 눌린 경우 재생됨. 눌리지 않은 트랙은 재생 안됨. * fix : [FE] 오디오 미터 멈춤 문제 해결 - createAndConnectAnalyser 메소드를 만들어 다시 재생할 때마다 호출. - 새롭게 analyser를 만들고 connect 해 줌. * refactor : [FE] !=를 !==로 변경 - 명확하게 !== 으로 변경했습니다. * refactor : [FE] repeat 버튼 클릭 시 색 변경로직 수정 - channel을 사용하지 않아 삭제. - 관련했던 여러 함수 삭제. - store의 isRepeat 값을 확인해 render 시에 그려주는 형식으로 변경. * feat: [FE] 오디오 구간 이동 구현, 소스리스트 파형 추가 리팩토링 (#128) * feat: [FE] SectionDragStartData Model 구현 - DragStart 이벤트에서 transferData 대신 store에서 상태관리를 위한 SectionDragStartData Model 구현 - dragover에서 getData를 사용할 수 없어서 추가 - SectionDragStartData에는 TrackSection, dragstart 당시 커서 위치, x좌표 값 계산을 위한 offsetLeft가 담겨 있습니다. * refactor: [FE] MoveCommand 유효성검사 조건 변경 및 모듈화 - 기존의 조건문에 문제를 발견해서 수정했습니다. - 구간 이동하기에서 이동할 수 있는 위치인지 판단하는 checkEnterTrack() 함수를 ValidUtil로 모듈화 시켰습니다. * refactor: [FE] TRACK_CHANEL 채널 publish 삭제 - 필요없는 publish 코드를 삭제했습니다. * feat: [FE] SectionDragStartData storeType 추가 * refactor: [FE] 단축키 설명 수정 - redo와 undo의 단축키 정보가 뒤바껴서 수정했습니다.... * feat: [FE] ValidUtil export 추가, eventType 추가 - 구간 이동할때 잔상을 위한 AUDIO_TRACK_AFTERIMAGE_DROP :ㅈEventType 추가 * style: [FE] AudioMeter console.log 제거 * style: [FE] AudioTrack 잔상효과 style 적용 - 부모요소의 padding값에 맞춰서 top과 height를 조절했습니다. - padding값이 변경되면 height와 top도 변경되야 합니다. * feat: [FE] AudioTrack 섹션의 시간에 맞는 위치 적용 - initPosition() 함수로 TrackSection들의 위치를 시간에 맞게 변경 - prevEndOffset은 바로 전 section의 마지막 위치를 나타내는데 초기값은 0 - preEndOffset과 현재 section의 trackStartTime의 차이 만큼 초당 px 크기를 계산해서 곱해서 margin-left에 적용했습니다. - afterimage - 오디오 구간을 AudioTrack에 drag했을 때 옮길 수 있는 위치면 잔상이 뜨도록 구현했습니다. - dragover, dragenter, dragleave로 잔상의 left값과 width를 변경하거나 display속성을 다르게 적용했습니다. * style: [FE] AudioTrackSetion style 수정 - 잘린 구간끼리 구분이 되지 않아서 border를 추가했습니다. * feat: [FE] AudioTrackSection drag 이벤트 적용 - 기존에 dragstart 했을 때 dataTransfer로 정보를 저장했는데 dragover 이벤트에서는 getData를 할 수 없어서 store에서 관련 정보를 저장하도록 수정했습니다. - afterimage를 위한 dragover 이벤트 추가 - drag에서 자신 위에 drop이 안되던 문제로 drop 이벤트도 추가했습니다. * style: [FE] IconButton 컴포넌트에 cursor:pointer 스타일 적용 - IconButton 컴포넌트는 기본으로 cursor:pointer로 되도록 수정했습니다. * feat: [FE] SectionDragStartData 생성자 파라미터 변경 - 소스리스트에서 드래그한 경우에는 prevCursorTime이 없어서 null 타입 추가 * refactor: [FE] DragUtil 구현 - 구간 이동할 때 dragover, drop에서 중복되는 코드 모듈화 시켰습니다. * refactor: [FE] SectionEffectList render() 수정 - IconButton 커스텀 엘리먼트 사용 * refactor: [FE] SourceList 드래그앤 드롭 관련 함수 추가 - addTrackSectionFromSource()를 삭제하고 현재 방식에 맞게 새로운 함수들을 추가했습니다. - moveCommand()의 파라미터를 sectionId -> trackSection으로 수정했습니다. - 현재 스크롤 시간과 위치를 구할 수 있는 getCurrentScrollAmount, getCurrentScrollTime 함수 구현 * refactor: [FE] SourceList MoveCommand 형식으로 변경 - SouceList에서도 구간 이동 기능처럼 동작하도록 로직을 수정했습니다. * refactor: [FE] PasteCommand, SplitCommand TRACK_CHANNEL 채널 추가 - 재생관련된 코드라고 들어서 지웠던 TRACK_CHANNEL 채널을 다시 추가했습니다. * refactor: [FE] MoveCommand SourceList 관련 조건문 추가 - SourceList에서 drag된 SectionDragStartData는 trackSection의 id값이 0으로 저장되어 있어서 조건문으로 removeSection을 실행하도록 수정했습니다. close #70 * feat: [FE] 트랙 추가하기 커맨드 구현 및 메인페이지 리팩토링 (#127) * fix: [FE] 스크롤시 구간 나누기 버그 수정 - 스크롤시 구간 나누기하면 스크롤 위치가 반영되지 않아 오작동 하는 버그 수정 * style: [FE] 메인페이지 레이아웃 및 반응형 스타일 수정 - ZoomBar, AudioMeter 위치 조정 - 메인페이지 레이아웃 반응형 사이즈 조절 * refactor: [FE] iconButton 이벤트 위임 처리하도록 수정 - 기존에 이벤트 키를 하위 컴포넌트에 모두 전달해야하는 방식에서 이벤트 위임 방식으로 아이콘 버튼 수정 * refactor: [FE] command 리팩토링 - command 모듈 내보내기 관련 에러 발생 이슈 해결 - 모듈을 내보낼 때 export default로 내보내서 참조하는 곳에서 destructure해서 사용할 수 있도록 수정 - Command 인터페이스 네이밍 변경 * refactor: [FE] Main 컴포넌트 리팩토링 - 코드 유지보수 및 렌더링 최적화를 위해 Main 컴포넌트를 하위 컴포넌트들의 조합으로 분리 * style: [FE] Main 컴포넌트 분리로 인한 스타일 수정 - 본문 내용 * feat: [FE] 이벤트 타입 정의 추가 - TrackAddMenu click 이벤트 키 추가 - TrackScroll List scroll 이벤트 키 추가 및 scroll 이벤트 추가 * refactor: [FE] Main 컴포넌트에서 TrackList, TrackOptionList 분리 - 트랙 추가로 인한 전체 렌더링을 방지하기 위해 리렌더링이 필요한 컴포넌트를 분리 - 컴포넌트 분리로 인한 스타일 수정 * feat: [FE] StoreType 추가 정의 - trackList 업데이트로 정보를 위한 TRACK_LIST_CHANNEL 추가 * feat: [FE] AddTrackCommand 정의 - 트랙 추가하기 커맨드 정의 - excute, undo시 트랙을 추가하거나 제거하고, TRACK_LIST_CHANNEL에 publish하여 trackList 변경내용을 렌더링 하도록 구현 * feat: [FE] CommandController 정의 - Command 관련 작업을 수행하는 CommandController 정의 - 기존 Controller의 역할이 증가함에 따라 Command 관련 책임을 CommandController로 분리 * feat: [FE] AudioTrackMenu 트랙 추가하기 기능 구현 - 트랙 추가하기 버튼을 클릭하면 AddTrackCommand를 실행하도록 구현 - 트랙 추가하기로 인한 트랙 리렌더링시 트랙 리사이즈 로직 변경 * refactor: [FE] Controller 리팩토링 - Controller에서 Command 관련 함수 CommandController로 이동 * fix: [FE] 트랙 나누기 redo시 브라우저가 멈추는 버그 해결 - 생성자함수 내에서 element를 한번 참조하고, 이후에 리렌더링을 통해 참조를 잃어버려서 발생하는 문제 해결 * fix: [FE] 트랙 이동하기 및 재생버튼 미동작 버그 수정 (#129) - 최초 소스에서 트랙으로 드래그앤드랍할 때, 위치값을 찾지 못하는 버그를 initPosition위치 및 trackWidth 재계산을 통해 버그 수정 - playBackTools에서 아이콘 버튼 delegation 적용하여 버그 수정 * feat: [FE] 트랙 추가하기 커맨드 수정 및 트랙 삭제하기 커맨드 구현 (#132) * refactor: [FE] 트랙 추가하기 커맨드 trackIndex를 고려하여 로직 변경 - store에 트랙 리스트, 트랙 인덱스 설정 함수 정의 - controller에 트랙 리스트에서 pop과 동시에 트랙 인덱스도 초기화 해주는 함수 정의 - AddTrackCommand 인덱스를 고려하여 excute, redo 로직 변경 * refactor: [FE] CommandController 오타 수정 - CommandController 오타 수정 및 deleteTrackCommand 실행 함수 추가 * feat: [FE] Controller 트랙리스트 push, pop함수 정의 - 트랙 추가하기, 삭제하기 시 인덱스를 고려하기 위해 트랙리스트 pop, push 함수 정의 * feat: [FE] 트랙 삭제하기 커맨드 정의 - 트랙을 삭제하는 커맨드 정의 * feat: [FE] 트랙 옵션 메뉴 삭제하기 버튼 기능 활성화 - 삭제하기 버튼 클릭 시 deleteTrackCommand 실행하도록 리스너 추가 * feat: [FE] Controller 트랙 제거, 트랙 삽입 정의 - 트랙 리스트에서 트랙 ID로 식별되는 트랙을 제거하는 함수 정의 - 트랙 리스트에서 삽입하고자 하는 인덱스 값을 통해 해당 위치에 삽입해주는 함수 정의 * refactor: [FE] 트랙 삭제하기 커맨드 로직 변경 - 트랙 삭제하기 커맨드 로직을 delete option 클릭 시 해당 트랙을 삭제하도록 로직 변경 * fix: [FE] 트랙 삭제하기 커맨드 undo 오작동 버그 해결 - Controller insertTrack 로직을 인덱스를 이용하여 제 위치에 삽입되도록 코드 수정 * refactor: [FE] 트랙 삭제하기 alert 메시지 추가 - 트랙이 최소 3개 이상 존재하도록 트랙 삭제시 alert 메시지 추가 close #110 * feat: [FE] 마커 종료시점 이동 및 오디오 반복 재생 구현, 앞으로 건너뛰기 버그 수정 (#131) * feat : [FE] 원하는 시간으로 마커 옮기기 위해 setMarkerWidth 수정 - 맨 마지막 건너뛰기, loop시 마커를 원하는 시간으로 이동하기 위함 - number 배열을 넘겼을 때 두 번째 값이 1이면 첫번째 값으로 할당하도록 수정. * feat : [FE] 맨 뒤로 건너뛰기시 마커이동, loop 구현 - 맨 뒤로 건너뛰면 가장 마지막에 있는 마커 시간으로 이동. - 구간을 구하기 위해 AudioTrack에 있던 calculateTrackWidth 함수를 복사해 가져와서 사용했는데 후에 따로 빼거나 해야할 것. - loop는 isRepeat의 상태와 markerTime의 위치를 계속해서 판단해 동작하도록 함. - loop가 돼있지 않을 때는 마지막 시간에서 멈춤. - loop일 때는 마지막 시간에서 다시 처음으로 돌아감. 후에 loop의 start와 endTime을 지정할 수 있게 되면 수정필요. close #24, close #29, close #111 * fix: [FE] 트랙 선택기능 구현, 좌우 단축키 버그 수정, backend 환경 삭제 (#130) * refactor: [FE] 재생중에 command 실행 안되도록 수정 - isPause를 확인하여 재생중에 command가 실행되지 않도록 변경 - CommandControllers에 executeMoveCommand() 추가 - excute -> execute로 변경 * refactor: [FE] moveCommand -> CommandController로 변경 * style: [FE] excute -> execute로 변경 - excute -> execute로 변경 * refactor: [FE] left, right 단축키 preventDefault() 설정 - left, right keydown에 스크롤이 움직이는 문제 해결 * feat: [FE] 트랙 선택기능 구현 - 트랙에 아무 구간도 존재하지 않을 경우 트랙을 선택해서 붙여넣기를 할 수 있는 기능 구현 - AudioTrack 컴포넌트에 track-select-line 엘리먼트를 추가해서 현재 store의 SelectTrackData를 확인하여 left, display 속성을 변경 - SelectTrackData는 어떤 트랙에 존재하는지 확인하기 위한 trackId, paste command 할 때 필요한 trackStartTime인 selectedTime이 저장되어 있습니다. - 트랙 선택은 focus 기능을 사용할 땐 초기화 되도록 구현했고, 트랙영역이 아닌 다른 focusList reset 구역을 클릭할 때도 초기화됩니다. * refactor: [FE] PasteCommand에 트랙선택 관련 조건문 추가 - 선택된 구간이 1개이거나 트랙을 선택했을 경우에 따라 다르게 동작하도록 구현했습니다. * feat: [FE] selectTrackData관련 controller, store 수정 - 트랙선택 관련 SelectTrackData 관련 함수들을 추가했습니다. - focus 선택 기능 관련하여 조건에 따라 selectTrackData가 reset되도록 수정했습니다. * chore: [BE] backend 환경 삭제 - 프로젝트 설계 변경으로 인한 backend 환경 삭제 Co-authored-by: Woojin Shin <sscj4459@naver.com> close #7 * Update README.md * Update README.md Co-authored-by: Woojin Shin <sscj4459@naver.com> Co-authored-by: pieisland <35261724+pieisland@users.noreply.github.com> Co-authored-by: Jeongeun-Choi <cje3080@gmail.com>
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.
📕 제목
단축키 기능, 재생 중 커서 클릭 시 원하는 위치에서 시작, solo/mute 기능 적용
관련이슈 #109 #108 #106 #104
#111 #24
📗 작업 내용
📘 PR 특이 사항