☰

Display Youtube Playlist Duration

Calculate the duration of a playlist and display it next to the number of videos

当前为 2020-07-20 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Display Youtube Playlist Duration
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Calculate the duration of a playlist and display it next to the number of videos
// @author       eyl327
// @match        https://www.youtube.com/playlist
// @include      https://www.youtube.com/playlist?list*
// @grant        none
// @require      http://code.jquery.com/jquery-3.4.1.min.js
// ==/UserScript==

(function () {
    "use strict";
    
    // get data object stored on Youtube's website
    var data = window.ytInitialData;
    
    // locate the list of videos in the object
    var vids = data.contents.twoColumnBrowseResultsRenderer.tabs[0].tabRenderer.content.sectionListRenderer.contents[0].itemSectionRenderer.contents[0].playlistVideoListRenderer.contents;
    
    // add up the lengths of each video in seconds
    var seconds = vids.reduce(function (x,y) { return x + parseInt(y.playlistVideoRenderer.lengthSeconds); }, 0);
    
    // divide by 60 and round to get the number of minutes
    var minutes = Math.round(seconds / 60);
    
    // if there is at least 1 hour, display hours and minutes, otherwise display minutes and seconds.
    var durationString = (minutes >= 60) ? // if minutes is 60 or more
        (Math.floor(minutes / 60) + 'h ' + (minutes % 60) + "m") : // calculate hours and minutes
        (Math.floor(seconds / 60) + 'm ' + (seconds % 60) + "s"); // calculate minutes and seconds
        
    // create a new "yt-formatted-string" element
    var newStat=document.createElement("yt-formatted-string");
    
    // set it's class to match the other elements
    newStat.className="style-scope ytd-playlist-sidebar-primary-info-renderer";
    
    // find the first child of the stats element (the number of videos) and insert the new element after it
    $("#stats yt-formatted-string:first-child").after(newStat);
    
    // set the text of the new element to contain the duration
    newStat.innerText = durationString;

})();