In this lecture, we are going to initialize FFmpeg by injecting the service into the upload component,
downloading FFmpeg may take a while while the file is downloading, we should prevent the user from
uploading a file.
Otherwise, they'll encounter errors.
We'll begin by injecting the service if you haven't already opened the class for this component.
Next, import the FFmpeg service.
Afterward, we're going to inject this service through the constructor function, the alias of the service
will be called F MPEG service.
Lastly, we're going to call the init function.
Are initializing FFmpeg as early as possible, the earliest stage we can load this package is during
the construction of the component.
The next step is to update our template.
We should prevent users from uploading files until FFmpeg is ready by injecting this service into the
component.
We can access the is ready property.
We'll use this property to disable uploads.
Open the upload template file.
We're going to completely hide the form from the user as an exercise.
I want you to try this on your own.
Hiding the form should be a simple process, actually.
You can copy some of the existing code in the template.
If you can recall, we hit the second step with the NGF Directive Nji Container Element and energy template
element.
You can replicate the same behavior for the entire form.
Here's what I want you to do.
I want you to hide the whole form until FFmpeg is ready during the loading process.
Add an icon to provide feedback to the user.
In the resource section of this lecture, I provide a link to a list of icons from a library called
Material Icons.
Our project utilizes these icons.
I recommend grabbing an icon from here.
Pick whichever icon you like along with the icon.
Feel free to add an animation.
An additional link to tail winds animation classes is available in the resource section of this lecture.
Tailwinds defines a few classes for applying animations to elements.
If you're feeling ambitious, you can read the customization section for adding custom animations.
Take your time!
We'll walk through the solution together after the pause.
Pause the video and good luck.
Welcome back.
I hope you were able to stop the user from uploading files.
If not, let's walk through the solution together before we start.
It's completely fine if your code doesn't match mine.
If you're using a different icon or animation, that's fine as long as the form is hidden until FFmpeg
is ready.
You're good to go in the template.
Search for the Dropbox section above the N.G. container element.
We're going to add another N.G. container element.
As a refresher, the new container element can group elements without adding a div or spin tag to group
elements inside this element.
I'm going to add a spin tag for the icon.
It's the recommended element from Google.
Next, we're going to apply the following classes Material Icon Text Center Text six x l p eight animate
spin.
The material iconoclast will load the icon from the library.
As for the other classes, they'll format and position the icon at the center of the page.
Lastly, the animate spin class will rotate the icon infinitely to create a spin or effect inside the
span tag and the word settings.
For this example, I'm going to use these settings icon.
If you're using a different icon, that's completely fine.
It won't make much of a difference.
You should try to make the project yours by customizing the appearance.
Next, let's add an energy.
If directive, the condition will check if the FFmpeg service DOT is ready.
Property is false.
The first portion of the template is ready, the next step is to render the drop box and form when the
condition is no longer true.
We're going to add and else condition to the NGF directive if this condition is not met.
We're going to render a template called upload editor container.
This template doesn't exist.
Let's create it below the energy container element.
We're going to add a nji template element.
Next, let's declare a template variable on this element.
The name can be copied from the health condition.
Lastly, we're going to move the drop box and form inside the template.
We're going to hide these sections.
Let's give our app a test, refresh the upload page in the browser with the developer tools opened.
As the page loads, an animated icon should appear on the page after FFmpeg has been downloaded, the
form will appear.
You may not see it if you have a fast connection.
You can throttle the speeds to make sure the icon appears the most important.
Information is logged in the console right away.
You'll be blessed with dozens of logs.
These logs give us an idea of what's happening with WebAssembly.
It's very similar to the Rust project we worked on.
It's common for WebAssembly apps to log data for debugging.
One of the last log statements should state the FFmpeg Core Library has been loaded.
If you get this message, you're ready to start generating screenshots.
Let's begin this process in the next lecture.