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:
-
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.
-
-
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:
-
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
andmax_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 hiderecording_recommendation
andrecording_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.
-
-
Coding
Step by step process of how coding part will go:
-
API calls setup for User Search page with tests.
-
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. -
User Search page UI implementation and performance testing. Mockup (tentative):
-
API calls setup for Feed page with tests.
-
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) andSocialViewModel
(will consist all the reusable drop down calls such as recommend, personally recommend, write a review and more). -
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. -
Creating Compose UI for the feed page.
Workflow:- Implement Basic cards for showcasing various events.
- Integrate Spotify App Remote.
- Create drop-down menu for feed cards and modals for each mini feature.
- Add animations for the cards.
- Performance test the feed composable.
-
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:
POST /1/user/(user_name)/follow
POST /1/user/(user_name)/unfollow
GET /1/user/(user_name)/followers
GET /1/user/(user_name)/following
GET /1/user/(user_name)/similar-users
GET /1/search/users?search_term=<user_name>
-
Setting up dependency injection.
Week 2
-
Implementing Search Page user interface. This includes the following:
- Search Bar with debouncing technique to limit API calls.
- Follow/Following list.
- 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.
- All endpoints except “
-
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:
-
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.
-
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.-
Hidden Card component when a user hides an event.
-
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.