1 00:00:00,090 --> 00:00:04,440 In this lecture, we're going to learn about a new operator called Fork Qoin. 2 00:00:04,800 --> 00:00:09,520 It's going to help us handle the next step to uploading a screenshot before we do. 3 00:00:09,600 --> 00:00:11,940 Let's talk about what our next step is. 4 00:00:12,240 --> 00:00:14,640 Our files are being uploaded to Firebase. 5 00:00:14,820 --> 00:00:19,500 However, the URL to our screenshot isn't being stored in the database. 6 00:00:19,830 --> 00:00:23,850 We need to adjust our request to add the URL to the screenshots. 7 00:00:24,300 --> 00:00:27,690 The solution is going to be similar to the percentage solution. 8 00:00:28,230 --> 00:00:30,780 We need to wait for both uploads to complete. 9 00:00:31,170 --> 00:00:35,640 After waiting for both uploads, we need to grab the URL to the screenshots. 10 00:00:35,940 --> 00:00:40,680 Lastly, we can insert the screenshot URL into the document object. 11 00:00:41,160 --> 00:00:43,530 There's going to be a small hurdle to get over. 12 00:00:43,680 --> 00:00:47,670 Let's open the upload component class file to discover this hurdle. 13 00:00:50,240 --> 00:00:55,280 In the upload file function, search for the snapshot changes observable. 14 00:00:57,770 --> 00:01:02,300 You should be able to find it directly below the percent changes observable. 15 00:01:02,810 --> 00:01:07,580 The snapshot changes observable will push values as the upload is in progress. 16 00:01:07,910 --> 00:01:11,690 Completion occurs when the upload is finished in our pipeline. 17 00:01:11,840 --> 00:01:15,950 We are waiting for the observable to finish by adding the last operator. 18 00:01:16,280 --> 00:01:20,660 The last value emitted by the observable will be pushed to the subscriber. 19 00:01:21,200 --> 00:01:24,530 We need to replicate this behavior with two observables. 20 00:01:24,740 --> 00:01:27,830 Let's break this down into a list of requirements. 21 00:01:30,260 --> 00:01:33,780 Firstly, we need to merge two observables into one. 22 00:01:34,100 --> 00:01:40,550 We are going to subscribe to these snapshot changes observable from the video and screenshot uploads. 23 00:01:40,970 --> 00:01:46,670 Secondly, we don't want to insert data into the database until both actions are complete. 24 00:01:47,060 --> 00:01:52,070 Lastly, we need access to the latest values pushed by AL observables. 25 00:01:52,400 --> 00:01:56,960 We need to build an observable and pipeline to satisfy these requirements. 26 00:01:57,260 --> 00:02:01,460 There are different operators at our disposal to address our requirements. 27 00:02:02,000 --> 00:02:06,110 There's one operator in particular that does everything in one. 28 00:02:06,410 --> 00:02:08,930 It's called the fork joint operator. 29 00:02:09,350 --> 00:02:11,780 It'll accept an array of observables. 30 00:02:12,140 --> 00:02:18,860 Values are not pushed to the subscriber until all observables have been completed upon completion. 31 00:02:19,070 --> 00:02:23,930 The latest values pushed by each observable are streams to the subscriber. 32 00:02:26,570 --> 00:02:27,690 Let's give it a try. 33 00:02:28,070 --> 00:02:33,890 At the top of the file import the fork joint operator from the Oryx Juice package. 34 00:02:36,310 --> 00:02:40,210 Next, scroll back to these snapshot changes observable. 35 00:02:42,680 --> 00:02:47,720 We're going to wrap the snapshot changes observable with the fork joint operator. 36 00:02:50,270 --> 00:02:53,840 Observables must be passed in with an array wrapped around them. 37 00:02:54,110 --> 00:02:56,510 Let's wrap the observable with an array. 38 00:02:59,140 --> 00:03:05,440 Next, we should pass in the snapshot changes observable from the screenshot task object. 39 00:03:08,070 --> 00:03:14,250 By passing in both observables, we are waiting for both uploads to finish inside our pipeline. 40 00:03:14,340 --> 00:03:16,740 The last operator is redundant. 41 00:03:16,980 --> 00:03:18,330 It's safe to remove it. 42 00:03:20,760 --> 00:03:23,520 We can remove it from our import statements to. 43 00:03:26,080 --> 00:03:29,440 Back in the pipeline, let's assess what we need next. 44 00:03:31,860 --> 00:03:37,800 Inside the pipeline, we are subscribing to a different observable for the URL of the clip. 45 00:03:38,190 --> 00:03:42,850 We can continue to use the Switch Map operator to change observables. 46 00:03:43,170 --> 00:03:46,320 However, what about the URL for the screenshots? 47 00:03:46,590 --> 00:03:52,560 We're going to need it for our app once again to observables will need to be merged into one. 48 00:03:52,890 --> 00:03:54,720 We can reuse the fork. 49 00:03:54,720 --> 00:03:55,920 Join Operator. 50 00:03:56,400 --> 00:03:59,940 Before we do, we should create a reference to the screenshots. 51 00:04:00,340 --> 00:04:06,540 References will ship with methods for grabbing the URL to a file in Firebase is storage service. 52 00:04:06,900 --> 00:04:10,170 I want you to search for the clip reference variable. 53 00:04:10,470 --> 00:04:12,870 You should be able to find it by scrolling up. 54 00:04:15,540 --> 00:04:20,640 Under this variable, we're going to create a variable called screenshot reference. 55 00:04:20,940 --> 00:04:25,470 Its value will be the this dot storage dot rep function. 56 00:04:28,000 --> 00:04:31,570 Next pass in the screenshot path variable. 57 00:04:34,040 --> 00:04:39,830 The value returned by this function will expose an observable for retrieving the download URL. 58 00:04:40,110 --> 00:04:42,260 Let's subscribe to this observable. 59 00:04:42,470 --> 00:04:45,530 Go back to the pipeline inside the pipeline. 60 00:04:45,560 --> 00:04:51,200 We're going to wrap the get download URL observable with the fork join operator. 61 00:04:53,670 --> 00:04:56,190 The observable should be wrapped with an array. 62 00:04:58,720 --> 00:05:05,350 Lastly, we will a. get download URL observable from the screenshot reference object. 63 00:05:07,790 --> 00:05:14,120 To recap, we're combining two observables there, the same observable, but for different files. 64 00:05:14,450 --> 00:05:20,510 We're awaiting for Firebase to give us the URLs to both files after we've received them. 65 00:05:20,630 --> 00:05:23,000 We will push them onto the subscriber. 66 00:05:23,360 --> 00:05:29,870 The last step in this process is to update our subscription to include the URL for the screenshots. 67 00:05:30,260 --> 00:05:33,890 Let's rename the argument to you URLs in the subscription. 68 00:05:36,400 --> 00:05:44,560 Next, let's structure the earl's argument into two variables called clip URL and screenshot URL. 69 00:05:47,150 --> 00:05:54,440 Afterward, the clip object needs to be updated as a reminder, the clip object gets inserted into the 70 00:05:54,440 --> 00:05:55,160 database. 71 00:05:55,430 --> 00:06:00,950 We should add the clip URL and screenshot URL variables to this object. 72 00:06:01,310 --> 00:06:05,540 The URL properties should be sent to the clip URL variable. 73 00:06:08,110 --> 00:06:14,710 As for the screenshot, Earl Variable, we will assign this variable to a property called screenshot 74 00:06:14,740 --> 00:06:15,370 URL. 75 00:06:18,010 --> 00:06:24,430 The compiler is going to complain because the screenshot URL property is not defined in the model. 76 00:06:24,760 --> 00:06:27,880 The object is annotated with the eclipse model. 77 00:06:28,270 --> 00:06:31,840 This model will need to be updated to reflect the changes. 78 00:06:32,140 --> 00:06:34,390 Open the eclipse model file. 79 00:06:36,950 --> 00:06:42,470 In the interface ad, the screenshot URL property annotated with the string type. 80 00:06:45,060 --> 00:06:45,810 We're finished. 81 00:06:45,960 --> 00:06:47,730 Let's try uploading a file. 82 00:06:47,940 --> 00:06:50,430 Hopefully, this will be our last test. 83 00:06:56,360 --> 00:06:59,060 After a few seconds, the upload is complete. 84 00:06:59,420 --> 00:07:03,140 Let's verify the screenshots storage in the database. 85 00:07:03,500 --> 00:07:06,380 I want you to open the database in another tab. 86 00:07:08,760 --> 00:07:13,740 Inside the clips collection, you should find the new item in the database. 87 00:07:14,010 --> 00:07:17,460 The latest document contains a URL to the screenshot. 88 00:07:17,700 --> 00:07:18,480 That's awesome. 89 00:07:18,750 --> 00:07:21,420 Let's finish things up in the following lecture.