Added zoomview autoScroll and autoScrollOffset options

See #497
bbc · Jun 16, 2023 · e8940b1 · e8940b1
1 parent f4bcb61
commit e8940b1
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 11 deletions.
diff --git a/doc/API.md b/doc/API.md
@@ -32,7 +32,7 @@ This document describes the Peaks.js API, including configuration options, funct
     - [view.setPlayedWaveformColor()](#viewsetplayedwaveformcolorcolor)
     - [view.showPlayheadTime()](#viewshowplayheadtimeshow)
     - [view.setTimeLabelPrecision()](#viewsettimeLabelPrecisionprecision)
-    - [view.enableAutoScroll()](#viewenableautoscrollenable)
+    - [view.enableAutoScroll()](#viewenableautoscrollenable-options)
     - [view.enableMarkerEditing()](#viewenablemarkereditingenable)
     - [view.enableSegmentDragging()](#viewenablesegmentdraggingenable)
     - [view.setSegmentDragMode()](#viewsetsegmentdragmodemode)
@@ -187,6 +187,14 @@ var options = {
     // Mouse-wheel mode: either 'none' or 'scroll'
     wheelMode: 'none',
 
+    // Auto-scroll the waveform when the playhead reaches the edge of
+    // the visible waveform
+    autoScroll: true,
+
+    // The offset in pixels edge of the visible waveform to trigger
+    // auto-scroll
+    autoScrollOffset: 100,
+
     segmentOptions: {
       // Some segment options can be overridden for the zoomable waveform,
       // see segmentOptions below
@@ -826,13 +834,18 @@ const view = instance.views.getView('zoomview');
 view.showAxisLabels(false); // Remove the time axis labels.
 ```
 
-### `view.enableAutoScroll(enable)`
+### `view.enableAutoScroll(enable[, options])`
 
 Enables or disables auto-scroll behavior (enabled by default). This only applies to the zoomable waveform view.
 
+The optional `options` parameter allows the behavior to be customized. If present, `options` should be an object with one of the following keys:
+
+* `offset`: The offset in pixels from the edge of the visible waveform to trigger auto-scroll (`number`, defaults to 100)
+
 ```js
 const view = instance.views.getView('zoomview');
 view.enableAutoScroll(false);
+view.enableAutoScroll(true, { offset: 0 });
 ```
 
 ### `view.enableMarkerEditing(enable)`

diff --git a/peaks.js.d.ts b/peaks.js.d.ts
@@ -122,6 +122,8 @@ declare module 'peaks.js' {
   interface ZoomViewOptions extends ViewOptions {
     wheelMode?: "none" | "scroll";
     playheadClickTolerance?: number;
+    autoScroll?: boolean;
+    autoScrollOffset?: number;
   }
 
   interface OverviewOptions extends ViewOptions {
@@ -468,12 +470,16 @@ declare module 'peaks.js' {
   interface WaveformOverview extends WaveformView {
   }
 
+  interface EnableAutoScrollOptions {
+    offset?: number;
+  }
+
   interface SetWheelModeOptions {
     captureVerticalScroll?: boolean;
   }
 
   interface WaveformZoomView extends WaveformView {
-    enableAutoScroll: (enable: boolean) => void;
+    enableAutoScroll: (enable: boolean, options?: EnableAutoScrollOptions) => void;
     scrollWaveform: (options: XOR<{ seconds: number }, { pixels: number }>) => void;
     setStartTime: (time: number) => void;
     setWheelMode: (mode: 'scroll' | 'none', options?: SetWheelModeOptions) => void;

diff --git a/src/main.js b/src/main.js
@@ -84,7 +84,9 @@ const defaultZoomviewOptions = {
   // showPlayheadTime:    true,
   playheadClickTolerance: 3,
   waveformColor:          'rgba(0, 225, 128, 1)',
-  wheelMode:              'none'
+  wheelMode:              'none',
+  autoScroll:             true,
+  autoScrollOffset:       100,
   // zoomAdapter:         'static'
 };
 
@@ -199,7 +201,9 @@ function getZoomviewOptions(opts) {
     'fontFamily',
     'fontSize',
     'fontStyle',
-    'wheelMode'
+    'wheelMode',
+    'autoScroll',
+    'autoScrollOffset'
   ];
 
   optNames.forEach(function(optName) {

diff --git a/src/waveform-zoomview.js b/src/waveform-zoomview.js
@@ -61,7 +61,9 @@ function WaveformZoomView(waveformData, container, peaks) {
   self._peaks.on('keyboard.shift_left', self._onKeyboardShiftLeft);
   self._peaks.on('keyboard.shift_right', self._onKeyboardShiftRight);
 
-  self._enableAutoScroll = true;
+  self._autoScroll = self._viewOptions.autoScroll;
+  self._autoScrollOffset = self._viewOptions.autoScrollOffset;
+
   self._amplitudeScale = 1.0;
   self._timeLabelPrecision = self._viewOptions.timeLabelPrecision;
   self._enableSeek = true;
@@ -524,19 +526,19 @@ WaveformZoomView.prototype.playheadPosChanged = function(time) {
 WaveformZoomView.prototype._syncPlayhead = function(time) {
   this._playheadLayer.updatePlayheadTime(time);
 
-  if (this._enableAutoScroll) {
+  if (this._autoScroll) {
     // Check for the playhead reaching the right-hand side of the window.
 
     const pixelIndex = this.timeToPixels(time);
 
     // TODO: move this code to animation function?
     // TODO: don't scroll if user has positioned view manually (e.g., using
     // the keyboard)
-    const endThreshold = this._frameOffset + this._width - 100;
+    const endThreshold = this._frameOffset + this._width - this._autoScrollOffset;
 
     if (pixelIndex >= endThreshold || pixelIndex < this._frameOffset) {
       // Put the playhead at 100 pixels from the left edge
-      this._frameOffset = pixelIndex - 100;
+      this._frameOffset = pixelIndex - this._autoScrollOffset;
 
       if (this._frameOffset < 0) {
         this._frameOffset = 0;
@@ -1001,8 +1003,12 @@ WaveformZoomView.prototype.showAxisLabels = function(show) {
   this._axisLayer.draw();
 };
 
-WaveformZoomView.prototype.enableAutoScroll = function(enable) {
-  this._enableAutoScroll = enable;
+WaveformZoomView.prototype.enableAutoScroll = function(enable, options) {
+  this._autoScroll = enable;
+
+  if (objectHasProperty(options, 'offset')) {
+    this._autoScrollOffset = options.offset;
+  }
 };
 
 WaveformZoomView.prototype.enableMarkerEditing = function(enable) {