1
00:00:00,750 --> 00:00:05,560
Unless section we added in a little bit of styling to the video item component one of the rules we put

2
00:00:05,560 --> 00:00:07,060
together inside the CSSA file.

3
00:00:07,060 --> 00:00:08,680
I kind of brushed over.

4
00:00:08,770 --> 00:00:13,800
If you open up the CSSA file right now you'll see that we had a rule of cursor pointer right there.

5
00:00:13,870 --> 00:00:14,960
So what's that rule do.

6
00:00:15,160 --> 00:00:20,170
Well if you mouseover and need these items Now you'll notice that your cursor itself turns into a little

7
00:00:20,200 --> 00:00:22,150
kind of clicky icon.

8
00:00:22,210 --> 00:00:26,890
Remember the entire goal of this application is to make sure that you can search for lists of videos

9
00:00:27,070 --> 00:00:30,780
and then that you can click one on the right hand side over here.

10
00:00:30,940 --> 00:00:36,640
When you click on the video we want to show a big detail on that one and show a player in its title

11
00:00:36,640 --> 00:00:38,370
in its description underneath it.

12
00:00:38,620 --> 00:00:43,120
So the reason we put in that pointer was to make sure there was clear to our users that they could click

13
00:00:43,180 --> 00:00:49,600
on this item right here and see that video appear on the screen and it starts to open up a really interesting

14
00:00:49,600 --> 00:00:52,900
topic that we're going to run into inside this application.

15
00:00:52,930 --> 00:00:58,450
How are we going to make sure that clicking on this thing right here is going to open up a detail window

16
00:00:58,450 --> 00:00:59,370
of sorts.

17
00:00:59,590 --> 00:01:03,340
Well let's take a look at a couple different diagrams to help you understand exactly how that's going

18
00:01:03,340 --> 00:01:03,890
to work.

19
00:01:04,890 --> 00:01:05,590
All right.

20
00:01:06,970 --> 00:01:09,690
So here's what we're going to do on our app component.

21
00:01:09,760 --> 00:01:12,590
We currently have our state property with a single.

22
00:01:12,640 --> 00:01:15,090
Or our state object with a single property on it.

23
00:01:15,130 --> 00:01:21,380
The video is property that has an array of video objects that we have retrieved from the YouTube API.

24
00:01:21,760 --> 00:01:28,720
We're going to add on a second property to that state object called selected video whenever a user clicks

25
00:01:28,720 --> 00:01:29,710
on a video.

26
00:01:29,770 --> 00:01:35,650
We're going to take the video object or the thing that we got back from the YouTube API and we are going

27
00:01:35,650 --> 00:01:42,580
to assign it to that selected video property then any time that we have a selected video property we're

28
00:01:42,580 --> 00:01:48,310
going to make sure that we pass that video like this one right here down to the video detail component

29
00:01:48,700 --> 00:01:52,110
and that will tell the video detail what it needs to show on the screen.

30
00:01:52,850 --> 00:01:56,180
So that's what's going to happen from the perspective of the app component.

31
00:01:56,180 --> 00:02:00,740
We're just going to add on this new state property and it's going to reference the current video that

32
00:02:00,740 --> 00:02:07,400
the video details are going to show now where things start to get a little bit more complicated is understanding

33
00:02:07,400 --> 00:02:13,700
how we're going to update that selected video property whenever a user clicks on one of these things

34
00:02:13,700 --> 00:02:14,560
over here.

35
00:02:14,600 --> 00:02:21,440
So we essentially want to say that if I click on this it should update the stay state of my app component.

36
00:02:21,440 --> 00:02:24,400
So like I said that's where things start to get a little bit more challenging.

37
00:02:24,680 --> 00:02:29,110
So to take a look at a diagram to help you understand exactly what's going to go on with this.

38
00:02:29,120 --> 00:02:29,340
All right.

39
00:02:29,350 --> 00:02:31,740
The Seagram is a little bit more complicated.

40
00:02:31,850 --> 00:02:33,120
All right so here it is in total.

41
00:02:33,140 --> 00:02:35,760
Bear with me we'll go through it step by step.

42
00:02:35,840 --> 00:02:37,590
I'm going to zoom in here really quickly.

43
00:02:38,670 --> 00:02:38,900
All right.

44
00:02:38,900 --> 00:02:40,070
That's better.

45
00:02:40,080 --> 00:02:46,570
So at the very top we have our app component the app component has the list of videos and as you very

46
00:02:46,570 --> 00:02:51,570
well know the component is passing that list of videos down to the video list.

47
00:02:51,580 --> 00:02:55,250
So here's the prop's object going from app down to video list.

48
00:02:55,360 --> 00:02:57,120
And there's the videos property.

49
00:02:57,160 --> 00:03:02,170
It has the array of all the different videos in addition to that list of videos we're going to pass

50
00:03:02,260 --> 00:03:05,140
a callback down there as well.

51
00:03:05,140 --> 00:03:09,650
So the app is going to pass a reference to a callback down to the video list.

52
00:03:09,820 --> 00:03:17,070
And that is going to be called the on video select Propp the video list in turn is going to take that

53
00:03:17,070 --> 00:03:24,420
call back on video select and pass it down to each of these different video items each video item currently

54
00:03:24,420 --> 00:03:31,330
is receiving a props object with a single video labeled as the prop called video.

55
00:03:31,410 --> 00:03:36,870
So they will also now be getting a second prop called the on video slide callback that's going to be

56
00:03:36,870 --> 00:03:41,730
the exact same function that was passed from the app to the video list.

57
00:03:41,730 --> 00:03:47,190
So essentially what we're doing here is we are adding a new method to the app component and we are passing

58
00:03:47,220 --> 00:03:53,730
a reference to that method a reference to that function down first to the video list and then down to

59
00:03:53,730 --> 00:04:00,560
the video item then any time that the user clicks on the video item we're going to tell the video item

60
00:04:00,740 --> 00:04:03,380
to call that callback right there.

61
00:04:03,710 --> 00:04:09,050
And when it calls that call back it's going to pass in the video that it had been passed as well.

62
00:04:09,050 --> 00:04:14,740
So you can imagine that this single video right here will be thrown into the on video select callback

63
00:04:15,910 --> 00:04:19,320
so we throw it into that callback.

64
00:04:19,330 --> 00:04:25,750
And so what that does is it invokes a function or invokes a method on the app component with the video

65
00:04:25,840 --> 00:04:27,910
object that was just clicked on.

66
00:04:27,910 --> 00:04:33,430
So then the app component can update its state and say that the new currently selected video is whatever

67
00:04:33,430 --> 00:04:35,340
the user just clicked on.

68
00:04:35,340 --> 00:04:37,810
Now that's what's happening in Diagram format.

69
00:04:37,810 --> 00:04:40,060
If that is really confusing or unclear.

70
00:04:40,180 --> 00:04:44,020
Don't sweat it because as soon as we write up this code we're going to come back to this diagram and

71
00:04:44,020 --> 00:04:46,060
walk through it very quickly a second time.

72
00:04:46,120 --> 00:04:50,100
And I think at that point you'll become a little bit more clear as to what is going on.

73
00:04:50,110 --> 00:04:50,320
All right.

74
00:04:50,320 --> 00:04:51,490
So let's take a pause right here.

75
00:04:51,520 --> 00:04:55,780
When we come back the next section we're going to start to create this new selective video piece of

76
00:04:55,780 --> 00:05:01,780
state and also the on video select callback and pass it down to the video list and then to the video

77
00:05:01,810 --> 00:05:02,470
item.

78
00:05:02,500 --> 00:05:04,480
So quick pause I'll see you in just a minute.