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


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! :)

Implementing the PlaybackPopover on Music

Hey everyone!

In the last post, I told that I was working on static version of PlaylistPopover (which now I’ll call PlaybackPopover or PlaybackBuffer since it doesn’t show just playlists that you create).

Now, I finally started to work on Music base code, although I’m still using the static version for testing and such.

First of all, I needed to study and figure out how to catch the current playback to print that in the console. I got this information in Player.playlist, and after worked the data I was able to do that.

Then, I needed attach my static script on gnome-music.

To do that, I was able to use the UI file that I had done for static version, just making a small changes (like changing ID names).

In the python part, I needed to rewrite almost all the code to adapt to gnome-music (although the logic be the same). So, I could print the current playback in the new Music popover and no longer on the console.

This is a first screenshot of PlaybackBuffer on Music:

I created a new github repository which is separated from the static script (which link I posted on the last post) to work with gnome-music freely.

As I also mentioned in the last post, I have some difficulties to implement a Gtk.ListBox with a model. The documentation is not clear enough and I didn’t find any examples of implementation.

My mentor was working in a personal project which uses Gtk.ListBox with model. He sent me an example and discussed with me. That helped me to understand better how to implement it, succeeding this time.

Since I had these difficulties, I have decided to do a little tutorial to help someone who also has difficulties with it.

I’ll post that and I also will post an example on GNOME Developer Platform Demos.

It has been very gratifying to work with gnome-music and to see my work taking shape.

Now, I’m implementing a Gtk.Stack which will select between these tree popover layouts according the view selected by the user.

But this is subject to the next post! 😉

I see you there!

Improving my Gtk and Music knowledge


Happy new year for everyone!

It is time for a new report about my progress on Outreachy :)

During the past few weeks I have studied about how to work with Gtk. It was necessary since I didn’t have so many experience with it. Also, I have taken a time to understand how Gnome Music works.

One of the results of this is a static current playlist widget implementation that I mentioned in the last post. You can take a look at it here.

Screenshot from 2016-01-09 01-52-31

Obviously it still need to be aesthetically polished but I will let to do this later. As I said, right now I’m focused on to learn and in how things work.

To accomplish it, I used the following approach:

  1. I coded everything without any worries about code style or good practices (aka spiking code). The reasons for this are to focus on learning the basis and to do not distract myself with anything
  2. After have understood what is needed to be done, I rewrote everything trying to achieve a better code quality.

Being more specific, in the first step I coded everything using just Python, without any shortcuts or tools that would facilitate my job.

In the second step, I’ve decided to use Glade to generate the widget structure to than import it using Gtk.Builder. This final approach follows the way that Music works (and probably almost every Gnome App) which permits to separate logic from UI in a better way.

After have completed this steps I’m feeling that I have learned many concepts of GTK and that I’m more prepared to accomplish my Outreachy project.

Finally, I would like to mention one main difficult that I faced. My mentor suggested me to use a ListBox with a ListModel to display the playlist itself. But, until now, I didn’t find a way on how to do this in Python. The documentation is not clear enough and I didn’t find any example of implementation. Well, for now, the solution discussed with my mentor is to forget the ListModel and just use ListBox.

Oh, and I almost forgot, I also take a look on Gnome Music code to find a way to retrieve the data that I will use to feed my widget. It looks like the Player.playlist has the information that I need. I was able to iterate over it and print on terminal the current playlist.

With the static widget and the needed data, I’m going to implement the widget on Music in the next week (the thing is starting to get serious :D). I’m very excited to this and I hope to make a great job.

See you in the next post!

My first post as an Outreachy intern


My name is Jordana Luft, I am an undergraduate student of computer engineering at Federal University in the city of Pelotas, south of Brazil. This is my first post in a series of posts that I intend to write from December/2015 to March/2016, related to my experiences and work during the internship in Outreachy program.

I’m so happy to be writing about this amazing program which helps underrepresented groups to get involved in the free and open source software.

In order to participate in such a program you just need to find a mentor and make a little contribution in a open source project that is participating in Outreachy, such as GNOME, Mozilla and Linux Kernel. During the applications process I got a lot of help and support from the community and especially from Felipe Borges, who will be my mentor during all the internship.

I’m extremely happy and thankful for been accepted in the program! This really is a great opportunity for me and I can’t hardly wait for all the stuff that I’ll be learning and all the people that I will be meeting during the program.

Over these 3 months I’ll be working on a playlist widget for gnome-music. This will improve user experience since we will be able to see the current playlist.

This is a mockup made by the community for this project:

You can watch my progress in this blog, and also in bugzilla.

In the next week, I will improve my GTK knowledge making a stand-alone version of this widget.

That’s all for now, see you in the next post!