fix: [FE] style 수정 및 AddEffectCommand,Compressor, Fade in/out 버그 해결

style 수정 및 AddEffectCommand,Compressor, Fade in/out 버그 해결

frontend/src/common/command/concrete/AddEffectCommand.ts

@@ -1,37 +1,58 @@
 import { Command } from '@command';
 import { Controller } from '@controllers';
-import { StoreChannelType } from '@types';
+import { EffectType, StoreChannelType } from '@types';
 import { storeChannel } from '@store';
-import { Track, Effect } from '@model';
-import { CopyUtil } from '@util';
+import { Track, Effect, TrackSection } from '@model';
+import { CopyUtil, EffectUtil } from '@util';
 
 class AddEffectCommand extends Command {
  private beforeTrackList: Track[];
+ private addEffectSectionList: TrackSection[];
  private effect: Effect;
 
- constructor(beforeTrackList: Track[], effect: Effect) {
+ constructor(beforeTrackList: Track[], addEffectSectionList: TrackSection[], effect: Effect) {
  super();
  this.beforeTrackList = beforeTrackList;
+ this.addEffectSectionList = addEffectSectionList;
  this.effect = effect;
  }
 
- execute() {
+ init() {
  const focusList = Controller.getFocusList();
- const newTrackList = CopyUtil.copyTrackList(this.beforeTrackList);
 
- focusList.forEach((focus) => {
- const focusedTrackSectionId = focus.trackSection.id;
- newTrackList.forEach((track) => {
- track.trackSectionList.forEach((trackSection) => {
- if (trackSection.id === focusedTrackSectionId) {
- const newEffect = CopyUtil.copyEffect(this.effect);
- trackSection.effectList.push(newEffect);
- focus.trackSection = trackSection;
+ if (focusList.length === 0) return;
+ const trackIdSet = new Set<number>();
+
+ this.addEffectSectionList = focusList.map((focus) => {
+ const trackSection = focus.trackSection;
+ if (!trackIdSet.has(trackSection.trackId)) {
+ const track = Controller.getTrack(trackSection.trackId);
+ if (track) this.beforeTrackList.push(CopyUtil.copyTrack(track));
+ trackIdSet.add(trackSection.trackId);
+ }
+ return CopyUtil.copySection(trackSection);
+ });
+ }
+
+
+ execute() {
+ const addEffectTrackList = this.beforeTrackList.map(track => CopyUtil.copyTrack(track));
+ const focusList = Controller.getFocusList();
+ this.addEffectSectionList.forEach((addEffectSection) => {
+ const targetTrack = addEffectTrackList.find(track => addEffectSection.trackId === track.id);
+ targetTrack?.trackSectionList.forEach(section => {
+ if (section.id === addEffectSection.id) {
+ const newEffect = CopyUtil.copyEffect(this.effect);
+ section.effectList.push(newEffect);
+ }
+ focusList.forEach(focus => {
+ if (focus.trackSection.id === section.id) {
+ focus.trackSection = section;
  }
  })
- });
+ })
  })
- this.publishChannel(newTrackList);
+ this.publishChannel(addEffectTrackList);
 
  }
 
@@ -56,8 +77,9 @@ class AddEffectCommand extends Command {
  trackSectionList: track.trackSectionList
  });
  })
- storeChannel.publish(StoreChannelType.TRACK_CHANNEL, trackList);
- storeChannel.publish(StoreChannelType.TOTAL_TIME_CHANNEL, trackList);
+ const newTrackList = Controller.getTrackList();
+ storeChannel.publish(StoreChannelType.TRACK_CHANNEL, newTrackList);
+ storeChannel.publish(StoreChannelType.TOTAL_TIME_CHANNEL, newTrackList);
  storeChannel.publish(StoreChannelType.FOCUS_LIST_CHANNEL, focusList);
  }
 }

frontend/src/common/util/EffectUtil.ts

@@ -131,7 +131,7 @@ const connectFadeInNode = (audioContext: AudioContext | OfflineAudioContext, buf
  return outputNode;
 }
 
-const connectFadeOutNode = (audioContext: AudioContext | OfflineAudioContext, bufferSourceNode: AudioBufferSourceNode | GainNode, effect: Effect, trackStartTime: number, trackEndTime: number, trackLength: number): GainNode => {
+const connectFadeOutNode = (audioContext: AudioContext | OfflineAudioContext, bufferSourceNode: AudioBufferSourceNode | GainNode, effect: Effect, trackEndTime: number, trackLength: number): GainNode => {
  const gainNode = audioContext.createGain();
  const outputNode = audioContext.createGain();
  const fadeOutProperty = effect.properties.getProperty('fadeOutLength');
@@ -180,12 +180,11 @@ const connectEffect = (audioContext: AudioContext | OfflineAudioContext, bufferS
  case EffectType.reverb:
  return connectReverbNode(audioContext, bufferSourceNode, effect);
  case EffectType.fadein:
- const trackLength = trackSection.length;
  const trackStartTime = trackSection.trackStartTime;
- return connectFadeInNode(audioContext, bufferSourceNode, effect, trackStartTime, trackLength);
+ return connectFadeInNode(audioContext, bufferSourceNode, effect, trackStartTime, trackSection.length);
  case EffectType.fadeout:
  const trackEndTime = trackSection.trackStartTime + trackSection.length;
- return connectFadeOutNode(audioContext, bufferSourceNode, effect, trackSection.trackStartTime, trackEndTime, trackLength);
+ return connectFadeOutNode(audioContext, bufferSourceNode, effect, trackEndTime, trackSection.length);
  default:
  break;
  }

frontend/src/components/EffectController/EffectContents/CompressorEffect/CompressorEffect.ts

@@ -26,7 +26,7 @@ import { Controller } from "@controllers";
  this.releaseValue = null;
 
  this.thresholdCurrentValue = '-24';
- this.kneeCurrentValue = '-30';
+ this.kneeCurrentValue = '30';
  this.ratioCurrentValue = '12';
  this.attackCurrentValue = '0.003';
  this.releaseCurrentValue = '0.25';
@@ -131,7 +131,7 @@ import { Controller } from "@controllers";
  }
  else {
  this.thresholdCurrentValue = '-24';
- this.kneeCurrentValue = '-30';
+ this.kneeCurrentValue = '30';
  this.ratioCurrentValue = '12';
  this.attackCurrentValue = '0.003';
  this.releaseCurrentValue = '0.25';

frontend/src/components/EffectController/EffectContents/FadeInEffect/FadeInEffect.ts

@@ -54,7 +54,7 @@ import { Controller } from "@controllers";
  this.fadeInLengthCurrentValue = `${EffectUtil.floorPropertyValue(maxLength, 1)}`;
  }
  else {
- this.fadeInLengthCurrentValue = '0';
+ this.fadeInLengthCurrentValue = '1';
  }
 
  const focusList = Controller.getFocusList();
@@ -66,7 +66,7 @@ import { Controller } from "@controllers";
  <div class="effect-input">
  <div class="effect-option-name"> Fade in time</div>
  <div class="property-percentage-input">
- <input class="property-percentage-input" type="range" value="${this.fadeInLengthCurrentValue}" min="0" max="${this.sectionLength}" step="0.1" event-key=${EventKeyType.EFFECT_FADE_IN_INPUT_LENGTH}>
+ <input class="property-percentage-input" type="range" value="${this.fadeInLengthCurrentValue}" min="0.1" max="${this.sectionLength}" step="0.1" event-key=${EventKeyType.EFFECT_FADE_IN_INPUT_LENGTH}>
  <div class="property-percentage-value fade-in-length">${this.fadeInLengthCurrentValue}</div>
  </div>
  </div>

frontend/src/components/EffectController/EffectContents/FadeOutEffect/FadeOutEffect.ts

@@ -55,7 +55,7 @@ import { Controller } from "@controllers";
  this.fadeOutLengthCurrentValue = `${EffectUtil.floorPropertyValue(maxLength, 1)}`;
  }
  else {
- this.fadeOutLengthCurrentValue = '0';
+ this.fadeOutLengthCurrentValue = '1';
  }
 
  const focusList = Controller.getFocusList();
@@ -67,8 +67,8 @@ import { Controller } from "@controllers";
  <div class="effect-input">
  <div class="effect-option-name"> Fade out time</div>
  <div class="fade-out-length-input">
- <input class="fade-out-length-input" type="range" value="${this.fadeOutLengthCurrentValue}" min="0" max="${this.sectionLength}" step="0.1" event-key=${EventKeyType.EFFECT_FADE_OUT_INPUT_LENGTH}>
- <div class="property-percentage-value fade-out-length">${this.fadeOutLengthCurrentValue}초</div>
+ <input class="fade-out-length-input" type="range" value="${this.fadeOutLengthCurrentValue}" min="0.1" max="${this.sectionLength}" step="0.1" event-key=${EventKeyType.EFFECT_FADE_OUT_INPUT_LENGTH}>
+ <div class="property-percentage-value fade-out-length">${this.fadeOutLengthCurrentValue}</div>
  </div>
  </div>
  `;

frontend/src/components/EffectController/EffectContents/FilterEffect/FilterEffect.scss

@@ -5,7 +5,7 @@ audi-effect-filter {
 }
 
 .effect-input {
- color: white;
+ color: variables.$white-color;
  width: 100%;
  padding: 10px;
 
@@ -19,7 +19,7 @@ audi-effect-filter {
  display: flex;
  align-items: center;
 
- input {
+ .filter-radio-input {
  width: 20%;
  }
 }
@@ -30,7 +30,7 @@ audi-effect-filter {
  & .property-percentage-value {
  height: 30px;
  width: 70px;
- border: 1px solid white;
+ border: 1px solid variables.$white-color;
  border-radius: 6px;
 
  text-align: center;

frontend/src/components/EffectController/EffectContents/FilterEffect/FilterEffect.ts

@@ -102,16 +102,16 @@ import { Controller } from "@controllers";
  <div class="effect-input">
  <div class="effect-option-name">Type Value</div>
  <div class="effect-input-type-radio-wrap">
- <input type="radio" name="filter-type" value="lowpass" ${this.typeCurrentValue === 'lowpass' ? 'checked' : ''} event-key=${EventKeyType.EFFECT_FILTER_TYPE}>lowpass</input> 
+ <input class="filter-radio-input" type="radio" name="filter-type" value="lowpass" ${this.typeCurrentValue === 'lowpass' ? 'checked' : ''} event-key=${EventKeyType.EFFECT_FILTER_TYPE}>lowpass</input> 
  </div>
  <div class="effect-input-type-radio-wrap">
- <input type="radio" name="filter-type" value="highpass" ${this.typeCurrentValue === 'highpass' ? 'checked' : ''} event-key=${EventKeyType.EFFECT_FILTER_TYPE}>highpass</input> 
+ <input class="filter-radio-input" type="radio" name="filter-type" value="highpass" ${this.typeCurrentValue === 'highpass' ? 'checked' : ''} event-key=${EventKeyType.EFFECT_FILTER_TYPE}>highpass</input> 
  </div>
  <div class="effect-input-type-radio-wrap">
- <input type="radio" name="filter-type" value="lowshelf" ${this.typeCurrentValue === 'lowshelf' ? 'checked' : ''} event-key=${EventKeyType.EFFECT_FILTER_TYPE}>lowshelf</input> 
+ <input class="filter-radio-input" type="radio" name="filter-type" value="lowshelf" ${this.typeCurrentValue === 'lowshelf' ? 'checked' : ''} event-key=${EventKeyType.EFFECT_FILTER_TYPE}>lowshelf</input> 
  </div>
  <div class="effect-input-type-radio-wrap">
- <input type="radio" name="filter-type" value="highshelf" ${this.typeCurrentValue === 'highshelf' ? 'checked' : ''} event-key=${EventKeyType.EFFECT_FILTER_TYPE}>highshelf</input> 
+ <input class="filter-radio-input" type="radio" name="filter-type" value="highshelf" ${this.typeCurrentValue === 'highshelf' ? 'checked' : ''} event-key=${EventKeyType.EFFECT_FILTER_TYPE}>highshelf</input> 
  </div>
 
  <div class="effect-option-name">Frequency Value</div>

frontend/src/components/EffectController/EffectContents/GainEffect/GainEffect.scss

@@ -5,7 +5,7 @@ audi-effect-gain {
 }
 
 .effect-input {
- color: white;
+ color: variables.$white-color;
  width: 100%;
  padding: 10px;
 
@@ -21,7 +21,7 @@ audi-effect-gain {
  & .gain-percentage-value {
  height: 30px;
  width: 70px;
- border: 1px solid white ;
+ border: 1px solid variables.$white-color ;
  border-radius: 6px;
 
  text-align: center;

frontend/src/components/EffectController/EffectContents/ReverbEffect/ReverbEffect.scss

@@ -5,7 +5,7 @@ audi-effect-reverb {
 }
 
 .effect-input {
- color: white;
+ color: variables.$white-color;
  width: 100%;
  padding: 10px;
 
@@ -21,7 +21,7 @@ audi-effect-reverb {
  & .property-percentage-value {
  height: 30px;
  width: 70px;
- border: 1px solid white;
+ border: 1px solid variables.$white-color;
  border-radius: 6px;
 
  text-align: center;

frontend/src/components/Header/ZoomRateInfo/ZoomRateInfo.scss

@@ -5,24 +5,24 @@
  justify-content: space-around;
  align-items: center;
  height: 50px;
- margin: auto 10px;
+ margin: auto 25px auto 10px;
  padding: 0 5px;
 
  border: 2px solid variables.$border-color;
  border-radius: 6px;
 
  & .zoom-rate-percentage {
- margin: auto 10px;
+ margin: auto 5px;
  padding-bottom: 5px;
- font-size: x-large;
+ font-size: 18px;
  line-height: 30px;
  font-weight: bold;
  color: variables.$blue-color;
  } 
 }
 
 .zoom-rate-info > audi-icon-button {
- margin-left: 5px;
+ margin: 0 5px;
 }
 
 .zoom-rate-info > audi-icon-button:hover {

frontend/src/components/Sidebar/SidebarListInfo/SectionEffectList/SectionEffectList.ts

@@ -100,7 +100,7 @@ import { storeChannel } from '@store';
  (acc += `
  <li class="section-effect-container" data-effect-name="${effect.name}" data-effect-id="${effect.id}" data-effect-track-id="${trackSection.trackId}" data-effect-track-section-id="${trackSection.id}">
  <div class="section-effect delegation" event-key="${EventKeyType.EFFECT_MODIFY}"> 
- <span class="section-effect-list-effect-name">${effect.name}</span>
+ <span class="section-effect-list-effect-name">${EffectTitleType[effect.name]}</span>
  <audi-icon-button icontype=${IconType.deleteEffect} class="delegation" event-key="${EventKeyType.EFFECT_DELETE_BTN_CLICK}"></audi-icon-button> 
  </div>
  </li>

frontend/src/components/Sidebar/SidebarListInfo/SectionEffectSetting/SectionEffectSetting.ts

@@ -177,11 +177,9 @@ import './SectionEffectSetting.scss';
 
  addFadeOutEffect(): void {
  const fadeOutLengthElement: HTMLDivElement | null = document.querySelector('div.fade-out-length');
-
  if (!fadeOutLengthElement) return;
 
  const fadeOutLength = Number(fadeOutLengthElement.innerText);
-
  const effectProperties = new FadeOutProperties({ fadeOutLength: fadeOutLength });
  const newEffect = new Effect({ name: this.effectType, properties: effectProperties });
 

frontend/src/controllers/CommandController.ts

@@ -135,8 +135,9 @@ const executeAddEffectCommand = (effect: Effect) => {
  const { trackList, effectIndex } = store.getState();
  const newTrackList = CopyUtil.copyTrackList(trackList);
  effect.id = effectIndex;
-
- const addEffectCommand = new AddEffectCommand(newTrackList, effect);
+ const fucusList = Controller.getFocusList();
+ const focusSectionList = fucusList.map(focus => CopyUtil.copySection(focus.trackSection));
+ const addEffectCommand = new AddEffectCommand(newTrackList, focusSectionList, effect);
 
  store.setEffectIndex(effectIndex + 1);
  CommandManager.execute(addEffectCommand);