GSOC 2024 : Artist, Album,User Pages in ListenBrainz Android App

GSOC 2024: Artist, Album, User Pages in ListenBrainz Android App for all users

Link to the PDF version

About me

Contact Information

Nickname : Pranav

IRC Nick : pranavkonidena

Matrix Handle : pranav / pranavkonidena

TimeZone: UTC +05:30

Email : pranav474738@gmail.com

GitHub : https://github.com/pranavkonidena

Devfolio: https://devfolio.co/@pranav2211

LinkedIn: https://www.linkedin.com/in/pranav-konidena-45102b25b/

I am Pranav Konidena, a sophomore at the Indian Institute of Technology Roorkee (IITR). I am deeply interested in exploring all spheres of software development. I currently work as a mobile developer at the Information Management Group. Information Management Group is a student group tasked with developing niche applications that make the digital stay of every student at IIT Roorkee as comfortable as possible. After a long day, I like to code something or play table tennis with my friends. I also love watching Formula 1 (Forza Ferrari) and football (Hala Madrid!). Oh, I forgot to mention I am a colossal fiction fan.

Why me?

I have an inherent love for programming and have explored many diverse fields in the area. I, along with two friends, participated in the BackDoor CTF (Capture The Flag) event hosted by InfoSec IITR, one of Indiaā€™s best undergraduate CTF teams. We were placed 14th out of 200+ teams who participated. I also have over 4000 points on PicoGym on PicoCTF. When I started contributing to LB Android, I had no prior experience in Kotlin. I went through many medium articles and started to get the hang of Kotlin and ComposeUI. I received valuable PR reviews from Jasje and Akshaaatt, which have taught me much about the coding practices used in organizations. I am a great team player and know the community well. Having been in constant touch for 4+ months, I am confident I can complete the project and learn a lot from this experience.

Why MetaBrainz?

I have been a user of MusicBrainz and ListenBrainz since July 2023. I love music and spend ~2-3 hrs a day listening to music. So, I wanted to make my music tracker (I wanted to check minutes listened, minutes of artists listened, etc., something like Spotify wrapped but not only in December), and thatā€™s how I came across MetaBrainz. Participating in GSoC has been one of my long-term aims. When I saw that MetaBrainz had participated in GSoC earlier, I was thrilled and began contributing to MetaBrainz in December 2023.

My Contributions in MetaBrainz so far

I currently have 11 merged PRā€™s and 1 open PR in ListenBrainz Android which can be viewed here. I have also contributed to ListenBrainz Server and have 2 merged PRā€™s which can be viewed here.

Proposed Project

Project Overview

Currently, the ListenBrainz website contains a lot of features such as User Pages, Album Pages and Artist Pages, which offer a holistic experience to the users. However, there is a lack of unified experience for users as some of the features offered by the LB Website listed above need to be present in the app. As a contributor of the LB App since December 2023, my understanding of the app is that it is a fusion of three things. Listen Submission, Social Media, Music. For any music app with a fusion of social media, user, artist, and album pages are a must, and this project aims to achieve that.

Project Goals

According to the LB GSoC ideas page, the project goals are as follows.

  • User Pages:

    Enhance user profiles to include detailed listening statistics, favourite tracks, albums, and artists. Implement a feature for users to follow others and explore music communities within the app.

  • Artist Pages:

    Offer comprehensive artist profiles featuring a biography, discography, related artists, and upcoming events. This will enable users to discover new music and learn more about their favourite artists.

  • Album Pages:

    Display detailed album information, including track lists, release dates, genres, and artist links. Integration with music streaming services to listen to tracks directly from the app may also be explored.

Project Size

Large (350 hrs)

Plan of Action for the project

Planning:

The user pages are the most important and involved part of this project. For better management and ease of working, I have divided the entire project into three parts as shown respectively. These are all the features I would be implementing as a part of this GSoC project. Extended Goals are listed, and provided I have additional time, I will be completing them.

Part of the Project Final Deliverables
User Pages

(Part 1)

  • Recent Listens of the User
  • Pins of the user
  • The total number of listened songs, users they follow or users that follow them, similar users
  • Stats such as top artists, top albums, top tracks, listens per day, and daily activity heatmap, which offer deep insights into a user's music taste and listening patterns
  • Loved and hated songs by the user under a user's taste
  • Playlists of other users, created for you playlists for a user's dashboard

Artist Pages

(Part 2)

  • Cover Art of artists with all their hit albums
  • A Wikipedia extract of the artist for users to learn more about the artist
  • A list of popular tracks of the artist
  • No of plays and listeners of the artist along with the top listeners of the artist for the user to connect with people with similar music taste
  • All albums of the artist
  • Similar artists for the user to discover
  • CritiqueBrainz Reviews of the artist
Album Pages

(Part 3)

  • Album Cover Art along with the artists who recorded the album, date of release of the album
  • Tracklist of the album
  • No.of plays, listeners of the album, along with top listeners of the album
  • CritiqueBrainz reviews of the album

Note:
The layout for all parts of the project would be similar to that of LB Web. This means that the UserPage screen would have four tabs (Listens, Stats, Taste, Playlists and Created for You)
For implementation details, kindly see the APIs and the coding sections.

Design:

Tentative User Flow:

The figma file for the user flow may be found here.

As we can see, the three pages will be linked together, and the user can easily navigate to different pages from each page.

UI MockUps:

Mockups will be prepared and finalized by having discussions with the in-house designer of MetaBrainz, Aerozol. For mockups of the artist, album, and user pages, you can find the relevant figma file here. The design is still in a very nascent stage and will be updated soon. The wireframes for the layout of the screens are given here. Some mockups of the artist pages are attached below.


Knowing the APIā€™s:
Please note that some of these API Calls are already implemented in the corresponding services within the app ( e.g. ā†’ Recent Listens of User is already implemented in the ListensService file). Hence, I would be reusing all implemented calls and writing only those calls in service files that still need to be implemented.

Note: Base URL for all API calls is : api.listenbrainz.org as given in the docs

User Pages:

  1. Recent Listens of User

    Request : GET /1/user/(user_name)/listens
    About:
    Get listens for user user_name.

  2. Pins of User
    Request : GET /1/(user_name)/pins/current
    About:
    Gets the current pins of the userā€™s user_name.

  3. Total Amount of Listened Songs
    Request : GET /1/user/(user_name)/listen-count
    About:
    Gets the total listen count of the user user_name

  4. Follow APIā€™s
    Request: GET /1/user/(user_name)/followers
    Request : GET /1/user/(user_name)/following
    About:
    Get the followers of user user_name and the users that user user_name follows.

  5. Similar Users
    Request: GET /1/user/(user_name)/similar-users
    About:
    Get a list of users in decreasing order of similarity with user user_name. Similarity score and username are received.

  6. Top Artists
    Request : GET /1/stats/user/(user_name)/artists
    About:
    Get the top artists for user user_name

  7. Top Albums
    Request: GET /1/stats/user/(user_name)/releases
    About:
    Get the top albums for user user_name

  8. Top Songs
    Request: GET /1/stats/user/(user_name)/recordings
    About:
    Get the top songs for user user_name

  9. Listening Activity of User (Will be required while implementing the heat map of listens)
    Request: GET /1/stats/user/(user_name)/listening-activity?range=year
    About:
    Get the number of songs listened to by the user every day for

  10. For Loved/Hated songs of User
    Request : GET /1/feedback/user/(user_name)/get-feedback
    About:
    Get feedback given by user user_name

  11. For playlists:
    Requests:
    GET /1/user/(playlist_user_name)/playlists
    GET /1/user/(playlist_user_name)/playlists/createdfor
    GET /1/user/(playlist_user_name)/playlists/collaborator
    GET /1/playlist/(playlist_mbid)
    About:
    Get all playlist MBIDs of a user. The ones in which a user is a collaborator, the playlists created for a user. We can fetch playlist details using the playlist mbid.

Artist Pages:

  1. Wikipedia Extract of Artist
    Request:
    GET https://musicbrainz.org/artist/{artist_mbid}/wikipedia-extract

  2. Top Tracks of Artist
    Request:
    GET /popularity/top-recordings-for-artist?artist_mbid=(artist_mbid)tistMBID}

  3. Artist Metadata
    Request: GET /metadata/artist/?artist_mbids=(artist_mbid)

  4. Reviews of Artist
    Request : GET https://critiquebrainz.org/ws/1/review/?limit=5&entity_id={artist_mbid}&entity_type=artist

  5. Top Release Groups of Artist
    Request : GET /popularity/top-release-groups-for-artist?artist_mbid=$(artist_mbid)

  6. Top Listeners of Artist
    Request : GET /popularity/top-release-groups-for-artist?artist_mbid=$(artist_mbid)

  7. Top Listeners of Release Group
    Request : GET /1/stats/release-group/(release_group_mbid)/listeners
    Album Pages

  8. Album Cover Art
    **Request **: GET https://archive.org/download/mbid-${releaseMBID}/mbid-${releaseMBID}-${caaId}_thumb${size}.jpg

  9. Album Reviews
    Request : GET https://critiquebrainz.org/ws/1/review/?limit=5&entity_id=${release_group_mbid}&entity_type=release_group

Timeline of project

Pre-Community Bonding Period (April 2 - May 1):

Iā€™ll make progress for Figma Designs and continue work on other project ideas such as BrainzPlayer Revamp as Akshat suggested

Community Bonding Period (May 1 - May 26):

I will finalize the Figma mockups for all the screens and get them approved by Aerozol.

GSoC Coding Period:

Date Week Goals
May 27 - Jun 3 1
  • Set up the user view model and user UI state by reusing already implemented services and implementing the rest. Use components such as HeatMap, Graph of Listening Activity (already implemented for YIM) and listen cards. Create new components for pins of users, playlists, etc.
  • Implement all the components under the listens tab of the user pages. Mainly, this involves reusing existing code for recent listens, listening now cards, and similar user cards, as well as creating components for total songs listened, followers and following cards according to design.
Jun 3 - Jun 10 2
  • Create components for artist and album cards to display a user's top artists and albums. Reuse created components for the user's listening activity, heat map and playlist. Finish implementing the stats and playlist tabs of user pages.
Jun 10 - Jun 17 3
  • Work on DashBoard by reusing the generic user page for a particular user under the profile screen
  • Create a Mock User repository and write unit tests for User Repository and User VM. Once all pages are implemented, integration tests will be written to check overall functionality.
Jun 17 - Jun 24 4
  • Finish unit tests for User Pages and any other pending work, if any.
    MILESTONE:

    Finish Part 1 of Project

Jun 24 - Jul 1 5
  • Set up the artist view model and repository. Reuse the existing cover art fetching function to implement covert art of artists with their hit albums and listen-cards to show the top tracks of artists. Make components to fetch CritiqueBrainz Reviews of an artist.
Jul 1 - Jul 8 6
  • Finish UI of Artist Pages by implementing Wikipedia extract and top listeners of the artist. Ensure navigation to the user page by clicking on any of the top listeners. Create a Mock Repository and write unit tests for Artist VM and Artist Repo. Write integration tests for user and artist pages to ensure smooth functioning.
Jul 8 - Jul 15 7
  • Finish tests for ArtistPages and any other tasks which may be left
    MILESTONE:

    Finish Part 2 of Project

Jul 15 - Jul 22 8
  • Set up the album repo and VM. Reuse cover-art fetching function and listen-cards component to implement album cover-art and tracklist. Integrate CritiqueBrainz reviews of the album by reusing the same component used in Artist Pages to show reviews of an artist.
Jul 22 - Jul 29 9
  • Finish implementing UI of Album Pages. Make a mock Album repo and write unit tests for Album VM. Write integration tests for artist and album pages.
Jul 29 - Aug 5 10
  • Start writing full integration tests for User,Album and artist pages and get feedback for UI UX from Aerozol
Aug 5 - Aug 12 11
  • Continue working on UI-UX feedback if any and publish GSoC blog
    MILESTONE:

    Finish Part 3 of Project. If everything goes according to plan, I'll start working on extended goals.

Aug 12 - Aug 19 12
  • Continue working on UI-UX feedback. If events are implemented in the LB server, I will start integrating them. However, this would require meetings with Aerozol to finalize the flow, as I believe this is a significant UX overhaul.
Aug 19 - Aug 26
  • Buffer Week
    I will continue working on extended goals and prepare the final deliverables of the project.

I also plan to have weekly meetings with my mentor to discuss my progress after every weekly dev meeting to keep everyone updated.

Work may be affected in Week 8,9 as I will have several tests and interviews for the upcoming intern season.

Coding:

User Pages
UserService.kt

package org.listenbrainz.android.service

interface UserService {

   @GET("{user_name}/pins")
   suspend fun getUserPins(@Path("user_name") username : String) : Response<List<PinnedRecording>>

   @GET("user/{user_name}/listen-count")
   suspend fun getUserListenCount(@Path("user_name") username : String) : Response<Long>

   @GET("stats/user/{user_name}/artists")
   suspend fun getUserTopArtists(@Path("user_name") username : String) : Response<List<Artist>>

   // And so on, I have given out implementation for a few of the unimplemented things for user pages,
   // rest will be directly reused from the required services

}

UserViewModel.kt

package org.listenbrainz.android.viewmodel

@HiltViewModel
class UserViewModel @Inject constructor(
   private val userRepository: UserRepository,
) : BaseViewModel<UserUiState>
{
   private lateinit var username : String
   // This function will be used to set the username, which is then used to get the necessary info for all user pages.
   fun setUsername(username : String) {
       this.username = username
   }

   init {
       loadData()
   }

   suspend fun loadData () {
       viewModelScope.launch {
           userRepository.fetchUserData(username)
       }
   }
}

A similar flow would be maintained for the artist and album pages. Also, Iā€™ll first try to create and use as many reusable components as possible, ensuring that adding new features to the app will be easy in the future. I would be creating UiStates for the UI to consume directly. The code structure would be adhering to the MVVM architecture, following the codebase structure and contribution guidelines sections in the overview document for LB-Android. To have swipe functionality in user pages, Iā€™ll be using Horizontal Pager in ComposeUI.

Extended Goals:

  • Events in LB Artist Pages

    This feature would notify users via push notifications when the artists they follow announce a tour. Also, a list of an artistā€™s upcoming events would be on their page. This feature may also be region-specific after users set their location in the app/web.

  • Integration with music playing services to play music directly from LB-Android

    As we would be implementing features such as Created for You, it makes sense that the user could play playlists and albums from the LB app directly. This feature aims to connect the LB app to several music-playing services so the user can play music directly from the LB app.

Additionally, please go through some extended questions and answers related to the proposal here

Post GSoC Plans

Post GSoC, I would like to continue working on LB Android and will try to contribute code in LB-Server and BookBrainz. I will work on making Year In Music for friends of users in the app (by making a generic activity and passing in the username as an extra with the intent). This will allow users to view their Music Buddiesā€™s YIM in the app.

Community Affinities

What type of music do you listen to?

I love listening to a wide variety of music. It may be groovy Tamil songs or old classics. Some of my favourite artists are Anirudh Ravichander, Sam CS, Ritviz (Am in the top listenerā€™s section hehe ).

My Favourite songsā€™s MBIDā€™s are:

5b93c3ee-18a8-42ae-9458-4e321402dfc1

dcd15c09-9aa6-4bc9-826a-1340a9e4cf0b,

d74ce039-fb99-44fb-aa54-43bf707acf46

My LB profile can be found here.

What aspects of MusicBrainz/ListenBrainz/BookBrainz/Picard interest you the most?

Of all the projects in MetaBrainz, my favourites are ListenBrainz and BookBrainz. I have been a member of ListenBrainz since July 2023 and love that I can check detailed insights of my listening history anytime I want. I mainly use BookBrainz to peruse other peopleā€™s collections and to get some reading ideas. I loved the project and would love to contribute to BookBrainz.

Have you ever used any of our projects in the past?

I have been using ListenBrainz to scrobble my listens since July 2023 and BookBrainz to see peopleā€™s collections of books, as mentioned above.

Programming Precedents

When did I first start programming?

I started programming in the first semester of my university. We have a thriving student group culture on campus, and one of the student groups took a workshop where we made chromeā€™s dino game using JS. This was my first programming experience. After this workshop, I participated in my first ever hackathon where we made a python bot to notify users when the flight prices between a particular route are reduced. The project can be found here. I discovered my love for hackathons and programming from this event and have participated in many hackathons since then.

Have you contributed to other open-source projects? If so, which projects and can we see some of your code?

Yes, I have contributed code to the NoticeBoard App maintained by the Information Management Group. Over 15000 users use the app, and it acts as a link between the college administration and the students. All crucial notices are shared on the app.

You can find the app on PlayStore and AppStore.

Here is a link to the code :

Here is a link to my PRs

Features I have implemented:

  1. Added a network interceptor so that when users donā€™t have internet connectivity, they are notified via snackbar, and then when their connection is restored, notices are re-fetched
  2. Fixed a bug related to no UI updation when opening a notice via a deep link

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

  • AdaptiSync: AI-Based Real-Time Adaptive Traffic Control using Edge Computing

    This is a project that I have been working on with Mr. Amit, who is one of my professors at our university. We use Jetson Xavier NX/Raspberry Pi 4 and Coral TPU for complete wireless traffic classification on an approach. This data is then transmitted back to our AWS server, where a RL algorithm gives out the best green phase durations for each approach. We use this to control the traffic signals on an approach dynamically. I have implemented the AWS server written in Flask and worked on object detection using the YOLO V8 nano model. The code is not open source yet, here is a brief of the components of this project

  • Amenity Reservation App

    On entering the IIT Roorkee campus, many enthusiastic students have high expectations of leading a healthy lifestyle that includes body fitness and exploring a variety of skills by trying out different sports. However, there is a significant problem faced by many of these students, for example - students have experienced frequent situations wherein they go to play a sport or use a facility, e.g., table tennis. Still, they rarely get a chance to play those games because they always remain occupied. This app aims to solve this problem by allowing students to make bookings for different sports activities according to their needs.

    Tech Stack:

    Mobile App made with Flutter.

    Backend made using Django Rest Framework.

    Database used: MySQL

    IDE used: Microsoft Visual Studio Code

    Link to the appā€™s code

    Link to the backendā€™s code

  • Smart Parking App

    This was a project that I had made along with two friends for a hackathon. This IoT project uses ultrasonic sensors to detect the parking status of a slot. It sends this data to the server, which then dynamically provides the nearest empty slot to the user and directions for parking. We came in the top 10 out of over 150 teams.

    Tech Stack :
    Mobile App made with Flutter
    Backend made with Flask
    IDE used: Microsoft Visual Studio Code
    Link to the code : https://github.com/iamgoeldhruv/carparking_app

There are several other projects made for fun/hackathons. You can find them here.

Practical Requirements

Development Setup for SOC
I currently have a MacBook Pro (2021, 14-inch version) with 16 GB RAM. The operating system is MacOS Sonoma 14.2.1, the kernel version is Darwin 23.2.0, and the architecture is ARM64. I use Android Studio Hedgehog to contribute code to ListenBrainz.

How much time are you available weekly, and how would you plan to use it?
Iā€™ll have my university summer break during the GSoC coding period. I would have no other engagements during that period and could work on the project for ~35 hours a week.

References

https://developer.android.com/topic/architecture/ui-layer/stateholders

https://developers.google.com/open-source/gsoc/timeline

https://docs.google.com/document/d/1hY5oloIiANeXg1R9oSBIr2ZUHSlm7LU8qy6tW1VJMQg/edit#heading=h.x4w8r8egtv4e

https://listenbrainz.readthedocs.io/en/latest/

https://musicbrainz.readthedocs.io/en/latest/terminology/index.html

4 Likes

Thanks a lot for your proposal @pranavkonidena ! Great to see your enthusiasm :100:

I have read through your proposal and found that you need to polish it at places and give it a couple more reads to fix things grammatically.

Regarding the timelines you have suggested for the programme, I think you have missed out on the fact that the current artist and albums repos, viewmodels are related to BrainzPlayer and not remote data from ListenBrainz. Just wanted to clear that out.

I would also like @aerozol to give a thumbs up to the designs you share and work on.

Hi @akshaaatt ! Thanks a lot for your feedback. I had already went through the code for artist view model and saw that it was the viewmodel for BrainzPlayer. However , imo it makes better sense if we add the required functions for artist pages in the same view model instead of creating an entirely new view modelā€¦

12 posts were merged into an existing topic: Exporting Playlist to soundcloud

Hi @akshaaatt . I have read through the proposal and fixed the gramatical errorsā€¦ my bad for not spotting them earlier. Have also taken your feedback into consideration , could you please go through the proposal once and suggest changes? No urgency. Thanks!

Hi @pranavkonidena! Itā€™s looking good, thank you.

As weā€™ve discussed on IRC, we do not expect our GSoC students to be taking on UI/UX/design-heavy tasks (unless this is something they have experience in). With that in mind, Iā€™ll go over the wireframes in greater detail, and deliver you finished designs to implement, if your proposal is accepted.

You should incorporate time into your proposal, near the end, for UI/UX feedback and changes. This can take longer than you might expect!

As your designs should (mostly) match the LB website mobile layout, your wireframes will probably mainly be useful in identifying where the design should change for mobile (e.g. something is more suited to mouse rather than touchscreens), or potential improvements.

Questions to incorporate into your proposal (unless the answer is ā€˜nothingā€™):

  • Do you see any issues with porting the current LB website mobile UI/UX to the app
  • Will there be any mobile-specific interaction (long presses, swipes, etc)
  • Will you require any ā€˜newā€™ visual elements, or is everything you need already used somewhere in the app/desktop
  • Will you be implementing an artist/album search into the existing search?
  • Non UI/UX: Can you foresee any of the (many) new elements giving you trouble? Are there any that you think you might drop or leave for later if they end up taking too long, are heavy to load, or you canā€™t get the endpoints in time?

You donā€™t have to answer those questions in this forum thread, but they would be good to address/include in your proposal.

3 Likes

Thanks a lot for your feedback @aerozol . Iā€™ll update the proposal as required!

Hi @aerozol , I realized I couldnā€™t answer the questions directly in the proposal as I am exceeding the character limit, so you can find my answers here

2 Likes

@aerozol I think the points that @pranavkonidena has made are valid and I am looking forward to your take on this. We can discuss more over IRC if you prefer but best to have your thumbs on this so that Pranav can finalize his proposal. Thanks!

1 Like

@pranavkonidena Upon re-reading your proposal, I have some more suggestions and questions.

  1. We already have recent listens as a feature on the app from dashboard/profile. Why mention that in this proposal?
  2. I am a bit confused about what you mean by ā€œTest for responsiveness in different devicesā€. You have mentioned this at multiple places in your project timeline. I donā€™t see how this is a task. Please remove and take up space for other tasks.
  3. You have mentioned ā€œstartā€ at a lot of places. We can rather be a tiny bit specific there about how that work will be done. For example, you can breakdown ā€œStart writing tests for album pagesā€ by saying that you will first write the unit tests for repos, then viewmodels and then maybe integrations tests and so on.

Looking forward to these revisions!

1 Like

Hey @akshaaatt. First of all, huge thanks for your feedback. For the first part, I have written them under things thatā€™ll be implemented because I intended to define the final deliverables. My wording could have been better, so I have changed it accordingly. I have also removed the ā€œtest for responsivenessā€, divided work into smaller chunks, and become more specific with my goals in the timeline. Please take a look whenever you can and let me know if thereā€™s anything else I can do to improve my proposal.
Thanks

1 Like

It all looks fine!

The only further feedback from me is that that you may want to mention the potential SVG art issue in your main proposal, @pranavkonidena. If seems like it may impact your timeline, especially if it requires input or code changes from the core team/LB server. I will leave it to you to figure out if thatā€™s a possible ā€˜ouch!ā€™ issue, or just a small bump :slight_smile:

1 Like

@pranavkonidena Proposal wise things look good to me. I do not have any other feedback, just found a small grammatical mistake with ā€œcovertā€ at one place. You can re-read and fix those mistakes, if more. Other than that we are good to go I think.

1 Like

Hey @aerozol , I discussed the issue with Jasje and Akshat. Turns out the issue is in sharing svgs which support only png and jpeg as of nowā€¦ rendering is not an issue. I got confused. So that wouldnā€™t be a problem for this project.

2 Likes

@pranavkonidena Please mention the project size also in your proposal

I have mentioned the project size in the proposal @akshaaatt

1 Like