In the last video we got our video player working.
But I made a big deal about the fact that if we have our video streaming and then we go back over to
our index page and then we stop our stream.
It's going to stop my stream right now.
We then very quickly see an error message or a little console log inside of our javascript console.
So in this video I want to figure out what is going on there.
Well essentially what's going on is that our streams show component.
Remember this thing is creating AFL the video player.
When our component is unmounted from the DOM.
In other words when we navigate away from the stream show component there is no code that tells this
video player that we create to stop streaming video from our video server.
So essentially even though we are no longer looking at that video player the video player is still attempting
to download and process video.
And that's why when we stop our stream we eventually see this console log over here of media source
on source and it is because that video player is still connected to that stream.
And it was still trying to receive new information.
Now as you might guess we probably don't want to try to download a stream or process any of that video
when the video player is not present on the screen.
So in this section we're going to figure out how to deal with that.
If you recall something we spoke about way long ago in the course when we are talking about lifecycle
methods we had spoken about how we had lifecycle methods like component did mount and did update and
we also had another one called component will on Mount.
So let's add that into our component right now component will unmount when we spoke about this we had
said that this was a great lifecycle to method to use any time that we wanted to clean up some resources
that were being used by our component lets out in the console like here right now.
We'll just say something like I was on mounted I'm going to save this.
Then flip back over to my application on navigate to the stream show page and then I will navigate away
for it.
You'll see that's when the console log appears.
So like I just said component will and mount is a perfect place to do a little bit of cleanup and take
care of any resources that our component might have created.
So to handle that inside of component will unmount.
I'm going to remove that console log and we're going to attempt to clean up this video player resource
so to do so.
I'm going to call this star player.
Don't destroy like so when we call destroy on the player it's going to essentially tell the player to
stop attempting to stream video and detach itself from that video element that we had created down inside
of that render method.
All right.
Let's try this out again now with the component will on mt life cycle method inside of your screen when
to flip back on which my application I'm going to refresh the page I'm going to pull open OBSS again
and I'm going to start streaming and then I'll go to the same stream.
I was going to before remember you have to make sure you go to that appropriate stream ID.
Now I can start the video playing now I will go back to the index page.
I'll go back over to OBSS and I'll stop the stream.
And now I no longer see a message over here saying oh yeah.
Media source ended or something like that because when we navigated away we cleaned up that video player
and it's no longer attempting to download any video.
All right so that's it.
That's the last little piece of functionality that we had to add to our application.
All right.
So I hope you enjoy this application.
I know this was a rather long project that we put together but I thought it was a pretty neat little
project that we did.
So we have the ability to have users stream video to these different streams which is something that
is you know just generally kind of interesting.
Now I do want to mention the one obvious limitation to this application we put together is that right
now any user can stream any video to like any stream so long as you have that stream ID you can send
a video to it.
Now in this case I would kind of call that a feature.
So you know I don't know maybe I'll call that a feature.
Obvious it's obviously it's a little bit of a limitation of our program.
Ideally we would have only the user who owns or created a stream able to stream video to a given Stream.
Now that would be ideal but that would require a pretty good amount of work on the back end of our application
which I didn't really think that we would probably want to go through inside of a reaction redux course.
Having said that I do hope you enjoyed the application and we still have some other stuff to go through.
So let's take a quick pause right here and we'll continue in the next video.