☰

YouTube Subtitle Preview Plus

to check subtitle when you search

// ==UserScript==
// @name         YouTube Subtitle Preview Plus
// @namespace    https://github.com/hjie/YouTube-Subtitle-Preview-Plus
// @version      0.0.1
// @description  to check subtitle when you search
// @author       hjie
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==

// Replace this with your target language (ISO language code)
const TARGET_LANGUAGE = ["en", "zh"];

// Check if youtube videos in thumbnails have subtitles in target language. If they do, add a little indicator at the top left of the thumbnail.
function youtube_subtitle_check() {
    // Check for different thumbnail styles. This varies depending on if the user is on the old or new YouTube style.
    //let thumbnail_types = [document.querySelectorAll("div.yt-lockup-thumbnail"), document.querySelectorAll("a.ytd-thumbnail"), document.querySelectorAll("a.thumb-link")];
    let thumbnail_types = [document.querySelectorAll("a.ytd-thumbnail")];

    thumbnail_types.forEach(function (type) {



        // Get a list of all video thumbnails
        type.forEach(function (thumbnail) {
            if(!thumbnail.hasAttribute("href")){
                return false;
            }

            // Get YT video id for testing
            let video_id = "";
            if (thumbnail.hasAttribute("href")) {
                video_id = thumbnail.getAttribute("href").split("/watch?v=")[1].split("&")[0];
            } else {
                video_id = thumbnail.querySelector("a").getAttribute("href").split("/watch?v=")[1].split("&")[0];
            }

            // Make sure we only check once
            if (thumbnail.getAttribute("subtitle_tested") == "true") {
                return;
            }
            thumbnail.setAttribute("subtitle_tested", "true");

            let xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    let text = xhttp.responseText;

                    for (let i = 0; i < TARGET_LANGUAGE.length; i++) {
                        let lang = TARGET_LANGUAGE[i];


                        if (text.includes('lang_code="' + lang + '"') || text.includes('lang_code="' + lang + '-')) {
                            let left_pos = i * 20;
                            // Sorry, this is ugly. I'm not good with JavaScript.
                            let new_element = document.createElement("span");
                            new_element.style.backgroundColor = "white";
                            new_element.style.zIndex = "1000";
                            new_element.style.position = "absolute";
                            new_element.style.borderRadius = "8px";
                            new_element.style.boxShadow = "2px 1px 2px black";
                            new_element.style.padding = "2px";
                            new_element.style.textAlign = "center";
                            new_element.style.left = left_pos + "px";
                            new_element.style.top = "2px";
                            new_element.style.lineHeight = "normal";
                            new_element.style.fontFamily = "sans-serif";
                            new_element.style.fontSize = "8pt";
                            new_element.style.color = "black";
                            new_element.style.userSelect = "none";
                            new_element.innerHTML = lang.toUpperCase();
                            thumbnail.appendChild(new_element);
                        }
                    }
                }
            };
            xhttp.open("GET", "https://video.google.com/timedtext?type=list&v=" + video_id, true);
            xhttp.send();
        });

    });


}

// Run on page load and every 3 seconds
youtube_subtitle_check();
setInterval(youtube_subtitle_check, 3000);