Build Youtube in React 08: Home Feed and Video Grid

1 Youtube Home Feed video grid

In the last tutorial, we started building out Home feed components. Let’s look at our mockup again.

Click on the image to see it in high resolution.

As of now, we have a component which can show video video preview elements.

Click on the image to see it in high resolution.

2 Introducing VideoGrid component

Youtube shows suggestions for interesting topics grouped by a certain topic. The videos are shown in a grid. Typically we have 12 videos per topic or category. Let’s create a component that creates a proper grid view of the available videos.

Because the VideoGrid component will only be responsible for lay-outing VideoPreview components properly, it will probably not be connected to our Redux state later on. Therefore, we consider it a presentational component and will put it into src/components.

2.1. Creating VideoGrid component files

1. Create a directory called VideoGrid inside src/components
2. Create a VideoGrid.js and VideoGrid.scss file inside the directory you have just created

2.2. Design VideoGrid component.

That’s any easy one. This component will show a list of available videos grouped by a specific topic (e.g. entertainment, cars). For each topic, 12 VideoPreview components are displayed. Since we haven’t connected our app to the Youtube API backend, we will show some placeholder VideoPreview elements. Later on we will of course generate them using loops and real data. Therefore, the current markup could look a little bit weird 😁.

Our CSS is pretty straight forward. The .video-grid element is a flex container hat aligns its elements horizontally. We’ve added flex-wrap: wrap so that in case there is not enough room, the VideoPreview elements will wrap to the next line. Without specifying this property, flexbox would try to cram all VideoPreview elements into one single row.

We also want our grid to add some spacing between the VideoPreview items. That’s why we give every direct descendant of the .video-grid element, i.e. every VideoPreview a margin on the left and a margin at the bottom.

One row in a video grid should hold at most six VideoPreview elements. We’re going to enforce that in our Home component in the next section. The VideoGrid element should not have any max widths so that it remains flexible

2.3 Updating Home component

To see what we have achieved so far, we should update our Home component and make use of our VideoGrid components.

Update your src/containers/Home/Home.js to

Wow, wait what are these CSS classes? Since we want our Home feed to look similar to Youtube’s we must centre our video grids horizontally. Therefore, we need a little bit of CSS tweaking.

We’re making use of one of the most modern CSS modules: CSS Grid (or Grid in short). If you are not familiar with CSS grid, I highly recommend you read a little bit about it here.

It’s basically Flexbox just for two dimensions. Flexbox and CSS Grid actually work really well together.

2.4 Updating Home component styling

Grid will save you so much time and effort once you have picked it up. I promise.

What are we doing here? We are making our .home element a grid container by setting display: grid. We only want to have one row and one column because Grid makes it easy to horizontally center our elements. Therefore, we’re telling Grid we want one column and one row and it should figure out their widths on its own by setting grid: auto / auto.

We also force our grid to horizontally centre its children  by setting justify-content: center. And then we insert the only child of our grid with a class of .responsive-video-grid-container. This element is responsible for capping the maximum size of our VideoGrid elements. Our VideoGrid element will try to place all VideoPreview items in one row unless there is not enough space. If there’s not enough space, it will wrap. However, we want our VideoPreview items to be nicely centred. Therefore we limit the width of our VideoGrid elements by using media queries.

Try it on your own. The maximum amount of VideoPreview items should in one row is six. If you make make your browser window smaller you will notice that suddenly, you only see five elements in one row. We do this so our Home feed still looks nice on smaller screens.

And this is what we get.

Click on the image to see it in high resolution.

Looks ok, but the spacing is not quite right. Let’s fix that.

2.5 Adding VideoGridHeader element

If you have a closer look at each video section heading, you’ll notice that there are some spacing issues. Since we might want to add more content to our heading later on, let’s just put it into a simple component.

1. Create a new directory inside the VideoGrid directory and call it VideoGridHeader
2. Create a VideoGridHeader.js and a VideoGridHeader.scss file in the directory you just created

As you can see, it’s just a little bit of cosmetics.

Let’s also update our VideoGrid component. Just replace the <h4> tag with our new VideoGridHeader component like so:

This looks much better. But there’s one more thing with the video grid dividers

2.6 Make video grid dividers removable

Now you may have noticed that we get a grey divider line at the bottom of our video grids. While this is useful to better group videos of the same categories, it doesn’t really make sense for the last VideoGrid element that is rendered. Therefore, let’s fix this:

We just introduce a hideDivider prop that can be used to hide the grey divider line at the end of each video grid.

Finally, we also have to update our home component.

3 Adding tests

The only thing that’s missing are a few test cases.

1. Create a __tests__ directory inside the VideoGrid and inside VideoGridHeader directory
2. Add a VideoGrid.unit.test.js file inside VideoGrid/__tests__
3. Add a VideoGridHeader.unit.test.js file inside VideoGrid/VideoGridHeader/__tests__

To run the tests and to have a look at the snapshots, cd into your project and run

4 Wrap Up

So here’s the result of our work. Currently we’ve just done the markup. Later on, we will fill the VideoGrid component with life and display videos we fetched from the Youtube API.

Click on the image to see it in high resolution.

As always, you can find the full code in our Github repo.

Follow @productioncoder

Please follow me on Twitter @productioncoder to stay up-to-date. I’m happy to receive feedback of any kind.

If you are interested in more high-quality production-ready content, please enter your email below.