Let's start to improve the view and the functionality of what I'm calling the waiting room. When we have an upcoming listening party, in this case one that is going to start in about a minute, if we were to click into it, we have this little bug that's happening right now, where we're not necessarily checking, we created the functionality that when I click into this, I want to check when the start time happens and then set the podcast, but we didn't specify if the start time hasn't happened, it automatically is starting to play. So we don't want that. So maybe we can have a waiting room functionality and we can add a chat function later, perhaps, where people who are waiting for this listening party to happen can automatically be accessible.

So maybe we can have a waiting room functionality and we can add a chat function later, perhaps, where people who are waiting for this listening party to happen can automatically be accessible into the waiting room. Another thing that's interesting is if we take a look at a different browser, there's browser policies about auto-playing audio in your application. For example, I was to give this a refresh and say this starts in 14 seconds, if I was to click into it, like we saw in the previous browser, in my ARC browser, it starts playing the podcast. But if I was to click into this, we don't see the podcast starting. We have to basically tell the browser this is allowed to play.

But if I was to click into this, we don't see the podcast starting. We have to basically tell the browser this is allowed to play. So maybe we can add that functionality as well in the waiting room, as well as maybe when you join, if it's already playing, say, Hey, let me click in and I'm ready to start listening. And that functionality is helpful for even in browsers like ARC or Chrome or Brave. For example, if you were to grab the link directly, some browsers and their policies, depending on the user settings, if you access that link directly, it doesn't start playing. I'm using this and I have some cookies from this site, but how can we fix that? And how can we improve the view of the waiting room?

I'm using this and I have some cookies from this site, but how can we fix that? And how can we improve the view of the waiting room? Let's dive in. Okay. I think the first thing that we want to do is set some, like an if statement where we're saying if the listeningParty, maybe the startTime is in the future, then we can show the waiting room. We want to use some of this Alpine state to be accessible in those child components. For example, maybe we want to show a countdown and tell the actual startTime of the episode. And that would be helpful.

For example, maybe we want to show a countdown and tell the actual start time of the episode. And that would be helpful. So we don't have to duplicate any of this data or any of this functionality. So the first thing that we can do is perhaps grab all this data and the init. And what we're going to do is copy this and then move it to this step. What that is doing within AlpineJS is we're saying anything that is in this div now has access to this data. But we need a couple of additional functions and additional maybe data methods within this AlpineJS data. For example, we need to know, is the podcast live?

AlpineJS data. For example, we need to know, is the podcast live? Is the listening party live? So maybe we can set an isLive and we can set that to false by default. Maybe like an isPlaying as well. And this is where we're going to fix that bug. So maybe we can have a button that says if this is not playing, then we can ask the user for permission to play because we don't necessarily want them to press a play button and see it in that way. We just want the audio to be playing.

in that way. We just want the audio to be playing. And of course, we're probably going to later give some controls to the User to be able to adjust volume and maybe see the waveform. But for now, we're just playing it in the backgrounds. An additional one would be like isReady because we might have to say, is the person ready to listen? And this would be helpful for the waiting room. If someone's joined in the waiting room for the 10 minutes up until the podcast is starting to play, we need to tell the browser that they are ready to start playing.

If someone's joined in the waiting room for the 10 minutes up until the podcast is starting to play, we need to tell the browser that they are ready to start playing. So they don't have to click it once the countdown runs out. All right. Now that we have an isPlain, why don't we find some way to initialize this? We can do that with the browser's API. So we can say this.audio. We can say we're adding an event listener for play. And when we're setting this.isPlain is equal to true. And the same thing for pause.

And when we're setting $isPlain is equal to true. And the same thing for $pause. $isPlain is equal to false. That way we have that kind of up to date. We know if the browser has automatically played this for this user. Maybe instead of the checkAndPlayAudio function being together, we can separate this because one, now we need to check for the time until the podcast listening party starts. But then we also want to play the audio at the current elapsed time as well. So maybe we'll erase this for now. And what we want to do is maybe have, we'll say maybe like a checkAndUpdate function.

So maybe we'll erase this for now. And what we want to do is maybe have, we'll say maybe like a checkAndUpdate function where this is where we'll be able to update the countdown. For example, we might have a countdownText that we can then show the user to say when this listening party is about to start. So we can set the time for now and we can set that to Math.floor. And then we're going to have a timeUntilStart and we already are setting the timestamp up here. So we're good to go for that. Now is going to be, again, that Math.floor and date.now is the Unix time in milliseconds.

So we're good to go for that. Now is going to be, again, that math.floor and date.now is the Unix time in milliseconds and this is changing it to seconds. And so here's where we can display countdown text to the user. We can say if timeUntilStart is less than or equal to zero, then we can have an additional check. And we can say if this is not playing, then we will, if it's not playing, but the timeUntilStart is less than zero. We want to set the status to live and we have that variable here. So isLive is false.

We want to set the status to live and we have that variable here. So isLive is false. So what we want to do is say this.isLive is equal to true. And then we can also start to play the audio, but here's where we can also utilize that isReady check. And this is going to be helpful for every single user who joins the page. Similar to if we looked at the functionality of a Twitch or any kind of live streaming video, usually you don't click it and it just automatically plays without any kind of warning or any of your consent as a user. What we really want to create is some sort of consent button.

or any of your consent as a User. What we really want to create is some sort of consent button. So when you join the page, you basically say, yes, I'm ready to join the listening party. So isReady. And we can go ahead and set that another if statement, this isReady, then we'll go ahead and play the audio and we can catch that error here as well. And then if timeUntilStart is less than or equal to zero, we'll do this, but else, and here's where we can set the countdown for the User to display that. And so here's where we can grab the days, hours, minutes, seconds, and put those into the countdown text based off of when the podcast listening party was to start.

And so here's where we can grab the days, hours, minutes, seconds, and put those into the countdown text based off of when the podcast listening party was to start. And we are doing something similar in the dashboard and looks, this is it right here, but we might want to refactor this to be similar because it looks like when we wrote this out, we were using new Date, which uses a millisecond output. And here we're using date::now. So why don't we rewrite this? So instead of the start time to be the ISO string, we'll do something similar that we were doing in our show. And we'll just say that this is the list listening party.

were doing in our show. And we'll just say that this is the list listening party. And we'll set the start time and we'll say that this is timestamp. Okay. And then we can say in the update countdown that we can say the now is Math.floor(Date.now). And then we can set the timeUntilStart, and this is where we'll be similar to what we're doing here in the show section. So we have const timeUntilStart equals this startTime minus now. And now we can copy basically what we're doing here.

So we have const timeUntilStart = this.startTime - now. And now we can copy basically what we're doing here. If timeUntilStart is less than or equal to zero. So if timeUntilStart is less than or equal to zero, we can set the countdownText to started. And this is relevant because we're setting this as live = true. And then we'll set the distance and we'll just erase this or we'll refactor it. So instead of distance, what we're going to be doing is setting the timeUntilStart. And because this is going to be seconds based, we can divide how many seconds are in a day, 86,400.

And because this is going to be seconds based, we can divide how many seconds are in a day, 86,400. And so we can do the same thing here, 36,400 divided by the hour, which is 3,600 seconds and then 86,400. And this does not need parentheses divided by how many seconds are in a minute, which is 60. And then the same thing could be done here. Which is math.floor time until start. Again here would be 86, actually, since we're doing seconds, we don't need 86,400. What we will just do is say that is 60 and we don't have to floor this.

Again here would be 86, actually, since we're doing seconds, we don't need 86,400. What we will just do is say that is 60 and we don't have to floor this. So time until start, 60. Okay, then we have this countdown text. And since we're updating this countdown every 1000 milliseconds, every second, we should be good to go there. So that should be a refactor for the homepage. Let's go ahead and have a check. Party not found on component, that is because we need this listeningParty here. And let's take a look now.

Party not found on component, that is because we need this listening party here. And let's take a look now. No audio party listening party started yet. Looks like we have some sort of error. Let's see if we have any error in the console. Nothing yet. Looks like we have a straight parenthesis. Let's see what that does now. Looks like one more error. We forgot to have, ah yes, the $listeningParty in front of listening party.

Looks like one more error. We forgot to have, ah yes, the $listeningParty in front of listeningParty. Okay, looks like this one is live. Let's change the time in our database just so we can see if the countdown is still working as expected. So we'll change this startTime as well as endTime here. And then refresh the page. Make sure isActive is set to true. And there we go. So now that we refactored this to be a little bit more clean and use similar to code to

And there we go. So now that we refactored this to be a little bit more clean and use similar to code to what we've started to write here, why don't we just grab that code? So what we're doing is grabbing all of this and in our show.blade.php, that's what we want to show for that countdown text.