1

00:00:01,200  -->  00:00:06,690
The last section we put some keys onto each list item to make sure that re-act can update the appropriate

2

00:00:06,690  -->  00:00:09,120
record in a speedy fashion.

3

00:00:09,120  -->  00:00:14,540
Now don't get me wrong for a list of five five items that performance increase is like some milliseconds

4

00:00:14,550  -->  00:00:21,170
here but it's a really good practice to get into to make sure you always add a key in this book in this

5

00:00:21,180  -->  00:00:25,890
section we're going to focus more on making a list of videos look a lot better than they do currently

6

00:00:25,910  -->  00:00:26,340
.

7

00:00:26,400  -->  00:00:30,400
Know Right now we just have a bulleted list and it just says you know video.

8

00:00:30,520  -->  00:00:36,240
We don't have any idea what the actual video is right now to do so.

9

00:00:36,300  -->  00:00:42,350
We're going to be doing a little bit of work on our video list item there.

10

00:00:42,450  -->  00:00:45,690
Right now we have our props object.

11

00:00:46,860  -->  00:00:52,850
Let's go ahead and define a new variable.

12

00:00:53,640  -->  00:00:57,620
Coolest video to pull off the video from the props object.

13

00:00:57,670  -->  00:01:05,580
Remember inside a video list when we created our video list item right here we passed in the video as

14

00:01:05,580  -->  00:01:06,910
property video.

15

00:01:07,140  -->  00:01:12,850
So to get access to the video inside of video list item we have to say props dog video.

16

00:01:13,140  -->  00:01:13,770
OK.

17

00:01:14,100  -->  00:01:15,800
So this right here definitely works.

18

00:01:15,800  -->  00:01:22,350
You know this will retrieve the video but we can use a little bit of six syntax here to give us a slightly

19

00:01:22,350  -->  00:01:28,710
different way of pulling off this video property rather than declaring the separate line.

20

00:01:28,740  -->  00:01:34,070
I'm going to comment this for a second and I'm going to delete the prop's argument in and stagnant.

21

00:01:34,080  -->  00:01:38,880
Put in curly braces and then video.

22

00:01:38,910  -->  00:01:40,140
Doing this right here.

23

00:01:40,140  -->  00:01:46,260
Curly braces with video is completely identical to Konst video equals Propst out video.

24

00:01:46,260  -->  00:01:49,050
All it does is it says the argument.

25

00:01:49,050  -->  00:01:53,270
This first object in the arguments to re-appear has a property video.

26

00:01:53,280  -->  00:02:00,360
Please grab that video and declare a new video or a new variable called video.

27

00:02:00,360  -->  00:02:02,480
So the two of them are totally identical.

28

00:02:02,490  -->  00:02:07,200
It's another nice little ESX bit of syntax for you know cleaning up your code just a little bit here

29

00:02:07,240  -->  00:02:08,150
.

30

00:02:09,100  -->  00:02:14,010
Ok i only a little bit curious what is going on inside of a video.

31

00:02:14,100  -->  00:02:19,350
Let's go ahead and console log this and see what data that we have to play around with.

32

00:02:19,380  -->  00:02:26,480
So going to save refresh and we get one console log for each video item.

33

00:02:26,610  -->  00:02:28,000
So let's look at one of these.

34

00:02:28,290  -->  00:02:32,040
So we have the e-TAG which we already saw.

35

00:02:32,040  -->  00:02:39,960
We have an ID which has a video ID will need this later and we've got a snippet and the snippet shows

36

00:02:40,830  -->  00:02:45,180
some thumbnails which are good a title and a description.

37

00:02:45,930  -->  00:02:49,770
So the only property that we really care about here is the snippet object.

38

00:02:49,770  -->  00:02:52,020
This is what we really want to get out.

39

00:02:52,710  -->  00:02:59,160
OK I'm going to back over in video a list item and remove the console log and we're going to go ahead

40

00:02:59,190  -->  00:03:08,070
and add a whole bunch of markup into this component here to get the thing into shape.

41

00:03:08,340  -->  00:03:10,980
So let's put this on a new line.

42

00:03:11,150  -->  00:03:12,690
Remove the semi colon.

43

00:03:12,690  -->  00:03:13,140
There we go.

44

00:03:13,140  -->  00:03:13,790
Looks good.

45

00:03:13,990  -->  00:03:19,500
Ok so like I said previously we do get bootstrap for free in this project here.

46

00:03:19,620  -->  00:03:22,650
So we're going to use some bootstrap classes.

47

00:03:22,650  -->  00:03:26,250
You can reference the bootstrap docs if you want to know exactly you know what each of these classes

48

00:03:26,250  -->  00:03:27,120
do.

49

00:03:27,410  -->  00:03:33,720
But really is just going to kind of pretty up our video list item here a little bit for the we're going

50

00:03:33,720  -->  00:03:37,710
to type out a whole bunch of markup here and so we're just going to kind of chars through a little bit

51

00:03:37,710  -->  00:03:41,750
and then we'll talk about you know what each of these elements are doing.

52

00:03:41,940  -->  00:03:42,750
So let's get to it.

53

00:03:42,760  -->  00:03:45,860
This has me a pretty small amount of typing.

54

00:03:46,550  -->  00:03:47,450
Let's just do it.

55

00:03:47,760  -->  00:03:50,140
So the First off are lie at the top.

56

00:03:50,190  -->  00:03:58,380
Going to have a class name list group item and then inside will add a div

57

00:04:04,050  -->  00:04:11,490
and a div will have a class name video list space media.

58

00:04:11,490  -->  00:04:18,690
Make sure you get that space in there and inside of the div will have another div with a class name

59

00:04:18,690  -->  00:04:20,670
of MIDI left

60

00:04:24,990  -->  00:04:28,570
in inside of that div will have an image tag.

61

00:04:29,070  -->  00:04:37,140
The class name of media object and then we'll do a self-closing tag on the image because nothing is

62

00:04:37,140  -->  00:04:39,010
going to go inside of the image tag.

63

00:04:39,480  -->  00:04:43,300
OK so we've got our media left right here now.

64

00:04:43,320  -->  00:04:49,890
As a sibling to it we'll do a div with the class name of media body

65

00:04:53,190  -->  00:04:54,570
and we'll do inside of that.

66

00:04:54,570  -->  00:05:00,760
Another div with class name media heading.

67

00:05:01,600  -->  00:05:11,700
OK so they basically we've got a top level ally and then we've got a div with two children one of which

68

00:05:11,700  -->  00:05:12,970
is media left.

69

00:05:12,990  -->  00:05:20,400
The other is media body make sure as you're going through here that you are accidentally typing class

70

00:05:20,420  -->  00:05:23,110
you should have a class name for all the class names in here.

71

00:05:23,490  -->  00:05:24,980
I make this typo all the time.

72

00:05:24,990  -->  00:05:30,300
I always end up doing class instead of class name and basically you just end up getting a error over

73

00:05:30,300  -->  00:05:31,310
in your terminal.

74

00:05:31,500  -->  00:05:37,230
So if you start making some changes and you don't see anything popping up check your terminal over here

75

00:05:37,230  -->  00:05:39,150
you might have made a little typo.

76

00:05:39,810  -->  00:05:43,490
All right let's go ahead and save this.

77

00:05:43,500  -->  00:05:45,030
Just make sure we don't do any typos.

78

00:05:45,030  -->  00:05:46,980
Let's do a refresh.

79

00:05:46,980  -->  00:05:51,180
We should get Yup something looks like this right here with any content just yet so we'll just have

80

00:05:51,180  -->  00:05:54,860
an empty list to get started.

81

00:05:56,820  -->  00:06:03,670
So the template that we have has space for an image you know like a thumbnail and a heading media headings

82

00:06:03,720  -->  00:06:05,870
like the title of a video.

83

00:06:06,810  -->  00:06:10,280
We already saw the properties that we need to get access to the image.

84

00:06:10,290  -->  00:06:14,010
You know like a thumbnail for the video and the title of the video as well.

85

00:06:14,310  -->  00:06:21,470
So let's pull those off of the video object right now at the top we'll say image you are l.

86

00:06:21,540  -->  00:06:29,040
So look at the video Daut snippet thumbnails dot default.

87

00:06:29,070  -->  00:06:31,890
You are old and there's really no magic to this.

88

00:06:31,890  -->  00:06:37,500
You know this is just part of the response that's coming back from YouTube so it does give us the image

89

00:06:37,500  -->  00:06:41,970
you are Eldo which is going to be very useful for our image tag down here.

90

00:06:41,970  -->  00:06:48,480
We'll use this image tag to show a thumbnails of video to do so we'll just declare a image source just

91

00:06:48,480  -->  00:06:57,240
like if we were using normal HTL saw right as sarcy curly braces image you all curly braces of course

92

00:06:57,240  -->  00:07:03,630
because we're referencing a javascript variable inside of our GSX and then we'll do the same thing for

93

00:07:03,630  -->  00:07:05,920
the title of the video as well.

94

00:07:06,120  -->  00:07:07,110
Will do.

95

00:07:07,110  -->  00:07:11,340
Curly braces video that snippet.

96

00:07:11,520  -->  00:07:12,750
Title.

97

00:07:13,540  -->  00:07:18,510
OK let's see this and see what we got.

98

00:07:18,540  -->  00:07:23,260
All right so the text is gigantic but it's looking pretty good.

99

00:07:23,310  -->  00:07:30,240
We've got our title of video into a thumbnail for each one and we've got five of them since our default

100

00:07:30,240  -->  00:07:34,330
search over index start G-S.

101

00:07:34,330  -->  00:07:38,660
As for the term surf boards you know seeing content and surfboards over here.

102

00:07:38,820  -->  00:07:43,020
If you want to see some different content you could change this default search term but in a little

103

00:07:43,020  -->  00:07:47,300
bit will go ahead and wire up the search input at the top here as well.

104

00:07:47,310  -->  00:07:53,020
All right let's get started working on the main video player section in the next section.

105

00:07:53,130  -->  00:07:53,670
Ketcher there