Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New layout proposition. #476

Open
SO9010 opened this issue May 21, 2024 · 11 comments
Open

New layout proposition. #476

SO9010 opened this issue May 21, 2024 · 11 comments
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@SO9010
Copy link
Contributor

SO9010 commented May 21, 2024

Is your feature request related to a problem? Please describe.
The layout isn't great and it could be improved.

Describe the solution you'd like
I think that a new side bar could be added which contains the playback queue. There would be three sections here:

One main section with the curently playing song with the album cover and the information with it, this could partially replace the currently playing section in the currernt design.

One section for the user added queue.

One section for the queue that will be played from the playlist.

I think that the proportions could be inproved. the play back bar isn't in-line with the bar on the right. Same with the top.

I think that the volume bar can be moved to the right of the playback options. To replace where it originally was we can put the search bar.

Then I think that there coud be a playlist pinning option where the search bar used to be.

Additionally, optionally I think that there could be a search icon at the top right of the playlist to search the playlist.

I think the muted mic icon is a bit pointless and should be replaced by the Psst icon.

Please refer to my mock-up for an example

Describe alternatives you've considered
Yes, the search icon in the top right is not nessisary.
I am happy to work on this in my free time, I just want to make sure that my idea alligns in a similar way to all of yours!

Additional context
psst

@jacksongoode
Copy link
Collaborator

I definitely have been thinking about how we ought to display the queue now that functionality is provided.

  • I think the three panel approach that Spotify adopted could work. I worry a bit about including the album art there given this is intended to be a minimal player. If we want to take this approach it should definitely be collapsible.
  • Agree that the muted mic icon is dated and takes up valuable space. I honestly might advocate to remove it entirely and use the space for playlists/right sidebar.
  • Disagree on putting any album artwork in the left side panel, I think that space is too valuable.
  • I think the search bar should still be kept at the top of the sidebar given its priority.

@SO9010
Copy link
Contributor Author

SO9010 commented Jun 16, 2024

Perhaps just a collapsible scroll view on the right (much like shown) could be used where it is automatically shown when the window is over a certain size, and if not it can be temporarily shown using a button?

@jacksongoode
Copy link
Collaborator

That seems good, I would also think that we should lock the width of the left and right sidebars. Currently, Spotify's desktop is a mess with how it has to handle resizing. It seems like a headache to try to handle all the cases. We can just deal with the reflow of the center and disable the right sidebar if its too small of a window size maybe?

@SO9010
Copy link
Contributor Author

SO9010 commented Jun 16, 2024

Yes that seems good, I was wandering about the functionality, should it be an interactive thing where you can say skip to a certain part of the queue or where you can remove something from the queue? I feel like rearranging would be too much effort for small results.

@jacksongoode
Copy link
Collaborator

Hmm yeah I suppose to add a queue view we should have "Remove from queue" methods for the items within the queue. We would need to refresh that queue view when an add or remove happens so we have an updated view of the queue. I don't think the methods would be hard but the refresh might be.

@SO9010
Copy link
Contributor Author

SO9010 commented Jun 27, 2024

Heya I have been programming a bit, I wanted your input. This is how it looks currently:

2024-06-27.11-17-02.mp4

What do you think about that? is the styling O.K, or does it not fit in enough?

@jacksongoode
Copy link
Collaborator

jacksongoode commented Jun 28, 2024

Really beautiful stuff!

Generally I was thinking that the right side bar would mimic the existing styling for of the list_widget that we have with a bordered divider that exists on the left side - like in your previous prototype. I think that might be easy, but I think we should definitely not have the album art attached to each item in the list.

I like having the "Queue" title match the header bar height of the center header. It might even be nice to have the number of queued tracks in parentheses "Queue (22)". However, space could be saved if we removed it too. Both are options.

I'm not sure about the text alignment being centered. I think it should either keep with the left text alignment with the center view, it would also make the style more consistent.

@SO9010 What do you think about these ideas?

@SO9010
Copy link
Contributor Author

SO9010 commented Jun 28, 2024

Thank you!

I agree with keeping the styling consistent with the left sidebar.

The reason for centering the text was because I was considering programming a system that loops the text. This would also be implemented when a song name is too long in the main playlist view. Should I do that? May take me a while!

I think just keeping the title as "Queue" would make it cleaner. Perhaps we could display the length of the queue in a darker font on the side, so it's not too intrusive.

Regarding the removal of the top icon, I believe something should be there for the alignment of the other top bars. Without it, the interface looks a bit unfriendly / disorganized. Perhaps then the main logo could go there.

I also need to fix the left bar to maintain a consistent size.

Additionally, I was wondering if it's a good idea to have two separate queue views: one for the user-added queue and one for the queue that comes from the playlist. This way, the user can see the difference when they change the play mode, such as switching to shuffle mode.

What do you think?

@jacksongoode
Copy link
Collaborator

jacksongoode commented Jun 28, 2024

I think just keeping the title as "Queue" would make it cleaner. Perhaps we could display the length of the queue in a darker font on the side, so it's not too intrusive.

Okay that could be nice! Maybe some buttons could live there as well, like a "Clear queue" icon button.

Regarding the removal of the top icon, I believe something should be there for the alignment of the other top bars. Without it, the interface looks a bit unfriendly / disorganized. Perhaps then the main logo could go there.

Hmm, I'm not confident if it makes sense to put something there... This would be a separate discussion but at least on macOS that space is partially occupied by the windows controls which makes it look less unaligned.

image

I think a square icon would be a little awkward but definitely open to some ideas!

I also need to fix the left bar to maintain a consistent size.

That seems good.

The reason for centering the text was because I was considering programming a system that loops the text. This would also be implemented when a song name is too long in the main playlist view. Should I do that? May take me a while!

This seems really nice and would take care of the annoying graphical issues with titles and albums that are too long.

image

However, I do think we should hold off on that as a separate feature. I think maybe a first PR would just be adding the queue widget in the same style as the general list_widget (without album art). I think the playlist context "queue" shouldn't really be associated with the user defined queue - just thinking it would really complicate the navigational flow of the two views. It would be nice to at least get some truncation for these current long titles though, so the "like" button doesn't overlap.

@jacksongoode
Copy link
Collaborator

@SO9010 Are you working on a branch? You could open as a draft PR and I'd be happy to work on it with you if you'd like?

@SO9010
Copy link
Contributor Author

SO9010 commented Jun 29, 2024

Yes, that sounds perfect. I will do that tomorrow. Also, I have ensured that it follows the theming you wanted. I will be away for the next week or so, so I won't be able to program during that time.

Just as a heads-up, my code isn't in the best shape right now. I'm currently creating a rough draft of how I think the code should work, and I plan to go back and optimize it later. Please feel free to be very critical of my code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

2 participants