GSoC 2022: Upcoming and new releases page

GSoC application - Dijia Yuan

Organization: MetaBrainz

Project: ListenBrainz

Topic: Upcoming and new releases page

Student Name: Dijia Yuan

Github: Dijia Yuan


IRC Nick: Dijia

Timezone: UK (GMT+1)

My commits: check out


This GSoC project aims to show data about new releases to users. There is a large amount of data about releases in MusicBrainz but hasn’t been shown to the public, including new albums, live releases, other releases and re-releases. The first step is to work on the UI components of related pages. A page of releases has been designed and a link to this page on the main page is added. The second step is to use the API to visit the database of musicbrainz and show data to users. Links to musicbrainz should be added for the user to get more information.


·A page showing new releases;

·A link to the page of releases through the nav bar on the main page;

·A page showing and playing selected album;

·Links to musicbrainz to get more information.


Task 1: Design the pages

I have designed two versions for the page of new releases, one is the horizontal distribution of different types of releases, and the other is the vertical distribution of different types of releases. In the illustrations below, I chose some albums as examples, real new albums should be got from the database.

Version 1 - horizontal

Different kinds of releases are shown on the top of this page, users can choose one of them through the bar:

This page can show 25-50 albums at once (depending on the size of the database), a bar of choosing the number of pages should be added on the bottom:

Version 2 - Vertical

Different types of releases are shown vertically. Users don’t need to choose one from the bar. But less albums can be shown in the page (about 5-15 albums once, this page shows 5), users can click “More” for more albums in their interested class:

When users choose their interested album, a page of album including information of the album, songs in the album and the button of play should be shown:

Task 2: Finish static pages

After deciding the design of pages, I should focus on writing static pages with html and css. Two static pages should be written: the page of releases and the page of albums. In this period I can use some “fake” albums instead.

Task3: Finish simple transition between pages

There should be a link to the releases page on the main page, which I think should be put below “Explore”:


If choosing version 2, the text “More” should be linked to a page with more albums.

The name of an album should be linked to the page of the album.

Task 4: Visit the database and show them

I use some “fake” information for tasks above, now I should use “real” information. Using a specific API to visit the database and showing them on the page.

Task 5: Finish dynamic functions

The first thing to work on is the function of playing the music. When pressing the button of “Play all”, songs in the album should be played one by one. When pressing the “Play” of one song, this song should be played. This function can be achieved by embedding BrainzPlayer, progress bar is shown on the bottom of the page.

The second thing is links to MusicBrainz. For example, if the user wants to know more information about the album, a link to MusicBrainz is provided. What is more, there may be several different versions of the same release, the user can get more information though the link.


All my courses have ended, and besides setting apart some time doing my dissertation, I have enough free time until autumn. The project starts on 13th June, but I can start it earlier.

April & May: Select the design scheme and discuss the design details

Week 1: Finish static page of releases.

Week 2: Finish static page of album.

Week 3: Finish simple transition between pages.

Week 4-5: Visit the database and show data on the page of releases.

Week 6: Improve page of album and finish the function of music play.

Week 7: Finish links to MusicBrainz

Week 8: Project test and debug.

Week 9: Documentation and project conclusion.

About me:

My name is Dijia Yuan, I’m now a master student of UCL (University College London) majoring in machine learning. I’m a fan of both music and technology. I love playing musical instruments, such as Chinese lute, guitar and keyboard. I learned about machine learning in my 2nd year of my undergraduate and from which I started to use python (before that I used C/C++). Now I’m familiar with python and usually use it to do tasks in computer vision, multimedia processing and data analysis. I’m a quick self-learner and always curious about new things. I also like graphic design and once have designed posters for some activities of my university, that’s why I’m interested in this front-end task.

Tell us about the computer(s) you have available for working on your GSoC project!

Computer: ASUS UX410 (i5, 8GB RAM)

System: WIndows 10

When did you first start programming?

I first started programming five years ago. I learned java and C++ in my undergraduate courses and learned python and javascript by myself. Now I mostly use python.

What type of music do you listen to?

I almost listen to all kinds of music, no matter old or new, advanced or traditional, joyful or blues! But what I listen to most is pop music, country music and folk music. Several of my favorite singers are: Ed Sheeran, Taylor Swift and Buyi Mao.

What aspects of the project you’re applying for (e.g., MusicBrainz, AcousticBrainz, etc.) interest you the most?

I have to admit that I learned about metabrainz because of GSoC. When I first looked at ListenBrainz I fell in love with its UI design (I love the color combination of purple and orange!). I like the idea of analyzing our listening history and showing them by chart. The listening history not only shows our tastes, but also the mood of that time. The other function I like is the Hue Sound! It is creative to find an album by colors.

Have you ever used MusicBrainz to tag your files?

Not yet but I will try. As I mainly focus on ListenBrainz these days and missed MusicBrainz…

Have you contributed to other Open Source projects? If so, which projects and can we see some of your code?

I haven’t contributed to other open source projects but have contributed to some group projects and course projects. So I’m familiar with the workflow of github. Several of my projects are shown on my github.

Contributions to ListenBrainz are shown too: my commits.

What sorts of programming projects have you done on your own time?

Most of my own projects are about deep learning using python. Now I’m working on a React project to get familiar with front-end tasks.

How much time do you have available, and how would you plan to use it?

All my courses have ended now, so I can plan my time fully by myself. The only task of my course is my dissertation, but don’t worry it won’t take me much time, I have enough time to work on this project. I can work on this project from May until September.


Thanks for your application – it looks pretty good. One of the things we would want to do is have our UI/UX experts work with you to review your UI design so that it fits into our roadmap for making improvements to the LB UI.

However, my main concern with your application is that you are focused on python and data tasks normally and did not mention that React in your application. All of the UI for LB should be build using the React framework, which is rather quite javascript intensive. You say that you are a quick learner, so you might be able to manage this.

In order to accept this project proposal, I would need to see a contribution from you that shows some react based improvement to our UI pages in ListenBrainz. We have a list of easy bugs for newcomers that you could take a look at:

Issue Navigator - MetaBrainz JIRA

(We’re in the process of adding more to this list as I am responding to this).

One thing you might want to consider doing is taking a look at our ideas page for a more python/data based task, rather than one that is nearly all Javascript/UI/React:

Development/Summer of Code/2022/ListenBrainz - MusicBrainz Wiki

The spotify metadata cache and the new release radar projects do not have UI components and are pure python, so they might be more suited to your current skills.