In this lecture, we are going to give feedback to the user during the upload process, capturing screenshots
from a video can take a while.
We don't want the user to think their video hasn't been uploaded.
We should provide visual feedback during the processing phase.
There are various ways to approach this.
We're going to keep it simple by rendering an animated icon.
The icon should appear when a new file is dropped onto the drop box to get started.
Open the FFmpeg service.
The FFmpeg package does not allow multiple commands to run in parallel, we should prevent multiple
commands from executing by checking if a command is in progress in the class.
Defining public property called is running with an initial value of false.
Next, scroll to the Get Screenshots function.
We're going to update this property in this function at the very top of the function, Sethi is running
property to true.
At the bottom of the function before the return statement.
Change it back to false.
While this property is true, our component should render an animated icon to indicate the command is
running.
First, we should prevent users from uploading new files if they upload new files.
A new command would be initiated.
We should prevent that from happening.
Open the upload component class.
Scroll to the store file function at the top of the function.
We will create a conditional statement to check if the FFmpeg service DOT is running property is true.
If it is, we'll return the function.
This statement should effectively stop the user from uploading another file while another file is being
processed.
Let's move on to displaying the icon.
Open the upload template file.
Scroll to the drop box section.
We're going to add an icon below the H5 element.
You're more than free to use whichever icon you'd like.
As long as it's from the material icon set, you should be able to render an icon for this example.
I'm going to go with the auto renew icon under the H five tag.
Add a span tag.
It'll have the following classes material icons text centre, text six x l p eight animate spin.
The classes for this icon are the exact same as the other animated icon inside this tag.
Add the word auto renew.
Next, let's add an energy if directive.
We will create a conditional statement to check if the FFmpeg service DOT is running property is true.
With those changes in place, let's try testing a new file upload.
As the screen screenshot images are created, the icon appears.
It's always considered good practice to provide feedback to the user in the next set of lectures.
We're going to begin selecting a screenshot after they've been generated.