An last video we set up a bunch of stuff around the Felty player but then we very quickly got confronted
with a nasty error message here.
It's kind of hard to decipher what's going on with this error message but you'll notice in sight of
this component in Mount print up right here it appears that things are starting to go wrong.
When we tried to attach the media player to the video player ref.
So let's try adding a console log of the video ref inside of component dismount and figure out what's
going wrong.
So inside of component amount going to add a console that log for this video ref and I'll save this
and we'll see what happens.
OK.
So I still see the same error message inside my console over here.
And scroll up just a little bit and I'll see the console log right here.
So it says Current is null.
Now why could that be.
This essentially means that we are not getting the correct reference to that video element.
Well let's kind of think about this a little bit.
If we go down to a render method you'll recall that we have a little bit of a check inside of here and
we say if we do not yet have access to our stream then we're going to just show a div with loading.
So when our component first renders if we don't have the stream we are not creating the video element
at all.
Instead we just immediately return the Stiv right here.
We never create the video and we never attach our ref to that video element.
So that's essentially what's happening when our component first gets rendered.
We're making the div.
The video does not get created because we do not yet have our stream.
However I bet you anything that if we dismiss this message right here or excuse me we don't need to
dismiss it we can just go back to localhost 3000.
And then if we then attempt to click on one of these elements we will see the video player appear successfully.
That's because if we go back to the original list screen we're going to load up the stream with the
idea of one.
And so that's going to be inside of our redux store when we then attempt to render streams show we are
already in control of the appropriate stream.
So we don't encounter this case where we have not yet loaded up.
However if we refresh the page while we are here then we have to wait for the Ajax request or the network
request to be completed to go and get that stream object.
And that's the case where we run into this error message right here.
So how can we fix this.
Well there's more than one way to do it.
We can either say that we do not want to render anything inside this component until we fetch the stream
and essentially continue what we're doing right here and then add in some better logic inside of component
and mount to decide whether or not we are actually ready to attempt to attach the video player to the
video ref.
Alternatively because our render method or the entire component itself only tries to print up the title
and description from the stream.
We could only guard against printing out the H1 and h 5 right here until we actually get the stream.
So in other words always try to show the video player but wait to show the title and description until
we get the stream.
So we get totally do that approach because the video player does not actually depend upon the stream
being fetched.
Now that would be a really easy approach or real easy solution but I want to show you the slightly more
complicated solution where we're going to essentially make sure that we do not attempt to attach that
video player until we successfully get the stream because I think that's more realistic of what's going
to happen in real life.
The reason I say it's more realistic is because when we specify the you are right here raising the ID
which is already known ahead of time before we load up the appropriate stream.
But it's entirely possible that the oil right here might need to reference some property inside of our
stream object in order to side what the actual R L is.
So we might need to reference some like I don't know internal stream or id or streamer tokin or something
like that when specifying the You Are All Right here.
And if we wanted to do that we would definitely need to have access to the stream.
All right.
Now that we understand what's going on here I'm going to remove the console lock.
So now inside of this component we only want to attempt to set up this video player right here after
we know that the appropriate stream has been actually fetched.
So here's what we're going to do.
I'm going to define another helper method inside this component and I'm going to call it build.
Player like so then inside if you're going to put a IF statement.
I'm going to say if this player exists in the words if we have already set up the player or if this
Propst stream does not exist.
So notice the not right there.
So if we already have a player or if the stream does not yet exist then just return.
Otherwise we want to go to the process of setting up our player.
So I went to copy all this stuff right here for the star player all the way down to this player to load.
I'm going to cut it and put it inside of billed player
Next up I need to make sure that we have access to the property inside of player so I'll just copy that
destructuring call from right here inside of component and mount down into build player like so.
So now we've got the idea right here.
Easily referenced.
Next up any anytime or component is first mounted to the screen.
We're going to attempt to build the player.
So inside of component in mount I would call this build player.
So now whenever this component is first rendered we're going to attempt to fetch our stream.
We're also going to try to build the player.
So we're going to call build a player if we have not built the player before.
And if we do not have the stream we're going to return.
So that's going to take care of the case of us first loading the page and not yet having access to the
actual Stream.
Now remember component mount is only going to be called one time when the company is first rendered
to the screen.
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
we need to have some place to call build player after we successfully fetch the stream.
So to handle that case will define another lifecycle method component.
Did update and inside of here we will also call Bills player.
So now the idea is that when our component first renders attempt to build the player and then if our
component fetches the stream successfully at some point in the future and the component renders component
it update will be called.
And we will attempt to call build player in there as well.
So essentially at any point at this component gets rendered either the initial render or any follow
up render we're always going to attempt to build a player.
But if we've already built it and we already have a player or if we do not have the stream then we're
not going to try to build it.
All right so let's save this and try it out inside of our browser.
So I'll flip back over and I do not see any error message whatsoever.
I can refreshed everything looks good.
I can also go back to the stream index I can refresh the page over here.
Navigate over to a stream and everything still looks good as well.
Perfect.
All right so what you see right here is a good example of how we have some task that we want to do inside
of a component.
And we just need it to happen no matter what be it either when the component first gets rendered or
when it gets re rendered.
At some point in the future.
So I think this looks pretty good.
Let's continue in the next video.
Well we're going to start to test out actual streaming video to our application.