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.16k stars 277 forks source link

Recalculate waveform after window.resize? #446

Closed rowild closed 2 years ago

rowild commented 2 years ago

I've seen that there are some resize topics in the "done" issues, but I do not recognise a "status quo": is it possible to invoke a "recalculate waveform" method or not?

In my app a font resizer changes the base px on html, which, in consequence, influences all margins and paddings, too. Therefore the wavefrom container changes, but the canvases themselves don't. Also, when the browser window is resized, the canvases are not updated. I assume this is due to performance? Or am I missing something and updating the waveform is available?

Thank you for any tip and hint! :-)

UPDATE:

Looking through the code resampling (and therefore resizing?) the waveform on window.resize should work out-of.the box. But I do get this error:

Uncaught TypeError: Cannot create property 'scale' on number '1840'
    at WaveformData.resample (waveform-data.esm.js?8f5e:430:1)
    at eval (peaks.esm.js?25c0:5864:1)

The screenshot shows to logs of the "options" params that are sent to WaveformData.resample, and it seems the second one is not in the form of an object. Bildschirmfoto 2022-03-26 um 21 30 07

Any idea where I have to look for my error?

My Peaks settings:

Bildschirmfoto 2022-03-26 um 21 39 43 Bildschirmfoto 2022-03-26 um 21 40 19

rowild commented 2 years ago

It seems this error only is thrown, when the waveform is set to fit at the time of scaling. Any other value does not throw any errors. However, the waveform still does not adapt to the shrinking width of the parent container (when I drag the window to resize it to a smaller width). Is that on purpose? I would think that at least the overview should adapt to the size...

rowild commented 2 years ago

There is an example that shows how to resize() the canvas - sorry I didn't see that earlier!