Okay, and now we can set up a playAudio function. This is where we want to actually play the audio basically when that button is clicked as well as when the page is joined and they say that they are ready. So we can say, here's where we can also say the same now setting, so const now equals Math.floor and here's where we can do that elapsedTime. This is going to be where we previously had the check and playAudio function. Now we're splitting this up into this check and update as well as this playAudio so we can set up the elapsedTime and this is where we're going to have Math.max. We'll set that to zero and then now minus this startTimestamp. This audio.currentTime is equal to the elapsedTime, so this is where we're setting.

We'll set that to zero and then now minus this start timestamp. This audio.currentTime is equal to the elapsedTime, so this is where we're setting that play head to where we need, and then this audio.play() and here's where we can catch that error. And if we were to set this into its own function, what we could then do is set the console.log and then we can also set this isPlaying to false as well. The formatTime still looks good, but why don't we have one more function that we want to call with that button and that's that aspect of when we join the listening party, we want to say, hey, I'm ready so that the audio will start playing right away. So why don't we set a, perhaps we'll call this like a joinReady function.

to say, hey, I'm ready so that the audio will start playing right away. So why don't we set a, perhaps we'll call this like a joinReady function. We do have this isReady, so we can say join and isReady. That might be an option or just isReady, but we'll say join and isReady. So we'll set this isReady to true and then what we really want to do is we don't necessarily want the audio to play, but we want to get around those browser policies where the user is saying, I am ready to play whatever audio is coming. So what we can do is just play and then stop it immediately. That way the browser knows this person has already interacted with the page. Or just interact with the browser API directly.

That way the browser knows this person has already interacted with the page. Or just interact with the browser API directly. So we can say this.audio.play and we can say then, and this is a callback function that we can have and what we can do is say this.audio.pause and then we'll say this.error and then we can do a callback function here where we'll say console.error and we'll set this.isPlaying to false. So all that looks good to go. Why don't we start displaying that as well? So now since we have that data in the div, we can use the x-show to show the countdown with a specific card.

So now since we have that data in the div, we can use the x-show to show the countdown with a specific card. So we might hide this. For example, we would say this may be like x-show is equal to isLive. So only this would show when the episode is live. In this case, if we were to go back, click into this, we're not seeing anything because it's not live yet. So we've effectively hidden this within alpine's show directive. Now why don't we take everything in here? We'll take like this avatar.

Now why don't we take everything in here? We'll take like this avatar. Maybe we will push that into here. So we have the audio. Actually we want to push this audio outside of this div. So we'll grab that there and then we can grab this avatar because we need a second div that's going to be the x-show of is it not live. This is where we can set that podcast listening party information to show the User while they're in the waiting room. So we can set this as a class of flex item-center, maybe justify-center with the min.

in the waiting room. So we can set this as a class of flex item-center, maybe justify-center with the min-height of screen. And we can say the background emerald-50 that we have. Okay. That looks probably look pretty good. And why don't we just go ahead and show the countdown text here. So the show will start in, and then we have the span of X text, which is countdown text here. And why don't we also set a div with a class of maybe like width-full max-width to 2xl.

here. And why don't we also set a div with a class of maybe like width, full max width to Excel. We can go shadow large and rounded large with the background of white, maybe some padding like it says there. We can loop that in here and to close this out here, what we can do here is put it in a new paragraph and we can say class equals text-slate-900 and we'll wrap that there. Okay. So we'll start and it looks like that's not showing, see if we have any errors here. Check and playAudio is not a function. That's probably because we changed it.

Check and play audio is not a function. That's probably because we changed it. So let's see, we have checkAndPlayAudio. Now we just want the checkAndUpdate method here. So checkAndUpdate, that should be good. So let's start displaying a little bit more information. We're going to grab the podcast artwork from here and we can even grab all of this and we'll just get the things that we don't need. If we were to grab this entire div, this is just that information there. Let's go ahead and place it here.

If we were to grab this entire div, this is just that information there. Let's go ahead and place it here. So this div, we'll put that in here. Of course, we'll get rid of all of this X data here and the init and we don't need this show here because we're not actually showing any live badges. See what that looks like for now. Okay. And that's coming together a little bit. Maybe we can show the countdown text over here to say like when this will start. So maybe if we're class of flex and we can say a div with the class of flex and justify.

Maybe we can show the countdown text over here to say like when this will start. So maybe if we're class of flex and we can say a div with the class of flex and justify between here. So that way we have one div and we have two div where we can say this would be the countdown. Not quite. Let's see. And we'll say flex justify between with full. There we go. That's a little bit better. And we'll say items center.

That's a little bit better. And we'll say items-center. Awesome. And here's where we can display that countdown information. We'll set this to be a paragraph with a class of text-slate-700 starts in with the span x-text. It's looking pretty good. Why don't we bump this up? So text-lg and font-bold now I'm liking it. Now why don't we have a button that's centered underneath this that shows that you are ready.

So text large and font bolder now I'm liking it. Now why don't we have a button that's centered underneath this that shows that you are ready to join because we already set this up in our code. We have this join and beReady function that we can go ahead and call. So we have this flexItems here under that flexItems. We have a button and maybe we'll just say that this is the X button. And we can set it to a class of withFull. We'll just say join and beReady. Let's see what that looks like. We'll set a marginTop of 8.

Let's see what that looks like. We'll set a margin top of 8. Maybe. Yeah, I'm liking how that looks. And now we can link to that function with the @click directive for any Alpine function. So that's @click equals. We said that this was the joinAndBeReady function. Now maybe we want some kind of initialization saying, hey, the User has clicked this button. You only want to show this button if we can say x-show equals !isReady. Yeah, then in here we can maybe set a second.

You only want to show this button if we can say X dash show equals not is ready. Yeah, then in here we can maybe set a second. We'll say like a h2 of X dash show is ready and we can say ready to start the audio will play on Mac when we countdown. That's some poor text. But we'll say ready to start the audio party. Let's see what this looks like. Click in, join and be ready, ready to start the audio party. We can set this class to text-center and maybe like text. We can do text-large, but maybe we'll do text-serif and instead of text-green, we'll do.

We can set this class to text-center and maybe like text. We can do text-large, but maybe we'll do text-serif and instead of text-green, we'll do slate-900 and or font-serif, I should say, instead of text-serif. So font-serif and we'll do, we'll be tracking it

Ready to start the audio party. We had a MT of eight here. Let's do that here as well. There we go. It looks like we're not bringing the serif font that we have on the front page. So why don't we go ahead and set that up as well? So we had in our home.blade.php, this link. So why don't we grab that and we'll grab the title too. So in our layout.app, that's the components.app we had previously set up. We can put those fonts in there.

So in our layout app, that's the components app we had previously set up. We can put those fonts in there. So now when we join and be ready, we're ready to start the audio party. We can say something like in the show, we can say something like stay tuned and maybe the heart emoji that we're using in our logo for lack better words. I like this. Why don't we test this out? So what we can do is create a new ListeningParty, new and test. Grab that podcast feed. We'll set a start time, create, we'll update this here in a little bit, but as this creates,

Grab that podcast feed. We'll set a start time, create, we'll update this here in a little bit, but as this creates, we now see this time, it looks like it's not initiating right from the get go. So we'll have to set that up. If we refresh, we automatically get that instantiate, so we'll have to set that up. But in one minute and 27 seconds, we should see this ready to play. So if we click join and be ready, we are now ready to go. So fast forward one minute and 20 seconds. And it started playing immediately because we clicked that join and be ready button, which is what we set up in our code right up here, join and be ready.

And it started playing immediately because we clicked that join and beReady button, which is what we set up in our code right up here, join and beReady. So now we can add that same button or the same button functionality for when you were to click into a listeningParty. And some browsers allow you to automatically start playing it if you have came from the same page, the same source, the URL source. So in this case, why don't we change this to try to automatically play, but we'll have a button shown here just in case it can't. So in the checkAndUpdate function set, this is live equals to true. And then we can clear this out because we really just want, if this is not playing,

So in the check and update function set, this is live equals to true. And then we can clear this out because we really just want, if this is not playing, to try to play the audio because we have fallbacks for that. Now that we have that functionality, so we can just say this.audio or this.playAudio because we already have that method right here and we have this fallback as well. So we just want to play audio when the function starts or when we load the page. So we're going to try it and if it doesn't work, then we can have a button as a fallback. And maybe here in this catch error, we'll also set this.isReady to false. So that way we know to show that button just in case the audio could not play, which means we can simplify this.

So that way we know to show that button just in case the audio could not play, which means we can simplify this. So join and be ready means we're going to set ready to true, but then we're also just going to say this is live, then we'll just run the playAudio. So this.playAudio, again, because we have that error handling backed up into this. So now right here, we can go ahead and show an X button and we can say that this would only show if isReady is not true. So we have @click, join and be ready. Let's see what this looks like. So this is still live, click into it, it automatically plays.

Let's see what this looks like. So this is still live, click into it, it automatically plays. But for some reason, this button is still there. Let's take a look. So what we can do is in the event listener for the audio play, if it's playing, then the user is ready. We don't have to show that button. So we can say this.isReady is equal to true. So if we were to go back and refresh the page, join, it automatically starts playing. But for some reason, let's go ahead and pull up Safari again.

This is just showing where the podcast scrub marker was.

1242 is when we loaded the page. Again, this is just showing where the podcast scrub marker was. Join and be ready. It's going to jump to 1253 for where the podcast should be played. Now that it finished, if we were to refresh, it shows at the beginning now, even though the podcast isn't there. So why don't we, in the next episode, handle the edge case for what happens when someone is in a listening party and it ends, and we'll start to tackle what does the actual live listening party experience look like?

listening party experience look like?