bbc / peaks.js

JavaScript UI component for interacting with audio waveforms
https://waveform.prototyping.bbc.co.uk
GNU Lesser General Public License v3.0
3.2k stars 279 forks source link

Issue with the resizing of segments. #479

Open vivekd95 opened 1 year ago

vivekd95 commented 1 year ago

Hey I am using peaks v3.0.0-beta.6. While resizing the segments you can see the double sided arrow. Arrow is showing for much greater area than it should. For example, I have attached the screenshotsbelow from your demo overlay segments.

1677757510216 1677757510344

As you can see in the screenshots, my cursor is very far from the start time of segment still cursor is considering that it is on the starting of it and showing me the cursor used in resizing the segment. Can you tell me if there is any way that can be applied to improve this so that the cursor changes into double sided arrow only when i have it on the exact time stamp of start time?

chrisn commented 1 year ago

I think you're right, so I have reduced the tolerance. I could also add an option to set the tolerance, if needed.

vivekd95 commented 1 year ago

Thanks @chrisn for helping out. Appreciate it. So, which version should I use to implement this?

chrisn commented 1 year ago

I'll update this issue when a new release is available. But for the time being, I suggest applying the change in https://github.com/bbc/peaks.js/commit/246f793a4157424bc7caa2b6fa5ae0c25ef09eea to your own local copy.

chrisn commented 1 year ago

v3.0.0-beta.7 is now available in npm

vivekd95 commented 1 year ago

Thanks @chrisn for the help. I think you have not provided the option of changing the value of tolerance via options or something, Right?

chrisn commented 1 year ago

Not yet, but it can be added. It should probably be the same as playheadClickTolerance, I'm not sure that we would need a separate tolerance option for resizing segments.

vivekd95 commented 1 year ago

Hi, @chrisn

Continuing this discussion further. I think we might need it when two segments are aligned as shown in the screenshots attached to the previous comment and we need to resize one of them.

chrisn commented 1 year ago

The difficulty here is that when two segments are adjacent with no separation between them, the segment being resized may not be the one the user expects. The position of the time label gives an indication, but it's not very clear to the user what's going on. In practice, segments are objects with a z-order and so it's the one at the top of the z-order.

This issue may not be as simple as changing the tolerance for where the double arrow appears. I welcome any thoughts and suggestions!