☰

Youtube Thumbnail Button

Coloca um botão para ver thumbnail de um video do youtube

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

// ==UserScript==
// @name         Youtube Thumbnail Button
// @namespace    https://greasyfork.org/users/715485
// @version      0.1
// @description  Coloca um botão para ver thumbnail de um video do youtube
// @author       Luiz-lp
// @icon         https://upload.wikimedia.org/wikipedia/commons/4/4c/YouTube_icon.png
// @match        *://*.youtube.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const textStyle = `
.thumbnail-button {
    background-color: var(--yt-spec-10-percent-layer);
    color: var(--yt-spec-text-secondary);
    border-radius: 2px;
    padding: var(--yt-button-padding);
    margin: auto var(--ytd-subscribe-button-margin, 4px);
    white-space: nowrap;
    font-size: var(--ytd-tab-system_-_font-size);
    font-weight: var(--ytd-tab-system_-_font-weight);
    letter-spacing: var(--ytd-tab-system_-_letter-spacing);
    text-transform: var(--ytd-tab-system_-_text-transform);
    display: flex;
    flex-direction: row;
    cursor: pointer;
}
.thumbnail-text {
    --yt-formatted-string-deemphasize-color: var(--yt-spec-text-secondary);
    --yt-formatted-string-deemphasize_-_margin-left: 4px;
    --yt-formatted-string-deemphasize_-_display: initial;
}`;
    let currentUrl = document.location.href;
    let isPlaylist = currentUrl.includes("playlist");

    css();

    init(10);

    locationChange();

    function init(times) {
        for (let i = 0; i < times; i++) {
            setTimeout(delButton, 500 * i);
            setTimeout(findPanel, 500 * i);
        }
    }

    function delButton() {
        if (!isPlaylist) return;
        document.querySelectorAll("#analytics-button.thumbnail-panel").forEach(panel => {
            panel.classList.remove("thumbnail-panel");
            panel.querySelector(".thumbnail-button").remove();
        });
    }

    function findPanel() {
        if (isPlaylist) return;
        document.querySelectorAll("#analytics-button:not(.thumbnail-panel)").forEach(panel => {
            panel.classList.add("thumbnail-panel");
            addButton(panel);
        });
    }

    function addButton(panel) {
        // button
        const button = document.createElement("div");
        button.classList.add("thumbnail-button");
        button.addEventListener("click", onClick);
        // text
        const text = document.createElement("span");
        text.classList.add("thumbnail-text");
        text.innerHTML = "Thumbnail";
        // append
        panel.insertBefore(button, panel.firstElementChild);
        button.appendChild(text);
    }

    function onClick() {
        var m = currentUrl.match(/(?:watch\?.*v=|\/v\/)([\w\-=]+)/);
        var current_id = m[1];
        var url = "http://img.youtube.com/vi/"+ current_id +"/maxresdefault.jpg";
        window.open(url);
    }

    function css() {
        const style = document.createElement("style");
        style.type = "text/css";
        style.innerHTML = textStyle;
        document.head.appendChild(style);
    }

    function locationChange() {
        const observer = new MutationObserver(mutations => {
            mutations.forEach(() => {
                if (currentUrl !== document.location.href) {
                    currentUrl = document.location.href;
                    isPlaylist = currentUrl.includes("playlist");
                    init(10);
                }
            });
        });
        const target = document.body;
        const config = { childList: true, subtree: true };
        observer.observe(target, config);
    }

})();