1
00:00:00,910 --> 00:00:05,480
Unless section we were able to render out a list of video item components we're now going to make sure

2
00:00:05,510 --> 00:00:10,430
we can customize each of those components by taking the video that we are mapping over and passing it

3
00:00:10,460 --> 00:00:12,800
as a prop down into the video item.

4
00:00:12,800 --> 00:00:18,320
So in the video item right here I'm going to add in a prop called video and I'll pass it the video that

5
00:00:18,320 --> 00:00:21,730
we are currently iterating over.

6
00:00:21,750 --> 00:00:28,950
So now if I go back over to the video Item j file is prop's object is now going to contain a video property

7
00:00:29,010 --> 00:00:35,490
and that contains all the information about this particular video that we want to show as a list.

8
00:00:35,490 --> 00:00:40,410
And so in total we really want to put the title of the video and maybe the kind of thumbnail image for

9
00:00:40,410 --> 00:00:42,270
the video to the left hand side of it as well.

10
00:00:42,270 --> 00:00:46,200
That's not just an icon right there that's supposed to represent an image.

11
00:00:46,200 --> 00:00:50,580
Now let's first focus on figuring out how we can determine what different properties we need to refer

12
00:00:50,580 --> 00:00:52,840
to inside of that video object.

13
00:00:52,830 --> 00:00:57,940
Remember this video object right here is the object that we just got back from the YouTube API.

14
00:00:58,230 --> 00:01:04,820
So in order to figure out what different properties are inside there we can open up our network console

15
00:01:04,820 --> 00:01:05,640
over here.

16
00:01:06,680 --> 00:01:08,190
And do a search.

17
00:01:08,510 --> 00:01:10,500
So all say like buildings.

18
00:01:10,690 --> 00:01:13,210
So now I see the search request right here.

19
00:01:13,340 --> 00:01:16,190
I can click on it and again go to the preview tab.

20
00:01:16,600 --> 00:01:19,460
So remember we are iterating over the list of items.

21
00:01:19,560 --> 00:01:26,430
So inside of each of those objects we have this snippet property and inside of the snippet property

22
00:01:26,790 --> 00:01:28,460
is a title.

23
00:01:28,500 --> 00:01:35,370
So essentially we want to reference video snippet dot title in order to print out the title of any video

24
00:01:35,370 --> 00:01:37,070
on the screen.

25
00:01:37,220 --> 00:01:40,570
So I'm gonna flip back over to my video item.

26
00:01:40,640 --> 00:01:45,440
So this project props object right here now contains that video inside of it.

27
00:01:45,650 --> 00:01:51,350
I'm going to structure just the video out by putting down a set of parentheses and then a set of curly

28
00:01:51,350 --> 00:01:55,630
braces and reference video like so.

29
00:01:55,640 --> 00:02:08,330
So then inside the Stiv I place my curly braces and I could reference video dot snippet dot title.

30
00:02:08,370 --> 00:02:15,060
Now if I save this we can refresh our application do another search for say buildings and I'll see all

31
00:02:15,060 --> 00:02:17,130
of my different titles appear on the screen.

32
00:02:19,280 --> 00:02:19,600
All right.

33
00:02:19,610 --> 00:02:20,280
So not bad.

34
00:02:20,330 --> 00:02:25,720
So we now know that the video item component five of them are appearing on the screen right now.

35
00:02:25,790 --> 00:02:31,360
We have five separate instances of this component and they each are receiving a separate video object.

36
00:02:31,550 --> 00:02:35,570
So we can now kind of pull off all the different properties from the video object right here to make

37
00:02:35,570 --> 00:02:39,050
sure that we show all the appropriate content on this list.

38
00:02:39,050 --> 00:02:40,180
We want the title.

39
00:02:40,190 --> 00:02:42,850
Now we also want an image right next to it.

40
00:02:42,890 --> 00:02:45,790
So let's now try getting an image to display as well.

41
00:02:47,050 --> 00:02:48,730
I'm going to give myself a little bit space here

42
00:02:53,790 --> 00:02:57,410
and don't forget to remove that semi-colon inside the div if you Manue place.

43
00:02:57,450 --> 00:02:58,750
So parentheses.

44
00:02:58,920 --> 00:03:01,600
And then let's say How about right before printing out the title.

45
00:03:01,620 --> 00:03:03,260
I'm going to put an image tag.

46
00:03:03,480 --> 00:03:09,570
And inside if I want to reference the thumbnail for each individual image and pass it to the sarcy property.

47
00:03:10,380 --> 00:03:17,330
So in order to do so I will again look at my request right here that is made when I do a search.

48
00:03:17,340 --> 00:03:22,540
So again I'll look at one of these objects so items at 0 that snippet.

49
00:03:22,680 --> 00:03:25,440
And then there's the thumbnails object inside there.

50
00:03:25,500 --> 00:03:30,420
Now you'll notice inside the thumbnails object we can select from a default quality thumbnail a high

51
00:03:30,420 --> 00:03:32,840
quality thumbnail or a medium quality.

52
00:03:32,940 --> 00:03:39,960
We're going to go with the medium quality thumbnail so if we reference in total video snippet thumbnails

53
00:03:40,380 --> 00:03:41,360
medium.

54
00:03:41,430 --> 00:03:42,270
You are l.

55
00:03:42,360 --> 00:03:46,380
That will give us the u r l to a very single thumbnail.

56
00:03:46,380 --> 00:03:48,890
For a video.

57
00:03:49,060 --> 00:03:56,580
So in total we can go back over here find the sarcy property into a reference video snippet that was

58
00:03:56,680 --> 00:04:02,840
thumbnails dot medium right medium.

59
00:04:02,900 --> 00:04:08,330
You are l like so.

60
00:04:08,510 --> 00:04:11,330
So now if I save this I can flip back over.

61
00:04:11,420 --> 00:04:17,030
We can do a search a second time again all do buildings and I start to see my thumbnails appear on the

62
00:04:17,030 --> 00:04:20,240
screen awesome.

63
00:04:20,420 --> 00:04:25,550
All right this is good progress but as you can tell we've got some gigantic images here and we really

64
00:04:25,550 --> 00:04:28,500
want them to be better style than they're currently showing up.

65
00:04:28,640 --> 00:04:31,040
So let's take another pause when we come back in the next section.

66
00:04:31,100 --> 00:04:35,480
We're going to use semantic UI to add a little bit of styling to each of these and make sure that they

67
00:04:35,480 --> 00:04:38,000
show up a little bit better than they are currently.

68
00:04:38,000 --> 00:04:40,390
So another quick puzzle I'll see you in just a minute.