Build Youtube in React 27: formatting video duration

1 Overview

Let’s look at our trending videos again.

Click on the image to see it in high resolution.

We need to get the formatting right. Here’s how we want our video previews to look like.

2 Video publication date

Let’s start with the video publication date. The Youtube API returns us the exact date on which the video was published.

We need to convert this date into a more human-readable form. We want something like:

• 2 days ago
• a week ago
• a year ago

Now we could write all that logic on our own, but that’s kind of pointless.

There is a nice npm package out there called javascript-time-ago that does exactly what we want. Let’s save the hustle of doing that on our own and just use it.

2.1. Formatting Youtube’s video publication date

There are a few new things here. So first of all we import the javascript-time-ago package and set its locale to English. This package supports pretty much any common language.

We add a static function called getFormattedViewAndTime. We make it static because it is not specific to one particular object. In here, we create a date object out of the date string we get from the Youtube endpoint. After that, we use string interpolation to display the amount of views and a user-friendly publication date.

We get this readable publication date string by leveraging the javascript-time-ago package.

2.2. Intermediary result

Oh wow, this looks much better.

Click on the image to see it in high resolution.

2.3. Formatting view count – Test driven development

Much better, but we’re still not there. Look at the view count number formatting in the above screen shot. Right now, we display the absolute number of views directly. However, displaying the exact view count number is also not really user-friendly. Users don’t care that much about the exact number of views but rather about a rough number. Therefore, we need to do some work here.

Aaaand, ladies and gentlemen this is the first time in this tutorial that we will use test driven development. This means that we write the tests before we start implementing the actual function. Once we have our tests, we also have a specification.

The function we are about to develop can be considered a utility method and is not specific to our VideoPreview component. Therefore we will put it into another directory.

1. Create a new directory inside src/ and call it services
2. Create a new directory inside services and call it number
3. Add a new file called number-format.js inside the number directory

The formatting logic will live inside the number-format.js file. Let’s export an empty number formatting function for now and write the tests first.

We still need to add our test files.

1. Create a new directory inside src/services/number and call it __tests__
2. Add a new file called number-format.unit.test.js inside the directory you just created.

Your directory structure should now look like this:

Click on the image to see it in high resolution.

2.4. Test driven development for number formatting

By writing the tests first, we automatically have a specification.

You probably already saw the pattern. We use the common suffixes K (thousand), M (million), and B (billion) to make our number easier to read. If our number has 4, 7, 10, 13 … digits then we display one decimal place. So 1432 will become 1.4K and 2417987 will become 2.4M. However 12976 will just become 13K. This is how Youtube does it and this is how we’ll do it.

Also note that we always round the number up and display at most one decimal place.

2.5. Displaying the view count in a concise format

So here’s the actual function. We got a little bit of inspiration from this Stackoverflow answer.

First of all, we hard code the units array that contains the suffixes we want to append.

The very first thing we do is to check whether we are supposed to display one decimal place. This is the case if our number has 4, 7, 10, … digits.

We use the Array.some function which returns true if at least one element in the array satisfies a certain condition.

Once we know whether we should display the decimal place or not, we pick the correct suffix, display one decimal place if needed and append our unit suffix (either K, M, B or T).

Looks super fancy, but actually it’s not a really big deal.

Run your tests to see if our magic works.

2.6. Formatting Youtube video view count

To get our function working, we just have to update our VideoPreview component.

Note that we did defensive programming above. So if our video has a statistics object, then we calculate the short number string (the one with the K, M, or B suffix) and display it along with the publication date. If the statistics object is missing, then we just return an empty string.

Head over to your browser and admire the result of our work 🤓.

Click on the image to see it in high resolution.

2.7. Formatting video duration

We’re getting there my friends. However, we still need to format the video duration properly

Have a look at the video duration text on the bottom right of the video thumbnail. Youtube returns us the date and time in ISO8601 format.

We would like to convert something like PT1M11S to 1:11 (1 minute, 11 seconds).

1. Create a new directory inside src/services and call it date.
2. Add a new file called date-format.js inside the directory you just created.
3. Insert a new directory inside src/services/date and call it __tests__
4. Add a date-format.parse.unit.test.js file inside the __tests__ directory
5. Add a date-format.videoDuration.unit.test.js file inside the __tests__ directory

Your directory structure should look like this

2.8. Writing date-formatting tests

This rest of this tutorial is rather boring 😁. Parsing date strings is pretty much always annoying. Feel free to just copy the code and move on.

All right, let’s add an empty function inside date-format.jsfirst, write the tests and implement the function afterwards.

Actually our solution consists of two functions. Once function is supposed to get extract the hours, minutes and seconds from the duration string we get from Youtube. The other function is responsible for formatting it as desired (separate hours, minutes and seconds with colon).

Here are our tests that specify how the ISO 8601 date string should be parsed. Please put them inside src/services/date/__tests/date-format-parse.unit.test.js.

2.9. How to parse an ISO 8601 time string in Javascript

Here’s our logic. And no I didn’t come up with this stuff on my own. I got some inspiration from this open source project. I also won’t go into detail on how this code works. You know, this is the kind of code you just copy from Github. But beware, only do this after you wrote tests that make sure that the code does what you want 🤓😁.

2.10. Readable video duration formatting

Now that we can parse the duration string we can implement the actual formatting logic inside src/services/date/date-format.js

First of all we parse our string and extract the days, hours, minutes and seconds. If you ever stumbled across a 24h+ Youtube video then you noticed that the video duration is always specified in hour,s minutes and seconds even if it is longer than one day.

If the amount of seconds is smaller than 10, we prepend a 0, so a 8 second video becomes '08'. We do the same padding with minutes, but only if our video is not longer than one hour. By the way, this is not something I came up with, but this is simply how Youtube formats its video duration.

Finally, we join all the different parts together with a colon.

2.11. Testing our video duration formatting algorithm

Let’s add a few tests to make sure that our formatting algorithm actually works.

2.12. Using video duration formatting in VideoPreview

We just need to change a few lines to get our new video formatting magic working.

Note that we are playing it safe here and first check if video.contentDetails is defined before we try to access video.contentDetails.duration.

3 Wrap Up

Oh wow this looks much better.

Click on the image to see it in high resolution.

As always, thanks for reading.

You can find the project’s code on Github.

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.