comparison src/app/waveform/waveform.component.ts @ 341:684619d3fad5

Allow interacting with highlight layer regardless of whether playback / seeking is supported. Also remove cursor layer when component seeking disabled.

             if (isPlaying) {
               this.animate();
             }
           });
     } else {
+      if (this.cursorLayer && this.waveTrack) {
+        this.waveTrack.remove(this.cursorLayer);
+      }
       if (this.playingStateSubscription) {
         this.playingStateSubscription.unsubscribe();
       }
       if (this.seekedSubscription) {
         this.seekedSubscription.unsubscribe();

   private onAudioDataSubscription: Subscription;
   private zoomOnMouseDown: number;
   private offsetOnMouseDown: number;
   private hasShot: boolean;
   private isLoading: boolean;
+  private waveTrack: Track;
 
   private static changeColour(layer: Layer, colour: string): void {
     const butcherShapes = (shape) => {
       shape.install({color: () => colour});
       shape.params.color = colour;

         this.timeline.visibleWidth = width;
       }
     } else {
       this.timeline = new wavesUI.core.Timeline(pixelsPerSecond, width);
     }
-    const waveTrack = this.timeline.createTrack(
+    this.waveTrack = this.timeline.createTrack(
       track,
       height,
       `wave-${this.trackIdPrefix}`
     );
     if (isInitialRender && hasExistingTimeline) {
       // time axis
       const timeAxis = new wavesUI.helpers.TimeAxisLayer({
         height: height,
         color: '#b0b0b0'
       });
-      this.addLayer(timeAxis, waveTrack, this.timeline.timeContext, true);
+      this.addLayer(timeAxis, this.waveTrack, this.timeline.timeContext, true);
       this.cursorLayer = new wavesUI.helpers.CursorLayer({
         height: height,
         color: '#c33c54'
       });
-      this.addLayer(this.cursorLayer, waveTrack, this.timeline.timeContext);
+      this.addLayer(
+        this.cursorLayer,
+        this.waveTrack,
+        this.timeline.timeContext
+      );
     }
     if ('ontouchstart' in window) {
       interface Point {
         x: number;
         y: number;

       }
     }
   }
 
   renderWaveform(buffer: AudioBuffer): void {
-    // const height: number = this.trackDiv.nativeElement.getBoundingClientRect().height / 2;
-    const height: number = this.trackDiv.nativeElement.getBoundingClientRect().height;
-    const waveTrack = this.timeline.getTrackById(`wave-${this.trackIdPrefix}`);
+    const height = this.trackDiv.nativeElement.getBoundingClientRect().height;
     if (this.timeline) {
       // resize
       const width = this.trackDiv.nativeElement.getBoundingClientRect().width;
 
       this.clearTimeline();
 
       this.timeline.visibleWidth = width;
       this.timeline.pixelsPerSecond = width / buffer.duration;
-      waveTrack.height = height;
+      this.waveTrack.height = height;
     } else {
       this.renderTimeline(buffer.duration);
     }
     this.timeline.timeContext.offset = 0.5 * this.timeline.timeContext.visibleDuration;
 
     // time axis
     const timeAxis = new wavesUI.helpers.TimeAxisLayer({
       height: height,
       color: '#b0b0b0'
     });
-    this.addLayer(timeAxis, waveTrack, this.timeline.timeContext, true);
+    this.addLayer(timeAxis, this.waveTrack, this.timeline.timeContext, true);
 
     const nchannels = buffer.numberOfChannels;
     const totalWaveHeight = height * 0.9;
     const waveHeight = totalWaveHeight / nchannels;
 

         top: (height - totalWaveHeight) / 2 + waveHeight * ch,
         height: waveHeight,
         color: '#0868ac',
         channel: ch
       });
-      this.addLayer(waveformLayer, waveTrack, this.timeline.timeContext);
+      this.addLayer(waveformLayer, this.waveTrack, this.timeline.timeContext);
     }
 
     this.cursorLayer = new wavesUI.helpers.CursorLayer({
       height: height,
       color: '#c33c54'
     });
-    this.addLayer(this.cursorLayer, waveTrack, this.timeline.timeContext);
+    this.addLayer(this.cursorLayer, this.waveTrack, this.timeline.timeContext);
     this.timeline.state = new wavesUI.states.CenteredZoomState(this.timeline);
-    waveTrack.render();
-    waveTrack.update();
+    this.waveTrack.render();
+    this.waveTrack.update();
 
     this.isLoading = false;
     this.ref.markForCheck();
     this.animate();
   }

       min = 0;
       max = 1;
     }
 
     const height = this.trackDiv.nativeElement.getBoundingClientRect().height;
-    const waveTrack = this.timeline.getTrackById(`wave-${this.trackIdPrefix}`);
 
     // Now add a line layer for each vector feature
     const lineLayers = features.map(feature => {
 
       let duration = 0;

         height: height,
         yDomain: [ min, max ]
       });
       this.addLayer(
         lineLayer,
-        waveTrack,
+        this.waveTrack,
         this.timeline.timeContext
       );
 
       // Set start and duration so that the highlight layer can use
       // them to determine which line to draw values from

       height: height,
       yDomain: [ min, max ]
     });
     this.addLayer(
       scaleLayer,
-      waveTrack,
+      this.waveTrack,
       this.timeline.timeContext
     );
 
     // And a single highlight layer which uses all of the line layers
     // as its source material

       yDomain: [ min, max ],
       unit
     });
     this.addLayer(
       this.highlightLayer,
-      waveTrack,
+      this.waveTrack,
       this.timeline.timeContext
     );
   }
 
   // TODO refactor - this doesn't belong here

       return;
     }
     const features: FeatureCollection = (extracted.features as FeatureCollection);
     const outputDescriptor = extracted.outputDescriptor;
     const height = this.trackDiv.nativeElement.getBoundingClientRect().height;
-    const waveTrack = this.timeline.getTrackById(`wave-${this.trackIdPrefix}`);
 
     let unit = '';
     if (outputDescriptor.configured.hasOwnProperty('unit')) {
       unit = outputDescriptor.configured.unit;
     }

                 labelPosition: 'bottom',
                 shadeSegments: true
               });
               this.addLayer(
                 featureLayer,
-                waveTrack,
+                this.waveTrack,
                 this.timeline.timeContext
               );
               break;
             case 'regions':
               this.renderRegions(
                 featureData,
                 outputDescriptor,
-                waveTrack,
+                this.waveTrack,
                 height,
                 colour
               );
               break;
             case 'notes':

                 notes,
                 {height: height, color: colour, yDomain: [min, max] }
               );
               this.addLayer(
                 pianoRollLayer,
-                waveTrack,
+                this.waveTrack,
                 this.timeline.timeContext
               );
               break;
           }
         } catch (e) {

           normalise: 'none',
           mapper: this.iceMapper()
         });
         this.addLayer(
           matrixLayer,
-          waveTrack,
+          this.waveTrack,
           this.timeline.timeContext
         );
         break;
       }
       default:

       const updateSeekingCursor = () => {
         const currentTime = this.audioService.getCurrentTime();
         this.cursorLayer.currentPosition = currentTime;
         this.cursorLayer.update();
 
-        if (typeof(this.highlightLayer) !== 'undefined') {
+        if (this.highlightLayer) {
           this.highlightLayer.currentPosition = currentTime;
           this.highlightLayer.update();
         }
 
         const currentOffset = this.timeline.timeContext.offset;

   }
 
   seek(x: number): void {
     if (this.timeline) {
       const timeContext: any = this.timeline.timeContext;
+      const timeX = timeContext.timeToPixel.invert(x) - timeContext.offset;
       if (this.isSeeking) {
-        this.audioService.seekTo(
-          timeContext.timeToPixel.invert(x) - timeContext.offset
-        );
+        this.audioService.seekTo(timeX);
+      } else {
+        if (this.highlightLayer) {
+          this.highlightLayer.currentPosition = timeX;
+          this.highlightLayer.update();
+        }
       }
     }
   }
 }