1 00:00:00,930 --> 00:00:05,650 An last video we set up a bunch of stuff around the Felty player but then we very quickly got confronted 2 00:00:05,650 --> 00:00:07,450 with a nasty error message here. 3 00:00:07,690 --> 00:00:11,560 It's kind of hard to decipher what's going on with this error message but you'll notice in sight of 4 00:00:11,560 --> 00:00:15,500 this component in Mount print up right here it appears that things are starting to go wrong. 5 00:00:15,520 --> 00:00:19,550 When we tried to attach the media player to the video player ref. 6 00:00:19,570 --> 00:00:24,610 So let's try adding a console log of the video ref inside of component dismount and figure out what's 7 00:00:24,610 --> 00:00:25,930 going wrong. 8 00:00:25,960 --> 00:00:33,890 So inside of component amount going to add a console that log for this video ref and I'll save this 9 00:00:33,980 --> 00:00:35,370 and we'll see what happens. 10 00:00:36,150 --> 00:00:36,430 OK. 11 00:00:36,440 --> 00:00:39,670 So I still see the same error message inside my console over here. 12 00:00:39,740 --> 00:00:43,160 And scroll up just a little bit and I'll see the console log right here. 13 00:00:43,160 --> 00:00:45,810 So it says Current is null. 14 00:00:45,860 --> 00:00:46,880 Now why could that be. 15 00:00:46,880 --> 00:00:51,260 This essentially means that we are not getting the correct reference to that video element. 16 00:00:51,500 --> 00:00:53,580 Well let's kind of think about this a little bit. 17 00:00:53,870 --> 00:00:58,280 If we go down to a render method you'll recall that we have a little bit of a check inside of here and 18 00:00:58,280 --> 00:01:04,100 we say if we do not yet have access to our stream then we're going to just show a div with loading. 19 00:01:04,460 --> 00:01:10,760 So when our component first renders if we don't have the stream we are not creating the video element 20 00:01:10,790 --> 00:01:11,780 at all. 21 00:01:11,780 --> 00:01:14,450 Instead we just immediately return the Stiv right here. 22 00:01:14,480 --> 00:01:19,500 We never create the video and we never attach our ref to that video element. 23 00:01:19,550 --> 00:01:22,940 So that's essentially what's happening when our component first gets rendered. 24 00:01:22,940 --> 00:01:24,000 We're making the div. 25 00:01:24,020 --> 00:01:27,980 The video does not get created because we do not yet have our stream. 26 00:01:28,040 --> 00:01:34,640 However I bet you anything that if we dismiss this message right here or excuse me we don't need to 27 00:01:34,640 --> 00:01:37,550 dismiss it we can just go back to localhost 3000. 28 00:01:37,970 --> 00:01:43,400 And then if we then attempt to click on one of these elements we will see the video player appear successfully. 29 00:01:43,430 --> 00:01:47,990 That's because if we go back to the original list screen we're going to load up the stream with the 30 00:01:47,990 --> 00:01:48,900 idea of one. 31 00:01:48,920 --> 00:01:54,410 And so that's going to be inside of our redux store when we then attempt to render streams show we are 32 00:01:54,680 --> 00:01:57,220 already in control of the appropriate stream. 33 00:01:57,230 --> 00:02:00,780 So we don't encounter this case where we have not yet loaded up. 34 00:02:00,800 --> 00:02:06,050 However if we refresh the page while we are here then we have to wait for the Ajax request or the network 35 00:02:06,050 --> 00:02:09,230 request to be completed to go and get that stream object. 36 00:02:09,380 --> 00:02:13,290 And that's the case where we run into this error message right here. 37 00:02:13,320 --> 00:02:14,970 So how can we fix this. 38 00:02:14,970 --> 00:02:16,820 Well there's more than one way to do it. 39 00:02:16,980 --> 00:02:22,110 We can either say that we do not want to render anything inside this component until we fetch the stream 40 00:02:22,410 --> 00:02:27,300 and essentially continue what we're doing right here and then add in some better logic inside of component 41 00:02:27,300 --> 00:02:33,690 and mount to decide whether or not we are actually ready to attempt to attach the video player to the 42 00:02:33,690 --> 00:02:34,570 video ref. 43 00:02:35,420 --> 00:02:41,390 Alternatively because our render method or the entire component itself only tries to print up the title 44 00:02:41,420 --> 00:02:43,040 and description from the stream. 45 00:02:43,130 --> 00:02:49,130 We could only guard against printing out the H1 and h 5 right here until we actually get the stream. 46 00:02:49,130 --> 00:02:54,590 So in other words always try to show the video player but wait to show the title and description until 47 00:02:54,590 --> 00:02:55,610 we get the stream. 48 00:02:55,730 --> 00:03:00,140 So we get totally do that approach because the video player does not actually depend upon the stream 49 00:03:00,140 --> 00:03:01,580 being fetched. 50 00:03:01,640 --> 00:03:06,380 Now that would be a really easy approach or real easy solution but I want to show you the slightly more 51 00:03:06,380 --> 00:03:11,750 complicated solution where we're going to essentially make sure that we do not attempt to attach that 52 00:03:11,750 --> 00:03:17,570 video player until we successfully get the stream because I think that's more realistic of what's going 53 00:03:17,570 --> 00:03:18,860 to happen in real life. 54 00:03:18,860 --> 00:03:24,110 The reason I say it's more realistic is because when we specify the you are right here raising the ID 55 00:03:24,170 --> 00:03:27,700 which is already known ahead of time before we load up the appropriate stream. 56 00:03:27,800 --> 00:03:33,260 But it's entirely possible that the oil right here might need to reference some property inside of our 57 00:03:33,260 --> 00:03:37,130 stream object in order to side what the actual R L is. 58 00:03:37,160 --> 00:03:42,860 So we might need to reference some like I don't know internal stream or id or streamer tokin or something 59 00:03:42,860 --> 00:03:45,380 like that when specifying the You Are All Right here. 60 00:03:45,470 --> 00:03:49,700 And if we wanted to do that we would definitely need to have access to the stream. 61 00:03:49,700 --> 00:03:50,070 All right. 62 00:03:50,090 --> 00:03:53,800 Now that we understand what's going on here I'm going to remove the console lock. 63 00:03:54,070 --> 00:03:59,870 So now inside of this component we only want to attempt to set up this video player right here after 64 00:03:59,870 --> 00:04:04,780 we know that the appropriate stream has been actually fetched. 65 00:04:04,790 --> 00:04:07,070 So here's what we're going to do. 66 00:04:07,160 --> 00:04:11,950 I'm going to define another helper method inside this component and I'm going to call it build. 67 00:04:11,950 --> 00:04:18,000 Player like so then inside if you're going to put a IF statement. 68 00:04:18,240 --> 00:04:26,370 I'm going to say if this player exists in the words if we have already set up the player or if this 69 00:04:26,580 --> 00:04:29,120 Propst stream does not exist. 70 00:04:29,160 --> 00:04:30,800 So notice the not right there. 71 00:04:30,960 --> 00:04:36,100 So if we already have a player or if the stream does not yet exist then just return. 72 00:04:36,240 --> 00:04:40,060 Otherwise we want to go to the process of setting up our player. 73 00:04:40,120 --> 00:04:45,950 So I went to copy all this stuff right here for the star player all the way down to this player to load. 74 00:04:45,990 --> 00:04:48,760 I'm going to cut it and put it inside of billed player 75 00:04:52,160 --> 00:04:57,910 Next up I need to make sure that we have access to the property inside of player so I'll just copy that 76 00:04:57,920 --> 00:05:03,780 destructuring call from right here inside of component and mount down into build player like so. 77 00:05:03,780 --> 00:05:05,350 So now we've got the idea right here. 78 00:05:05,510 --> 00:05:07,520 Easily referenced. 79 00:05:07,600 --> 00:05:11,930 Next up any anytime or component is first mounted to the screen. 80 00:05:11,950 --> 00:05:13,980 We're going to attempt to build the player. 81 00:05:14,440 --> 00:05:19,540 So inside of component in mount I would call this build player. 82 00:05:19,630 --> 00:05:23,740 So now whenever this component is first rendered we're going to attempt to fetch our stream. 83 00:05:23,740 --> 00:05:25,750 We're also going to try to build the player. 84 00:05:26,080 --> 00:05:29,460 So we're going to call build a player if we have not built the player before. 85 00:05:29,590 --> 00:05:34,220 And if we do not have the stream we're going to return. 86 00:05:34,250 --> 00:05:39,310 So that's going to take care of the case of us first loading the page and not yet having access to the 87 00:05:39,310 --> 00:05:41,170 actual Stream. 88 00:05:41,230 --> 00:05:45,640 Now remember component mount is only going to be called one time when the company is first rendered 89 00:05:45,640 --> 00:05:46,470 to the screen. 90 00:05:46,690 --> 00:05:51,500 So just in case we do not yet have access to our stream and we're going to try to fetch it on the fly 91 00:05:51,820 --> 00:05:56,740 we need to have some place to call build player after we successfully fetch the stream. 92 00:05:56,830 --> 00:06:00,890 So to handle that case will define another lifecycle method component. 93 00:06:00,940 --> 00:06:06,610 Did update and inside of here we will also call Bills player. 94 00:06:06,960 --> 00:06:12,500 So now the idea is that when our component first renders attempt to build the player and then if our 95 00:06:12,500 --> 00:06:17,520 component fetches the stream successfully at some point in the future and the component renders component 96 00:06:17,520 --> 00:06:18,880 it update will be called. 97 00:06:19,040 --> 00:06:22,020 And we will attempt to call build player in there as well. 98 00:06:22,400 --> 00:06:28,160 So essentially at any point at this component gets rendered either the initial render or any follow 99 00:06:28,160 --> 00:06:31,310 up render we're always going to attempt to build a player. 100 00:06:31,490 --> 00:06:35,780 But if we've already built it and we already have a player or if we do not have the stream then we're 101 00:06:35,780 --> 00:06:37,370 not going to try to build it. 102 00:06:37,820 --> 00:06:41,660 All right so let's save this and try it out inside of our browser. 103 00:06:42,800 --> 00:06:46,570 So I'll flip back over and I do not see any error message whatsoever. 104 00:06:46,730 --> 00:06:49,220 I can refreshed everything looks good. 105 00:06:49,370 --> 00:06:53,120 I can also go back to the stream index I can refresh the page over here. 106 00:06:53,330 --> 00:06:57,050 Navigate over to a stream and everything still looks good as well. 107 00:06:57,050 --> 00:06:58,280 Perfect. 108 00:06:58,280 --> 00:07:02,450 All right so what you see right here is a good example of how we have some task that we want to do inside 109 00:07:02,450 --> 00:07:03,220 of a component. 110 00:07:03,320 --> 00:07:08,330 And we just need it to happen no matter what be it either when the component first gets rendered or 111 00:07:08,360 --> 00:07:09,320 when it gets re rendered. 112 00:07:09,320 --> 00:07:11,750 At some point in the future. 113 00:07:11,750 --> 00:07:13,270 So I think this looks pretty good. 114 00:07:13,280 --> 00:07:14,730 Let's continue in the next video. 115 00:07:14,810 --> 00:07:18,640 Well we're going to start to test out actual streaming video to our application.