apply formatter

sukumo28 · Jul 3, 2024 · 7251346 · 7251346
1 parent 622ec88
commit 7251346
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 34 deletions.
diff --git a/src/webview/components/playerSettings/playerSettingsComponent.test.ts b/src/webview/components/playerSettings/playerSettingsComponent.test.ts
@@ -65,7 +65,9 @@ describe("playerSettingsComponent", () => {
   });
 
   test("enable-hpf should be updated when user change enable-hpf-input", () => {
-    const enableHpf = document.querySelector(".js-playerSetting-enableHpf") as HTMLInputElement;
+    const enableHpf = document.querySelector(
+      ".js-playerSetting-enableHpf",
+    ) as HTMLInputElement;
     enableHpf.checked = true;
     enableHpf.dispatchEvent(new Event(EventType.CHANGE));
     expect(playerSettingsService.enableHpf).toBe(true);
@@ -82,7 +84,9 @@ describe("playerSettingsComponent", () => {
         },
       }),
     );
-    const enableHpf = document.querySelector(".js-playerSetting-enableHpf") as HTMLInputElement;
+    const enableHpf = document.querySelector(
+      ".js-playerSetting-enableHpf",
+    ) as HTMLInputElement;
     expect(enableHpf.checked).toBe(true);
 
     playerSettingsService.dispatchEvent(
@@ -97,7 +101,9 @@ describe("playerSettingsComponent", () => {
 
   test("hpf-frequency should be updated when user change hpf-frequency-input", () => {
     const hpfFrequency = getRandomFloat(0, audioBuffer.sampleRate / 2);
-    const hpfFrequencyInput = document.querySelector(".js-playerSetting-hpfFrequency") as HTMLInputElement;
+    const hpfFrequencyInput = document.querySelector(
+      ".js-playerSetting-hpfFrequency",
+    ) as HTMLInputElement;
     hpfFrequencyInput.value = hpfFrequency.toString();
     hpfFrequencyInput.dispatchEvent(new Event(EventType.INPUT));
     expect(playerSettingsService.hpfFrequency).toBeCloseTo(hpfFrequency);
@@ -111,12 +117,16 @@ describe("playerSettingsComponent", () => {
         },
       }),
     );
-    const hpfFrequencyInput = document.querySelector(".js-playerSetting-hpfFrequency") as HTMLInputElement;
+    const hpfFrequencyInput = document.querySelector(
+      ".js-playerSetting-hpfFrequency",
+    ) as HTMLInputElement;
     expect(Number(hpfFrequencyInput.value)).toBeCloseTo(hpfFrequency);
   });
 
   test("enable-lpf should be updated when user change enable-lpf-input", () => {
-    const enableLpf = document.querySelector(".js-playerSetting-enableLpf") as HTMLInputElement;
+    const enableLpf = document.querySelector(
+      ".js-playerSetting-enableLpf",
+    ) as HTMLInputElement;
     enableLpf.checked = true;
     enableLpf.dispatchEvent(new Event(EventType.CHANGE));
     expect(playerSettingsService.enableLpf).toBe(true);
@@ -133,7 +143,9 @@ describe("playerSettingsComponent", () => {
         },
       }),
     );
-    const enableLpf = document.querySelector(".js-playerSetting-enableLpf") as HTMLInputElement;
+    const enableLpf = document.querySelector(
+      ".js-playerSetting-enableLpf",
+    ) as HTMLInputElement;
     expect(enableLpf.checked).toBe(true);
 
     playerSettingsService.dispatchEvent(
@@ -148,7 +160,9 @@ describe("playerSettingsComponent", () => {
 
   test("lpf-frequency should be updated when user change lpf-frequency-input", () => {
     const lpfFrequency = getRandomFloat(0, audioBuffer.sampleRate / 2);
-    const lpfFrequencyInput = document.querySelector(".js-playerSetting-lpfFrequency") as HTMLInputElement;
+    const lpfFrequencyInput = document.querySelector(
+      ".js-playerSetting-lpfFrequency",
+    ) as HTMLInputElement;
     lpfFrequencyInput.value = lpfFrequency.toString();
     lpfFrequencyInput.dispatchEvent(new Event(EventType.INPUT));
     expect(playerSettingsService.lpfFrequency).toBeCloseTo(lpfFrequency);
@@ -162,15 +176,16 @@ describe("playerSettingsComponent", () => {
         },
       }),
     );
-    const lpfFrequencyInput = document.querySelector(".js-playerSetting-lpfFrequency") as HTMLInputElement;
+    const lpfFrequencyInput = document.querySelector(
+      ".js-playerSetting-lpfFrequency",
+    ) as HTMLInputElement;
     expect(Number(lpfFrequencyInput.value)).toBeCloseTo(lpfFrequency);
   });
 
   test("match-filter-frequency-to-spectrogram should be updated when user change match-filter-frequency-to-spectrogram-input", () => {
-    const matchFilterFrequencyToSpectrogram =
-      document.querySelector(
-        ".js-playerSetting-matchFilterFrequencyToSpectrogram",
-      ) as HTMLInputElement;
+    const matchFilterFrequencyToSpectrogram = document.querySelector(
+      ".js-playerSetting-matchFilterFrequencyToSpectrogram",
+    ) as HTMLInputElement;
     matchFilterFrequencyToSpectrogram.checked = true;
     matchFilterFrequencyToSpectrogram.dispatchEvent(
       new Event(EventType.CHANGE),
@@ -194,10 +209,9 @@ describe("playerSettingsComponent", () => {
         },
       ),
     );
-    const matchFilterFrequencyToSpectrogram =
-      document.querySelector(
-        ".js-playerSetting-matchFilterFrequencyToSpectrogram",
-      ) as HTMLInputElement;
+    const matchFilterFrequencyToSpectrogram = document.querySelector(
+      ".js-playerSetting-matchFilterFrequencyToSpectrogram",
+    ) as HTMLInputElement;
     expect(matchFilterFrequencyToSpectrogram.checked).toBe(true);
 
     playerSettingsService.dispatchEvent(

diff --git a/src/webview/components/playerSettings/playerSettingsComponent.ts b/src/webview/components/playerSettings/playerSettingsComponent.ts
@@ -47,7 +47,9 @@ export default class PlayerSettingsComponent extends Component {
     const settings = this._playerSettingsService;
 
     // init enable high-pass filter checkbox
-    const enableHpfInput = this._componentRoot.querySelector(".js-playerSetting-enableHpf") as HTMLInputElement;
+    const enableHpfInput = this._componentRoot.querySelector(
+      ".js-playerSetting-enableHpf",
+    ) as HTMLInputElement;
     enableHpfInput.checked = settings.enableHpf;
     this._addEventlistener(enableHpfInput, EventType.CHANGE, () => {
       settings.enableHpf = enableHpfInput.checked;
@@ -61,7 +63,9 @@ export default class PlayerSettingsComponent extends Component {
     );
 
     // init high-pass filter frequency input
-    const hpfFrequencyInput = this._componentRoot.querySelector(".js-playerSetting-hpfFrequency") as HTMLInputElement;
+    const hpfFrequencyInput = this._componentRoot.querySelector(
+      ".js-playerSetting-hpfFrequency",
+    ) as HTMLInputElement;
     hpfFrequencyInput.value = `${settings.hpfFrequency}`;
     this._addEventlistener(hpfFrequencyInput, EventType.INPUT, () => {
       settings.hpfFrequency = Number(hpfFrequencyInput.value);
@@ -73,9 +77,11 @@ export default class PlayerSettingsComponent extends Component {
         hpfFrequencyInput.value = `${e.detail.value}`;
       },
     );
-    
+
     // init enable low-pass filter checkbox
-    const enableLpfInput = this._componentRoot.querySelector(".js-playerSetting-enableLpf") as HTMLInputElement;
+    const enableLpfInput = this._componentRoot.querySelector(
+      ".js-playerSetting-enableLpf",
+    ) as HTMLInputElement;
     enableLpfInput.checked = settings.enableLpf;
     this._addEventlistener(enableLpfInput, EventType.CHANGE, () => {
       settings.enableLpf = enableLpfInput.checked;
@@ -89,7 +95,9 @@ export default class PlayerSettingsComponent extends Component {
     );
 
     // init low-pass filter frequency input
-    const lpfFrequencyInput = this._componentRoot.querySelector(".js-playerSetting-lpfFrequency") as HTMLInputElement;
+    const lpfFrequencyInput = this._componentRoot.querySelector(
+      ".js-playerSetting-lpfFrequency",
+    ) as HTMLInputElement;
     lpfFrequencyInput.value = `${settings.lpfFrequency}`;
     this._addEventlistener(lpfFrequencyInput, EventType.INPUT, () => {
       settings.lpfFrequency = Number(lpfFrequencyInput.value);
@@ -115,11 +123,13 @@ export default class PlayerSettingsComponent extends Component {
       matchFilterFrequencyToSpectrogramInput,
       EventType.CHANGE,
       () => {
-        hpfFrequencyInput.readOnly = matchFilterFrequencyToSpectrogramInput.checked;
-        lpfFrequencyInput.readOnly = matchFilterFrequencyToSpectrogramInput.checked;
+        hpfFrequencyInput.readOnly =
+          matchFilterFrequencyToSpectrogramInput.checked;
+        lpfFrequencyInput.readOnly =
+          matchFilterFrequencyToSpectrogramInput.checked;
         settings.matchFilterFrequencyToSpectrogram =
-        matchFilterFrequencyToSpectrogramInput.checked;
-        
+          matchFilterFrequencyToSpectrogramInput.checked;
+
         if (matchFilterFrequencyToSpectrogramInput.checked) {
           hpfFrequencyInput.value = `${this._analyzeSettingService.minFrequency}`;
           lpfFrequencyInput.value = `${this._analyzeSettingService.maxFrequency}`;

diff --git a/src/webview/services/playerService.ts b/src/webview/services/playerService.ts
@@ -71,10 +71,22 @@ export default class PlayerService extends Service {
         this.play();
       }
     };
-    this._playerSettingsService.addEventListener(EventType.PS_UPDATE_ENABLE_HPF, applyFilters);
-    this._playerSettingsService.addEventListener(EventType.PS_UPDATE_HPF_FREQUENCY, applyFilters);
-    this._playerSettingsService.addEventListener(EventType.PS_UPDATE_ENABLE_LPF, applyFilters);
-    this._playerSettingsService.addEventListener(EventType.PS_UPDATE_LPF_FREQUENCY, applyFilters);
+    this._playerSettingsService.addEventListener(
+      EventType.PS_UPDATE_ENABLE_HPF,
+      applyFilters,
+    );
+    this._playerSettingsService.addEventListener(
+      EventType.PS_UPDATE_HPF_FREQUENCY,
+      applyFilters,
+    );
+    this._playerSettingsService.addEventListener(
+      EventType.PS_UPDATE_ENABLE_LPF,
+      applyFilters,
+    );
+    this._playerSettingsService.addEventListener(
+      EventType.PS_UPDATE_LPF_FREQUENCY,
+      applyFilters,
+    );
   }
 
   public play() {

diff --git a/src/webview/services/playerSettingsService.ts b/src/webview/services/playerSettingsService.ts
@@ -146,16 +146,18 @@ export default class PlayerSettingsService extends Service {
   public get matchFilterFrequencyToSpectrogram() {
     return this._matchFilterFrequencyToSpectrogram;
   }
-  public set matchFilterFrequencyToSpectrogram(value: boolean) 
-  {
+  public set matchFilterFrequencyToSpectrogram(value: boolean) {
     const newValue = value === undefined ? false : value; // false by default
 
     if (this._matchFilterFrequencyToSpectrogram !== newValue) {
       this._matchFilterFrequencyToSpectrogram = newValue;
       this.dispatchEvent(
-        new CustomEvent(EventType.PS_UPDATE_MATCH_FILTER_FREQUENCY_TO_SPECTROGRAM, {
-          detail: { value: this._matchFilterFrequencyToSpectrogram },
-        }),
+        new CustomEvent(
+          EventType.PS_UPDATE_MATCH_FILTER_FREQUENCY_TO_SPECTROGRAM,
+          {
+            detail: { value: this._matchFilterFrequencyToSpectrogram },
+          },
+        ),
       );
     }
   }