구간 잘라내기 기능 구현 #68
Assignees
Labels
Projects
Milestone
Comments
Songwonseok
added a commit
that referenced
this issue
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
💁 설명
구간 잘라내기 기능 구현
📑 체크리스트
🚧 주의 사항
The text was updated successfully, but these errors were encountered: