platine as component

app/platine-tools/controls.ts

@@ -1,48 +0,0 @@
-class Controls {
-  public toggleButton: HTMLButtonElement;
-  public rewindButton: HTMLButtonElement;
-
-  public isPlaying: boolean = false;
-
-  public callbacks = {
-    // @ts-expect-error: unused var
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onIsplayingChanged: (isPlaying: boolean) => {},
-    onRewind: () => {},
-  };
-
-  constructor({
-    toggleButton,
-    rewindButton,
-  }: {
-    toggleButton: HTMLButtonElement;
-    rewindButton: HTMLButtonElement;
-  }) {
-    this.toggleButton = toggleButton;
-    this.rewindButton = rewindButton;
-
-    this.toggleButton.addEventListener('click', () => this.toggle());
-    this.rewindButton.addEventListener('click', () => this.rewind());
-
-    this.isDisabled = true;
-  }
-
-  set isDisabled(disabled: boolean) {
-    this.toggleButton.disabled = disabled;
-    this.rewindButton.disabled = disabled;
-  }
-
-  toggle() {
-    this.isPlaying = !this.isPlaying;
-
-    this.toggleButton.classList.toggle('is-active', this.isPlaying);
-
-    this.callbacks.onIsplayingChanged(this.isPlaying);
-  }
-
-  rewind() {
-    this.callbacks.onRewind();
-  }
-}
-
-export default Controls;

app/platine-tools/disc.ts

@@ -50,7 +50,7 @@ type DiscProgress = {
   progress: number
 }
 class Disc {
-  public el: HTMLDivElement
+  public el: HTMLElement
 
   private _playbackSpeed = 1
   private _duration = 0
@@ -92,7 +92,7 @@ class Disc {
     onLoop: (params: DiscProgress) => {}
   }
 
-  constructor(el: HTMLDivElement) {
+  constructor(el: HTMLElement) {
     this.el = el
 
     this._center = getElementCenter(this.el)