Fixed waveform view initialisation if playhead time is not zero

bbc · Nov 30, 2024 · fcfa24d · fcfa24d
1 parent 9416162
commit fcfa24d
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 10 deletions.
diff --git a/src/main.js b/src/main.js
@@ -416,14 +416,14 @@ Peaks.init = function(opts, callback) {
         const zoomviewContainer = instance.options.zoomview.container;
         const overviewContainer = instance.options.overview.container;
 
-        if (overviewContainer) {
-          instance.views.createOverview(overviewContainer);
-        }
-
         if (zoomviewContainer) {
           instance.views.createZoomview(zoomviewContainer);
         }
 
+        if (overviewContainer) {
+          instance.views.createOverview(overviewContainer);
+        }
+
         if (scrollbarContainer) {
           instance.views.createScrollbar(scrollbarContainer);
         }

diff --git a/src/scrollbar.js b/src/scrollbar.js
@@ -77,7 +77,8 @@ function Scrollbar(container, peaks) {
   this._scrollbox.on('dragend', this._onScrollboxDragEnd);
 
   this._layer.add(this._scrollbox);
-  this._layer.draw();
+
+  this._updateScrollbarWidthAndPosition();
 }
 
 Scrollbar.prototype.setZoomview = function(zoomview) {

diff --git a/src/waveform-overview.js b/src/waveform-overview.js
@@ -43,6 +43,12 @@ function WaveformOverview(waveformData, container, peaks) {
   self._playheadLayer.updatePlayheadTime(time);
 
   self._mouseDragHandler = new SeekMouseDragHandler(peaks, self);
+
+  const zoomview = peaks.views.getView('zoomview');
+
+  if (zoomview) {
+    self._highlightLayer.showHighlight(zoomview.getStartTime(), zoomview.getEndTime());
+  }
 }
 
 WaveformOverview.prototype = Object.create(WaveformView.prototype);

diff --git a/test/segment-shape-spec.js b/test/segment-shape-spec.js
@@ -80,24 +80,51 @@ describe('SegmentShape', function() {
             expect(call.args[0].segment.endTime).to.equal(10);
             expect(call.args[0].segment.editable).to.equal(test.editable);
             expect(call.args[0].segment.id).to.equal('segment1');
-            expect(call.args[0].editable).to.equal(false);
-            expect(call.args[0]).to.have.property('startMarker');
+            expect(call.args[0].editable).to.equal(test.editable);
+            expect(call.args[0].startMarker).to.equal(true);
             expect(call.args[0].color).to.equal('#aaaaaa');
             expect(call.args[0]).to.have.property('layer');
-            expect(call.args[0].view).to.equal('overview');
+            expect(call.args[0].view).to.equal('zoomview');
 
-            call = spy.getCall(2);
+            call = spy.getCall(1);
 
             expect(call.args).to.have.lengthOf(1);
             expect(call.args[0].segment.startTime).to.equal(0);
             expect(call.args[0].segment.endTime).to.equal(10);
             expect(call.args[0].segment.editable).to.equal(test.editable);
             expect(call.args[0].segment.id).to.equal('segment1');
             expect(call.args[0].editable).to.equal(test.editable);
-            expect(call.args[0]).to.have.property('startMarker');
+            expect(call.args[0].startMarker).to.equal(false);
             expect(call.args[0].color).to.equal('#aaaaaa');
             expect(call.args[0]).to.have.property('layer');
             expect(call.args[0].view).to.equal('zoomview');
+
+            call = spy.getCall(2);
+
+            expect(call.args).to.have.lengthOf(1);
+            expect(call.args[0].segment.startTime).to.equal(0);
+            expect(call.args[0].segment.endTime).to.equal(10);
+            expect(call.args[0].segment.editable).to.equal(test.editable);
+            expect(call.args[0].segment.id).to.equal('segment1');
+            expect(call.args[0].editable).to.equal(false);
+            expect(call.args[0].startMarker).to.equal(true);
+            expect(call.args[0].color).to.equal('#aaaaaa');
+            expect(call.args[0]).to.have.property('layer');
+            expect(call.args[0].view).to.equal('overview');
+
+            call = spy.getCall(3);
+
+            expect(call.args).to.have.lengthOf(1);
+            expect(call.args[0].segment.startTime).to.equal(0);
+            expect(call.args[0].segment.endTime).to.equal(10);
+            expect(call.args[0].segment.editable).to.equal(test.editable);
+            expect(call.args[0].segment.id).to.equal('segment1');
+            expect(call.args[0].editable).to.equal(false);
+            expect(call.args[0].startMarker).to.equal(false);
+            expect(call.args[0].color).to.equal('#aaaaaa');
+            expect(call.args[0]).to.have.property('layer');
+            expect(call.args[0].view).to.equal('overview');
+
             done();
           });
         });