1
00:00:00,090 --> 00:00:06,510
In this lecture, we will finish this section by deleting these screenshots from the database and storage.

2
00:00:06,870 --> 00:00:11,100
If the user deletes a clip, the screenshot should be deleted too.

3
00:00:11,430 --> 00:00:14,730
Otherwise we'll be paying for storage we're not using.

4
00:00:15,000 --> 00:00:18,000
Let's quickly solve this issue to get started.

5
00:00:18,150 --> 00:00:20,490
Open the ion clip model file.

6
00:00:22,980 --> 00:00:27,720
Firstly, we need to store the name of the screenshot file in our documents.

7
00:00:28,050 --> 00:00:30,450
Otherwise, we won't be able to find them.

8
00:00:30,780 --> 00:00:38,100
Our model should have a property for this data on the interface and a property called screenshot file

9
00:00:38,100 --> 00:00:40,620
name annotated with the string type.

10
00:00:43,200 --> 00:00:50,070
Next, we need to update the upload component, this component is where we are creating the documents

11
00:00:50,340 --> 00:00:53,610
will need to update the object before insertion.

12
00:00:53,940 --> 00:00:56,880
Open the upload component class file.

13
00:00:59,440 --> 00:01:05,080
Inside the class, search for the clip object inside the upload file function.

14
00:01:07,720 --> 00:01:14,080
This object needs to be updated with the screenshot file name property, the value for this property

15
00:01:14,080 --> 00:01:17,980
should be the following clip file name dot PNG.

16
00:01:23,620 --> 00:01:30,610
As a reminder, the clip file name, variable stores, the unique generated name of the file, we're

17
00:01:30,610 --> 00:01:34,660
appending the extension to make it clear it's an image.

18
00:01:34,990 --> 00:01:40,330
There's one more step we need to update the function for deleting the clip from our app.

19
00:01:40,690 --> 00:01:43,810
We outsourced this logic to the clip service.

20
00:01:44,020 --> 00:01:45,550
Let's open this file.

21
00:01:48,010 --> 00:01:50,440
Search for the delete clip function.

22
00:01:53,020 --> 00:01:57,370
Inside this function, we can reuse the code for deleting a video.

23
00:01:57,700 --> 00:02:01,210
Let's create a variable called screenshot reference.

24
00:02:01,510 --> 00:02:06,310
Its value will be the this dat storage script ref function.

25
00:02:09,080 --> 00:02:15,710
References point to a file in the storage, we can delete a file after we've selected it from the storage.

26
00:02:15,980 --> 00:02:21,680
Before we do, we need to provide the path to the file pass in the following value.

27
00:02:21,920 --> 00:02:26,240
Screenshots slash clip dot screenshot file name.

28
00:02:28,710 --> 00:02:35,730
Lastly, we can call the screenshot reference dot delete function with the await keyword will delete

29
00:02:35,730 --> 00:02:38,100
the screenshot after deleting the video.

30
00:02:40,630 --> 00:02:41,380
We're finished.

31
00:02:41,590 --> 00:02:43,960
I'm going to quickly upload a new video.

32
00:02:44,140 --> 00:02:45,220
I'll be right back.

33
00:02:48,380 --> 00:02:48,950
All right.

34
00:02:49,130 --> 00:02:49,760
I'm back.

35
00:02:49,880 --> 00:02:51,530
Time for the true test.

36
00:02:51,860 --> 00:02:55,160
I'm going to delete this file from the Manage page.

37
00:02:57,660 --> 00:03:01,920
After doing so, let's check out the storage in the Firebase console.

38
00:03:02,250 --> 00:03:05,460
The files may not refresh after making a change.

39
00:03:05,700 --> 00:03:08,370
We need to manually refresh the page.

40
00:03:08,700 --> 00:03:11,340
These screenshots trajectory will disappear.

41
00:03:11,850 --> 00:03:12,570
Don't worry.

42
00:03:12,840 --> 00:03:17,760
This behavior is completely normal if you only had one file in this directory.

43
00:03:18,150 --> 00:03:21,810
Firebase is not a massive fan of empty directories.

44
00:03:22,210 --> 00:03:24,840
We're officially finished with the upload form.

45
00:03:25,020 --> 00:03:31,770
With the power of WebAssembly, we were able to capture high quality screenshots from a user's video.

46
00:03:32,310 --> 00:03:34,620
Feel free to expand on our solution.

47
00:03:34,890 --> 00:03:36,210
Try to make it your own.

48
00:03:36,450 --> 00:03:40,470
Before moving on, I recommend uploading a couple of videos.

49
00:03:40,680 --> 00:03:43,980
I'm going to do so before proceeding to the next section.

50
00:03:44,250 --> 00:03:45,240
I'll see you there.