Center Play Button

[glorenzen]

This is a UI fix to adjust the playback controls so that the chapter name and play button are centered on the screen.

I moved the playback rate controls over to the right with the volume and other icons. The icons might get a little crowded on very small mobile screens (below 400px wide), but it seems okay from my testing.

This fixes #3244

[nichwall]

Looks good to me! I do like the player speed on the right now that I'm seeing that.

Not for this PR, but maybe we want to expand the player settings (right-most button) to be an "enable/disable" for each of the buttons on the right, such as if somebody never uses bookmarks or adjusting the volume in the player, they can hide those buttons? That would help address the crowding on smaller screens.
There are some initial plans to transition to a newer framework for the web client, but I don't know when or what that will be so not sure if moving the buttons into the menu is worth the time if it is non-trivial.

[advplyr]

There are some initial plans to transition to a newer framework for the web client, but I don't know when or what that will be so not sure if moving the buttons into the menu is worth the time if it is non-trivial.

Yeah I'm not sure about this. At this point it seems like whatever we build in Nuxt is going to have to be re-written in whatever we switch to next.

This PR looks good. I had one hesitation on putting the speed there which is that the volume bar overlaps it. This happened a few times while testing where I went to click the playback speed but my cursor went over the volume so I had to move it off. Could just be me.

I took the time to get rid of the mono font used for playback speed that has bothered me for a while

thanks!