@checksub_team/peaks_timeline 2.1.0 → 2.2.0-alpha.0

package/package.json

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

package/peaks.js

@@ -16723,7 +16723,7 @@ module.exports = function (Utils, Konva) {
     PlayheadLayer.prototype._createPlayheadText = function (color) {
         this._playheadText = new Konva.Text({
             x: 13,
-            y: 3,
+            y: 10,
             text: '00:00:00',
             fontSize: 11,
             fontFamily: 'sans-serif',
@@ -16737,21 +16737,28 @@ module.exports = function (Utils, Konva) {
         this._syncPlayhead(time);
     };
     PlayheadLayer.prototype._syncPlayhead = function (time) {
-        if (this._time === time) {
-            return;
+        const pixelHasChanged = this._updatePlayheadPixel(time);
+        const timeHasChanged = this._time !== time;
+        if (timeHasChanged) {
+            this._updateActiveSegmentsAndSources(time);
+            this._updatePlayheadText(time);
         }
         this._time = time;
-        this._updatePlayheadPixel(time);
-        this._updateActiveSegmentsAndSources(time);
-        this._updatePlayheadText(time);
-        this._playheadLayer.batchDraw();
+        if (pixelHasChanged || timeHasChanged) {
+            this._playheadLayer.batchDraw();
+        }
     };
     PlayheadLayer.prototype._updatePlayheadPixel = function (time) {
         const pixelIndex = this._view.timeToPixels(time);
         const frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
         this._playheadPixel = pixelIndex;
         const playheadX = this._playheadPixel - frameOffset;
-        this._playheadGroup.setAttr('x', playheadX);
+        const oldX = this._playheadGroup.getAttr('x');
+        const shouldUpdateX = oldX !== playheadX;
+        if (shouldUpdateX) {
+            this._playheadGroup.setAttr('x', playheadX);
+        }
+        return shouldUpdateX;
     };
     PlayheadLayer.prototype._updateActiveSegmentsAndSources = function (time) {
         const lineGroups = this._lines.getLineGroupsById();
@@ -16795,7 +16802,6 @@ module.exports = function (Utils, Konva) {
     PlayheadLayer.prototype._updatePlayheadText = function (time) {
         var text = Utils.formatTime(time, false);
         this._playheadText.setText(text);
-        this._peaks.emit('playhead.moved', this._playheadText.getAbsolutePosition().x, this._playheadText.width());
     };
     PlayheadLayer.prototype.getPlayheadOffset = function () {
         return this._playheadPixel - this._view.getFrameOffset();
@@ -19822,6 +19828,7 @@ module.exports = function (Utils, Konva) {
     WaveformShape.prototype._sceneFunc = function (context) {
         var width = this._view.getWidth();
         var waveformData = this._layer.getLoadedData(this._url).data;
+        var targetSpeed = this._source.targetSpeed || 1;
         var startPixel = 0, startOffset = 0;
         if (this._source) {
             startPixel = this._view.timeToPixels(this._source.mediaStartTime) + Math.max(this._view.getFrameOffset() - this._view.timeToPixels(this._source.startTime), 0);
@@ -19829,7 +19836,9 @@ module.exports = function (Utils, Konva) {
         }
         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);
+            var effectiveMediaDuration = (this._source.endTime - this._source.startTime) * targetSpeed;
+            var effectiveMediaEndTime = Math.min(this._source.mediaStartTime + effectiveMediaDuration, this._source.duration || Infinity);
+            endPixel = Math.min(this._view.timeToPixels(effectiveMediaEndTime) - 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);
     };
@@ -19846,16 +19855,19 @@ module.exports = function (Utils, Konva) {
         }
     };
     WaveformShape.prototype._drawChannel = function (context, channel, startPixel, startOffset, endPixel, top, height) {
-        var x, val;
+        var x, val, displayX;
         var amplitudeScale = this._view.getAmplitudeScale();
+        var targetSpeed = this._source && this._source.targetSpeed ? this._source.targetSpeed : 1;
         context.beginPath();
         for (x = Math.floor(startPixel); x < Math.ceil(endPixel); x++) {
             val = channel.min_sample(x);
-            context.lineTo(x - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+            displayX = (x - startPixel) / targetSpeed + startPixel;
+            context.lineTo(displayX - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
         }
         for (x = Math.ceil(endPixel) - 1; x >= Math.floor(startPixel); x--) {
             val = channel.max_sample(x);
-            context.lineTo(x - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+            displayX = (x - startPixel) / targetSpeed + startPixel;
+            context.lineTo(displayX - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
         }
         context.closePath();
         context.fillShape(this);
@@ -20985,8 +20997,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,
@@ -21035,7 +21052,8 @@ module.exports = function (Utils) {
             markerWidth: markerWidth,
             volume: volume,
             volumeRange: volumeRange,
-            loading: loading
+            loading: loading,
+            targetSpeed: targetSpeed
         };
         validateSource(peaks, opts, 'add()');
         this._peaks = peaks;
@@ -21091,6 +21109,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) {
@@ -21515,6 +21534,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) {
@@ -21650,7 +21675,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()');
@@ -21700,6 +21726,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_')) {
@@ -22013,7 +22040,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_')) {
@@ -22043,7 +22071,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/playhead-layer.js

@@ -196,7 +196,7 @@ define([
     // Create with default y, the real value is set in fitToView().
     this._playheadText = new Konva.Text({
       x: 13,
-      y: 3,
+      y: 10,
       text: '00:00:00',
       fontSize: 11,
       fontFamily: 'sans-serif',
@@ -226,15 +226,18 @@ define([
    */
 
   PlayheadLayer.prototype._syncPlayhead = function(time) {
-    if (this._time === time) {
-      return;
+    const pixelHasChanged = this._updatePlayheadPixel(time);
+    const timeHasChanged = this._time !== time;
+
+    if (timeHasChanged) {
+      this._updateActiveSegmentsAndSources(time);
+      this._updatePlayheadText(time);
     }
 
     this._time = time;
-    this._updatePlayheadPixel(time);
-    this._updateActiveSegmentsAndSources(time);
-    this._updatePlayheadText(time);
-    this._playheadLayer.batchDraw();
+    if (pixelHasChanged || timeHasChanged) {
+      this._playheadLayer.batchDraw();
+    }
   };
 
   /**
@@ -249,8 +252,15 @@ define([
 
     this._playheadPixel = pixelIndex;
     const playheadX = this._playheadPixel - frameOffset;
+    const oldX = this._playheadGroup.getAttr('x');
+
+    const shouldUpdateX = oldX !== playheadX;
+
+    if (shouldUpdateX) {
+      this._playheadGroup.setAttr('x', playheadX);
+    }
 
-    this._playheadGroup.setAttr('x', playheadX);
+    return shouldUpdateX;
   };
 
   /**
@@ -328,11 +338,6 @@ define([
     var text = Utils.formatTime(time, false);
 
     this._playheadText.setText(text);
-    this._peaks.emit(
-      'playhead.moved',
-      this._playheadText.getAbsolutePosition().x,
-      this._playheadText.width()
-    );
   };
 
   /**

package/src/components/waveform-shape.js

@@ -72,6 +72,7 @@ define(['../utils', 'konva'], function(Utils, Konva) {
   WaveformShape.prototype._sceneFunc = function(context) {
     var width = this._view.getWidth();
     var waveformData = this._layer.getLoadedData(this._url).data;
+    var targetSpeed = this._source.targetSpeed || 1.0;
 
     var startPixel = 0, startOffset = 0;
 
@@ -87,8 +88,16 @@ define(['../utils', 'konva'], function(Utils, Konva) {
     var endPixel = width;
 
     if (this._source) {
+      // Calculate the effective media end time based on targetSpeed
+      // If speed is 2.0, we can fit 2x more audio in the same visual space
+      var effectiveMediaDuration = (this._source.endTime - this._source.startTime) * targetSpeed;
+      var effectiveMediaEndTime = Math.min(
+        this._source.mediaStartTime + effectiveMediaDuration,
+        this._source.duration || Infinity
+      );
+
       endPixel = Math.min(
-        this._view.timeToPixels(this._source.mediaEndTime) - Math.max(
+        this._view.timeToPixels(effectiveMediaEndTime) - Math.max(
           this._view.timeToPixels(this._source.endTime)
             - this._view.getFrameOffset()
             - this._view.getWidth(),
@@ -151,22 +160,30 @@ define(['../utils', 'konva'], function(Utils, Konva) {
 
   WaveformShape.prototype._drawChannel = function(context, channel,
     startPixel, startOffset, endPixel, top, height) {
-    var x, val;
+    var x, val, displayX;
 
     var amplitudeScale = this._view.getAmplitudeScale();
+    var targetSpeed = this._source && this._source.targetSpeed ? this._source.targetSpeed : 1.0;
 
     context.beginPath();
 
     for (x = Math.floor(startPixel); x < Math.ceil(endPixel); x++) {
       val = channel.min_sample(x);
 
-      context.lineTo(x - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+      // Scale the x position by dividing by targetSpeed to compress/expand the waveform
+      // targetSpeed = 2.0 means the waveform is drawn at half width (compressed)
+      // targetSpeed = 0.5 means the waveform is drawn at double width (expanded)
+      displayX = (x - startPixel) / targetSpeed + startPixel;
+
+      context.lineTo(displayX - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
     }
 
     for (x = Math.ceil(endPixel) - 1; x >= Math.floor(startPixel); x--) {
       val = channel.max_sample(x);
 
-      context.lineTo(x - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+      displayX = (x - startPixel) / targetSpeed + startPixel;
+
+      context.lineTo(displayX - 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
     );