Feed Section in Android App
Contact Details
| Github | rishuriya |
|---|---|
| IRC Username | rishav_a2z |
| Profession Profiles | Profile, Linkedin, |
| Country | India |
| Time Zone | IST(UTC +5:30) |
| Expected working hours | 38 hours/week |
| Preferred Method of Contact & Details | Email: rishavprof@gmail.com |
Code Contributions
Project Proposal
The project aims to develop a feed page in the ListenBrainz-Android application that enables users to view the musical preferences of people they follow, including the songs they have liked and announcements related to their music interests.
The proposed feed page will serve as a centralized location for users to keep track of the musical activities of the people they follow, providing a seamless and personalized experience. The development process will involve implementing features such as a user-friendly interface, personalized recommendations, efficient data retrieval, and seamless integration with ListenBrainz’s existing infrastructure.
The project will not only enhance the user experience but also contribute to the growth and development of the open-source community by making the ListenBrainz-Android application more accessible and intuitive for users. Overall, the project seeks to create an innovative and user-centric feed page that provides users with personalized music recommendations and a platform to connect with other music enthusiasts in the ListenBrainz community.
Deliverables
- Incorporating the Feed feature in the app and a Search option.
- Incorporating a Profile page for the user
- Adding Remote Player Support.
- Listen Submitter
- Additional Support:
- Adding Change in Queue Feature.
- Implementing the Share feature to share songs on Social media platforms.
Goals & Objectives
Problem Overview:
The challenge lies in keeping track of a constantly changing list of songs, news, and favorites while also staying updated with friends’ music preferences. Users often have to switch between different platforms to get all the information they need, leading to a fragmented experience. The need of the hour is to create a centralized music feed that presents all the information on one page and keeps users informed about the latest updates from their friends and favorite artists. The music feed should include real-time updates on friends’ pages, as well as new songs from the artists they follow. By solving this problem, we can provide users with a seamless and personalized music experience. They can easily discover new music, stay informed about the latest trends, and connect with other music enthusiasts in the community.
Solution:
We can implement a clean and simple UI that shows all the updates from your friends who follow their favorite artists. For updates on favorite artists, we can use the Spotify remote app which provides all the necessary updates on new songs. Other things will be incorporated similarly to what we have in the ListenBrainz web version using the APIs provided by the ListenBrainz - Server, DOCs. For adding a feature to get the latest song by the user’s favorite artists, we need to create a model in ListenBrainz-Server for saving the favorite artists list of users and using data and spotify api we can show that in the feed page.
Implementation:
* Feeds
The proposed flow for the Android app involves the following steps:
- User logs into the app and the app requests APIs to fetch data.
- The app checks for the user’s favorite artist list, and if it is empty, the user is prompted to select their favorite artists.
- The selected data is then posted using an API to the model, and the data is fetched again to be displayed on the Feed page.
- On the long press of a card, a dialog box will appear with options such as personally recommend, write a review on CritiqueBrainz, pin, and others.
APIs in use:
- https://api.listenbrainz.org/1/user/(user_name)/feed/events
- https://api.listenbrainz.org/1/feedback/recording-feedback
* For Search Bar
So the flow will be like the above diagram when the user searches for anything it will show results from the ListenBrainz API of the user search and also of the song search from Spotify API, local songs. when the user clicks on the song it will play in brainzPlayer with help of the URI we got through API, now we will play with the function
private fun searchTrack(trackName: String) {
spotifyAppRemote.playerApi
.search(trackName, listOf("track"))
.setResultCallback { if (tracks.isNotEmpty()) {
// We found some tracks matching the search criteria, play the first one
playTrack(tracks.first())
} else {
// No tracks found, handle error
}
}
}
Using the above implementation we get the URI of the song which we will parse and play locally. We can also expand this to make a queue automatically, to play non-stop music.
private fun playSong(trackUri: String) {
spotifyAppRemote.playerApi.play(trackUri).setResultCallback {
// Playback started
}
}
Fig 1 shows how the UI will look after it is developed.
Fig 1: Mockup for Feed
Problem Overview:
Many audiophiles want to flaunt their taste in music. More importantly, it helps you to get found. Users can’t just follow any other user based on username. If they want to follow someone’s taste in music, favorites should have a page that helps them to decide whether the persons taste matches the users taste or not. In that regard, the profile page gives us numerous benefits.
- Increase the interactions in the app.
- More organized data for users.
- User-created Playlists
- Users recently played music
- User’s activity
- Total songs listen(Listenbrainz + Spotify + Youtube Music)
All are available on one page, So the users will able to see them.
- Helpful to incorporate the feature of follow and following as it will help the user to find other users and also to get found
Solution:
We can create a profile page that shows statistics of the user such as favorite music, total songs listen, a public playlist created by the user, posts by the user, total followers, and following with the help of listenBrainz APIs. As of now, the ListenBrainz server can’t store profile images so for that, we can use the API for getting the profile as the initial username. The link of the API.
Fig 2 shows how the UI will look after it is developed.
Fig 2: Mockup for Profile
Problem Overview:
Users sometimes want to search for the music file and play it there, without having to go inside the app. I will implement the feature for playing music from the file manager itself, which will make it convenient for the user.
Solution:
I need to make a new activity for that with new permission in the Android manifest file to get the music directly in the app. Using Activity I will play the song in the File manager itself with just a small player on a screen which helps the user control the music.
Implementation:
#Android Manifest
<activity
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.VIEW"/>
<data android:mimeType="audio/mpeg" android:scheme="file"/>
<category android:name="android.intent.category.DEFAULT"/>
<data android:mimeType="audio/mpeg" android:scheme="content"/>
</intent-filter>
</activity>
Using the above we can get the song URI in the activity. In the activity, we can parse the URI to the song with help of the below code.
@AndroidEntryPoint
class localRemotePlayerActivity: AppCompatActivity(){
lateinit var brainzPlayerViewModel: BrainzPlayerViewModel
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent() {
val intent = intent
val uri = intent.data
if (uri != null) {
var data = parseSongFromUri(this, uri)
var SongList= mutableListOf<Song>(data)
}
}
}
}
With this pseudo code, I get the URI in activity, and with help of MediaStore, contentResolver the URI will be converted to the song. To play it locally, I can Use android.media.MediaPlayer which will not affect the user queue.
Fig 3 shows how the UI will look after it is developed.
Fig 3: Mockup for remote player
Problem Overview:
Users listen to songs from Spotify and youtube, and they want to see all the songs they listen to over a while, to know the total number of songs they listen and see what songs they listen to from different platforms it is difficult to go and see history of different platform. So to fix that issue we can make a listen submitter in the app to get the history of the user from Spotify and youtube and show their history of jamming on musical notes in one place.
Solution:
To solve this problem, you can implement the following steps:
- Allow users to log in to their Spotify and YouTube accounts through your app.
- Retrieve the user’s listening history from each platform.
- Display the listening history to the user in a UI that allows them to select which tracks they want to submit to ListenBrainz. For example, you could display a list of tracks with checkboxes next to each one, allowing the user to select or deselect tracks as needed.
- Allow the user to submit the selected tracks to ListenBrainz.
Implementation:
- Implement OAuth2 authentication for Spotify and YouTube in your app. This will allow users to log in to their accounts and grant your app permission to access their listening history.
val gso = GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
.requestEmail()
.requestIdToken(getString(R.string.server_client_id))
.build()
val googleSignInClient = GoogleSignIn.getClient(this, gso)
// Start the sign-in flow when the user clicks a sign-in button
signInButton.setOnClickListener {
val signInIntent = googleSignInClient.signInIntent
startActivityForResult(signInIntent, RC_SIGN_IN)
}
private fun handleSignInResult(task: Task<GoogleSignInAccount>) {
try {
val account = task.getResult(ApiException::class.java)
val email = account?.email
val idToken = account?.idToken
val tokenResponse = Fuel.post("https://oauth2.googleapis.com/token")
.body(
"grant_type=urn%3Aietf%3Aparams%3Aoauth%3Agrant-type%3Ajwt-bearer" +
"&assertion=${URLEncoder.encode(idToken, "UTF-8")}"
)
.responseString()
.third.get()
val accessToken = JSONObject(tokenResponse)["access_token"].toString()
val youtubeResponse = Fuel.get("https://www.googleapis.com/youtube/v3/activities")
.header("Authorization", "Bearer $accessToken")
.header("Accept", "application/json")
.responseString()
.third.get()
val youtubeData = JSONObject(youtubeResponse)
// Process the YouTube data as needed
// ...
} catch (e: ApiException) {
Log.e(TAG, "Failed to sign in: ${e.statusCode}")
}
}
From this we can get successfully did Oauth2 for google to take youtube history.
- Retrieve the user’s listening history from each platform using their respective APIs. For example, you can use the Spotify Web API to retrieve the user’s recently played tracks, and the YouTube Data API to retrieve their watch history.
val api = SpotifyAppRemote.getInstance().spotifyApi
api?.let { spotifyApi ->
spotifyApi
.browse
.getRecentlyPlayed(20, 0)
.setResultCallback { result ->
// handle the result
val items = result.items
// do something with the list of recently played tracks
}
}
Using this code we can successfully retrieve the history from Spotify listen and show it on the submitter page.
- Display the listening history to the user in a UI that allows them to refine the history before submitting it to ListenBrainz. You can use a RecyclerView or ListView to display the list of tracks and add checkboxes next to each item to allow the user to select or deselect tracks.
- When the user has made their selections, allow them to submit the selected tracks to ListenBrainz. You can use the ListenBrainz API to submit the tracks.
- Change in Queue: Right now the queue system is rigid, users are only able to remove the song from the list. By using a draggable modifier I can implement a feature that releases the card and accordingly change the queue. I already added a feature to add, and remove the song from the queue. For changing the order of the queue we need to use a draggable modifier and change the index of items together.
- Share songs on social media: Users can flaunt the song they are listening to on their social media with this feature. This also helps in advertising the ListenBrainz app. We can achieve this using the intent and share the song with help of the URI/URL of the song.
| Timeline | |
|---|---|
| Every Week Status Updates: |
- Discuss the status of the project with my mentors and the community members and get their suggestions and make sure everything is going well from all aspects.
Every Two Weeks Blogs: - Write a blog on the new features that are added and the approach that was followed to add that new features.|
| Pre-Community bonding period |
|---|
| 7 Apr - 3 May |
- Implement the Additional Features.
- Add the feature to change the queue.
- Incorporate a feature to share songs.
- Create the Model and APIs for the favorite artists in ListenBrainz-Server
| Community bonding period |
|---|
| 4 May- 25 May (Week 1- Week 3) |
- Get to know more about the community by exploring project documentation, forums, and online events.
- Interact with Mentors and other community members, This can help establish relationships and build trust with the community and get to know about their coding standards.
- Fix or implement a feature to get to know more about the codebase
- Create the Figma design for the feed Page
- Get feedback and review on the Figma design
- Research and gather requirements for the profile page
- Create a Figma design for the profile page
- Get feedback and review on the Figma design
- Get feedback and review on the Figma design of remote Player
| Official coding period begins |
|---|
| 26 May- 15 June (Week 4 - Week 6) |
- Implement the static version of the Feed Page
- Implement Feature to create posts when:-
- User likes any song
- Follow Anyone
- Share any song
- Artist release new song
- Organization make any announcement
in the feed
| 16 June-29 June (Week 7 - Week 8) |
|---|
- Implement the static version of the profile page
- Integrate all components with dynamic data
| 30 June - 6 July (Week 9) |
|---|
- Implement the search functionality to retrieve user profiles that match the search query
- Implement the ability to follow/unfollow other users.
| 7 July - 10 July (Week 10) |
|---|
- Finish the pending work (if any)
- Refactor code as necessary
| First evaluation period(10 July - 14 July) |
|---|
| 14 July - 20 July (Week 11) |
|---|
- Implement the Local remote-player feature
| 21 July- 2 August (Week 12 - Week 13) |
|---|
- Create the Oauth2 authentication from google and Spotify and get all recently listens in the time frame of 30 min
- To create the UI to select listens, and add functionality.
| 3 August - 10 August (Week 14) |
|---|
- Write the unit tests and shared tests for the Feed page, remote player, and profile Page
| 11 August - 17 August (Week 15) |
|---|
- To Complete the Pending Work (If any)
| 18 August - 20 August (Week 16) |
|---|
- Test all the implemented feature and fix bugs (if any)
- Refactor code as necessary
| Final Evaluation Period |
|---|
Timeline
Detailed Information About Yourself
My name is Rishav Kumar and I am a student hailing from Bihar, one of the states in the eastern part of India. Currently, I am pursuing a Bachelor’s degree in Technology in Electrical and Electronic Engineering from Amrita Vishwa Vidyapeetham, Amritapuri campus, located in the state of Kerala in the southern part of India.
Apart from my academic pursuits, I am also a member of the amFOSS community, a renowned open-source student community at Amrita Vishwa Vidyapeetham. amFOSS is known for promoting the spirit of open-source software and fostering a culture of collaboration and innovation among students. As a member of amFOSS, I get to work on exciting projects, participate in hackathons and coding competitions, and attend workshops and talks on emerging technologies.
Tell us about the computer(s) you have available for working on your SoC project!
I have got HP pavilion 14, intel core i5 11th gen, 8GB ram with 16GB swap memory. I currently working on Manjaro-Linux.
When did you first start programming?
I started programming in class 9 with basic C programming and in my journey of learning, I learned Java and Python till class 12. After that, during the lockdown period, I started with the development. I have the basic knowledge of HTML from class 8 and also win the prize for making a static website for my school. In lockdown, I learned the php and applied it to a school website whose link is provided in the project’s question. After taking admitted to the university, and entering the group of the most elite developer of the university I learned a lot of stuff over the past 1.5 years due to club projects and client projects. After coming to the club I was introduced to Django, React, and Flutter. In club projects, I started working on the CMS mobile app which has a huge code base and is maintained since 2018 which give me knowledge of open-source contribution.
What type of music do you listen to? (Please list a series of MBIDs as examples.)
I mostly listen to old Bollywood songs of artists like Lata Mangeshkar, Mukesh, and Kishore Kumar, and my current favorite is Ankhiyon ke jharokhon se
What aspects of the project you’re applying for that interest you the most?
I am passionate about Android Development! As a member of the open-source community amFOSS and an advocate of free and open data and my interests are aligned with Metabrainz to make music free and accessible. The ListenBrainz is an opportunity for me to contribute to this purpose.
Have you contributed to other Open Source projects? If so, which projects, and can we see some of your code?
I contributed to Wikimedia and created a new project for them and maintaining it, The project is a statistic tool for Wikimedia that scrap the raw data from the dataset, filter, and generate data every month using cron according to need as the data are not accurate due to the security reason. And show it on the react Page. For this project, I worked with one of my colleagues from my community. The project has the tech stack of Django as the backend, and RestApi and React as the frontend.
What sorts of programming projects have you done on your own time?
When I started development, I started web development with PHP
- I worked on a school website which is still in use. It is made with the tech stack of PHP.
- The repo of the School website
- I also made a social media website that has features to post images, and blogs and make friends online(follow each other).
- This is the Repo of social media platform,
After that, I dive into the realm of mobile development Flutter.
- I made a fully functional app that solves the problem of courier handling in the college and the courier department can use it to reduce the loss of packages. The repo of mail delivery app, This app has an inbuilt feature to notify the student based on their roll no that their parcel is collected by the courier department and generate a ticket on the student side by which he will able to collect the parcel by showing it to mail department.
- We hosted a mega event for Hacktoberfest and also a workshop on open source. For that huge event, I made the solution to keep track of the attendance of attendees. In this, we have all the data of attendees in the Django backend, with the help of data we made the dynamic QR code using react and send an email as the pass to all attendees. The app enables us to verify the QR code and keep track of all attendees in each event based on the time. The repo of Attendance Tracker
- I also worked with India`s Best Hacking Team, BI0S. I made a flutter app for them as a question for their CTF. The repo is here
After that, I dived into the projects of web development based on React and Django
- Along with 2 other team members, I made a webpage for one of the departments of our college CIR whose main focus is to ease the work of students in getting leave applications and permission to go for an internship. The site is hosted on this and the repo is here.
- I worked with Amrita hospital Faridabad to create a system to manage and maintain the Inventory. It also automatically raises tickets for maintenance of item after a specific period and assign the ticket to a specific department. apart from that, with the help of an app made by the APIs of this system, it provides accessibility to patients, and their families to complain about any non-working component just by scanning the specific QR code in the room, Of which they can keep track of the status of the complaint. The System is in the Testing phase by the hospital and the project is not open source, so I can’t provide the code for that.
I also participated in a few hackathons. One of them was the NASA space challenge. For that, I worked with my team to create a web application tool for scientific image editing. We have the dataset of JUNO cam which we need to refactor and get scientific data and also clear the image. For that, we worked with pyqt for the front end, and using the openCV package we did the image processing. The repo of the project is this.
How much time are you available, and how would you plan to use it?
I will commit to providing 35-40 hours of work per week. I have made a detailed timeline of how I am going to utilize this time efficiently.