Youtube Playlist Duration

Shows the duration of youtube playlists.
换行
// ==UserScript==
// @name         Youtube Playlist Duration
// @description  Shows the duration of youtube playlists.
// @namespace    https://greasyfork.org/users/1142347
// @version      1.0
// @author       Caassiiee
// @icon         https://www.youtube.com/favicon.ico
// @match        *://*.youtube.com/*
// @noframes
// @license      GPL-3.0-only
// ==/UserScript==

(function () {
    'use strict';

    let interval = null;

    function attachTimesContainer() {
        let sibling = document.querySelector('.metadata-stats');
        const container = document.createElement('div');
        container.className = 'metadata-stats ytd-playlist-byline-renderer';
        const totalTimeSpan = document.createElement('span');
        totalTimeSpan.id = 'total-time';
        totalTimeSpan.className = 'byline-item style-scope ytd-playlist-byline-renderer';
        container.appendChild(totalTimeSpan);
        sibling.parentNode.insertBefore(container, sibling.nextSibling);
    }

    function attachTimesInterval() {
        getTimes();
        interval = setInterval(function () {
            getTimes();
        }, 1000);
    }

    function getTimes() {
        let totalTime = [0, 0, 0];
        console.log('getTimes');

        document.querySelectorAll('ytd-playlist-video-list-renderer #time-status').forEach(function (span) {
            let time = span.innerText;
            let times = time.split(':');
            while (times.length < 3) {
                times.unshift(0);
            }
            for (let i = 0; i < times.length; i++) {
                const parsed = parseInt(times[i]);
                times[i] = isNaN(parsed) ? 0 : parsed;
                totalTime[i] += times[i];
            }
            for (let i = totalTime.length - 1; i >= 0; i--) {
                if (i !== 0) {
                    while (totalTime[i] > 59) {
                        totalTime[i - 1]++;
                        totalTime[i] -= 60;
                    }
                }
            }
        });

        for (let i = 0; i < totalTime.length; i++) {
            if (i !== 0 && totalTime[i] < 10) {
                totalTime[i] = '0' + totalTime[i].toString();
            } else {
                totalTime[i] = totalTime[i].toString();
            }
        }

        let totalTimeString = totalTime.join(':');
        document.querySelector('#total-time').innerText = totalTimeString;
    }

    document.addEventListener('yt-navigate-finish', () => {
        const main = document.querySelector('ytd-browse[role="main"]');
        if (main) {
            const meta = main.querySelector('.metadata-stats');
            if (meta) {
                const totalTimeSpan = document.querySelector('#total-time');
                if (totalTimeSpan) {
                    totalTimeSpan.innerText = '';
                } else {
                    attachTimesContainer();
                }
                attachTimesInterval();
            } else {
                clearInterval(interval);
            }
        } else {
            clearInterval(interval);
        }
    });
})();