MOBILE-212: Highlight current playing song & dynamic PlayButton #518

Shreyassp002 · 2024-12-28T18:28:35Z

This PR focuses on highlighting the title of the currently playing song and changing the icon in BrainzPlayerListenCard.

Changes:

Added a visual highlight to the title of the song currently playing in the list.
Added logic to match the currentlyPlayingTitle with the title passed to the BrainzPlayerListenCard composable. If they match, the title color will be changed; otherwise, it uses the default text color from the theme.
Added animated Play/Pause Icon transition in BrainzPlayerListenCard
Also made some formatting fixes for better code readability.

Screenshots:

Issue Link: MOBILE-212

This is the current implementation of feature. I’d love to hear your feedback or suggestions for improvement.

Shreyassp002 · 2024-12-29T13:14:40Z

Changed highlight color
Once the color is confirmed, I will add to Color.kt (Temporarily hardcoded)

Screenshots:

Let me know if any changes are required.

Shreyassp002 · 2024-12-29T15:01:49Z

Added animated Play/Pause Icon transition in BrainzPlayerListenCard

Updated the PlayButton composable to use AnimatedContent for animating the icon transition.
Added fade-in and fade-out effects to the play/pause icon transition.
Ensured the play/pause icon synchronizes correctly with the song's playing state.

Screenshot:

07jasjeet · 2025-01-04T06:38:22Z

app/src/main/java/org/listenbrainz/android/viewmodel/BrainzPlayerViewModel.kt


    init {
        updatePlayerPosition()
+        viewModelScope.launch(Dispatchers.IO) {
+            brainzPlayerServiceConnection.currentPlayingSong.collectLatest { song ->


no need to collect the flow and emit to another flow.

val currentlyPlayingTitle = brainzPlayerServiceConnection.currentPlayingSong.map { it.title }

Also, rather than just flowing the title here, can we do brainzPlayerServiceConnection.currentPlayingSong only and use title wherever needed.

Yeah, that’s better.
Removing the redundant flow.

07jasjeet · 2025-01-04T06:43:55Z

app/src/main/java/org/listenbrainz/android/viewmodel/BrainzPlayerViewModel.kt

@@ -172,6 +179,7 @@ class BrainzPlayerViewModel @Inject constructor(
            viewModelScope.launch { songRepository.updateSong(mediaItem) }
            brainzPlayerServiceConnection.transportControls.playFromMediaId(mediaItem.mediaID.toString(), null)
        }
+        _currentlyPlayingTitle.value = mediaItem.title


no need to emit here, service connection should automatically update the above flow. If not, it would be a bug for BP Service connection that would need to be resolved.

07jasjeet · 2025-01-04T06:45:20Z

app/src/main/java/org/listenbrainz/android/ui/components/BrainzPlayerListenCard.kt

 ) {
+    val isPlaying by viewModel.isPlaying.collectAsState()
+    val currentlyPlayingTitle by viewModel.currentlyPlayingTitle.collectAsState()
+    val titleColor = if (currentlyPlayingTitle == title) {


Have you tried using some ID of sorts like mediaID of a song? That would be a better candidate for this kind of use case.

Yes, I tried to match the currentlyPlayingSong.id with the mediaId passed to the BrainzPlayerListenCard from SongsOverviewScreen, but that didn't work out.

wait I figured out a way to use mediaId instead of the Title

07jasjeet · 2025-01-04T06:46:25Z

app/src/main/java/org/listenbrainz/android/ui/components/BrainzPlayerListenCard.kt

+    val isPlaying by viewModel.isPlaying.collectAsState()
+    val currentlyPlayingTitle by viewModel.currentlyPlayingTitle.collectAsState()
+    val titleColor = if (currentlyPlayingTitle == title) {
+        Color(0xFFB94FE5)


Use ListenBrainzTheme.colorScheme.signatureInverse maybe or is it not legible enough?

If I’m not wrong, lbSignatureInverse uses lb_orange, but Aerozol asked for a combination of blue and violet. Please suggest any combination or shade you’d like.

07jasjeet · 2025-01-11T14:40:56Z

Hey @Shreyassp002, I tried this on my device and the song is only highlighted on songs screen inside brainzplayer. Also, there seems to be much more improvements being tackled in this PR itself which are not polished and need more work. Implementing these features all over the app would be blow out the scope of this PR. Can we make this work just inside brainzplayer tab?

Here's the following that needs to done inside Brainzplayer tab:

BP Dropdown on every screen in BP tab.
Remove the dynamic play button and play the song on when the card is clicked itself.
Highlight the listen card via shading the background with BrainzPlayerViewModel.playerBackgroundColor created by @GautamCoder4019k
Highlight currently playing song on every screen in BP tab.

This feels like a huge task, we can split these into 3 PRs:
PR 1: Point 1
PR 2: Point 2
PR 3: Point 3 and 4

As for this PR, You can use this PR as a base branch for your other 3 PRs and we can close this one, or we you can complete any one of the task in this PR itself.

Edit: Drop dynamic play button and play the song on when the card is clicked.

Shreyassp002 · 2025-01-12T09:43:36Z

Hey @07jasjeet,
Thank you for the detailed feedback! I have a couple of questions before proceeding:

Regarding point 1, "BP Dropdown on every screen in BP tab," could you clarify exactly what this means? Are you referring to the song selection dropdown or something else?
Should I remove the play button completely from BrainzPlayerListenCard, or should it remain as it was before?
I understand your concern about scope creep in this PR. I’ll split the tasks as suggested:
- I can handle point 2 (removing the dynamic play button and playing the song when the BrainzPlayerListenCard is clicked) in this PR.
- Then, I’ll create two more PRs for points 1, 3, and 4 accordingly.

07jasjeet · 2025-01-21T16:43:59Z

Hey @07jasjeet,
Thank you for the detailed feedback! I have a couple of questions before proceeding:

Regarding point 1, "BP Dropdown on every screen in BP tab," could you clarify exactly what this means? Are you referring to the song selection dropdown or something else?

Should I remove the play button completely from BrainzPlayerListenCard, or should it remain as it was before?

I understand your concern about scope creep in this PR. I’ll split the tasks as suggested:

I can handle point 2 (removing the dynamic play button and playing the song when the BrainzPlayerListenCard is clicked) in this PR.

Then, I’ll create two more PRs for points 1, 3, and 4 accordingly.

Currently, BP dropdown is not implemented on the albums tab and songs tab. For the songs tab, the implementation should be as recents tab, i.e., normal BP dropdown. As for albums, the page is messed up itself, and songs are displayed as albums. Let's remove the dropdown from every item in the tab.
Remove the button from UI.
Great.

Shreyassp002 added 4 commits December 28, 2024 22:25

Feat: Highlight currently playing song title

1520e35

Fix: formatting and cleanup

6fc656c

Merge remote-tracking branch 'origin/main' into Feat-Songs-List

64170f2

Fix: Changed color as per the instruction

900e9d6

Feat: Change Icon for currently playing song

d7f837e

Shreyassp002 changed the title ~~MOBILE-212: Highlight current playing song in song list~~ MOBILE-212: Highlight current playing song & dynamic PlayButton Jan 1, 2025

07jasjeet requested changes Jan 4, 2025

View reviewed changes

Shreyassp002 and others added 4 commits January 7, 2025 23:24

Made requested changes except color

d1e6863

Fix: Used mediaId instead of currentlyPlayingTitle

c22b694

Merge branch 'main' into Feat-Songs-List

41c623d

minor adjustments to mini player

1b212ce

Shreyassp002 mentioned this pull request Jan 12, 2025

Feat: Dropdown songs card for AlbumsOverViewScreen & ArtistsOverviewScreen #523

Draft

Shreyassp002 added 3 commits January 20, 2025 22:58

Merge branch 'metabrainz:main' into Feat-Songs-List

9748d8e

Implemented touch-to-play functionality for the BrainzPlayerListenCard

f85ff90

Fix: Padding issue

39472b5

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MOBILE-212: Highlight current playing song & dynamic PlayButton #518

MOBILE-212: Highlight current playing song & dynamic PlayButton #518

Shreyassp002 commented Dec 28, 2024 •

edited

Loading

Shreyassp002 commented Dec 29, 2024 •

edited

Loading

Shreyassp002 commented Dec 29, 2024

07jasjeet Jan 4, 2025

Shreyassp002 Jan 6, 2025

07jasjeet Jan 4, 2025

07jasjeet Jan 4, 2025

Shreyassp002 Jan 6, 2025 •

edited

Loading

Shreyassp002 Jan 8, 2025

07jasjeet Jan 4, 2025

Shreyassp002 Jan 6, 2025

07jasjeet commented Jan 11, 2025 •

edited

Loading

Shreyassp002 commented Jan 12, 2025

07jasjeet commented Jan 21, 2025 •

edited

Loading

MOBILE-212: Highlight current playing song & dynamic PlayButton #518

Are you sure you want to change the base?

MOBILE-212: Highlight current playing song & dynamic PlayButton #518

Conversation

Shreyassp002 commented Dec 28, 2024 • edited Loading

Shreyassp002 commented Dec 29, 2024 • edited Loading

Shreyassp002 commented Dec 29, 2024

07jasjeet Jan 4, 2025

Choose a reason for hiding this comment

Shreyassp002 Jan 6, 2025

Choose a reason for hiding this comment

07jasjeet Jan 4, 2025

Choose a reason for hiding this comment

07jasjeet Jan 4, 2025

Choose a reason for hiding this comment

Shreyassp002 Jan 6, 2025 • edited Loading

Choose a reason for hiding this comment

Shreyassp002 Jan 8, 2025

Choose a reason for hiding this comment

07jasjeet Jan 4, 2025

Choose a reason for hiding this comment

Shreyassp002 Jan 6, 2025

Choose a reason for hiding this comment

07jasjeet commented Jan 11, 2025 • edited Loading

Shreyassp002 commented Jan 12, 2025

07jasjeet commented Jan 21, 2025 • edited Loading

Shreyassp002 commented Dec 28, 2024 •

edited

Loading

Shreyassp002 commented Dec 29, 2024 •

edited

Loading

Shreyassp002 Jan 6, 2025 •

edited

Loading

07jasjeet commented Jan 11, 2025 •

edited

Loading

07jasjeet commented Jan 21, 2025 •

edited

Loading