[meta] player enhancements
In its current state, our player is a bit unsatisfying. The migration to Vue 3 may be an opportunity to fix the existing issues, and also lay the foundation for features we would like to offer.
Issues
Below are some issues in no particular order. Some of those are purely cosmetic, others have a more critical impact.
Bottom bar:
- long text is abruptly cropped
- volume icon is vertically misaligned
- on mobile the volume bar stays unvisible
- on desktop volume control doesn't slide, people actually have to click anywhere but on the button to make it move
- play icon feels off (because its left part being more massive the the right one)
- overall the bar feels unbalanced (wide blank space between timer and controls on the right)
- the infinite loop is on the repeat button is too tiny
- the black background has probably nothing to do in a "light theme"
Full screen:
- the close button seems related to the queue, rather than the whole page
- big chunks of blank space around each item in the queue
- on mobile the hide icon is an X, while it's a V on desktop
Its behaves strangely on some points:
- on mobile, navigation between player states (ie collapsed / open / queue) is clunky (player and queue both slide up from the bottom bar, but close down in very different ways)
- the (bottom) progress bar doesn't allow to move forward or backward
- the (full screen) progress bar is redundant with the bottom one, which creates confusion
- the shuffle button is not very forgivable (it won't allow to find back the original sorting)
- shuffle interrupts the track currently playing
- clearing the queue interrupts the track currently playing
Goals
On the one hand, we are aiming to improve the current feature set:
- solve the above issues
- #1389 use new lists for queue
On the other hand, we would like to bring some new features: