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

package/package.json

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

package/peaks.js

@@ -16326,6 +16326,9 @@ module.exports = function (SourceGroup, Source, Utils, Konva) {
         }
     };
     ModeLayer.prototype._onKeyboardDelete = function () {
+        if (!this._view.isFocusedByClick()) {
+            return;
+        }
         const selectedElements = Object.values(this._selectedElements);
         if (selectedElements.length === 1) {
             var selectedElement = selectedElements[0];
@@ -19828,21 +19831,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 +19848,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);
@@ -22401,7 +22396,8 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         self._timelineLength = 0;
         self._timeToPixelsScale = self._options.initialZoomLevel;
         self._timeToPixelsMinScale = self._options.minScale;
-        self._isFocused = false;
+        self._focusedByHover = false;
+        self._focusedByClick = false;
         self._isClickable = true;
         self._width = container.clientWidth;
         self._height = container.clientHeight || self._options.height;
@@ -22477,13 +22473,13 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
             }
         });
         this._stage.on('mouseover', function () {
-            self._isFocused = true;
+            self._focusedByHover = true;
         });
         this._stage.on('mouseout', function () {
-            self._isFocused = false;
+            self._focusedByHover = false;
         });
         this._stage.on('click', function (event) {
-            self._isFocused = true;
+            self._focusedByClick = true;
             if (!self._isClickable) {
                 return;
             }
@@ -22539,11 +22535,18 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         window.addEventListener('mouseup', this._mouseUp.bind(this), false);
         window.addEventListener('touchend', this._mouseUp.bind(this), false);
         window.addEventListener('blur', this._mouseUp.bind(this), false);
+        this._onWindowClick = this._onWindowClick.bind(this);
+        window.addEventListener('click', this._onWindowClick, false);
     }
     View.prototype._mouseUp = function () {
         this.clearScrollingInterval();
         this._peaks.emit('handler.view.mouseup');
     };
+    View.prototype._onWindowClick = function (event) {
+        if (!this._container.contains(event.target)) {
+            this._focusedByClick = false;
+        }
+    };
     View.prototype.setClickable = function (clickable) {
         this._isClickable = clickable;
     };
@@ -22628,8 +22631,14 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
     View.prototype.isListening = function () {
         return this._stage.listening();
     };
+    View.prototype.isFocusedByHover = function () {
+        return this._focusedByHover;
+    };
+    View.prototype.isFocusedByClick = function () {
+        return this._focusedByClick;
+    };
     View.prototype.isFocused = function () {
-        return this._isFocused;
+        return this._focusedByHover || this._focusedByClick;
     };
     View.prototype.batchDrawSourcesLayer = function () {
         this._sourcesLayer.batchDraw();
@@ -22929,6 +22938,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         this._peaks.off('handler.keyboard.shiftright', this._onKeyboardShiftRight);
         this._peaks.off('handler.view.defaultmode', this._onDefaultMode);
         this._peaks.off('handler.view.cutmode', this._onCutMode);
+        window.removeEventListener('click', this._onWindowClick, false);
         if (this._stage) {
             this._stage.destroy();
             this._stage = null;

package/src/components/mode-layer.js

@@ -234,6 +234,10 @@ define([
   };
 
   ModeLayer.prototype._onKeyboardDelete = function() {
+    if (!this._view.isFocusedByClick()) {
+      return;
+    }
+
     const selectedElements = Object.values(this._selectedElements);
 
     // We allow deletion if there is ONLY 1 element selected

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();

package/src/view.js

@@ -79,7 +79,8 @@ define([
     self._timeToPixelsScale = self._options.initialZoomLevel;
     self._timeToPixelsMinScale = self._options.minScale;
 
-    self._isFocused = false;
+    self._focusedByHover = false;
+    self._focusedByClick = false; // Track if focus was set by click
     self._isClickable = true;
 
     self._width = container.clientWidth;
@@ -205,15 +206,15 @@ define([
     });
 
     this._stage.on('mouseover', function() {
-      self._isFocused = true;
+      self._focusedByHover = true;
     });
 
     this._stage.on('mouseout', function() {
-      self._isFocused = false;
+      self._focusedByHover = false;
     });
 
     this._stage.on('click', function(event) {
-      self._isFocused = true;
+      self._focusedByClick = true;
 
       if (!self._isClickable) {
         return;
@@ -307,6 +308,10 @@ define([
     window.addEventListener('mouseup', this._mouseUp.bind(this), false);
     window.addEventListener('touchend', this._mouseUp.bind(this), false);
     window.addEventListener('blur', this._mouseUp.bind(this), false);
+
+    // Handle clicks outside the timeline to remove focus
+    this._onWindowClick = this._onWindowClick.bind(this);
+    window.addEventListener('click', this._onWindowClick, false);
   }
 
   View.prototype._mouseUp = function() {
@@ -314,6 +319,12 @@ define([
     this._peaks.emit('handler.view.mouseup');
   };
 
+  View.prototype._onWindowClick = function(event) {
+    if (!this._container.contains(event.target)) {
+      this._focusedByClick = false;
+    }
+  };
+
   View.prototype.setClickable = function(clickable) {
     this._isClickable = clickable;
   };
@@ -430,8 +441,16 @@ define([
     return this._stage.listening();
   };
 
+  View.prototype.isFocusedByHover = function() {
+    return this._focusedByHover;
+  };
+
+  View.prototype.isFocusedByClick = function() {
+    return this._focusedByClick;
+  };
+
   View.prototype.isFocused = function() {
-    return this._isFocused;
+    return this._focusedByHover || this._focusedByClick;
   };
 
   View.prototype.batchDrawSourcesLayer = function() {
@@ -900,6 +919,9 @@ define([
     this._peaks.off('handler.view.defaultmode', this._onDefaultMode);
     this._peaks.off('handler.view.cutmode', this._onCutMode);
 
+    // Remove window click listener
+    window.removeEventListener('click', this._onWindowClick, false);
+
     if (this._stage) {
       this._stage.destroy();
       this._stage = null;