1 00:00:00,150 --> 00:00:07,020 In this lecture, we are going to give feedback to the user during the upload process, capturing screenshots 2 00:00:07,020 --> 00:00:08,940 from a video can take a while. 3 00:00:09,150 --> 00:00:13,020 We don't want the user to think their video hasn't been uploaded. 4 00:00:13,320 --> 00:00:17,040 We should provide visual feedback during the processing phase. 5 00:00:17,700 --> 00:00:20,220 There are various ways to approach this. 6 00:00:20,430 --> 00:00:24,150 We're going to keep it simple by rendering an animated icon. 7 00:00:24,450 --> 00:00:30,360 The icon should appear when a new file is dropped onto the drop box to get started. 8 00:00:30,510 --> 00:00:32,790 Open the FFmpeg service. 9 00:00:34,560 --> 00:00:41,220 The FFmpeg package does not allow multiple commands to run in parallel, we should prevent multiple 10 00:00:41,220 --> 00:00:46,650 commands from executing by checking if a command is in progress in the class. 11 00:00:46,890 --> 00:00:52,110 Defining public property called is running with an initial value of false. 12 00:00:54,640 --> 00:00:58,030 Next, scroll to the Get Screenshots function. 13 00:00:58,330 --> 00:01:05,200 We're going to update this property in this function at the very top of the function, Sethi is running 14 00:01:05,200 --> 00:01:06,580 property to true. 15 00:01:09,180 --> 00:01:12,670 At the bottom of the function before the return statement. 16 00:01:12,690 --> 00:01:14,310 Change it back to false. 17 00:01:16,760 --> 00:01:23,870 While this property is true, our component should render an animated icon to indicate the command is 18 00:01:23,870 --> 00:01:24,290 running. 19 00:01:24,620 --> 00:01:30,320 First, we should prevent users from uploading new files if they upload new files. 20 00:01:30,470 --> 00:01:32,570 A new command would be initiated. 21 00:01:32,840 --> 00:01:34,700 We should prevent that from happening. 22 00:01:34,940 --> 00:01:37,400 Open the upload component class. 23 00:01:39,880 --> 00:01:43,890 Scroll to the store file function at the top of the function. 24 00:01:43,960 --> 00:01:51,430 We will create a conditional statement to check if the FFmpeg service DOT is running property is true. 25 00:01:51,760 --> 00:01:54,040 If it is, we'll return the function. 26 00:01:56,720 --> 00:02:03,230 This statement should effectively stop the user from uploading another file while another file is being 27 00:02:03,230 --> 00:02:03,980 processed. 28 00:02:04,340 --> 00:02:06,620 Let's move on to displaying the icon. 29 00:02:06,980 --> 00:02:09,229 Open the upload template file. 30 00:02:11,740 --> 00:02:13,840 Scroll to the drop box section. 31 00:02:14,200 --> 00:02:17,650 We're going to add an icon below the H5 element. 32 00:02:18,010 --> 00:02:21,100 You're more than free to use whichever icon you'd like. 33 00:02:21,370 --> 00:02:27,850 As long as it's from the material icon set, you should be able to render an icon for this example. 34 00:02:27,970 --> 00:02:32,610 I'm going to go with the auto renew icon under the H five tag. 35 00:02:32,620 --> 00:02:34,090 Add a span tag. 36 00:02:36,500 --> 00:02:46,310 It'll have the following classes material icons text centre, text six x l p eight animate spin. 37 00:02:48,920 --> 00:02:55,310 The classes for this icon are the exact same as the other animated icon inside this tag. 38 00:02:55,370 --> 00:02:57,140 Add the word auto renew. 39 00:02:59,550 --> 00:03:03,150 Next, let's add an energy if directive. 40 00:03:05,330 --> 00:03:12,800 We will create a conditional statement to check if the FFmpeg service DOT is running property is true. 41 00:03:15,180 --> 00:03:19,500 With those changes in place, let's try testing a new file upload. 42 00:03:22,950 --> 00:03:27,090 As the screen screenshot images are created, the icon appears. 43 00:03:27,390 --> 00:03:33,570 It's always considered good practice to provide feedback to the user in the next set of lectures. 44 00:03:33,720 --> 00:03:38,220 We're going to begin selecting a screenshot after they've been generated.