-
-
Notifications
You must be signed in to change notification settings - Fork 209
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Integrate Apple Music playback into ListenBrainz #2509
Conversation
Removed some console messages Uncommented spotify, youtube and soundcloud made some type changes removed some extra types from musickit.d.ts
I removed some code in last commit but it did not stop preview so adding it again.
Hi! Please update the PR description with the workflow describing how this works, what are the blockers and what parts are pending. @MonkeyDo is reworking the test suite of frontend tests so it might be fine to merge this as is and then the tests could come in a separate PR. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I can't test the music playing because I'm not a premium user, but I have some findings as a non-premium user :p
Hello @vardansaini , what is the status on this PR? |
Hi @MonkeyDo I got super busy with University and some family stuff, I will be back on it as soon as possible. My apologies for the delay! |
Hello @vardansaini! Thanks for updating this PR. We checked the lines you've touched for PEP 8 issues, and found: There are currently no PEP 8 issues detected in this Pull Request. Cheers! 🍻 Comment last updated at 2024-04-18 12:12:28 UTC |
The HTML page we previously had was refactored and now in JS comnponent instead
in the settings/music-services page, requiring a custom method since apple uses a non-standard auth workflow (see previous commits)
+small formatting issues
Note sure why this was added, but it's making the entire test suite fail.
My own review from previous code, now outdated. I adressed all issues from my review
Resolved merge conflicts, deploying to test.LB to ensure I didn't break anything |
Allows enabling/disabling the apple music player
On the music services page, it was showing apple music as connected at all times regardless of the connection status, because it was using the wrong value to determine the connection status
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have tested this PR on test.lb, and have found a couple of issues as discussed on chat. LMK if I can help with anything.
Co-authored-by: Ansh Goyal <[email protected]>
The Apple Music authorization is not an OAuth flow, and we don't use that variable anywhere in the codebase
SOMEHOW adding this perfectly valid bitrate configuration option completely break the MusicKit player in our application, and I have no idea why. Tried in a minimal repro and the option is valid and does not break anything. Don't ask me why, I already lost a day on this trying to figure out why music wasn't playing anymore even though it was working previously.
Otherwise, currently it just skips to the next one automatically
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 🚀
Problem
ListenBrainz currently supports integration with Spotify, but there is a growing demand for integration with other music services. Apple Music is a popular music streaming service, and integrating it into ListenBrainz will provide more options for users to access personalized recommendations.
Solution
Integrating Apple Music into ListenBrainz involves several steps, starting with OAuth configuration on the frontend. The OAuth process facilitates user authentication and access to their Apple Music account. This integration aims to enhance the ListenBrainz experience by allowing users to play music seamlessly from Apple Music through the BrainzPlayer.
htmlCopy code
Developer Token and MusicKit Configuration: To configure MusicKit on the frontend, a developer token needs to be generated on the backend and sent to the frontend. After including the MusicKit library, you can configure the MusicKit instance using the generated developer token:
javascriptCopy code
document.addEventListener('musickitloaded', async function () { try { await MusicKit.configure({ developerToken: 'DEVELOPER-TOKEN', app: { name: 'ListenBrainz', build: 'GIT-COMMIT-SHA', } }); const music = MusicKit.getInstance(); } catch (err) { // Handle configuration error } });
User Authentication and Token Submission: The authorize method provided by MusicKit can be utilized to authenticate the user and gain access to their Apple Music account. Upon successful authorization, the obtained Music-User-Token is sent to the server's callback URL. However, it's important to note that Apple Music does not require a client secret for OAuth; instead, the process is carried out client-side using MusicKit.
Backend Processing: The callback URL endpoint for music services receives the authorization code for other services. In the case of Apple Music, the OAuth process is slightly different due to the absence of a client secret. MusicKit is used to handle authorization client-side, and once the user grants access, the music.authorize().then(musicUserToken => {...}) block is executed. The retrieved Music-User-Token is then submitted to the server at the callback URL.
Storing Token and Storefront: To ensure a seamless experience, the obtained token and the user's storefront (region) should be stored in the database for future use. This data will be crucial for accessing and customizing the user's Apple Music content.
Integrate Apple Music in BrainzPlayer: The BrainzPlayer, which is a web-based music player used in ListenBrainz, can be extended to support Apple Music playback. MusicKit is integrated into the player in a manner similar to its inclusion in the OAuth frontend setup.
Player Controls and Event Handling: Once the BrainzPlayer is loaded with MusicKit, various playback controls like play, pause, etc., can be accessed using the MusicKitInstance. Event callbacks can also be added to respond to changes in playback state through the playbackStateWillChange and playbackStateDidChange events.
User Authorization Check: Before implementing event callbacks, it's essential to verify whether the user has authorized Apple Music. This step ensures that only authorized users can interact with the Apple Music integration in the player.
Track Enqueue and Playback: To play tracks from Apple Music, the MusicKit player allows tracks to be enqueued using the setQueue or playNext method. The Apple Music Identifier of the desired track is used to facilitate playback.
Search and Playback: In cases where a specific track lacks an Apple Music Identifier in the ListenBrainz database, the search API can be employed to retrieve relevant tracks. Subsequently, tracks can be enqueued from the search results into the player for seamless playback within the BrainzPlayer interface.
Action
BEFORE MIDTEM EVAL
Video of integration so far :-
https://github.com/metabrainz/listenbrainz-server/assets/61253200/0851bc57-b9f3-4fda-84e2-7a496376fa9d