YouTube Enhancer (Subtitle Downloader)

Download Subtitles in Various Languages.
换行
// ==UserScript==
// @name         YouTube Enhancer (Subtitle Downloader)
// @description  Download Subtitles in Various Languages.
// @icon         https://raw.githubusercontent.com/exyezed/youtube-enhancer/refs/heads/main/extras/youtube-enhancer.png
// @version      1.4
// @author       exyezed
// @namespace    https://github.com/exyezed/youtube-enhancer/
// @supportURL   https://github.com/exyezed/youtube-enhancer/issues
// @license      MIT
// @match        https://www.youtube.com/*
// @match        https://youtube.com/*
// @grant        GM_xmlhttpRequest
// @grant        GM_download
// @require      https://cdn.jsdelivr.net/npm/[email protected]/crypto-js.min.js
// @connect      get-info.downsub.com
// @connect      download.subtitle.to
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';
    
    const SECRET_KEY = "zthxw34cdp6wfyxmpad38v52t3hsz6c5";
    const API = "https://get-info.downsub.com/";
    
    const CryptoJS = window.CryptoJS;
    const GM_download = window.GM_download;
    const GM_xmlhttpRequest = window.GM_xmlhttpRequest;

    const formatJson = {
        stringify: function (crp) {
            let result = {
                ct: crp.ciphertext.toString(CryptoJS.enc.Base64)
            };
            if (crp.iv) {
                result.iv = crp.iv.toString();
            }
            if (crp.salt) {
                result.s = crp.salt.toString();
            }
            return JSON.stringify(result);
        },
        parse: function (output) {
            let parse = JSON.parse(output);
            let result = CryptoJS.lib.CipherParams.create({
                ciphertext: CryptoJS.enc.Base64.parse(parse.ct)
            });
            if (parse.iv) {
                result.iv = CryptoJS.enc.Hex.parse(parse.iv);
            }
            if (parse.s) {
                result.salt = CryptoJS.enc.Hex.parse(parse.s);
            }
            return result;
        }
    };
    
    function _toBase64(payload) {
        let vBtoa = btoa(payload);
        vBtoa = vBtoa.replace("+", "-");
        vBtoa = vBtoa.replace("/", "_");
        vBtoa = vBtoa.replace("=", "");
        return vBtoa;
    }
    
    function _toBinary(base64) {
        let data = base64.replace("-", "+");
        data = data.replace("_", "/");
        const mod4 = data.length % 4;
        if (mod4) {
            data += "====".substring(mod4);
        }
        return atob(data);
    }
    
    function _encode(payload, options) {
        if (!payload) {
            return false;
        }
    
        let result = CryptoJS.AES.encrypt(JSON.stringify(payload), options || SECRET_KEY, {
            format: formatJson
        }).toString();
        return _toBase64(result).trim();
    }
    
    function _decode(payload, options) {
        if (!payload) {
            return false;
        }
    
        let result = CryptoJS.AES.decrypt(_toBinary(payload), options || SECRET_KEY, {
            format: formatJson
        }).toString(CryptoJS.enc.Utf8);
        return result.trim();
    }
    
    function _generateData(videoId) {
        const url = `https://www.youtube.com/watch?v=${videoId}`;
        let id = videoId;
        
        return {
            state: 99,
            url: url,
            urlEncrypt: _encode(url),
            source: 0,
            id: _encode(id),
            playlistId: null
        };
    }
    
    function _decodeArray(result) {
        let subtitles = [], subtitlesAutoTrans = [];
    
        if (result?.subtitles && result?.subtitles.length) {
            result.subtitles.forEach((v, i) => {
                let ff = {...v};
                ff.url = _decode(ff.url).replace(/^"|"$/gi, "");
                ff.enc_url = result.subtitles[i].url;
                ff.download = {};
                const params = new URLSearchParams({
                    title: encodeURIComponent(ff.name),
                    url: ff.enc_url
                });
                ff.download.srt = result.urlSubtitle + "?" + params.toString();
                
                const params2 = new URLSearchParams({
                    title: encodeURIComponent(ff.name),
                    url: ff.enc_url,
                    type: "txt"
                });
                ff.download.txt = result.urlSubtitle + "?" + params2.toString();
                
                const params3 = new URLSearchParams({
                    title: encodeURIComponent(ff.name),
                    url: ff.enc_url,
                    type: "raw"
                });
                ff.download.raw = result.urlSubtitle + "?" + params3.toString();
                subtitles.push(ff);
            });
        }
        
        if (result?.subtitlesAutoTrans && result?.subtitlesAutoTrans.length) {
            result.subtitlesAutoTrans.forEach((v, i) => {
                let ff = {...v};
                ff.url = _decode(ff.url).replace(/^"|"$/gi, "");
                ff.enc_url = result.subtitlesAutoTrans[i].url;
                ff.download = {};
                const params = new URLSearchParams({
                    title: encodeURIComponent(ff.name),
                    url: ff.enc_url
                });
                ff.download.srt = result.urlSubtitle + "?" + params.toString();
                
                const params2 = new URLSearchParams({
                    title: encodeURIComponent(ff.name),
                    url: ff.enc_url,
                    type: "txt"
                });
                ff.download.txt = result.urlSubtitle + "?" + params2.toString();
                
                const params3 = new URLSearchParams({
                    title: encodeURIComponent(ff.name),
                    url: ff.enc_url,
                    type: "raw"
                });
                ff.download.raw = result.urlSubtitle + "?" + params3.toString();
                subtitlesAutoTrans.push(ff);
            });
        }
    
        return Object.assign(result, {subtitles}, {subtitlesAutoTrans});
    }

    function createSVGIcon(className, isHover = false) {
        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");

        svg.setAttribute("viewBox", "0 0 576 512");
        svg.classList.add(className);

        path.setAttribute("d", isHover
            ? "M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l448 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm56 208l176 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-176 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm256 0l80 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zM120 336l80 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm160 0l176 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-176 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"
            : "M64 80c-8.8 0-16 7.2-16 16l0 320c0 8.8 7.2 16 16 16l448 0c8.8 0 16-7.2 16-16l0-320c0-8.8-7.2-16-16-16L64 80zM0 96C0 60.7 28.7 32 64 32l448 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM120 240l176 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-176 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm256 0l80 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zM120 336l80 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm160 0l176 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-176 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"
        );

        svg.appendChild(path);
        return svg;
    }

    function createSearchIcon() {
        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
        
        svg.setAttribute("viewBox", "0 0 24 24");
        svg.setAttribute("width", "16");
        svg.setAttribute("height", "16");
        
        path.setAttribute("d", "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z");
        
        svg.appendChild(path);
        return svg;
    }

    function createCheckIcon() {
        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
        
        svg.setAttribute("viewBox", "0 0 24 24");
        svg.classList.add("check-icon");
        
        path.setAttribute("d", "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z");
        
        svg.appendChild(path);
        return svg;
    }

    function getVideoId() {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get('v');
    }


    function downloadSubtitle(url, filename, format, buttonElement) {
        try {
            const buttonHeight = buttonElement.offsetHeight;
            const buttonWidth = buttonElement.offsetWidth;
            
            const originalChildren = Array.from(buttonElement.childNodes).map(node => node.cloneNode(true));
            
            while (buttonElement.firstChild) {
                buttonElement.removeChild(buttonElement.firstChild);
            }
            
            buttonElement.style.height = `${buttonHeight}px`;
            buttonElement.style.width = `${buttonWidth}px`;
            
            const spinner = document.createElement('div');
            spinner.className = 'button-spinner';
            buttonElement.appendChild(spinner);
            buttonElement.disabled = true;
            
            GM_download({
                url: url,
                name: filename,
                onload: function() {
                    while (buttonElement.firstChild) {
                        buttonElement.removeChild(buttonElement.firstChild);
                    }
                    
                    buttonElement.appendChild(createCheckIcon());
                    buttonElement.classList.add('download-success');
                    
                    setTimeout(() => {
                        while (buttonElement.firstChild) {
                            buttonElement.removeChild(buttonElement.firstChild);
                        }
                        
                        originalChildren.forEach(child => {
                            buttonElement.appendChild(child.cloneNode(true));
                        });
                        
                        buttonElement.disabled = false;
                        buttonElement.classList.remove('download-success');
                        
                        buttonElement.style.height = '';
                        buttonElement.style.width = '';
                    }, 1500);
                },
                onerror: function(error) {
                    console.error('Download error:', error);
                    
                    while (buttonElement.firstChild) {
                        buttonElement.removeChild(buttonElement.firstChild);
                    }
                    
                    originalChildren.forEach(child => {
                        buttonElement.appendChild(child.cloneNode(true));
                    });
                    
                    buttonElement.disabled = false;
                    
                    buttonElement.style.height = '';
                    buttonElement.style.width = '';
                }
            });
        } catch (error) {
            console.error('Download setup error:', error);
            
            while (buttonElement.firstChild) {
                buttonElement.removeChild(buttonElement.firstChild);
            }
            
            buttonElement.textContent = format;
            
            buttonElement.disabled = false;
            
            buttonElement.style.height = '';
            buttonElement.style.width = '';
        }
    }

    function filterSubtitles(subtitles, query) {
        if (!query) return subtitles;
        
        const lowerQuery = query.toLowerCase();
        return subtitles.filter(sub => 
            sub.name.toLowerCase().includes(lowerQuery)
        );
    }

    function createSubtitleTable(subtitles, autoTransSubs, videoTitle) {
        const container = document.createElement('div');
        container.className = 'subtitle-container';

        const titleDiv = document.createElement('div');
        titleDiv.className = 'subtitle-dropdown-title';
        titleDiv.textContent = `Download Subtitles (${subtitles.length + autoTransSubs.length})`;
        container.appendChild(titleDiv);
        
        const searchContainer = document.createElement('div');
        searchContainer.className = 'subtitle-search-container';
        
        const searchInput = document.createElement('input');
        searchInput.type = 'text';
        searchInput.className = 'subtitle-search-input';
        searchInput.placeholder = 'Search languages...';
        
        const searchIcon = document.createElement('div');
        searchIcon.className = 'subtitle-search-icon';
        searchIcon.appendChild(createSearchIcon());
        
        searchContainer.appendChild(searchIcon);
        searchContainer.appendChild(searchInput);
        container.appendChild(searchContainer);

        const tabsDiv = document.createElement('div');
        tabsDiv.className = 'subtitle-tabs';

        const regularTab = document.createElement('div');
        regularTab.className = 'subtitle-tab active';
        regularTab.textContent = 'Original';
        regularTab.dataset.tab = 'regular';

        const autoTab = document.createElement('div');
        autoTab.className = 'subtitle-tab';
        autoTab.textContent = 'Auto Translate';
        autoTab.dataset.tab = 'auto';

        tabsDiv.appendChild(regularTab);
        tabsDiv.appendChild(autoTab);
        container.appendChild(tabsDiv);

        const itemsPerPage = 30;
        
        const regularContent = createSubtitleContent(subtitles, videoTitle, true, itemsPerPage);
        regularContent.className = 'subtitle-content regular-content active';

        const autoContent = createSubtitleContent(autoTransSubs, videoTitle, false, itemsPerPage);
        autoContent.className = 'subtitle-content auto-content';

        container.appendChild(regularContent);
        container.appendChild(autoContent);

        tabsDiv.addEventListener('click', (e) => {
            if (e.target.classList.contains('subtitle-tab')) {
                document.querySelectorAll('.subtitle-tab').forEach(tab => tab.classList.remove('active'));
                document.querySelectorAll('.subtitle-content').forEach(content => content.classList.remove('active'));

                e.target.classList.add('active');
                const tabType = e.target.dataset.tab;
                document.querySelector(`.${tabType}-content`).classList.add('active');
                
                searchInput.value = '';
                
                const activeContent = document.querySelector(`.${tabType}-content`);
                const grid = activeContent.querySelector('.subtitle-grid');
                
                if (tabType === 'regular') {
                    renderPage(1, subtitles, grid, itemsPerPage, videoTitle);
                } else {
                    renderPage(1, autoTransSubs, grid, itemsPerPage, videoTitle);
                }
                
                const pagination = activeContent.querySelector('.subtitle-pagination');
                updatePagination(
                    1, 
                    Math.ceil((tabType === 'regular' ? subtitles : autoTransSubs).length / itemsPerPage),
                    pagination,
                    null,
                    grid,
                    tabType === 'regular' ? subtitles : autoTransSubs,
                    itemsPerPage,
                    videoTitle
                );
            }
        });
        
        searchInput.addEventListener('input', (e) => {
            const query = e.target.value.trim();
            const activeTab = document.querySelector('.subtitle-tab.active').dataset.tab;
            const activeContent = document.querySelector(`.${activeTab}-content`);
            const grid = activeContent.querySelector('.subtitle-grid');
            const pagination = activeContent.querySelector('.subtitle-pagination');
            
            const sourceSubtitles = activeTab === 'regular' ? subtitles : autoTransSubs;
            const filteredSubtitles = filterSubtitles(sourceSubtitles, query);
            
            renderPage(1, filteredSubtitles, grid, itemsPerPage, videoTitle);
            updatePagination(
                1, 
                Math.ceil(filteredSubtitles.length / itemsPerPage), 
                pagination, 
                filteredSubtitles,
                grid,
                sourceSubtitles,
                itemsPerPage,
                videoTitle
            );
            
            grid.dataset.filteredCount = filteredSubtitles.length;
            grid.dataset.query = query;
        });

        return container;
    }

    function renderPage(page, subtitlesList, gridElement, itemsPerPage, videoTitle) {
        while (gridElement.firstChild) {
            gridElement.removeChild(gridElement.firstChild);
        }

        const startIndex = (page - 1) * itemsPerPage;
        const endIndex = Math.min(startIndex + itemsPerPage, subtitlesList.length);

        for (let i = startIndex; i < endIndex; i++) {
            const sub = subtitlesList[i];
            const item = document.createElement('div');
            item.className = 'subtitle-item';

            const langLabel = document.createElement('div');
            langLabel.className = 'subtitle-language';
            langLabel.textContent = sub.name;
            item.appendChild(langLabel);

            const btnContainer = document.createElement('div');
            btnContainer.className = 'subtitle-format-container';

            const srtBtn = document.createElement('button');
            srtBtn.textContent = 'SRT';
            srtBtn.className = 'subtitle-format-btn srt-btn';
            srtBtn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                downloadSubtitle(sub.download.srt, `${videoTitle} - ${sub.name}.srt`, 'SRT', srtBtn);
            });
            btnContainer.appendChild(srtBtn);

            const txtBtn = document.createElement('button');
            txtBtn.textContent = 'TXT';
            txtBtn.className = 'subtitle-format-btn txt-btn';
            txtBtn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                downloadSubtitle(sub.download.txt, `${videoTitle} - ${sub.name}.txt`, 'TXT', txtBtn);
            });
            btnContainer.appendChild(txtBtn);

            item.appendChild(btnContainer);
            gridElement.appendChild(item);
        }
    }

    function updatePagination(page, totalPages, paginationElement, filteredSubs, gridElement, sourceSubtitles, itemsPerPage, videoTitle) {
        while (paginationElement.firstChild) {
            paginationElement.removeChild(paginationElement.firstChild);
        }

        if (totalPages <= 1) return;

        const prevBtn = document.createElement('button');
        prevBtn.textContent = '«';
        prevBtn.className = 'pagination-btn';
        prevBtn.disabled = page === 1;
        prevBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            if (page > 1) {
                const newPage = page - 1;
                const query = gridElement.dataset.query;
                const subsToUse = query && filteredSubs ? filteredSubs : sourceSubtitles;
                
                renderPage(newPage, subsToUse, gridElement, itemsPerPage, videoTitle);
                updatePagination(
                    newPage, 
                    totalPages, 
                    paginationElement, 
                    filteredSubs,
                    gridElement,
                    sourceSubtitles,
                    itemsPerPage,
                    videoTitle
                );
            }
        });
        paginationElement.appendChild(prevBtn);

        const pageIndicator = document.createElement('span');
        pageIndicator.className = 'page-indicator';
        pageIndicator.textContent = `${page} / ${totalPages}`;
        paginationElement.appendChild(pageIndicator);

        const nextBtn = document.createElement('button');
        nextBtn.textContent = '»';
        nextBtn.className = 'pagination-btn';
        nextBtn.disabled = page === totalPages;
        nextBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            if (page < totalPages) {
                const newPage = page + 1;
                const query = gridElement.dataset.query;
                const subsToUse = query && filteredSubs ? filteredSubs : sourceSubtitles;
                
                renderPage(newPage, subsToUse, gridElement, itemsPerPage, videoTitle);
                updatePagination(
                    newPage, 
                    totalPages, 
                    paginationElement, 
                    filteredSubs,
                    gridElement,
                    sourceSubtitles,
                    itemsPerPage,
                    videoTitle
                );
            }
        });
        paginationElement.appendChild(nextBtn);
    }

    function createSubtitleContent(subtitles, videoTitle, isOriginal, itemsPerPage) {
        const content = document.createElement('div');
        let currentPage = 1;

        const grid = document.createElement('div');
        grid.className = 'subtitle-grid';
        
        if (isOriginal && subtitles.length <= 6) {
            grid.classList.add('center-grid');
        }
        
        grid.dataset.filteredCount = subtitles.length;
        grid.dataset.query = '';

        const pagination = document.createElement('div');
        pagination.className = 'subtitle-pagination';

        renderPage(currentPage, subtitles, grid, itemsPerPage, videoTitle);
        updatePagination(
            currentPage, 
            Math.ceil(subtitles.length / itemsPerPage), 
            pagination, 
            null,
            grid,
            subtitles,
            itemsPerPage,
            videoTitle
        );

        content.appendChild(grid);
        content.appendChild(pagination);

        return content;
    }

    async function handleSubtitleDownload(e) {
        e.preventDefault();
        const videoId = getVideoId();

        if (!videoId) {
            console.error('Video ID not found');
            return;
        }

        const backdrop = document.createElement('div');
        backdrop.className = 'subtitle-backdrop';
        document.body.appendChild(backdrop);

        const loader = document.createElement('div');
        loader.className = 'subtitle-loader';
        backdrop.appendChild(loader);

        try {
            const data = _generateData(videoId);
            
            const headersList = {
                "authority": "get-info.downsub.com",
                "accept": "application/json, text/plain, */*",
                "accept-language": "id-ID,id;q=0.9",
                "origin": "https://downsub.com",
                "priority": "u=1, i",
                "referer": "https://downsub.com/",
                "sec-ch-ua": '"Not(A:Brand";v="99", "Google Chrome";v="133", "Chromium";v="133"',
                "sec-ch-ua-mobile": "?0",
                "sec-ch-ua-platform": '"Windows"',
                "sec-fetch-dest": "empty",
                "sec-fetch-mode": "cors",
                "sec-fetch-site": "same-site",
                "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36"
            };
            
            const response = await new Promise((resolve, reject) => {
                GM_xmlhttpRequest({
                    method: 'GET',
                    url: API + data.id,
                    headers: headersList,
                    responseType: 'json',
                    onload: function(response) {
                        if (response.status >= 200 && response.status < 300) {
                            resolve(response.response);
                        } else {
                            reject(new Error(`Request failed with status ${response.status}`));
                        }
                    },
                    onerror: function() {
                        reject(new Error('Network error'));
                    }
                });
            });

            const processedResponse = _decodeArray(response);

            const videoTitleElement = document.querySelector('yt-formatted-string.style-scope.ytd-watch-metadata');
            const videoTitle = videoTitleElement ? videoTitleElement.textContent.trim() : `youtube_video_${videoId}`;

            loader.remove();

            if (!processedResponse.subtitles || processedResponse.subtitles.length === 0 &&
                (!processedResponse.subtitlesAutoTrans || processedResponse.subtitlesAutoTrans.length === 0)) {
                while (backdrop.firstChild) {
                    backdrop.removeChild(backdrop.firstChild);
                }
                const errorDiv = document.createElement('div');
                errorDiv.className = 'subtitle-error';
                errorDiv.textContent = 'No subtitles available for this video';
                backdrop.appendChild(errorDiv);

                setTimeout(() => {
                    backdrop.remove();
                }, 2000);
                return;
            }

            const subtitleTable = createSubtitleTable(
                processedResponse.subtitles || [],
                processedResponse.subtitlesAutoTrans || [],
                videoTitle
            );
            backdrop.appendChild(subtitleTable);

            backdrop.addEventListener('click', (e) => {
                if (!subtitleTable.contains(e.target)) {
                    subtitleTable.remove();
                    backdrop.remove();
                }
            });

            subtitleTable.addEventListener('click', (e) => {
                e.stopPropagation();
            });

        } catch (error) {
            console.error('Error fetching subtitles:', error);

            while (backdrop.firstChild) {
                backdrop.removeChild(backdrop.firstChild);
            }
            const errorDiv = document.createElement('div');
            errorDiv.className = 'subtitle-error';
            errorDiv.textContent = 'Error fetching subtitles. Please try again.';
            backdrop.appendChild(errorDiv);

            setTimeout(() => {
                backdrop.remove();
            }, 2000);
        }
    }

    function initializeStyles(computedStyle) {
        if (document.querySelector('#yt-subtitle-downloader-styles')) return;

        const style = document.createElement('style');
        style.id = 'yt-subtitle-downloader-styles';
        style.textContent = `
            .custom-subtitle-btn {
                background: none;
                border: none;
                cursor: pointer;
                padding: 0;
                width: ${computedStyle.width};
                height: ${computedStyle.height};
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
            }
            @-moz-document url-prefix() {
                .custom-subtitle-btn {
                    top: 0;
                    margin-bottom: 0;
                    vertical-align: top;
                }
            }
            .custom-subtitle-btn svg {
                width: 24px;
                height: 24px;
                fill: #fff;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                opacity: 1;
                transition: opacity 0.2s ease-in-out;
            }
            .custom-subtitle-btn .hover-icon {
                opacity: 0;
            }
            .custom-subtitle-btn:hover .default-icon {
                opacity: 0;
            }
            .custom-subtitle-btn:hover .hover-icon {
                opacity: 1;
            }
            .subtitle-backdrop {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.7);
                z-index: 9998;
                display: flex;
                align-items: center;
                justify-content: center;
                backdrop-filter: blur(3px);
            }
            .subtitle-loader {
                width: 40px;
                height: 40px;
                border: 4px solid rgba(255, 255, 255, 0.3);
                border-radius: 50%;
                border-top: 4px solid #fff;
                animation: spin 1s linear infinite;
            }
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            .subtitle-error {
                background: rgba(0, 0, 0, 0.8);
                color: #fff;
                padding: 16px 24px;
                border-radius: 8px;
                font-size: 14px;
            }
            .subtitle-container {
                position: relative;
                background: rgba(28, 28, 28, 0.95);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                padding: 16px;
                z-index: 9999;
                min-width: 700px;
                max-width: 90vw;
                max-height: 80vh;
                overflow-y: auto;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
                color: #fff;
                font-family: 'Roboto', Arial, sans-serif;
            }
            .subtitle-dropdown-title {
                color: #fff;
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 16px;
                text-align: center;
            }
            .subtitle-search-container {
                position: relative;
                margin-bottom: 16px;
                width: 100%;
                max-width: 100%;
            }
            .subtitle-search-input {
                width: 100%;
                padding: 8px 12px 8px 36px;
                border-radius: 4px;
                border: 1px solid rgba(255, 255, 255, 0.2);
                background: rgba(255, 255, 255, 0.1);
                color: white;
                font-size: 14px;
                box-sizing: border-box;
            }
            .subtitle-search-input::placeholder {
                color: rgba(255, 255, 255, 0.5);
            }
            .subtitle-search-input:focus {
                outline: none;
                border-color: rgba(255, 255, 255, 0.4);
                background: rgba(255, 255, 255, 0.15);
            }
            .subtitle-search-icon {
                position: absolute;
                left: 10px;
                top: 50%;
                transform: translateY(-50%);
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .subtitle-search-icon svg {
                fill: rgba(255, 255, 255, 0.5);
            }
            .subtitle-tabs {
                display: flex;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                margin-bottom: 16px;
                justify-content: center;
            }
            .subtitle-tab {
                padding: 10px 20px;
                cursor: pointer;
                opacity: 0.7;
                transition: all 0.2s;
                border-bottom: 2px solid transparent;
                font-size: 15px;
                font-weight: 500;
            }
            .subtitle-tab:hover {
                opacity: 1;
            }
            .subtitle-tab.active {
                opacity: 1;
                border-bottom: 2px solid #2b7fff;
            }
            .subtitle-content {
                display: none;
            }
            .subtitle-content.active {
                display: block;
            }
            .subtitle-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
                margin-bottom: 16px;
            }
            .subtitle-grid.center-grid {
                justify-content: center;
                display: flex;
                flex-wrap: wrap;
                gap: 16px;
            }
            .center-grid .subtitle-item {
                width: 200px;
            }
            .subtitle-item {
                background: rgba(255, 255, 255, 0.05);
                border-radius: 6px;
                padding: 10px;
                transition: all 0.2s;
            }
            .subtitle-item:hover {
                background: rgba(255, 255, 255, 0.1);
            }
            .subtitle-language {
                font-size: 13px;
                font-weight: 500;
                margin-bottom: 8px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .subtitle-format-container {
                display: flex;
                gap: 8px;
            }
            .subtitle-format-btn {
                flex: 1;
                padding: 6px 0;
                border-radius: 4px;
                border: none;
                font-size: 12px;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.2s;
                text-align: center;
                position: relative;
                height: 28px;
                line-height: 16px;
            }
            .button-spinner {
                width: 14px;
                height: 14px;
                border: 2px solid rgba(255, 255, 255, 0.3);
                border-radius: 50%;
                border-top: 2px solid #fff;
                animation: spin 1s linear infinite;
                margin: 0 auto;
            }
            .check-icon {
                width: 14px;
                height: 14px;
                fill: white;
                margin: 0 auto;
            }
            .download-success {
                background-color: #00a63e !important;
            }
            .srt-btn {
                background-color: #2b7fff;
                color: white;
            }
            .srt-btn:hover {
                background-color: #50a2ff;
            }
            .txt-btn {
                background-color: #615fff;
                color: white;
            }
            .txt-btn:hover {
                background-color: #7c86ff;
            }
            .subtitle-pagination {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 16px;
            }
            .pagination-btn {
                background: rgba(255, 255, 255, 0.1);
                border: none;
                color: white;
                width: 32px;
                height: 32px;
                border-radius: 16px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                transition: all 0.2s;
            }
            .pagination-btn:not(:disabled):hover {
                background: rgba(255, 255, 255, 0.2);
            }
            .pagination-btn:disabled {
                opacity: 0.3;
                cursor: not-allowed;
            }
            .page-indicator {
                margin: 0 16px;
                font-size: 14px;
                color: rgba(255, 255, 255, 0.7);
            }
        `;
        document.head.appendChild(style);
    }

    function initializeButton() {
        if (document.querySelector('.custom-subtitle-btn')) return;

        const originalButton = document.querySelector('.ytp-subtitles-button');
        if (!originalButton) return;

        const newButton = document.createElement('button');
        const computedStyle = window.getComputedStyle(originalButton);

        Object.assign(newButton, {
            className: 'ytp-button custom-subtitle-btn',
            title: 'Download Subtitles'
        });

        newButton.setAttribute('aria-pressed', 'false');
        initializeStyles(computedStyle);

        newButton.append(
            createSVGIcon('default-icon', false),
            createSVGIcon('hover-icon', true)
        );

        newButton.addEventListener('click', (e) => {
            const existingDropdown = document.querySelector('.subtitle-container');
            existingDropdown ? existingDropdown.remove() : handleSubtitleDownload(e);
        });

        originalButton.insertAdjacentElement('afterend', newButton);
    }

    function initializeObserver() {
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.addedNodes.length) {
                    const isVideoPage = window.location.pathname === '/watch';
                    if (isVideoPage && !document.querySelector('.custom-subtitle-btn')) {
                        initializeButton();
                    }
                }
            });
        });

        function startObserving() {
            const playerContainer = document.getElementById('player-container');
            const contentContainer = document.getElementById('content');

            if (playerContainer) {
                observer.observe(playerContainer, {
                    childList: true,
                    subtree: true
                });
            }

            if (contentContainer) {
                observer.observe(contentContainer, {
                    childList: true,
                    subtree: true
                });
            }

            if (window.location.pathname === '/watch') {
                initializeButton();
            }
        }

        startObserving();

        if (!document.getElementById('player-container')) {
            const retryInterval = setInterval(() => {
                if (document.getElementById('player-container')) {
                    startObserving();
                    clearInterval(retryInterval);
                }
            }, 1000);

            setTimeout(() => clearInterval(retryInterval), 10000);
        }

        const handleNavigation = () => {
            if (window.location.pathname === '/watch') {
                initializeButton();
            }
        };

        window.addEventListener('yt-navigate-finish', handleNavigation);

        return () => {
            observer.disconnect();
            window.removeEventListener('yt-navigate-finish', handleNavigation);
        };
    }

    function addSubtitleButton() {
        initializeObserver();
    }

    addSubtitleButton();
})();
欢迎访问Greasy Fork镜像
