comparison src/app/waveform/waveform.component.ts @ 31:f6ea31a3b1a3

Encapsulate audio playing and decoding logic in a ng2 service, provided by the root module.

 import {
-  Component, OnInit, ViewChild, ElementRef, Input, AfterViewInit
+  Component, OnInit, ViewChild, ElementRef, Input, AfterViewInit, NgZone
 } from '@angular/core';
+import {AudioPlayerService} from "../services/audio-player.service";
 
 declare var wavesUI: any; // TODO non-global app scope import
 type Timeline = any; // TODO what type actually is it.. start a .d.ts for waves-ui?
 
 @Component({

 
   get audioBuffer(): AudioBuffer {
     return this._audioBuffer;
   }
 
-  constructor() {}
+  constructor(private audioService: AudioPlayerService,
+              public ngZone: NgZone) {}
   ngOnInit() {}
 
   ngAfterViewInit(): void {
     this.renderTimeline();
   }

       height: height,
       color: 'gray'
     });
 
     timeline.addLayer(timeAxis, 'main', 'default', true);
-    timeline.state = new wavesUI.states.CenteredZoomState(timeline);
     return timeline;
   }
 
   renderWaveform(buffer: AudioBuffer): void {
     const height: number = this.trackDiv.nativeElement.getBoundingClientRect().height;

       top: 10,
       height: height * 0.9,
       color: 'darkblue'
     });
     (timeline as any).addLayer(waveformLayer, 'main');
+
+    const cursorLayer = new wavesUI.helpers.CursorLayer({
+      height: height
+    });
+    timeline.addLayer(cursorLayer, 'main');
+    timeline.state = new wavesUI.states.CenteredZoomState(timeline);
+    this.ngZone.runOutsideAngular(() => {
+      // listen for time passing...
+      // TODO this gets the fans going on large files... worth fixing? or waiting to write a better component?
+      // or, can this be updated in a more efficient manner?
+      const updateSeekingCursor = () => {
+        cursorLayer.currentPosition = this.audioService.getCurrentTime();
+        cursorLayer.update();
+        requestAnimationFrame(updateSeekingCursor);
+      };
+      updateSeekingCursor();
+    });
   }
 
 }