The last section we put some keys onto each list item to make sure that re-act can update the appropriate 2
record in a speedy fashion. 3
Now don't get me wrong for a list of five five items that performance increase is like some milliseconds 4
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
section we're going to focus more on making a list of videos look a lot better than they do currently 6
. 7
Know Right now we just have a bulleted list and it just says you know video. 8
We don't have any idea what the actual video is right now to do so. 9
We're going to be doing a little bit of work on our video list item there. 10
Right now we have our props object. 11
Let's go ahead and define a new variable. 12
Coolest video to pull off the video from the props object. 13
Remember inside a video list when we created our video list item right here we passed in the video as 14
property video. 15
So to get access to the video inside of video list item we have to say props dog video. 16
OK. 17
So this right here definitely works. 18
You know this will retrieve the video but we can use a little bit of six syntax here to give us a slightly 19
different way of pulling off this video property rather than declaring the separate line. 20
I'm going to comment this for a second and I'm going to delete the prop's argument in and stagnant. 21
Put in curly braces and then video. 22
Doing this right here. 23
Curly braces with video is completely identical to Konst video equals Propst out video. 24
All it does is it says the argument. 25
This first object in the arguments to re-appear has a property video. 26
Please grab that video and declare a new video or a new variable called video. 27
So the two of them are totally identical. 28
It's another nice little ESX bit of syntax for you know cleaning up your code just a little bit here 29
. 30
Ok i only a little bit curious what is going on inside of a video. 31
Let's go ahead and console log this and see what data that we have to play around with. 32
So going to save refresh and we get one console log for each video item. 33
So let's look at one of these. 34
So we have the e-TAG which we already saw. 35
We have an ID which has a video ID will need this later and we've got a snippet and the snippet shows 36
some thumbnails which are good a title and a description. 37
So the only property that we really care about here is the snippet object. 38
This is what we really want to get out. 39
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
and add a whole bunch of markup into this component here to get the thing into shape. 41
So let's put this on a new line. 42
Remove the semi colon. 43
There we go. 44
Looks good. 45
Ok so like I said previously we do get bootstrap for free in this project here. 46
So we're going to use some bootstrap classes. 47
You can reference the bootstrap docs if you want to know exactly you know what each of these classes 48
do. 49
But really is just going to kind of pretty up our video list item here a little bit for the we're going 50
to type out a whole bunch of markup here and so we're just going to kind of chars through a little bit 51
and then we'll talk about you know what each of these elements are doing. 52
So let's get to it. 53
This has me a pretty small amount of typing. 54
Let's just do it. 55
So the First off are lie at the top. 56
Going to have a class name list group item and then inside will add a div 57
and a div will have a class name video list space media. 58
Make sure you get that space in there and inside of the div will have another div with a class name 59
of MIDI left 60
in inside of that div will have an image tag. 61
The class name of media object and then we'll do a self-closing tag on the image because nothing is 62
going to go inside of the image tag. 63
OK so we've got our media left right here now. 64
As a sibling to it we'll do a div with the class name of media body 65
and we'll do inside of that. 66
Another div with class name media heading. 67
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
is media left. 69
The other is media body make sure as you're going through here that you are accidentally typing class 70
you should have a class name for all the class names in here. 71
I make this typo all the time. 72
I always end up doing class instead of class name and basically you just end up getting a error over 73
in your terminal. 74
So if you start making some changes and you don't see anything popping up check your terminal over here 75
you might have made a little typo. 76
All right let's go ahead and save this. 77
Just make sure we don't do any typos. 78
Let's do a refresh. 79
We should get Yup something looks like this right here with any content just yet so we'll just have 80
an empty list to get started. 81
So the template that we have has space for an image you know like a thumbnail and a heading media headings 82
like the title of a video. 83
We already saw the properties that we need to get access to the image. 84
You know like a thumbnail for the video and the title of the video as well. 85
So let's pull those off of the video object right now at the top we'll say image you are l. 86
So look at the video Daut snippet thumbnails dot default. 87
You are old and there's really no magic to this. 88
You know this is just part of the response that's coming back from YouTube so it does give us the image 89
you are Eldo which is going to be very useful for our image tag down here. 90
We'll use this image tag to show a thumbnails of video to do so we'll just declare a image source just 91
like if we were using normal HTL saw right as sarcy curly braces image you all curly braces of course 92
because we're referencing a javascript variable inside of our GSX and then we'll do the same thing for 93
the title of the video as well. 94
Will do. 95
Curly braces video that snippet. 96
Title. 97
OK let's see this and see what we got. 98
All right so the text is gigantic but it's looking pretty good. 99
We've got our title of video into a thumbnail for each one and we've got five of them since our default 100
search over index start G-S. 101
As for the term surf boards you know seeing content and surfboards over here. 102
If you want to see some different content you could change this default search term but in a little 103
bit will go ahead and wire up the search input at the top here as well. 104
All right let's get started working on the main video player section in the next section. 105
Ketcher there