1
00:00:00,910 --> 00:00:03,120
In the last video we got our video player working.

2
00:00:03,220 --> 00:00:08,140
But I made a big deal about the fact that if we have our video streaming and then we go back over to

3
00:00:08,140 --> 00:00:11,570
our index page and then we stop our stream.

4
00:00:11,650 --> 00:00:13,430
It's going to stop my stream right now.

5
00:00:13,450 --> 00:00:18,420
We then very quickly see an error message or a little console log inside of our javascript console.

6
00:00:18,430 --> 00:00:20,790
So in this video I want to figure out what is going on there.

7
00:00:20,950 --> 00:00:24,910
Well essentially what's going on is that our streams show component.

8
00:00:24,910 --> 00:00:28,780
Remember this thing is creating AFL the video player.

9
00:00:28,780 --> 00:00:31,680
When our component is unmounted from the DOM.

10
00:00:31,690 --> 00:00:36,730
In other words when we navigate away from the stream show component there is no code that tells this

11
00:00:36,730 --> 00:00:41,280
video player that we create to stop streaming video from our video server.

12
00:00:41,500 --> 00:00:46,870
So essentially even though we are no longer looking at that video player the video player is still attempting

13
00:00:46,870 --> 00:00:49,030
to download and process video.

14
00:00:49,240 --> 00:00:54,040
And that's why when we stop our stream we eventually see this console log over here of media source

15
00:00:54,040 --> 00:00:58,130
on source and it is because that video player is still connected to that stream.

16
00:00:58,210 --> 00:01:01,060
And it was still trying to receive new information.

17
00:01:01,120 --> 00:01:06,220
Now as you might guess we probably don't want to try to download a stream or process any of that video

18
00:01:06,400 --> 00:01:09,220
when the video player is not present on the screen.

19
00:01:09,220 --> 00:01:12,360
So in this section we're going to figure out how to deal with that.

20
00:01:12,580 --> 00:01:17,290
If you recall something we spoke about way long ago in the course when we are talking about lifecycle

21
00:01:17,320 --> 00:01:22,750
methods we had spoken about how we had lifecycle methods like component did mount and did update and

22
00:01:22,750 --> 00:01:26,950
we also had another one called component will on Mount.

23
00:01:27,160 --> 00:01:34,630
So let's add that into our component right now component will unmount when we spoke about this we had

24
00:01:34,630 --> 00:01:40,060
said that this was a great lifecycle to method to use any time that we wanted to clean up some resources

25
00:01:40,060 --> 00:01:44,100
that were being used by our component lets out in the console like here right now.

26
00:01:44,110 --> 00:01:49,060
We'll just say something like I was on mounted I'm going to save this.

27
00:01:49,060 --> 00:01:54,810
Then flip back over to my application on navigate to the stream show page and then I will navigate away

28
00:01:54,820 --> 00:01:55,400
for it.

29
00:01:55,400 --> 00:01:57,820
You'll see that's when the console log appears.

30
00:01:57,820 --> 00:02:03,610
So like I just said component will and mount is a perfect place to do a little bit of cleanup and take

31
00:02:03,610 --> 00:02:07,290
care of any resources that our component might have created.

32
00:02:07,470 --> 00:02:10,710
So to handle that inside of component will unmount.

33
00:02:10,750 --> 00:02:15,820
I'm going to remove that console log and we're going to attempt to clean up this video player resource

34
00:02:16,240 --> 00:02:17,100
so to do so.

35
00:02:17,110 --> 00:02:19,410
I'm going to call this star player.

36
00:02:19,420 --> 00:02:25,930
Don't destroy like so when we call destroy on the player it's going to essentially tell the player to

37
00:02:25,930 --> 00:02:31,540
stop attempting to stream video and detach itself from that video element that we had created down inside

38
00:02:31,540 --> 00:02:32,730
of that render method.

39
00:02:33,800 --> 00:02:34,110
All right.

40
00:02:34,130 --> 00:02:40,340
Let's try this out again now with the component will on mt life cycle method inside of your screen when

41
00:02:40,370 --> 00:02:46,990
to flip back on which my application I'm going to refresh the page I'm going to pull open OBSS again

42
00:02:47,210 --> 00:02:51,160
and I'm going to start streaming and then I'll go to the same stream.

43
00:02:51,160 --> 00:02:55,680
I was going to before remember you have to make sure you go to that appropriate stream ID.

44
00:02:56,060 --> 00:03:02,980
Now I can start the video playing now I will go back to the index page.

45
00:03:03,620 --> 00:03:06,280
I'll go back over to OBSS and I'll stop the stream.

46
00:03:06,380 --> 00:03:10,080
And now I no longer see a message over here saying oh yeah.

47
00:03:10,260 --> 00:03:15,590
Media source ended or something like that because when we navigated away we cleaned up that video player

48
00:03:15,650 --> 00:03:18,810
and it's no longer attempting to download any video.

49
00:03:19,220 --> 00:03:20,180
All right so that's it.

50
00:03:20,210 --> 00:03:24,380
That's the last little piece of functionality that we had to add to our application.

51
00:03:24,380 --> 00:03:24,740
All right.

52
00:03:24,740 --> 00:03:26,330
So I hope you enjoy this application.

53
00:03:26,330 --> 00:03:30,890
I know this was a rather long project that we put together but I thought it was a pretty neat little

54
00:03:30,890 --> 00:03:32,430
project that we did.

55
00:03:32,720 --> 00:03:37,550
So we have the ability to have users stream video to these different streams which is something that

56
00:03:37,550 --> 00:03:40,130
is you know just generally kind of interesting.

57
00:03:40,130 --> 00:03:45,290
Now I do want to mention the one obvious limitation to this application we put together is that right

58
00:03:45,290 --> 00:03:51,680
now any user can stream any video to like any stream so long as you have that stream ID you can send

59
00:03:51,680 --> 00:03:52,840
a video to it.

60
00:03:52,850 --> 00:03:55,350
Now in this case I would kind of call that a feature.

61
00:03:55,370 --> 00:03:58,210
So you know I don't know maybe I'll call that a feature.

62
00:03:58,250 --> 00:04:01,640
Obvious it's obviously it's a little bit of a limitation of our program.

63
00:04:01,640 --> 00:04:07,690
Ideally we would have only the user who owns or created a stream able to stream video to a given Stream.

64
00:04:07,700 --> 00:04:12,530
Now that would be ideal but that would require a pretty good amount of work on the back end of our application

65
00:04:12,770 --> 00:04:18,550
which I didn't really think that we would probably want to go through inside of a reaction redux course.

66
00:04:18,590 --> 00:04:22,970
Having said that I do hope you enjoyed the application and we still have some other stuff to go through.

67
00:04:22,970 --> 00:04:26,480
So let's take a quick pause right here and we'll continue in the next video.