Actor Model Solution

[00:00:00]
>> All right, so let's make our app come alive with actors. So we are going to go to lesson 9 actors and make this actually work. So we have to do a couple things. First we have to invoke a promise. And so this is going to be that invoke syntax, where we have invoke, we specify in a source.

[00:00:28]
And so that source is going to be something that returns this loadSong. And actually, we could just have this be loadSong just because it's the same thing as doing this. But yeah, we'll just keep it as this. And so when this loadSong is done, then we want to transition to the ready.hist target.

[00:00:57]
And we also wants to assign that song data. So that's going to be if we remember we have this assignSongData right over here, so, we are going to assignSongData. Now let's see if this works. Well looks like it does work. So when I reload after a second, it gives us a random song with a random duration.

[00:01:25]
But this isn't quite working yet. So now let's add that, we're done with this. And now we want to invoke in this ready state, we are going to invoke the audio callback. So, I'm going to give this an idea of audio just so that we can send events to it.

[00:01:48]
And we're also going to give it a source of this invokeAudioCallback, which already has this part here for taking in the context and the events. So, we could use it directly. InvokeAudio, and this is not going to take onDone or onError or anything like that, just because this is a continuous thing.

[00:02:14]
And something to mention here too, in this audio callback, we're receiving an event and doing something based on whether we receive a play or pause event from the machine. But, it's also good to do some cleanup. And I want to just make sure that the cleanup function is being called.

[00:02:33]
So I'm just going to pretend that this disposes of the event listener here and does any other things that we need to do to clean it up. All right, so now that should be working. So when I press PLAY and PAUSE, nothing's happening quite yet. And the reason is because we have this, yeah, we have to assign the time.

[00:03:03]
And actually, it should be sending that assign time over there. So let's just make sure that that's working. Yep, we have sent back audio.time. And that's because right now, nothing is playing. We haven't sent that play event to the audio and so we need to just hook those up and then everything should work.

[00:03:28]
So we are going to send, make sure we have the send function, yes. Okay, so we're going to send the play event and we're gonna send it to the audio and we're gonna just specify the ID of that. And so we're gonna be doing the same with PAUSE.

[00:03:52]
So again, we are specifying that the playAudio action sends the play event to the audio, the pauseAudio action sends the pause event to the audio. So let's try it out. We're paused right now. If we play, you see this is actually counting down. And so this is working.

[00:04:11]
Now if we pause, it pauses because it's telling the audio to pause. So it's going to do the right thing and not send it any time update events. Now check this out, if I skip a song notice how the cleanup function is called. And the cleanup function is called because we are going out of the of the ready states.

[00:04:38]
And so this invokeAudio is going to be disposed and so when it's disposed, the dispose function gets called. And it's no longer active when it's outside of the ready state. So we load the next song, and then we start invoking the audio again. So you see even while it's playing, We're going to skip the song.

[00:05:07]
I'm logging way too many things, so I skipped the song. It does the clean up and then it's going to go to the next song and do our previous behavior of having those history states in there. So now this is a fully functional media player. We could even click here to dislike the song and then go to the next song.

[00:05:27]
And we could of course toggle the volume on and off, just like we've done with our parallel states.