New UI Mockup

[JasonLG1979]

It's been a while since I've brought it up. Since then all the major DE's have added support for headerbars. Those that don't support menus in the panel put them in a button on the headerbar(usually on the far left) This design leaves plenty of room for those menus and extra minimize and maximize buttons. It also falls more in line with the look of modern GNOME apps.

Since we can not seek the slider was replaced with a dual purpose progress bar that would show the track progress while playing and the buffer progress while buffering.

My main inspiration was GNOME Music.

[TingPing]

I think music works better because it is larger and has more elements to fill in the space, the top bar has six buttons compared to our one and our bottom bar will only be like 1/4th the width of theirs so it will be crowded; So we have the worst of both worlds.

[JasonLG1979]

I was just throwing it out there. It would be nice to figure out a design that works with the headerbar. Any ideas or desire to move to the headerbar? At some point I imagine Pithos will have to.

[JasonLG1979]

If the progressbar was ditched it would open it up a lot.

[TingPing]

At some point I imagine Pithos will have to.

Well, no. The only benefit is to fit in a bit better.

[JasonLG1979]

Well, no. The only benefit is to fit in a bit better.

The majority of GNOME apps have switched to the headerbar. We're starting to look a little behind the times.

[TingPing]

I agree I just want to make sure it still provides a good UX, I threw some designs at one of the Gnome designers last year and he couldn't really think of any great ideas for the headerbar.

[JasonLG1979]

I agree I just want to make sure it still provides a good UX, I threw some designs at one of the Gnome designers last year and he couldn't really think of any great ideas for the headerbar.

I'll keep messing with it and see what I come up with.

[TingPing]

Also keep in mind the close buttons can be up to 3 buttons wide, and either the left OR right side. The Pithos window is so small I just don't see a way for it to work out.

[JasonLG1979]

@JasonLG1979 Also keep in mind the close buttons can be up to 3 buttons wide, and either the left OR right side. The Pithos window is so small I just don't see a way for it to work out.

I know that the sticky part you also potentially have to account for a menu button on ElementryOS, Mate and xfce(and maybe KDE?)

[TingPing]

Ah right, so up to 4 buttons wide! I think your idea of moving elements out of the header then does start to make sense, but my thoughts on that is.. well we already have things out of the header and looks/works fine.

[JasonLG1979]

Here's with the added buttons, minus the progress bar and with the menus closed.

[TingPing]

I don't like the duplicated info in the list of songs and in the control bar (or whatever you want to call it); title, art, etc.

[JasonLG1979]

I don't like the duplicated info in the list of songs and in the control bar (or whatever you want to call it); title, art, etc.

I disagree:

1. It's nice to know what song is playing at a glance while you maybe scrolling through the playlist.
2. it falls in line with just about every other audio player out there including GNOME music.

[TingPing]

The difference with Pithos is that:

• The playlist is relatively small, it doesn't promote browsing
• It is in list form that is auto-scrolling and selecting the current playing song

[JasonLG1979]

The difference with Pithos is that:

The playlist is relatively small, it doesn't promote browsing It is in list form that is auto-scrolling and selecting the current playing song

There's still 2.

it falls in line with just about every other audio player out there including GNOME music.

[TingPing]

Both of those goes against point 2, it behaves very differently to gnome music, pithos can't search, pithos doesn't have hundreds of songs, it doesn't even allow playing more than 2-3 songs that are upcoming, and the way it presents it as I said always keeps now playing in focus.

[JasonLG1979]

I look back though my playlist a lot after I do things like clean the house and what not(stuff when I'm not within reach of my computer but I'm still listening) and rate songs that have played. I get 4 songs per playlist.

[JasonLG1979]

Well anyway. We want to get stuff out of the headerbar, basically we move most of the stuff that's on the top and put it on the bottom. As far as duplication is concerned we have duplicate song info right now in the widow title.

[JasonLG1979]

What about this? Simplified it some more. There's no new info in the window or any more redundant info then is already in the current UI. It's just rearranged a bit.

[JasonLG1979]

I'd also like to see some padding in between album covers. Something like this(on a couple different shades to give you a good idea how the shadow would work out) :

[MadcapJake]

Have you considered moving all buttons to the headerbar? Playback controls on the left, station selector in the middle and the window controls on the right.

[JasonLG1979]

Have you considered moving all buttons to the headerbar? Playback controls on the left, station selector in the middle and the window controls on the right.

There's not enough room and/or it leads to inconsistencies. On DE's that don't support the menu in the panel(XFCE, Cinnamon and mate) there is a Menu button in the headerbar, usually on the left. In Unity the buttons are on the left.

You could potentially end up with this if you crammed everything in to the headerbar. It's U-G-L-Y. way to much going on.

[MadcapJake]

I see. I could see removing the Song Title by Artist Name as this information can be gathered from looking at the list of tracks or through MPRIS. With that gone I think it's a pretty clean design (with station selector centered though)

[MadcapJake]

Also of note (though perhaps for another issue), neither Gnome Music or Lollypop have a volume button (I think this is related to Gnome HIG).

[JasonLG1979]

I see. I could see removing the Song Title by Artist Name as this information can be gathered from looking at the list of tracks or through MPRIS. With that gone I think it's a pretty clean design (with station selector centered though)

Still to many buttons, and we can't control their placement(or even if they exist at all).

Also of note (though perhaps for another issue), neither Gnome Music or Lollypop have a volume button (I think this is related to Gnome HIG).

I've brought that up in the past but that really doesn't matter as it's really kinda just part of one big button anyway. Getting rid of it doesn't drop our button count.

It's not up to me really. You'll have to talk to @TingPing. Good luck convincing him to put much of anything in the headerbar.

[blindreaper]

Im using this on mythtv which is displayed on a 55" tv, as you can imagine theres alot of empty space.

please make the ui scale or allow dpi change

my "tv mode" suggestion, excuse the paint:

https://imgur.com/9HdWNIp

Current song in the middle, larger than previous (left) and upcoming (right). Text just below image. Controls on bottom, but smaller than in image. Thumbs on side (if works like mobile app). Other controls on top like already suggested.

[MadcapJake]

Still [too] many buttons, and we can't control their placement (or even if they exist at all).

What do you mean you can't control their placement or if they exist? pack_start places things on the left, pack_end places things on the right, and set_custom_title allows you to replace the (centered) title with a custom widget. source

LHS: AppMenu, Play, Pause Center: Station selector RHS: Window controls

That doesn't seem like too many buttons to me. That's one less than Corebird (if you include the Window title) and that app is very close in width to Pithos.

[JasonLG1979]

I was talking about the buttons in the headerbar

[JasonLG1979]

We can't control if the window controls are on the left or right, how many window control buttons there are and if the DE decides to put a menu button in the headerbar

[JasonLG1979]

There could be any where from 1 to 4 buttons that we can't control

[JasonLG1979]

@TingPing I'm trying to use Glade to play with realizing my mockups and I'm having a heck of a time. Glade pretty much sucks IMHO.(qt-designer is about 1000 times easier...) I know you got a lot going on but I was wondering about your thoughts on my last mockup?

[TingPing]

I think the summery of everything that has been brought up is that the window management controls on headerbars just make having a lot of information in it too crowded in such a small window and the list design we have for songs does not scale up.

We could think about a design closer to pandora.com where you get larger artwork scrolling horizontally and have the controls at the bottom.

[JasonLG1979]

I think the summery of everything that has been brought up is that the window management controls on headerbars just make having a lot of information in it too crowded in such a small window and the list design we have for songs does not scale up.

I agree that's why I would only put the station drop-down there and that's it.

We could think about a design closer to pandora.com where you get larger artwork scrolling horizontally and have the controls at the bottom.

I really don't like the horizontal layout. pandora.com to me is rather ugly in general. It looks like something from the late 90's/early 00's. For the most part I like the vertical list we got going, I would just like to figure out how to work in the headerbar so we fit in with the rest of the GNOME apps.

[TingPing]

I wish we could get more input from the actual gnome designers..

[JasonLG1979]

I wish we could get more input from the actual gnome designers..

How so? What do you want from them? There's a HIG floating around somewhere I think?

[TingPing]

They do a lot of mockups: https://github.com/gnome-design-team/gnome-mockups

And just having more input in general would be nice.

[JasonLG1979]

I think we should shoot for a mini version of GNOME Music.

[JasonLG1979]

Here's a cut and paste version of my last mockup.

It does move the time from the songs treeview. There are a few options there. 1. Leave it in the treeview and don't show it in the bottom bar. But that makes the bottom bar look off balanced. 2. Have in both locations. Seems a little redundant. 3. Leave it like it is in the mockup. 4. Put something like "Playing" in the treeview where the time used to be to indicate which song is playing.

It also gets rid of the status bar. It's not particularly useful anyway. The messages flash by so fast you can't read them most of the time. And some of them are not very useful or something the user even cares about. That's what we have debugging mode for.

[TingPing]

I like it

[JasonLG1979]

Your thought on time placement options?

[JasonLG1979]

I'm kinda torn between options 3 and 4 myself.

[TingPing]

Time in the toolbar but Playing in the list to indicate playback.

[JasonLG1979]

That works for me. And for the sake of simplicity bitrate is not really necessary. There's no real place to put it where it doesn't look weird or at least not a little forced.

[TingPing]

I still find the list in general to be a bit empty and I still have no idea how to change that.

[JasonLG1979]

What do you mean "empty"? Like there's not enough info there? I think there's enough there to be useful. Anymore stuff in there and it starts to be too much and you can't read what's import(the song title, album, artist) at a glance. The only real options are to make the text larger so it fills the space more, which would look tacky. Or make the album cover smaller(I like it the size it is)

[julianrichen]

Hello, Just wanted to throw some of my own renders into the mix:

Not really polished yet because I'm still playing with the design my self but used @JasonLG1979 idea as a base. Tried to fill in the rows with the action menu so it seemed less empty. I think we could also remove the bottom row by moving the song progress bar to each individual row and putting the play/skip button in the header bar. The volume could be removed since gnome-shell should handle it but I understand why you would want to keep it.

Quickly whipped those up as I need to go do something but maybe later tonight I can work on it more.

I'll be keeping the svg's here: https://github.com/julianrichen/mockups/tree/master/pithos

[TingPing]

@julianrichen Thanks a lot!

One thing to note is that we don't support seeking, so I am not a fan of the progress bar being so prominent, I like your idea of tying it to the song itself though.

[TingPing]

The volume could be removed since gnome-shell should handle it but I understand why you would want to keep it.

By default gnome-shell doesn't even expose per-application volume without digging into the control panel... So I don't think it is fair to say it "handles it".

For the actions I think everything in a drop-down makes sense, there are just too many that I would call common to give their own button to.

[TingPing]

For the add station button, I think it makes sense to integrate that into the station drop down search.

[JasonLG1979]

@julianrichen I like the progress bar in the treeview but it can't be in the text(CellRenderText only renders text) unless we used some crazy nesting or render text into a plain CellRender which is kinda a PITA to make it look right. Either way mixing text with anything in a CellRender makes things much more complicated. A easier option would be to put in the album art CellRender and make it show up on hover?