I've been using Zeppplayer for a while, and the app provides a really great functionality, but at some point I've found it lacked responsiveness in some particular cases. Thus, this PR.
Changes made
added a slider to adjust display size;
improved console layout by adding text wrapping and vertical resize handle;
improved state editor layout by adding vertical resize handle;
improved escape keypress handling when overlay opened;
fixed layout of Zeppplayer with narrow resolutions;
Screenshots and details
Here are some screenshots showcasing the responsiveness improvements:
Slider
Allows to change the size of the display in sane range (specifically, from 20vh to 75vh). That helps a lot whenever there's a necessity for, e.g., splitting the screen between Zeppplayer and IDE. The styles are compatible with Firefox as well.
Console Layout
I've struggled a lot with the necessity to scroll the console, so main changes are the following:
Extended the console to occupy 100% of the available space.
I've also added a vertical resize handle to improve the experience with long output.
Long text, if available, wraps, so there's no need to scroll to the right.
Horizontal scrollbar now appears only when the text lacks white spaces.
State Editor
It also gained resize handle. Min/max heights are restricted in sane range as well.
Escape button with overlays
While developing the slider, found out it's much more convenient to close the overlays (settings, overview) with Esc, not mouse.
If any overlay is present, Esc closes it. Then — triggers backstack function as it was before.
Narrower resolution layout
Here you can see the top toolbar wrapped, so there's, again, no need to scroll. Also the layout gains a column shape.
Additional Notes
The changes should not affect the overall functionality but greatly enhance the user experience whenever the browser window shrinks.
Thanks for taking the time to review this pull request. I'm open to feedback and suggestions for further improvement.
Hi there!
I've been using Zeppplayer for a while, and the app provides a really great functionality, but at some point I've found it lacked responsiveness in some particular cases. Thus, this PR.
Changes made
Screenshots and details
Here are some screenshots showcasing the responsiveness improvements:
Slider
Allows to change the size of the display in sane range (specifically, from 20vh to 75vh). That helps a lot whenever there's a necessity for, e.g., splitting the screen between Zeppplayer and IDE. The styles are compatible with Firefox as well.
Console Layout
I've struggled a lot with the necessity to scroll the console, so main changes are the following:
State Editor
It also gained resize handle. Min/max heights are restricted in sane range as well.
Escape button with overlays
While developing the slider, found out it's much more convenient to close the overlays (settings, overview) with Esc, not mouse.
If any overlay is present, Esc closes it. Then — triggers backstack function as it was before.
Narrower resolution layout
Here you can see the top toolbar wrapped, so there's, again, no need to scroll. Also the layout gains a column shape.
Additional Notes
Thanks for taking the time to review this pull request. I'm open to feedback and suggestions for further improvement.