Okay, we have all of this data ready to go for us, we just need to make it look a little bit prettier. And one of the quotes that I always love is, make it functional, then make it beautiful. And that's what we're going to do. At least we're going to try to make it beautiful. I'm not the best UI designer, but we can make this look at least very similar to the past designs that we've done within this application. So we have this little section here that's going to be shown when the listening party is live. So why don't we start off with making this very similar to this one, for example.

is live. So why don't we start off with making this very similar to this one, for example. We have this flex of items-center, justify-center, min-height of screen, with a background of emerald-50. So we'll do the exact same thing here. Why don't we also grab this div right here where we have the artwork and listening party name, episode title, and podcast title, because we're going to be reusing most, if not all of this, to show on the live. This is the goal, to make it seem very similar to what the past states of this component have looked like.

This is the goal, to make it seem very similar to what the past states of this component have looked like. So let's go ahead and for now, we'll just go ahead and clear those out. But now we have the listening party, episode title, and podcast title. So why don't we put it on a white card as a next state. So we can have this set to a div

And we'll go ahead and close out this div here. That's starting to look a little good. We need it to be a little bit bigger, and of course, the more stuff that we put in here, the bigger it's going to start to fill. We have audio playing, we just don't have any indication of that, and we don't have a button if for some reason it broke or it wasn't able to be auto-played, for example. So we have this flex-shrink of 0, and actually within here, because we have these two divs within this card div, why don't we add another one where we can set the flex-item-center with some margin-bottom of 6 and a space-x of 4. We'll go ahead and close that out.

with some margin bottom of 6 and a space X of 4. We'll go ahead and close that out. Okay, we can probably boost these fonts up because we were shrinking them in the previous one, so that could be text-sm, text-xs maybe like extra small here. Okay, looking good. Now we actually want to display the audio information. So what we could do is just use CSS to show how far along the audio is. We could get fancy, maybe in the future, we could add this special feature showing like a waveform of the podcast, but for right now, we'll just use some CSS to calculate the start time as well as the total duration of the podcast.

a waveform of the podcast, but for right now, we'll just use some CSS to calculate the start time as well as the total duration of the podcast. We can start with a div, and what we're going to do is only show this when the isLoading is false, because if we look back up here, we are setting isLoading to false when we're initializing this player, and that's also what we're kind of checking for the loaded metadata right here. So when this metadata, in this case, the audio duration, everything like that, is loaded, then we can set isLoading to false. So let's go back down here, div x-show not isLoading, close out that div, a div with a class of flex and we'll do the classic items-center, justify-center, and then we can close

So let's go back down here, div x-show not isLoading, close out that div, a div with a class of flex and we'll do the classic items-center, justify-center, and then we can close that out. Here's where we can actually show the current time of the podcast, what we were doing previously before we're starting to make these changes. So we can set a span with a class of maybe like text-sm and the text of slate-700, and we could say the x-text is going to be formatTime(currentTime). Again, this is what we were doing previously. And then below that, what we could do is set a new div, and we do want this to be like the line where we're showing the duration of the podcast.

And then below that, what we could do is set a new div, and we do want this to be like the line where we're showing the duration of the podcast. So we could set a height of 2, and we could say that this is like rounded-full, maybe even rounded-lg, and we could have the background be emerald-100. So this is before the audio fills up the space, and then inside here, we could have another div of class, and we'll also set this to h-2 with a rounded-lg, and this wouldn't be the background emerald-500 or maybe like 600. We'll do 500 because that's our primary color. And we'll set another div here to close that out. Here's where we can do some of that CSS magic where we're calculating how much of this bar

And we'll set another div here to close that out. Here's where we can do some of that CSS magic where we're calculating how much of this bar is going to be filled up based off of the metadata of the audio that we're loading in our Alpine component. So we can do something like style equals a template literal to say width is, we can do currentTime, actually we would want this as a grouped evaluation, so currentTime divided by audio.duration, and that would be times 100. Let's see what this looks like now. Refresh. Okay, it looks like we're showing something here, but we have some of our styles messed

Refresh. Okay, it looks like we're showing something here, but we have some of our styles messed up a little bit. Let's see. So this div with flex of item and center, and if we unfold this just for a little bit, Okay, yeah, it looks like we don't need this div right here. And it looks like we have one extra div here. Take that out. Let's see what this looks like. Perfect.

Let's see what this looks like. Perfect. Now we have a visual representation of where the podcast is. We have the time that the podcast is elapsed. We could probably make this where this pushes to this side and we have the total time over here. Why don't we do that? Let's fold these classes back up to give a little bit more room. And as we look at this, we have this formatTime here, and because we're flex items justifyCenter, what we could do is maybe like justifyBetween, and then here we could have a separate

And as we look at this, we have this format time here, and because we're flex items justify-center, what we could do is maybe like justify-between, and then here we could have a separate span with a class of text-small, maybe text-slate-700 as well. And this span, we could say php, and then we'll go ahead and close this out. And php, what we really want here is the duration of the podcast in relation to the listening party end time and the start time. So what we could do is the duration is the start time. So listening party's startTime, and then it's in seconds, it would be like diffInSeconds would probably be the best way to calculate it for with the end time. We have minutes, which would be the floor of the duration divided by 60.

seconds would probably be the best way to calculate it for with the end time. We have minutes, which would be the floor of the duration divided by 60. Then we have seconds, and what we could then do instead of echoing that out, we could then display this using the sprintf command. So we could say sprintf, yeah, there we go, to say we want to set in the minutes and seconds based off of our calculation here. That should work. Why don't we also put one more thing after this div, maybe this div is probably the better spot to put it in. Why don't we have a margin-top, we have a button that when we click, we can click, run

spot to put it in. Why don't we have a margin top, we have a button that when we click, we can click, run that join and be ready command, that's to set ready to true and to play the audio. Then what we could do is we can say x-show is if it's not playing, we could probably set ready there if we wanted to. But if it's not playing, then that would be a great way to replay it as well. We could probably cloak this to actually I think we're cloaking the parent, so we should be good there. Let's take a look. So refresh live, okay, we have the total number of minutes and if I was to refresh, join and

Let's take a look. So refresh live, okay, we have the total number of minutes and if I was to refresh, join and be ready. Okay, so we do still have that little flicker, which is a little bit annoying, not the end of the world. So basically what we have now is the ability to see where the podcast is actually playing and we have it being played no matter where you open this up. So since it's setting the time of the podcast duration on the client, we can start playing it and it's basically real time. Everything is starting to come in together.

it and it's basically real time. Everything is starting to come in together. So I think we have a couple more things that we can add and really it comes down to using what we had set up in the first couple of episodes, Laravel Reverb to start having that real time connection and we can send some chat messages as well as some emojis that we might want to react to the podcast in real time with others in the room. So everything's starting to look together. Why don't we finish this up in the next couple of episodes?