☰

Greasy Fork is available in English.

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