@checksub_team/peaks_timeline 2.2.0-alpha.0 → 2.2.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "2.2.0-alpha.0",
+  "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,21 +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 targetSpeed = this._source.targetSpeed || 1;
-        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) {
-            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);
+        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);
@@ -19850,24 +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) {
-        var x, val, displayX;
+    WaveformShape.prototype._drawChannel = function (context, channel, startPixel, startOffset, endPixel, top, height, targetSpeed) {
+        var x, val;
         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++) {
+        for (x = startPixel; x < endPixel; x++) {
             val = channel.min_sample(x);
-            displayX = (x - startPixel) / targetSpeed + startPixel;
-            context.lineTo(displayX - 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);
-            displayX = (x - startPixel) / targetSpeed + startPixel;
-            context.lineTo(displayX - 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);

package/src/components/waveform-shape.js

@@ -72,36 +72,29 @@ 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;
+    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) {
-      // 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(effectiveMediaEndTime) - 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
       );
@@ -113,6 +106,7 @@ define(['../utils', 'konva'], function(Utils, Konva) {
       startPixel,
       startOffset,
       endPixel,
+      targetSpeed,
       this._height
     );
   };
@@ -133,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;
@@ -151,7 +145,8 @@ define(['../utils', 'konva'], function(Utils, Konva) {
         startOffset,
         endPixel,
         waveformTop,
-        waveformHeight
+        waveformHeight,
+        targetSpeed
       );
 
       waveformTop += waveformHeight;
@@ -159,31 +154,23 @@ define(['../utils', 'konva'], function(Utils, Konva) {
   };
 
   WaveformShape.prototype._drawChannel = function(context, channel,
-    startPixel, startOffset, endPixel, top, height) {
-    var x, val, displayX;
+    startPixel, startOffset, endPixel, top, height, targetSpeed) {
+    var x, val;
 
     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++) {
+    for (x = startPixel; x < endPixel; x++) {
       val = channel.min_sample(x);
 
-      // 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);
+      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);
 
-      displayX = (x - startPixel) / targetSpeed + startPixel;
-
-      context.lineTo(displayX - 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();