@checksub_team/peaks_timeline 1.4.30 → 1.4.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/package.json +1 -1
  2. package/peaks.js +50 -48
  3. package/src/lines.js +4 -1
  4. package/src/segment-shape.js +1 -1
  5. package/src/segment.js +7 -0
  6. package/src/segments-group.js +48 -34
  7. package/src/source.js +3 -20
  8. package/src/timeline-segments.js +1 -1
  9. package/src/timeline-sources.js +2 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@checksub_team/peaks_timeline",
3
- "version": "1.4.30",
3
+ "version": "1.4.31",
4
4
  "description": "JavaScript UI component for displaying audio waveforms",
5
5
  "main": "./peaks.js",
6
6
  "types": "./peaks.js.d.ts",
package/peaks.js CHANGED
@@ -15186,6 +15186,9 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
15186
15186
  self._segmentsGroups[segment.line] = new SegmentsGroup(self._peaks, self._view, true);
15187
15187
  }
15188
15188
  self._segmentsGroups[segment.line].onSegmentsAdd([segment]);
15189
+ if (Utils.objectHasProperty(self._segmentsGroupToLine, segment.line)) {
15190
+ self._segmentsGroupToLine[segment.line].refreshSegmentsHeight();
15191
+ }
15189
15192
  });
15190
15193
  };
15191
15194
  Lines.prototype._onSegmentsUpdate = function (segment) {
@@ -15230,7 +15233,7 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
15230
15233
  }
15231
15234
  };
15232
15235
  Lines.prototype.addSourceGroup = function (sourceGroup, position) {
15233
- if (!this._linesByPosition[position]) {
15236
+ if (!this._linesByPosition[position] || this._linesByPosition[position].isSegmentsLine()) {
15234
15237
  this._createLine(position);
15235
15238
  this._setInteractions(position);
15236
15239
  }
@@ -16529,7 +16532,7 @@ module.exports = function (Konva, SegmentMarker) {
16529
16532
  fill: segment.color + Math.round(segment.opacity * 255).toString(16),
16530
16533
  stroke: segment.textColor + 'FF',
16531
16534
  strokeWidth: 1,
16532
- draggable: true
16535
+ draggable: this._segment.editable
16533
16536
  });
16534
16537
  var self = this;
16535
16538
  this._rectangle.dragBoundFunc(function () {
@@ -16774,6 +16777,11 @@ module.exports = function (Utils) {
16774
16777
  if (!Utils.isInteger(options.line)) {
16775
16778
  throw new TypeError('peaks.segments.' + context + ': line must be an integer');
16776
16779
  }
16780
+ if (Utils.isNullOrUndefined(options.editable)) {
16781
+ options.editable = true;
16782
+ } else if (!Utils.isBoolean(options.editable)) {
16783
+ throw new TypeError('peaks.segments.' + context + ': editable must be a boolean');
16784
+ }
16777
16785
  }
16778
16786
  function Segment(peaks, id, startTime, endTime, labelText, color, textColor, handleTextColor, opacity, editable, allowDeletion, line) {
16779
16787
  var opts = {
@@ -17253,20 +17261,25 @@ module.exports = function (SegmentShape, Utils, Konva) {
17253
17261
  }
17254
17262
  } else if (segment.startTime >= newStartTime) {
17255
17263
  if (newStartTime < previousSegment.endTime) {
17256
- if (previousSegment.startTime + previousSegment.minSize > newStartTime) {
17257
- newStartTime = previousSegment.startTime + previousSegment.minSize;
17258
- startLimited = true;
17259
- }
17260
- if (previousSegment.endTime !== newStartTime) {
17261
- newXs = this.manageCollision(previousSegment, this._view.timeToPixels(previousSegment.startTime), this._view.timeToPixels(newStartTime));
17262
- if (newXs.startX !== null) {
17263
- previousSegment.startTime = this._view.pixelsToTime(newXs.startX);
17264
+ if (previousSegment.editable) {
17265
+ if (previousSegment.startTime + previousSegment.minSize > newStartTime) {
17266
+ newStartTime = previousSegment.startTime + previousSegment.minSize;
17267
+ startLimited = true;
17264
17268
  }
17265
- if (newXs.endX !== null) {
17266
- previousSegment.endTime = this._view.pixelsToTime(newXs.endX);
17269
+ if (previousSegment.endTime !== newStartTime) {
17270
+ newXs = this.manageCollision(previousSegment, this._view.timeToPixels(previousSegment.startTime), this._view.timeToPixels(newStartTime));
17271
+ if (newXs.startX !== null) {
17272
+ previousSegment.startTime = this._view.pixelsToTime(newXs.startX);
17273
+ }
17274
+ if (newXs.endX !== null) {
17275
+ previousSegment.endTime = this._view.pixelsToTime(newXs.endX);
17276
+ }
17277
+ this._updateSegment(previousSegment);
17278
+ this.addToUpdatedSegments(previousSegment);
17267
17279
  }
17268
- this._updateSegment(previousSegment);
17269
- this.addToUpdatedSegments(previousSegment);
17280
+ } else {
17281
+ newStartTime = previousSegment.endTime;
17282
+ startLimited = true;
17270
17283
  }
17271
17284
  }
17272
17285
  }
@@ -17294,20 +17307,25 @@ module.exports = function (SegmentShape, Utils, Konva) {
17294
17307
  }
17295
17308
  } else if (segment.endTime <= newEndTime) {
17296
17309
  if (newEndTime > nextSegment.startTime) {
17297
- if (nextSegment.endTime - nextSegment.minSize < newEndTime) {
17298
- newEndTime = nextSegment.endTime - nextSegment.minSize;
17299
- endLimited = true;
17300
- }
17301
- if (nextSegment.startTime !== newEndTime) {
17302
- newXs = this.manageCollision(nextSegment, this._view.timeToPixels(newEndTime), this._view.timeToPixels(nextSegment.endTime));
17303
- if (newXs.startX !== null) {
17304
- nextSegment.startTime = this._view.pixelsToTime(newXs.startX);
17310
+ if (nextSegment.editable) {
17311
+ if (nextSegment.endTime - nextSegment.minSize < newEndTime) {
17312
+ newEndTime = nextSegment.endTime - nextSegment.minSize;
17313
+ endLimited = true;
17305
17314
  }
17306
- if (newXs.endX !== null) {
17307
- nextSegment.endTime = this._view.pixelsToTime(newXs.endX);
17315
+ if (nextSegment.startTime !== newEndTime) {
17316
+ newXs = this.manageCollision(nextSegment, this._view.timeToPixels(newEndTime), this._view.timeToPixels(nextSegment.endTime));
17317
+ if (newXs.startX !== null) {
17318
+ nextSegment.startTime = this._view.pixelsToTime(newXs.startX);
17319
+ }
17320
+ if (newXs.endX !== null) {
17321
+ nextSegment.endTime = this._view.pixelsToTime(newXs.endX);
17322
+ }
17323
+ this._updateSegment(nextSegment);
17324
+ this.addToUpdatedSegments(nextSegment);
17308
17325
  }
17309
- this._updateSegment(nextSegment);
17310
- this.addToUpdatedSegments(nextSegment);
17326
+ } else {
17327
+ newEndTime = nextSegment.startTime;
17328
+ endLimited = true;
17311
17329
  }
17312
17330
  }
17313
17331
  }
@@ -18250,11 +18268,8 @@ module.exports = function (Utils) {
18250
18268
  } else if (options.wrapping === 'complete') {
18251
18269
  options.wrapped = false;
18252
18270
  }
18253
- if (!Utils.isNullOrUndefined(options.tts) && !Utils.isBoolean(options.tts)) {
18254
- throw new TypeError('peaks.sources.' + context + ': tts must be a boolean or undefined');
18255
- }
18256
18271
  }
18257
- function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, borderColor, selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable, wrapping, previewHeight, binaryHeight, tts) {
18272
+ function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, borderColor, selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable, wrapping, previewHeight, binaryHeight) {
18258
18273
  var opts = {
18259
18274
  title: title,
18260
18275
  url: url,
@@ -18277,8 +18292,7 @@ module.exports = function (Utils) {
18277
18292
  resizable: resizable,
18278
18293
  wrapping: wrapping,
18279
18294
  previewHeight: previewHeight,
18280
- binaryHeight: binaryHeight,
18281
- tts: tts
18295
+ binaryHeight: binaryHeight
18282
18296
  };
18283
18297
  validateSource(peaks, opts, 'add()');
18284
18298
  this._peaks = peaks;
@@ -18308,7 +18322,6 @@ module.exports = function (Utils) {
18308
18322
  this._previewHeight = opts.previewHeight;
18309
18323
  this._binaryHeight = opts.binaryHeight;
18310
18324
  this._minSize = peaks.options.minSourceSize;
18311
- this._tts = opts.tts;
18312
18325
  }
18313
18326
  Object.defineProperties(Source.prototype, {
18314
18327
  id: {
@@ -18514,14 +18527,6 @@ module.exports = function (Utils) {
18514
18527
  get: function () {
18515
18528
  return this._minSize;
18516
18529
  }
18517
- },
18518
- tts: {
18519
- get: function () {
18520
- return this._tts;
18521
- },
18522
- set: function (tts) {
18523
- this._tts = tts;
18524
- }
18525
18530
  }
18526
18531
  });
18527
18532
  Source.prototype.updateTimes = function (newStartTime, newEndTime) {
@@ -18631,8 +18636,7 @@ module.exports = function (Utils) {
18631
18636
  resizable: this.resizable,
18632
18637
  wrapping: this.wrapping,
18633
18638
  previewHeight: this.previewHeight,
18634
- binaryHeight: this.binaryHeight,
18635
- tts: this.tts
18639
+ binaryHeight: this.binaryHeight
18636
18640
  };
18637
18641
  Utils.extend(opts, options);
18638
18642
  validateSource(this._peaks, opts, 'update()');
@@ -18658,7 +18662,6 @@ module.exports = function (Utils) {
18658
18662
  this._wrapping = opts.wrapping;
18659
18663
  this._previewHeight = opts.previewHeight;
18660
18664
  this._binaryHeight = opts.binaryHeight;
18661
- this._tts = opts.tts;
18662
18665
  this._peaks.emit('source.update', this);
18663
18666
  };
18664
18667
  Source.prototype.isVisible = function (startTime, endTime) {
@@ -19197,7 +19200,7 @@ module.exports = function (Colors, Segment, Utils) {
19197
19200
  if (!Utils.isObject(options)) {
19198
19201
  throw new TypeError('peaks.segments.add(): expected a Segment object parameter');
19199
19202
  }
19200
- var segment = new Segment(this._peaks, Utils.isNullOrUndefined(options.id) ? this._getNextSegmentId() : options.id, options.startTime, options.endTime, options.labelText, options.color || this._getSegmentColor(), options.textColor || '#000000', options.handleTextColor || '#000000', options.opacity || 1, true, options.allowDeletion || false, options.line);
19203
+ var segment = new Segment(this._peaks, Utils.isNullOrUndefined(options.id) ? this._getNextSegmentId() : options.id, options.startTime, options.endTime, options.labelText, options.color || this._getSegmentColor(), options.textColor || '#000000', options.handleTextColor || '#000000', options.opacity || 1, options.editable, options.allowDeletion || false, options.line);
19201
19204
  return segment;
19202
19205
  };
19203
19206
  TimelineSegments.prototype.getSegments = function () {
@@ -19347,8 +19350,7 @@ module.exports = function (Source, Utils) {
19347
19350
  resizable: sourceToCut.resizable,
19348
19351
  wrapping: sourceToCut.wrapping,
19349
19352
  previewHeight: sourceToCut.previewHeight,
19350
- binaryHeight: sourceToCut.binaryHeight,
19351
- tts: sourceToCut.tts
19353
+ binaryHeight: sourceToCut.binaryHeight
19352
19354
  }]);
19353
19355
  this._peaks.emit('sources.updated');
19354
19356
  };
@@ -19363,7 +19365,7 @@ module.exports = function (Source, Utils) {
19363
19365
  if (!Utils.isObject(options)) {
19364
19366
  throw new TypeError('peaks.sources.add(): expected a Source object parameter');
19365
19367
  }
19366
- var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.url, options.previewUrl, options.binaryUrl, options.kind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.borderColor, options.selectedColor, options.textColor, options.borderWidth, options.wrapped, options.position, options.draggable, options.resizable, options.wrapping, options.previewHeight, options.binaryHeight, options.tts);
19368
+ var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.url, options.previewUrl, options.binaryUrl, options.kind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.borderColor, options.selectedColor, options.textColor, options.borderWidth, options.wrapped, options.position, options.draggable, options.resizable, options.wrapping, options.previewHeight, options.binaryHeight);
19367
19369
  return source;
19368
19370
  };
19369
19371
  TimelineSources.prototype.getSources = function () {
package/src/lines.js CHANGED
@@ -59,6 +59,9 @@ define([
59
59
  }
60
60
 
61
61
  self._segmentsGroups[segment.line].onSegmentsAdd([segment]);
62
+ if (Utils.objectHasProperty(self._segmentsGroupToLine, segment.line)) {
63
+ self._segmentsGroupToLine[segment.line].refreshSegmentsHeight();
64
+ }
62
65
  });
63
66
  };
64
67
 
@@ -115,7 +118,7 @@ define([
115
118
  };
116
119
 
117
120
  Lines.prototype.addSourceGroup = function(sourceGroup, position) {
118
- if (!this._linesByPosition[position]) {
121
+ if (!this._linesByPosition[position] || this._linesByPosition[position].isSegmentsLine()) {
119
122
  this._createLine(position);
120
123
  this._setInteractions(position);
121
124
  }
package/src/segment-shape.js CHANGED
@@ -52,7 +52,7 @@ define([
52
52
  fill: segment.color + Math.round(segment.opacity * 255).toString(16),
53
53
  stroke: segment.textColor + 'FF',
54
54
  strokeWidth: 1,
55
- draggable: true
55
+ draggable: this._segment.editable
56
56
  });
57
57
 
58
58
  var self = this;
package/src/segment.js CHANGED
@@ -54,6 +54,13 @@ define([
54
54
  if (!Utils.isInteger(options.line)) {
55
55
  throw new TypeError('peaks.segments.' + context + ': line must be an integer');
56
56
  }
57
+
58
+ if (Utils.isNullOrUndefined(options.editable)) {
59
+ options.editable = true;
60
+ }
61
+ else if (!Utils.isBoolean(options.editable)) {
62
+ throw new TypeError('peaks.segments.' + context + ': editable must be a boolean');
63
+ }
57
64
  }
58
65
 
59
66
  /**
package/src/segments-group.js CHANGED
@@ -527,27 +527,34 @@ define([
527
527
  // startMarker moved to the left
528
528
  if (newStartTime < previousSegment.endTime) {
529
529
  // there is collision
530
- if (previousSegment.startTime + previousSegment.minSize > newStartTime) {
531
- newStartTime = previousSegment.startTime + previousSegment.minSize;
532
- startLimited = true;
533
- }
530
+ if (previousSegment.editable) {
531
+ if (previousSegment.startTime + previousSegment.minSize > newStartTime) {
532
+ newStartTime = previousSegment.startTime + previousSegment.minSize;
533
+ startLimited = true;
534
+ }
534
535
 
535
- if (previousSegment.endTime !== newStartTime) {
536
- newXs = this.manageCollision(
537
- previousSegment,
538
- this._view.timeToPixels(previousSegment.startTime),
539
- this._view.timeToPixels(newStartTime)
540
- );
536
+ if (previousSegment.endTime !== newStartTime) {
537
+ newXs = this.manageCollision(
538
+ previousSegment,
539
+ this._view.timeToPixels(previousSegment.startTime),
540
+ this._view.timeToPixels(newStartTime)
541
+ );
541
542
 
542
- if (newXs.startX !== null) {
543
- previousSegment.startTime = this._view.pixelsToTime(newXs.startX);
544
- }
543
+ if (newXs.startX !== null) {
544
+ previousSegment.startTime = this._view.pixelsToTime(newXs.startX);
545
+ }
545
546
 
546
- if (newXs.endX !== null) {
547
- previousSegment.endTime = this._view.pixelsToTime(newXs.endX);
547
+ if (newXs.endX !== null) {
548
+ previousSegment.endTime = this._view.pixelsToTime(newXs.endX);
549
+ }
550
+
551
+ this._updateSegment(previousSegment);
552
+ this.addToUpdatedSegments(previousSegment);
548
553
  }
549
- this._updateSegment(previousSegment);
550
- this.addToUpdatedSegments(previousSegment);
554
+ }
555
+ else {
556
+ newStartTime = previousSegment.endTime;
557
+ startLimited = true;
551
558
  }
552
559
  }
553
560
  }
@@ -585,27 +592,34 @@ define([
585
592
  // endMarker moved to the right
586
593
  if (newEndTime > nextSegment.startTime) {
587
594
  // there is collision
588
- if (nextSegment.endTime - nextSegment.minSize < newEndTime) {
589
- newEndTime = nextSegment.endTime - nextSegment.minSize;
590
- endLimited = true;
591
- }
595
+ if (nextSegment.editable) {
596
+ if (nextSegment.endTime - nextSegment.minSize < newEndTime) {
597
+ newEndTime = nextSegment.endTime - nextSegment.minSize;
598
+ endLimited = true;
599
+ }
592
600
 
593
- if (nextSegment.startTime !== newEndTime) {
594
- newXs = this.manageCollision(
595
- nextSegment,
596
- this._view.timeToPixels(newEndTime),
597
- this._view.timeToPixels(nextSegment.endTime)
598
- );
601
+ if (nextSegment.startTime !== newEndTime) {
602
+ newXs = this.manageCollision(
603
+ nextSegment,
604
+ this._view.timeToPixels(newEndTime),
605
+ this._view.timeToPixels(nextSegment.endTime)
606
+ );
599
607
 
600
- if (newXs.startX !== null) {
601
- nextSegment.startTime = this._view.pixelsToTime(newXs.startX);
602
- }
608
+ if (newXs.startX !== null) {
609
+ nextSegment.startTime = this._view.pixelsToTime(newXs.startX);
610
+ }
603
611
 
604
- if (newXs.endX !== null) {
605
- nextSegment.endTime = this._view.pixelsToTime(newXs.endX);
612
+ if (newXs.endX !== null) {
613
+ nextSegment.endTime = this._view.pixelsToTime(newXs.endX);
614
+ }
615
+
616
+ this._updateSegment(nextSegment);
617
+ this.addToUpdatedSegments(nextSegment);
606
618
  }
607
- this._updateSegment(nextSegment);
608
- this.addToUpdatedSegments(nextSegment);
619
+ }
620
+ else {
621
+ newEndTime = nextSegment.startTime;
622
+ endLimited = true;
609
623
  }
610
624
  }
611
625
  }
package/src/source.js CHANGED
@@ -197,10 +197,6 @@ define([
197
197
  else if (options.wrapping === 'complete') {
198
198
  options.wrapped = false;
199
199
  }
200
-
201
- if (!Utils.isNullOrUndefined(options.tts) && !Utils.isBoolean(options.tts)) {
202
- throw new TypeError('peaks.sources.' + context + ': tts must be a boolean or undefined');
203
- }
204
200
  }
205
201
 
206
202
  /**
@@ -226,7 +222,7 @@ define([
226
222
  function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind,
227
223
  duration, startTime, endTime, mediaStartTime, mediaEndTime, color, borderColor,
228
224
  selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable, wrapping,
229
- previewHeight, binaryHeight, tts) {
225
+ previewHeight, binaryHeight) {
230
226
  var opts = {
231
227
  title: title,
232
228
  url: url,
@@ -249,8 +245,7 @@ define([
249
245
  resizable: resizable,
250
246
  wrapping: wrapping,
251
247
  previewHeight: previewHeight,
252
- binaryHeight: binaryHeight,
253
- tts: tts
248
+ binaryHeight: binaryHeight
254
249
  };
255
250
 
256
251
  validateSource(peaks, opts, 'add()');
@@ -282,7 +277,6 @@ define([
282
277
  this._previewHeight = opts.previewHeight;
283
278
  this._binaryHeight = opts.binaryHeight;
284
279
  this._minSize = peaks.options.minSourceSize;
285
- this._tts = opts.tts;
286
280
  }
287
281
 
288
282
  Object.defineProperties(Source.prototype, {
@@ -503,15 +497,6 @@ define([
503
497
  get: function() {
504
498
  return this._minSize;
505
499
  }
506
- },
507
- tts: {
508
- get: function() {
509
- return this._tts;
510
- },
511
-
512
- set: function(tts) {
513
- this._tts = tts;
514
- }
515
500
  }
516
501
  });
517
502
 
@@ -653,8 +638,7 @@ define([
653
638
  resizable: this.resizable,
654
639
  wrapping: this.wrapping,
655
640
  previewHeight: this.previewHeight,
656
- binaryHeight: this.binaryHeight,
657
- tts: this.tts
641
+ binaryHeight: this.binaryHeight
658
642
  };
659
643
 
660
644
  Utils.extend(opts, options);
@@ -683,7 +667,6 @@ define([
683
667
  this._wrapping = opts.wrapping;
684
668
  this._previewHeight = opts.previewHeight;
685
669
  this._binaryHeight = opts.binaryHeight;
686
- this._tts = opts.tts;
687
670
 
688
671
  this._peaks.emit('source.update', this);
689
672
  };
package/src/timeline-segments.js CHANGED
@@ -136,7 +136,7 @@ define([
136
136
  options.textColor || '#000000',
137
137
  options.handleTextColor || '#000000',
138
138
  options.opacity || 1,
139
- true, // editable
139
+ options.editable,
140
140
  options.allowDeletion || false,
141
141
  options.line
142
142
  );
package/src/timeline-sources.js CHANGED
@@ -87,8 +87,7 @@ define([
87
87
  resizable: sourceToCut.resizable,
88
88
  wrapping: sourceToCut.wrapping,
89
89
  previewHeight: sourceToCut.previewHeight,
90
- binaryHeight: sourceToCut.binaryHeight,
91
- tts: sourceToCut.tts
90
+ binaryHeight: sourceToCut.binaryHeight
92
91
  }]);
93
92
 
94
93
  this._peaks.emit('sources.updated');
@@ -160,8 +159,7 @@ define([
160
159
  options.resizable,
161
160
  options.wrapping,
162
161
  options.previewHeight,
163
- options.binaryHeight,
164
- options.tts
162
+ options.binaryHeight
165
163
  );
166
164
 
167
165
  return source;