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
16. Deleting videos and clearing up

Episodes

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

Transcript

00:00
Okay, so back over to our editing page, we're gonna implement a delete button here.
00:05
Now this is pretty straightforward. We will send a request through, delete the record from the database, but we wanna go ahead and do a little bit of clear up
00:12
and actually remove the video files and the still image that we've generated alongside of this as well. We don't really need them to hang around.
00:20
So before we do anything, we're gonna go and just delete everything that we've already got here in terms of our videos. And I'm just gonna create a new one
00:27
and we're just gonna make sure that these keep in sync and it deletes everything that we need. So we've got this in the database.
00:33
Let's get rid of this as well. And let's head back over to our video section and we don't have anything. So I'm gonna record another video here.
00:41
So let's share everything here, start the recording, stop the recording, go ahead and save this.
00:49
And there we go. We wanna delete this video and really importantly, we wanna get rid of these two files.
00:54
So the first thing is just gonna be a button. So in here, we've got our save video and our confirmation. So I'm gonna wrap these in a div
01:04
and then gonna create another button out down here. And then I'm gonna make this outer container flex item center and justify between. So that button sits just over there.
01:16
So let's create out a danger button in here. And of course, pull that in from view and we'll say delete video. Okay, so when we click on that,
01:28
we wanna delete it. So we'll say V on click, delete video and we can create a really simple
01:38
delete video function up here to handle that for us. Now, we don't know where we're gonna send this through to at the moment
01:44
because we don't have a route or a controller. They're gonna be pretty straightforward. So let's go ahead and make out a controller, video destroy controller.
01:53
And of course, register that over in here. So let's duplicate one of these down. We're gonna be sending a delete request through to that video.
02:03
We're gonna have a video destroy controller hooked up and we'll call this destroy. So we can now submit this down to this. Of course, we need to think about authorization as well
02:12
because we don't just want anyone to be able to delete any video by its UUID. So let's just make the request first of all and then we'll fill in the controller.
02:22
Okay, so over in our show here, let's think about how we're gonna do this. We're not gonna have a form. So what we want to do is specifically pull in
02:30
inertia's router. So we can just say router delete and hook that up to that video's destroy route. And then once that is deleted,
02:41
we'll just redirect within the controller. So we don't really need to do anything else here. We could also add some sort of window confirmation around this.
02:50
So we could say if window confirm, are you sure? And just add a native browser confirmation. So now when we click on this, we'll get a confirmation.
03:00
We can cancel it to, of course, cancel that. We do get video saved here and that has actually saved our video. And the reason being is if we go down,
03:11
we've got a button in here, which doesn't have a type of button specifically. So if we set that, that's not gonna submit our overall form because this is technically within the form itself.
03:21
So you can see now we don't get that functionality submit. So when we do submit this through, that's gonna go through and send a request through to our controller, which we haven't filled in yet.
03:31
So let's go ahead and do that now. So let's bring in our video model in here that we get through route model binding. And we're literally just going to delete this video
03:40
and then go ahead and return. And where do we want to redirect to? Well, we probably want to go over to the videos index. So let's just try this out
03:51
and then we'll record another video so we can look at that tidying up of files. So I'm gonna hit okay and nothing's happened. So let's just have a look in our network tab
04:00
and let's see what's going on here. So hit that and yes, so we've got videos.destroy. Yeah, of course. So if we come over to our method,
04:11
we need to pass the actual video that comes from our props. So it's just props.video and we should be good. Okay, so let's close off our console and let's try this out again.
04:20
So let's delete this. We're redirected back and of course that video has been deleted, but we still have these files hanging around.
04:27
So let's manually delete these just for now. And now let's look at clearing up after we've deleted a video. Again, that's gonna go in our video observer.
04:37
And what we want to do is once this is deleted, so once it has been removed from the database, we will get an instance of that video through. And then in here, we can just access the still path
04:48
and the video path and delete them out of our file storage. So in here, all we need to do is access the storage facade and say disk public. So we'll tell it where we're deleting from
05:01
and the delete method accepts an array of files that we want to delete. So with this, what we can do is say video only, which will just grab out the properties that we want,
05:13
video path and still path. So basically grab these two things as an array and tell storage to remove them from the file system. That's really all we need to do.
05:23
It just saves having to do storage delete twice and passing this as an array kind of makes sense. So now that we've got that hooked up, let's have a look at this
05:32
and we'll go ahead and add in our authorization and then we're done. So I'll go ahead and capture another video in here really quickly.
05:40
And we'll stop that, save that out. And there it is. Let's go ahead and delete this, but keep an eye on our storage section with these two files.
05:51
So let's delete this. There we go. And sure enough, they are now gone. Great, so we're doing a little bit of clear up.
05:57
Okay, so the last thing to do is over in the video destroy controller, go ahead and authorize this. So we've done this before.
06:04
We're just gonna create out a very simple request, although we're not validating anything just to add in that authorization and keep it out of our controller.
06:11
So let's go ahead and make out a request here. And of course, we're gonna call that video destroy request. We'll go ahead and bring that video destroy request into our controller.
06:22
So that gets invoked in terms of our authorize method. And we don't have one at the moment where we can kind of guess what this is gonna be. We'll just say auth user can destroy this video
06:34
and we should be good. So let's go over to our video policy and let's create out another method here just called destroy and we should be good.
06:46
So let's just test this out. I'm gonna record one last video and let's go and do something. Go ahead and save this out and let's delete it.
07:00
And there we go. So we can delete that video now. And of course, that's gonna be protected for anyone that's trying to delete a video
07:05
that they don't own. So there we go. We have deleted, cleared up and authorized the deletion of a video.
16 episodes•2 hrs 16 mins

Overview

Let’s build an app to capture and record your webcam (or screen) directly from the browser, store it, and provide a link that can be shared to anyone for them to watch.

Completely from scratch, we’ll hook into the browser APIs for recording, send the video to our backend for encoding, generate still images with FFmpeg, and produce a sharable link that can be sent to anyone for them to view.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.