Build a Webcam and Screen Sharing Site With Inertia
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
14. Updating videos

Episodes

0%
Your progress
  • Total: 2h 16m
  • Played: 0m
  • Remaining: 2h 16m
Join or sign in to track your progress

Transcript

00:00
Okay now I want to be able to click on any of these videos that I've captured that we've already seen
00:05
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
00:25
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
00:47
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
01:10
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
01:33
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
02:01
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
02:24
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
02:48
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
03:12
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,
03:38
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
04:04
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
04:28
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
04:51
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
05:18
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
05:41
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,
05:59
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
06:23
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,
06:45
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
07:12
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
07:39
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
08:04
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
08:29
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
08:54
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
09:19
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
09:45
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
10:12
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
10:29
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,
10:57
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
11:18
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
11:48
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
12:09
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
12:33
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
12:58
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.

Episode summary

In this episode, we dive into building the ability to update videos that we've previously captured. Here's what we work on:

First, we set up the routing and controllers so you can click any video to view its dedicated page. We make sure that you can actually see the video (with a working player!), and then begin working on enabling users to update key details like the title and description. We wire up the necessary Inertia and Vue components and reuse some of the markup from our "create video" page so things look familiar and consistent.

Next, we make sure the updates submit to a new controller, handle saving the changes, and provide instant feedback when the update is successful — so users know their edits have been saved. We even add a little animated message that shows when the video is saved, which disappears after a short time.

Security is really important, so we also introduce authorization policies. We create a new policy to ensure only the owner of a video can view or update it. Then, we move some of the authorization logic into form requests, keeping the controllers neat and tidy.

By the end, we've got a complete workflow: viewing, updating, and securing access to videos — all wrapped up with pleasant UX touches. Next up, we'll look at generating shareable links for these videos!

Episode discussion

No comments, yet. Be the first!