☰

YouTube Enhancer (Subtitle Downloader)

Download Subtitles in Various Languages.

  1. // ==UserScript==
  2. // @name         YouTube Enhancer (Subtitle Downloader)
  3. // @description  Download Subtitles in Various Languages.
  4. // @icon         https://raw.githubusercontent.com/exyezed/youtube-enhancer/refs/heads/main/extras/youtube-enhancer.png
  5. // @version      1.4
  6. // @author       exyezed
  7. // @namespace    https://github.com/exyezed/youtube-enhancer/
  8. // @supportURL   https://github.com/exyezed/youtube-enhancer/issues
  9. // @license      MIT
  10. // @match        https://www.youtube.com/*
  11. // @match        https://youtube.com/*
  12. // @grant        GM_xmlhttpRequest
  13. // @grant        GM_download
  14. // @require      https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js
  15. // @connect      get-info.downsub.com
  16. // @connect      download.subtitle.to
  17. // @run-at       document-idle
  18. // ==/UserScript==
  19.  
  20. (function() {
  21.     'use strict';
  22.     
  23.     const SECRET_KEY = "zthxw34cdp6wfyxmpad38v52t3hsz6c5";
  24.     const API = "https://get-info.downsub.com/";
  25.     
  26.     const CryptoJS = window.CryptoJS;
  27.     const GM_download = window.GM_download;
  28.     const GM_xmlhttpRequest = window.GM_xmlhttpRequest;
  29.  
  30.     const formatJson = {
  31.         stringify: function (crp) {
  32.             let result = {
  33.                 ct: crp.ciphertext.toString(CryptoJS.enc.Base64)
  34.             };
  35.             if (crp.iv) {
  36.                 result.iv = crp.iv.toString();
  37.             }
  38.             if (crp.salt) {
  39.                 result.s = crp.salt.toString();
  40.             }
  41.             return JSON.stringify(result);
  42.         },
  43.         parse: function (output) {
  44.             let parse = JSON.parse(output);
  45.             let result = CryptoJS.lib.CipherParams.create({
  46.                 ciphertext: CryptoJS.enc.Base64.parse(parse.ct)
  47.             });
  48.             if (parse.iv) {
  49.                 result.iv = CryptoJS.enc.Hex.parse(parse.iv);
  50.             }
  51.             if (parse.s) {
  52.                 result.salt = CryptoJS.enc.Hex.parse(parse.s);
  53.             }
  54.             return result;
  55.         }
  56.     };
  57.     
  58.     function _toBase64(payload) {
  59.         let vBtoa = btoa(payload);
  60.         vBtoa = vBtoa.replace("+", "-");
  61.         vBtoa = vBtoa.replace("/", "_");
  62.         vBtoa = vBtoa.replace("=", "");
  63.         return vBtoa;
  64.     }
  65.     
  66.     function _toBinary(base64) {
  67.         let data = base64.replace("-", "+");
  68.         data = data.replace("_", "/");
  69.         const mod4 = data.length % 4;
  70.         if (mod4) {
  71.             data += "====".substring(mod4);
  72.         }
  73.         return atob(data);
  74.     }
  75.     
  76.     function _encode(payload, options) {
  77.         if (!payload) {
  78.             return false;
  79.         }
  80.     
  81.         let result = CryptoJS.AES.encrypt(JSON.stringify(payload), options || SECRET_KEY, {
  82.             format: formatJson
  83.         }).toString();
  84.         return _toBase64(result).trim();
  85.     }
  86.     
  87.     function _decode(payload, options) {
  88.         if (!payload) {
  89.             return false;
  90.         }
  91.     
  92.         let result = CryptoJS.AES.decrypt(_toBinary(payload), options || SECRET_KEY, {
  93.             format: formatJson
  94.         }).toString(CryptoJS.enc.Utf8);
  95.         return result.trim();
  96.     }
  97.     
  98.     function _generateData(videoId) {
  99.         const url = `https://www.youtube.com/watch?v=${videoId}`;
  100.         let id = videoId;
  101.         
  102.         return {
  103.             state: 99,
  104.             url: url,
  105.             urlEncrypt: _encode(url),
  106.             source: 0,
  107.             id: _encode(id),
  108.             playlistId: null
  109.         };
  110.     }
  111.     
  112.     function _decodeArray(result) {
  113.         let subtitles = [], subtitlesAutoTrans = [];
  114.     
  115.         if (result?.subtitles && result?.subtitles.length) {
  116.             result.subtitles.forEach((v, i) => {
  117.                 let ff = {...v};
  118.                 ff.url = _decode(ff.url).replace(/^"|"$/gi, "");
  119.                 ff.enc_url = result.subtitles[i].url;
  120.                 ff.download = {};
  121.                 const params = new URLSearchParams({
  122.                     title: encodeURIComponent(ff.name),
  123.                     url: ff.enc_url
  124.                 });
  125.                 ff.download.srt = result.urlSubtitle + "?" + params.toString();
  126.                 
  127.                 const params2 = new URLSearchParams({
  128.                     title: encodeURIComponent(ff.name),
  129.                     url: ff.enc_url,
  130.                     type: "txt"
  131.                 });
  132.                 ff.download.txt = result.urlSubtitle + "?" + params2.toString();
  133.                 
  134.                 const params3 = new URLSearchParams({
  135.                     title: encodeURIComponent(ff.name),
  136.                     url: ff.enc_url,
  137.                     type: "raw"
  138.                 });
  139.                 ff.download.raw = result.urlSubtitle + "?" + params3.toString();
  140.                 subtitles.push(ff);
  141.             });
  142.         }
  143.         
  144.         if (result?.subtitlesAutoTrans && result?.subtitlesAutoTrans.length) {
  145.             result.subtitlesAutoTrans.forEach((v, i) => {
  146.                 let ff = {...v};
  147.                 ff.url = _decode(ff.url).replace(/^"|"$/gi, "");
  148.                 ff.enc_url = result.subtitlesAutoTrans[i].url;
  149.                 ff.download = {};
  150.                 const params = new URLSearchParams({
  151.                     title: encodeURIComponent(ff.name),
  152.                     url: ff.enc_url
  153.                 });
  154.                 ff.download.srt = result.urlSubtitle + "?" + params.toString();
  155.                 
  156.                 const params2 = new URLSearchParams({
  157.                     title: encodeURIComponent(ff.name),
  158.                     url: ff.enc_url,
  159.                     type: "txt"
  160.                 });
  161.                 ff.download.txt = result.urlSubtitle + "?" + params2.toString();
  162.                 
  163.                 const params3 = new URLSearchParams({
  164.                     title: encodeURIComponent(ff.name),
  165.                     url: ff.enc_url,
  166.                     type: "raw"
  167.                 });
  168.                 ff.download.raw = result.urlSubtitle + "?" + params3.toString();
  169.                 subtitlesAutoTrans.push(ff);
  170.             });
  171.         }
  172.     
  173.         return Object.assign(result, {subtitles}, {subtitlesAutoTrans});
  174.     }
  175.  
  176.     function createSVGIcon(className, isHover = false) {
  177.         const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  178.         const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  179.  
  180.         svg.setAttribute("viewBox", "0 0 576 512");
  181.         svg.classList.add(className);
  182.  
  183.         path.setAttribute("d", isHover
  184.             ? "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"
  185.             : "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"
  186.         );
  187.  
  188.         svg.appendChild(path);
  189.         return svg;
  190.     }
  191.  
  192.     function createSearchIcon() {
  193.         const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  194.         const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  195.         
  196.         svg.setAttribute("viewBox", "0 0 24 24");
  197.         svg.setAttribute("width", "16");
  198.         svg.setAttribute("height", "16");
  199.         
  200.         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");
  201.         
  202.         svg.appendChild(path);
  203.         return svg;
  204.     }
  205.  
  206.     function createCheckIcon() {
  207.         const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  208.         const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  209.         
  210.         svg.setAttribute("viewBox", "0 0 24 24");
  211.         svg.classList.add("check-icon");
  212.         
  213.         path.setAttribute("d", "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z");
  214.         
  215.         svg.appendChild(path);
  216.         return svg;
  217.     }
  218.  
  219.     function getVideoId() {
  220.         const urlParams = new URLSearchParams(window.location.search);
  221.         return urlParams.get('v');
  222.     }
  223.  
  224.  
  225.     function downloadSubtitle(url, filename, format, buttonElement) {
  226.         try {
  227.             const buttonHeight = buttonElement.offsetHeight;
  228.             const buttonWidth = buttonElement.offsetWidth;
  229.             
  230.             const originalChildren = Array.from(buttonElement.childNodes).map(node => node.cloneNode(true));
  231.             
  232.             while (buttonElement.firstChild) {
  233.                 buttonElement.removeChild(buttonElement.firstChild);
  234.             }
  235.             
  236.             buttonElement.style.height = `${buttonHeight}px`;
  237.             buttonElement.style.width = `${buttonWidth}px`;
  238.             
  239.             const spinner = document.createElement('div');
  240.             spinner.className = 'button-spinner';
  241.             buttonElement.appendChild(spinner);
  242.             buttonElement.disabled = true;
  243.             
  244.             GM_download({
  245.                 url: url,
  246.                 name: filename,
  247.                 onload: function() {
  248.                     while (buttonElement.firstChild) {
  249.                         buttonElement.removeChild(buttonElement.firstChild);
  250.                     }
  251.                     
  252.                     buttonElement.appendChild(createCheckIcon());
  253.                     buttonElement.classList.add('download-success');
  254.                     
  255.                     setTimeout(() => {
  256.                         while (buttonElement.firstChild) {
  257.                             buttonElement.removeChild(buttonElement.firstChild);
  258.                         }
  259.                         
  260.                         originalChildren.forEach(child => {
  261.                             buttonElement.appendChild(child.cloneNode(true));
  262.                         });
  263.                         
  264.                         buttonElement.disabled = false;
  265.                         buttonElement.classList.remove('download-success');
  266.                         
  267.                         buttonElement.style.height = '';
  268.                         buttonElement.style.width = '';
  269.                     }, 1500);
  270.                 },
  271.                 onerror: function(error) {
  272.                     console.error('Download error:', error);
  273.                     
  274.                     while (buttonElement.firstChild) {
  275.                         buttonElement.removeChild(buttonElement.firstChild);
  276.                     }
  277.                     
  278.                     originalChildren.forEach(child => {
  279.                         buttonElement.appendChild(child.cloneNode(true));
  280.                     });
  281.                     
  282.                     buttonElement.disabled = false;
  283.                     
  284.                     buttonElement.style.height = '';
  285.                     buttonElement.style.width = '';
  286.                 }
  287.             });
  288.         } catch (error) {
  289.             console.error('Download setup error:', error);
  290.             
  291.             while (buttonElement.firstChild) {
  292.                 buttonElement.removeChild(buttonElement.firstChild);
  293.             }
  294.             
  295.             buttonElement.textContent = format;
  296.             
  297.             buttonElement.disabled = false;
  298.             
  299.             buttonElement.style.height = '';
  300.             buttonElement.style.width = '';
  301.         }
  302.     }
  303.  
  304.     function filterSubtitles(subtitles, query) {
  305.         if (!query) return subtitles;
  306.         
  307.         const lowerQuery = query.toLowerCase();
  308.         return subtitles.filter(sub => 
  309.             sub.name.toLowerCase().includes(lowerQuery)
  310.         );
  311.     }
  312.  
  313.     function createSubtitleTable(subtitles, autoTransSubs, videoTitle) {
  314.         const container = document.createElement('div');
  315.         container.className = 'subtitle-container';
  316.  
  317.         const titleDiv = document.createElement('div');
  318.         titleDiv.className = 'subtitle-dropdown-title';
  319.         titleDiv.textContent = `Download Subtitles (${subtitles.length + autoTransSubs.length})`;
  320.         container.appendChild(titleDiv);
  321.         
  322.         const searchContainer = document.createElement('div');
  323.         searchContainer.className = 'subtitle-search-container';
  324.         
  325.         const searchInput = document.createElement('input');
  326.         searchInput.type = 'text';
  327.         searchInput.className = 'subtitle-search-input';
  328.         searchInput.placeholder = 'Search languages...';
  329.         
  330.         const searchIcon = document.createElement('div');
  331.         searchIcon.className = 'subtitle-search-icon';
  332.         searchIcon.appendChild(createSearchIcon());
  333.         
  334.         searchContainer.appendChild(searchIcon);
  335.         searchContainer.appendChild(searchInput);
  336.         container.appendChild(searchContainer);
  337.  
  338.         const tabsDiv = document.createElement('div');
  339.         tabsDiv.className = 'subtitle-tabs';
  340.  
  341.         const regularTab = document.createElement('div');
  342.         regularTab.className = 'subtitle-tab active';
  343.         regularTab.textContent = 'Original';
  344.         regularTab.dataset.tab = 'regular';
  345.  
  346.         const autoTab = document.createElement('div');
  347.         autoTab.className = 'subtitle-tab';
  348.         autoTab.textContent = 'Auto Translate';
  349.         autoTab.dataset.tab = 'auto';
  350.  
  351.         tabsDiv.appendChild(regularTab);
  352.         tabsDiv.appendChild(autoTab);
  353.         container.appendChild(tabsDiv);
  354.  
  355.         const itemsPerPage = 30;
  356.         
  357.         const regularContent = createSubtitleContent(subtitles, videoTitle, true, itemsPerPage);
  358.         regularContent.className = 'subtitle-content regular-content active';
  359.  
  360.         const autoContent = createSubtitleContent(autoTransSubs, videoTitle, false, itemsPerPage);
  361.         autoContent.className = 'subtitle-content auto-content';
  362.  
  363.         container.appendChild(regularContent);
  364.         container.appendChild(autoContent);
  365.  
  366.         tabsDiv.addEventListener('click', (e) => {
  367.             if (e.target.classList.contains('subtitle-tab')) {
  368.                 document.querySelectorAll('.subtitle-tab').forEach(tab => tab.classList.remove('active'));
  369.                 document.querySelectorAll('.subtitle-content').forEach(content => content.classList.remove('active'));
  370.  
  371.                 e.target.classList.add('active');
  372.                 const tabType = e.target.dataset.tab;
  373.                 document.querySelector(`.${tabType}-content`).classList.add('active');
  374.                 
  375.                 searchInput.value = '';
  376.                 
  377.                 const activeContent = document.querySelector(`.${tabType}-content`);
  378.                 const grid = activeContent.querySelector('.subtitle-grid');
  379.                 
  380.                 if (tabType === 'regular') {
  381.                     renderPage(1, subtitles, grid, itemsPerPage, videoTitle);
  382.                 } else {
  383.                     renderPage(1, autoTransSubs, grid, itemsPerPage, videoTitle);
  384.                 }
  385.                 
  386.                 const pagination = activeContent.querySelector('.subtitle-pagination');
  387.                 updatePagination(
  388.                     1, 
  389.                     Math.ceil((tabType === 'regular' ? subtitles : autoTransSubs).length / itemsPerPage),
  390.                     pagination,
  391.                     null,
  392.                     grid,
  393.                     tabType === 'regular' ? subtitles : autoTransSubs,
  394.                     itemsPerPage,
  395.                     videoTitle
  396.                 );
  397.             }
  398.         });
  399.         
  400.         searchInput.addEventListener('input', (e) => {
  401.             const query = e.target.value.trim();
  402.             const activeTab = document.querySelector('.subtitle-tab.active').dataset.tab;
  403.             const activeContent = document.querySelector(`.${activeTab}-content`);
  404.             const grid = activeContent.querySelector('.subtitle-grid');
  405.             const pagination = activeContent.querySelector('.subtitle-pagination');
  406.             
  407.             const sourceSubtitles = activeTab === 'regular' ? subtitles : autoTransSubs;
  408.             const filteredSubtitles = filterSubtitles(sourceSubtitles, query);
  409.             
  410.             renderPage(1, filteredSubtitles, grid, itemsPerPage, videoTitle);
  411.             updatePagination(
  412.                 1, 
  413.                 Math.ceil(filteredSubtitles.length / itemsPerPage), 
  414.                 pagination, 
  415.                 filteredSubtitles,
  416.                 grid,
  417.                 sourceSubtitles,
  418.                 itemsPerPage,
  419.                 videoTitle
  420.             );
  421.             
  422.             grid.dataset.filteredCount = filteredSubtitles.length;
  423.             grid.dataset.query = query;
  424.         });
  425.  
  426.         return container;
  427.     }
  428.  
  429.     function renderPage(page, subtitlesList, gridElement, itemsPerPage, videoTitle) {
  430.         while (gridElement.firstChild) {
  431.             gridElement.removeChild(gridElement.firstChild);
  432.         }
  433.  
  434.         const startIndex = (page - 1) * itemsPerPage;
  435.         const endIndex = Math.min(startIndex + itemsPerPage, subtitlesList.length);
  436.  
  437.         for (let i = startIndex; i < endIndex; i++) {
  438.             const sub = subtitlesList[i];
  439.             const item = document.createElement('div');
  440.             item.className = 'subtitle-item';
  441.  
  442.             const langLabel = document.createElement('div');
  443.             langLabel.className = 'subtitle-language';
  444.             langLabel.textContent = sub.name;
  445.             item.appendChild(langLabel);
  446.  
  447.             const btnContainer = document.createElement('div');
  448.             btnContainer.className = 'subtitle-format-container';
  449.  
  450.             const srtBtn = document.createElement('button');
  451.             srtBtn.textContent = 'SRT';
  452.             srtBtn.className = 'subtitle-format-btn srt-btn';
  453.             srtBtn.addEventListener('click', (e) => {
  454.                 e.preventDefault();
  455.                 e.stopPropagation();
  456.                 downloadSubtitle(sub.download.srt, `${videoTitle} - ${sub.name}.srt`, 'SRT', srtBtn);
  457.             });
  458.             btnContainer.appendChild(srtBtn);
  459.  
  460.             const txtBtn = document.createElement('button');
  461.             txtBtn.textContent = 'TXT';
  462.             txtBtn.className = 'subtitle-format-btn txt-btn';
  463.             txtBtn.addEventListener('click', (e) => {
  464.                 e.preventDefault();
  465.                 e.stopPropagation();
  466.                 downloadSubtitle(sub.download.txt, `${videoTitle} - ${sub.name}.txt`, 'TXT', txtBtn);
  467.             });
  468.             btnContainer.appendChild(txtBtn);
  469.  
  470.             item.appendChild(btnContainer);
  471.             gridElement.appendChild(item);
  472.         }
  473.     }
  474.  
  475.     function updatePagination(page, totalPages, paginationElement, filteredSubs, gridElement, sourceSubtitles, itemsPerPage, videoTitle) {
  476.         while (paginationElement.firstChild) {
  477.             paginationElement.removeChild(paginationElement.firstChild);
  478.         }
  479.  
  480.         if (totalPages <= 1) return;
  481.  
  482.         const prevBtn = document.createElement('button');
  483.         prevBtn.textContent = '«';
  484.         prevBtn.className = 'pagination-btn';
  485.         prevBtn.disabled = page === 1;
  486.         prevBtn.addEventListener('click', (e) => {
  487.             e.stopPropagation();
  488.             if (page > 1) {
  489.                 const newPage = page - 1;
  490.                 const query = gridElement.dataset.query;
  491.                 const subsToUse = query && filteredSubs ? filteredSubs : sourceSubtitles;
  492.                 
  493.                 renderPage(newPage, subsToUse, gridElement, itemsPerPage, videoTitle);
  494.                 updatePagination(
  495.                     newPage, 
  496.                     totalPages, 
  497.                     paginationElement, 
  498.                     filteredSubs,
  499.                     gridElement,
  500.                     sourceSubtitles,
  501.                     itemsPerPage,
  502.                     videoTitle
  503.                 );
  504.             }
  505.         });
  506.         paginationElement.appendChild(prevBtn);
  507.  
  508.         const pageIndicator = document.createElement('span');
  509.         pageIndicator.className = 'page-indicator';
  510.         pageIndicator.textContent = `${page} / ${totalPages}`;
  511.         paginationElement.appendChild(pageIndicator);
  512.  
  513.         const nextBtn = document.createElement('button');
  514.         nextBtn.textContent = '»';
  515.         nextBtn.className = 'pagination-btn';
  516.         nextBtn.disabled = page === totalPages;
  517.         nextBtn.addEventListener('click', (e) => {
  518.             e.stopPropagation();
  519.             if (page < totalPages) {
  520.                 const newPage = page + 1;
  521.                 const query = gridElement.dataset.query;
  522.                 const subsToUse = query && filteredSubs ? filteredSubs : sourceSubtitles;
  523.                 
  524.                 renderPage(newPage, subsToUse, gridElement, itemsPerPage, videoTitle);
  525.                 updatePagination(
  526.                     newPage, 
  527.                     totalPages, 
  528.                     paginationElement, 
  529.                     filteredSubs,
  530.                     gridElement,
  531.                     sourceSubtitles,
  532.                     itemsPerPage,
  533.                     videoTitle
  534.                 );
  535.             }
  536.         });
  537.         paginationElement.appendChild(nextBtn);
  538.     }
  539.  
  540.     function createSubtitleContent(subtitles, videoTitle, isOriginal, itemsPerPage) {
  541.         const content = document.createElement('div');
  542.         let currentPage = 1;
  543.  
  544.         const grid = document.createElement('div');
  545.         grid.className = 'subtitle-grid';
  546.         
  547.         if (isOriginal && subtitles.length <= 6) {
  548.             grid.classList.add('center-grid');
  549.         }
  550.         
  551.         grid.dataset.filteredCount = subtitles.length;
  552.         grid.dataset.query = '';
  553.  
  554.         const pagination = document.createElement('div');
  555.         pagination.className = 'subtitle-pagination';
  556.  
  557.         renderPage(currentPage, subtitles, grid, itemsPerPage, videoTitle);
  558.         updatePagination(
  559.             currentPage, 
  560.             Math.ceil(subtitles.length / itemsPerPage), 
  561.             pagination, 
  562.             null,
  563.             grid,
  564.             subtitles,
  565.             itemsPerPage,
  566.             videoTitle
  567.         );
  568.  
  569.         content.appendChild(grid);
  570.         content.appendChild(pagination);
  571.  
  572.         return content;
  573.     }
  574.  
  575.     async function handleSubtitleDownload(e) {
  576.         e.preventDefault();
  577.         const videoId = getVideoId();
  578.  
  579.         if (!videoId) {
  580.             console.error('Video ID not found');
  581.             return;
  582.         }
  583.  
  584.         const backdrop = document.createElement('div');
  585.         backdrop.className = 'subtitle-backdrop';
  586.         document.body.appendChild(backdrop);
  587.  
  588.         const loader = document.createElement('div');
  589.         loader.className = 'subtitle-loader';
  590.         backdrop.appendChild(loader);
  591.  
  592.         try {
  593.             const data = _generateData(videoId);
  594.             
  595.             const headersList = {
  596.                 "authority": "get-info.downsub.com",
  597.                 "accept": "application/json, text/plain, */*",
  598.                 "accept-language": "id-ID,id;q=0.9",
  599.                 "origin": "https://downsub.com",
  600.                 "priority": "u=1, i",
  601.                 "referer": "https://downsub.com/",
  602.                 "sec-ch-ua": '"Not(A:Brand";v="99", "Google Chrome";v="133", "Chromium";v="133"',
  603.                 "sec-ch-ua-mobile": "?0",
  604.                 "sec-ch-ua-platform": '"Windows"',
  605.                 "sec-fetch-dest": "empty",
  606.                 "sec-fetch-mode": "cors",
  607.                 "sec-fetch-site": "same-site",
  608.                 "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"
  609.             };
  610.             
  611.             const response = await new Promise((resolve, reject) => {
  612.                 GM_xmlhttpRequest({
  613.                     method: 'GET',
  614.                     url: API + data.id,
  615.                     headers: headersList,
  616.                     responseType: 'json',
  617.                     onload: function(response) {
  618.                         if (response.status >= 200 && response.status < 300) {
  619.                             resolve(response.response);
  620.                         } else {
  621.                             reject(new Error(`Request failed with status ${response.status}`));
  622.                         }
  623.                     },
  624.                     onerror: function() {
  625.                         reject(new Error('Network error'));
  626.                     }
  627.                 });
  628.             });
  629.  
  630.             const processedResponse = _decodeArray(response);
  631.  
  632.             const videoTitleElement = document.querySelector('yt-formatted-string.style-scope.ytd-watch-metadata');
  633.             const videoTitle = videoTitleElement ? videoTitleElement.textContent.trim() : `youtube_video_${videoId}`;
  634.  
  635.             loader.remove();
  636.  
  637.             if (!processedResponse.subtitles || processedResponse.subtitles.length === 0 &&
  638.                 (!processedResponse.subtitlesAutoTrans || processedResponse.subtitlesAutoTrans.length === 0)) {
  639.                 while (backdrop.firstChild) {
  640.                     backdrop.removeChild(backdrop.firstChild);
  641.                 }
  642.                 const errorDiv = document.createElement('div');
  643.                 errorDiv.className = 'subtitle-error';
  644.                 errorDiv.textContent = 'No subtitles available for this video';
  645.                 backdrop.appendChild(errorDiv);
  646.  
  647.                 setTimeout(() => {
  648.                     backdrop.remove();
  649.                 }, 2000);
  650.                 return;
  651.             }
  652.  
  653.             const subtitleTable = createSubtitleTable(
  654.                 processedResponse.subtitles || [],
  655.                 processedResponse.subtitlesAutoTrans || [],
  656.                 videoTitle
  657.             );
  658.             backdrop.appendChild(subtitleTable);
  659.  
  660.             backdrop.addEventListener('click', (e) => {
  661.                 if (!subtitleTable.contains(e.target)) {
  662.                     subtitleTable.remove();
  663.                     backdrop.remove();
  664.                 }
  665.             });
  666.  
  667.             subtitleTable.addEventListener('click', (e) => {
  668.                 e.stopPropagation();
  669.             });
  670.  
  671.         } catch (error) {
  672.             console.error('Error fetching subtitles:', error);
  673.  
  674.             while (backdrop.firstChild) {
  675.                 backdrop.removeChild(backdrop.firstChild);
  676.             }
  677.             const errorDiv = document.createElement('div');
  678.             errorDiv.className = 'subtitle-error';
  679.             errorDiv.textContent = 'Error fetching subtitles. Please try again.';
  680.             backdrop.appendChild(errorDiv);
  681.  
  682.             setTimeout(() => {
  683.                 backdrop.remove();
  684.             }, 2000);
  685.         }
  686.     }
  687.  
  688.     function initializeStyles(computedStyle) {
  689.         if (document.querySelector('#yt-subtitle-downloader-styles')) return;
  690.  
  691.         const style = document.createElement('style');
  692.         style.id = 'yt-subtitle-downloader-styles';
  693.         style.textContent = `
  694.             .custom-subtitle-btn {
  695.                 background: none;
  696.                 border: none;
  697.                 cursor: pointer;
  698.                 padding: 0;
  699.                 width: ${computedStyle.width};
  700.                 height: ${computedStyle.height};
  701.                 display: flex;
  702.                 align-items: center;
  703.                 justify-content: center;
  704.                 position: relative;
  705.             }
  706.             @-moz-document url-prefix() {
  707.                 .custom-subtitle-btn {
  708.                     top: 0;
  709.                     margin-bottom: 0;
  710.                     vertical-align: top;
  711.                 }
  712.             }
  713.             .custom-subtitle-btn svg {
  714.                 width: 24px;
  715.                 height: 24px;
  716.                 fill: #fff;
  717.                 position: absolute;
  718.                 top: 50%;
  719.                 left: 50%;
  720.                 transform: translate(-50%, -50%);
  721.                 opacity: 1;
  722.                 transition: opacity 0.2s ease-in-out;
  723.             }
  724.             .custom-subtitle-btn .hover-icon {
  725.                 opacity: 0;
  726.             }
  727.             .custom-subtitle-btn:hover .default-icon {
  728.                 opacity: 0;
  729.             }
  730.             .custom-subtitle-btn:hover .hover-icon {
  731.                 opacity: 1;
  732.             }
  733.             .subtitle-backdrop {
  734.                 position: fixed;
  735.                 top: 0;
  736.                 left: 0;
  737.                 width: 100%;
  738.                 height: 100%;
  739.                 background: rgba(0, 0, 0, 0.7);
  740.                 z-index: 9998;
  741.                 display: flex;
  742.                 align-items: center;
  743.                 justify-content: center;
  744.                 backdrop-filter: blur(3px);
  745.             }
  746.             .subtitle-loader {
  747.                 width: 40px;
  748.                 height: 40px;
  749.                 border: 4px solid rgba(255, 255, 255, 0.3);
  750.                 border-radius: 50%;
  751.                 border-top: 4px solid #fff;
  752.                 animation: spin 1s linear infinite;
  753.             }
  754.             @keyframes spin {
  755.                 0% { transform: rotate(0deg); }
  756.                 100% { transform: rotate(360deg); }
  757.             }
  758.             .subtitle-error {
  759.                 background: rgba(0, 0, 0, 0.8);
  760.                 color: #fff;
  761.                 padding: 16px 24px;
  762.                 border-radius: 8px;
  763.                 font-size: 14px;
  764.             }
  765.             .subtitle-container {
  766.                 position: relative;
  767.                 background: rgba(28, 28, 28, 0.95);
  768.                 border: 1px solid rgba(255, 255, 255, 0.1);
  769.                 border-radius: 8px;
  770.                 padding: 16px;
  771.                 z-index: 9999;
  772.                 min-width: 700px;
  773.                 max-width: 90vw;
  774.                 max-height: 80vh;
  775.                 overflow-y: auto;
  776.                 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  777.                 color: #fff;
  778.                 font-family: 'Roboto', Arial, sans-serif;
  779.             }
  780.             .subtitle-dropdown-title {
  781.                 color: #fff;
  782.                 font-size: 16px;
  783.                 font-weight: 500;
  784.                 margin-bottom: 16px;
  785.                 text-align: center;
  786.             }
  787.             .subtitle-search-container {
  788.                 position: relative;
  789.                 margin-bottom: 16px;
  790.                 width: 100%;
  791.                 max-width: 100%;
  792.             }
  793.             .subtitle-search-input {
  794.                 width: 100%;
  795.                 padding: 8px 12px 8px 36px;
  796.                 border-radius: 4px;
  797.                 border: 1px solid rgba(255, 255, 255, 0.2);
  798.                 background: rgba(255, 255, 255, 0.1);
  799.                 color: white;
  800.                 font-size: 14px;
  801.                 box-sizing: border-box;
  802.             }
  803.             .subtitle-search-input::placeholder {
  804.                 color: rgba(255, 255, 255, 0.5);
  805.             }
  806.             .subtitle-search-input:focus {
  807.                 outline: none;
  808.                 border-color: rgba(255, 255, 255, 0.4);
  809.                 background: rgba(255, 255, 255, 0.15);
  810.             }
  811.             .subtitle-search-icon {
  812.                 position: absolute;
  813.                 left: 10px;
  814.                 top: 50%;
  815.                 transform: translateY(-50%);
  816.                 display: flex;
  817.                 align-items: center;
  818.                 justify-content: center;
  819.             }
  820.             .subtitle-search-icon svg {
  821.                 fill: rgba(255, 255, 255, 0.5);
  822.             }
  823.             .subtitle-tabs {
  824.                 display: flex;
  825.                 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  826.                 margin-bottom: 16px;
  827.                 justify-content: center;
  828.             }
  829.             .subtitle-tab {
  830.                 padding: 10px 20px;
  831.                 cursor: pointer;
  832.                 opacity: 0.7;
  833.                 transition: all 0.2s;
  834.                 border-bottom: 2px solid transparent;
  835.                 font-size: 15px;
  836.                 font-weight: 500;
  837.             }
  838.             .subtitle-tab:hover {
  839.                 opacity: 1;
  840.             }
  841.             .subtitle-tab.active {
  842.                 opacity: 1;
  843.                 border-bottom: 2px solid #2b7fff;
  844.             }
  845.             .subtitle-content {
  846.                 display: none;
  847.             }
  848.             .subtitle-content.active {
  849.                 display: block;
  850.             }
  851.             .subtitle-grid {
  852.                 display: grid;
  853.                 grid-template-columns: repeat(3, 1fr);
  854.                 gap: 10px;
  855.                 margin-bottom: 16px;
  856.             }
  857.             .subtitle-grid.center-grid {
  858.                 justify-content: center;
  859.                 display: flex;
  860.                 flex-wrap: wrap;
  861.                 gap: 16px;
  862.             }
  863.             .center-grid .subtitle-item {
  864.                 width: 200px;
  865.             }
  866.             .subtitle-item {
  867.                 background: rgba(255, 255, 255, 0.05);
  868.                 border-radius: 6px;
  869.                 padding: 10px;
  870.                 transition: all 0.2s;
  871.             }
  872.             .subtitle-item:hover {
  873.                 background: rgba(255, 255, 255, 0.1);
  874.             }
  875.             .subtitle-language {
  876.                 font-size: 13px;
  877.                 font-weight: 500;
  878.                 margin-bottom: 8px;
  879.                 white-space: nowrap;
  880.                 overflow: hidden;
  881.                 text-overflow: ellipsis;
  882.             }
  883.             .subtitle-format-container {
  884.                 display: flex;
  885.                 gap: 8px;
  886.             }
  887.             .subtitle-format-btn {
  888.                 flex: 1;
  889.                 padding: 6px 0;
  890.                 border-radius: 4px;
  891.                 border: none;
  892.                 font-size: 12px;
  893.                 font-weight: 500;
  894.                 cursor: pointer;
  895.                 transition: all 0.2s;
  896.                 text-align: center;
  897.                 position: relative;
  898.                 height: 28px;
  899.                 line-height: 16px;
  900.             }
  901.             .button-spinner {
  902.                 width: 14px;
  903.                 height: 14px;
  904.                 border: 2px solid rgba(255, 255, 255, 0.3);
  905.                 border-radius: 50%;
  906.                 border-top: 2px solid #fff;
  907.                 animation: spin 1s linear infinite;
  908.                 margin: 0 auto;
  909.             }
  910.             .check-icon {
  911.                 width: 14px;
  912.                 height: 14px;
  913.                 fill: white;
  914.                 margin: 0 auto;
  915.             }
  916.             .download-success {
  917.                 background-color: #00a63e !important;
  918.             }
  919.             .srt-btn {
  920.                 background-color: #2b7fff;
  921.                 color: white;
  922.             }
  923.             .srt-btn:hover {
  924.                 background-color: #50a2ff;
  925.             }
  926.             .txt-btn {
  927.                 background-color: #615fff;
  928.                 color: white;
  929.             }
  930.             .txt-btn:hover {
  931.                 background-color: #7c86ff;
  932.             }
  933.             .subtitle-pagination {
  934.                 display: flex;
  935.                 justify-content: center;
  936.                 align-items: center;
  937.                 margin-top: 16px;
  938.             }
  939.             .pagination-btn {
  940.                 background: rgba(255, 255, 255, 0.1);
  941.                 border: none;
  942.                 color: white;
  943.                 width: 32px;
  944.                 height: 32px;
  945.                 border-radius: 16px;
  946.                 cursor: pointer;
  947.                 display: flex;
  948.                 align-items: center;
  949.                 justify-content: center;
  950.                 font-size: 18px;
  951.                 transition: all 0.2s;
  952.             }
  953.             .pagination-btn:not(:disabled):hover {
  954.                 background: rgba(255, 255, 255, 0.2);
  955.             }
  956.             .pagination-btn:disabled {
  957.                 opacity: 0.3;
  958.                 cursor: not-allowed;
  959.             }
  960.             .page-indicator {
  961.                 margin: 0 16px;
  962.                 font-size: 14px;
  963.                 color: rgba(255, 255, 255, 0.7);
  964.             }
  965.         `;
  966.         document.head.appendChild(style);
  967.     }
  968.  
  969.     function initializeButton() {
  970.         if (document.querySelector('.custom-subtitle-btn')) return;
  971.  
  972.         const originalButton = document.querySelector('.ytp-subtitles-button');
  973.         if (!originalButton) return;
  974.  
  975.         const newButton = document.createElement('button');
  976.         const computedStyle = window.getComputedStyle(originalButton);
  977.  
  978.         Object.assign(newButton, {
  979.             className: 'ytp-button custom-subtitle-btn',
  980.             title: 'Download Subtitles'
  981.         });
  982.  
  983.         newButton.setAttribute('aria-pressed', 'false');
  984.         initializeStyles(computedStyle);
  985.  
  986.         newButton.append(
  987.             createSVGIcon('default-icon', false),
  988.             createSVGIcon('hover-icon', true)
  989.         );
  990.  
  991.         newButton.addEventListener('click', (e) => {
  992.             const existingDropdown = document.querySelector('.subtitle-container');
  993.             existingDropdown ? existingDropdown.remove() : handleSubtitleDownload(e);
  994.         });
  995.  
  996.         originalButton.insertAdjacentElement('afterend', newButton);
  997.     }
  998.  
  999.     function initializeObserver() {
  1000.         const observer = new MutationObserver((mutations) => {
  1001.             mutations.forEach((mutation) => {
  1002.                 if (mutation.addedNodes.length) {
  1003.                     const isVideoPage = window.location.pathname === '/watch';
  1004.                     if (isVideoPage && !document.querySelector('.custom-subtitle-btn')) {
  1005.                         initializeButton();
  1006.                     }
  1007.                 }
  1008.             });
  1009.         });
  1010.  
  1011.         function startObserving() {
  1012.             const playerContainer = document.getElementById('player-container');
  1013.             const contentContainer = document.getElementById('content');
  1014.  
  1015.             if (playerContainer) {
  1016.                 observer.observe(playerContainer, {
  1017.                     childList: true,
  1018.                     subtree: true
  1019.                 });
  1020.             }
  1021.  
  1022.             if (contentContainer) {
  1023.                 observer.observe(contentContainer, {
  1024.                     childList: true,
  1025.                     subtree: true
  1026.                 });
  1027.             }
  1028.  
  1029.             if (window.location.pathname === '/watch') {
  1030.                 initializeButton();
  1031.             }
  1032.         }
  1033.  
  1034.         startObserving();
  1035.  
  1036.         if (!document.getElementById('player-container')) {
  1037.             const retryInterval = setInterval(() => {
  1038.                 if (document.getElementById('player-container')) {
  1039.                     startObserving();
  1040.                     clearInterval(retryInterval);
  1041.                 }
  1042.             }, 1000);
  1043.  
  1044.             setTimeout(() => clearInterval(retryInterval), 10000);
  1045.         }
  1046.  
  1047.         const handleNavigation = () => {
  1048.             if (window.location.pathname === '/watch') {
  1049.                 initializeButton();
  1050.             }
  1051.         };
  1052.  
  1053.         window.addEventListener('yt-navigate-finish', handleNavigation);
  1054.  
  1055.         return () => {
  1056.             observer.disconnect();
  1057.             window.removeEventListener('yt-navigate-finish', handleNavigation);
  1058.         };
  1059.     }
  1060.  
  1061.     function addSubtitleButton() {
  1062.         initializeObserver();
  1063.     }
  1064.  
  1065.     addSubtitleButton();
  1066. })();