make playerService directly subscribe the change of playerSettingsSer…

…vice

src/webview/components/playerSettings/playerSettingsComponent.test.ts

@@ -2,7 +2,6 @@ import { createAudioContext, getRandomFloat } from "../../../__mocks__/helper";
 import { EventType } from "../../events";
 import AnalyzeService from "../../services/analyzeService";
 import AnalyzeSettingsService from "../../services/analyzeSettingsService";
-import PlayerService from "../../services/playerService";
 import PlayerSettingsService from "../../services/playerSettingsService";
 import PlayerSettingsComponent from "./playerSettingsComponent";
 
@@ -51,14 +50,8 @@ describe("playerSettingsComponent", () => {
       pd,
       audioBuffer,
     );
-    const playerService = new PlayerService(
-      audioContext,
-      audioBuffer,
-      playerSettingsService,
-    );
     playerSettingsComponent = new PlayerSettingsComponent(
       "#playerSettings",
-      playerService,
       playerSettingsService,
       analyzeService,
       analyzeSettingsService,

src/webview/components/playerSettings/playerSettingsComponent.ts

@@ -1,28 +1,24 @@
 import "./playerSettingsComponent.css";
 import Component from "../../component";
 import { EventType } from "../../events";
-import PlayerService from "../../services/playerService";
 import PlayerSettingsService from "../../services/playerSettingsService";
 import AnalyzeService from "../../services/analyzeService";
 import AnalyzeSettingsService from "../../services/analyzeSettingsService";
 
 export default class PlayerSettingsComponent extends Component {
   private _componentRoot: HTMLElement;
-  private _playerService: PlayerService;
   private _playerSettingsService: PlayerSettingsService;
   private _analyzeService: AnalyzeService;
   private _analyzeSettingService: AnalyzeSettingsService;
 
   constructor(
     componentRootSelector: string,
-    playerService: PlayerService,
     playerSettingsService: PlayerSettingsService,
     analyzeService: AnalyzeService,
     analyzeSettingService: AnalyzeSettingsService,
   ) {
     super();
     this._componentRoot = document.querySelector(componentRootSelector);
-    this._playerService = playerService;
     this._playerSettingsService = playerSettingsService;
     this._analyzeService = analyzeService;
     this._analyzeSettingService = analyzeSettingService;
@@ -70,7 +66,6 @@ export default class PlayerSettingsComponent extends Component {
           matchFilterFrequencyToSpectrogramInput.checked;
         settings.hpfFrequency = Number(hpfFrequencyInput.value);
         settings.lpfFrequency = Number(lpfFrequencyInput.value);
-        this.applyFilters();
       },
     );
     this._addEventlistener(
@@ -92,7 +87,6 @@ export default class PlayerSettingsComponent extends Component {
       EventType.PS_UPDATE_ENABLE_HPF,
       (e: CustomEventInit) => {
         enableHpfInput.checked = e.detail.value;
-        this.applyFilters();
       },
     );
 
@@ -107,7 +101,6 @@ export default class PlayerSettingsComponent extends Component {
       EventType.PS_UPDATE_HPF_FREQUENCY,
       (e: CustomEventInit) => {
         hpfFrequencyInput.value = `${e.detail.value}`;
-        this.applyFilters();
       },
     );
 
@@ -122,7 +115,6 @@ export default class PlayerSettingsComponent extends Component {
       EventType.PS_UPDATE_ENABLE_LPF,
       (e: CustomEventInit) => {
         enableLpfInput.checked = e.detail.value;
-        this.applyFilters();
       },
     );
 
@@ -137,7 +129,6 @@ export default class PlayerSettingsComponent extends Component {
       EventType.PS_UPDATE_LPF_FREQUENCY,
       (e: CustomEventInit) => {
         lpfFrequencyInput.value = `${e.detail.value}`;
-        this.applyFilters();
       },
     );
 
@@ -148,15 +139,7 @@ export default class PlayerSettingsComponent extends Component {
 
         lpfFrequencyInput.value = `${this._analyzeSettingService.maxFrequency}`;
         settings.lpfFrequency = Number(lpfFrequencyInput.value);
-        this.applyFilters();
       }
     });
   }
-
-  private applyFilters() {
-    if (this._playerService.isPlaying) {
-      this._playerService.pause();
-      this._playerService.play();
-    }
-  }
 }

src/webview/components/settingTab/settingTabComponent.test.ts

@@ -1,24 +1,20 @@
 import {
-  createAudioContext,
   MockAudioBuffer,
   postMessageFromWebview,
 } from "../../../__mocks__/helper";
 import { AnalyzeDefault, PlayerDefault } from "../../../config";
 import AnalyzeService from "../../services/analyzeService";
 import AnalyzeSettingsService from "../../services/analyzeSettingsService";
-import PlayerService from "../../services/playerService";
 import PlayerSettingsService from "../../services/playerSettingsService";
 import SettingTab from "./settingTabComponent";
 
 describe("settingTabComponent", () => {
-  let playerService: PlayerService;
   let playerSettingService: PlayerSettingsService;
   let analyzeService: AnalyzeService;
   let analyzeSettingsService: AnalyzeSettingsService;
   let settingTabComponent: SettingTab;
   beforeAll(() => {
     document.body.innerHTML = '<div id="settingTab"></div>';
-    const audioContext = createAudioContext(44100);
     const audioBuffer = new MockAudioBuffer(
       44100,
       1,
@@ -35,14 +31,8 @@ describe("settingTabComponent", () => {
       playerDefault,
       audioBuffer,
     );
-    playerService = new PlayerService(
-      audioContext,
-      audioBuffer,
-      playerSettingService,
-    );
     settingTabComponent = new SettingTab(
       "#settingTab",
-      playerService,
       playerSettingService,
       analyzeService,
       analyzeSettingsService,

src/webview/components/settingTab/settingTabComponent.ts

@@ -1,7 +1,6 @@
 import "./settingTabComponent.css";
 import Component from "../../component";
 import { EventType } from "../../events";
-import PlayerService from "../../services/playerService";
 import PlayerSettingsService from "../../services/playerSettingsService";
 import PlayerSettingsComponent from "../playerSettings/playerSettingsComponent";
 import AnalyzeService from "../../services/analyzeService";
@@ -15,7 +14,6 @@ export default class SettingTab extends Component {
 
   constructor(
     coponentRootSelector: string,
-    playerService: PlayerService,
     playerSettingsService: PlayerSettingsService,
     analyzeService: AnalyzeService,
     analyzeSettingsService: AnalyzeSettingsService,
@@ -49,7 +47,6 @@ export default class SettingTab extends Component {
     // create tab content
     new PlayerSettingsComponent(
       `${coponentRootSelector} .js-settingTabContent-player`,
-      playerService,
       playerSettingsService,
       analyzeService,
       analyzeSettingsService,

src/webview/components/webview/webview.ts

@@ -178,7 +178,6 @@ export default class WebView extends Component {
     );
     const settingTabComponent = new SettingTab(
       "#settingTab",
-      playerService,
       playerSettingsService,
       analyzeService,
       analyzeSettingsService,

src/webview/services/playerService.ts

@@ -63,6 +63,19 @@ export default class PlayerService extends Service {
     this._lpfNode = this._audioContext.createBiquadFilter();
     this._lpfNode.type = "lowpass";
     this._lpfNode.Q.value = Math.SQRT1_2; // butterworth
+
+    // play again if filter related setting is changed
+    this._playerSettingsService.addEventListener(EventType.PS_UPDATE_ENABLE_HPF, this.applyFilters);
+    this._playerSettingsService.addEventListener(EventType.PS_UPDATE_HPF_FREQUENCY, this.applyFilters);
+    this._playerSettingsService.addEventListener(EventType.PS_UPDATE_ENABLE_LPF, this.applyFilters);
+    this._playerSettingsService.addEventListener(EventType.PS_UPDATE_LPF_FREQUENCY, this.applyFilters);
+  }
+
+  private applyFilters() {
+    if(this.isPlaying){
+      this.pause();
+      this.play();
+    }
   }
 
   public play() {