Putting make-up on PlaybackPopover

Hey everyone!

I’m very excited writing this post.

I’m really happy with my progress so far and I believe that my project will be completed on time! Actually, my internship is coming to the end and it has only fifteen days of work left.

Well, let’s talk about what I have been doing recently!

So, I thought my code was starting to smell and I found that was a great time to refactor it. My intention was to make the code easier to understand and more mantenible for anyone that will touch it in the future.

The first thing that I did was to create a separated module for the PlaybackPopover. I also followed the same approach for .ui file.

Much of the code was rewritten and I think it’s now much better (but far from perfect!)

I feel that this refactor made a big difference in code quality, so I’m quite happy now.

So, if you remember, in the last post I’ve told that PLaybackPopover has different views, and I also presented a screenshot of each one. I’ve made a comment about an issue that I was facing with not being able to get the albums cover. However, this is past now.

At that time, I had not worked the design since I was focused on making things work. After solving the cover issue, I started to make things pretty and I’m really happy with I’ll show you now.

So, here goes the new screenshots of PlaybackPopover:

Album view
Screenshot from 2016-02-22 21-28-33

Playlist view
Screenshot from 2016-02-22 21-28-23

Artist/Songs view
Screenshot from 2016-02-22 21-28-57

There are some details missing, but I think it is very similar to the mockup that I’m facing since the internship begins.

Actually, I can’t wait to see it to be implemented on Music!

Now I’ll start to work on the playing button, which will also have some changes.

So, that’s it for now! See you in the next post! 😉

PlaybackPopover and Music views

Hey!

Today I’ll talk about how the PlaybackPopover will work.

As I told you in the last post, PlaybackPopover will have three different layouts which will be associated to the view selected by the user.

Right, but what is a view on gnome-music?

Views are all the “screens” that the user can pass by. Technically speaking, each view is a child of a Gtk.Stack widget.

Music contains eight views in total: Empty, InitialState, Albums, Songs, Artists, Playlist, Search and SearchEmpty.

Empty and InitialState views appear when there is no music in user music directory. The only difference between these views is that InitialState only appears at the very first time Music starts.

If the music directory is not empty, the user can access the Albums, Songs, Artists and Playlist views by clicking on its respective buttons on the header bar.

The Search view appears when user types on the search bar. If there is no result, SearchEmpty view is displayed.

But how views do relate with PlaybackPopover? Actually, it is very simple.

Each view, (except for Empty, InitialState and EmptySearch views) produces a different playlist (not the playlist create by user)  which PlaybackPopover consumes.

The PlaybackPopover also has the views idea and it also uses a Gtk.Stack widget.

As I mentioned before, there are three different views for PlaybackPopover. These are the screenshots of the views current implemented (still need works on design, but the logic is almost done):

The first one is for Albums view:
Screenshot from 2016-02-09 20-26-31

The second one is for Playlists view:
Screenshot from 2016-02-09 20-28-50

And the third one is for Artist and Songs view:
Screenshot from 2016-02-09 20-28-13

Screenshot from 2016-02-09 20-38-27

The only difficult that I faced in this part of implementation was to transform the standard playlists into PlaybackPopover playlists. They are different and because of that, I was not able to get all the data that I needed. For example: in the Artists view, the playlist does not return the artist name.

Although the artist view issue is solved, I still don’t have a way to get the albums covers since by default Music just display it for the current track. Until now, I have not  figured out how to solve it. If I add a cover in Music playlist model to feed PlaybackPopover playlist model Music breaks.

So, that’s what I’m going to focus now.

See you! :)