1 00:00:00,120 --> 00:00:04,950 In this lecture, we're going to adjust the upload progress in the alert box. 2 00:00:05,250 --> 00:00:10,140 The upload progress will inform the user of the upload progress for the video. 3 00:00:10,440 --> 00:00:12,300 That's where our problem begins. 4 00:00:12,480 --> 00:00:18,450 It doesn't account for the progress of a screenshot upload we're uploading to files. 5 00:00:18,720 --> 00:00:21,660 The progress should reflect both uploads. 6 00:00:22,260 --> 00:00:26,610 Since we're dealing with uploads, we'll be dealing with double the observables. 7 00:00:26,910 --> 00:00:31,770 It's going to be necessary to merge observables into a single observable. 8 00:00:32,100 --> 00:00:35,760 Luckily, we have plenty of experience in this department. 9 00:00:36,060 --> 00:00:40,410 Take a moment to think about which operator we'll need for this situation. 10 00:00:40,710 --> 00:00:41,940 I'll give you a moment. 11 00:00:44,420 --> 00:00:46,740 Have you picked one for this lecture? 12 00:00:46,760 --> 00:00:51,410 We're going to use the combined latest operator to understand why. 13 00:00:51,470 --> 00:00:52,970 Let's dig into the code. 14 00:00:53,240 --> 00:00:56,110 Open the upload component class file. 15 00:00:58,670 --> 00:01:06,470 With our other important statements, important a function called Combine latest from the R SJS package. 16 00:01:08,910 --> 00:01:13,940 Next, scroll to the upload file function inside this function. 17 00:01:13,980 --> 00:01:17,670 I want you to look for the percent changes observable. 18 00:01:20,190 --> 00:01:24,630 The percent changes observable can be found on task objects. 19 00:01:24,900 --> 00:01:32,040 It'll push a numeric value, which represents the current progress of an upload or using this value 20 00:01:32,040 --> 00:01:34,350 to update the percentage property. 21 00:01:34,680 --> 00:01:38,580 Currently, the subscription is applied to the clip upload. 22 00:01:38,880 --> 00:01:46,650 We should update this subscription to the clip and screenshot uploads to avoid creating multiple subscriptions. 23 00:01:46,770 --> 00:01:52,590 We can continue using a single subscription by applying the combined latest operator. 24 00:01:52,950 --> 00:02:00,170 This operator will subscribe to multiple observables and stream it as one value if one observable pushes 25 00:02:00,170 --> 00:02:00,900 the value. 26 00:02:01,050 --> 00:02:05,520 This operator will push the latest values from all observables. 27 00:02:05,820 --> 00:02:10,080 We're going to need all the latest values to calculate the percentage. 28 00:02:10,530 --> 00:02:15,870 Let's wrap the percent changes operator with the combined latest operator. 29 00:02:18,390 --> 00:02:22,050 Observables must be passed in as items to an array. 30 00:02:22,350 --> 00:02:24,930 So let's wrap our values with an array. 31 00:02:27,500 --> 00:02:34,160 Next, we need to pass him the percent changes observable from the screenshot task object. 32 00:02:36,750 --> 00:02:38,070 The order does matter. 33 00:02:38,310 --> 00:02:42,930 Our subscription will be provided with an array of values in the same order. 34 00:02:43,230 --> 00:02:46,830 Speaking of our subscription, we should make some adjustments. 35 00:02:47,040 --> 00:02:49,440 Let's add a body to the arrow function. 36 00:02:51,990 --> 00:02:58,860 The progress argument is not going to represent a single value anymore and said it's going to store 37 00:02:58,860 --> 00:03:01,590 the values pushed by both observables. 38 00:03:01,830 --> 00:03:04,410 We should restructure them for readability. 39 00:03:04,680 --> 00:03:12,120 Let's this structure the values to variables called flip progress and screenshot progress, respectively. 40 00:03:14,620 --> 00:03:18,190 Next, we should check if both values are not empty. 41 00:03:18,430 --> 00:03:23,560 If we hover our mouse over either variable, they can potentially be empty. 42 00:03:23,890 --> 00:03:30,310 We won't be able to calculate the percentage if either variable is empty and a conditional statement. 43 00:03:30,370 --> 00:03:32,770 Check if the variables are empty. 44 00:03:38,480 --> 00:03:43,250 If one of them is empty, we'll return the function to cease execution. 45 00:03:45,780 --> 00:03:53,010 If both variables have values, we can proceed to calculate the percentage defining variable called 46 00:03:53,010 --> 00:03:57,060 total, its value will be the sum of both variables. 47 00:03:59,600 --> 00:04:08,150 Next, we'll return the total variable divided by 200 of the values emitted by our observable will contain 48 00:04:08,150 --> 00:04:11,210 a numeric value between zero and 100. 49 00:04:11,660 --> 00:04:17,600 If the sum of both numbers is 200, we can assume the files have been uploaded successfully. 50 00:04:17,959 --> 00:04:22,160 To calculate the percentage, we can divide the sum by 200. 51 00:04:22,520 --> 00:04:27,440 After making those changes, try initiating a new upload in the browser. 52 00:04:33,200 --> 00:04:39,410 As the upload progresses, we are given an accurate percentage, perfect or almost finished. 53 00:04:39,710 --> 00:04:43,760 There's another observable in our function that needs to be updated. 54 00:04:44,030 --> 00:04:46,730 Let's take care of that in the next lecture.