Timeline/waveform breaks when zooming - regions

[samedayjeremy]

Using MultiCanvas renderer
Steps to reproduce:

1. Drag a region larger

2. Zoom in

3. Zoom out... the region's location within the canvas is not updated properly, causing display issues.

[chrisparton1991]

@jeremylach, do you know if this occurs with the regular Canvas renderer as well? Just curious.

[samedayjeremy]

Yes, it does. In fact without MultiCanvas, zooming past wavesurfer.zoom(6) clears the waveform and shows this issue. This is with a 37 minute audio. MultiCanvas definitely performs better.

With MultiCanvas, and no regions, I can zoom to 100 with no issues, zooming out to "0" works too.
With MultiCanvas, and regions, I can zoom to 100 with no issues, but zooming out gives this issue described in the report.

[katspaugh]

@jeremylach can you verify if the problem is solved in version 1.2.6 (I've just released it on npm).

[samedayjeremy]

This does seem to help quite a bit. The only issue I'm still seeing is an inconsistency with the timeline numbering.

Initial (zoom 0)

Zoom 2 (should it really be zoomed in this much from only a increase in zoom level of 2? Or is it the timeline is off but the waveform is correct?)

Zoom 4

Zoom back to 2

Zoom back to 0

Manually trigger wavesurfer.zoom(0) ... here we can see the waveform hasnt redrawn (same as above zoom 0), but the timeline has reset to the proper times.

[samedayjeremy]

The above example was done with custom primaryLabelInterval and secondaryLabelInterval for the timeline initialization... here's the same problem illustrated with default timeline settings

Initial state (minPxPerSec = 0)

Zoom 2

Zoom 0

Zoom 0 with wavesurfer.zoom(0)

[katspaugh]

@jeremylach thanks! I'll take a look at the timeline.

[katspaugh]

Just a heads up: I haven't had a chance to work on this this weekend, but keeping tabs on this issue.

[katspaugh]

@jeremylach the timeline issue should be solved in v 1.2.7 (on npm). Can you take a look?

[samedayjeremy]

@katspaugh unfortunately I am seeing this issue persisting. The workaround by calling the .zoom(0) function twice does seem to work though. I can .zoom() to any number then call .zoom(0) 2 times and the timeline will reset to the original state.

[katspaugh]

@jeremylach I've just realized I forgot to publish to npm. Were you trying v 1.2.7?
Can you reproduce your issue on http://wavesurfer-js.org/example/zoom/ ? If not, could you share your test-case via codepen?

Edit: just published v 1.2.7 on npm.

[samedayjeremy]

Yes I downloaded the zip from the github page, 1.2.7. I'll take a look at the zoom example or create my own for you to see.

[samedayjeremy]

@katspaugh I am seeing the same behavior on the wavesurfer zoom example... Drag the slider in to zoom, then drag back out. The timeline does not zoom out entirely and does not look like the way it started.

[katspaugh]

Ah, thanks, now I see it too!

[katspaugh]

It appears, it was a problem with that particular page, though. The left-most position of the slider didn't match the initial zoom of the waveform. Now it should be fine.

Otherwise, is there any other way to reproduce your issue?

[samedayjeremy]

I modified your zoom example as a codepen, to match my wavesurfer config, and at first I could not figure out why it seemed to be working on the codepen but not my site. I then realized that if I removed the regions altogether, or added them to the wavesurfer BEFORE I initialize the timeline then it works like your example. In my code, I added the regions AFTER I initialized the timeline. I am not sure if this is significant or something to note in the docs/change in the code but this seems to have fixed the problem.

Here we see how my code was set up, regions added after the timeline, and the bug I've been describing is present.
http://codepen.io/jeremylach/pen/zoWdyo?editors=1011

[katspaugh]

Sounds like a bug, I'll take a look. Thanks for helping to figure this out.

[katspaugh]

Closing this one. The last comment by @jeremylach to be solved in #895.

[piem]

hi all. any chance 4ee2b29 could be merged in the next branch? atm, the regions are updated only when zooming in, not when zooming out. the timeline plugin also appears to have a similar issue.

[heitorb]

I just posted on #895 and someone ask for clarification but the thread got locked. Not accepting my comment. Using 2.0.6. To clarify, it is the very first issue reported here that I am seeing. The waveform (and regions) disappears when zooming out. Zooming in is fine. I don't see any logs but i will work on putting some sample of on codepen or somewhere so you can see it.