☰

Youtube: Colored thumbnails borders based on vid duration

Colors border of thumbnails on Youtube based on the duration of the video

当前为 2023-09-26 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Youtube: Colored thumbnails borders based on vid duration
// @version      1.0.1
// @description  Colors border of thumbnails on Youtube based on the duration of the video
// @author       You
// @match        https://www.youtube.com/
// @match        https://www.youtube.com/feed/subscriptions
// @match        https://www.youtube.com/feed/history
// @match        https://www.youtube.com/playlist
// @match        https://www.youtube.com/@*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @license MIT
// @grant        none
// @namespace http://tampermonkey.net/
// ==/UserScript==

// Last edit 25/09/2023
(function() {
    'use strict';
    setInterval(getVideoDuration, 1000);

    function getVideoDuration() {
        // get all video duration HTML elements on the page
        const durationsElem = document.querySelectorAll('div#time-status > span.ytd-thumbnail-overlay-time-status-renderer');

        // loop through every video duration element
        for(let i = 0; i < durationsElem.length; i++) {
            const durationElem = durationsElem[i]; // video duration HTML element
            const durationStr = durationElem.innerHTML; // video duration string
            if (typeof durationStr === 'string' && !!durationStr) {
                // get the parent we want to customize (the thumbnail)
                const videoItem = durationElem.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;

                const splittedDuration = durationStr.split(':');
                // handle video longer than 1 hour
                let minutes = 59;
                if (splittedDuration.length == 2) {
                    try {
                        minutes = parseInt(splittedDuration[0])
                    } catch (e) {
                        console.error('Colored thumbnails borders script', 'Error while parsing minute number from video durations');
                    }
                }

                // apply style based on duration
                videoItem.style.borderRadius = '15px';
                const borderStyleStr = 'solid 3px ';
                if (minutes <= 2) {
                    videoItem.style.border = borderStyleStr + '#6DFF57'; // solid green
                } else if (minutes <= 6) {
                    videoItem.style.border = borderStyleStr + '#FFFF54'; // solid yellow
                } else if (minutes <= 12) {
                    videoItem.style.border = borderStyleStr + '#FF7429'; // solid orange
                } else if (minutes <= 20) {
                    videoItem.style.border = borderStyleStr + '#CC001A'; // solid red
                } else {
                    videoItem.style.border = 'dashed 3px #CC001A'; // dotted red
                }
            }
        }
    }
})();