Why don't we go ahead and try it out? My first step is I'm going to grab this link and switch over to the Laravel code base. So I know that I'm going to have some kind of AddComponent. So here is my video player wrapper. So that's essentially all of this stuff here. The AddToWatchList button, we're kind of zoomed out here. But yeah, that's all encompassed here. So I'm assuming at the bottom, I'm going to have some kind of AddComponent here. And by the way, I should go ahead and boot up npm run watch. I am using Laravel Mix here.

And by the way, I should go ahead and boot up npm run watch. I am using Laravel Mix here. Anyways, I'm going to set up resources/assets.js. I'll put this in my components directory, and I'm going to call it add.view. So we'll have a template here, something. And then for my script, export default. Yeah, we'll figure all this out. So we have our component, but it's not going to recognize it just yet. And that's because here's my main view-specific component for the lesson page here. So you can see right now, I just have the videoPlayer component itself,

And that's because here's my main view-specific component for the lesson page here. So you can see right now, I just have the VideoPlayer component itself, and then a NotifyWhenUpdated button. So let's go ahead and import our Add. And I think that should do it, right? And then we'll reference it down here. All right, so that should compile down behind the scenes. If I now come back and refresh, I'm expecting to see, yeah, there it is. There's our Add component. Okay, so now, if we switch back, we can get started.

There's our add component. Okay, so now, if we switch back, we can get started. What I'm thinking we need to do is when this component is initialized or created, I'm going to perform some kind of AJAX request to their server. So the URL is going to be this endpoint he gave us. And one thing I always do is just dump out the response to see what, in fact, I'm working with. So I will console.log that. Okay, so I think we're going to have to do a JSONP request here, but at the very least, let's just open up Chrome DevTools and see what we get. Yeah, can't load it because no access control allow origin header is present.

There we go. We did get our objects. So it looks like we have an array of three items. This would be like, obviously, if you want to have multiple ads. I want this to be as unintrusive as I can. So I think we're just going to grab the first random item here off of this list. So let's do this. Why don't we get started? Maybe we'll have a div with a class of ad. And then we'll have a container section within here where we have our heading. I just need to figure out what the formatting is going to look like here. Yeah, so I do want that centered, right?

So let's come back once again. We have our object, and why don't we just grab this and assign it to one of View's data properties, something like this, data, and then we will return our ad. And that'll be some kind of object here. So let's be explicit. What keys would we need? We'll need the title. We're going to need the description, like we said. And let's go back. We will need, yeah, see, I'm not entirely sure.

Yeah, maybe. So let's see what else. With an image, we want the ad.image. And then the alt will be the title of the image. And then down here, presumably, this will be the ad.description. And then I also need the title, too, though. Maybe, let's give this a class, ad.description. Maybe we'll have like a strong, and that can be the title. And then down here, we could use a template tag, too. Maybe here, ad.description.

And then down here, we could use a template tag, too. Maybe here, ad.description. I'm not sure. We'll see how this works. Either way, we want to have access to these values. So I need to make sure that once the AJAX request is done, I assign it. So we could do something like this. Well, first, let's go back. The response is going to be an object that contains ads as a property. ads is an array, and I just want to grab the first one.

The response is going to be an object that contains ads as a property. ads is an array, and I just want to grab the first one. So it sounds like what I need is response, ads, and then grab the first one. So I could say this.ad equals that. So let's come back and take a look. Yeah, there it goes. So the image is way too big, but at the very least, each time I refresh it, we can see we're getting new data. And remember, for all of you watching this, you will never see this. It's only for the guests who are not subscribers to help pay the bills.

Maybe what we should do is add a little dash here. So something like, well, I want an end dash here. But that's not going to be bold, is it? Because it's outside. Actually, that doesn't look bad to me at all. So each time I refresh, yeah, that looks good. Now, I could even add potentially some kind of transition or something like this, where we say v-show or v-if. It was loaded. And then we could say up here, default to false.

It was loaded. And then we could say up here, default to false. But then after you perform the AJAX request, only then do you update this and update the display. Or what I could also do is add a transition around it, something like fade, and that will fade it in. I don't know. But anyways, if I refresh, now I shouldn't see it until we have a response. So finally, what I could do, if I switch back to my video player, is conditionally display this.