Sign up to access "Build a Webcam and Screen Sharing Site With Inertia" right now.

and I want to go through to a place where I can see the video first of all because we don't have anywhere we can actually play this video but also I want to be able to modify the details of this and eventually delete this, so let's work on the controller for this, so let's go ahead and create out another controller and that's going to be our video show controllers, this will be for us not

anyone else and let's register a route out for this first of all, so we'll copy one of these down let's say get, we'll say slash videos, now we're coming into territory where we need local authorization because otherwise anyone will be able to look at any of the videos we've created which is not great and we can do these by the UUID, so we can add that in there to look this up

in the database with root model binding directly with the UUID, so we're going to say video show controller and we'll say video show, we'll open up our video show controller and let's just add in an empty invoke in here just for now, okay so we can come over to the video index and we can actually change this entire thing over to an inertia link, so let's just make sure that's

been done properly and then we can set this with an href in here to go through to video show and we can pass the video directly into that and that will be picked up with Ziggy and it will create the correct route for us, so now when I click on this we should go through to the right place, now we're not at the moment because we're not rendering out an inertia page and we've got a little bit of

an issue with the display here, so I'm just going to set this to a block so we actually see it like a block element, okay so now over in our video show controller let's return an inertia response in here and of course that's going to be videos show and we will get the video in here with root model binding, we're going to put a note in here to authorize this so we know that we can actually

access it, that's really important but then we can just pass the video down, now remember that we've got our API resource for this so we can just say something like video resource make and we can pass that video down and that will be structured in the way that we set up in our video resource, okay so we'll do authorization at the end, let's just build out this video show page so we can

actually see this working, so over in videos let's create out show.view and for this let's just build out a really simple page just so we can see this hooking up first of all and then we'll just go ahead and steal some of the markup from elsewhere, so let's just dump out the video in here and we'll define our props up here and we'll say video and that's now going to be an object because it's just

a single video, okay let's go over click on here there we go we get our video, right so let's go over to our create template because the form that we have here is pretty much what we want to see in here, we've got the video which we can manually put the video link into, we've got our title and our description and the ability to save this and then we can just add a delete button, so I'm just

going to grab this entire form here, we need our authenticated layout so we'll wrap that in just a second but let's just put all of this in here and then we'll just fix up the indentation, so let's put that in there and pull this in a little bit and then we'll just wrap this in our authenticated layout just inside of here, so let's pull this down and we'll just re-indent everything in here,

great okay so that should give us that video, it doesn't because we've hooked this stuff up here, so let's get rid of this, let's get rid of the form here because we don't know where we're submitting that through to yet and let's build out a really quick form up here just so we can get this shown, so let's say use form from inertia and we'll create our format down here, so let's say form

and we'll call that form and then in here we have a title and a description, we don't have the video because of course we can't re-save the video, it doesn't make sense but that should be enough now to get that working, okay so it's looking a little bit weird, we just need to grab some of the container stuff from here, so let's grab all of this and again let's come down and just fill this

in, we've got four divs to end this off, two, three and four and let's re-indent our lines again and we should be good, okay great so again not looking great because we don't have some of these components in here but as soon as we import these and get our video in here and styled up this is going to look much better, okay so let's go and just import each of the things that we need

so our input label, our text input, our input error and I think that should be just about it, we just need our primary button as well, okay let's come over, looking a lot better, we need to pull in our text area and there we go, okay so let's get this video in here first of all, so the video is now going to have a source of whatever comes from our prop just in here from

our video, now we know that in our video resource we're outputting the video path which we can directly access, so all we need to do now is just bind the source in from the video and we should have that video in there, now it doesn't quite work at the moment just because of the way that our public storage directory works, what we need to do is back tick this and add this in here

but then just do a forward slash on the end so it actually looks within the correct directory or it's going to be trying to look for it somewhere after this path which doesn't make sense, so there's our video, it's playing, it's working, so we can actually see the video in here, really what we need to do now is just set up the title and the description to hook this up,

so we want a default title and a description, these come from the props themselves, so we can assign a variable to props and then we can put these in there by default, so we'll say props video title and props video description and there we go, so we've got our form set up now, we can play the video, I'm going to mute this and there we go, okay so for the title

and the description we just now need to submit the form, send this through to an update controller and we're good, we can set up authorization as well, so we need another controller, so let's make out a controller called video update controller, let's go over to our web routes, let's grab this one and we're going to make a patch request to this with that video in there,

video update controller and we'll say videos update, okay great, so the video update controller is just going to be responsible for updating the video and then returning back, that's it, so let's go and hook everything up, so we can actually submit this data through, so for our form which is just here, let's say v on submit prevent and we'll say form

patch, we'll go through to that route we've just created, videos update and then we'll go ahead and say preserve scroll true, okay great, so that should now submit through when we hit save video and we can check our network tab just to make sure, it looks like we have an error, yeah of course, so when we submit this through we need to actually send the video down, so it knows which

one to update, let's try this again and there we go, great, we get a request sent down to update that, so now we need to do is update the video, so let's pull in our request in here which we're going to switch over in a bit, we'll pull in the video, so we know which video to update and then we'll just go ahead and say video update and from the request we'll just grab the title

and the description, let's pull in our video in here and let's just check that this updates, so I'm going to say a screen recording and this is a video of a screen recording, send that down, refresh the page, it's all updated, great, very very easy to do, okay, let's talk about authorization, this is incredibly important because otherwise anyone can

view and modify our videos, so we need to do authorization here but we also need to do that in our show controller as well because we don't want anyone seeing the video that we've created, so let's go and create out a policy for this, so let's make out a policy, we'll call this video policy and that means that what we can do is create actions inside of here that can be taken

by a user and we either return true or false, so basically over in our video policy we can get rid of the constructor and we can create out a show method and implicitly we'll get the user in here because this is required that we are signed in, so we have to have a user, we'll get the video in and then we can just say as the condition to whether a

user can see a video, we just want to compare the IDs, so does the video ID equal the user ID stored in the video, that's it, now we can create this for both showing and updating a video, they work in exactly the same way, we basically need a condition to say can we, do we own this video, so now that we've created this video policy, we don't need to register this anywhere, we can just

directly come over to here and say this authorize and we can say show video like that, so now when we go over to this page, this will be where this gets authorized because anyone can pass in a UUID, now if we just test this out and we go over to our video policy and we return false, if we don't compare, you'll see this page or the person that's trying to access a video that they're

not supposed to, we'll see this page, now we can do a little bit better than this, we want to try and keep our controllers as tidy as possible, you don't have to do it for this show, but I'm just going to continue to create a form requests and I like this because it keeps everything tucked away in the request itself where it should be dealt with, so we're going to make another request in

here and we're going to call this video show request and then what we can do with that is just replace our video show request here and then we can actually get rid of this authorize in the controller and what that means is over in the video show request, we can just say auth user can show and because we've got this set in root model binding, we can just access that directly,

so now the authorization within this method in that form request is tucked away, it will still be called but now we don't have that floating around in our controller, so you can see it works in exactly the same way and it's letting us in here, so we can just do the same thing for our video update controller, let's just open that up and we can just swap this request out with the

authorization for that, so let's go and get rid of that, let's create out a new request called video update request and then we can just replace this out, video update request, open this up in the authorize, we are just going to say auth user can update and then again because this comes through with root model binding, we can just say this video, so now that will be authorized at the

showing this level and also when we click save that will show that as well, now the last thing I'll do is just add a little label here just to show whether this has been saved or not, it's just an inertial trick that we can use and the form provides a really nice property that we can use to sort of flash a message, so under the save button here I'm just going to create out a div

that wraps this and we'll go ahead and set flex with item center, we'll give a little bit of spacing and then down here what we can do is just create our little div to show that this has been saved, so we'll just say video saved, let's just have a look at that, doesn't look great at the moment but we can style this up with text small and maybe text gray 600, okay, so we want to show

this if the form has recently been saved, so to do this we can just say vif form was recently successful, now that will be like a timeout, I think it's just recently successful, yeah there we go, so let's pull that in, that will just be like a timeout whether it was recently saved or not, so this will kind of flash a message to show that this has been saved rather than us having to

implement flash functionality ourselves, so when I save this you can see that we get a video saved and then after a while that will just not be true, so it will disappear, so a nice little touch to our form there, okay, so all of that's done, authorization is done, let's move over and look at sharing a link or generating a link that we can actually share this video to.