GSOC 2023: Feed Section in Android App

[Jasjeet]

Personal Information

Name: Jasjeet Singh

IRC nick: jasje

Email: 07jasjeet@gmail.com

Github: 07jasjeet

Time Zone: UTC+05:30

Feed Section in ListenBrainz Android App

Project Overview

Currently, ListenBrainz Android app consists of various features like BrainzPlayer, Listens Service, Listens history, YIM and many more which already make the app very interesting.

ListenBrainz website is an amazing platform that inculcates an idea which I believed in past but had no power to do so, i.e., having a social media app that revolves around music. Feed section is one of the core functionalities of this idea and the Android app lacks it. This feature has the potential to attract more users than ever because social media is something people access frequently and a mobile device is the best place to access it.

This project aims to integrate the Feed Section into the Android app.

My contributions up till now:

My Pull Requests: Check Out

My Commits: Check Out

Implementation

Going with the flow that ListenBrainz Android Docs mentions, this project will be implemented through the following stages:

1. Planning

   These are the following additions according to the ideas page.

   • Feed section is a replacement for home page (tentative), hence a lot of the burden comes to optimising this page to induce smooth startup experience.

   • The feed should showcase all ListenBrainz social events like whenever a user’s follower listens to a track, recommends a track in general or to them personally, follows another user or a user follows them, pins a track, reviews an album, reviews a track, or ListenBrainz has new announcements. ListenBrainz server has appropriate APIs for these tasks which will be mentioned in Knowing the APIs section.

   • Spotify remote player must be used in order to play songs on demand when the user clicks on an event that consists of a recording.

   • Follow/Following data is required by various functionalities.

   • Test first approach will be followed for unit tests and proper testing architecture will be followed throughout. Instrumented tests will be implemented once the feature has a screen flow.

2. Designing

   Designing process will be done under the watch of MetaBrainz team’s in-house designer and my mentor. Being accustomed to how things work in this organisation, it will be a smooth process. All designs will be created on Figma with frequent reviews from mentors.

   These are some quick mockups of what feed might look like:

   
   
   

3. Knowing the APIs

   The following API endpoints will be responsible for the functionality of this feature:

   • GET /1/user/(user_name)/feed/events?count=20&max_ts=<max_ts> : This API endpoint is responsible to provide information for all feed events. count and max_ts will be used to get events in batches of 20.

   • POST /1/user/(user_name)/timeline-event/create/recommend-personal : This API endpoint will let the user to personally recommend a recording to their some of their followers.

   • POST /1/user/(user_name)/timeline-event/create/recording : This API endpoint will let the user to recommend a recording to all their followers without any message or blurb content.

   • POST /1/user/(user_name)/timeline-event/create/review : This API endpoint will let the user post a CritiqueBrainz Review to the feed. The user must link their CritiqueBrainz account with ListenBrainz for this functionality to work. Error will be thrown if they haven’t. CB Token must be passed in authorization header here.

   • POST /1/user/(user_name)/feed/events/delete : This API endpoint will allow the user to delete an event that belongs to themselves. This endpoint supports deletion of recommendation and notification, so delete option will be limited to those only. User will also be given an appropriate window to cancel this action in order to avoid accidents.

   • POST /1/user/(user_name)/feed/events/hide : This API endpoint allows user to hide recording_recommendation and recording_pin events of users they are following. Appropriate time interval to undo hide action will be given to avoid accidents and an extra call to unhide.

   • POST /1/user/(user_name)/feed/events/unhide : This API endpoint will allow the user to unhide a previously hidden event.

   • POST /1/user/(user_name)/follow : This API endpoint will let user follow another ListenBrainz user.

   • POST /1/user/(user_name)/unfollow : This API endpoint will let user unfollow another ListenBrainz user (which they are following).

   • GET /1/user/(user_name)/followers : This API endpoint will fetch the list of followers of the user.

   • GET /1/user/(user_name)/following : This API endpoint will fetch the list of users followed by the user.

   • GET /1/user/(user_name)/similar-users : This API endpoint returns an array of dictionaries which contain a “similar” user. This endpoint will be used to recommend the user, other users on ListenBrainz that have same taste as the user itself.

   • GET /1/search/users?search_term=<user_name> : This API endpoint returns list of users that closely resemble input username. This endpoint will be used to search ListenBrainz users through their username. Debouncing will be implemented.

   Most these API endpoints require Authorization headers which must include LB access token.

4. Coding

   Step by step process of how coding part will go:

   1. API calls setup for User Search page with tests.

   2. View-model setup for User Search page. This will consist of SearchViewModel which will contain all code related to follow/unfollow interactions and User Search methods.

   3. User Search page UI implementation and performance testing. Mockup (tentative):

      

   4. API calls setup for Feed page with tests.

   5. View-model setup for Feed page consisting of two view-models namely: FeedViewModel (will only consist of strictly feed related business logic and follow/unfollow logic) and SocialViewModel (will consist all the reusable drop down calls such as recommend, personally recommend, write a review and more).

   6. Spotify App Remote SDK is currently used in ListensViewModel. Since the App Remote is very dependent on context, testing scope is hampered. To tackle this, Spotify App Remote SDK will be converted into a repository (which is easier to mock) and a mock will be established. ListensViewModel will be refactored for the same.

   7. Creating Compose UI for the feed page.
      Workflow:

      1. Implement Basic cards for showcasing various events.
      2. Integrate Spotify App Remote.
      3. Create drop-down menu for feed cards and modals for each mini feature.
      4. Add animations for the cards.
      5. Performance test the feed composable.

   8. Implementing instrumented tests for both features.

   Manual testing will be part of this project throughout thus encouraging TDD (Test driven development).

Timeline

Following is an overview of how I will be spending my time during the duration of GSoC:

Pre-Community Bonding Period (April):

Fixing bugs and restructuring codebase to accommodate testing.

Community Bonding Period (May-June):

Continue working on restructuring and write tests for the app. Discuss the UI for the feed with my mentors. Work on the UI ideas.

Phase 1 : User Search Page

Week 1

• Setting up API calls to the following required endpoints with their respective Unit tests:

  1. POST /1/user/(user_name)/follow
  2. POST /1/user/(user_name)/unfollow
  3. GET /1/user/(user_name)/followers
  4. GET /1/user/(user_name)/following
  5. GET /1/user/(user_name)/similar-users
  6. GET /1/search/users?search_term=<user_name>

• Setting up dependency injection.

Week 2

• Implementing Search Page user interface. This includes the following:

  1. Search Bar with debouncing technique to limit API calls.
  2. Follow/Following list.
  3. Similar users list.

• Performance test the screen.

Phase 2 : Feed page

Week 3-4

• Setting up API calls to the following required endpoints with their respective Unit tests:

  • All endpoints except “GET /1/search/users?search_term=<user_name>” will be used in feed.
  • Since 6 of the all the calls would be setup already, rest 7 would be implemented. These endpoints require heavy work, so, 1.5 to 2 weeks are required.

• Setting up dependency injection.

Week 5

• Finish up remaining Unit tests, if any.
• Setting up required view-model and integrate connectivity observer.
• Creating repository for Spotify App Remote, adding it to dependency tree and injecting it into view-model’s various cases where recordings are found.

Week 6-9

• Begin UI implementation. Implement UI of the screen such that events are loaded in batches of 20. Basic UI means:

  

• Implement drop down that mutates according to the feed event.

• Implement all the required reusable components for the functionalities inside the drop down. This includes:

  1. Personally Recommend feature requires a dialog that contains a search box where users can search and select through their followers to whom they want to recommend the recording.

  2. Write a CritiqueBrainz Review feature requires another dialog that allows user to input text which is then sent as a review. For this task, POST /1/user/(user_name)/timeline-event/create/review endpoint will be used.

  {
       "metadata": {
         "entity_name": "Shakira",
         "entity_id": "bf24ca37-25f4-4e34-9aec-460b94364cfc",
         "entity_type": "artist",
         "text": "TEXT",
         "languageCode": "en",
         "rating": 4,
       },
  }
  

  Since CritiqueBrainz should be linked to ListenBrainz account for this to work, CB login (OAuth 2.0) will be implemented using this documentation.

  This will be done through web-views, a separate CritiqueBrainzLoginActivity will be used for this case and declared as follows in manifest:

  <activity
           android:name=".ui.screens.feed.CritiqueBrainzLoginActivity"
           android:exported="true"
           android:label="CB Authentication" >
           <intent-filter>
               <action android:name="android.intent.action.VIEW" />
  
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE" />
  
               <data
                   android:host="cboauth"
                   android:scheme="org.listenbrainz.android" />
           </intent-filter>
       </activity>
  

  The following call will be used to start login process:

  val intent = Intent(
       Intent.ACTION_VIEW,
       Uri.parse(
           ListenBrainzServiceGenerator.CB_AUTH_BASE_URL   // https://critiquebrainz.org/oauth/
                   + "authorize"
                   + "?response_type=code"
                   + "&client_id=" + ListenBrainzServiceGenerator.CLIENT_ID
                   + "&redirect_uri=" + ListenBrainzServiceGenerator.CB_OAUTH_REDIRECT_URI   // "org.listenbrainz.android://cboauth"
       )
  )
  // Starting intent.
  context.startActivity(intent)
  

  If the user allows the access of their CB Account to the app, we shall proceed with “code” in the intent’s data. Following this, access token and refresh token will be fetched using this “code” and POST https://critiquebrainz.org/ws/1/oauth/token. Then we can freely use this token to post reviews in feed.

  3. Hidden Card component when a user hides an event.

  4. SnackBar implementation to accommodate Undo for accidental events.

• Connect all UI components to present a beta product.

Week 10

• Compose UI is prone to performance issues if not implemented correctly, hence improve code quality overall.
• Test all the services if they behave correctly and fix them in case of problems.
• Error cases are prominent in such projects, hence find and fix them.
• Start implementing Instrumented Tests for the feature if the project seems stable.

Week 11

• Implement Instrumented Tests for the feature. This includes tests for both Search page and Feed page.

Week 12

• Finish up pending work, if any.
• Start writing documentation for the project.
• Discuss with mentors about any final changes.

Stretch goals

Add push notifications whenever any major event take place; for example, another user recommends a track to the user, CritiqueBrainz review is posted, ListenBrainz has an announcement, etc.

Detailed Information About Yourself

My name is Jasjeet Singh. I am a sophomore pursuing Bachelors in IT from University Institute of Engineering and Technology, Panjab University, Chandigarh, India.

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

I have my Lenovo Legion 5 Pro, with Ryzen 7 5800H, RTX 3060 and 16 GB of RAM.

When did you first start programming?

I stepped into the coding world with C as my first programming language last year.

What type of music do you listen to? (Please list a series of MBIDs as examples.)

I mostly listen to Punjabi music artists like Arjan Dhillon, Karan Aujla, Sidhu Moose Wala or Tame Impala for some change.

What aspects of the project you’re applying for the interest you the most?

I love Android Development and listening to music, so there’s no better project than ListenBrainz that will keep me engaged and happy.

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

ListenBrainz is my first point of contact with open source and feels really good to be this way.

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

I mostly play with Android Development, hence most of my projects are Android projects. I also have some C projects and some flask projects (which I’m currently learning btw) but they are pretty teensy.

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

I will be providing 40 to 45 hours per week to the project. There may be slight ups and downs due to college exams and other activities.

[akshaaatt]

Thanks a lot for your proposal @Jasjeet!

I would like to clarify a few things before we move ahead with this:

1. We need a way to allow users to search for other users. This would allow them to follow that particular user. Only then, we can proceed with the idea of a feed section. Hence, a search box and the relevant screen for that will be a part of this project.

2. Reviews will be a part of the feed. In order for a user to be able to add a review to a listen, a connection to CritiqueBrainz has to be made prior, like the one made on the website.

3. If we take a look at the options available for the listens card, this is the list.
   

   

Pin this track, Recommend to my followers, Personally recommend, Write a review directly affect the feed and are an integral part of it. These would be considered as a pre-requisite for this project. Also, Open in Spotify has already been mentioned by you in the proposal.

4. Hide, Unhide, Delete, etc are all parts of the feed and would be taken up with the project.

That being said, I would like to point out that this project is not just a UI/UX project which dumps the exisiting feed info of a user from the website to the app.
Our major focus has to be on the accessibility of these features for the feed. For example, last year we had an entire gsoc project which only focused on adding the ability to add reviews on ListenBrainz. But with this project, we are considering that as a pre-requisite.

It is important that we are on the same page about the expectations. Your contributions to the ListenBrainz app have already been so helpful and amazing. Just to be clear, when I think of the Feed project, I imagine it to be complete. Also, this is a long project. Hence, given your caliber and from my understanding, we could cover up the entire Feed with this Summer of Code project.

Feel free to comment and re-work on your proposal with the exact descriptions of the features which will be taken up and those which won’t. I am fine with leaving out certain things that you feel won’t be an adequate part of this project, but we should have that clarified before itself.

Also, looking at your weekly breakdown, it is quite generic and doesn’t mention the features being worked on exaclty. I would like a mention of the exact features/api calls being worked on and which feature will be taken up when. For example, review feature comes before listen track intimation on the feed, etc.

We could also take up push notifications in stretch goals btw, just a suggestion.

Let me know if you have any questions.
Great to see your enthusiasm and dedication to this project. Thank you!

[snaekboi]

Good one Jasjeet :))

[Jasjeet]

Thankyou for the amazing feed-back (pun intented). All the recommendations are duly noted . Just updated the proposal with your analysis in mind.