Calculating Total Playlist Time With Vanilla Javascript

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
and I thought, well

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

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

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

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

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)
    }

})

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.

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

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.

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

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

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

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