Calculating Total Playlist Time With Vanilla Javascript
Tags: javascript, webdev
Published: 2020-07-15 19:44:42

---
title: "Calculating Total Playlist Time With Vanilla Javascript"
published: true
---

## Where this idea comes from

I was hanging on the internet and I saw Corey Schafer's video [Python YouTube API Tutorial: Calculating the Duration of a Playlist](https://www.youtube.com/watch?v=coZbOM6E47I)
and I thought, well

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hyrbv4lccajywdhv6s5n.jpg)

Each video has a duration on the bottom right corner, we can parse all of the durations and sum all of them

## Selecting all videos using browser dom

I opened Inspector and started investigating

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3tnmopz87druf3zxrtpu.jpg)

Each video has a class named `ytd-playlist-video-renderer`

We can parse all videos with  `document.querySelectorAll("ytd-playlist-video-renderer")`

Now this selects all videos but we have to iterate over each video and get the just duration

we iterate over each video with `forEach` and using correct queries we will get the duration

```javascript

document.querySelectorAll("ytd-playlist-video-renderer").forEach( (element) => {
    try{
        let timelist = element.querySelector("#overlays")
        .querySelector("ytd-thumbnail-overlay-time-status-renderer")
        .querySelector("span")
        console.log(timelist)
    } catch(err){
       console.log(err)
    }
    
})

```

### Note 
`#` symbol means class

I didn't use anything in front of some queries that means they are tag names like
`<ytd-thumbnail-overlay-time-status-renderer>`

Let's see the output

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rghumemm5tsba6vxcjep.jpg)

That's great, we get all span elements but were not done we need to get raw duration.

Now if we select child and data of the child our code becomes

```javascript
document.querySelectorAll("ytd-playlist-video-renderer").forEach( (element) => {
    try{
        let timelist = element.querySelector("#overlays")
        .querySelector("ytd-thumbnail-overlay-time-status-renderer")
        .querySelector("span")
        .firstChild.data.trim().split(':')
        console.log(timelist)
    } catch(err){
       console.log(err)
    }
    
})
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ahzbm8zudtesarfqxoq2.jpg)

You can see that I used `trim()` because there is a lot of whitespace around these strings

and I used `split(':')` this will help us when we calculating total time.


Now we got everything we need to calculate total time lets calculate the total time

## Calculating total duration

I will create an object on the top of our code to store total duration, 
we will increment the total duration on every video.

I just added this on top of our code and were ready to go.

```javascript
let totalTime = {
    seconds:0,
    minutes:0,
    hours:0
}
```

You remember we split durations in the previous section.

I want to check if the array size is 2 or 3 if it is 3 that means we have the hour section


```javascript
if(timelist.length == 2){
    totalTime.minutes += parseInt(timelist[0])
    totalTime.seconds += parseInt(timelist[1])
} else if (timelist.length == 3){  
    totalTime.hours += parseInt(timelist[0])
    totalTime.minutes += parseInt(timelist[1])
    totalTime.seconds += parseInt(timelist[2])
}
```

See how I added minutes and seconds in size 2 and hours, minutes, and seconds in size 3.

We have the total hours minutes and seconds but it isn't in the correct format, 
I mean we have them but they're like this

```
hours: 1
​
minutes: 465
​
seconds: 342
```

Yeah, we have to calculate this, fortunate of us this is not that hard.

```javascript
totalTime.minutes += parseInt(totalTime.seconds/60)
totalTime.seconds = totalTime.seconds % 60

totalTime.hours += parseInt(totalTime.minutes/60)
totalTime.minutes = totalTime.minutes % 60
console.log(totalTime)
```
We divided seconds by 60 and added this to minutes
then we set seconds to remainder

We did the same thing for hours and minutes 

Our final code looks like this

```javascript
let totalTime = {
    seconds:0,
    minutes:0,
    hours:0
}

document.querySelectorAll("ytd-playlist-video-renderer").forEach( (element) => {
    try{
        let timelist = element.querySelector("#overlays")
        .querySelector("ytd-thumbnail-overlay-time-status-renderer")
        .querySelector("span")
        .firstChild.data.trim().split(':')
        
        if(timelist.length == 2){
            totalTime.minutes += parseInt(timelist[0])
            totalTime.seconds += parseInt(timelist[1])
        } else if (timelist.length == 3){  
            totalTime.hours += parseInt(timelist[0])
            totalTime.minutes += parseInt(timelist[1])
            totalTime.seconds += parseInt(timelist[2])
        }
    } catch(err){
       console.log(err)
    }
    
})

totalTime.minutes += parseInt(totalTime.seconds/60)
totalTime.seconds = totalTime.seconds % 60

totalTime.hours += parseInt(totalTime.minutes/60)
totalTime.minutes = totalTime.minutes % 60
console.log(totalTime)
```

## Where can you run this code

I mentioned Inspector a few minutes ago, we can use Inspector to run commands on the current page.

Right-click somewhere on the page and select Inspect Element you will see something like that on the bottom of the page

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xrjulo34487fo0gr266n.jpg)

At the top of that box there is a section named Console select this section, paste the code, and press enter.

You have to see something like this


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/njfql45xsohtbzpwv85y.jpg)


## Some problems

There is a little problem with this approach if we have a large playlist, like 50 videos, youtube
will not load all videos so we wouldn't be able to calculate time correctly, we have to scroll to the bottom 
to load all videos and then run the code

## Thanks for Reading