fix playback speed plugin

[Araxeus]

• Fixes memory leaks from observer within observer and unnecessary observers watching the whole document
  see Audio compressor plugin #288 (review)

• This also normalize the steps of the slider to be 0.125 (1/8)
  see here all available levels obtained by dragging the bar:

  var x = []
  for(let i=0; i<=2; i+=0.125) x.push(i || 0.07)
  console.log(x)
  // (17) [0.07, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1, 1.125, 1.25, 1.375, 1.5, 1.625, 1.75, 1.875, 2]

• This also adds a mousewheel listener to the playback speed bar, which allows more precise tuning of the current speed - 0.07 up to 16, in increments of 0.01 (good luck getting to 16 lol)

[th-ch]

The mousewheel works fine but when clicking directly on the slider, the value updates in the UI but the playback rate is not changed anymore, is it expected?

[Araxeus]

The mousewheel works fine but when clicking directly on the slider, the value updates in the UI but the playback rate is not changed anymore, is it expected?

@th-ch Did you get any errors thrown?
if you use the mousewheel after moving the slider - does it use the "fake video speed" displayed near the slider or the real video speed? (in other words I'm actually asking if it saves to the playbackSpeed variable when moving the slider)

can you add some logging to see where does it get stuck? in:

youtube-music/plugins/playback-speed/front.js

Lines 51 to 56 in 6243e6f

	slider.addEventListener('immediate-value-change', () => {
	playbackSpeed = computePlayBackSpeed($('#playback-speed-slider #sliderBar').value);
	if (isNaN(playbackSpeed)) {
	playbackSpeed = 1;
	}
	updatePlayBackSpeed();

$('#playback-speed-slider #sliderBar').value || 0.07 should always work, the value is always a number

updatePlayBackSpeed() the same function that is executed with the mousewheel so I really have no idea whats going on here

Sadly I can't really do much without more info, since I cant reproduce this

[Araxeus]

@th-ch I figured it out - 'immediate-value-change' is a polymer event which only fire on drag, not click. so I had to add a 'd' on there and use 'immediate-value-changed'

Except that event doesn't bubble up apparently so I had to set it up straight on the slider, which required waiting for its first load to find it in the dom. anyways it should be fixed now with 41285ac

ps. the polymer elements docs link is weird, the url change and if you refresh you lose almost all the documentation :|

[th-ch]

Confirmed it now works fine on my side with both click and mousewheel 🎉
Looks good, thanks for the improvement! ✅