Demo: Music Player

This week, we'll be practicing more MVVM abstractions and UIEvents.

This app starts at the MiniPlayerScreen. When we click on the MiniPlayerCard, we are taken to LoadingScreen. There's a slight delay as our next screen "loads" before the app navigates there.

Screen 1

Screen 3

Screen 2

Download the starter code:

118KB

demo5_starter.zip

archive

Part 1: Implement LaunchedEffects for Navigation

Remember that LaunchedEffects define a function that will be called when a certain value changes (the 'certain value' that we want LaunchedEffect to keep an eye on here is navigateEvent).

In LoadingScreen.kt, you'll see that there's already a LaunchedEffect. You'll need to make the first LaunchedEffect before that, which actually does the navigation.

1. The first LaunchedEffect will listen for a navigation event and perform the navigation.

2. The second LaunchedEffect starts the process (detailed in the function call) that will eventually produce the navigation event.

LaunchedEffect syntax can be a little tricky so here's a hint!

LaunchedEffect(__________) {
    _________?.consumeSuspend { destination ->
        __//navigate to destination______________
    }
}

Once you've correctly implemented the LaunchedEffect, clicking on the MiniPlayerCard should take you to the LoadingScreen and then the PlayerCardScreen after a short delay.

Part 2: Make the PlayerCard a dumb component

Currently, the PlayerCard component is managing its own states (its values change base on mutable states). We want it to have the same functionality as the MiniPlayerCard and practice keeping components dumb, so we want to let the ViewModel handle all of the logic.

1. Take a look at the PlayerScreen.kt. This is where the PlayerCard is called. Notice that right now, the PlayerCard takes no arguments.

2. To make it dynamic, we'll start by updating the arguments that PlayerCard needs to take: title, artist, isPlaying, progress, onPlayPauseClicked

   1. Try to figure out the types on your own! title and artist are just Strings.

3. Fix the error that occurs in the IconButton before moving on

   1. Hint: use one of our newly defined arguments.

4. Update the PlayerCard call in PlayerScreen(). You'll need to get the data from the ViewModel. Here's an example of how to do that.

   1. Hint: use MiniPlayerCard as a reference!

val currentSong by viewModel.currentSong.collectAsState()

1. Once this is all set up, you should be able to run the emulator and see the PlayerCard changing progressing through and changing songs!