☰

Youtube قوراللىرى ھەممىسى بىر يەرلىك چۈشۈرۈش MP4,mp3

Youtube قورالىنىڭ ھەممىسى بىر يەرلىك چۈشۈرۈشتە mp4, MP3 HIGH QUAقنى قا

بۇ قوليازمىنى قاچىلاش؟
ئاپتورنىڭ تەۋسىيەلىگەن قوليازمىسى

سىز بەلكىم WhatsApp Sticker Creator with Custom Maker Enhanced نى ياقتۇرۇشىڭىز مۇمكىن.

بۇ قوليازمىنى قاچىلاش 
  1. // ==UserScript==
  2. // @name Youtube Tools All in one local download mp3 mp4 HIGT QUALITY return dislikes and more
  3. // @name:zh-TW  Youtube 工具 多合一本地下載 MP4、MP3
  4. // @name:zh-HK  Youtube 工具 多合一本地下載 MP4、MP3
  5. // @name:zh-CN  Youtube 工具 多合一本地下載 MP4、MP3
  6. // @name:ja Youtube ツール オールインワンのローカル ダウンロード MP4、MP3
  7. // @name:kr Youtube 도구 올인원 로컬 다운로드 외부 서비스 없이 MP4, MP3
  8. // @name:ar Youtube Tools All in one local download mp3 mp4 HIGT QUALITY return dislikes and more
  9. // @name:bg Youtube-Tools Alles in einem lokalen Download von MP4, MP3.
  10. // @name:cs Nástroje YouTube Vše v jednom místní Stahujte MP4, MP3
  11. // @name:da Youtube-værktøjer Alt i én lokal Download MP4, MP3
  12. // @name:de Youtube-Tools Alles in einem lokalen Download von MP4, MP3
  13. // @name:tel Youtube టూల్స్ అన్నీ ఒకే లోకల్ డౌన్‌లోడ్ MP4, Mp3
  14. // @name:es Youtube Custom Todo en uno Descarga local MP4, MP3.
  15. // @name:en Youtube Tools All in one local download mp3 mp4.
  16. // @name:fr Outils Youtube Tout-en-un local Téléchargez MP4, MP3.
  17. // @name:fr-CA Outils Youtube Tout-en-un local Téléchargez MP4, MP3.
  18. // @name:he כלים של YouTube הכל במקום אחד מקומי הורדה MP4, MP3 באיכות גבוהה ללא שירות חיצוני ועוד.
  19. // @name:hu Youtube Eszközök Minden egy helyen Letöltés MP4, MP3.
  20. // @name:id Alat Youtube Semua dalam satu lokal Unduh MP4, MP3.
  21. // @name:it Strumenti Youtube Tutto in uno Scarica locale MP4, MP3.
  22. // @name:ko Youtube 도구 올인원 로컬 외부 서비스 없이 MP4, MP3
  23. // @name:nb Youtube-verktøy Alt i ett lokalt Last ned MP4, MP3
  24. // @name:nl Youtube Tools Alles in één lokaal Download MP4, MP3
  25. // @name:pl Narzędzia YouTube Wszystko w jednym lokalnym. Pobierz MP4, MP3
  26. // @name:pt-BR Ferramentas do Youtube Tudo em um local Baixe MP4, MP3 DE ALTA QUALIDAD.
  27. // @name:ro YInstrumente Youtube Toate într-un singur local Descărcați MP4, MP3.
  28. // @name:ru Инструменты Youtube Все в одном локальном формате. Загрузите MP4, MP3.
  29. // @name:sk Nástroje YouTube Všetko v jednom miestne Stiahnite si MP4, MP3
  30. // @name:sr Иоутубе алати Све у једном локалном Преузми МП4, МП3
  31. // @name:sv Youtube-verktyg Allt i ett lokalt Ladda ner MP4, MP3
  32. // @name:th เครื่องมือ Youtube ทั้งหมดในที่เดียว ดาวน์โหลด MP4, MP3
  33. // @name:tr Youtube Araçları Hepsi bir arada yerel Harici hizmet olmadan MP4, MP3
  34. // @name:uk Інструменти Youtube Все в одному локальному завантаженні MP4, MP3
  35. // @name:ug Youtube قوراللىرى ھەممىسى بىر يەرلىك چۈشۈرۈش MP4,mp3
  36. // @name:vi Công cụ Youtube Tất cả trong một cục bộ Tải xuống MP4, MP3
  37. // @description:zh-TW Youtube 工具 多合一本地下載 mp4、MP3
  38. // @description:zh-HK Youtube 工具 多合一本地下載 mp4、MP3
  39. // @description:zh-CN Youtube 工具 多合一本地下載 mp4、MP3
  40. // @description:ja    Youtube ツール オールインワン ローカル ダウンロード mp4、MP3 、
  41. // @description:kr    Youtube 도구 올인원 로컬 다운로드 mp4, MP3
  42. // @description:ar    Herramientas de YouTube Todo en uno Descarga local mp4, MP3
  43. // @description:bg    Инструменти за Youtube Всичко в едно локално изтегляне mp4,
  44. // @description:cs    Nástroje YouTube Vše v jednom místní Stahování mp4, MP3
  45. // @description:da    Youtube-værktøjer Alt i ét lokalt Download mp4, MP3
  46. // @description:de    YouTube-Tools Alles in einem lokalen Laden Sie MP4, MP3
  47. // @description:tel   Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY,
  48. // @description:es Youtube tools todo en uno personlizada youtube a tu estilo y descarga MP4 y MP3
  49. // @description:fr Outils Youtube Tout-en-un local Téléchargez des mp4, des MP3
  50. // @description:fr-CA Outils Youtube Tout-en-un local Téléchargez des mp4, des MP3
  51. // @description:he  כלים של YouTube הכל במקום אחד מקומי הורד mp4, MP3
  52. // @description:hu  Youtube Eszközök Minden egyben helyi Letöltés mp4, MP3
  53. // @description:id  Alat Youtube Semua dalam satu lokal Unduh mp4, MP3
  54. // @description:it Strumenti Youtube Tutto in uno locale Scarica mp4, MP3
  55. // @description:ko  Youtube 도구 올인원 로컬 다운로드 mp4, MP3
  56. // @description:nb  YoYoutube-verktøy Alt i ett lokalt Last ned mp4, MP3
  57. // @description:nl    YouTube-tools Alles in één lokaal Download mp4, MP3
  58. // @description:pl    Narzędzia Youtube Wszystko w jednym miejscu Pobierz mp4, MP3
  59. // @description:pt-BR Ferramentas do YouTube Tudo em um só local Baixe mp4, MP3
  60. // @description:ro    Instrumente Youtube Toate într-un singur local Descărcați mp4, MP3
  61. // @description:ru    Инструменты Youtube Все в одном, локально. Загрузите mp4, MP3
  62. // @description:sk    Nástroje YouTube Všetko v jednom miestnom Sťahujte mp4, MP3
  63. // @description:sr    Иоутубе алати Све у једном локалном Преузми мп4, МП3
  64. // @description:sv    Youtube-verktyg Allt i ett lokalt Ladda ner mp4, MP3
  65. // @description:th เครื่องมือ Youtube ทั้งหมดในที่เดียว ดาวน์โหลด mp4, MP3
  66. // @description:tr Youtube Araçları Hepsi bir arada yerel Harici hizmet olmadan mp4, MP3
  67. // @description:uk Інструменти Youtube Все в одному локальному завантаженні mp4, MP3
  68. // @description:ug Youtube قورالىنىڭ ھەممىسى بىر يەرلىك چۈشۈرۈشتە mp4, MP3 HIGH QUAقنى قا
  69. // @description:vi Công cụ Youtube Tất cả trong một cục bộ Tải xuống mp4, MP3
  70. // @description:en Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY
  71. // @description Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY
  72. // @homepage     https://github.com/DeveloperMDCM/
  73. // @version      2.3.4.3
  74. // @author       DeveloperMDCM
  75. // @match        *://www.youtube.com/*
  76. // @exclude      *://music.youtube.com/*
  77. // @exclude      *://*.music.youtube.com/*
  78. // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  79. // @grant        GM_info
  80. // @grant        GM_addStyle
  81. // @grant        GM_setValue
  82. // @grant        GM_getValue
  83. // @grant        unsafeWindow
  84. // @run-at       document-end
  85. // @require      https://cdn.jsdelivr.net/npm/izitoast@1.4.0/dist/js/iziToast.min.js
  86. // @compatible chrome
  87. // @compatible firefox
  88. // @compatible opera
  89. // @compatible safari
  90. // @compatible edge
  91. // @license MIT
  92. // @namespace https://github.com/DeveloperMDCM/
  93. // ==/UserScript==
  94.  
  95. (function () {
  96.   'use strict';
  97.   let validoUrl = document.location.href;
  98.   const $e = (el) => document.querySelector(el); // any element
  99.   const $id = (el) => document.getElementById(el); // element by id
  100.   const $m = (el) => document.querySelectorAll(el); // multiple all elements
  101.   const $cl = (el) => document.createElement(el); // create element
  102.   const $sp = (el, pty) => document.documentElement.style.setProperty(el, pty); // set property variable css
  103.   const $ap = (el) => document.body.appendChild(el); // append element
  104.   const apiDislikes = "https://returnyoutubedislikeapi.com/Votes?videoId="; // Api dislikes
  105.   const apiGoogleTranslate = "https://translate.googleapis.com/translate_a/t"; // Api google translate
  106.   let selectedBgColor = "#252525"; // Background color menu default
  107.   let selectedTextColor = "#ffffff"; // Text color menu default
  108.   let selectedBgAccentColor = "#ff0000"; // Accent color menu default
  109.   const urlSharedCode = "https://greatest.deepsurf.us/es/scripts/460680-youtube-tools-all-in-one-local-download-mp3-mp4-higt-quality-return-dislikes-and-more";
  110.  
  111.   function isFullscreen() {
  112.     return document.fullscreenElement !== null;
  113.   }
  114.   // for translate comments video
  115.   const languagesTranslate = {
  116.     "af": "Afrikaans",
  117.     "sq": "Albanian",
  118.     "am": "Amharic",
  119.     "ar": "Arabic",
  120.     "hy": "Armenian",
  121.     "az": "Azerbaijani",
  122.     "eu": "Basque",
  123.     "be": "Belarusian",
  124.     "bn": "Bengali",
  125.     "bs": "Bosnian",
  126.     "bg": "Bulgarian",
  127.     "ca": "Catalan",
  128.     "ceb": "Cebuano",
  129.     "zh-CN": "Chinese (Simplified)",
  130.     "zh-TW": "Chinese (Traditional)",
  131.     "co": "Corsican",
  132.     "hr": "Croatian",
  133.     "cs": "Czech",
  134.     "da": "Danish",
  135.     "nl": "Dutch",
  136.     "en": "English",
  137.     "eo": "Esperanto",
  138.     "et": "Estonian",
  139.     "fi": "Finnish",
  140.     "fr": "French",
  141.     "fy": "Frisian",
  142.     "gl": "Galician",
  143.     "ka": "Georgian",
  144.     "de": "German",
  145.     "el": "Greek",
  146.     "gu": "Gujarati",
  147.     "ht": "Haitian Creole",
  148.     "ha": "Hausa",
  149.     "haw": "Hawaiian",
  150.     "iw": "Hebrew",
  151.     "hi": "Hindi",
  152.     "hmn": "Hmong",
  153.     "hu": "Hungarian",
  154.     "is": "Icelandic",
  155.     "ig": "Igbo",
  156.     "id": "Indonesian",
  157.     "ga": "Irish",
  158.     "it": "Italian",
  159.     "ja": "Japanese",
  160.     "jw": "Javanese",
  161.     "kn": "Kannada",
  162.     "kk": "Kazakh",
  163.     "km": "Khmer",
  164.     "ko": "Korean",
  165.     "ku": "Kurdish",
  166.     "ky": "Kyrgyz",
  167.     "lo": "Lao",
  168.     "la": "Latin",
  169.     "lv": "Latvian",
  170.     "lt": "Lithuanian",
  171.     "lb": "Luxembourgish",
  172.     "mk": "Macedonian",
  173.     "mg": "Malagasy",
  174.     "ms": "Malay",
  175.     "ml": "Malayalam",
  176.     "mt": "Maltese",
  177.     "mi": "Maori",
  178.     "mr": "Marathi",
  179.     "mn": "Mongolian",
  180.     "my": "Myanmar (Burmese)",
  181.     "ne": "Nepali",
  182.     "no": "Norwegian",
  183.     "ny": "Nyanja (Chichewa)",
  184.     "ps": "Pashto",
  185.     "fa": "Persian",
  186.     "pl": "Polish",
  187.     "pt": "Portuguese",
  188.     "pa": "Punjabi",
  189.     "ro": "Romanian",
  190.     "ru": "Russian",
  191.     "sm": "Samoan",
  192.     "gd": "Scots Gaelic",
  193.     "sr": "Serbian",
  194.     "st": "Sesotho",
  195.     "sn": "Shona",
  196.     "sd": "Sindhi",
  197.     "si": "Sinhala",
  198.     "sk": "Slovak",
  199.     "sl": "Slovenian",
  200.     "so": "Somali",
  201.     "es": "Spanish",
  202.     "su": "Sundanese",
  203.     "sw": "Swahili",
  204.     "sv": "Swedish",
  205.     "tl": "Tagalog (Filipino)",
  206.     "tg": "Tajik",
  207.     "ta": "Tamil",
  208.     "te": "Telugu",
  209.     "th": "Thai",
  210.     "tr": "Turkish",
  211.     "uk": "Ukrainian",
  212.     "ur": "Urdu",
  213.     "uz": "Uzbek",
  214.     "vi": "Vietnamese",
  215.     "cy": "Welsh",
  216.     "xh": "Xhosa",
  217.     "yi": "Yiddish",
  218.     "yo": "Yoruba",
  219.     "zu": "Zulu"
  220.   }
  221.   
  222.   function hideCanvas() {
  223.    
  224.     const canvas = $id('wave-visualizer-canvas');
  225.     if (canvas) {
  226.         canvas.style.opacity = '0';
  227.         if (controlPanel) {
  228.             controlPanel.style.opacity = '0';
  229.         }
  230.     }
  231.   }
  232.  
  233.  
  234.  
  235.   function Notify(type = 'info', message = '', title = '') {
  236.     const defaultTitles = {
  237.         success: 'Success',
  238.         error: 'Error',
  239.         info: 'Information',
  240.         warning: 'Warning',
  241.     };
  242.    
  243.     iziToast[type]({
  244.         title: title || defaultTitles[type] || 'Notification',
  245.         message: message,
  246.         position: 'bottomLeft',
  247.       });
  248.   }
  249.  
  250.  
  251.   const UPDATE_INTERVAL = 1000;
  252.     const STORAGE = {
  253.         USAGE: 'YT_TOTAL_USAGE',
  254.         VIDEO: 'YT_VIDEO_TIME',
  255.         SHORTS: 'YT_SHORTS_TIME'
  256.     };
  257.  
  258.     let usageTime = GM_getValue(STORAGE.USAGE, 0);
  259.     let videoTime = GM_getValue(STORAGE.VIDEO, 0);
  260.     let shortsTime = GM_getValue(STORAGE.SHORTS, 0);
  261.     let lastUpdate = Date.now();
  262.     let activeVideo = null;
  263.     let activeType = null;
  264.  
  265.     // Inicializar almacenamiento
  266.     GM_setValue(STORAGE.USAGE, usageTime);
  267.     GM_setValue(STORAGE.VIDEO, videoTime);
  268.     GM_setValue(STORAGE.SHORTS, shortsTime);
  269.  
  270.   function FormatterNumber(num, digits) {
  271.     const lookup = [
  272.       {
  273.         value: 1,
  274.         symbol: '',
  275.       },
  276.       {
  277.         value: 1e3,
  278.         symbol: ' K',
  279.       },
  280.       {
  281.         value: 1e6,
  282.         symbol: ' M',
  283.       },
  284.     ];
  285.     const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
  286.     const item = lookup
  287.       .slice()
  288.       .reverse()
  289.       .find((item) => {
  290.         return num >= item.value;
  291.       });
  292.     return item
  293.       ? (num / item.value).toFixed(digits).replace(rx, '$1') + item.symbol
  294.       : '0';
  295.   }
  296.  
  297.   function paramsVideoURL() {
  298.     const parametrosURL = new URLSearchParams(window.location.search); // Url parametros
  299.     return parametrosURL.get('v');
  300.   }
  301.  
  302. //   Dislikes video
  303.   async function videoDislike() {
  304.  
  305.     validoUrl = document.location.href;
  306.  
  307.     const validoVentana = $e('#below > ytd-watch-metadata > div');
  308.     if (validoVentana != undefined && document.location.href.split('?v=')[0].includes('youtube.com/watch')) {
  309.         validoUrl = paramsVideoURL();
  310.         const urlShorts = `${apiDislikes}${validoUrl}`;
  311.       try {
  312.         const respuesta = await fetch(urlShorts);
  313.         const datosShort = await respuesta.json();
  314.         const { dislikes } = datosShort;
  315.         const dislikes_content = $e('#top-level-buttons-computed > segmented-like-dislike-button-view-model > yt-smartimation > div > div > dislike-button-view-model > toggle-button-view-model > button-view-model > button');
  316.         if (dislikes_content !== undefined) {
  317.           dislikes_content.style = 'width: 90px';
  318.           dislikes_content.innerHTML = `
  319.             <svg class="svg-dislike-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3" /></svg>
  320.             ${FormatterNumber(dislikes, 0)}`;
  321.         }
  322.  
  323.       } catch (error) {
  324.         console.log(error);
  325.       }
  326.     }
  327.   }
  328.  
  329.   // dislikes shorts
  330.   async function shortDislike() {
  331.     validoUrl = document.location.href;
  332.     const validoVentanaShort = $m(
  333.       '#dislike-button > yt-button-shape > label > div > span'
  334.     );
  335.     if (validoVentanaShort != undefined && document.location.href.split('/')[3] === 'shorts') {
  336.       validoUrl = document.location.href.split('/')[4];
  337.       const urlShorts = `${apiDislikes}${validoUrl}`;
  338.       try {
  339.         const respuesta = await fetch(urlShorts);
  340.         const datosShort = await respuesta.json();  
  341.         const { dislikes } = datosShort;
  342.         for (let i = 0; i < validoVentanaShort.length; i++) {
  343.           validoVentanaShort[i].textContent = `${FormatterNumber(
  344.             dislikes,
  345.             0
  346.           )}`;
  347.         }
  348.       } catch (error) {
  349.         console.log(error);
  350.       }
  351.     }
  352.   }
  353.  
  354.   // Url change in second load
  355.   let prevUrl;
  356.   let showDislikes = false;
  357.  
  358.   setInterval(() => {
  359.     const svgDislike = $e('.svg-dislike-ico'); // Check svg in dom
  360.     const currUrl = window.location.href;
  361.     if (prevUrl !== undefined && currUrl !== prevUrl && !svgDislike && showDislikes) {
  362.       setTimeout(async() => {
  363.             await videoDislike();
  364.             await shortDislike();
  365.       },2000)
  366.     }
  367.     prevUrl = currUrl;
  368.   }, 1000);
  369.  
  370.  
  371.  
  372.   // Create a Trusted Types policy
  373.   const policy = window.trustedTypes?.createPolicy('default', {
  374.     createHTML: (input) => input,
  375.   });
  376.  
  377.  
  378.   // Styles for our enhancement panel
  379.   GM_addStyle(`
  380.        @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");
  381.       @import url("https://cdn.jsdelivr.net/npm/izitoast@1.4.0/dist/css/iziToast.min.css");
  382.       :root {
  383.               --primary-custom: #ff0000 !important;
  384.               --bg-dark-custom: #1a1a1a !important;
  385.               --bg-card-custom: #252525 !important;
  386.               --text-custom: #ffffff !important;
  387.               --text-custom-secondary: #9e9e9e !important;
  388.               --accent-custom: #ff4444 !important;
  389.           }
  390.         body .container-mdcm {
  391.               font-family: "Inter", -apple-system, sans-serif;
  392.               color: var(--yt-enhance-menu-text, --text-custom);
  393.         }
  394.         #toggle-button:hover {
  395.           background-color: rgba(255,255,255,0.1);
  396.           border-radius: 50%;
  397.           opacity: 1 !important;
  398.           }
  399.         .container-mdcm {
  400.             width: 420px;
  401.             max-width: 420px;
  402.             background-color: var(--yt-enhance-menu-bg, #252525);
  403.             border-radius: 16px 16px 0 0;
  404.             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  405.             backdrop-filter: blur(15px);
  406.             border: 1px solid rgba(255, 255, 255, 0.1);
  407.             display: flex;
  408.             flex-direction: column;
  409.             max-height: 80vh;
  410.             overflow-y: auto;
  411.             overflow-x: hidden;
  412.             height: auto;
  413.         }
  414.  
  415.         #shareDropdown {
  416.         display: none;
  417.         position: absolute;
  418.         top: 50px;
  419.         right: 100px;
  420.         background-color: var(--yt-enhance-menu-bg, #252525);
  421.         border-radius: 6px;
  422.         padding: 10px;
  423.         box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px;
  424.         z-index: 11;
  425.         }
  426.         #shareDropdown a {
  427.         color: var(--text-custom);
  428.         text-decoration: none;
  429.         line-height: 2;
  430.         font-size: 14px;
  431.         }
  432.         #shareDropdown a:hover {
  433.         color: var(--primary-custom);
  434.         }
  435.         .header-mdcm {
  436.             padding: 12px 16px;
  437.             border-bottom: 1px solid rgba(255,255,255,0.1);
  438.             position: sticky;
  439.             top: 0;
  440.             background-color: var(--yt-enhance-menu-bg, #252525);
  441.             border-radius: 16px 16px 0 0;
  442.             z-index: 10;
  443.             display: flex;
  444.             justify-content: space-between;
  445.             align-items: center;
  446.         }
  447.  
  448.         .header-mdcm h1 {
  449.             font-size: 16px; 
  450.             margin: 0;
  451.             font-weight: 600;
  452.             display: flex;
  453.             align-items: center;
  454.             gap: 8px;
  455.         }
  456.  
  457.  
  458.         .header-mdcm i {
  459.          color: var(--primary-custom)
  460.         }
  461.         
  462.  
  463.         .icons-mdcm {
  464.             display: flex;
  465.             gap: 4px;
  466.         }
  467.         .icons-mdcm i {
  468.           color: var(--yh-enhance-menu-accent, var(--text-custom));
  469.         }
  470.             
  471.  
  472.         .icon-btn-mdcm {
  473.             background: rgba(255,255,255,0.1);
  474.             border: none;
  475.             color: var(--text-custom);
  476.             width: 28px; 
  477.             height: 28px; 
  478.             border-radius: 6px; 
  479.             cursor: pointer;
  480.             transition: all 0.3s;
  481.         }
  482.  
  483.         .icon-btn-mdcm:hover {
  484.             background: rgba(255,255,255,0.2);
  485.             transform: translateY(-2px);
  486.         }
  487.  
  488.         .icon-btn-mdcm i {
  489.          color: var(--text-custom);
  490.          outline: none;
  491.          text-decoration: none;
  492.         }
  493.  
  494.         .tabs-mdcm {
  495.             padding: 10px 12px;
  496.             margin: 10px 0;
  497.             position: sticky;
  498.             top: 50px;
  499.             background-color: var(--yt-enhance-menu-bg, #252525);
  500.             z-index: 10;
  501.             display: flex;
  502.             gap: 8px;
  503.             -ms-overflow-style: none; 
  504.             padding-bottom: 8px; 
  505.         }
  506.  
  507.         
  508.  
  509.         .tabs-mdcm::-webkit-scrollbar {
  510.             height: 0px;
  511.             background-color: transparent;
  512.         }
  513.  
  514.         .tabs-mdcm:hover::-webkit-scrollbar {
  515.             height: 6px;
  516.         }
  517.  
  518.         .tabs-mdcm::-webkit-scrollbar-thumb {
  519.             background-color: rgba(255, 0, 0, 0.5);
  520.             border-radius: 3px;
  521.         }
  522.  
  523.         .tabs-mdcm::-webkit-scrollbar-track {
  524.             background-color: transparent;
  525.         }
  526.  
  527.         .tab-mdcm {
  528.             padding: 6px 10px;
  529.             border: none;
  530.             background: rgba(255,255,255,0.05);
  531.             cursor: pointer;
  532.             font-size: 12px;
  533.             color: var(--text-custom-secondary);
  534.             border-radius: 6px;
  535.             transition: all 0.3s;
  536.             flex: 1;
  537.             display: flex;
  538.             align-items: center;
  539.             gap: 6px;
  540.             flex-shrink: 0;
  541.             justify-content: center;
  542.             white-space: nowrap;
  543.         }
  544.  
  545.         .tab-mdcm svg {
  546.             width: 14px;
  547.             height: 14px;
  548.             fill: currentColor;
  549.         }
  550.  
  551.         .tab-mdcm.active {
  552.             background: var(--yt-enhance-menu-accent, --primary-custom) !important;
  553.             color: var(--text-custom);
  554.             font-weight: 500;
  555.             box-shadow: 0 4px 12px rgba(255,0,0,0.2);
  556.         }
  557.  
  558.         .tab-mdcm:hover:not(.active) {
  559.             background: rgba(255,255,255,0.1);
  560.             transform: translateY(-1px);
  561.         }
  562.  
  563.         .options-mdcm {
  564.             flex: 1;
  565.             overflow-y: auto;
  566.             padding: 0 16px 0;
  567.             scrollbar-width: thin;
  568.             scrollbar-color: var(--primary-custom) var(--bg-dark-custom);
  569.             max-height: 300px;
  570.             display: grid;
  571.             grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
  572.             gap: 8px;
  573.         }
  574.  
  575.         .options-settings-mdcm {
  576.             flex: 1;
  577.             overflow-y: auto;
  578.             padding: 0 16px 0;
  579.             scrollbar-width: thin;
  580.             scrollbar-color: var(--primary-custom) var(--bg-dark-custom);
  581.             max-height: 300px;
  582.             display: grid;
  583.             gap: 8px;
  584.         }
  585.  
  586.          .card-items-end {
  587.           display: flex;
  588.           justify-content: space-between;
  589.           align-items: center;
  590.           width: 175px;
  591.         }
  592.  
  593.          .radio-mdcm {
  594.             width: 14px;
  595.             height: 14px;
  596.             accent-color: var(--primary-custom);
  597.         }
  598.        
  599.         .color-picker-mdcm {
  600.             width: 50px;
  601.             height: 24px;
  602.             border: 1px solid rgba(255, 255, 255, 0.2);
  603.             background: rgba(255, 255, 255, 0.1);
  604.             border-radius: 4px;
  605.             cursor: pointer;
  606.             transition: all 0.3s;
  607.         }
  608.  
  609.         .color-picker-mdcm:hover {
  610.             background: rgba(255, 255, 255, 0.2);
  611.         }
  612.  
  613.         .options-mdcm::-webkit-scrollbar, .options-settings-mdcm::-webkit-scrollbar {
  614.             width: 6px;
  615.         }
  616.  
  617.         .options-mdcm::-webkit-scrollbar-track, .options-settings-mdcm::-webkit-scrollbar-track {
  618.             background: var(--bg-dark-custom);
  619.             border-radius: 3px;
  620.         }
  621.  
  622.         .options-mdcm::-webkit-scrollbar-thumb, .options-settings-mdcm::-webkit-scrollbar-thumb {
  623.             background: var(--primary-custom);
  624.             border-radius: 3px;
  625.         }
  626.  
  627.         .options-mdcm::-webkit-scrollbar-thumb:hover, .options-settings-mdcm::-webkit-scrollbar-thumb:hover {
  628.             background: var(--accent-custom);
  629.         }
  630.  
  631.         .options-mdcm::after, .options-settings-mdcm::after {
  632.             content: '';
  633.             display: block;
  634.         }
  635.  
  636.         .option-mdcm {
  637.             display: grid;
  638.             grid-template-columns: auto 1fr; 
  639.             align-items: center;
  640.             margin-bottom: 0; 
  641.             padding: 5px; 
  642.             background: rgba(255,255,255,0.05);
  643.             border-radius: 6px; 
  644.             transition: all 0.3s;
  645.             border: 1px solid rgba(255,255,255,0.05);
  646.             color: var(--yt-)
  647.             gap: 6px;
  648.         }
  649.  
  650.         .option-mdcm:hover {
  651.             background: rgba(255,255,255,0.08);
  652.             border-color: rgba(255,255,255,0.1);
  653.         }
  654.         .option-settings-mdcm {
  655.           display: flex;
  656.           justify-content: space-between;
  657.           align-items: center;
  658.           margin-bottom: 0;
  659.           padding: 6px;
  660.           background: rgba(255, 255, 255, 0.05);
  661.           border-radius: 6px;
  662.           transition: all 0.3s;
  663.           border: 1px solid rgba(255, 255, 255, 0.05);
  664.           gap: 6px;
  665.         }
  666.  
  667.         .option-settings-mdcm:hover {
  668.             background: rgba(255,255,255,0.08);
  669.             border-color: rgba(255,255,255,0.1);
  670.         }
  671.             .tab-content {
  672.             display: none;
  673.         }
  674.             .tab-content.active {
  675.                 display: block;
  676.                 margin-bottom: 10px;
  677.             }
  678.  
  679.         .checkbox-mdcm {
  680.             width: 14px; 
  681.             height: 14px; 
  682.             accent-color: var(--yt-enhance-menu-accent, --primary-custom) !important;
  683.         }
  684.  
  685.         label {
  686.             font-size: 12px; 
  687.             color: var(--text-custom);
  688.         }
  689.  
  690.         .slider-container-mdcm {
  691.             background: rgba(255,255,255,0.05);
  692.             padding: 10px; 
  693.             border-radius: 6px; 
  694.         }
  695.  
  696.         .slider-mdcm {
  697.             width: 100%;
  698.             height: 3px;
  699.             accent-color: var(--yt-enhance-menu-accent, --primary-custom) !important;
  700.             margin: 10px 0; 
  701.         }
  702.  
  703.         .reset-btn-mdcm {
  704.             padding: 5px 10px; 
  705.             border: 1px solid rgba(255,255,255,0.2);
  706.             background: rgba(255,255,255,0.1);
  707.             color: var(--text-custom);
  708.             border-radius: 4px;
  709.             cursor: pointer;
  710.             font-size: 11px; 
  711.             transition: all 0.3s;
  712.         }
  713.  
  714.         .reset-btn-mdcm:hover {
  715.             background: rgba(255,255,255,0.2);
  716.         }
  717.  
  718.         .quality-selector-mdcm select {
  719.             position: relative;
  720.             padding: 3px; 
  721.             outline: none;
  722.             border-radius: 4px;
  723.             border: 1px solid rgba(255,255,255,0.2);
  724.             background: var(--yt-enhance-menu-accent, --primary-custom) !important;
  725.             color: var(--text-custom);
  726.             width: fit-content;
  727.             appearance: none;
  728.             cursor: pointer;
  729.             font-size: 11px; 
  730.         }
  731.        
  732.  
  733.         .quality-selector-mdcm {
  734.             background: rgba(255,255,255,0.05);
  735.             padding: 10px; 
  736.             border-radius: 6px; 
  737.         }
  738.  
  739.         .select-wrapper-mdcm {
  740.           position: relative;
  741.           display: inline-block;
  742.         }
  743.  
  744.         .select-wrapper-mdcm select {
  745.           -webkit-appearance: auto;
  746.           -moz-appearance: auto;
  747.         }
  748.         
  749.         .actions-mdcm {
  750.             position: sticky;
  751.             top: 0;
  752.             padding: 12px 16px;
  753.             backdrop-filter: blur(15px);
  754.             background-color: var(--yt-enhance-menu-bg, #252525);
  755.             display: flex;
  756.             gap: 6px;
  757.             width: 390px;
  758.             border-radius: 0 0 16px 16px;
  759.             justify-content: space-between;
  760.             align-items: center;
  761.         }
  762.  
  763.         .action-buttons-mdcm {
  764.             display: flex;
  765.             gap: 6px;
  766.         }
  767.  
  768.         .action-btn-mdcm {
  769.             flex: 1;
  770.             padding: 8px; 
  771.             border: none;
  772.             border-radius: 6px; 
  773.             background: var(--primary-custom);
  774.             color: var(--text-custom);
  775.             cursor: pointer;
  776.             font-size: 12px; 
  777.             font-weight: 500;
  778.             transition: all 0.3s;
  779.             display: flex;
  780.             align-items: center;
  781.             justify-content: center;
  782.             gap: 4px; 
  783.             box-shadow: 0 4px 12px rgba(255,0,0,0.2);
  784.         }
  785.  
  786.         .action-btn:hover {
  787.             transform: translateY(-2px);
  788.             box-shadow: 0 6px 16px rgba(255,0,0,0.3);
  789.         }
  790.  
  791.         textarea.textarea-mdcm {
  792.             width: 100%;
  793.             height: 50px; 
  794.             margin-top: 10px; 
  795.             margin-bottom: 12px; 
  796.             padding: 8px; 
  797.             background: rgba(255,255,255,0.05);
  798.             border: 1px solid rgba(255,255,255,0.1);
  799.             border-radius: 6px;
  800.             color: var(--text-custom);
  801.             font-size: 11px; 
  802.             resize: none;
  803.             transition: all 0.3s;
  804.         }
  805.  
  806.         textarea.textarea-mdcm:focus {
  807.             outline: none;
  808.             border-color: var(--primary-custom);
  809.             background: rgba(255,255,255,0.08);
  810.         }
  811.  
  812.         @keyframes fadeIn {
  813.             from { opacity: 0; transform: translateY(10px); }
  814.             to { opacity: 1; transform: translateY(0); }
  815.         }
  816.  
  817.         .container-mdcm {
  818.             animation: fadeIn 0.3s ease-out;
  819.         }
  820.  
  821.         .developer-mdcm {
  822.             font-size: 10px;
  823.             color: var(--text-custom-secondary);
  824.         }
  825.  
  826.         .developer-mdcm a {
  827.             color: var(--primary-custom);
  828.             text-decoration: none;
  829.         }
  830.  
  831.         /* Styles for the import/export area */
  832.         #importExportArea {
  833.             display: none;
  834.             padding: 16px;
  835.             margin: 0px;
  836.             background-color: var(--yt-enhance-menu-bg, #252525);
  837.             border-radius: 16px;
  838.             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  839.         }
  840.  
  841.         #importExportArea.active {
  842.             display: block;
  843.             margin-top: 10px;
  844.         }
  845.  
  846.         /* Style the textarea */
  847.         #importExportArea textarea {
  848.             width: 370px;
  849.             height: 20px;
  850.             margin-bottom: 10px;
  851.             padding: 8px;
  852.             border: 1px solid rgba(255, 255, 255, 0.2);
  853.             border-radius: 6px;
  854.             background-color: rgba(255, 255, 255, 0.05);
  855.             color: var(--text-custom);
  856.             font-size: 12px;
  857.             resize: vertical;
  858.         }
  859.  
  860.         /* Style the buttons */
  861.         #importExportArea .action-buttons-mdcm  {
  862.             display: flex;
  863.             justify-content: space-between;
  864.             gap: 10px;
  865.         }
  866.  
  867.         #importExportArea .action-btn-mdcm {
  868.             flex: 1;
  869.             padding: 10px 16px;
  870.             border: none;
  871.             border-radius: 6px;
  872.             background-color: var(--primary-custom);
  873.             color: var(--text-custom);
  874.             font-size: 14px;
  875.             font-weight: 500;
  876.             cursor: pointer;
  877.             transition: background-color 0.3s ease;
  878.         }
  879.  
  880.         #importExportArea .action-btn-mdcm:hover {
  881.             background-color: var(--accent-custom);
  882.         }
  883.            
  884.       #yt-stats {
  885.       position: fixed;
  886.       top: 60px;
  887.       right: 20px;
  888.       background: #1a1a1a;
  889.       color: white;
  890.       padding: 15px;
  891.       border-radius: 10px;
  892.       width: 320px;
  893.       box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  894.       font-family: Arial, sans-serif;
  895.       display: none;
  896.       }
  897.   #yt-stats-toggle {
  898.       font-size: 12px;
  899.       color: #fff;
  900.       padding: 12px 20px;
  901.       border-radius: 5px;
  902.       cursor: pointer;
  903.   }
  904.   .stat-row {
  905.       margin: 15px 0;
  906.   }
  907.   .progress {
  908.       height: 6px;
  909.       background: #333;
  910.       border-radius: 3px;
  911.       margin: 8px 0;
  912.   }
  913.   .progress-bar {
  914.       height: 100%;
  915.       transition: width 0.3s;
  916.   }
  917.   .total-bar { background: #44aaff; }
  918.   .video-bar { background: #00ff88; }
  919.   .shorts-bar { background: #ff4444; }
  920.   #cinematics {
  921.     position: absolute !important;
  922.     width: 90vw !important;
  923.     height: 100vh ;
  924.   }
  925.     #cinematics div {
  926.         position: fixed;
  927.       inset: 0px;
  928.       pointer-events: none;
  929.       transform: scale(1.5, 2);
  930.   }
  931.       #cinematics > div > div > canvas:nth-child(1), #cinematics > div > div > canvas:nth-child(2) {
  932.    position: absolute !important;
  933.     width: 90vw !important;
  934.     height: 100vh ;
  935.       }
  936.  
  937.     // .html5-video-player.unstarted-mode {
  938.     //  background-image: url('https://avatars.githubusercontent.com/u/54366580?v=4');
  939.     // background-repeat: no-repeat;
  940.     // background-position: 50% 50%;
  941.     // display: flex;
  942.     // justify-content: center;
  943.     // align-items: center;
  944.     // }
  945.     
  946.         #yt-enhancement-panel {
  947.             position: fixed;
  948.             top: 60px;
  949.             right: 20px;
  950.             z-index: 9999;
  951.         }
  952.        
  953.         .color-picker {
  954.             width: 100%;
  955.             margin: 0;
  956.             padding: 0;
  957.             border: none;
  958.             background: none;
  959.         }
  960.         .slider {
  961.             width: 100%;
  962.         }
  963.          #toggle-panel {
  964.             z-index: 10000;
  965.             color: white;
  966.             padding: 5px;
  967.             border: none;
  968.             cursor: pointer;
  969.             display: flex;
  970.             justify-content: center;
  971.             transition: all 0.5s ease;
  972.             width: 43px;
  973.             border-radius: 100px;
  974.         }
  975.             
  976.         #icon-menu-settings {
  977.         display: flex;
  978.         align-items: center;
  979.         justify-content: center;
  980.         width: 24px;
  981.         height: 24px;
  982.         padding: 7px;
  983.         font-size: 20px;
  984.         color: var(--yt-spec-icon-inactive);
  985.         cursor: pointer;
  986.         user-select: none;
  987.         filter: drop-shadow(2px 4px 6px black);
  988.         }
  989.     
  990.         .theme-option {
  991.             margin-bottom: 15px;
  992.         }
  993.         .theme-option label {
  994.             display: flex;
  995.             align-items: center;
  996.         }
  997.        .theme-option {
  998.     position: relative;
  999.     width: auto;
  1000.     margin-bottom: 10px;
  1001.     padding: 10px;
  1002.     border-radius: 4px;
  1003.     cursor: pointer;
  1004. }
  1005.  
  1006. .theme-preview {
  1007.     position: absolute;
  1008.     top: 0;
  1009.     left: 0;
  1010.     right: 0;
  1011.     bottom: 0;
  1012.     border-radius: 10px;
  1013.     border: 1px solid #000;
  1014.     z-index: 1;
  1015. }
  1016.  
  1017. .theme-option input[type="radio"] {
  1018.     position: relative;
  1019.     z-index: 2;
  1020.     margin-right: 10px;
  1021.     cursor: pointer;
  1022. }
  1023.  
  1024. .theme-name {
  1025.     position: relative;
  1026.     z-index: 2;
  1027.     font-size: 15px;
  1028.     color: #fff;
  1029. }
  1030.  
  1031. .theme-option label {
  1032.     display: flex;
  1033.     align-items: center;
  1034.     width: 100%;
  1035.     position: relative;
  1036.     z-index: 2;
  1037. }
  1038.  
  1039.   .buttons-tranlate, .select-traductor {
  1040.         background: #000;
  1041.         font-size: 10px;
  1042.         border: none;
  1043.         color: #fbf4f4 !important;
  1044.         padding: 3px 0;
  1045.         margin-left: 10px;
  1046.         width: 70px;
  1047.         border-radius: 10px;
  1048.         }
  1049.         .buttons-tranlate:hover {
  1050.         cursor: pointer;
  1051.         background-color: #6b6b6b;
  1052.         }
  1053.          button.botones_div {
  1054.          margin: 0;
  1055.          padding: 0;
  1056.          }
  1057.  
  1058.         .tab-button:hover {
  1059.           background-color: #ec3203 !important;
  1060.           color: #ffffff !important;
  1061.           cursor: pointer;
  1062.         }
  1063.  
  1064.         .traductor-container {
  1065.             display: inline-block;
  1066.             align-items: center;
  1067.             gap: 8px;
  1068.             margin-top: 4px;
  1069.           }
  1070.          
  1071.         #eyes {
  1072.       opacity: 0;
  1073.       position: absolute;
  1074.       height: 24px;
  1075.       left: 0;
  1076.       width: 24px;
  1077.     }
  1078.  
  1079.     /* width */
  1080.     ::-webkit-scrollbar {
  1081.       width: 4px;
  1082.       height: 10px;
  1083.     }
  1084.  
  1085.     /* Track */
  1086.     ::-webkit-scrollbar-track {
  1087.       background: ##d5d5d5;
  1088.  
  1089.     }
  1090.  
  1091.     /* Handle */
  1092.     ::-webkit-scrollbar-thumb {
  1093.       background: #000;
  1094.  
  1095.     }
  1096.  
  1097.     .color-boxes {
  1098.       display: flex;
  1099.       gap: 8px;
  1100.     }
  1101.     .color-box {
  1102.       width: 20px;
  1103.       height: 20px;
  1104.       border: 1px solid rgb(221 221 221 / 60%);
  1105.       border-radius: 4px;
  1106.       cursor: pointer;
  1107.     }
  1108.     .color-box.selected {
  1109.       border: 2px solid var(--primary-custom); 
  1110.       filter: drop-shadow(0px 1px 6px red);
  1111.     }
  1112.  
  1113.     .containerButtons {
  1114.       display: flex;
  1115.       justify-content: center;
  1116.       align-items: center;
  1117.       flex-wrap: wrap;
  1118.       gap: 10px;
  1119.     }
  1120.     .containerButtons > button:hover {
  1121.       cursor: pointer;
  1122.     }
  1123.       
  1124.       body {
  1125.       padding: 0;
  1126.       margin: 0;
  1127.       overflow-y: scroll;
  1128.       overflow-x: hidden;
  1129.       }
  1130.       .style-scope.ytd-comments {
  1131.       overflow-y: auto;
  1132.       overflow-x: hidden;
  1133.       height: auto;
  1134.       }
  1135.       ytd-comment-view-model[is-reply] #author-thumbnail.ytd-comment-view-model yt-img-shadow.ytd-comment-view-model, ytd-comment-view-model[is-creator-reply] #author-thumbnail.ytd-comment-view-model yt-img-shadow.ytd-comment-view-model {
  1136.         width: 40px;
  1137.         height: 40px;
  1138.         border-radius: 50%;
  1139.       }
  1140.         img.yt-img-shadow {
  1141.         border-radius: 50% !important;
  1142.         }
  1143.         #author-thumbnail.ytd-comment-view-model yt-img-shadow.ytd-comment-view-model {
  1144.           width: 40px;
  1145.           height: 40px;
  1146.           border-radius: 50%;
  1147.           overflow: visible;
  1148.         }
  1149.       ytd-item-section-renderer.ytd-watch-next-secondary-results-renderer {
  1150.         --ytd-item-section-item-margin: 8px;
  1151.         overflow-y: auto;
  1152.         overflow-x: hidden;
  1153.         height: auto;
  1154.       }
  1155.       .right-section.ytcp-header {
  1156.       display: flex;
  1157.       flex: 1;
  1158.       align-items: center;
  1159.       gap: 45px;
  1160.       justify-content: end;
  1161.     }
  1162.       #meta.ytd-playlist-panel-video-renderer {
  1163.     min-width: 0;
  1164.     padding: 0 8px;
  1165.     display: flexbox;
  1166.     display: flex;
  1167.     flex-direction: column-reverse;
  1168.     flex: 1;
  1169.     flex-basis: 0.000000001px;
  1170. }
  1171.  
  1172.     .containerall {
  1173.         display: flex;
  1174.     align-items: center;
  1175.     justify-content: center;
  1176.     width: 50%;
  1177.     margin: auto;
  1178. }
  1179.     }
  1180.     .container .botoncalidades {
  1181.       margin: 3px 2px;
  1182.       width: 24.6%;
  1183.     }
  1184.  
  1185.     .botoncalidades:first-child {
  1186.       background-color: #0af;
  1187.     }
  1188.  
  1189.     .botoncalidades:last-child {
  1190.       background-color: red;
  1191.       width: 100px;
  1192.     }
  1193.  
  1194.     .selectcalidades,
  1195.     .botoncalidades,
  1196.     .selectcalidadesaudio {
  1197.       width: 50%;
  1198.       height: 27.8px;
  1199.       background-color: #fff;
  1200.       color: #000;
  1201.       font-size: 25px;
  1202.       text-align: center;
  1203.       border: 1px solid black;
  1204.       border-radius: 10px;
  1205.       border: none;
  1206.       font-size: 20px;
  1207.       margin: 2px 2px;
  1208.     }
  1209.  
  1210.     .botoncalidades {
  1211.       width: 70px;
  1212.       height: 30px;
  1213.       background-color: rgb(4, 156, 22);
  1214.       border: 0px solid #000;
  1215.       color: #fff;
  1216.       font-size: 20px;
  1217.       border-radius: 10px;
  1218.       margin: 2px 2px;
  1219.     }
  1220.  
  1221.     .botoncalidades:hover,
  1222.     .bntcontainer:hover {
  1223.       cursor: pointer;
  1224.     }
  1225.  
  1226.    .ocultarframe,
  1227.     .ocultarframeaudio {
  1228.       display: none;
  1229.     }
  1230.       .checked_updates {
  1231.       cursor: pointer;
  1232.       }
  1233.  
  1234.       #export-config, #import-config {
  1235.         width: 100%;
  1236.         display: flex;
  1237.         align-items: center;
  1238.         justify-content: center;
  1239.         gap: 10px;
  1240.         background-color: var(--yt-enhance-menu-accent, --primary-custom) !important;;
  1241.         color: #ffffff;
  1242.         border: none;
  1243.         padding: 5px;
  1244.       }
  1245.         #export-config:hover, #import-config:hover {
  1246.           background-color: #ff0000;
  1247.           color: #ffffff;
  1248.           cursor: pointer;
  1249.         }
  1250.  
  1251.         .yt-image-avatar-download {
  1252.           position: absolute;
  1253.           bottom: -10px;
  1254.           right: -14px;
  1255.           border: none;
  1256.           z-index: 1000;
  1257.           background: transparent;
  1258.           filter: drop-shadow(1px 0 6px red);
  1259.           color: var(--ytcp-text-primary);
  1260.           cursor: pointer;
  1261.         }
  1262.  
  1263.         .custom-classic-btn {
  1264.           display: flex;
  1265.           align-items: center;
  1266.           justify-content: center;
  1267.           background-color: rgba(255,255,255,0.1);
  1268.           border-radius: 50%;
  1269.           border: none;
  1270.           width: 48px;
  1271.           height: 48px;
  1272.           color: var(--yt-spec-icon-inactive);
  1273.           font-size: 24px;
  1274.           margin: 0px 8px;
  1275.           cursor: pointer;
  1276.         }
  1277.         .custom-classic-btn:hover {
  1278.           background-color: rgba(255,255,255,0.2);
  1279.         }
  1280.     `);
  1281.  
  1282.  
  1283.   // botons bottom video player
  1284.  
  1285.   const thumbnailVideo = `
  1286.   <button title="Image video" class="botones_div" type="button" id="imagen">
  1287.  
  1288.   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-photo-down" width="24"
  1289.     height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
  1290.     stroke-linecap="round" stroke-linejoin="round">
  1291.     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1292.     <path d="M15 8h.01"></path>
  1293.     <path d="M12.5 21h-6.5a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v6.5"></path>
  1294.     <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l4 4"></path>
  1295.     <path d="M14 14l1 -1c.653 -.629 1.413 -.815 2.13 -.559"></path>
  1296.     <path d="M19 16v6"></path>
  1297.     <path d="M22 19l-3 3l-3 -3"></path>
  1298.   </svg>
  1299. </button>
  1300.   `;
  1301.  
  1302.  
  1303.   const filterEyes = `
  1304.   <div style="position:relative; ">
  1305.   <button title="Filter eyes" class="botones_div" type="button">
  1306.     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brightness-half"
  1307.       width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
  1308.       fill="none" stroke-linecap="round" stroke-linejoin="round">
  1309.       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1310.       <path d="M12 9a3 3 0 0 0 0 6v-6z"></path>
  1311.       <path
  1312.         d="M6 6h3.5l2.5 -2.5l2.5 2.5h3.5v3.5l2.5 2.5l-2.5 2.5v3.5h-3.5l-2.5 2.5l-2.5 -2.5h-3.5v-3.5l-2.5 -2.5l2.5 -2.5z">
  1313.       </path>
  1314.     </svg>
  1315.     <input id="eyes" list="presetColors" type="color" value="#ffffff">
  1316.   <datalist id="presetColors">
  1317.     <option value="#000000" />
  1318.     <option value="#fbff00" />
  1319.     <option value="#ff0000" />
  1320.     <option value="#00ff00" />
  1321.     <option value="#0000ff" />
  1322.   </datalist>
  1323.   <div id="ojosprotect"
  1324.   style="position: fixed; pointer-events: none; width: 100%; height: 100%; left: 0px; top: 0px; opacity: 0.2; z-index: 10; display: block;">
  1325.   </div>
  1326. </div>
  1327. </button>
  1328.   `;
  1329.  
  1330.   const resetButton = `
  1331.   <button title="reset" class="botones_div" type="button" id="reset_button">
  1332.   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-power" width="24"
  1333.     height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
  1334.     stroke-linecap="round" stroke-linejoin="round">
  1335.     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1336.     <path d="M7 6a7.75 7.75 0 1 0 10 0"></path>
  1337.     <path d="M12 4l0 8"></path>
  1338.   </svg>
  1339. </button>
  1340.   `;
  1341.  
  1342.   const repeatVideo = `
  1343.   <button title="Repeat video" class="botones_div" type="button" id="repeatvideo">
  1344.  
  1345.   <svg  xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-repeat" width="24"
  1346.     height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
  1347.     stroke-linecap="round" stroke-linejoin="round">
  1348.     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1349.     <path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"></path>
  1350.     <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path>
  1351.   </svg>
  1352. </button>
  1353.   `;
  1354.  
  1355.   const downloadMp4Mp3 = `
  1356.   <button title="MP4" type="button" class="btn1 botones_div">
  1357.   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-download"
  1358.     width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
  1359.     stroke-linecap="round" stroke-linejoin="round">
  1360.     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1361.     <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
  1362.     <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
  1363.     <path d="M12 17v-6"></path>
  1364.     <path d="M9.5 14.5l2.5 2.5l2.5 -2.5"></path>
  1365.   </svg>
  1366. </button>
  1367. <button title="MP3" type="button" class="btn2 botones_div">
  1368.  
  1369.   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-music" width="24"
  1370.     height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
  1371.     stroke-linecap="round" stroke-linejoin="round">
  1372.     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1373.     <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
  1374.     <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
  1375.     <path d="M11 16m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
  1376.     <path d="M12 16l0 -5l2 1"></path>
  1377.   </svg>
  1378. </button>
  1379. <button title="Close" type="button" class="btn3 botones_div">
  1380. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-x" width="24"
  1381.   height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
  1382.   stroke-linecap="round" stroke-linejoin="round">
  1383.   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1384.   <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
  1385.   <path d="M10 10l4 4m0 -4l-4 4"></path>
  1386. </svg>
  1387. </button>
  1388.   `;
  1389.  
  1390.   const donwloadExternal = `
  1391.  
  1392.   <button title="External Download" type="button" class="external_link botones_div">
  1393.  
  1394.   <svg class="icon icon-tabler icon-tabler-external-link" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1395.       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1396.       <path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path>
  1397.       <path d="M11 13l9 -9"></path>
  1398.       <path d="M15 4h5v5"></path>
  1399.    </svg>
  1400. </button>
  1401.  
  1402.   `;
  1403.   const viewExternalVideo = `
  1404.  
  1405.   <button title="view External no cookie" type="button" class="view_external_link botones_div">
  1406.  
  1407.   <svg width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 16m0 1a1 1 0 0 1 1 -1h3a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1z" /><path d="M4 12v-6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-6" /><path d="M12 8h4v4" /><path d="M16 8l-5 5" /></svg>
  1408. </button>
  1409.  
  1410.   `;
  1411.  
  1412.   const pictureToPicture = `
  1413.   <button title="Picture to picture" type="button" class="video_picture_to_picture botones_div">
  1414.  
  1415.   <svg width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 19h-6a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v4" /><path d="M14 14m0 1a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1z" /></svg>
  1416. </button>
  1417.  
  1418.   `;
  1419.   const screenShot = `
  1420.   <button title="Screenshot video" type="button" class="screenshot_video botones_div">
  1421.   <svg width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8h.01" /><path d="M6 13l2.644 -2.644a1.21 1.21 0 0 1 1.712 0l3.644 3.644" /><path d="M13 13l1.644 -1.644a1.21 1.21 0 0 1 1.712 0l1.644 1.644" /><path d="M4 8v-2a2 2 0 0 1 2 -2h2" /><path d="M4 16v2a2 2 0 0 0 2 2h2" /><path d="M16 4h2a2 2 0 0 1 2 2v2" /><path d="M16 20h2a2 2 0 0 0 2 -2v-2" /></svg>
  1422. </button>
  1423.  
  1424.   `;
  1425.  
  1426.   const checkUpdates = `
  1427.   <button title="Check new updates" type="button" class="checked_updates botones_div">
  1428.   <svg width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /></svg>
  1429. </button>
  1430.   `;
  1431.  
  1432.   const bufferVideo = `
  1433.   <button title="Buffer video" type="button" class="buffer_video botones_div">
  1434.  <svg width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-align-box-right-stretch"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 17h2" /><path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" /><path d="M11 12h6" /><path d="M13 7h4" /></svg>
  1435. </button>
  1436.   `;
  1437.  
  1438.  
  1439.   const menuBotones = `
  1440.     <main>
  1441.     <div class="container">
  1442.     <form>
  1443.       <div class="containerButtons">
  1444.       ${thumbnailVideo}
  1445.       ${bufferVideo}
  1446.       ${filterEyes}
  1447.       ${resetButton}
  1448.       ${repeatVideo}
  1449.       ${downloadMp4Mp3}
  1450.       ${donwloadExternal}
  1451.       ${viewExternalVideo}
  1452.       ${pictureToPicture}
  1453.       ${screenShot}
  1454.       ${checkUpdates}
  1455.       </div>
  1456.       <div>
  1457.       </div>
  1458.     </form>
  1459.  
  1460.     </div>
  1461.     <div class="content_collapsible_colors" style="margin-top: 10px">
  1462.  
  1463.     <form class="formulariodescarga" action="">
  1464.     <div class="containerall">
  1465.     <select class="selectcalidades  ocultarframe" required>
  1466.       <option selected disabled>Calidad del video / Quality video</option>
  1467.       <option value="360">360p Mp4</option>
  1468.       <option value="480">480p Mp4</option>
  1469.       <option value="720">720p HD Mp4 Default</option>
  1470.       <option value="1080">1080p FULL HD Mp4</option>
  1471.       <option value="4k">2160p 4K WEBM</option>
  1472.       <option value="8k">4320p 8K WEBM</option>
  1473.       </select>
  1474.       <iframe id="descargando"  style="z-index: 99; border: none; height: 27.4px; width: 50%;"  class="containerall ocultarframe" src="" frameborder="0"></iframe>
  1475.  
  1476.     </div>
  1477.     </form>
  1478.     <form class="formulariodescargaaudio" action="">
  1479.     <div class="containerall">
  1480.     <select class="selectcalidadesaudio ocultarframeaudio" required>
  1481.       <option selected disabled>Calidad del Audio / Quality Audio</option>
  1482.       <option value="flac">Audio FLAC UHQ</option>
  1483.       <option value="wav">Audio WAV UHQ</option>
  1484.       <option value="mp3">Audio MP3 Default</option>
  1485.       <option value="m4a">Audio M4A</option>
  1486.       <option value="aac">Audio AAC</option>
  1487.       <option value="opus">Audio OPUS</option>
  1488.       <option value="ogg">Audio OGG</option>
  1489.       </select>
  1490.       <iframe id="descargandomp3"  style="z-index: 99; border: none; height: 27.4px; width: 50%;"  class="containerall ocultarframeaudio" src="" frameborder="0"></iframe>
  1491.  
  1492.       </iframe>
  1493.  
  1494.     </div>
  1495.     </form>
  1496.       </main>
  1497.   `;
  1498.  
  1499.   
  1500.  
  1501.   // Define themes
  1502.   const themes = [
  1503.     {
  1504.       name: 'Default / Reload',
  1505.       gradient: '',
  1506.       textColor: '',
  1507.       raised: '',
  1508.       btnTranslate: '',
  1509.       CurrentProgressVideo: '',
  1510.       videoDuration: '',
  1511.       colorIcons: '',
  1512.       textLogo: '',
  1513.       primaryColor: '',
  1514.       secondaryColor: '',
  1515.     },
  1516.     {
  1517.       name: 'Midnight Blue',
  1518.       gradient: 'linear-gradient(135deg, #1e3a8a, #3b82f6)',
  1519.       textColor: '#ffffff',
  1520.       raised: '#f00',
  1521.       btnTranslate: '#000',
  1522.       CurrentProgressVideo: '#0f0',
  1523.       videoDuration: '#fff',
  1524.       colorIcons: '#fff',
  1525.       textLogo: '#f00',
  1526.     },
  1527.     {
  1528.       name: 'Forest Green',
  1529.       gradient: 'linear-gradient(135deg, #14532d, #22c55e)',
  1530.       textColor: '#ffffff',
  1531.       raised: '#303131',
  1532.       btnTranslate: '#000',
  1533.       CurrentProgressVideo: '#0f0',
  1534.       videoDuration: '#fff',
  1535.       colorIcons: '#fff',
  1536.       textLogo: '#f00',
  1537.     },
  1538.     {
  1539.       name: 'Sunset Orange',
  1540.       gradient: 'linear-gradient(135deg, #7c2d12, #f97316)',
  1541.       textColor: '#ffffff',
  1542.       raised: '#303131',
  1543.       btnTranslate: '#000',
  1544.       CurrentProgressVideo: '#0f0',
  1545.       videoDuration: '#fff',
  1546.       colorIcons: '#fff',
  1547.       textLogo: '#f00',
  1548.     },
  1549.     {
  1550.       name: 'Royal Purple',
  1551.       gradient: 'linear-gradient(135deg, #4c1d95, #8b5cf6)',
  1552.       textColor: '#ffffff',
  1553.       raised: '#303131',
  1554.       btnTranslate: '#000',
  1555.       CurrentProgressVideo: '#0f0',
  1556.       videoDuration: '#fff',
  1557.       colorIcons: '#fff',
  1558.       textLogo: '#f00',
  1559.     },
  1560.     {
  1561.       name: 'Cherry Blossom',
  1562.       gradient: 'linear-gradient(135deg, #a9005c, #fc008f)',
  1563.       textColor: '#ffffff',
  1564.       raised: '#fc008f',
  1565.       btnTranslate: '#000',
  1566.       CurrentProgressVideo: '#0f0',
  1567.       videoDuration: '#fff',
  1568.       colorIcons: '#fff',
  1569.       textLogo: '#f00',
  1570.     },
  1571.     {
  1572.       name: 'Red Dark',
  1573.       gradient: 'linear-gradient(135deg, #790909, #f70131)',
  1574.       textColor: '#ffffff',
  1575.       raised: '#303131',
  1576.       btnTranslate: '#000',
  1577.       CurrentProgressVideo: '#0f0',
  1578.       videoDuration: '#fff',
  1579.       colorIcons: '#fff',
  1580.       textLogo: '#f00',
  1581.     },
  1582.     {
  1583.       name: 'Raind ',
  1584.       gradient: 'linear-gradient(90deg, #3f5efb 0%, #fc466b) 100%',
  1585.       textColor: '#ffffff',
  1586.       raised: '#303131',
  1587.       btnTranslate: '#000',
  1588.       CurrentProgressVideo: '#0f0',
  1589.       videoDuration: '#fff',
  1590.       colorIcons: '#fff',
  1591.       textLogo: '#f00',
  1592.     },
  1593.     {
  1594.       name: 'Neon',
  1595.       gradient: 'linear-gradient(273deg, #ee49fd 0%, #6175ff 100%)',
  1596.       textColor: '#ffffff',
  1597.       raised: '#303131',
  1598.       btnTranslate: '#000',
  1599.       CurrentProgressVideo: '#0f0',
  1600.       videoDuration: '#fff',
  1601.       colorIcons: '#fff',
  1602.       textLogo: '#f00',
  1603.     },
  1604.     {
  1605.       name: 'Azure',
  1606.       gradient: 'linear-gradient(273deg, #0172af 0%, #74febd 100%)',
  1607.       textColor: '#ffffff',
  1608.       raised: '#303131',
  1609.       btnTranslate: '#000',
  1610.       CurrentProgressVideo: '#0f0',
  1611.       videoDuration: '#fff',
  1612.       colorIcons: '#fff',
  1613.       textLogo: '#f00',
  1614.     },
  1615.     {
  1616.       name: 'Butterfly',
  1617.       gradient: 'linear-gradient(273deg, #ff4060 0%, #fff16a 100%)',
  1618.       textColor: '#ffffff',
  1619.       raised: '#303131',
  1620.       btnTranslate: '#000',
  1621.       CurrentProgressVideo: '#0f0',
  1622.       videoDuration: '#fff',
  1623.       colorIcons: '#fff',
  1624.       textLogo: '#f00',
  1625.     },
  1626.     {
  1627.       name: 'Colombia',
  1628.       gradient:
  1629.         'linear-gradient(174deg, #fbf63f  0%, #0000bb 45%, #ff0000 99%)',
  1630.       textColor: '#ffffff',
  1631.       raised: '#303131',
  1632.       btnTranslate: '#000',
  1633.       CurrentProgressVideo: '#0f0',
  1634.       videoDuration: '#fff',
  1635.       colorIcons: '#fff',
  1636.       textLogo: '#f00',
  1637.     },
  1638.   ];
  1639.  
  1640.   // Create our enhancement panel
  1641.   const panel = $cl('div');
  1642.  
  1643.   panel.id = 'yt-enhancement-panel';
  1644.  
  1645.   // Generate theme options HTML
  1646.   const themeOptionsHTML = themes
  1647.     .map(
  1648.       (theme, index) => `
  1649.         <label >
  1650.           <div class="theme-option">
  1651.           <div class="theme-preview" style="background: ${theme.gradient};"></div>
  1652.           <input type="radio" name="theme" value="${index}" ${
  1653.               index === 0 ? 'checked' : ''
  1654.             }>
  1655.               <span style="${theme.name === 'Default / Reload Page' ? 'color: red; ' : '' }" class="theme-name">${theme.name}</span>
  1656.               </div>
  1657.         </label>
  1658.     `
  1659.     )
  1660.     .join('');
  1661.  
  1662.     const languageOptionsHTML = Object.entries(languagesTranslate)
  1663.     .map(([code, name]) => {
  1664.       const selected = code === languagesTranslate ? 'selected' : '';
  1665.       return `<option value="${code}" ${selected}>${name}</option>`;
  1666.     })
  1667.     .join('');
  1668.  
  1669.  
  1670.  
  1671.     function checkDarkModeActive() {
  1672.       const pref = document.cookie.split('; ').find(c => c.startsWith('PREF='));
  1673.       if (!pref) return 'light';
  1674.     
  1675.       const params = new URLSearchParams(pref.split('&').join('&'));
  1676.       const darkModes = ['400', '4000000', '40000400', '40000000'];
  1677.       return darkModes.includes(params.get('f6')) ? 'dark' : 'light';
  1678.     }
  1679.  
  1680.   let isDarkModeActive = checkDarkModeActive();
  1681.  
  1682.  
  1683.   // Use Trusted Types to set innerHTML
  1684.   const menuHTML = `
  1685.    <div class="container-mdcm">
  1686.     <div class="header-mdcm">
  1687.       <h1> <i class="fa-brands fa-youtube"></i> YouTube Tools</h1>
  1688.       <div class="icons-mdcm">
  1689.         <a href="https://update.greatest.deepsurf.us/scripts/460680/Youtube%20Tools%20All%20in%20one%20local%20download%20mp3%20mp4%20HIGT%20QUALITY%20return%20dislikes%20and%20more.user.js"
  1690.           target="_blank">
  1691.           <button class="icon-btn-mdcm">
  1692.             <i class="fa-solid fa-arrows-rotate"></i>
  1693.           </button>
  1694.         </a>
  1695.         <a href="https://github.com/DeveloperMDCM" target="_blank">
  1696.           <button class="icon-btn-mdcm">
  1697.             <i class="fa-brands fa-github"></i>
  1698.           </button>
  1699.         </a>
  1700.         <button class="icon-btn-mdcm" id="shareBtn-mdcm">
  1701.           <i class="fa-solid fa-share-alt"></i>
  1702.         </button>
  1703.         <button class="icon-btn-mdcm" id="importExportBtn">
  1704.           <i class="fa-solid fa-file-import"></i>
  1705.         </button>
  1706.         <button id="menu-settings-icon" class="icon-btn-mdcm tab-mdcm" data-tab="menu-settings">
  1707.           <i class="fa-solid fa-gear"></i>
  1708.         </button>
  1709.         <button class="icon-btn-mdcm close_menu_settings">
  1710.           <i class="fa-solid fa-xmark"></i>
  1711.         </button>
  1712.       </div>
  1713.     </div>
  1714.  
  1715.     <div class="tabs-mdcm">
  1716.       <button class="tab-mdcm active" data-tab="general">
  1717.         <i class="fa-solid fa-shield-halved"></i>
  1718.         General
  1719.       </button>
  1720.       <button class="tab-mdcm" data-tab="themes">
  1721.         <i class="fa-solid fa-palette"></i>
  1722.         Themes
  1723.       </button>
  1724.       <button class="tab-mdcm" data-tab="stats">
  1725.         <i class="fa-solid fa-square-poll-vertical"></i>
  1726.         Stats
  1727.       </button>
  1728.       <button class="tab-mdcm" data-tab="headers">
  1729.         <i class="fa-regular fa-newspaper"></i>
  1730.         Header
  1731.       </button>
  1732.     </div>
  1733.  
  1734.  
  1735.     <div id="general" class="tab-content active">
  1736.  
  1737.       <div class="options-mdcm">
  1738.         <label>
  1739.           <div class="option-mdcm">
  1740.             <input type="checkbox" class="checkbox-mdcm" id="hide-comments-toggle"> Hide Comments
  1741.           </div>
  1742.         </label>
  1743.         <label>
  1744.           <div class="option-mdcm">
  1745.             <input type="checkbox" class="checkbox-mdcm" id="hide-sidebar-toggle"> Hide Sidebar
  1746.           </div>
  1747.         </label>
  1748.         <label>
  1749.           <div class="option-mdcm">
  1750.             <input type="checkbox" class="checkbox-mdcm" id="autoplay-toggle"> Disable Autoplay
  1751.           </div>
  1752.         </label>
  1753.         <label>
  1754.           <div class="option-mdcm">
  1755.             <input type="checkbox" class="checkbox-mdcm" id="subtitles-toggle"> Disable Subtitles
  1756.           </div>
  1757.         </label>
  1758.         <label>
  1759.           <div class="option-mdcm">
  1760.             <input type="checkbox" class="checkbox-mdcm" checked id="dislikes-toggle"> Show Dislikes
  1761.           </div>
  1762.         </label>
  1763.         <label>
  1764.           <div class="option-mdcm">
  1765.             <input type="checkbox" class="checkbox-mdcm" id="themes-toggle"> Active Themes
  1766.           </div>
  1767.         </label>
  1768.         <label>
  1769.           <div class="option-mdcm">
  1770.             <input type="checkbox" class="checkbox-mdcm" id="translation-toggle"> Translate comments
  1771.           </div>
  1772.         </label>
  1773.         <label>
  1774.           <div class="option-mdcm">
  1775.             <input type="checkbox" class="checkbox-mdcm" id="avatars-toggle"> Download avatars
  1776.           </div>
  1777.         </label>
  1778.         <label>
  1779.           <div class="option-mdcm">
  1780.             <input type="checkbox" class="checkbox-mdcm" id="reverse-mode-toggle"> Reverse mode
  1781.           </div>
  1782.         </label>
  1783.         <label>
  1784.           <div class="option-mdcm">
  1785.             <input type="checkbox" class="checkbox-mdcm" checked id="wave-visualizer-toggle"> Wave visualizer Beta
  1786.           </div>
  1787.         </label>
  1788.         <div class="quality-selector-mdcm" style="grid-column: span 2;">
  1789.           <div class="select-wrapper-mdcm">
  1790.             <label>Effect wave visualizer:
  1791.               <select class="tab-button-active" id="select-wave-visualizer-select">
  1792.                 <option value="linea">Line smooth</option>
  1793.                 <option value="barras">Vertical bars</option>
  1794.                 <option value="curva">Curved</option>
  1795.                 <option value="picos">Smooth peaks</option>
  1796.                 <option value="solida">Solid wave</option>
  1797.                 <option value="dinamica">Dynamic wave</option>
  1798.                 <option value="montana">Smooth mountain</option>
  1799.               </select>
  1800.             </label>
  1801.           </div>
  1802.         </div>
  1803.         <div class="quality-selector-mdcm" style="grid-column: span 2;">
  1804.           <div class="select-wrapper-mdcm">
  1805.             <label>Default video player quality:
  1806.               <select class="tab-button-active" id="select-video-qualitys-select">
  1807.                 <option value="144">144</option>
  1808.                 <option value="240">240</option>
  1809.                 <option value="360">360</option>
  1810.                 <option value="480">480</option>
  1811.                 <option value="720">720</option>
  1812.                 <option value="1080">1080</option>
  1813.                 <option value="1440">1440</option>
  1814.                 <option value="2160">2160</option>
  1815.               </select>
  1816.             </label>
  1817.           </div>
  1818.         </div>
  1819.         <div class="quality-selector-mdcm" style="grid-column: span 2;">
  1820.           <div class="select-wrapper-mdcm">
  1821.             <label>Language for translate comments: 
  1822.               <select class="tab-button-active" id="select-languages-comments-select">
  1823.               ${languageOptionsHTML}
  1824.               </select>
  1825.             </label>
  1826.           </div>
  1827.         </div>
  1828.         <div class="slider-container-mdcm" style="grid-column: span 2;">
  1829.           <label>Video Player Size: <span id="player-size-value">100</span>%</label>
  1830.           <input type="range" id="player-size-slider" class="slider-mdcm" min="50" max="150" value="100">
  1831.           <button class="reset-btn-mdcm" id="reset-player-size">Reset video size</button>
  1832.         </div>
  1833.       </div>
  1834.     </div>
  1835.  
  1836.     <div id="themes" class="tab-content">
  1837.       <div class="themes-hidden">
  1838.         <div class="options-mdcm" style="margin-bottom: 10px;">
  1839.           <div>
  1840.             <h4>Choose a Theme</h4>
  1841.             <p>Disable cinematic Lighting</p>
  1842.             ${isDarkModeActive === 'dark' ? '' : '<p style="color: red; margin: 10px 0;font-size: 11px;">Activate dark mode to use this option</p>'}
  1843.           </div>
  1844.         </div>
  1845.         <div class="options-mdcm">
  1846.           <label>
  1847.             <div class="theme-option option-mdcm">
  1848.               <input type="radio" class="radio-mdcm" name="theme" value="custom" checked>
  1849.               <span class="theme-name">Custom</span>
  1850.             </div>
  1851.           </label>
  1852.           <label>
  1853.             <div class="theme-option option-mdcm theme-selected-normal">
  1854.               <input type="radio" class="radio-mdcm" name="theme" value="normal">
  1855.               <span class="theme-name">Selected Themes</span>
  1856.             </div>
  1857.           </label>
  1858.         </div>
  1859.         <div class="themes-options">
  1860.           <div class="options-mdcm">
  1861.             ${themeOptionsHTML}
  1862.           </div>
  1863.         </div>
  1864.         <div class="theme-custom-options">
  1865.           <div class="options-mdcm">
  1866.             <div class="option-mdcm">
  1867.               <div class="card-items-end">
  1868.                 <label>Progressbar Video:</label>
  1869.                 <input type="color" id="progressbar-color-picker" class="color-picker-mdcm" value="#ff0000">
  1870.               </div>
  1871.             </div>
  1872.             <div class="option-mdcm">
  1873.               <div class="card-items-end">
  1874.                 <label>Background Color:</label>
  1875.                 <input type="color" id="bg-color-picker" class="color-picker-mdcm" value="#000000">
  1876.               </div>
  1877.             </div>
  1878.             <div class="option-mdcm">
  1879.               <div class="card-items-end">
  1880.                 <label>Primary Color:</label>
  1881.                 <input type="color" id="primary-color-picker" class="color-picker-mdcm" value="#ffffff">
  1882.               </div>
  1883.             </div>
  1884.             <div class="option-mdcm">
  1885.               <div class="card-items-end">
  1886.                 <label>Secondary Color:</label>
  1887.                 <input type="color" id="secondary-color-picker" class="color-picker-mdcm" value="#ffffff">
  1888.               </div>
  1889.             </div>
  1890.             <div class="option-mdcm">
  1891.               <div class="card-items-end">
  1892.                 <label>Header Color:</label>
  1893.                 <input type="color" id="header-color-picker" class="color-picker-mdcm" value="#000000">
  1894.               </div>
  1895.             </div>
  1896.             <div class="option-mdcm">
  1897.               <div class="card-items-end">
  1898.                 <label>Icons Color:</label>
  1899.                 <input type="color" id="icons-color-picker" class="color-picker-mdcm" value="#ffffff">
  1900.               </div>
  1901.             </div>
  1902.             <div class="option-mdcm">
  1903.               <div class="card-items-end">
  1904.                 <label>Menu Color:</label>
  1905.                 <input type="color" id="menu-color-picker" class="color-picker-mdcm" value="#000000">
  1906.               </div>
  1907.             </div>
  1908.             <div class="option-mdcm">
  1909.               <div class="card-items-end">
  1910.                 <label>Line Color Preview:</label>
  1911.                 <input type="color" id="line-color-picker" class="color-picker-mdcm" value="#ff0000">
  1912.               </div>
  1913.             </div>
  1914.             <div class="option-mdcm">
  1915.               <div class="card-items-end">
  1916.                 <label>Time Color Preview:</label>
  1917.                 <input type="color" id="time-color-picker" class="color-picker-mdcm" value="#ffffff">
  1918.               </div>
  1919.             </div>
  1920.           </div>
  1921.         </div>
  1922.       </div>
  1923.     </div>
  1924.  
  1925.     <div id="stats" class="tab-content">
  1926.       <div id="yt-stats-toggle">
  1927.         <div class="stat-row">
  1928.           <div>Foreground Time</div>
  1929.           <div class="progress">
  1930.             <div class="progress-bar total-bar" id="usage-bar"></div>
  1931.           </div>
  1932.           <div id="total-time">0h 0m 0s</div>
  1933.         </div>
  1934.         <div class="stat-row">
  1935.           <div>Video Time</div>
  1936.           <div class="progress">
  1937.             <div class="progress-bar video-bar" id="video-bar"></div>
  1938.           </div>
  1939.           <div id="video-time">0h 0m 0s</div>
  1940.         </div>
  1941.         <div class="stat-row">
  1942.           <div>Shorts Time</div>
  1943.           <div class="progress">
  1944.             <div class="progress-bar shorts-bar" id="shorts-bar"></div>
  1945.           </div>
  1946.           <div id="shorts-time">0h 0m 0s</div>
  1947.         </div>
  1948.       </div>
  1949.     </div>
  1950.  
  1951.     <div id="headers" class="tab-content">
  1952.       <div class="options-mdcm">
  1953.         <label>Available in next update</label>
  1954.       </div>
  1955.     </div>
  1956.  
  1957.  
  1958.     <div id="menu-settings" class="tab-content">
  1959.       <div class="options-mdcm">
  1960.         <h4 style="margin: 10px 0">Menu Appearance</h4>
  1961.       </div>
  1962.       <div class="options-settings-mdcm">
  1963.         <div class="option-settings-mdcm">
  1964.           <label>Backgrounds:</label>
  1965.           <div class="color-boxes" id="bg-color-options">
  1966.             <div class="color-box" data-type="bg" data-value="#252525" style="background-color: #252525;"></div>
  1967.             <div class="color-box" data-type="bg" data-value="#1e1e1e" style="background-color: #1e1e1e;"></div>
  1968.             <div class="color-box" data-type="bg" data-value="#3a3a3a" style="background-color: #3a3a3a;"></div>
  1969.             <div class="color-box" data-type="bg" data-value="#4a4a4a" style="background-color: #4a4a4a;"></div>
  1970.             <div class="color-box" data-type="bg" data-value="#000000" style="background-color: #000000;"></div>
  1971.             <div class="color-box" data-type="bg" data-value="#00000000" style="background-color: #00000000;"></div>
  1972.             <div class="color-box" data-type="bg" data-value="#2d2d2d" style="background-color: #2d2d2d;"></div>
  1973.             <div class="color-box" data-type="bg" data-value="#444" style="background-color: #444;"></div>
  1974.           </div>
  1975.         </div>
  1976.  
  1977.         <div class="option-settings-mdcm">
  1978.           <label>Accent Colors:</label>
  1979.           <div class="color-boxes" id="bg-accent-color-options">
  1980.             <div class="color-box" data-type="accent" data-value="#ff0000" style="background-color: #ff0000;"></div>
  1981.             <div class="color-box" data-type="accent" data-value="#000000" style="background-color: #000000;"></div>
  1982.             <div class="color-box" data-type="accent" data-value="#009c37 " style="background-color: #009c37 ;"></div>
  1983.             <div class="color-box" data-type="accent" data-value="#0c02a0 " style="background-color: #0c02a0 ;"></div>
  1984.           </div>
  1985.         </div>
  1986.  
  1987.         <div class="option-settings-mdcm">
  1988.           <label>Titles Colors:</label>
  1989.           <div class="color-boxes" id="text-color-options">
  1990.             <div class="color-box" data-type="color" data-value="#ffffff" style="background-color: #ffffff;"></div>
  1991.             <div class="color-box" data-type="color" data-value="#cccccc" style="background-color: #cccccc;"></div>
  1992.             <div class="color-box" data-type="color" data-value="#b3b3b3" style="background-color: #b3b3b3;"></div>
  1993.             <div class="color-box" data-type="color" data-value="#00ffff" style="background-color: #00ffff;"></div>
  1994.             <div class="color-box" data-type="color" data-value="#00ff00" style="background-color: #00ff00;"></div>
  1995.             <div class="color-box" data-type="color" data-value="#ffff00" style="background-color: #ffff00;"></div>
  1996.             <div class="color-box" data-type="color" data-value="#ffcc00" style="background-color: #ffcc00;"></div>
  1997.             <div class="color-box" data-type="color" data-value="#ff66cc" style="background-color: #ff66cc;"></div>
  1998.           </div>
  1999.         </div>
  2000.       </div>
  2001.     </div>
  2002.  
  2003.     <div id="importExportArea">
  2004.       <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
  2005.         <h3>Import / Export Settings</h3>
  2006.         <button class="icon-btn-mdcm" id="closeImportExportBtn">
  2007.           <i class="fa-solid fa-xmark"></i>
  2008.         </button>
  2009.       </div>
  2010.       <textarea id="config-data" placeholder="Paste configuration here to import"></textarea>
  2011.       <div class="action-buttons-mdcm">
  2012.         <button id="export-config" class="action-btn-mdcm">Export</button>
  2013.         <button id="import-config" class="action-btn-mdcm">Import</button>
  2014.       </div>
  2015.     </div>
  2016.  
  2017.     <div id="shareDropdown">
  2018.       <a href="https://www.facebook.com/sharer/sharer.php?u=${urlSharedCode}" target="_blank" data-network="facebook"
  2019.         class="share-link"><i class="fa-brands fa-facebook"></i> Facebook</a><br>
  2020.       <a href="https://twitter.com/intent/tweet?url=${urlSharedCode}" target="_blank" data-network="twitter"
  2021.         class="share-link"><i class="fa-brands fa-twitter"></i> Twitter</a><br>
  2022.       <a href="https://api.whatsapp.com/send?text=${urlSharedCode}" target="_blank" data-network="whatsapp"
  2023.         class="share-link"><i class="fa-brands fa-whatsapp"></i> WhatsApp</a><br>
  2024.       <a href="https://www.linkedin.com/sharing/share-offsite/?url=${urlSharedCode}" target="_blank"
  2025.         data-network="linkedin" class="share-link"><i class="fa-brands fa-linkedin"></i> LinkedIn</a><br>
  2026.     </div>
  2027.  
  2028.  
  2029.   </div>
  2030.   <div class="actions-mdcm">
  2031.     <div class="developer-mdcm">
  2032.       Developed by <a href="https://github.com/DeveloperMDCM" target="_blank">DeveloperMDCM</a>
  2033.     </div>
  2034.     <span style="color: #fff" ;>v2.3.4.2</span>
  2035.   </div>
  2036.   `;
  2037.   const panelHTML = policy
  2038.     ? policy.createHTML(`
  2039.       ${menuHTML}
  2040.     `)
  2041.     : `
  2042.       ${menuHTML}
  2043.     `;
  2044.  
  2045.   panel.innerHTML = panelHTML;
  2046.   $ap(panel);
  2047.  
  2048.  
  2049.   function addIcon() {
  2050.     const topBar = $e('ytd-topbar-menu-button-renderer');
  2051.     if (!topBar || $id('icon-menu-settings')) return;
  2052.   
  2053.     const toggleButton = $cl('div');
  2054.     toggleButton.id = 'toggle-button';
  2055.   
  2056.     const icon = $cl('i');
  2057.     icon.id = 'icon-menu-settings';
  2058.     icon.classList.add('fa-solid', 'fa-gear');
  2059.   
  2060.     toggleButton.appendChild(icon);
  2061.     topBar.parentElement.insertBefore(toggleButton, topBar);
  2062.       // Toggle panel visibility
  2063.     let openMenu = false;
  2064.     toggleButton.addEventListener('click', () => {
  2065.       openMenu = !openMenu;
  2066.       // openMenu
  2067.       //   ? (toggleButton.style.backgroundColor = '#f00')
  2068.       //   : (toggleButton.style.backgroundColor = 'transparent');
  2069.       panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
  2070.     });
  2071.  
  2072.     
  2073.     }
  2074.  
  2075.   
  2076.   addIcon();
  2077.   let openMenu = false;
  2078.  
  2079.   const close_menu_settings = $e('.close_menu_settings');
  2080.     close_menu_settings.addEventListener('click', () => {
  2081.       openMenu = !openMenu;
  2082.       panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
  2083.     });
  2084.  
  2085.   // $ap(toggleButton);
  2086.  
  2087.  
  2088.  
  2089.  
  2090.   // Tab functionality
  2091.   const tabButtons = $m('.tab-mdcm');
  2092.   const tabContents = $m('.tab-content');
  2093.  
  2094.   tabButtons.forEach((button) => {
  2095.     button.addEventListener('click', () => {
  2096.       const tabName = button.getAttribute('data-tab');
  2097.       tabButtons.forEach((btn) => btn.classList.remove('active'));
  2098.       tabContents.forEach((content) => content.classList.remove('active'));
  2099.       button.classList.add('active');
  2100.       $id(tabName).classList.add('active');
  2101.     });
  2102.   });
  2103.   
  2104.   // Function to save settings
  2105.   function saveSettings() {
  2106.     const settings = {
  2107.       theme: $e('input[name="theme"]:checked').value,
  2108.       bgColorPicker: $id('bg-color-picker').value,
  2109.       progressbarColorPicker: $id('progressbar-color-picker').value,
  2110.       primaryColorPicker: $id('primary-color-picker').value,
  2111.       secondaryColorPicker: $id('secondary-color-picker').value,
  2112.       headerColorPicker: $id('header-color-picker').value,
  2113.       iconsColorPicker: $id('icons-color-picker').value,
  2114.       menuColorPicker: $id('menu-color-picker').value,
  2115.       lineColorPicker: $id('line-color-picker').value,
  2116.       timeColorPicker: $id('time-color-picker').value,
  2117.       dislikes: $id('dislikes-toggle').checked,
  2118.       themes: $id('themes-toggle').checked,
  2119.       translation: $id('translation-toggle').checked,
  2120.       avatars: $id('avatars-toggle').checked,
  2121.       reverseMode: $id('reverse-mode-toggle').checked,
  2122.       waveVisualizer: $id('wave-visualizer-toggle').checked,
  2123.       waveVisualizerSelected: $id('select-wave-visualizer-select').value,
  2124.       hideComments: $id('hide-comments-toggle').checked,
  2125.       hideSidebar: $id('hide-sidebar-toggle').checked,
  2126.       disableAutoplay: $id('autoplay-toggle').checked,
  2127.       // cinematicLighting: $id('cinematic-lighting-toggle').checked,
  2128.       disableSubtitles: $id('subtitles-toggle').checked,
  2129.       // fontSize: $id('font-size-slider').value,
  2130.       playerSize: $id('player-size-slider').value,
  2131.       selectVideoQuality: $id('select-video-qualitys-select').value,
  2132.       languagesComments: $id('select-languages-comments-select').value,
  2133.       // menuBgColor: $id('menu-bg-color-picker').value,
  2134.       // menuTextColor: $id('menu-text-color-picker').value,
  2135.       menu_developermdcm: {
  2136.         bg: selectedBgColor, 
  2137.         color: selectedTextColor, 
  2138.         accent: selectedBgAccentColor
  2139.       }
  2140.       // menuFontSize: $id('menu-font-size-slider').value,
  2141.     };
  2142.  
  2143.     GM_setValue('ytSettingsMDCM', JSON.stringify(settings));    
  2144.   }
  2145.  
  2146.   
  2147.  
  2148.   // Function to load settings
  2149.   function loadSettings() {
  2150.     const settings = JSON.parse(GM_getValue('ytSettingsMDCM', '{}'));
  2151.     
  2152.     if (settings.theme) {
  2153.       $e(`input[name="theme"][value="${settings.theme}"]`).checked = true;
  2154.     }
  2155.     settings.menu_developermdcm = settings.menu_developermdcm || {
  2156.       bg: "#252525",
  2157.       color: "#ffffff",
  2158.       accent: "#ff0000"
  2159.     };
  2160.     $id('bg-color-picker').value = settings.bgColorPicker || '#000000';
  2161.     $id('progressbar-color-picker').value = settings.progressbarColorPicker || '#ff0000';
  2162.     $id('primary-color-picker').value = settings.primaryColorPicker || '#ffffff';
  2163.     $id('secondary-color-picker').value = settings.secondaryColorPicker || '#ffffff';
  2164.     $id('header-color-picker').value = settings.headerColorPicker || '#000';
  2165.     $id('icons-color-picker').value = settings.iconsColorPicker || '#ffffff';
  2166.     $id('menu-color-picker').value = settings.menuColorPicker || '#000';
  2167.     $id('line-color-picker').value = settings.lineColorPicker || '#ff0000';
  2168.     $id('time-color-picker').value = settings.timeColorPicker || '#ffffff';
  2169.     $id('dislikes-toggle').checked = settings.dislikes || false;
  2170.     $id('themes-toggle').checked = settings.themes || false;
  2171.     $id('translation-toggle').checked = settings.translation || false;
  2172.     $id('avatars-toggle').checked = settings.avatars || false;
  2173.     $id('reverse-mode-toggle').checked = settings.reverseMode || false;
  2174.     $id('wave-visualizer-toggle').checked = settings.waveVisualizer || false;
  2175.     $id('select-wave-visualizer-select').value = settings.waveVisualizerSelected || 'dinamica';
  2176.     $id('hide-comments-toggle').checked = settings.hideComments || false;
  2177.     $id('hide-sidebar-toggle').checked = settings.hideSidebar || false;
  2178.     $id('autoplay-toggle').checked = settings.disableAutoplay || false;
  2179.     // $id('cinematic-lighting-toggle').checked = settings.cinematicLighting || false;
  2180.     $id('subtitles-toggle').checked = settings.disableSubtitles || false;
  2181.     // $id('font-size-slider').value = settings.fontSize || 16;
  2182.     $id('player-size-slider').value = settings.playerSize || 100;
  2183.     $id('select-video-qualitys-select').value = settings.selectVideoQuality || '720';
  2184.     $id('select-languages-comments-select').value = settings.languagesComments || 'en';
  2185.     // $id('menu-bg-color-picker').value = settings.menuBgColor || '#000000';
  2186.     // $id('menu-text-color-picker').value = settings.menuTextColor || '#ffffff';
  2187.     // $id('menu-font-size-slider').value = settings.menuFontSize || 14;
  2188.     // Asegurar existencia de menu_developermdcm
  2189.     
  2190.    
  2191.     selectedBgColor = settings.menu_developermdcm.bg;
  2192.     selectedTextColor = settings.menu_developermdcm.color;
  2193.     selectedBgAccentColor = settings.menu_developermdcm.accent;
  2194.     
  2195.  
  2196.     $m('#bg-color-options .color-box').forEach(el => {
  2197.       el.classList.toggle('selected', el.dataset.value === selectedBgColor);
  2198.     });
  2199.  
  2200.     $m('#text-color-options .color-box').forEach(el => {
  2201.       el.classList.toggle('selected', el.dataset.value === selectedTextColor);
  2202.     });
  2203.  
  2204.     $m('#bg-accent-color-options .color-box').forEach(el => {
  2205.       el.classList.toggle('selected', el.dataset.value === selectedBgAccentColor);
  2206.     });
  2207.  
  2208.     // Apply menu colors
  2209.     $sp('--yt-enhance-menu-bg', selectedBgColor);
  2210.     $sp('--yt-enhance-menu-text', selectedTextColor);
  2211.     $sp('--yt-enhance-menu-accent', selectedBgAccentColor);
  2212.     updateSliderValues();
  2213.  
  2214.     setTimeout(() => {
  2215.       applySettings();
  2216.       if(settings.dislikes) {
  2217.           videoDislike();
  2218.           shortDislike();
  2219.           showDislikes = true;
  2220.       }
  2221.     }, 500);
  2222.   }
  2223.  
  2224.   $m('.color-box').forEach(box => {
  2225.     box.addEventListener('click', () => {
  2226.       const type = box.dataset.type;
  2227.       const value = box.dataset.value;
  2228.   
  2229.       if (type === 'bg') {
  2230.         selectedBgColor = value; 
  2231.         $sp('--yt-enhance-menu-bg', value);
  2232.         $m('#bg-color-options .color-box').forEach(el => {
  2233.           el.classList.remove('selected');
  2234.         });
  2235.         box.classList.add('selected');
  2236.       } else if (type === 'color') {
  2237.         selectedTextColor = value;
  2238.         $sp('--yt-enhance-menu-text', value);
  2239.         $m('#text-color-options .color-box').forEach(el => {
  2240.           el.classList.remove('selected');
  2241.         });
  2242.         box.classList.add('selected');
  2243.       }
  2244.        else if (type === 'accent') {
  2245.         selectedBgAccentColor = value;
  2246.         $sp('--yt-enhance-menu-accent', value);
  2247.         $m('#bg-accent-color-options .color-box').forEach(el => {
  2248.           el.classList.remove('selected');
  2249.         });
  2250.         box.classList.add('selected');
  2251.       }
  2252.       saveSettings();
  2253.     });
  2254.   });
  2255.   
  2256.   
  2257.   function updateSliderValues() {
  2258.     $id('player-size-value').textContent = $id('player-size-slider').value;
  2259.     
  2260.   }
  2261.  
  2262.   $id('reset-player-size').addEventListener('click', () => {
  2263.     $id('player-size-slider').value = 100;
  2264.     updateSliderValues();
  2265.     applySettings();
  2266.   });
  2267.  
  2268.   // Function to apply settings
  2269.   function applySettings() {
  2270.     const formulariodescarga = $e('.formulariodescarga');
  2271.     const formulariodescargaaudio = $e('.formulariodescargaaudio');
  2272.       if (formulariodescarga != undefined) {
  2273.         formulariodescarga.classList.add('ocultarframe');
  2274.         formulariodescargaaudio.classList.add('ocultarframe');
  2275.       }
  2276.     const settings = {
  2277.       theme: $e('input[name="theme"]:checked').value,
  2278.       bgColorPicker: $id('bg-color-picker').value,
  2279.       progressbarColorPicker: $id('progressbar-color-picker').value,
  2280.       primaryColorPicker: $id('primary-color-picker').value,
  2281.       secondaryColorPicker: $id('secondary-color-picker').value,
  2282.       headerColorPicker: $id('header-color-picker').value,
  2283.       iconsColorPicker: $id('icons-color-picker').value,
  2284.       menuColorPicker: $id('menu-color-picker').value,
  2285.       lineColorPicker: $id('line-color-picker').value,
  2286.       timeColorPicker: $id('time-color-picker').value,
  2287.       dislikes: $id('dislikes-toggle').checked,
  2288.       themes: $id('themes-toggle').checked,
  2289.       translation: $id('translation-toggle').checked,
  2290.       avatars: $id('avatars-toggle').checked,
  2291.       reverseMode: $id('reverse-mode-toggle').checked,
  2292.       waveVisualizer: $id('wave-visualizer-toggle').checked,
  2293.       waveVisualizerSelected: $id('select-wave-visualizer-select').value,
  2294.       hideComments: $id('hide-comments-toggle').checked,
  2295.       hideSidebar: $id('hide-sidebar-toggle').checked,
  2296.       disableAutoplay: $id('autoplay-toggle').checked,
  2297.       // cinematicLighting: $id('cinematic-lighting-toggle').checked,
  2298.       disableSubtitles: $id('subtitles-toggle').checked,
  2299.       // fontSize: $id('font-size-slider').value,
  2300.       playerSize: $id('player-size-slider').value,
  2301.       selectVideoQuality: $id('select-video-qualitys-select').value,
  2302.       languagesComments: $id('select-languages-comments-select').value,
  2303.       // menuBgColor: $id('menu-bg-color-picker').value,
  2304.       // menuTextColor: $id('menu-text-color-picker').value,
  2305.       menu_developermdcm: {
  2306.         bg: selectedBgColor,
  2307.         color: selectedTextColor,
  2308.         accent: selectedBgAccentColor
  2309.       }
  2310.       // menuFontSize: $id('menu-font-size-slider').value,
  2311.     };
  2312.     $sp('--yt-enhance-menu-bg', settings.menu_developermdcm.bg);
  2313.     $sp('--yt-enhance-menu-text', settings.menu_developermdcm.color);
  2314.     $sp('--yt-enhance-menu-accent', settings.menu_developermdcm.accent);
  2315.    
  2316.     renderizarButtons();
  2317.    
  2318.   
  2319.     $id('shareBtn-mdcm').addEventListener('click', function(event) {
  2320.       event.stopPropagation(); 
  2321.       const dropdown = $id('shareDropdown');
  2322.       dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
  2323.     });
  2324.     
  2325.     document.addEventListener('click', function(event) {
  2326.       event.stopPropagation();
  2327.       const dropdown = $id('shareDropdown');
  2328.       const shareButton = $id('shareBtn-mdcm');
  2329.       if (event.target !== shareButton) {
  2330.           dropdown.style.display = 'none';
  2331.       }
  2332.     });
  2333.  
  2334.     $id('importExportBtn').addEventListener('click', function() {
  2335.       $id('importExportArea').classList.toggle('active');
  2336.     });
  2337.  
  2338.     $id('closeImportExportBtn').addEventListener('click', function() {
  2339.         $id('importExportArea').classList.remove('active');
  2340.     });
  2341.  
  2342.    
  2343.   
  2344.  
  2345.     // Hide comments
  2346.     const commentsSection = $id('comments');
  2347.     if (commentsSection) {
  2348.       commentsSection.style.display = settings.hideComments ? 'none' : 'block';
  2349.     }
  2350.    
  2351.      // Active inactive Themes
  2352.      const themesMenuSection = $e('.themes-hidden');
  2353.      if (themesMenuSection) {
  2354.       themesMenuSection.style.display = settings.themes ? 'block' : 'none';
  2355.      }
  2356.  
  2357.     // Hide sidebar
  2358.     const sidebarSection = $e('#secondary > #secondary-inner');
  2359.  
  2360.     if (sidebarSection) {
  2361.       sidebarSection.classList.add('side-moi');
  2362.     const sidebarSection2 = $e('.side-moi');
  2363.  
  2364.     sidebarSection2.style.display = settings.hideSidebar ? 'none' : 'block';
  2365.     }
  2366.  
  2367.     // Disable autoplay
  2368.     const autoplayToggle = $e('.ytp-autonav-toggle-button');
  2369.     if (autoplayToggle) {
  2370.       const isCurrentlyOn =
  2371.         autoplayToggle.getAttribute('aria-checked') === 'true';
  2372.       if (settings.disableAutoplay && isCurrentlyOn) {
  2373.         autoplayToggle.click();
  2374.       } else if (!settings.disableAutoplay && !isCurrentlyOn) {
  2375.         autoplayToggle.click();
  2376.       }
  2377.     }
  2378.     // Disable subtitles
  2379.     const subtitleToggle = $e('.ytp-subtitles-button');
  2380.     if (subtitleToggle) {
  2381.       const isCurrentlyOn =
  2382.         subtitleToggle.getAttribute('aria-pressed') === 'true';
  2383.       if (settings.disableSubtitles && isCurrentlyOn) {
  2384.         subtitleToggle.click();
  2385.       } else if (!settings.disableSubtitles && !isCurrentlyOn) {
  2386.         subtitleToggle.click();
  2387.       }
  2388.     }
  2389.     // Disable cinematicLighting
  2390.     // const buttonSettingVideo = $e(".ytp-settings-button");
  2391.     // if(buttonSettingVideo && !settings.cinematicLighting) {
  2392.     //   buttonSettingVideo.click();
  2393.     //   setTimeout(() => {
  2394.     //     buttonSettingVideo.click();
  2395.     //   },50)
  2396.     // }
  2397.     
  2398.  
  2399.     // Adjust font size
  2400.     // $e('body').style.fontSize = `${settings.fontSize}px`;
  2401.  
  2402.     // Adjust player size
  2403.     const player = $e('video');
  2404.     if (player) {
  2405.       player.style.transform = `scale(${settings.playerSize / 100})`;
  2406.     }
  2407.  
  2408.     // selected video quality
  2409.     const video = $e('div#movie_player');
  2410.     let ytPlayerQuality = localStorage.getItem('yt-player-quality');
  2411.     $m('#select-video-qualitys-select, #select-languages-comments-select').forEach(el => {
  2412.       el.addEventListener('change', () => {
  2413.         applySettings();
  2414.       });
  2415.     });
  2416.     // $e('#select-languages-comments-select').addEventListener('change', () => {
  2417.     //   applySettings();
  2418.     // })
  2419.   
  2420.     if (video != undefined) {
  2421.       if (ytPlayerQuality) {
  2422.         let qualitySettings = JSON.parse(ytPlayerQuality);
  2423.         qualitySettings.data = JSON.stringify({ quality: settings.selectVideoQuality, previousQuality: 240 });
  2424.         localStorage.setItem('yt-player-quality', JSON.stringify(qualitySettings));
  2425.         
  2426.       } else {
  2427.         let defaultQualitySettings = {
  2428.           data: JSON.stringify({ quality: 720, previousQuality: 240 }),
  2429.           expiration: Date.now() + (365 * 24 * 60 * 60 * 1000), 
  2430.           creation: Date.now()
  2431.         };
  2432.         localStorage.setItem('yt-player-quality', JSON.stringify(defaultQualitySettings));
  2433.       }
  2434.       }
  2435.     
  2436.  
  2437.     // Apply menu appearance settings
  2438.     // $sp('--yt-enhance-menu-bg', settings.menuBgColor);
  2439.     // $sp('--yt-enhance-menu-text', settings.menuTextColor);
  2440.     // $sp('--yt-enhance-menu-font-size', `${settings.menuFontSize}px`);
  2441.  
  2442.     // Apply theme
  2443.     const selectedTheme = themes[settings.theme];
  2444.     const isThemeCustom = $e(`input[name="theme"][value="custom"]`).checked;
  2445.     const isThemeNormal = $e(`input[name="theme"][value="normal"]`).checked;
  2446.     const themeCustomOptions = $e('.theme-custom-options');
  2447.     const themeNormal = $e('.theme-selected-normal');
  2448.     if(isThemeCustom != undefined) {
  2449.       themeNormal.style.display = "flex"
  2450.       themeCustomOptions.style.display = "flex";
  2451.       $e('.themes-options').style.display = "none";
  2452.     }
  2453.     if(isThemeNormal) {
  2454.       $e(`input[name="theme"][value="custom"]`).checked = false;
  2455.     }
  2456.  
  2457.  
  2458.  
  2459.  
  2460.     function checkDarkMode() {
  2461.       
  2462.       if(settings.themes) {
  2463.         
  2464.         if (isDarkModeActive === 'dark' && !isThemeCustom) {
  2465.           // Apply theme
  2466.           $e('.themes-options').style.display = "block";
  2467.           themeNormal.style.display = "none";
  2468.           themeCustomOptions.style.display = "none";
  2469.  
  2470.           if(settings.theme === '0') {
  2471.             GM_addStyle(`
  2472.               .botones_div {
  2473.                background-color: transparent;
  2474.                border: none;
  2475.                color: #ccc !important;
  2476.                user-select: none;
  2477.              }
  2478.                `);
  2479.             return;
  2480.           } 
  2481.             
  2482.             $sp('--yt-spec-base-background', selectedTheme.gradient);
  2483.             $sp('--yt-spec-text-primary', selectedTheme.textColor);
  2484.             $sp('--yt-spec-text-secondary', selectedTheme.textColor);
  2485.             $sp('--yt-spec-menu-background', selectedTheme.gradient);
  2486.             $sp('--yt-spec-icon-inactive', selectedTheme.textColor);
  2487.             $sp('--yt-spec-brand-icon-inactive', selectedTheme.textColor);
  2488.             $sp('--yt-spec-brand-icon-active', selectedTheme.gradient);
  2489.             $sp('--yt-spec-static-brand-red', selectedTheme.gradient); // line current time
  2490.             $sp('--yt-spec-raised-background', selectedTheme.raised);
  2491.             $sp('--yt-spec-static-brand-red', selectedTheme.CurrentProgressVideo);
  2492.             $sp('--yt-spec-static-brand-white', selectedTheme.textColor);
  2493.             $sp('--ytd-searchbox-background', selectedTheme.gradient);
  2494.             $sp('--ytd-searchbox-text-color', selectedTheme.textColor);
  2495.             $sp('--ytcp-text-primary', settings.textColor);
  2496.             GM_addStyle(`
  2497.   
  2498.               .botones_div {
  2499.               background-color: transparent;
  2500.               border: none;
  2501.               color: #999999;
  2502.               user-select: none;
  2503.             }
  2504.               .ytp-menuitem[aria-checked=true] .ytp-menuitem-toggle-checkbox {
  2505.               background:  ${selectedTheme.gradient} !important;
  2506.               }
  2507.             #background.ytd-masthead { background: ${selectedTheme.gradient}  !important; }
  2508.             .ytp-swatch-background-color {
  2509.             background: ${
  2510.               selectedTheme.gradient
  2511.             } !important;
  2512.           }
  2513.           #shorts-container, #page-manager.ytd-app {
  2514.             background: ${selectedTheme.gradient.replace(/(#[0-9a-fA-F]{6})/g, `$1${36}`)};
  2515.           }
  2516.             ytd-engagement-panel-title-header-renderer[shorts-panel] #header.ytd-engagement-panel-title-header-renderer {
  2517.             background: ${selectedTheme.gradient}  !important;}
  2518.             .buttons-tranlate {
  2519.             background: ${selectedTheme.btnTranslate} !important;
  2520.             }
  2521.             .badge-shape-wiz--thumbnail-default {
  2522.             color: ${selectedTheme.videoDuration} !important;
  2523.             background: ${selectedTheme.gradient} !important;
  2524.             }
  2525.             #logo-icon {
  2526.             color:  ${selectedTheme.textLogo} !important;
  2527.           }
  2528.           .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--text {
  2529.             color:  ${selectedTheme.iconsColor} !important;
  2530.           }
  2531.           .ytd-topbar-menu-button-renderer #button.ytd-topbar-menu-button-renderer {
  2532.             color:  ${selectedTheme.iconsColor} !important;
  2533.           }
  2534.           .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon {
  2535.             color:  ${selectedTheme.iconsColor} !important;
  2536.           }
  2537.           .ytp-svg-fill {
  2538.             fill:  ${selectedTheme.iconsColor} !important;
  2539.           }
  2540.           #ytp-id-30,#ytp-id-17,#ytp-id-19,#ytp-id-20{
  2541.             fill:  ${selectedTheme.iconsColor} !important;
  2542.           }
  2543.   
  2544.   
  2545.             `);
  2546.           
  2547.         } else if(isDarkModeActive === 'dark' && isThemeCustom) {
  2548.           $sp('--yt-spec-base-background', settings.bgColorPicker);
  2549.           $sp('--yt-spec-text-primary', settings.primaryColorPicker);
  2550.           $sp('--yt-spec-text-secondary', settings.secondaryColorPicker);
  2551.           $sp('--yt-spec-menu-background', settings.menuColorPicker);
  2552.           $sp('--yt-spec-icon-inactive', settings.iconsColorPicker);
  2553.           $sp('--yt-spec-brand-icon-inactive', settings.primaryColorPicker);
  2554.           $sp('--yt-spec-brand-icon-active', settings.primaryColorPicker);
  2555.           $sp('--yt-spec-raised-background', settings.headerColorPicker);
  2556.           $sp('--yt-spec-static-brand-red', settings.lineColorPicker);
  2557.           $sp('--yt-spec-static-brand-white', settings.timeColorPicker);
  2558.           $sp('--ytd-searchbox-background', settings.primaryColorPicker);
  2559.           $sp('--ytd-searchbox-text-color', settings.secondaryColorPicker);
  2560.           $sp('--ytcp-text-primary', settings.primaryColorPicker);
  2561.           GM_addStyle(`
  2562.             .html5-video-player {
  2563.                 color: ${settings.primaryColorPicker} !important;
  2564.               }
  2565.               .ytp-volume-slider-handle:before, .ytp-volume-slider-handle, .ytp-tooltip.ytp-preview:not(.ytp-text-detail) {
  2566.                 background-color: ${settings.iconsColorPicker} !important;
  2567.               }
  2568.                 .ytp-autonav-toggle-button[aria-checked=true] {
  2569.                   background-color: ${settings.iconsColorPicker} !important;
  2570.                 }
  2571.                   .tp-yt-iron-icon {
  2572.                    fill: ${settings.iconsColorPicker} !important;
  2573.                   }
  2574.           
  2575.              .botones_div {
  2576.             background-color: transparent;
  2577.             border: none;
  2578.             color: ${settings.iconsColorPicker} !important;
  2579.             user-select: none;
  2580.           }
  2581.               #container.ytd-searchbox {
  2582.               color: red !important;
  2583.               }
  2584.             .ytp-menuitem[aria-checked=true] .ytp-menuitem-toggle-checkbox {
  2585.             background:  ${settings.primaryColorPicker} !important;
  2586.             }
  2587.             .yt-spec-icon-shape {
  2588.               display: flex;
  2589.               align-items: center;
  2590.               justify-content: center;
  2591.               width: 100%;
  2592.               height: 100%;
  2593.               color: ${settings.iconsColorPicker} !important;
  2594.           }
  2595.             .ytp-time-current, .ytp-time-separator, .ytp-time-duration {
  2596.               color: ${settings.iconsColorPicker} !important;
  2597.             }
  2598.             #background.ytd-masthead { background: ${settings.headerColorPicker}  !important; }
  2599.             .ytp-swatch-background-color {
  2600.             background: ${
  2601.               settings.progressbarColorPicker
  2602.             } !important;
  2603.           }
  2604.         #shorts-container, #page-manager.ytd-app {
  2605.             background: ${settings.bgColorPicker}36;
  2606.             }
  2607.             ytd-engagement-panel-title-header-renderer[shorts-panel] #header.ytd-engagement-panel-title-header-renderer {
  2608.             background: ${settings.bgColorPicker}  !important;}
  2609.   
  2610.             .badge-shape-wiz--thumbnail-default {
  2611.             color: ${settings.timeColorPicker} !important;
  2612.              background: ${settings.secondaryColor} !important;
  2613.             }
  2614.              #logo-icon {
  2615.              color:  ${settings.primaryColorPicker} !important;
  2616.           }
  2617.           .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--text {
  2618.             color:  ${settings.iconsColorPicker} !important;
  2619.           }
  2620.           .ytd-topbar-menu-button-renderer #button.ytd-topbar-menu-button-renderer {
  2621.             color:  ${settings.iconsColorPicker} !important;
  2622.           }
  2623.           .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon {
  2624.             color:  ${settings.iconsColorPicker} !important;
  2625.           }
  2626.           .ytp-svg-fill {
  2627.             fill:  ${settings.iconsColorPicker} !important;
  2628.           }
  2629.           #ytp-id-30,#ytp-id-17,#ytp-id-19,#ytp-id-20{
  2630.             fill:  ${settings.iconsColorPicker} !important;
  2631.           }
  2632.             `);
  2633.         } else {
  2634.           GM_addStyle(`
  2635.             .botones_div {
  2636.              background-color: transparent;
  2637.              border: none;
  2638.              color: #000 !important;
  2639.              user-select: none;
  2640.            }
  2641.              `);
  2642.         }
  2643.        
  2644.       } else {
  2645.         GM_addStyle(`
  2646.           .botones_div {
  2647.            background-color: transparent;
  2648.            border: none;
  2649.            color: #ccc !important;
  2650.            user-select: none;
  2651.          }
  2652.            `);
  2653.       }
  2654.         
  2655.     }
  2656.  
  2657.        
  2658.     GM_addStyle(`
  2659.       #columns.style-scope.ytd-watch-flexy {
  2660.         flex-direction: ${settings.reverseMode ? 'row-reverse' : 'row'} !important;
  2661.         padding-left: ${settings.reverseMode ? '20px' : '0'} !important;
  2662.         }
  2663.         #secondary.style-scope.ytd-watch-flexy {display: ${settings.hideSidebar ? 'none' : 'block'} !important;}
  2664.  
  2665.  
  2666.         #icon-menu-settings {
  2667.          color: ${settings.iconsColorPicker} !important;
  2668.         }
  2669.         .ytp-chrome-bottom {
  2670.           width: ${settings.hideSidebar ? '100%' : ''} !important;
  2671.           ${settings.hideSidebar ? 'left: 0;' : ''}
  2672.         }
  2673.           .ytp-progress-bar-container {
  2674.             left: ${settings.hideSidebar ? '4px' : ''} !important;
  2675.           }
  2676.       `);
  2677.  
  2678.     checkDarkMode();
  2679.  
  2680.     function checkForVideo() {
  2681.       if(!settings.waveVisualizer) {
  2682.         cleanup(false);
  2683.         return;
  2684.       }
  2685.       const video = $e('video');
  2686.       const miniPlayer = $e('.ytp-miniplayer-ui');
  2687.       if ((video && document.location.href.includes('watch')) || miniPlayer) {
  2688.           if (isFullscreen()) {
  2689.               hideCanvas();
  2690.               return;
  2691.           }
  2692.           if (video === currentVideo && isSetup) {
  2693.               if (controlPanel && video.paused === false) {
  2694.                   showCanvas();
  2695.               }
  2696.           } else {
  2697.               cleanup(true)
  2698.               setupAudioAnalyzer(video);
  2699.           }
  2700.       }
  2701.   }
  2702.  
  2703.   // checkForVideo();
  2704.    
  2705.     let currentUrl = window.location.href;
  2706.     let urlCheckInterval = setInterval(function () {
  2707.       if (window.location.href !== currentUrl) {
  2708.         currentUrl = window.location.href;
  2709.         checkUrlChange();
  2710.       }
  2711.     }, 1000);
  2712.  
  2713.     function checkUrlChange() {
  2714.       setTimeout(() => {
  2715.         applySettings();
  2716.       }, 1000);
  2717.       clearInterval(urlCheckInterval);
  2718.     }
  2719.  
  2720.     function downloadDescriptionVideo() {
  2721.       if ($e('#button_copy_description')) return;
  2722.     
  2723.       const containerDescription = $e('#bottom-row.style-scope.ytd-watch-metadata');
  2724.       if (!containerDescription) {
  2725.         console.warn('No se encontró el contenedor de descripción. No se insertará el botón.');
  2726.         return;
  2727.       }
  2728.     
  2729.       const buttomHTML = `
  2730.         <div id="button_copy_description" style="display: flex; justify-content: end; align-items: center;margin-top: 10px;" >
  2731.           <button id="copy-description" class="botones_div" type="button" style="cursor: pointer;">
  2732.             <i style="font-size: 20px;" class="fa-solid fa-copy"></i>     
  2733.           </button>
  2734.         </div>
  2735.       `;
  2736.     
  2737.       containerDescription.insertAdjacentHTML('beforebegin', buttomHTML);
  2738.     
  2739.       $id('copy-description').addEventListener('click', () => {
  2740.         const ldJson = [...document.querySelectorAll('script[type="application/ld+json"]')];
  2741.         for (let script of ldJson) {
  2742.           try {
  2743.             const data = JSON.parse(script.innerText);
  2744.             if (data['@type'] === 'VideoObject') {
  2745.               const description =
  2746.                 `📅 Date published: ${data.uploadDate || 'No disponible'}\n` +
  2747.                 `Author: ${data.author || 'No disponible'}\n` +
  2748.                 `🎬 Name video: ${data.name || 'No disponible'}\n` +
  2749.                 `🖼️ Thumbnail: ${Array.isArray(data.thumbnailUrl) ? data.thumbnailUrl.join(', ') : data.thumbnailUrl || 'No disponible'}\n` +
  2750.                 `📝 Description: ${data.description || 'No disponible'}\n\n\n` +
  2751.                 `🎭 Category: ${data.genre || 'No disponible'}\n`;
  2752.     
  2753.               navigator.clipboard.writeText(description);
  2754.             }
  2755.           } catch (e) {
  2756.             Notify('error', 'Error parsing JSON-LD');
  2757.           } finally {
  2758.             Notify('success', 'Descripción copiada');
  2759.           }
  2760.         }
  2761.       });
  2762.     }
  2763.     
  2764.     downloadDescriptionVideo();
  2765.  
  2766.  
  2767.     async function traductor() {
  2768.       const texto = $m('#content-text');
  2769.       if ($e('.buttons-tranlate')) return;
  2770.     
  2771.       const languages = languagesTranslate;
  2772.       const idiomaDestino = $id('select-languages-comments-select').value;
  2773.     
  2774.       for (let i = 0; i < texto.length; i++) {
  2775.        
  2776.         const optionsHTML = Object.entries(languages)
  2777.           .map(([code, name]) => {
  2778.             const selected = code === idiomaDestino ? 'selected' : '';
  2779.             return `<option value="${code}" ${selected}>${name}</option>`;
  2780.           })
  2781.           .join('');
  2782.     
  2783.         const controlsHTML = `
  2784.           <div class="traductor-container" data-index="${i}">
  2785.           <button class="buttons-tranlate" id="btn${i}"> Translate <i class="fa-solid fa-language"></i></button>
  2786.           <select class="select-traductor" id="select${i}">
  2787.            ${optionsHTML}
  2788.           </select>
  2789.           </div>
  2790.         `;
  2791.      
  2792.         texto[i].insertAdjacentHTML('afterend', controlsHTML);
  2793.       }
  2794.       
  2795.       const botones = $m('.buttons-tranlate');
  2796.       const selects = $m('.select-traductor');
  2797.     
  2798.       botones.forEach((boton, i) => {
  2799.         boton.addEventListener('click', () => {
  2800.           const selectedLang = selects[i].value;
  2801.           const urlLista = `?client=dict-chrome-ex&sl=auto&tl=${selectedLang}&q=` + texto[i].textContent;
  2802.     
  2803.           fetch(apiGoogleTranslate + urlLista)
  2804.             .then((response) => response.json())
  2805.             .then((datos) => {
  2806.               texto[i].textContent = datos[0][0];
  2807.               botones[i].textContent = 'Translated';
  2808.             })
  2809.             .catch((err) => {
  2810.               console.error('Error en la traducción:', err);
  2811.             });
  2812.         });
  2813.       });
  2814.     }
  2815.     
  2816.  
  2817.  
  2818.     function limpiarHTML(selector) {
  2819.       $m(selector).forEach((button) => button.remove());
  2820.     }
  2821.  
  2822.     function checkScroll () {
  2823.       const avatars = $m('#author-thumbnail-button #img.style-scope.yt-img-shadow');
  2824.   
  2825.       if (avatars.length > 0 && settings.avatars) {
  2826.         limpiarHTML('.yt-image-avatar-download');
  2827.         agregarBotonesDescarga();
  2828.       }
  2829.     
  2830.       const divEl = $e('#content-text');
  2831.       const divEl2 = $e('ytd-item-section-renderer[static-comments-header] #contents');
  2832.     
  2833.       if (settings.translation) {
  2834.         if (divEl !== undefined || divEl2 !== undefined) {
  2835.           limpiarHTML('.buttons-tranlate');
  2836.           limpiarHTML('.select-traductor');
  2837.           traductor();
  2838.         }
  2839.       }
  2840.   
  2841.     }
  2842.  
  2843.     window.onscroll = () => {
  2844.       checkScroll();
  2845.     }
  2846.  
  2847.  
  2848.   const contentScrollable = $e('.anchored-panel.style-scope.ytd-shorts #contents.style-scope.ytd-item-section-renderer.style-scope.ytd-item-section-renderer');
  2849.   if (contentScrollable) {
  2850.     const observer = new IntersectionObserver((entries) => {
  2851.       entries.forEach(entry => {
  2852.         if (entry.isIntersecting) {
  2853.           contentScrollable.addEventListener('scroll', () => {
  2854.             checkScroll();          
  2855.           });
  2856.         }
  2857.       });
  2858.     }, { threshold: 0.1 });
  2859.   
  2860.     observer.observe(contentScrollable);
  2861.   } 
  2862.     
  2863.     function agregarBotonesDescarga() {
  2864.       const avatars = $m('#author-thumbnail-button #img.style-scope.yt-img-shadow');
  2865.     
  2866.     
  2867.       avatars.forEach((img) => {
  2868.         
  2869.         if (img.parentElement.querySelector('.yt-image-avatar-download')) return;
  2870.        
  2871.         const button = $cl('button');
  2872.         button.innerHTML = '<i class="fa fa-download"></i>';
  2873.         button.classList.add('yt-image-avatar-download');
  2874.       
  2875.         button.onclick = async function () {
  2876.           try {
  2877.             const imageUrl = img.src.split('=')[0];
  2878.             const response = await fetch(imageUrl);
  2879.             const blob = await response.blob();
  2880.             const blobUrl = URL.createObjectURL(blob);
  2881.     
  2882.             const parentComment = img.closest('ytd-comment-thread-renderer, ytd-comment-renderer');
  2883.             const nameElement = parentComment?.querySelector('#author-text');
  2884.             let authorName = nameElement ? nameElement.textContent.trim() : 'avatar';
  2885.             authorName = authorName.replace(/[\/\\:*?"<>|]/g, '');
  2886.     
  2887.             const link = $cl('a');
  2888.             link.href = blobUrl;
  2889.             link.download = `${authorName}_avatar.jpg` || 'avatar.jpg';
  2890.             document.body.appendChild(link);
  2891.             link.click();
  2892.             document.body.removeChild(link);
  2893.             URL.revokeObjectURL(blobUrl);
  2894.           } catch (error) {
  2895.             console.error('Error al descargar la imagen:', error);
  2896.           }
  2897.         };
  2898.         
  2899.         img.parentElement.style.position = 'relative'; 
  2900.         img.parentElement.appendChild(button);
  2901.       });
  2902.     }
  2903.  
  2904.     const BUTTON_CLASS = 'custom-classic-btn';
  2905.  
  2906.    
  2907.     const redirectToClassic = () => {
  2908.       const videoId = window.location.pathname.split('/').pop();
  2909.       const classicUrl = `https://www.youtube.com/watch?v=${videoId}`;
  2910.      
  2911.       window.open(classicUrl, '_blank');
  2912.      
  2913.      $e('video.video-stream.html5-main-video').pause();
  2914.       
  2915.   };
  2916.  
  2917.  
  2918.    
  2919.   const createButton = () => {
  2920.     const button = $cl('button');
  2921.     button.classList.add(BUTTON_CLASS);
  2922.     button.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-screen-share"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 12v3a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10a1 1 0 0 1 1 -1h9" /><path d="M7 20l10 0" /><path d="M9 16l0 4" /><path d="M15 16l0 4" /><path d="M17 4h4v4" /><path d="M16 9l5 -5" /></svg>'; 
  2923.     button.title = 'Classic mode';
  2924.     button.onclick = redirectToClassic;
  2925.     return button;
  2926.   };
  2927.  
  2928.   const insertButtons = () => {
  2929.       const isShortsPage = document.location.pathname.startsWith('/shorts');
  2930.  
  2931.       if (isShortsPage) {
  2932.          $m('#actions').forEach(actionsContainer => {
  2933.               if (!actionsContainer.querySelector(`.${BUTTON_CLASS}`)) {
  2934.                   actionsContainer.prepend(createButton());
  2935.               }
  2936.           });
  2937.       } else {
  2938.           $m(`.${BUTTON_CLASS}`).forEach(button => button.remove());
  2939.       }
  2940.   };
  2941.  
  2942.   const observeDOM = () => {
  2943.       const observer = new MutationObserver(() => {
  2944.           insertButtons();
  2945.           addIcon();
  2946.           // obs.disconnect();
  2947.       });
  2948.       observer.observe(document.body, {
  2949.           childList: true,
  2950.           subtree: true
  2951.       });
  2952.   };
  2953.  
  2954.     insertButtons();
  2955.     observeDOM();
  2956.  
  2957.  
  2958.     const targetNode = $e('body');
  2959.  
  2960.     if (targetNode != undefined) {
  2961.       const element = $e('ytd-item-section-renderer[static-comments-header] #contents');
  2962.       if(element != undefined && settings.theme !== 'custom') {
  2963.         const observerElementDom = (elem) => {
  2964.           const observer = new IntersectionObserver(entries => {
  2965.  
  2966.               if(entries[0].isIntersecting) {
  2967.  
  2968.                 element.style.background = `${selectedTheme.gradient ?? ''}`;
  2969.               } else {return}
  2970.           })
  2971.  
  2972.           return observer.observe($e(`${elem}`))
  2973.  
  2974.         }
  2975.         observerElementDom('ytd-item-section-renderer[static-comments-header] #contents')
  2976.       }
  2977.     }
  2978.     
  2979.     // Stats 
  2980.     
  2981.     function formatTime(seconds) {
  2982.       if (isNaN(seconds)) return '0h 0m 0s';
  2983.       seconds = Math.floor(seconds);
  2984.       const h = Math.floor(seconds / 3600);
  2985.       const m = Math.floor((seconds % 3600) / 60);
  2986.       const s = seconds % 60;
  2987.       return `${h}h ${m}m ${s}s`;
  2988.     }
  2989.  
  2990.   function updateUI() {
  2991.       $id('total-time').textContent = formatTime(usageTime);
  2992.       $id('video-time').textContent = formatTime(videoTime);
  2993.       $id('shorts-time').textContent = formatTime(shortsTime);
  2994.  
  2995.       const maxTime = 86400; // 24 hours
  2996.       $id('usage-bar').style.width =
  2997.           `${(usageTime / maxTime) * 100}%`;
  2998.       $id('video-bar').style.width =
  2999.           `${(videoTime / maxTime) * 100}%`;
  3000.       $id('shorts-bar').style.width =
  3001.           `${(shortsTime / maxTime) * 100}%`;
  3002.   }
  3003.  
  3004.   function detectContentType(videoElement) {
  3005.       if (/\/shorts\//.test(window.location.pathname)) return 'shorts';
  3006.     
  3007.       let parent = videoElement;
  3008.       while ((parent = parent.parentElement) !== null) { 
  3009.           if (parent.classList.contains('shorts-container') ||
  3010.               parent.classList.contains('reel-video') ||
  3011.               parent.tagName === 'YTD-REEL-VIDEO-RENDERER') {
  3012.               return 'shorts';
  3013.           }
  3014.       }
  3015.  
  3016.     
  3017.       if (videoElement.closest('ytd-watch-flexy') ||
  3018.           videoElement.closest('#primary-inner')) {
  3019.           return 'video';
  3020.       }
  3021.       if (videoElement.closest('ytd-thumbnail') ||
  3022.           videoElement.closest('ytd-rich-item-renderer')) {
  3023.           return 'video';
  3024.       }
  3025.  
  3026.       return null;
  3027.     }
  3028.  
  3029.     function findActiveVideo() {
  3030.         const videos = $m('video');
  3031.         for (const video of videos) {
  3032.             if (!video.paused && !video.ended && video.readyState > 2) {
  3033.                 return video;
  3034.             }
  3035.         }
  3036.         return null;
  3037.     }
  3038.     
  3039.  
  3040.     function cleanup(fullCleanup = false) {
  3041.       if (fullCleanup && animationId) { 
  3042.           cancelAnimationFrame(animationId);
  3043.           animationId = null;
  3044.       }
  3045.       
  3046.       // Remueve los event listeners que afectan la UI
  3047.       if (currentVideo) {
  3048.           currentVideo.removeEventListener('play', showCanvas);
  3049.           currentVideo.removeEventListener('pause', hideCanvas);
  3050.           currentVideo.removeEventListener('ended', hideCanvas);
  3051.       }
  3052.       
  3053.       if (fullCleanup) {
  3054.           // Remueve  UI and disconnect from video
  3055.           if (canvas && canvas.parentNode) {
  3056.               canvas.parentNode.removeChild(canvas);
  3057.               canvas = null;
  3058.               ctx = null;
  3059.           }
  3060.           if (controlPanel && controlPanel.parentNode) {
  3061.               controlPanel.parentNode.removeChild(controlPanel);
  3062.               controlPanel = null;
  3063.           }
  3064.           if (source) {
  3065.               try {
  3066.                   source.disconnect();
  3067.               } catch (err) {
  3068.                   console.error("Error desconectando el source:", err);
  3069.               }
  3070.               source = null;
  3071.           }
  3072.           if (audioCtx) {
  3073.               try {
  3074.                   audioCtx.close();
  3075.               } catch (err) {
  3076.                   console.error("Error cerrando AudioContext:", err);
  3077.               }
  3078.               audioCtx = null;
  3079.           }
  3080.           if (currentVideo && currentVideo[PROCESSED_FLAG]) {
  3081.               delete currentVideo[PROCESSED_FLAG];
  3082.           }
  3083.           currentVideo = null;
  3084.           isSetup = false;
  3085.       } else {
  3086.           if (canvas) {
  3087.               canvas.style.opacity = '0';
  3088.           }
  3089.           if (controlPanel) {
  3090.               controlPanel.style.opacity = '0';
  3091.           }
  3092.       }
  3093.   }
  3094.   
  3095.  
  3096.     function createCanvasOverlay() {
  3097.         if (canvas) return; 
  3098.         const parent = document.body;
  3099.         canvas = document.createElement('canvas');
  3100.         canvas.id = 'wave-visualizer-canvas';
  3101.         canvas.width = window.innerWidth; 
  3102.         canvas.height = canvasHeight;
  3103.         canvas.style.position = 'fixed';
  3104.         canvas.style.left = '0';
  3105.         canvas.style.top = '0';
  3106.         canvas.style.width = '100%';
  3107.         canvas.style.pointerEvents = 'none';
  3108.         canvas.style.backgroundColor = 'transparent';
  3109.         canvas.style.zIndex = '10000';
  3110.         canvas.style.opacity = '0';
  3111.         canvas.style.transition = 'opacity 0.3s';
  3112.  
  3113.         parent.appendChild(canvas);
  3114.         ctx = canvas.getContext('2d');
  3115.     }
  3116.   
  3117.   
  3118.     function createControlPanelWave() {
  3119.       if (controlPanel) return; 
  3120.  
  3121.       controlPanel = $cl('div');
  3122.       controlPanel.id = 'wave-visualizer-control';
  3123.       const selectAppend = $id('select-wave-visualizer-select');      
  3124.       waveStyle = settings.waveVisualizerSelected;
  3125.       
  3126.       selectAppend.addEventListener('change', (e) => {
  3127.           waveStyle = e.target.value;
  3128.           selectAppend.value = e.target.value;
  3129.           saveSettings();
  3130.       });
  3131.  
  3132.   }
  3133.  
  3134.  
  3135.   function showCanvas() {    
  3136.     const canvas = $id('wave-visualizer-canvas');
  3137.     if (audioCtx && audioCtx.state === 'suspended') {
  3138.         audioCtx.resume();
  3139.     } 
  3140.     if (canvas) {
  3141.         canvas.style.opacity = '1';
  3142.         if (controlPanel) controlPanel.style.opacity = '1';
  3143.     }
  3144. }
  3145.  
  3146.     // setting Audio y Analyser
  3147.     function setupAudioAnalyzer(video) {
  3148.         if (video[PROCESSED_FLAG]) {
  3149.             Notify('error', "This video already has a MediaElementSource, skipping setup");
  3150.             return;
  3151.         }
  3152.         video[PROCESSED_FLAG] = true;
  3153.         cleanup(false);
  3154.         currentVideo = video;
  3155.         createCanvasOverlay();
  3156.         createControlPanelWave();
  3157.     
  3158.         
  3159.       
  3160.         if (!audioCtx) {
  3161.             const AudioContext = window.AudioContext || window.webkitAudioContext;
  3162.             audioCtx = new AudioContext();
  3163.         }
  3164.         
  3165.         analyser = audioCtx.createAnalyser();
  3166.         analyser.fftSize = 2048;
  3167.         analyser.smoothingTimeConstant = 0.85;
  3168.         bufferLength = analyser.fftSize;
  3169.         dataArray = new Uint8Array(bufferLength);
  3170.         smoothedData = new Array(bufferLength).fill(128);
  3171.         try {
  3172.             source = audioCtx.createMediaElementSource(video);
  3173.             source.connect(analyser);
  3174.             analyser.connect(audioCtx.destination);
  3175.         } catch (e) {
  3176.             Notify('error', "MediaElementSource or error:", e);
  3177.             cleanup(true);
  3178.             return setupAudioAnalyzer(video); // clean full
  3179.         }
  3180.         video.removeEventListener('play', showCanvas);
  3181.         video.removeEventListener('pause', hideCanvas);
  3182.         video.removeEventListener('ended', hideCanvas);
  3183.  
  3184.         video.addEventListener('play', showCanvas);
  3185.         video.addEventListener('pause', hideCanvas);
  3186.         video.addEventListener('ended', hideCanvas);
  3187.       
  3188.         const updateCanvasSize = () => {
  3189.             if (canvas) {
  3190.                 canvas.width = window.innerWidth;
  3191.                 canvas.height = canvasHeight;
  3192.             }
  3193.         };
  3194.  
  3195.         window.removeEventListener('resize', updateCanvasSize);
  3196.         window.addEventListener('resize', updateCanvasSize);
  3197.       
  3198.         draw();
  3199.         isSetup = true;
  3200.       }
  3201.       function draw() {
  3202.           animationId = requestAnimationFrame(draw);
  3203.           
  3204.           if (parseFloat(canvas.style.opacity) <= 0) return;
  3205.  
  3206.           analyser.getByteTimeDomainData(dataArray);
  3207.           for (let i = 0; i < bufferLength; i++) {
  3208.               smoothedData[i] += smoothingFactor * (dataArray[i] - smoothedData[i]);
  3209.           }
  3210.           ctx.clearRect(0, 0, canvas.width, canvas.height);
  3211.           
  3212.           let sliceWidth = canvas.width / bufferLength;
  3213.  
  3214.           switch(waveStyle) {
  3215.             
  3216.           case 'linea': {
  3217.               ctx.lineWidth = 2;
  3218.               ctx.strokeStyle = 'lime';
  3219.               ctx.beginPath();
  3220.               let x = 0;
  3221.               for (let i = 0; i < bufferLength; i++) {
  3222.                   let amplitude = Math.max(0, smoothedData[i] - 128) * scale;
  3223.                   if (i === 0) ctx.moveTo(x, amplitude);
  3224.                   else ctx.lineTo(x, amplitude);
  3225.                   x += sliceWidth;
  3226.               }
  3227.               ctx.stroke();
  3228.               break;
  3229.           }
  3230.           case 'barras': {
  3231.               let x = 0;
  3232.               for (let i = 0; i < bufferLength; i += 5) {
  3233.                   let amplitude = Math.max(0, smoothedData[i] - 128) * scale;
  3234.                   ctx.fillStyle = 'cyan';
  3235.                   ctx.fillRect(x, 0, sliceWidth * 4, amplitude);
  3236.                   x += sliceWidth * 5;
  3237.               }
  3238.               break;
  3239.           }
  3240.           case 'curva': {
  3241.               ctx.lineWidth = 2;
  3242.               ctx.strokeStyle = 'yellow';
  3243.               ctx.beginPath();
  3244.               ctx.moveTo(0, Math.max(0, smoothedData[0] - 128) * scale);
  3245.               for (let i = 0; i < bufferLength - 1; i++) {
  3246.                   let x0 = i * sliceWidth;
  3247.                   let x1 = (i + 1) * sliceWidth;
  3248.                   let y0 = Math.max(0, smoothedData[i] - 128) * scale;
  3249.                   let y1 = Math.max(0, smoothedData[i + 1] - 128) * scale;
  3250.                   let cp1x = x0 + sliceWidth / 3;
  3251.                   let cp1y = y0;
  3252.                   let cp2x = x1 - sliceWidth / 3;
  3253.                   let cp2y = y1;
  3254.                   ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x1, y1);
  3255.               }
  3256.               ctx.stroke();
  3257.               break;
  3258.           }
  3259.           case 'picos': {
  3260.               ctx.fillStyle = 'magenta';
  3261.               let x = 0;
  3262.               for (let i = 0; i < bufferLength; i += 5) {
  3263.                   let amplitude = Math.max(0, smoothedData[i] - 128) * scale;
  3264.                   ctx.beginPath();
  3265.                   ctx.arc(x, amplitude, 2, 0, Math.PI * 2);
  3266.                   ctx.fill();
  3267.                   x += sliceWidth * 5;
  3268.               }
  3269.               break;
  3270.           }
  3271.           case 'solida': {
  3272.               ctx.beginPath();
  3273.               let x = 0;
  3274.               ctx.moveTo(0, 0);
  3275.               for (let i = 0; i < bufferLength; i++) {
  3276.                   let amplitude = Math.max(0, smoothedData[i] - 128) * scale;
  3277.                   ctx.lineTo(x, amplitude);
  3278.                   x += sliceWidth;
  3279.               }
  3280.               ctx.lineTo(canvas.width, 0);
  3281.               ctx.closePath();
  3282.               ctx.fillStyle = 'rgba(0,255,0,0.3)';
  3283.               ctx.fill();
  3284.               break;
  3285.           }
  3286.           case 'dinamica': {
  3287.               let gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
  3288.               gradient.addColorStop(0, 'red');
  3289.               gradient.addColorStop(0.5, 'purple');
  3290.               gradient.addColorStop(1, 'blue');
  3291.               ctx.lineWidth = 3;
  3292.               ctx.strokeStyle = gradient;
  3293.               ctx.beginPath();
  3294.               let x = 0;
  3295.               for (let i = 0; i < bufferLength; i++) {
  3296.                   let amplitude = Math.max(0, smoothedData[i] - 128) * scale;
  3297.                   if (i === 0) ctx.moveTo(x, amplitude);
  3298.                   else ctx.lineTo(x, amplitude); 
  3299.                   x += sliceWidth;
  3300.               }
  3301.               ctx.stroke();
  3302.               break;
  3303.           }
  3304.           case 'montana': {
  3305.               ctx.beginPath();
  3306.               let x = 0;
  3307.               ctx.moveTo(0, 0);
  3308.               for (let i = 0; i < bufferLength; i++) {
  3309.                   let amp = (smoothedData[i] - 128) * scale * 0.8;
  3310.                   ctx.lineTo(x, amp);
  3311.                   x += sliceWidth;
  3312.               }
  3313.               ctx.lineTo(canvas.width, 0);
  3314.               ctx.closePath();
  3315.               ctx.fillStyle = 'rgba(128,128,255,0.4)';
  3316.               ctx.fill();
  3317.               break;
  3318.           }
  3319.             
  3320.           default:
  3321.               break;
  3322.           }
  3323.       }
  3324.    
  3325.      
  3326.  
  3327.   const observer = new MutationObserver(() => {
  3328.       const newVideo = findActiveVideo();
  3329.       if (newVideo !== activeVideo) {
  3330.           activeVideo = newVideo;
  3331.           if (activeVideo) {
  3332.               activeType = detectContentType(activeVideo);     
  3333.               
  3334.           }
  3335.       }
  3336.   });
  3337.  
  3338.         checkForVideo();
  3339.  
  3340.   setInterval(() => {
  3341.         const now = Date.now();
  3342.         // checkForVideo();
  3343.         const delta = (now - lastUpdate) / 1000;
  3344.         if (document.visibilityState === 'visible') {
  3345.             usageTime += delta;
  3346.         }
  3347.       
  3348.         if (activeVideo && !activeVideo.paused) {
  3349.             if (activeType === 'video') {
  3350.                 videoTime += delta;
  3351.             } else if (activeType === 'shorts') {
  3352.                 shortsTime += delta;
  3353.             }
  3354.         }
  3355.         lastUpdate = now;
  3356.         // save stats
  3357.         GM_setValue(STORAGE.USAGE, usageTime);
  3358.         GM_setValue(STORAGE.VIDEO, videoTime);
  3359.         GM_setValue(STORAGE.SHORTS, shortsTime);
  3360.         updateUI();
  3361.   }, UPDATE_INTERVAL);
  3362.  
  3363.  
  3364.  
  3365.  
  3366.  
  3367.  
  3368.   observer.observe(document.body, {
  3369.       childList: true,
  3370.       subtree: true,
  3371.       attributes: true
  3372.   });
  3373.   updateUI();
  3374.  
  3375.   // end stats
  3376.   saveSettings();
  3377.   
  3378.   }
  3379.  
  3380.   let validoBotones = true;
  3381.   function renderizarButtons() {
  3382.     const addButton = $e('.style-scope .ytd-watch-metadata');
  3383.     const addButton2 = $e('#contents');
  3384.  
  3385.     if (addButton != undefined && validoBotones) {
  3386.         validoBotones = false;
  3387.         const isVisible = !!(
  3388.           addButton.offsetWidth ||
  3389.           addButton.offsetHeight ||
  3390.           addButton.getClientRects().length
  3391.         );
  3392.         if (isVisible) {
  3393.           addButton.insertAdjacentHTML("beforebegin", menuBotones);
  3394.         } else if (addButton2 != undefined) {
  3395.           addButton.insertAdjacentHTML("beforebegin", menuBotones);
  3396.         }
  3397.     }
  3398.  
  3399.     const formulariodescarga      = $e('.formulariodescarga');
  3400.     const formulariodescargaaudio = $e('.formulariodescargaaudio');
  3401.     const framedescarga         = $e('#descargando');
  3402.     const framedescargamp3      = $e('#descargandomp3');
  3403.     const btn1mp4               = $e('.btn1');
  3404.     const btn2mp3               = $e('.btn2');
  3405.     const btn3cancel            = $e('.btn3');
  3406.     const selectcalidades       = $e('.selectcalidades');
  3407.     const selectcalidadesaudio  = $e('.selectcalidadesaudio');
  3408.     
  3409.  
  3410.     [formulariodescarga, formulariodescargaaudio].forEach(form =>
  3411.       form?.addEventListener('click', e => e.preventDefault())
  3412.     );
  3413.     
  3414.     selectcalidades?.addEventListener('change', e => {
  3415.       framedescarga.src = `https://loader.to/api/button/?url=${window.location.href}&f=${e.target.value}&color=0af`;
  3416.       framedescarga.classList.remove('ocultarframe');
  3417.     });
  3418.     
  3419.     selectcalidadesaudio?.addEventListener('change', e => {
  3420.       framedescargamp3.src = `https://loader.to/api/button/?url=${window.location.href}&f=${e.target.value}&color=049c16`;
  3421.       framedescargamp3.classList.remove('ocultarframeaudio');
  3422.     });
  3423.     
  3424.     btn3cancel?.addEventListener('click', () => {
  3425.       formulariodescarga.style.display = 'none';
  3426.       formulariodescargaaudio.style.display = 'none';
  3427.     });
  3428.     
  3429.     btn1mp4?.addEventListener('click', () => {
  3430.       selectcalidades?.classList.remove('ocultarframe');
  3431.       framedescarga?.classList.add('ocultarframe');
  3432.       formulariodescarga?.classList.remove('ocultarframe');
  3433.       formulariodescarga.style.display = '';
  3434.       selectcalidadesaudio?.classList.add('ocultarframeaudio');
  3435.       formulariodescargaaudio?.classList.add('ocultarframe');
  3436.       formulariodescarga?.reset();
  3437.     });
  3438.     
  3439.     btn2mp3?.addEventListener('click', () => {
  3440.       formulariodescargaaudio?.classList.remove('ocultarframe');
  3441.       formulariodescarga?.classList.add('ocultarframe');
  3442.       framedescargamp3?.classList.remove('ocultarframeaudio');
  3443.       formulariodescargaaudio.style.display = '';
  3444.       selectcalidadesaudio?.classList.remove('ocultarframeaudio');
  3445.       framedescargamp3?.classList.add('ocultarframeaudio');
  3446.       formulariodescargaaudio?.reset();
  3447.     });
  3448.       // Invertir contenido
  3449.  
  3450.       // const background_image = $e('#background_image');
  3451.       // const color_bg = $e('#color_bg');
  3452.       // const alertShown = localStorage.getItem('alertShown');
  3453.       // const alertShownBg = localStorage.getItem('alertShownBg');
  3454.       // if (!alertShown) {
  3455.       //   color_bg.addEventListener('change', () => {
  3456.       //     alert('disable cinematic mode in the video');
  3457.       //     localStorage.setItem('alertShown', true);
  3458.       //   });
  3459.       // }
  3460.       // if (!alertShownBg) {
  3461.       //   background_image.addEventListener('input', () => {
  3462.       //     alert('disable cinematic mode in the video');
  3463.       //     localStorage.setItem('alertShownBg', true);
  3464.       //   });
  3465.       // }
  3466.  
  3467.  
  3468.  
  3469.       const btnImagen = $e('#imagen');
  3470.       const formularioButtons = $e('#eyes');
  3471.       
  3472.       function initClickEvent() {
  3473.         const bufferVideo = $e('.buffer_video');
  3474.         
  3475.         if (!bufferVideo) {
  3476.          
  3477.           return;
  3478.         }
  3479.       
  3480.         // Evita duplicar el evento
  3481.         if (!bufferVideo.dataset.listenerAdded) {
  3482.           bufferVideo.addEventListener("click", () => {
  3483.             const video = $e("video.video-stream.html5-main-video");
  3484.       
  3485.             if (!video) {
  3486.               console.log("No se encontró el video en la página.");
  3487.               return;
  3488.             }
  3489.       
  3490.             const event = new MouseEvent("contextmenu", {
  3491.               bubbles: true,
  3492.               cancelable: true
  3493.             });
  3494.       
  3495.             video.dispatchEvent(event);
  3496.     
  3497.             setTimeout(() => {
  3498.               const option = $e("body > div.ytp-popup.ytp-contextmenu > div > div > div:nth-child(7)");
  3499.               if (option) {
  3500.                 option.click();
  3501.               } else {
  3502.                 console.log("Opción no encontrada, intenta aumentar el tiempo de espera.");
  3503.               }
  3504.             }, 1000);
  3505.           });
  3506.       
  3507.           bufferVideo.dataset.listenerAdded = "true"; 
  3508.         }
  3509.       }
  3510.       
  3511.       setInterval(initClickEvent, 2000);
  3512.      
  3513.       
  3514.  
  3515.       // valido modo oscuro y venta de video
  3516.       // Repeat video button
  3517.       let countRepeat = 0; // count
  3518.       const repeat = $e('#repeatvideo'); // Repeat button
  3519.       const imarepeat = $e('.icon-tabler-repeat'); // img repeat
  3520.       const videoFull = $e(
  3521.         '#movie_player > div.html5-video-container > video'
  3522.       );
  3523.       if(repeat != undefined) {
  3524.  
  3525.         repeat.onclick = () => {
  3526.           if (
  3527.             $e('#cinematics > div') != undefined ||
  3528.             videoFull != undefined
  3529.           ) {
  3530.             countRepeat += 1;
  3531.             setInterval(() => {
  3532.               switch (countRepeat) {
  3533.                 case 1:
  3534.                   document
  3535.                     .querySelector(
  3536.                       '#movie_player > div.html5-video-container > video'
  3537.                     )
  3538.                     .setAttribute('loop', 'true');
  3539.                   imarepeat.innerHTML = `  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-repeat-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  3540.                       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  3541.                       <path d="M4 12v-3c0 -1.336 .873 -2.468 2.08 -2.856m3.92 -.144h10m-3 -3l3 3l-3 3"></path>
  3542.                       <path d="M20 12v3a3 3 0 0 1 -.133 .886m-1.99 1.984a3 3 0 0 1 -.877 .13h-13m3 3l-3 -3l3 -3"></path>
  3543.                       <path d="M3 3l18 18"></path>
  3544.                    </svg> `; // img repeat
  3545.                   break;
  3546.                 case 2:
  3547.                   countRepeat = 0;
  3548.                   document
  3549.                     .querySelector(
  3550.                       '#movie_player > div.html5-video-container > video'
  3551.                     )
  3552.                     .removeAttribute('loop');
  3553.                   imarepeat.innerHTML = ` <svg  xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-repeat" width="24"
  3554.                       height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
  3555.                       stroke-linecap="round" stroke-linejoin="round">
  3556.                       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  3557.                       <path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"></path>
  3558.                       <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path>
  3559.                     </svg>`;
  3560.                   break;
  3561.               }
  3562.             }, 1000);
  3563.           }
  3564.           }
  3565.       }
  3566.  
  3567.       // Background transparent
  3568.  
  3569.       const cinematica = $e('#cinematics > div');
  3570.       if (cinematica != undefined) {
  3571.         cinematica.style =
  3572.           'position: fixed; inset: 0px; pointer-events: none; transform: scale(1.5, 2)';
  3573.       }
  3574.       const btnReset = $e('#reset_button'); // Reset button
  3575.       if (btnReset != undefined) {
  3576.         btnReset.addEventListener('click', function () {
  3577.           if (localStorage.getItem('colores') != null) {
  3578.             localStorage.removeItem('colores');
  3579.             $e('#ojosprotect').style.backgroundColor =
  3580.               'transparent';
  3581.             setTimeout(() => {
  3582.               location.reload();
  3583.             }, 400);
  3584.           }
  3585.         });
  3586.       }
  3587.  
  3588.       if (btnImagen != undefined) {
  3589.         btnImagen.onclick = () => {
  3590.           if (
  3591.             $e('#cinematics > div') != undefined ||
  3592.             videoFull != undefined
  3593.           ) {
  3594.             const parametrosURL = new URLSearchParams(window.location.search);
  3595.             let enlace = parametrosURL.get('v');
  3596.             
  3597.             const imageUrl = `https://i.ytimg.com/vi/${enlace}/maxresdefault.jpg`;
  3598.             
  3599.             fetch(imageUrl)
  3600.               .then((response) => {
  3601.                 if (!response.ok) {
  3602.                   throw new Error(`HTTP error! Status: ${response.status}`);
  3603.                 }
  3604.                 return response.blob();
  3605.               })
  3606.               .then((blob) => {
  3607.                 const imageSizeKB = blob.size / 1024;
  3608.                
  3609.                 if (imageSizeKB >= 20) {
  3610.                   window.open(
  3611.                     `https://i.ytimg.com/vi/${enlace}/maxresdefault.jpg`,
  3612.                     'popUpWindow',
  3613.                     'height=500,width=400,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes'
  3614.                   );
  3615.                   const imageUrlObject = URL.createObjectURL(blob);
  3616.                  
  3617.                   const enlaceDescarga = $cl('a');
  3618.                   enlaceDescarga.href = imageUrlObject;
  3619.                   const titleVideo = $e(
  3620.                     'h1.style-scope.ytd-watch-metadata'
  3621.                   ).innerText;
  3622.                   enlaceDescarga.download = `${titleVideo}_maxresdefault.jpg`;
  3623.                   enlaceDescarga.click();
  3624.                   
  3625.                   URL.revokeObjectURL(imageUrlObject);
  3626.                 } else {
  3627.                   console.log(
  3628.                     'La imagen no excede los 20 KB. No se descargará.'
  3629.                   );
  3630.                 }
  3631.               })
  3632.               .catch((error) => {
  3633.                 alert('No found image');
  3634.                 console.error('Error al obtener la imagen:', error);
  3635.               });
  3636.           }
  3637.         };
  3638.       }
  3639.       // for background image file photo higt quality
  3640.       // const fileInput = $id('background_image');
  3641.       // const backgroundDiv = $e('ytd-app');
  3642.  
  3643.       // const storedImage = localStorage.getItem('backgroundImage');
  3644.       // if (storedImage) {
  3645.       //   backgroundDiv.style = `background-size: contain; background-repeat: repeat; background-image: url(${storedImage}) !important`;
  3646.       // }
  3647.  
  3648.       // fileInput.addEventListener('change', (event) => {
  3649.       //   const file = event.target.files[0];
  3650.       //   if (file) {
  3651.       //     const reader = new FileReader();
  3652.       //     reader.onload = function (e) {
  3653.       //       const imageUrl = e.target.result;
  3654.       //       localStorage.setItem('backgroundImage', imageUrl);
  3655.       //       backgroundDiv.style.backgroundImage = `url(${imageUrl})`;
  3656.       //     };
  3657.       //     reader.readAsDataURL(file);
  3658.       //   }
  3659.       // });
  3660.  
  3661.  
  3662.       const externalLink = $e('.external_link');
  3663.       if (externalLink != undefined) {
  3664.         externalLink.onclick = () => {
  3665.           const parametrosURL = new URLSearchParams(window.location.search); // Url parametros
  3666.           let enlace;
  3667.           enlace = parametrosURL.get('v');
  3668.           window.open(
  3669.             `https://www.y2mate.com/es/convert-youtube/${enlace}`,
  3670.             'popUpWindow',
  3671.             'height=800,width=1000,left=50%,top=100,resizable=no,scrollbars=yes,toolbar=no,menubar=yes,location=no,directories=yes, status=no'
  3672.           );
  3673.         };
  3674.       }
  3675.       const viewExternalLink = $e('.view_external_link');
  3676.       if (viewExternalLink != undefined) {
  3677.         viewExternalLink.onclick = () => {
  3678.           $e('video').click();
  3679.           const parametrosURL = new URLSearchParams(window.location.search); // Url parametros
  3680.           let enlace;
  3681.           enlace = parametrosURL.get('v');
  3682.           window.open(
  3683.             `https://www.youtube.com/embed/${enlace}?rel=0&controls=2&color=white&iv_load_policy=3&showinfo=0&modestbranding=1&autoplay=1`
  3684.           );
  3685.         };
  3686.       }
  3687.       const viewPictureToPicture = $e(
  3688.         '.video_picture_to_picture'
  3689.       );
  3690.       if (viewPictureToPicture != undefined) {
  3691.         viewPictureToPicture.onclick = () => {
  3692.           const video = $e('video');
  3693.           if ('pictureInPictureEnabled' in document) {
  3694.             if (!document.pictureInPictureElement) {
  3695.         
  3696.               video
  3697.                 .requestPictureInPicture()
  3698.                 .then(() => {
  3699.                 })
  3700.                 .catch((error) => {
  3701.                   console.error(
  3702.                     'Error al activar el modo Picture-in-Picture:',
  3703.                     error
  3704.                   );
  3705.                 });
  3706.             } else {
  3707.               // video picture
  3708.             }
  3709.           } else {
  3710.             alert('Picture-in-Picture not supported');
  3711.           }
  3712.         };
  3713.  
  3714.         // Filtro de pantalla
  3715.         if (formularioButtons != undefined) {
  3716.           formularioButtons.addEventListener('input', function () {
  3717.             if (
  3718.               $e('#cinematics > div') != undefined ||
  3719.               videoFull != undefined
  3720.             ) {
  3721.               $e('#ojosprotect').style.backgroundColor =
  3722.                 formularioButtons.value;
  3723.             }
  3724.           });
  3725.         }
  3726.         clearInterval(renderizarButtons);
  3727.       }
  3728.  
  3729.       const checked_updates = $e('.checked_updates');
  3730.  
  3731.       if (checked_updates != undefined) {
  3732.         checked_updates.onclick = () => {
  3733.           window.open(
  3734.             `https://update.greatest.deepsurf.us/scripts/460680/Youtube%20Tools%20All%20in%20one%20local%20download%20mp3%20mp4%20HIGT%20QUALITY%20return%20dislikes%20and%20more.user.js`
  3735.           );
  3736.         };
  3737.       }
  3738.  
  3739.       const screenShotVideo = $e('.screenshot_video');
  3740.       if (screenShotVideo != undefined) {
  3741.         screenShotVideo.onclick = () => {
  3742.           const video = $e('video');
  3743.           const canvas = $cl('canvas');
  3744.           canvas.width = video.videoWidth;
  3745.           canvas.height = video.videoHeight;
  3746.           const context = canvas.getContext('2d');
  3747.           context.drawImage(video, 0, 0, canvas.width, canvas.height);
  3748.           const imagenURL = canvas.toDataURL('image/png');
  3749.           const enlaceDescarga = $cl('a');
  3750.           enlaceDescarga.href = imagenURL;
  3751.           const titleVideo = $e(
  3752.             'h1.style-scope.ytd-watch-metadata'
  3753.           ).innerText;
  3754.           enlaceDescarga.download = `${video.currentTime.toFixed(
  3755.             0
  3756.           )}s_${titleVideo}.png`;
  3757.           enlaceDescarga.click();
  3758.         };
  3759.       } else {
  3760.         const containerButtons = $e('.containerButtons');
  3761.  
  3762.         if (containerButtons != undefined) {
  3763.           containerButtons.innerHTML = '';
  3764.         }
  3765.       }
  3766.       clearInterval(renderizarButtons);
  3767.     }
  3768.  
  3769.  
  3770.  
  3771.  
  3772.   console.log('Script en ejecución by: DeveloperMDCM');
  3773.   const HEADER_STYLE = 'color: #F00; font-size: 24px; font-family: sans-serif;';
  3774.   const MESSAGE_STYLE = 'color: #00aaff; font-size: 16px; font-family: sans-serif;';
  3775.   const CODE_STYLE = 'font-size: 14px; font-family: monospace;';
  3776.  
  3777.   console.log(
  3778.     '%cYoutube Tools Extension NEW UI\n' +
  3779.       '%cRun %c(v2.3.4.2)\n' +
  3780.       'By: DeveloperMDCM.',
  3781.     HEADER_STYLE,
  3782.     CODE_STYLE,
  3783.     MESSAGE_STYLE
  3784.   );
  3785.  
  3786.   if (!localStorage.getItem('notification-developerMDCM')) {
  3787.     Notify('info', 'Youtube Tools by: DeveloperMDCM :)');
  3788.     localStorage.setItem('notification-developerMDCM', true);
  3789.   }
  3790.  
  3791.  
  3792.  
  3793.  
  3794.  
  3795.  
  3796.   // Add event listeners to all inputs
  3797.   const inputs = $m('input');
  3798.   inputs.forEach((input) => {
  3799.     input.addEventListener('change', applySettings);
  3800.     if (input.type === 'range') {
  3801.       input.addEventListener('change', () => {
  3802.         updateSliderValues();
  3803.         applySettings();
  3804.       });
  3805.     }
  3806.   });
  3807.  
  3808.   // Export configuration
  3809.  
  3810. //   Settings saved
  3811. //   const settings = GM_getValue('ytSettingsMDCM', '{}');
  3812. //   $id('config-data').value = settings;
  3813.  
  3814.   $id('export-config').addEventListener('click', () => {
  3815.     const settings = GM_getValue('ytSettingsMDCM', '{}');
  3816.     $id('config-data').value = settings;
  3817.     const configData = settings;
  3818.     try {
  3819.       JSON.parse(configData); // Validate JSON
  3820.       GM_setValue('ytSettingsMDCM', configData);
  3821.       setTimeout(() => {
  3822.         Notify('success', 'Configuration export successfully!');
  3823.       }, 1000);
  3824.     } catch (e) {
  3825.       Notify('error', 'Invalid configuration data. Please check and try again.');
  3826.     }
  3827.   });
  3828.   // Import configuration
  3829.   $id('import-config').addEventListener('click', () => {
  3830.     const configData = $id('config-data').value;
  3831.     try {
  3832.       JSON.parse(configData); // Validate JSON
  3833.       GM_setValue('ytSettingsMDCM', configData);
  3834.       setTimeout(() => {
  3835.         Notify('success', 'Configuration imported successfully!');
  3836.         window.location.reload();
  3837.       }, 1000);
  3838.       window.location.reload();
  3839.     } catch (e) {
  3840.       Notify('error', 'Invalid configuration data. Please check and try again.');
  3841.     }
  3842.   });
  3843.   panel.style.display = 'none';
  3844.  
  3845.   // var for wave
  3846.   let currentVideo = null;
  3847.   
  3848.   let waveStyle = 'dinamica';
  3849.   let audioCtx = null;
  3850.   let analyser = null;
  3851.   let source = null;
  3852.   let animationId = null;
  3853.   let canvas = null;
  3854.   let ctx = null;
  3855.   let controlPanel = null;
  3856.   let bufferLength = 0;
  3857.   let dataArray = null;
  3858.   let smoothedData = [];
  3859.   let isSetup = false;
  3860.   const smoothingFactor = 0.05;
  3861.   const canvasHeight = 240;
  3862.   const scale = canvasHeight / 90;
  3863.   
  3864.   const PROCESSED_FLAG = 'wave_visualizer_processed';
  3865.   // Load saved settings
  3866.   // Visible element DOM
  3867.   function checkElement(selector, callback) {
  3868.     const interval = setInterval(() => {
  3869.       if ($e(selector)) {
  3870.         clearInterval(interval);
  3871.         callback();
  3872.       }
  3873.     }, 100);
  3874.   }
  3875.  
  3876.   const checkActiveWave = $id('wave-visualizer-toggle');
  3877.   checkActiveWave.addEventListener('change', () => {
  3878.     const waveVisualizer = $e('#wave-visualizer-toggle');
  3879.     if (waveVisualizer.checked) {
  3880.       Notify('success', 'Wave visualizer enabled');
  3881.     } else {
  3882.       hideCanvas();
  3883.       Notify('success', 'Wave visualizer disabled realod page');
  3884.       setTimeout(() => {
  3885.         window.location.reload();
  3886.       }, 1000);
  3887.     }
  3888.   });
  3889.  
  3890.   checkElement('ytd-topbar-menu-button-renderer', loadSettings);
  3891.   // validate change url SPA youtube
  3892.   document.addEventListener('yt-navigate-finish', () => {
  3893.     if (!document.location.href.includes('watch')) {    
  3894.       hideCanvas();
  3895.     }
  3896.     });
  3897. })();