Feat: Add decrease/increase speed buttons option (closes #3282)

[pecazeco]

What:

• New option: Decrease/increase and set 1x speed buttons
• When ON: Three new buttons shows up in the player screen: decrease speed by 0.25x, increase speed by 0.25x and reset it to 1x
• When OFF: The player remains unchanged

Why:

• Requested in add button to video bar for speed increase/decrease/reset #3282
• By enabling this option, the user no longer needs to access the settings screen to make a small speed adjustment

How to test:

1. When the option is disable, the player should remain as usual
2. Go to Player > Increase/Decrease Speed buttons > turn on
3. Now, the player should show the three new buttons
4. Try to click on each buttons, check if the speed is changed and if the new speed is shown in the upper right corner, like the in image below

Notes:

• The icons are a bit cut off depending on the window format, but I don't know very much about path elements to fix that
• I think the icons could be a little more intuitive, with a + and - symbols, for example
• Despite the playback speed itself being changed by the buttons, the playback speed display in the settings screen doesn't respond to this change
• Although the playback speed can be changed using the buttons, the playback speed display on the settings screen doesn't match this change, I couldn't sync them

[halilnevzat]

thank you guys !!

[PerchunPak]

Could you add an option so the step can be configured?

[pecazeco]

I added this as requested.

[pecazeco]

But that is a minor bug: the texts "increase speed by {step}" and "decrease speed by {step}" that shows up when hover the buttons only updates the value when you refresh the page.

[PerchunPak]

Those are nitpicks, but I am not a fan of AI artifacts

[PerchunPak]

Looks like speed-changing keybinds do a bit more logic than just changing the speed. Can we reuse that function?

https://github.com/code-charity/youtube/blob/e50cc8f0ed2419f64ce6911ebed741a674dc73c1/js%26css/web-accessible/www.youtube.com/shortcuts.js#L337

[pecazeco]

Looks like speed-changing keybinds do a bit more logic than just changing the speed. Can we reuse that function?

https://github.com/code-charity/youtube/blob/e50cc8f0ed2419f64ce6911ebed741a674dc73c1/js%26css/web-accessible/www.youtube.com/shortcuts.js#L337

If we call it, it would be necessary to change a little bit this shortcutIncreasePlaybackSpeed. This method picks the step from shortcuts_playback_speed_step, which is a different variable from the one we use to set the step (player_custom_playback_speed_step).
We can create a new method copying this one (using the same logic) but using the different variable for the step. What do you think?

[PerchunPak]

If we call it, it would be necessary to change a little bit this shortcutIncreasePlaybackSpeed. This method picks the step from shortcuts_playback_speed_step, which is a different variable from the one we use to set the step (player_custom_playback_speed_step).
We can create a new method copying this one (using the same logic) but using the different variable for the step. What do you think?

We should move this method somewhere in a shared place, rename it and just provide the step as a function argument

[ImprovedTube]

thank you so much!! :) @pecazeco @PerchunPak

We should move this method somewhere in a shared place, rename it and just provide the step as a function argument

There is a lot of potential for this project to be more of a framework.
For example positioning should be separate from features too. Every feature function could have a shortcut and or icon at any position. Dynamic positions might need updates when youtube changes, but shortcut and fixed positions wont. We have buttons on the left of the player bar and on the right or below the player. And improvedtube_youtube_icon is in the header or sidebar or simply draggable anywhere (fixed position, mini player too)

[PerchunPak]

For example positioning should be separate from features too. Every feature function could have a shortcut and or icon at any position. Dynamic positions might need updates when youtube changes, but shortcut and fixed positions wont. We have buttons on the left of the player bar and on the right or below the player. And improvedtube_youtube_icon is in the header or sidebar or simply draggable anywhere (fixed position, mini player too)

I don't really understand what you mean. I only talked about business logic, which is identical in both of those places.