Ajout animation du curseur (#7)

* wip

* Amélioration interface suite

* Clean unused variable

* correction linter

Author: Babali42

src/app/app.component.ts

@@ -44,21 +44,26 @@ export class AppComponent implements OnInit {
       .subscribe(result => {
         this.isMobileDisplay = !result.matches;
       });
+    this.navigate();
   }
 
   selectGenre(i: number) {
     this.selectedGenreIndex = i;
-    this.router.navigate([this.musicGenres[this.selectedGenreIndex].subGenres[0].link]).then(
-      () => {},
-      () => {},
+    this.selectedSubGenreIndex = 0;
+    this.navigate();
+  }
+
+  private navigate() {
+    this.router.navigate([this.musicGenres[this.selectedGenreIndex].subGenres[this.selectedSubGenreIndex].link]).then(
+      () => {
+      },
+      () => {
+      },
     );
   }
 
   selectSubGenre(i: number) {
     this.selectedSubGenreIndex = i;
-    this.router.navigate([this.musicGenres[this.selectedGenreIndex].subGenres[this.selectedSubGenreIndex].link]).then(
-      () => {},
-      () => {},
-    );
+    this.navigate();
   }
 }

src/app/components/sequencer/sequencer.component.html

@@ -9,7 +9,7 @@
   </div>
   <div class="sequencer-grid">
     <div *ngFor="let track of beat.tracks">
-      <app-track [track]="track" [current-step-index]="0"></app-track>
+      <app-track [track]="track" [current-step-index]="this.soundService.index"></app-track>
     </div>
   </div>
 </div>

src/app/components/sequencer/sequencer.component.ts

@@ -20,18 +20,19 @@ export class SequencerComponent implements OnInit {
   ngOnInit(): void {
     this.dataService.getData(this.fileName).subscribe((result: JsonBeat) => {
       this.beat = Convert.toBeat(result);
+      if(this.soundService.isPlaying)
+        this.soundService.pause();
       this.soundService.reset();
       this.soundService.setBpm(this.beat.bpm);
       this.soundService.setTracks(this.beat.tracks);
     });
   }
 
-  toggleIsPlaying(): void{
-    this.soundService.playPause().then(() => {})
-      .catch(error => {
-        // Handle errors here
-        console.error('Error:', error);
-      });
+  toggleIsPlaying(): void {
+    this.soundService.playPause().then(
+      () => {},
+      () => {}
+    );
   }
 }
 

src/app/services/sound.service.ts

@@ -8,17 +8,14 @@ import {Track} from '../models/track';
 export class SoundService {
   bpm: number = 120;
   isPlaying: boolean = false;
-
+  index: number = 0;
   private samples: Sample[] = [];
   private context: AudioContext;
   private tracks: Track[] = [];
-  private ms: number = this.getMillisStepFromBpm();
-  private cursor = 0;
   private playbackSource: AudioBufferSourceNode;
 
   constructor() {
     this.context = new AudioContext();
-    this.cursor = 0;
     this.playbackSource = new AudioBufferSourceNode(this.context);
   }
 
@@ -28,16 +25,32 @@ export class SoundService {
       const loopBuffer = await this.getRenderedBuffer();
       this.playSound(loopBuffer);
     }else {
-      this.playbackSource.stop(this.context.currentTime);
+      this.pause();
     }
   }
 
+  pause(){
+    this.playbackSource.stop(this.context.currentTime);
+    this.reset();
+  }
+
   private playSound(loopBuffer: AudioBuffer) {
     const source = this.context.createBufferSource();
     source.buffer = loopBuffer;
     source.connect(this.context.destination);
     source.loop = true;
-    source.start(this.context.currentTime, this.cursor * this.getTickLength());
+    const startTime = this.context.currentTime;
+    source.start(this.context.currentTime);
+
+    const updateDisplay = () => {
+      const currentTime = this.context.currentTime - startTime;
+      this.index = Math.trunc(((currentTime*1000)/this.getMillisStepFromBpm())%16);
+      if (this.isPlaying)
+        requestAnimationFrame(updateDisplay);
+    };
+
+    updateDisplay();
+
     if (this.playbackSource.buffer) {
       this.playbackSource.stop(this.context.currentTime);
     }
@@ -79,11 +92,11 @@ export class SoundService {
 
   reset(): void {
     this.isPlaying = false;
+    this.index = 0;
   }
 
   setBpm(bpm: number): void {
     this.bpm = bpm;
-    this.ms = this.getMillisStepFromBpm();
   }
 
   setTracks(tracks: Track[]) {
@@ -97,9 +110,7 @@ export class SoundService {
     for (const sample of this.samples) {
       this.getAudioBuffer(sample.fileName).then(arrayBuffer => sample.sample = arrayBuffer)
         .then(() => {})
-        .catch(error => {
-          console.error('Error:', error);
-        });
+        .catch(() => {});
     }
   }