1
00:00:00,270 --> 00:00:06,990
In this lecture, we are going to initialize FFmpeg by injecting the service into the upload component,

2
00:00:07,380 --> 00:00:14,040
downloading FFmpeg may take a while while the file is downloading, we should prevent the user from

3
00:00:14,040 --> 00:00:15,240
uploading a file.

4
00:00:15,600 --> 00:00:18,090
Otherwise, they'll encounter errors.

5
00:00:18,360 --> 00:00:24,480
We'll begin by injecting the service if you haven't already opened the class for this component.

6
00:00:26,940 --> 00:00:30,180
Next, import the FFmpeg service.

7
00:00:32,630 --> 00:00:39,260
Afterward, we're going to inject this service through the constructor function, the alias of the service

8
00:00:39,260 --> 00:00:41,810
will be called F MPEG service.

9
00:00:44,360 --> 00:00:47,480
Lastly, we're going to call the init function.

10
00:00:50,270 --> 00:00:57,830
Are initializing FFmpeg as early as possible, the earliest stage we can load this package is during

11
00:00:57,830 --> 00:00:59,840
the construction of the component.

12
00:01:00,230 --> 00:01:03,020
The next step is to update our template.

13
00:01:03,380 --> 00:01:11,060
We should prevent users from uploading files until FFmpeg is ready by injecting this service into the

14
00:01:11,060 --> 00:01:11,730
component.

15
00:01:11,900 --> 00:01:14,510
We can access the is ready property.

16
00:01:14,780 --> 00:01:17,750
We'll use this property to disable uploads.

17
00:01:17,990 --> 00:01:20,270
Open the upload template file.

18
00:01:22,760 --> 00:01:27,360
We're going to completely hide the form from the user as an exercise.

19
00:01:27,380 --> 00:01:29,450
I want you to try this on your own.

20
00:01:29,870 --> 00:01:33,590
Hiding the form should be a simple process, actually.

21
00:01:33,710 --> 00:01:36,950
You can copy some of the existing code in the template.

22
00:01:37,400 --> 00:01:46,220
If you can recall, we hit the second step with the NGF Directive Nji Container Element and energy template

23
00:01:46,220 --> 00:01:46,820
element.

24
00:01:47,450 --> 00:01:50,990
You can replicate the same behavior for the entire form.

25
00:01:51,290 --> 00:01:52,820
Here's what I want you to do.

26
00:01:53,090 --> 00:01:59,420
I want you to hide the whole form until FFmpeg is ready during the loading process.

27
00:01:59,600 --> 00:02:02,540
Add an icon to provide feedback to the user.

28
00:02:02,900 --> 00:02:09,979
In the resource section of this lecture, I provide a link to a list of icons from a library called

29
00:02:09,979 --> 00:02:11,570
Material Icons.

30
00:02:14,050 --> 00:02:16,900
Our project utilizes these icons.

31
00:02:17,170 --> 00:02:19,690
I recommend grabbing an icon from here.

32
00:02:20,050 --> 00:02:23,740
Pick whichever icon you like along with the icon.

33
00:02:23,860 --> 00:02:25,990
Feel free to add an animation.

34
00:02:26,350 --> 00:02:32,980
An additional link to tail winds animation classes is available in the resource section of this lecture.

35
00:02:33,400 --> 00:02:38,290
Tailwinds defines a few classes for applying animations to elements.

36
00:02:38,830 --> 00:02:45,220
If you're feeling ambitious, you can read the customization section for adding custom animations.

37
00:02:45,550 --> 00:02:46,460
Take your time!

38
00:02:46,750 --> 00:02:50,020
We'll walk through the solution together after the pause.

39
00:02:50,320 --> 00:02:52,300
Pause the video and good luck.

40
00:02:54,150 --> 00:02:55,020
Welcome back.

41
00:02:55,290 --> 00:02:58,830
I hope you were able to stop the user from uploading files.

42
00:02:59,100 --> 00:03:03,540
If not, let's walk through the solution together before we start.

43
00:03:03,780 --> 00:03:07,050
It's completely fine if your code doesn't match mine.

44
00:03:07,440 --> 00:03:15,000
If you're using a different icon or animation, that's fine as long as the form is hidden until FFmpeg

45
00:03:15,000 --> 00:03:15,630
is ready.

46
00:03:15,780 --> 00:03:18,420
You're good to go in the template.

47
00:03:18,540 --> 00:03:23,550
Search for the Dropbox section above the N.G. container element.

48
00:03:23,760 --> 00:03:27,090
We're going to add another N.G. container element.

49
00:03:29,590 --> 00:03:37,090
As a refresher, the new container element can group elements without adding a div or spin tag to group

50
00:03:37,090 --> 00:03:39,520
elements inside this element.

51
00:03:39,700 --> 00:03:42,610
I'm going to add a spin tag for the icon.

52
00:03:42,910 --> 00:03:45,340
It's the recommended element from Google.

53
00:03:47,880 --> 00:03:59,490
Next, we're going to apply the following classes Material Icon Text Center Text six x l p eight animate

54
00:03:59,520 --> 00:04:00,030
spin.

55
00:04:05,220 --> 00:04:09,390
The material iconoclast will load the icon from the library.

56
00:04:09,750 --> 00:04:15,600
As for the other classes, they'll format and position the icon at the center of the page.

57
00:04:16,050 --> 00:04:24,090
Lastly, the animate spin class will rotate the icon infinitely to create a spin or effect inside the

58
00:04:24,090 --> 00:04:26,700
span tag and the word settings.

59
00:04:29,230 --> 00:04:32,710
For this example, I'm going to use these settings icon.

60
00:04:33,070 --> 00:04:36,430
If you're using a different icon, that's completely fine.

61
00:04:36,730 --> 00:04:38,590
It won't make much of a difference.

62
00:04:38,950 --> 00:04:43,060
You should try to make the project yours by customizing the appearance.

63
00:04:43,450 --> 00:04:46,020
Next, let's add an energy.

64
00:04:46,030 --> 00:04:52,240
If directive, the condition will check if the FFmpeg service DOT is ready.

65
00:04:52,240 --> 00:04:53,830
Property is false.

66
00:04:56,420 --> 00:05:02,480
The first portion of the template is ready, the next step is to render the drop box and form when the

67
00:05:02,480 --> 00:05:04,250
condition is no longer true.

68
00:05:04,520 --> 00:05:10,520
We're going to add and else condition to the NGF directive if this condition is not met.

69
00:05:10,700 --> 00:05:14,750
We're going to render a template called upload editor container.

70
00:05:17,600 --> 00:05:19,310
This template doesn't exist.

71
00:05:19,520 --> 00:05:22,970
Let's create it below the energy container element.

72
00:05:23,090 --> 00:05:26,060
We're going to add a nji template element.

73
00:05:28,700 --> 00:05:32,600
Next, let's declare a template variable on this element.

74
00:05:32,900 --> 00:05:35,570
The name can be copied from the health condition.

75
00:05:38,000 --> 00:05:42,590
Lastly, we're going to move the drop box and form inside the template.

76
00:05:42,830 --> 00:05:44,600
We're going to hide these sections.

77
00:05:47,000 --> 00:05:53,420
Let's give our app a test, refresh the upload page in the browser with the developer tools opened.

78
00:05:56,000 --> 00:06:04,070
As the page loads, an animated icon should appear on the page after FFmpeg has been downloaded, the

79
00:06:04,070 --> 00:06:05,120
form will appear.

80
00:06:05,420 --> 00:06:08,150
You may not see it if you have a fast connection.

81
00:06:08,420 --> 00:06:13,520
You can throttle the speeds to make sure the icon appears the most important.

82
00:06:13,520 --> 00:06:16,940
Information is logged in the console right away.

83
00:06:16,970 --> 00:06:19,430
You'll be blessed with dozens of logs.

84
00:06:19,730 --> 00:06:23,760
These logs give us an idea of what's happening with WebAssembly.

85
00:06:24,140 --> 00:06:27,320
It's very similar to the Rust project we worked on.

86
00:06:27,680 --> 00:06:31,430
It's common for WebAssembly apps to log data for debugging.

87
00:06:31,970 --> 00:06:38,240
One of the last log statements should state the FFmpeg Core Library has been loaded.

88
00:06:38,570 --> 00:06:42,830
If you get this message, you're ready to start generating screenshots.

89
00:06:43,040 --> 00:06:45,830
Let's begin this process in the next lecture.