@checksub_team/peaks_timeline 2.1.1 → 2.2.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "2.1.1",
+  "version": "2.2.0-alpha.1",
   "description": "JavaScript UI component for displaying audio waveforms",
   "main": "./peaks.js",
   "types": "./peaks.js.d.ts",

package/peaks.js

@@ -19828,18 +19828,16 @@ module.exports = function (Utils, Konva) {
     WaveformShape.prototype._sceneFunc = function (context) {
         var width = this._view.getWidth();
         var waveformData = this._layer.getLoadedData(this._url).data;
-        var startPixel = 0, startOffset = 0;
+        var startPixel = 0, startOffset = 0, endPixel = width, targetSpeed = 1;
         if (this._source) {
-            startPixel = this._view.timeToPixels(this._source.mediaStartTime) + Math.max(this._view.getFrameOffset() - this._view.timeToPixels(this._source.startTime), 0);
+            targetSpeed = this._source.targetSpeed || 1;
+            startPixel = Math.floor((this._view.timeToPixels(this._source.mediaStartTime) + Math.max(this._view.getFrameOffset() - this._view.timeToPixels(this._source.startTime), 0)) * targetSpeed);
             startOffset = this._view.timeToPixels(this._source.mediaStartTime);
+            endPixel = Math.min(Math.ceil((this._view.timeToPixels(this._source.mediaEndTime) - Math.max(this._view.timeToPixels(this._source.endTime) - this._view.getFrameOffset() - this._view.getWidth(), 0)) * targetSpeed), waveformData.length);
         }
-        var endPixel = width;
-        if (this._source) {
-            endPixel = Math.min(this._view.timeToPixels(this._source.mediaEndTime) - Math.max(this._view.timeToPixels(this._source.endTime) - this._view.getFrameOffset() - this._view.getWidth(), 0), waveformData.length);
-        }
-        this._drawWaveform(context, waveformData, startPixel, startOffset, endPixel, this._height);
+        this._drawWaveform(context, waveformData, startPixel, startOffset, endPixel, targetSpeed, this._height);
     };
-    WaveformShape.prototype._drawWaveform = function (context, waveformData, startPixel, startOffset, endPixel, height) {
+    WaveformShape.prototype._drawWaveform = function (context, waveformData, startPixel, startOffset, endPixel, targetSpeed, height) {
         var channels = waveformData.channels;
         var waveformTop = 0;
         var waveformHeight = Math.floor(height / channels);
@@ -19847,21 +19845,21 @@ module.exports = function (Utils, Konva) {
             if (i === channels - 1) {
                 waveformHeight = height - (channels - 1) * waveformHeight;
             }
-            this._drawChannel(context, waveformData.channel(i), startPixel, startOffset, endPixel, waveformTop, waveformHeight);
+            this._drawChannel(context, waveformData.channel(i), startPixel, startOffset, endPixel, waveformTop, waveformHeight, targetSpeed);
             waveformTop += waveformHeight;
         }
     };
-    WaveformShape.prototype._drawChannel = function (context, channel, startPixel, startOffset, endPixel, top, height) {
+    WaveformShape.prototype._drawChannel = function (context, channel, startPixel, startOffset, endPixel, top, height, targetSpeed) {
         var x, val;
         var amplitudeScale = this._view.getAmplitudeScale();
         context.beginPath();
-        for (x = Math.floor(startPixel); x < Math.ceil(endPixel); x++) {
+        for (x = startPixel; x < endPixel; x++) {
             val = channel.min_sample(x);
-            context.lineTo(x - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+            context.lineTo(x / targetSpeed - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
         }
-        for (x = Math.ceil(endPixel) - 1; x >= Math.floor(startPixel); x--) {
+        for (x = endPixel - 1; x >= startPixel; x--) {
             val = channel.max_sample(x);
-            context.lineTo(x - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+            context.lineTo(x / targetSpeed - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
         }
         context.closePath();
         context.fillShape(this);
@@ -20991,8 +20989,13 @@ module.exports = function (Utils) {
         } else if (!Utils.isBoolean(options.loading)) {
             throw new TypeError('peaks.sources.' + context + ': loading must be a boolean');
         }
+        if (Utils.isNullOrUndefined(options.targetSpeed)) {
+            options.targetSpeed = 1;
+        } else if (!Utils.isNumber(options.targetSpeed) || options.targetSpeed <= 0) {
+            throw new TypeError('peaks.sources.' + context + ': targetSpeed must be a positive number');
+        }
     }
-    function Source(peaks, id, lineId, originId, elementId, title, titleAlignments, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, hoverBackgroundColor, selectedBackgroundColor, borderColor, selectedBorderColor, warningColor, warningWidth, volumeSliderColor, volumeSliderWidth, volumeSliderDraggingWidth, textFont, textFontSize, textColor, textBackgroundColor, textPosition, textAutoScroll, borderWidth, borderRadius, wrapped, draggable, orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, buttons, markerColor, markerWidth, volume, volumeRange, loading, ...customParams) {
+    function Source(peaks, id, lineId, originId, elementId, title, titleAlignments, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, hoverBackgroundColor, selectedBackgroundColor, borderColor, selectedBorderColor, warningColor, warningWidth, volumeSliderColor, volumeSliderWidth, volumeSliderDraggingWidth, textFont, textFontSize, textColor, textBackgroundColor, textPosition, textAutoScroll, borderWidth, borderRadius, wrapped, draggable, orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, buttons, markerColor, markerWidth, volume, volumeRange, loading, targetSpeed, ...customParams) {
         var opts = {
             title: title,
             titleAlignments: titleAlignments,
@@ -21041,7 +21044,8 @@ module.exports = function (Utils) {
             markerWidth: markerWidth,
             volume: volume,
             volumeRange: volumeRange,
-            loading: loading
+            loading: loading,
+            targetSpeed: targetSpeed
         };
         validateSource(peaks, opts, 'add()');
         this._peaks = peaks;
@@ -21097,6 +21101,7 @@ module.exports = function (Utils) {
         this._volume = opts.volume;
         this._volumeRange = opts.volumeRange;
         this._loading = opts.loading;
+        this._targetSpeed = opts.targetSpeed;
         this._minSize = peaks.options.minSourceSize;
         this._selected = false;
         for (var i = 0; i < customParams.length; i += 2) {
@@ -21521,6 +21526,12 @@ module.exports = function (Utils) {
             set: function (selected) {
                 this._selected = selected;
             }
+        },
+        targetSpeed: {
+            enumerable: true,
+            get: function () {
+                return this._targetSpeed;
+            }
         }
     });
     Source.prototype.updateTimes = function (newStartTime, newEndTime) {
@@ -21656,7 +21667,8 @@ module.exports = function (Utils) {
             markerWidth: this.markerWidth,
             volume: this.volume,
             volumeRange: this.volumeRange,
-            loading: this.loading
+            loading: this.loading,
+            targetSpeed: this.targetSpeed
         };
         Utils.extend(opts, options);
         validateSource(this._peaks, opts, 'update()');
@@ -21706,6 +21718,7 @@ module.exports = function (Utils) {
         this._volume = opts.volume;
         this._volumeRange = opts.volumeRange;
         this._loading = opts.loading;
+        this._targetSpeed = opts.targetSpeed;
         if (options && typeof options === 'object') {
             for (var key in options) {
                 if (Object.prototype.hasOwnProperty.call(options, key) && key.startsWith('custom_')) {
@@ -22019,7 +22032,8 @@ module.exports = function (Source, Utils) {
             markerWidth: sourceToCut.markerWidth,
             volume: sourceToCut.volume,
             volumeRange: sourceToCut.volumeRange,
-            loading: sourceToCut.loading
+            loading: sourceToCut.loading,
+            targetSpeed: sourceToCut.targetSpeed
         };
         for (var key in sourceToCut) {
             if (key.startsWith('custom_')) {
@@ -22049,7 +22063,7 @@ module.exports = function (Source, Utils) {
                 customParams.push(key, value);
             }
         });
-        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.lineId, options.originId, options.elementId, options.title, options.titleAlignments, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.hoverBackgroundColor, options.selectedBackgroundColor, options.borderColor, options.selectedBorderColor, options.warningColor, options.warningWidth, options.volumeSliderColor, options.volumeSliderWidth, options.volumeSliderDraggingWidth, options.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.textAutoScroll, options.borderWidth, options.borderRadius, options.wrapped, options.draggable, options.orderable, options.resizable, options.cuttable, options.deletable, options.wrapping, options.previewHeight, options.binaryHeight, options.indicators, options.markers, options.buttons, options.markerColor, options.markerWidth, options.volume, options.volumeRange, options.loading, ...customParams);
+        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.lineId, options.originId, options.elementId, options.title, options.titleAlignments, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.hoverBackgroundColor, options.selectedBackgroundColor, options.borderColor, options.selectedBorderColor, options.warningColor, options.warningWidth, options.volumeSliderColor, options.volumeSliderWidth, options.volumeSliderDraggingWidth, options.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.textAutoScroll, options.borderWidth, options.borderRadius, options.wrapped, options.draggable, options.orderable, options.resizable, options.cuttable, options.deletable, options.wrapping, options.previewHeight, options.binaryHeight, options.indicators, options.markers, options.buttons, options.markerColor, options.markerWidth, options.volume, options.volumeRange, options.loading, options.targetSpeed, ...customParams);
         return source;
     };
     SourceHandler.prototype.getSources = function () {

package/src/components/waveform-shape.js

@@ -73,26 +73,28 @@ define(['../utils', 'konva'], function(Utils, Konva) {
     var width = this._view.getWidth();
     var waveformData = this._layer.getLoadedData(this._url).data;
 
-    var startPixel = 0, startOffset = 0;
+    var startPixel = 0, startOffset = 0, endPixel = width, targetSpeed = 1.0;
 
     if (this._source) {
-      startPixel = this._view.timeToPixels(this._source.mediaStartTime) + Math.max(
-        this._view.getFrameOffset() - this._view.timeToPixels(this._source.startTime),
-        0
+      targetSpeed = this._source.targetSpeed || 1.0;
+
+      startPixel = Math.floor(
+        (this._view.timeToPixels(this._source.mediaStartTime) + Math.max(
+          this._view.getFrameOffset() - this._view.timeToPixels(this._source.startTime),
+          0
+        )) * targetSpeed
       );
 
       startOffset = this._view.timeToPixels(this._source.mediaStartTime);
-    }
 
-    var endPixel = width;
-
-    if (this._source) {
       endPixel = Math.min(
-        this._view.timeToPixels(this._source.mediaEndTime) - Math.max(
-          this._view.timeToPixels(this._source.endTime)
-            - this._view.getFrameOffset()
-            - this._view.getWidth(),
-          0
+        Math.ceil(
+          (this._view.timeToPixels(this._source.mediaEndTime) - Math.max(
+            this._view.timeToPixels(this._source.endTime)
+              - this._view.getFrameOffset()
+              - this._view.getWidth(),
+            0
+          )) * targetSpeed
         ),
         waveformData.length
       );
@@ -104,6 +106,7 @@ define(['../utils', 'konva'], function(Utils, Konva) {
       startPixel,
       startOffset,
       endPixel,
+      targetSpeed,
       this._height
     );
   };
@@ -124,7 +127,7 @@ define(['../utils', 'konva'], function(Utils, Konva) {
    */
 
   WaveformShape.prototype._drawWaveform = function(context, waveformData,
-    startPixel, startOffset, endPixel, height) {
+    startPixel, startOffset, endPixel, targetSpeed, height) {
     var channels = waveformData.channels;
 
     var waveformTop = 0;
@@ -142,7 +145,8 @@ define(['../utils', 'konva'], function(Utils, Konva) {
         startOffset,
         endPixel,
         waveformTop,
-        waveformHeight
+        waveformHeight,
+        targetSpeed
       );
 
       waveformTop += waveformHeight;
@@ -150,23 +154,23 @@ define(['../utils', 'konva'], function(Utils, Konva) {
   };
 
   WaveformShape.prototype._drawChannel = function(context, channel,
-    startPixel, startOffset, endPixel, top, height) {
+    startPixel, startOffset, endPixel, top, height, targetSpeed) {
     var x, val;
 
     var amplitudeScale = this._view.getAmplitudeScale();
 
     context.beginPath();
 
-    for (x = Math.floor(startPixel); x < Math.ceil(endPixel); x++) {
+    for (x = startPixel; x < endPixel; x++) {
       val = channel.min_sample(x);
 
-      context.lineTo(x - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+      context.lineTo(x / targetSpeed - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
     }
 
-    for (x = Math.ceil(endPixel) - 1; x >= Math.floor(startPixel); x--) {
+    for (x = endPixel - 1; x >= startPixel; x--) {
       val = channel.max_sample(x);
 
-      context.lineTo(x - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+      context.lineTo(x / targetSpeed - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
     }
 
     context.closePath();

package/src/models/source.js

@@ -368,6 +368,13 @@ define([
     else if (!Utils.isBoolean(options.loading)) {
       throw new TypeError('peaks.sources.' + context + ': loading must be a boolean');
     }
+
+    if (Utils.isNullOrUndefined(options.targetSpeed)) {
+      options.targetSpeed = 1.0;
+    }
+    else if (!Utils.isNumber(options.targetSpeed) || options.targetSpeed <= 0) {
+      throw new TypeError('peaks.sources.' + context + ': targetSpeed must be a positive number');
+    }
   }
 
   /**
@@ -427,6 +434,8 @@ define([
    * @param {Number} volume Current volume level of the source.
    * @param {Array<Number>} volumeRange Array containing min and max volume values.
    * @param {Boolean} loading If <code>true</code> the source is currently loading.
+   * @param {Number} targetSpeed The playback speed multiplier for the source (default 1.0).
+   *   Values > 1.0 speed up playback (compress waveform), values < 1.0 slow down (expand waveform).
    */
 
   function Source(peaks, id, lineId, originId, elementId, title, titleAlignments, url, previewUrl, binaryUrl, kind,
@@ -435,7 +444,7 @@ define([
     volumeSliderWidth, volumeSliderDraggingWidth, textFont, textFontSize, textColor, textBackgroundColor, textPosition,
     textAutoScroll, borderWidth, borderRadius, wrapped, draggable, orderable, resizable,
     cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, buttons, markerColor,
-    markerWidth, volume, volumeRange, loading, ...customParams) {
+    markerWidth, volume, volumeRange, loading, targetSpeed, ...customParams) {
     var opts = {
       title: title,
       titleAlignments: titleAlignments,
@@ -484,7 +493,8 @@ define([
       markerWidth: markerWidth,
       volume: volume,
       volumeRange: volumeRange,
-      loading: loading
+      loading: loading,
+      targetSpeed: targetSpeed
     };
 
     validateSource(peaks, opts, 'add()');
@@ -542,6 +552,7 @@ define([
     this._volume = opts.volume;
     this._volumeRange = opts.volumeRange;
     this._loading = opts.loading;
+    this._targetSpeed = opts.targetSpeed;
     this._minSize = peaks.options.minSourceSize;
     this._selected = false;
 
@@ -997,6 +1008,12 @@ define([
       set: function(selected) {
         this._selected = selected;
       }
+    },
+    targetSpeed: {
+      enumerable: true,
+      get: function() {
+        return this._targetSpeed;
+      }
     }
   });
 
@@ -1164,7 +1181,8 @@ define([
       markerWidth: this.markerWidth,
       volume: this.volume,
       volumeRange: this.volumeRange,
-      loading: this.loading
+      loading: this.loading,
+      targetSpeed: this.targetSpeed
     };
 
     Utils.extend(opts, options);
@@ -1217,6 +1235,7 @@ define([
     this._volume = opts.volume;
     this._volumeRange = opts.volumeRange;
     this._loading = opts.loading;
+    this._targetSpeed = opts.targetSpeed;
 
     if (options && typeof options === 'object') {
       for (var key in options) {

package/src/source-handler.js

@@ -109,7 +109,8 @@ define([
       markerWidth: sourceToCut.markerWidth,
       volume: sourceToCut.volume,
       volumeRange: sourceToCut.volumeRange,
-      loading: sourceToCut.loading
+      loading: sourceToCut.loading,
+      targetSpeed: sourceToCut.targetSpeed
     };
 
     for (var key in sourceToCut) {
@@ -223,6 +224,7 @@ define([
       options.volume,
       options.volumeRange,
       options.loading,
+      options.targetSpeed,
       ...customParams
     );