☰

Youtube 工具 多合一本地下載 MP4、MP3

Youtube 工具 多合一本地下載 mp4、MP3

当前为 2024-09-18 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name Youtube Tools
  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 BEST YOUTUBE TOOLS
  71. // @description Download music with mp3 or mp4 with no ads!
  72. // @version      2.0!
  73. // @author       𝓘.𝓢𝓚
  74. // @match        https://*.youtube.com/*
  75. // @exclude      *://music.youtube.com/*
  76. // @exclude      *://*.music.youtube.com/*
  77. // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  78. // @grant        GM_info
  79. // @grant        GM_addStyle
  80. // @grant        GM_setValue
  81. // @grant        GM_getValue
  82. // @grant        unsafeWindow
  83. // @run-at       document-end
  84. // @compatible chrome
  85. // @compatible firefox
  86. // @compatible opera
  87. // @compatible safari
  88. // @compatible edge
  89. // @license MIT
  90. // @namespace https://github.com/DeveloperMDCM/
  91. // ==/UserScript==
  92.  
  93. (function () {
  94.   'use strict';
  95.   let validoUrl = document.location.href;
  96.   const $e = (el) => document.querySelector(el); // any element
  97.   const $id = (el) => document.getElementById(el); // element by id
  98.   const $m = (el) => document.querySelectorAll(el); // multiple all elements
  99.   const $cl = (el) => document.createElement(el); // create element
  100.   const $sp = (el, pty) => document.documentElement.style.setProperty(el, pty); // set property variable css
  101.   const $ap = (el) => document.body.appendChild(el); // append element
  102.   const apiDislikes = "https://returnyoutubedislikeapi.com/Votes?videoId="; // Api dislikes
  103.  
  104.  
  105.   function FormatterNumber(num, digits) {
  106.     const lookup = [
  107.       {
  108.         value: 1,
  109.         symbol: '',
  110.       },
  111.       {
  112.         value: 1e3,
  113.         symbol: ' K',
  114.       },
  115.       {
  116.         value: 1e6,
  117.         symbol: ' M',
  118.       },
  119.     ];
  120.     const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
  121.     const item = lookup
  122.       .slice()
  123.       .reverse()
  124.       .find((item) => {
  125.         return num >= item.value;
  126.       });
  127.     return item
  128.       ? (num / item.value).toFixed(digits).replace(rx, '$1') + item.symbol
  129.       : '0';
  130.   }
  131.  
  132.   function paramsVideoURL() {
  133.     const parametrosURL = new URLSearchParams(window.location.search); // Url parametros
  134.     return parametrosURL.get('v');
  135.   }
  136.  
  137. //   Dislikes video
  138.   async function videoDislike() {
  139.  
  140.     validoUrl = document.location.href;
  141.  
  142.     const validoVentana = $e('#below > ytd-watch-metadata > div');
  143.     if (validoVentana != undefined && document.location.href.split('?v=')[0].includes('youtube.com/watch')) {
  144.         validoUrl = paramsVideoURL();
  145.         const urlShorts = `${apiDislikes}${validoUrl}`;
  146.       try {
  147.         const respuesta = await fetch(urlShorts);
  148.         const datosShort = await respuesta.json();
  149.         const { dislikes } = datosShort;
  150.         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');
  151.         if (dislikes_content !== undefined) {
  152.           dislikes_content.style = 'width: 90px';
  153.           dislikes_content.innerHTML = `
  154.             <svg class="svg-dislike-icon" 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="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>
  155.             ${FormatterNumber(dislikes, 0)}`;
  156.         }
  157.  
  158.       } catch (error) {
  159.         console.log(error);
  160.       }
  161.     }
  162.   }
  163.  
  164.   // dislikes shorts
  165.   async function shortDislike() {
  166.     validoUrl = document.location.href;
  167.     const validoVentanaShort = $m(
  168.       '#dislike-button > yt-button-shape > label > div > span'
  169.     );
  170.     if (validoVentanaShort != undefined && document.location.href.split('/')[3] === 'shorts') {
  171.       validoUrl = document.location.href.split('/')[4];
  172.       const urlShorts = `${apiDislikes}${validoUrl}`;
  173.       try {
  174.         const respuesta = await fetch(urlShorts);
  175.         const datosShort = await respuesta.json();  
  176.         const { dislikes } = datosShort;
  177.         for (let i = 0; i < validoVentanaShort.length; i++) {
  178.           validoVentanaShort[i].textContent = `${FormatterNumber(
  179.             dislikes,
  180.             0
  181.           )}`;
  182.         }
  183.       } catch (error) {
  184.         console.log(error);
  185.       }
  186.     }
  187.   }
  188.  
  189.   // Url change in second load
  190.   let prevUrl;
  191.   let showDislikes = false;
  192.  
  193.   setInterval(() => {
  194.     const svgDislike = $e('.svg-dislike-ico'); // Check svg in dom
  195.     const currUrl = window.location.href;
  196.     if (prevUrl !== undefined && currUrl !== prevUrl && !svgDislike && showDislikes) {
  197.       setTimeout(async() => {
  198.             await videoDislike();
  199.             await shortDislike();
  200.       },2000)
  201.     }
  202.     prevUrl = currUrl;
  203.   }, 1000);
  204.  
  205.  
  206.  
  207.   // Create a Trusted Types policy
  208.   const policy = window.trustedTypes?.createPolicy('default', {
  209.     createHTML: (input) => input,
  210.   });
  211.  
  212.  
  213.   // Styles for our enhancement panel
  214.   GM_addStyle(`
  215.   #cinematics {
  216.     position: absolute !important;
  217.     width: 90vw !important;
  218.     height: 100vh ;
  219.   }
  220.     #cinematics div {
  221.         position: fixed;
  222.       inset: 0px;
  223.       pointer-events: none;
  224.       transform: scale(1.5, 2);
  225.   }
  226.       #cinematics > div > div > canvas:nth-child(1), #cinematics > div > div > canvas:nth-child(2) {
  227.    position: absolute !important;
  228.     width: 90vw !important;
  229.     height: 100vh ;
  230.       }
  231.  
  232.     .html5-video-player.unstarted-mode {
  233.     background-image: url('https://avatars.githubusercontent.com/u/54366580?v=4');
  234.     background-repeat: no-repeat;
  235.     background-position: 50% 50%;
  236.     display: flex;
  237.     justify-content: center;
  238.     align-items: center;
  239.     }
  240.         #yt-enhancement-panel {
  241.             position: fixed;
  242.             top: 60px;
  243.             right: 20px;
  244.             background-color: var(--yt-enhance-menu-bg, #ffffff);
  245.             color: var(--yt-enhance-menu-text, #000000);
  246.             border: 1px solid #cccccc;
  247.             border-radius: 8px;
  248.             padding: 15px;
  249.             z-index: 9999;
  250.             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  251.             width: 300px;
  252.             max-height: 80vh;
  253.             overflow-y: auto;
  254.             font-size: var(--yt-enhance-menu-font-size, 14px);
  255.         }
  256.         #yt-enhancement-panel h3 {
  257.             margin-top: 0;
  258.             color: #ff0000;
  259.         }
  260.         .enhancement-option {
  261.             margin-bottom: 10px;
  262.         }
  263.         .color-picker {
  264.             width: 100%;
  265.         }
  266.         .slider {
  267.             width: 100%;
  268.         }
  269.          #toggle-panel {
  270.             position: fixed;
  271.             top: 10px;
  272.             right: 180px;
  273.             z-index: 10000;
  274.             color: white;
  275.             padding: 5px;
  276.             border: none;
  277.             cursor: pointer;
  278.             display: flex;
  279.             justify-content: center;
  280.             transition: all 0.5s ease;
  281.             width: 43px;
  282.             border-radius: 100px;
  283.         }
  284.              #toggle-panel:hover {
  285.              background-color: #fff;
  286.              border-radius: 100px;
  287.              opacity: 1 !important;
  288.         }
  289.         #icon-menu-settings {
  290.         width: 24px;
  291.         height: 24px;
  292.         cursor: pointer;
  293.         user-select: none;
  294.         }
  295.  
  296.         .tab-buttons {
  297.             display: flex;
  298.             justify-content: space-between;
  299.             margin-bottom: 15px;
  300.         }
  301.         .tab-button {
  302.             background-color: #f0f0f0;
  303.             border: none;
  304.             padding: 5px 10px;
  305.             cursor: pointer;
  306.             border-radius: 4px;
  307.         }
  308.         .tab-button.active {
  309.             background-color: #ff0000;
  310.             color: white;
  311.         }
  312.         .tab-content {
  313.             display: none;
  314.         }
  315.         .tab-content.active {
  316.             display: block;
  317.         }
  318.         #import-export {
  319.             margin-top: 15px;
  320.         }
  321.         #import-export textarea {
  322.             width: 100%;
  323.             height: 100px;
  324.         }
  325.         #menu-settings-icon {
  326.             cursor: pointer;
  327.             float: right;
  328.             font-size: 20px;
  329.         }
  330.         .theme-option {
  331.             margin-bottom: 15px;
  332.         }
  333.         .theme-option label {
  334.             display: flex;
  335.             align-items: center;
  336.         }
  337.        .theme-option {
  338.     position: relative;
  339.     width: auto;
  340.     margin-bottom: 10px;
  341.     padding: 10px;
  342.     border-radius: 4px;
  343.     cursor: pointer;
  344. }
  345.  
  346. .theme-preview {
  347.     position: absolute;
  348.     top: 0;
  349.     left: 0;
  350.     right: 0;
  351.     bottom: 0;
  352.     border-radius: 10px;
  353.     border: 1px solid #000;
  354.     z-index: 1;
  355. }
  356.  
  357. .theme-option input[type="radio"] {
  358.     position: relative;
  359.     z-index: 2;
  360.     margin-right: 10px;
  361.     cursor: pointer;
  362. }
  363.  
  364. .theme-name {
  365.     position: relative;
  366.     z-index: 2;
  367.     font-size: 15px;
  368.     color: #fff;
  369. }
  370.  
  371. .theme-option label {
  372.     display: flex;
  373.     align-items: center;
  374.     width: 100%;
  375.     position: relative;
  376.     z-index: 2;
  377. }
  378.  
  379.   .buttons-tranlate {
  380.         background: #000;
  381.         font-size: 10px;
  382.         border: none;
  383.         color: #fbf4f4 !important;
  384.         padding: 3px 0;
  385.         margin-left: 10px;
  386.         width: 70px;
  387.         border-radius: 10px;}
  388.         .buttons-tranlate:hover {
  389.         cursor: pointer;
  390.         background-color: #6b6b6b;}
  391.  
  392.          button.botones_div {
  393.       margin: 0;
  394.       padding: 0;
  395.  
  396.     }
  397.  
  398.     button:hover {
  399.       color: #ec3203;
  400.     }
  401.  
  402.         #eyes {
  403.       opacity: 0;
  404.       position: absolute;
  405.       height: 24px;
  406.       left: 0;
  407.       width: 24px;
  408.     }
  409.  
  410.     /* width */
  411.     ::-webkit-scrollbar {
  412.       width: 4px;
  413.       height: 10px;
  414.     }
  415.  
  416.     /* Track */
  417.     ::-webkit-scrollbar-track {
  418.       background: ##d5d5d5;
  419.  
  420.     }
  421.  
  422.     /* Handle */
  423.     ::-webkit-scrollbar-thumb {
  424.       background: #000;
  425.  
  426.     }
  427.  
  428.     .containerButtons {
  429.       display: flex;
  430.       justify-content: center;
  431.       align-items: center;
  432.       flex-wrap: wrap;
  433.       gap: 10px;
  434.     }
  435.       #meta.ytd-playlist-panel-video-renderer {
  436.     min-width: 0;
  437.     padding: 0 8px;
  438.     display: flexbox;
  439.     display: flex;
  440.     flex-direction: column-reverse;
  441.     flex: 1;
  442.     flex-basis: 0.000000001px;
  443. }
  444.  
  445.     .containerall {
  446.         display: flex;
  447.     align-items: center;
  448.     justify-content: center;
  449.     width: 50%;
  450.     margin: auto;
  451. }
  452.     }
  453.     .container .botoncalidades {
  454.       margin: 3px 2px;
  455.       width: 24.6%;
  456.     }
  457.  
  458.     .botoncalidades:first-child {
  459.       background-color: #0af;
  460.     }
  461.  
  462.     .botoncalidades:last-child {
  463.       background-color: red;
  464.       width: 100px;
  465.     }
  466.  
  467.     .selectcalidades,
  468.     .botoncalidades,
  469.     .selectcalidadesaudio {
  470.       width: 50%;
  471.       height: 27.8px;
  472.       background-color: #fff;
  473.       color: #000;
  474.       font-size: 25px;
  475.       text-align: center;
  476.       border: none;
  477.       font-size: 20px;
  478.       margin: 2px 2px;
  479.     }
  480.  
  481.     .botoncalidades {
  482.       width: 70px;
  483.       height: 30px;
  484.       background-color: rgb(4, 156, 22);
  485.       border: 0px solid #000;
  486.       color: #fff;
  487.       font-size: 20px;
  488.       border-radius: 10px;
  489.       margin: 2px 2px;
  490.     }
  491.  
  492.     .botoncalidades:hover,
  493.     .bntcontainer:hover {
  494.       cursor: pointer;
  495.     }
  496.  
  497.    .ocultarframe,
  498.     .ocultarframeaudio {
  499.       display: none;
  500.     }
  501.       .checked_updates {
  502.       cursor: pointer;
  503.       }
  504.     `);
  505.  
  506.   // botons bottom video player
  507.  
  508.   const thumbnailVideo = `
  509.   <button title="Image video" class="botones_div" type="button" id="imagen">
  510.  
  511.   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-photo-down" width="24"
  512.     height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
  513.     stroke-linecap="round" stroke-linejoin="round">
  514.     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  515.     <path d="M15 8h.01"></path>
  516.     <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>
  517.     <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l4 4"></path>
  518.     <path d="M14 14l1 -1c.653 -.629 1.413 -.815 2.13 -.559"></path>
  519.     <path d="M19 16v6"></path>
  520.     <path d="M22 19l-3 3l-3 -3"></path>
  521.   </svg>
  522. </button>
  523.   `;
  524.  
  525.   const modeReverse = `
  526.   <button title="Reverse" class="botones_div" type="button" id="invertir">
  527.   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrows-diff" width="24"
  528.     height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
  529.     stroke-linecap="round" stroke-linejoin="round">
  530.     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  531.     <path d="M11 16h10"></path>
  532.     <path d="M11 16l4 4"></path>
  533.     <path d="M11 16l4 -4"></path>
  534.     <path d="M13 8h-10"></path>
  535.     <path d="M13 8l-4 4"></path>
  536.     <path d="M13 8l-4 -4"></path>
  537.   </svg>
  538. </button>
  539.   `;
  540.  
  541.   const filterEyes = `
  542.  
  543.   <div style="position:relative; ">
  544.   <button title="Filter eyes" class="botones_div" type="button">
  545.     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brightness-half"
  546.       width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
  547.       fill="none" stroke-linecap="round" stroke-linejoin="round">
  548.       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  549.       <path d="M12 9a3 3 0 0 0 0 6v-6z"></path>
  550.       <path
  551.         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">
  552.       </path>
  553.     </svg>
  554.     <input id="eyes" list="presetColors" type="color" value="#ffffff">
  555.   <datalist id="presetColors">
  556.     <option value="#000000" />
  557.     <option value="#fbff00" />
  558.     <option value="#ff0000" />
  559.     <option value="#00ff00" />
  560.     <option value="#0000ff" />
  561.   </datalist>
  562.   <div id="ojosprotect"
  563.   style="position: fixed; pointer-events: none; width: 100%; height: 100%; left: 0px; top: 0px; opacity: 0.2; z-index: 10; display: block;">
  564.   </div>
  565. </div>
  566. </button>
  567.   `;
  568.  
  569.   const resetButton = `
  570.   <button title="reset" class="botones_div" type="button" id="reset_button">
  571.   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-power" width="24"
  572.     height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
  573.     stroke-linecap="round" stroke-linejoin="round">
  574.     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  575.     <path d="M7 6a7.75 7.75 0 1 0 10 0"></path>
  576.     <path d="M12 4l0 8"></path>
  577.   </svg>
  578. </button>
  579.   `;
  580.  
  581.   const repeatVideo = `
  582.   <button title="Repeat video" class="botones_div" type="button" id="repeatvideo">
  583.  
  584.   <svg  xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-repeat" width="24"
  585.     height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
  586.     stroke-linecap="round" stroke-linejoin="round">
  587.     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  588.     <path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"></path>
  589.     <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path>
  590.   </svg>
  591. </button>
  592.   `;
  593.  
  594.   const downloadMp4Mp3 = `
  595.   <button title="MP4" type="button" class="btn1 botones_div">
  596.   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-download"
  597.     width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
  598.     stroke-linecap="round" stroke-linejoin="round">
  599.     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  600.     <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
  601.     <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>
  602.     <path d="M12 17v-6"></path>
  603.     <path d="M9.5 14.5l2.5 2.5l2.5 -2.5"></path>
  604.   </svg>
  605. </button>
  606. <button title="MP3" type="button" class="btn2 botones_div">
  607.  
  608.   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-music" width="24"
  609.     height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
  610.     stroke-linecap="round" stroke-linejoin="round">
  611.     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  612.     <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
  613.     <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>
  614.     <path d="M11 16m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
  615.     <path d="M12 16l0 -5l2 1"></path>
  616.   </svg>
  617. </button>
  618. <button title="Close" type="button" class="btn3 botones_div">
  619. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-x" width="24"
  620.   height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
  621.   stroke-linecap="round" stroke-linejoin="round">
  622.   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  623.   <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
  624.   <path d="M10 10l4 4m0 -4l-4 4"></path>
  625. </svg>
  626. </button>
  627.   `;
  628.  
  629.   const donwloadExternal = `
  630.  
  631.   <button title="External Download" type="button" class="external_link botones_div">
  632.  
  633.   <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">
  634.       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  635.       <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>
  636.       <path d="M11 13l9 -9"></path>
  637.       <path d="M15 4h5v5"></path>
  638.    </svg>
  639. </button>
  640.  
  641.   `;
  642.   const viewExternalVideo = `
  643.  
  644.   <button title="view External no cookie" type="button" class="view_external_link botones_div">
  645.  
  646.   <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>
  647. </button>
  648.  
  649.   `;
  650.  
  651.   const pictureToPicture = `
  652.   <button title="Picture to picture" type="button" class="video_picture_to_picture botones_div">
  653.  
  654.   <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>
  655. </button>
  656.  
  657.   `;
  658.   const screenShot = `
  659.   <button title="Screenshot video" type="button" class="screenshot_video botones_div">
  660.   <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>
  661. </button>
  662.  
  663.   `;
  664.  
  665.   const checkUpdates = `
  666.   <button title="Check new updates" type="button" class="checked_updates botones_div">
  667.   <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>
  668. </button>
  669.   `;
  670.  
  671.  
  672.   const menuBotones = `
  673. <main>
  674. <div class="container">
  675. <form>
  676.   <div class="containerButtons">
  677.   ${thumbnailVideo}
  678.   ${modeReverse}
  679.   ${filterEyes}
  680.   ${resetButton}
  681.   ${repeatVideo}
  682.   ${downloadMp4Mp3}
  683.   ${donwloadExternal}
  684.   ${viewExternalVideo}
  685.   ${pictureToPicture}
  686.   ${screenShot}
  687.   ${checkUpdates}
  688.   </div>
  689.   <div>
  690.   </div>
  691. </form>
  692.  
  693. </div>
  694. <div class="content_collapsible_colors" style="margin-top: 10px">
  695.  
  696. <form class="formulariodescarga" action="">
  697. <div class="containerall">
  698. <select class="selectcalidades  ocultarframe" required>
  699.   <option selected disabled>Calidad del video / Quality video</option>
  700.   <option value="360">360p Mp4</option>
  701.   <option value="480">480p Mp4</option>
  702.   <option value="720">720p HD Mp4 Default</option>
  703.   <option value="1080">1080p FULL HD Mp4</option>
  704.   <option value="4k">2160p 4K WEBM</option>
  705.   <option value="8k">4320p 8K WEBM</option>
  706.   </select>
  707.   <iframe id="descargando"  style="z-index: 99; border: none; height: 27.4px; width: 50%;"  class="containerall ocultarframe" src="" frameborder="0"></iframe>
  708.  
  709. </div>
  710. </form>
  711. <form class="formulariodescargaaudio" action="">
  712. <div class="containerall">
  713. <select class="selectcalidadesaudio ocultarframeaudio" required>
  714.   <option selected disabled>Calidad del Audio / Quality Audio</option>
  715.   <option value="flac">Audio FLAC UHQ</option>
  716.   <option value="wav">Audio WAV UHQ</option>
  717.   <option value="mp3">Audio MP3 Default</option>
  718.   <option value="m4a">Audio M4A</option>
  719.   <option value="aac">Audio AAC</option>
  720.   <option value="opus">Audio OPUS</option>
  721.   <option value="ogg">Audio OGG</option>
  722.   </select>
  723.   <iframe id="descargandomp3"  style="z-index: 99; border: none; height: 27.4px; width: 50%;"  class="containerall ocultarframeaudio" src="" frameborder="0"></iframe>
  724.  
  725.   </iframe>
  726.  
  727. </div>
  728. </form>
  729.   </main>
  730.   </html>
  731.   `;
  732.  
  733.   // Define themes
  734.   const themes = [
  735.     {
  736.       name: 'Default / Reload Page',
  737.       gradient: '',
  738.       textColor: '',
  739.       raised: '',
  740.       btnTranslate: '',
  741.       CurrentProgressVideo: '',
  742.       videoDuration: '',
  743.       colorIcons: '',
  744.       textLogo: '',
  745.       primaryColor: '',
  746.       secondaryColor: '',
  747.     },
  748.     {
  749.       name: 'Midnight Blue',
  750.       gradient: 'linear-gradient(135deg, #1e3a8a, #3b82f6)',
  751.       textColor: '#ffffff',
  752.       raised: '#f00',
  753.       btnTranslate: '#000',
  754.       CurrentProgressVideo: '#0f0',
  755.       videoDuration: '#fff',
  756.       colorIcons: '#fff',
  757.       textLogo: '#f00',
  758.     },
  759.     {
  760.       name: 'Forest Green',
  761.       gradient: 'linear-gradient(135deg, #14532d, #22c55e)',
  762.       textColor: '#ffffff',
  763.       raised: '#303131',
  764.       btnTranslate: '#000',
  765.       CurrentProgressVideo: '#0f0',
  766.       videoDuration: '#fff',
  767.       colorIcons: '#fff',
  768.       textLogo: '#f00',
  769.     },
  770.     {
  771.       name: 'Sunset Orange',
  772.       gradient: 'linear-gradient(135deg, #7c2d12, #f97316)',
  773.       textColor: '#ffffff',
  774.       raised: '#303131',
  775.       btnTranslate: '#000',
  776.       CurrentProgressVideo: '#0f0',
  777.       videoDuration: '#fff',
  778.       colorIcons: '#fff',
  779.       textLogo: '#f00',
  780.     },
  781.     {
  782.       name: 'Royal Purple',
  783.       gradient: 'linear-gradient(135deg, #4c1d95, #8b5cf6)',
  784.       textColor: '#ffffff',
  785.       raised: '#303131',
  786.       btnTranslate: '#000',
  787.       CurrentProgressVideo: '#0f0',
  788.       videoDuration: '#fff',
  789.       colorIcons: '#fff',
  790.       textLogo: '#f00',
  791.     },
  792.     {
  793.       name: 'Cherry Blossom',
  794.       gradient: 'linear-gradient(135deg, #a9005c, #fc008f)',
  795.       textColor: '#ffffff',
  796.       raised: '#fc008f',
  797.       btnTranslate: '#000',
  798.       CurrentProgressVideo: '#0f0',
  799.       videoDuration: '#fff',
  800.       colorIcons: '#fff',
  801.       textLogo: '#f00',
  802.     },
  803.     {
  804.       name: 'Red Dark',
  805.       gradient: 'linear-gradient(135deg, #790909, #f70131)',
  806.       textColor: '#ffffff',
  807.       raised: '#303131',
  808.       btnTranslate: '#000',
  809.       CurrentProgressVideo: '#0f0',
  810.       videoDuration: '#fff',
  811.       colorIcons: '#fff',
  812.       textLogo: '#f00',
  813.     },
  814.     {
  815.       name: 'Raind ',
  816.       gradient: 'linear-gradient(90deg, #3f5efb 0%, #fc466b) 100%',
  817.       textColor: '#ffffff',
  818.       raised: '#303131',
  819.       btnTranslate: '#000',
  820.       CurrentProgressVideo: '#0f0',
  821.       videoDuration: '#fff',
  822.       colorIcons: '#fff',
  823.       textLogo: '#f00',
  824.     },
  825.     {
  826.       name: 'Neon',
  827.       gradient: 'linear-gradient(273deg, #ee49fd 0%, #6175ff 100%)',
  828.       textColor: '#ffffff',
  829.       raised: '#303131',
  830.       btnTranslate: '#000',
  831.       CurrentProgressVideo: '#0f0',
  832.       videoDuration: '#fff',
  833.       colorIcons: '#fff',
  834.       textLogo: '#f00',
  835.     },
  836.     {
  837.       name: 'Azure',
  838.       gradient: 'linear-gradient(273deg, #0172af 0%, #74febd 100%)',
  839.       textColor: '#ffffff',
  840.       raised: '#303131',
  841.       btnTranslate: '#000',
  842.       CurrentProgressVideo: '#0f0',
  843.       videoDuration: '#fff',
  844.       colorIcons: '#fff',
  845.       textLogo: '#f00',
  846.     },
  847.     {
  848.       name: 'Butterfly',
  849.       gradient: 'linear-gradient(273deg, #ff4060 0%, #fff16a 100%)',
  850.       textColor: '#ffffff',
  851.       raised: '#303131',
  852.       btnTranslate: '#000',
  853.       CurrentProgressVideo: '#0f0',
  854.       videoDuration: '#fff',
  855.       colorIcons: '#fff',
  856.       textLogo: '#f00',
  857.     },
  858.     {
  859.       name: 'Colombia',
  860.       gradient:
  861.         'linear-gradient(106deg, #fbf63f  0%, #0000bb 45%, #ff0000 99%)',
  862.       textColor: '#ffffff',
  863.       raised: '#303131',
  864.       btnTranslate: '#000',
  865.       CurrentProgressVideo: '#0f0',
  866.       videoDuration: '#fff',
  867.       colorIcons: '#fff',
  868.       textLogo: '#f00',
  869.     },
  870.   ];
  871.  
  872.   // Create our enhancement panel
  873.   const panel = $cl('div');
  874.  
  875.   panel.id = 'yt-enhancement-panel';
  876.  
  877.   // Generate theme options HTML
  878.   const themeOptionsHTML = themes
  879.     .map(
  880.       (theme, index) => `
  881.         <label >
  882.           <div class="theme-option">
  883.           <div class="theme-preview" style="background: ${theme.gradient};"></div>
  884.           <input type="radio" name="theme" value="${index}" ${
  885.               index === 0 ? 'checked' : ''
  886.             }>
  887.               <span style="${theme.name === 'Default / Reload Page' ? 'color: red; ' : '' }" class="theme-name">${theme.name}</span>
  888.               </div>
  889.         </label>
  890.     `
  891.     )
  892.     .join('');
  893.  
  894.   // find atribute dark in dom
  895.   const htmlElement = $e('html');
  896.   const isDarkMode = htmlElement.hasAttribute('dark');
  897.   let isDarkModeActive = isDarkMode;
  898.  
  899.  
  900.   // Use Trusted Types to set innerHTML
  901.   const panelHTML = policy
  902.     ? policy.createHTML(`
  903.       <div style="display: flex;justify-content: space-between;align-items: center;gap: 3px;margin-bottom: 10px;">
  904.       <h4 style="display: flex;align-items: center;gap: 10px;">YouTube Tools v2.2.90  <a target="_blank" href="https://github.com/DeveloperMDCM/Youtube-tools-extension">
  905.       <svg style="background-color: white; border-radius: 5px;color: #000;" width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round" ><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
  906.       </a></h4>
  907.       <div style="display: flex; gap: 5px;">
  908.       <span id="menu-settings-icon">⚙️</span>
  909.       <a href="https://update.gf.qytechs.cn/scripts/460680/Youtube%20Tools%20All%20in%20one%20local%20download%20mp3%20mp4%20HIGT%20QUALITY%20return%20dislikes%20and%20more.user.js"
  910.       <span style="cursor: pointer" class="close_menu_settings">❎</span>
  911.       </div>
  912.       </div>
  913.         <div class="tab-buttons">
  914.             <button class="tab-button active" data-tab="general">General</button>
  915.             <button class="tab-button" data-tab="themes">Themes</button>
  916.             <button class="tab-button" data-tab="sidebar">Sidebar</button>
  917.             <button class="tab-button" data-tab="headers">Header</button>
  918.         </div>
  919.         <div id="general" class="tab-content active">
  920.             <div class="enhancement-option">
  921.                 <label>
  922.                     <input type="checkbox" id="hide-comments-toggle"> Hide Comments
  923.                 </label>
  924.             </div>
  925.              <div class="enhancement-option">
  926.                 <label>
  927.                     <input type="checkbox" id="hide-sidebar-toggle"> Hide Sidebar
  928.                 </label>
  929.             </div>
  930.             <div class="enhancement-option">
  931.                 <label>
  932.                     <input type="checkbox" id="autoplay-toggle"> Disable Autoplay
  933.                 </label>
  934.             </div>
  935.             <div class="enhancement-option">
  936.                 <label>
  937.                     <input type="checkbox" id="subtitles-toggle"> Disable Subtitles
  938.                 </label>
  939.             </div>
  940.               <div class="enhancement-option">
  941.                 <label>
  942.                     <input type="checkbox" id="dislikes-toggle"> Show Dislikes / Reload page
  943.                 </label>
  944.             </div>
  945.               <div class="enhancement-option">
  946.                 <label>
  947.                     <input type="checkbox" id="themes-toggle"> Active Themes / Reload page
  948.                 </label>
  949.             </div>
  950.            
  951.              <div class="enhancement-option">
  952.                 <label>Video Player Size: <span id="player-size-value">100</span>%</label>
  953.                 <input type="range" id="player-size-slider" class="slider" min="50" max="150" value="100">
  954.             </div>
  955.         </div>
  956.  
  957.         <div id="themes" class="tab-content" style="height: auto; max-height: 350px; overflow-y: auto;">
  958.         <div class="themes-hidden">
  959.         <h4>Choose a Theme</h4>
  960.         <p>Disable cinematic Lighting</p>
  961.               <label>
  962.           <div class="theme-option">
  963.           <div class="theme-preview" style="background: dark;"></div>
  964.           <input type="radio" name="theme" value="custom">
  965.               <span class="theme-name">Custom</span>
  966.               </div>
  967.               </label>
  968.               <label>
  969.               <div class="theme-option theme-selected-normal">
  970.               <div class="theme-preview" style="background: dark;"></div>
  971.               <input type="radio" name="theme" value="normal">
  972.                   <span class="theme-name">Selected Themes</span>
  973.                   </div>
  974.               </label>
  975.             <p>${isDarkModeActive ? '' : 'activate dark mode to use themes'}</p>
  976.             <div class="themes-options">
  977.               ${themeOptionsHTML}
  978.             </div>
  979.             <div class="theme-custom-options">
  980.             <div class="enhancement-option">
  981.                 <label>Progressbar Video:</label>
  982.                 <input type="color" id="progressbar-color-picker" class="color-picker" value="#ff0000">
  983.             </div>
  984.             <div class="enhancement-option">
  985.                 <label>Background Color:</label>
  986.                 <input type="color" id="bg-color-picker" class="color-picker" value="#000000">
  987.             </div>
  988.             <div class="enhancement-option">
  989.                 <label>Primary Color:</label>
  990.                 <input type="color" id="primary-color-picker" class="color-picker" value="#ffffff">
  991.             </div>
  992.             <div class="enhancement-option">
  993.                 <label>Secondary Color:</label>
  994.                 <input type="color" id="secondary-color-picker" class="color-picker" value="#ffffff">
  995.             </div>
  996.             <div class="enhancement-option">
  997.                 <label>Header Color:</label>
  998.                 <input type="color" id="header-color-picker" class="color-picker" value="#000000">
  999.             </div>
  1000.             <div class="enhancement-option">
  1001.                 <label>Icons Color:</label>
  1002.                 <input type="color" id="icons-color-picker" class="color-picker" value="#ffffff">
  1003.             </div>
  1004.             <div class="enhancement-option">
  1005.                 <label>Menu Color:</label>
  1006.                 <input type="color" id="menu-color-picker" class="color-picker" value="#000000">
  1007.             </div>
  1008.             <div class="enhancement-option">
  1009.                 <label>Line Color Preview:</label>
  1010.                 <input type="color" id="line-color-picker" class="color-picker" value="#ff0000">
  1011.             </div>
  1012.             <div class="enhancement-option">
  1013.                 <label>Time Color Preview:</label>
  1014.                 <input type="color" id="time-color-picker" class="color-picker" value="#ffffff">
  1015.             </div>
  1016.             </div>
  1017.         </div>
  1018.           
  1019.         </div>
  1020.  
  1021.         <div id="sidebar" class="tab-content">
  1022.             <h4>Available in next update</h4>
  1023.         </div>
  1024.         <div id="headers" class="tab-content">
  1025.            <h4>Available in next update</h4>
  1026.         </div>
  1027.         <div id="menu-settings" class="tab-content">
  1028.             <h4 style="margin: 10px 0">Menu Appearance</h4>
  1029.             <div class="enhancement-option">
  1030.                 <label>Menu Background Color:</label>
  1031.                 <input type="color" id="menu-bg-color-picker" class="color-picker" value="#000000">
  1032.             </div>
  1033.             <div class="enhancement-option">
  1034.                 <label>Menu Text Color:</label>
  1035.                 <input type="color" id="menu-text-color-picker" class="color-picker" value="#ff0000">
  1036.             </div>
  1037.         
  1038.         </div>
  1039.         <div id="import-export">
  1040.         <div style="display: flex;width: 100%;justify-content: space-between;">
  1041.         <button id="export-config" style="width: 100%;display: flex;align-items: center;justify-content: center;">Export
  1042.         <svg width="20" height="20"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round" ><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><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 d="M9 15h6" /><path d="M12.5 17.5l2.5 -2.5l-2.5 -2.5" /></svg>
  1043.         </button>
  1044.        <button id="import-config" style="width: 100%;display: flex;align-items: center;justify-content: center;">Import
  1045.         <svg width="20"  height="20"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><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 d="M15 15h-6" /><path d="M11.5 17.5l-2.5 -2.5l2.5 -2.5" /></svg>
  1046.         </button>
  1047.         </div>
  1048.             <textarea id="config-data" placeholder="Paste configuration here to import"></textarea>
  1049.         </div>
  1050.     `)
  1051.     : `
  1052.         <div style="display: flex;justify-content: space-between;align-items: center;gap: 3px;margin-bottom: 10px;">
  1053.       <h4 style="display: flex;align-items: center;gap: 10px;">YouTube Tools v2.2.90  <a target="_blank" href="https://github.com/DeveloperMDCM/Youtube-tools-extension">
  1054.       <svg style="background-color: white; border-radius: 5px;color: #000;" width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round" ><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
  1055.       </a></h4>
  1056.       <div style="display: flex; gap: 5px;">
  1057.       <span id="menu-settings-icon">⚙️</span>
  1058.       <a href="https://update.gf.qytechs.cn/scripts/460680/Youtube%20Tools%20All%20in%20one%20local%20download%20mp3%20mp4%20HIGT%20QUALITY%20return%20dislikes%20and%20more.user.js"
  1059.       <span style="cursor: pointer" class="close_menu_settings">❎</span>
  1060.       </div>
  1061.       </div>
  1062.         <div class="tab-buttons">
  1063.             <button class="tab-button active" data-tab="general">General</button>
  1064.             <button class="tab-button" data-tab="themes">Themes</button>
  1065.             <button class="tab-button" data-tab="sidebar">Sidebar</button>
  1066.             <button class="tab-button" data-tab="headers">Header</button>
  1067.         </div>
  1068.         <div id="general" class="tab-content active">
  1069.             <div class="enhancement-option">
  1070.                 <label>
  1071.                     <input type="checkbox" id="hide-comments-toggle"> Hide Comments
  1072.                 </label>
  1073.             </div>
  1074.              <div class="enhancement-option">
  1075.                 <label>
  1076.                     <input type="checkbox" id="hide-sidebar-toggle"> Hide Sidebar
  1077.                 </label>
  1078.             </div>
  1079.             <div class="enhancement-option">
  1080.                 <label>
  1081.                     <input type="checkbox" id="autoplay-toggle"> Disable Autoplay
  1082.                 </label>
  1083.             </div>
  1084.             <div class="enhancement-option">
  1085.                 <label>
  1086.                     <input type="checkbox" id="subtitles-toggle"> Disable Subtitles
  1087.                 </label>
  1088.             </div>
  1089.               <div class="enhancement-option">
  1090.                 <label>
  1091.                     <input type="checkbox" id="dislikes-toggle"> Show Dislikes / Reload page
  1092.                 </label>
  1093.             </div>
  1094.               <div class="enhancement-option">
  1095.                 <label>
  1096.                     <input type="checkbox" id="themes-toggle"> Active Themes / Reload page
  1097.                 </label>
  1098.             </div>
  1099.            
  1100.              <div class="enhancement-option">
  1101.                 <label>Video Player Size: <span id="player-size-value">100</span>%</label>
  1102.                 <input type="range" id="player-size-slider" class="slider" min="50" max="150" value="100">
  1103.             </div>
  1104.         </div>
  1105.  
  1106.         <div id="themes" class="tab-content" style="height: auto; max-height: 350px; overflow-y: auto;">
  1107.         <div class="themes-hidden">
  1108.         <h4>Choose a Theme</h4>
  1109.         <p>Disable cinematic Lighting</p>
  1110.               <label>
  1111.           <div class="theme-option">
  1112.           <div class="theme-preview" style="background: dark;"></div>
  1113.           <input type="radio" name="theme" value="custom">
  1114.               <span class="theme-name">Custom</span>
  1115.               </div>
  1116.               </label>
  1117.               <label>
  1118.               <div class="theme-option theme-selected-normal">
  1119.               <div class="theme-preview" style="background: dark;"></div>
  1120.               <input type="radio" name="theme" value="normal">
  1121.                   <span class="theme-name">Selected Themes</span>
  1122.                   </div>
  1123.               </label>
  1124.             <p>${isDarkModeActive ? '' : 'activate dark mode to use themes'}</p>
  1125.             <div class="themes-options">
  1126.               ${themeOptionsHTML}
  1127.             </div>
  1128.             <div class="theme-custom-options">
  1129.             <div class="enhancement-option">
  1130.                 <label>Progressbar Video:</label>
  1131.                 <input type="color" id="progressbar-color-picker" class="color-picker" value="#ff0000">
  1132.             </div>
  1133.             <div class="enhancement-option">
  1134.                 <label>Background Color:</label>
  1135.                 <input type="color" id="bg-color-picker" class="color-picker" value="#000000">
  1136.             </div>
  1137.             <div class="enhancement-option">
  1138.                 <label>Primary Color:</label>
  1139.                 <input type="color" id="primary-color-picker" class="color-picker" value="#ffffff">
  1140.             </div>
  1141.             <div class="enhancement-option">
  1142.                 <label>Secondary Color:</label>
  1143.                 <input type="color" id="secondary-color-picker" class="color-picker" value="#ffffff">
  1144.             </div>
  1145.             <div class="enhancement-option">
  1146.                 <label>Header Color:</label>
  1147.                 <input type="color" id="header-color-picker" class="color-picker" value="#000000">
  1148.             </div>
  1149.             <div class="enhancement-option">
  1150.                 <label>Icons Color:</label>
  1151.                 <input type="color" id="icons-color-picker" class="color-picker" value="#ffffff">
  1152.             </div>
  1153.             <div class="enhancement-option">
  1154.                 <label>Menu Color:</label>
  1155.                 <input type="color" id="menu-color-picker" class="color-picker" value="#000000">
  1156.             </div>
  1157.             <div class="enhancement-option">
  1158.                 <label>Line Color Preview:</label>
  1159.                 <input type="color" id="line-color-picker" class="color-picker" value="#ff0000">
  1160.             </div>
  1161.             <div class="enhancement-option">
  1162.                 <label>Time Color Preview:</label>
  1163.                 <input type="color" id="time-color-picker" class="color-picker" value="#ffffff">
  1164.             </div>
  1165.             </div>
  1166.         </div>
  1167.           
  1168.         </div>
  1169.  
  1170.         <div id="sidebar" class="tab-content">
  1171.             <h4>Available in next update</h4>
  1172.         </div>
  1173.         <div id="headers" class="tab-content">
  1174.            <h4>Available in next update</h4>
  1175.         </div>
  1176.         <div id="menu-settings" class="tab-content">
  1177.             <h4 style="margin: 10px 0">Menu Appearance</h4>
  1178.             <div class="enhancement-option">
  1179.                 <label>Menu Background Color:</label>
  1180.                 <input type="color" id="menu-bg-color-picker" class="color-picker" value="#000000">
  1181.             </div>
  1182.             <div class="enhancement-option">
  1183.                 <label>Menu Text Color:</label>
  1184.                 <input type="color" id="menu-text-color-picker" class="color-picker" value="#ff0000">
  1185.             </div>
  1186.         
  1187.         </div>
  1188.         <div id="import-export">
  1189.         <div style="display: flex;width: 100%;justify-content: space-between;">
  1190.         <button id="export-config" style="width: 100%;display: flex;align-items: center;justify-content: center;">Export
  1191.         <svg width="20" height="20"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round" ><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><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 d="M9 15h6" /><path d="M12.5 17.5l2.5 -2.5l-2.5 -2.5" /></svg>
  1192.         </button>
  1193.        <button id="import-config" style="width: 100%;display: flex;align-items: center;justify-content: center;">Import
  1194.         <svg width="20"  height="20"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><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 d="M15 15h-6" /><path d="M11.5 17.5l-2.5 -2.5l2.5 -2.5" /></svg>
  1195.         </button>
  1196.         </div>
  1197.             <textarea id="config-data" placeholder="Paste configuration here to import"></textarea>
  1198.         </div>
  1199.     `;
  1200.  
  1201.   panel.innerHTML = panelHTML;
  1202.   $ap(panel);
  1203.   // Create toggle button
  1204.   const toggleButton = $cl('div');
  1205.   toggleButton.id = 'toggle-panel';
  1206.   const icon = $cl('img');
  1207.   icon.id = 'icon-menu-settings';
  1208.   icon.src =
  1209.     'https://cdn.iconscout.com/icon/premium/png-512-thumb/settings-782-1095915.png?f=webp&w=256';
  1210.  
  1211.   toggleButton.appendChild(icon);
  1212.  
  1213.   // Add panel and toggle button to the page
  1214.   $ap(panel);
  1215.   $ap(toggleButton);
  1216.  
  1217.   // Toggle panel visibility
  1218.   let openMenu = false;
  1219.   toggleButton.addEventListener('click', () => {
  1220.     openMenu = !openMenu;
  1221.     // openMenu
  1222.     //   ? (toggleButton.style.backgroundColor = '#f00')
  1223.     //   : (toggleButton.style.backgroundColor = 'transparent');
  1224.     panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
  1225.   });
  1226.  
  1227.   const close_menu_settings = $e('.close_menu_settings');
  1228.   close_menu_settings.addEventListener('click', () => {
  1229.     openMenu = !openMenu;
  1230.     panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
  1231.   });
  1232.  
  1233.  
  1234.   // Tab functionality
  1235.   const tabButtons = $m('.tab-button');
  1236.   const tabContents = $m('.tab-content');
  1237.  
  1238.   tabButtons.forEach((button) => {
  1239.     button.addEventListener('click', () => {
  1240.       const tabName = button.getAttribute('data-tab');
  1241.       tabButtons.forEach((btn) => btn.classList.remove('active'));
  1242.       tabContents.forEach((content) => content.classList.remove('active'));
  1243.       button.classList.add('active');
  1244.       $id(tabName).classList.add('active');
  1245.     });
  1246.   });
  1247.  
  1248.   // Menu settings icon functionality
  1249.   $id('menu-settings-icon').addEventListener('click', () => {
  1250.     tabButtons.forEach((btn) => btn.classList.remove('active'));
  1251.     tabContents.forEach((content) => content.classList.remove('active'));
  1252.     $id('menu-settings').classList.add('active');
  1253.   });
  1254.  
  1255.   // Function to save settings
  1256.   function saveSettings() {
  1257.     const settings = {
  1258.       theme: $e('input[name="theme"]:checked').value,
  1259.       bgColorPicker: $id('bg-color-picker').value,
  1260.       progressbarColorPicker: $id('progressbar-color-picker').value,
  1261.       primaryColorPicker: $id('primary-color-picker').value,
  1262.       secondaryColorPicker: $id('secondary-color-picker').value,
  1263.       headerColorPicker: $id('header-color-picker').value,
  1264.       iconsColorPicker: $id('icons-color-picker').value,
  1265.       menuColorPicker: $id('menu-color-picker').value,
  1266.       lineColorPicker: $id('line-color-picker').value,
  1267.       timeColorPicker: $id('time-color-picker').value,
  1268.       dislikes: $id('dislikes-toggle').checked,
  1269.       themes: $id('themes-toggle').checked,
  1270.       hideComments: $id('hide-comments-toggle').checked,
  1271.       hideSidebar: $id('hide-sidebar-toggle').checked,
  1272.       disableAutoplay: $id('autoplay-toggle').checked,
  1273.       // cinematicLighting: $id('cinematic-lighting-toggle').checked,
  1274.       disableSubtitles: $id('subtitles-toggle').checked,
  1275.       // fontSize: $id('font-size-slider').value,
  1276.       playerSize: $id('player-size-slider').value,
  1277.       menuBgColor: $id('menu-bg-color-picker').value,
  1278.       menuTextColor: $id('menu-text-color-picker').value,
  1279.       // menuFontSize: $id('menu-font-size-slider').value,
  1280.     };
  1281.  
  1282.     GM_setValue('ytSettingsMDCM', JSON.stringify(settings));
  1283.   }
  1284.  
  1285.  
  1286.  
  1287.   // Function to load settings
  1288.   function loadSettings() {
  1289.     const settings = JSON.parse(GM_getValue('ytSettingsMDCM', '{}'));
  1290.     if (settings.theme) {
  1291.       $e(`input[name="theme"][value="${settings.theme}"]`).checked = true;
  1292.     }
  1293.  
  1294.     $id('bg-color-picker').value = settings.bgColorPicker || '#000000';
  1295.     $id('progressbar-color-picker').value = settings.progressbarColorPicker || '#ff0000';
  1296.     $id('primary-color-picker').value = settings.primaryColorPicker || '#ffffff';
  1297.     $id('secondary-color-picker').value = settings.secondaryColorPicker || '#ffffff';
  1298.     $id('header-color-picker').value = settings.headerColorPicker || '#000';
  1299.     $id('icons-color-picker').value = settings.iconsColorPicker || '#ffffff';
  1300.     $id('menu-color-picker').value = settings.menuColorPicker || '#000';
  1301.     $id('line-color-picker').value = settings.lineColorPicker || '#ff0000';
  1302.     $id('time-color-picker').value = settings.timeColorPicker || '#ffffff';
  1303.     $id('dislikes-toggle').checked = settings.dislikes || true;
  1304.     $id('themes-toggle').checked = settings.themes || false;
  1305.     $id('hide-comments-toggle').checked = settings.hideComments || false;
  1306.     $id('hide-sidebar-toggle').checked = settings.hideSidebar || false;
  1307.     $id('autoplay-toggle').checked = settings.disableAutoplay || false;
  1308.     // $id('cinematic-lighting-toggle').checked = settings.cinematicLighting || false;
  1309.     $id('subtitles-toggle').checked = settings.disableSubtitles || false;
  1310.     // $id('font-size-slider').value = settings.fontSize || 16;
  1311.     $id('player-size-slider').value = settings.playerSize || 100;
  1312.     $id('menu-bg-color-picker').value = settings.menuBgColor || '#000000';
  1313.     $id('menu-text-color-picker').value = settings.menuTextColor || '#ffffff';
  1314.     // $id('menu-font-size-slider').value = settings.menuFontSize || 14;
  1315.     updateSliderValues();
  1316.  
  1317.     setTimeout(() => {
  1318.       applySettings();
  1319.       if(settings.dislikes) {
  1320.           videoDislike();
  1321.           shortDislike();
  1322.           showDislikes = true;
  1323.       }
  1324.     }, 500);
  1325.   }
  1326.   // Function to update slider values
  1327.   function updateSliderValues() {
  1328.     // $id('font-size-value').textContent = $id('font-size-slider').value;
  1329.     $id('player-size-value').textContent = $id('player-size-slider').value;
  1330.     // $id('menu-font-size-value').textContent = $id('menu-font-size-slider').value;
  1331.   }
  1332.  
  1333.   // Function to apply settings
  1334.   function applySettings() {
  1335.     const formulariodescarga = $e('.formulariodescarga');
  1336.     const formulariodescargaaudio = $e('.formulariodescargaaudio');
  1337.       if (formulariodescarga != undefined) {
  1338.         formulariodescarga.classList.add('ocultarframe');
  1339.         formulariodescargaaudio.classList.add('ocultarframe');
  1340.       }
  1341.     const settings = {
  1342.       theme: $e('input[name="theme"]:checked').value,
  1343.       bgColorPicker: $id('bg-color-picker').value,
  1344.       progressbarColorPicker: $id('progressbar-color-picker').value,
  1345.       primaryColorPicker: $id('primary-color-picker').value,
  1346.       secondaryColorPicker: $id('secondary-color-picker').value,
  1347.       headerColorPicker: $id('header-color-picker').value,
  1348.       iconsColorPicker: $id('icons-color-picker').value,
  1349.       menuColorPicker: $id('menu-color-picker').value,
  1350.       lineColorPicker: $id('line-color-picker').value,
  1351.       timeColorPicker: $id('time-color-picker').value,
  1352.       dislikes: $id('dislikes-toggle').checked,
  1353.       themes: $id('themes-toggle').checked,
  1354.       hideComments: $id('hide-comments-toggle').checked,
  1355.       hideSidebar: $id('hide-sidebar-toggle').checked,
  1356.       disableAutoplay: $id('autoplay-toggle').checked,
  1357.       // cinematicLighting: $id('cinematic-lighting-toggle').checked,
  1358.       disableSubtitles: $id('subtitles-toggle').checked,
  1359.       // fontSize: $id('font-size-slider').value,
  1360.       playerSize: $id('player-size-slider').value,
  1361.       menuBgColor: $id('menu-bg-color-picker').value,
  1362.       menuTextColor: $id('menu-text-color-picker').value,
  1363.       // menuFontSize: $id('menu-font-size-slider').value,
  1364.     };
  1365.  
  1366.  
  1367.     renderizarButtons();
  1368.     function isFullscreen() {
  1369.       return document.fullscreenElement !== null;
  1370.   }
  1371.   
  1372.   
  1373.   document.addEventListener("fullscreenchange", () => {
  1374.     let panel = $e('#toggle-panel');
  1375.       if (isFullscreen()) {
  1376.         panel.style.opacity = 0;
  1377.       } else {
  1378.         panel.style.opacity = 1;
  1379.       }
  1380.   });
  1381.   
  1382.  
  1383.     // Hide comments
  1384.     const commentsSection = $id('comments');
  1385.     if (commentsSection) {
  1386.       commentsSection.style.display = settings.hideComments ? 'none' : 'block';
  1387.     }
  1388.    
  1389.      // Active inactive Themes
  1390.      const themesMenuSection = $e('.themes-hidden');
  1391.      if (themesMenuSection) {
  1392.       themesMenuSection.style.display = settings.themes ? 'block' : 'none';
  1393.      }
  1394.  
  1395.     // Hide sidebar
  1396.     const sidebarSection = $e('#secondary > #secondary-inner');
  1397.  
  1398.     if (sidebarSection) {
  1399.       sidebarSection.classList.add('side-moi');
  1400.     const sidebarSection2 = $e('.side-moi');
  1401.  
  1402.     sidebarSection2.style.display = settings.hideSidebar ? 'none' : 'block';
  1403.     }
  1404.  
  1405.     // Disable autoplay
  1406.     const autoplayToggle = $e('.ytp-autonav-toggle-button');
  1407.     if (autoplayToggle) {
  1408.       const isCurrentlyOn =
  1409.         autoplayToggle.getAttribute('aria-checked') === 'true';
  1410.       if (settings.disableAutoplay && isCurrentlyOn) {
  1411.         autoplayToggle.click();
  1412.       } else if (!settings.disableAutoplay && !isCurrentlyOn) {
  1413.         autoplayToggle.click();
  1414.       }
  1415.     }
  1416.     // Disable subtitles
  1417.     const subtitleToggle = $e('.ytp-subtitles-button');
  1418.     if (subtitleToggle) {
  1419.       const isCurrentlyOn =
  1420.         subtitleToggle.getAttribute('aria-pressed') === 'true';
  1421.       if (settings.disableSubtitles && isCurrentlyOn) {
  1422.         subtitleToggle.click();
  1423.       } else if (!settings.disableSubtitles && !isCurrentlyOn) {
  1424.         subtitleToggle.click();
  1425.       }
  1426.     }
  1427.     // Disable cinematicLighting
  1428.     // const buttonSettingVideo = $e(".ytp-settings-button");
  1429.     // if(buttonSettingVideo && !settings.cinematicLighting) {
  1430.     //   buttonSettingVideo.click();
  1431.     //   setTimeout(() => {
  1432.     //     buttonSettingVideo.click();
  1433.     //   },50)
  1434.     // }
  1435.     
  1436.  
  1437.     // Adjust font size
  1438.     // $e('body').style.fontSize = `${settings.fontSize}px`;
  1439.  
  1440.     // Adjust player size
  1441.     const player = $e('video');
  1442.     if (player) {
  1443.       player.style.transform = `scale(${settings.playerSize / 100})`;
  1444.     }
  1445.  
  1446.     // Apply menu appearance settings
  1447.     $sp('--yt-enhance-menu-bg', settings.menuBgColor);
  1448.     $sp('--yt-enhance-menu-text', settings.menuTextColor);
  1449.     // $sp('--yt-enhance-menu-font-size', `${settings.menuFontSize}px`);
  1450.  
  1451.     // Apply theme
  1452.     const selectedTheme = themes[settings.theme];
  1453.  
  1454.     const isThemeCustom = $e(`input[name="theme"][value="custom"]`).checked;
  1455.     const isThemeNormal = $e(`input[name="theme"][value="normal"]`).checked;
  1456.     const themeCustomOptions = $e('.theme-custom-options');
  1457.     const themeNormal = $e('.theme-selected-normal');
  1458.     if(isThemeCustom != undefined) {
  1459.       themeNormal.style.display = "block"
  1460.       themeCustomOptions.style.display = "block";
  1461.       $e('.themes-options').style.display = "none";
  1462.     }
  1463.     if(isThemeNormal) {
  1464.       $e(`input[name="theme"][value="custom"]`).checked = false;
  1465.     }
  1466.  
  1467.  
  1468.  
  1469.  
  1470.     function checkDarkMode() {
  1471.       if(settings.themes) {
  1472.         if (isDarkMode && !isThemeCustom) {
  1473.           // Apply theme
  1474.           $e('.themes-options').style.display = "block";
  1475.           themeNormal.style.display = "none";
  1476.           themeCustomOptions.style.display = "none";
  1477.           if(settings.theme === 'normal') {
  1478.             $e(`input[name="theme"][value="0"]`).checked = true;
  1479.             // applySettings();
  1480.           } else {
  1481.   
  1482.             $sp('--yt-spec-base-background', selectedTheme.gradient);
  1483.             $sp('--yt-spec-text-primary', selectedTheme.textColor);
  1484.             $sp('--yt-spec-text-secondary', selectedTheme.textColor);
  1485.             $sp('--yt-spec-menu-background', selectedTheme.gradient);
  1486.             $sp('--yt-spec-icon-inactive', selectedTheme.textColor);
  1487.             $sp('--yt-spec-brand-icon-inactive', selectedTheme.textColor);
  1488.             $sp('--yt-spec-brand-icon-active', selectedTheme.gradient);
  1489.             $sp('--yt-spec-static-brand-red', selectedTheme.gradient); // line current time
  1490.             $sp('--yt-spec-raised-background', selectedTheme.raised);
  1491.             $sp('--yt-spec-static-brand-red', selectedTheme.CurrentProgressVideo);
  1492.             $sp('--yt-spec-static-brand-white', selectedTheme.textColor);
  1493.             $sp('--ytd-searchbox-background', selectedTheme.gradient);
  1494.             $sp('--ytd-searchbox-text-color', selectedTheme.textColor);
  1495.   
  1496.             GM_addStyle(`
  1497.   
  1498.               .botones_div {
  1499.               background-color: transparent;
  1500.               border: none;
  1501.               color: #999999;
  1502.               user-select: none;
  1503.             }
  1504.               .ytp-menuitem[aria-checked=true] .ytp-menuitem-toggle-checkbox {
  1505.               background:  ${selectedTheme.gradient} !important;
  1506.               }
  1507.             #background.ytd-masthead { background: ${selectedTheme.gradient}  !important; }
  1508.             .ytp-swatch-background-color {
  1509.             background: ${
  1510.                selectedTheme.gradient
  1511.             } !important;
  1512.           }
  1513.           #shorts-container, #page-manager.ytd-app {
  1514.             background: ${selectedTheme.gradient.replace(/(#[0-9a-fA-F]{6})/g, `$1${36}`)};
  1515.           }
  1516.             ytd-engagement-panel-title-header-renderer[shorts-panel] #header.ytd-engagement-panel-title-header-renderer {
  1517.             background: ${selectedTheme.gradient}  !important;}
  1518.             .buttons-tranlate {
  1519.              background: ${selectedTheme.btnTranslate} !important;
  1520.             }
  1521.             .badge-shape-wiz--thumbnail-default {
  1522.             color: ${selectedTheme.videoDuration} !important;
  1523.              background: ${selectedTheme.gradient} !important;
  1524.             }
  1525.              #logo-icon {
  1526.              color:  ${selectedTheme.textLogo} !important;
  1527.           }
  1528.           .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--text {
  1529.             color:  ${selectedTheme.iconsColor} !important;
  1530.           }
  1531.           .ytd-topbar-menu-button-renderer #button.ytd-topbar-menu-button-renderer {
  1532.             color:  ${selectedTheme.iconsColor} !important;
  1533.           }
  1534.           .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon {
  1535.             color:  ${selectedTheme.iconsColor} !important;
  1536.           }
  1537.           .ytp-svg-fill {
  1538.             fill:  ${selectedTheme.iconsColor} !important;
  1539.           }
  1540.           #ytp-id-30,#ytp-id-17,#ytp-id-19,#ytp-id-20{
  1541.             fill:  ${selectedTheme.iconsColor} !important;
  1542.           }
  1543.   
  1544.   
  1545.             `);
  1546.           }
  1547.   
  1548.         } else {
  1549.           $sp('--yt-spec-base-background', settings.bgColorPicker);
  1550.           $sp('--yt-spec-text-primary', settings.primaryColorPicker);
  1551.           $sp('--yt-spec-text-secondary', settings.secondaryColorPicker);
  1552.           $sp('--yt-spec-menu-background', settings.menuColorPicker);
  1553.           $sp('--yt-spec-icon-inactive', settings.iconsColorPicker);
  1554.           $sp('--yt-spec-brand-icon-inactive', settings.primaryColorPicker);
  1555.           $sp('--yt-spec-brand-icon-active', settings.primaryColorPicker);
  1556.           $sp('--yt-spec-raised-background', settings.headerColorPicker);
  1557.           $sp('--yt-spec-static-brand-red', settings.lineColorPicker);
  1558.           $sp('--yt-spec-static-brand-white', settings.timeColorPicker);
  1559.           $sp('--ytd-searchbox-background', settings.primaryColorPicker);
  1560.           $sp('--ytd-searchbox-text-color', settings.secondaryColorPicker);
  1561.   
  1562.           GM_addStyle(`
  1563.   
  1564.              .botones_div {
  1565.             background-color: transparent;
  1566.             border: none;
  1567.             color: ${settings.iconsColorPicker} !important;
  1568.             user-select: none;
  1569.           }
  1570.             .ytp-volume-slider-handle:before, .ytp-volume-slider-handle, .ytp-tooltip.ytp-preview:not(.ytp-text-detail){
  1571.               background-color:
  1572.             }
  1573.               #container.ytd-searchbox {
  1574.               color: red !important;
  1575.               }
  1576.             .ytp-menuitem[aria-checked=true] .ytp-menuitem-toggle-checkbox {
  1577.             background:  ${settings.primaryColorPicker} !important;
  1578.             }
  1579.             .yt-spec-icon-shape {
  1580.               display: flex;
  1581.               align-items: center;
  1582.               justify-content: center;
  1583.               width: 100%;
  1584.               height: 100%;
  1585.               color: ${settings.iconsColorPicker} !important;
  1586.           }
  1587.             .ytp-time-current, .ytp-time-separator, .ytp-time-duration {
  1588.               color: ${settings.iconsColorPicker} !important;
  1589.             }
  1590.             #background.ytd-masthead { background: ${settings.headerColorPicker}  !important; }
  1591.             .ytp-swatch-background-color {
  1592.             background: ${
  1593.               settings.progressbarColorPicker
  1594.             } !important;
  1595.           }
  1596.         #shorts-container, #page-manager.ytd-app {
  1597.             background: ${settings.bgColorPicker}36;
  1598.             }
  1599.             ytd-engagement-panel-title-header-renderer[shorts-panel] #header.ytd-engagement-panel-title-header-renderer {
  1600.             background: ${settings.bgColorPicker}  !important;}
  1601.   
  1602.             .badge-shape-wiz--thumbnail-default {
  1603.             color: ${settings.timeColorPicker} !important;
  1604.              background: ${settings.secondaryColor} !important;
  1605.             }
  1606.              #logo-icon {
  1607.              color:  ${settings.primaryColorPicker} !important;
  1608.           }
  1609.           .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--text {
  1610.             color:  ${settings.iconsColorPicker} !important;
  1611.           }
  1612.           .ytd-topbar-menu-button-renderer #button.ytd-topbar-menu-button-renderer {
  1613.             color:  ${settings.iconsColorPicker} !important;
  1614.           }
  1615.           .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon {
  1616.             color:  ${settings.iconsColorPicker} !important;
  1617.           }
  1618.           .ytp-svg-fill {
  1619.             fill:  ${settings.iconsColorPicker} !important;
  1620.           }
  1621.           #ytp-id-30,#ytp-id-17,#ytp-id-19,#ytp-id-20{
  1622.             fill:  ${settings.iconsColorPicker} !important;
  1623.           }
  1624.             `);
  1625.         }
  1626.       } else {
  1627.           GM_addStyle(`
  1628.               .botones_div {
  1629.             background-color: transparent;
  1630.             border: none;
  1631.             color: #ccc !important;
  1632.             user-select: none;
  1633.           }
  1634.             `)
  1635.       }
  1636.     }
  1637.  
  1638.  
  1639.  
  1640.     checkDarkMode();
  1641.     let currentUrl = window.location.href;
  1642.     let urlCheckInterval = setInterval(function () {
  1643.       if (window.location.href !== currentUrl) {
  1644.         currentUrl = window.location.href;
  1645.         checkUrlChange();
  1646.       }
  1647.     }, 1000);
  1648.  
  1649.     function checkUrlChange() {
  1650.       setTimeout(() => {
  1651.         applySettings();
  1652.       }, 1000);
  1653.       clearInterval(urlCheckInterval);
  1654.     }
  1655.  
  1656.     let traducido; // Texto traducido
  1657.     let urlLista; // Url lista
  1658.     async function traductor() {
  1659.       const texto = $m('#content-text');
  1660.       let o = `?client=dict-chrome-ex&sl=auto&tl=${navigator.language}&q=`;
  1661.       for (let i = 0; i < texto.length; i++) {
  1662.         const botonTraducir = $cl('BUTTON');
  1663.         botonTraducir.classList.add('buttons-tranlate');
  1664.         botonTraducir.textContent = 'Translate';
  1665.         botonTraducir.setAttribute('id', `btn${i}`);
  1666.         texto[i].insertAdjacentElement('afterend', botonTraducir);
  1667.         const mdcm = $m(`.buttons-tranlate`);
  1668.         mdcm[i].onclick = function () {
  1669.           traducido = o;
  1670.           urlLista = traducido + texto[i].textContent;
  1671.           fetch('https://translate.googleapis.com/translate_a/t' + urlLista) //API
  1672.             .then((response) => response.json())
  1673.             .then((datos) => {
  1674.               texto[i].textContent = datos[0][0];
  1675.               mdcm[i].textContent = 'Translated';
  1676.             });
  1677.         };
  1678.       }
  1679.     }
  1680.  
  1681.     // clean buttoms dom
  1682.     function limpiarHTML(element) {
  1683.       const buttons = $m(`${element}`);
  1684.       [].forEach.call(buttons, function (buttons) {
  1685.         buttons.remove();
  1686.       });
  1687.       traductor();
  1688.     }
  1689.  
  1690.     window.onscroll = () => {
  1691.       const divEl = $e('#content-text');
  1692.       const divEl2 = $e(
  1693.         'ytd-item-section-renderer[static-comments-header] #contents'
  1694.       );
  1695.       if (divEl != undefined || divEl2 != undefined) {
  1696.         limpiarHTML('.buttons-tranlate');
  1697.       }
  1698.     };
  1699.  
  1700.  
  1701.     const targetNode = $e('body');
  1702.  
  1703.     if (targetNode != undefined) {
  1704.       const element = $e('ytd-item-section-renderer[static-comments-header] #contents');
  1705.       if(element != undefined) {
  1706.         const observerElementDom = (elem) => {
  1707.           const observer = new IntersectionObserver(entries => {
  1708.  
  1709.               if(entries[0].isIntersecting) {
  1710.  
  1711.                 element.style.background = `${selectedTheme.gradient ?? ''}`;
  1712.               } else {return}
  1713.           })
  1714.  
  1715.           return observer.observe($e(`${elem}`))
  1716.  
  1717.         }
  1718.         observerElementDom('ytd-item-section-renderer[static-comments-header] #contents')
  1719.       }
  1720.     }
  1721.     saveSettings();
  1722.   }
  1723.  
  1724.   let validoBotones = true;
  1725.   function renderizarButtons() {
  1726.     const addButton = $e('.style-scope .ytd-watch-metadata');
  1727.     const addButton2 = $e('#contents');
  1728.  
  1729.     if (addButton != undefined && validoBotones) {
  1730.         validoBotones = false;
  1731.         const isVisible = !!(
  1732.           addButton.offsetWidth ||
  1733.           addButton.offsetHeight ||
  1734.           addButton.getClientRects().length
  1735.         );
  1736.         if (isVisible) {
  1737.           addButton.insertAdjacentHTML("beforebegin", menuBotones);
  1738.         } else if (addButton2 != undefined) {
  1739.           addButton.insertAdjacentHTML("beforebegin", menuBotones);
  1740.         }
  1741.     }
  1742.  
  1743.       // Formulario de botones para descargar
  1744.       const formulariodescarga = $e(
  1745.         '.formulariodescarga'
  1746.       );
  1747.       const formulariodescargaaudio = $e(
  1748.         '.formulariodescargaaudio'
  1749.       );
  1750.       const framedescarga = $e('#descargando');
  1751.       const framedescargamp3 = $e('#descargandomp3');
  1752.       if (formulariodescarga && formulariodescargaaudio) {
  1753.         formulariodescarga.addEventListener('click', (e) => {
  1754.           e.preventDefault();
  1755.         });
  1756.         formulariodescargaaudio.addEventListener('click', (e) => {
  1757.           e.preventDefault();
  1758.         });
  1759.       }
  1760.       const btn1mp4 = $e('.btn1');
  1761.       const btn2mp3 = $e('.btn2');
  1762.       const btn3cancel = $e('.btn3');
  1763.       const selectcalidades = $e('.selectcalidades');
  1764.       const selectcalidadesaudio = $e(
  1765.         '.selectcalidadesaudio'
  1766.       );
  1767.  
  1768.       if(selectcalidades != undefined) {
  1769.         selectcalidades.addEventListener('change', (e) => {
  1770.           framedescarga.src = `https://loader.to/api/button/?url=${window.location.href}&f=${e.target.value}&color=0af`;
  1771.           framedescarga.classList.remove('ocultarframe');
  1772.         });
  1773.  
  1774.       }
  1775.  
  1776.       if(selectcalidadesaudio != undefined) {
  1777.         selectcalidadesaudio.addEventListener('change', (e) => {
  1778.           framedescargamp3.src = `https://loader.to/api/button/?url=${window.location.href}&f=${e.target.value}&color=049c16`;
  1779.           // console.log(e.target.value)
  1780.           framedescargamp3.classList.remove('ocultarframeaudio');
  1781.         });
  1782.       }
  1783.  
  1784.       if (btn3cancel != undefined) {
  1785.         btn3cancel.onclick = () => {
  1786.           formulariodescarga.style.display = 'none';
  1787.           formulariodescargaaudio.style.display = 'none';
  1788.         };
  1789.       }
  1790.  
  1791.       if (btn1mp4 != undefined) {
  1792.         btn1mp4.onclick = () => {
  1793.           selectcalidades.classList.remove('ocultarframe');
  1794.           framedescarga.classList.add('ocultarframe');
  1795.           formulariodescarga.classList.remove('ocultarframe');
  1796.           formulariodescarga.style.display = '';
  1797.           selectcalidadesaudio.classList.add('ocultarframeaudio');
  1798.           formulariodescargaaudio.classList.add('ocultarframe');
  1799.           formulariodescarga.reset();
  1800.         };
  1801.       }
  1802.  
  1803.       if (btn2mp3 != undefined) {
  1804.         btn2mp3.onclick = () => {
  1805.           formulariodescargaaudio.classList.remove('ocultarframe');
  1806.           formulariodescarga.classList.add('ocultarframe');
  1807.           framedescargamp3.classList.remove('ocultarframeaudio');
  1808.           formulariodescargaaudio.style.display = '';
  1809.           selectcalidadesaudio.classList.remove('ocultarframeaudio');
  1810.           framedescargamp3.classList.add('ocultarframeaudio');
  1811.           formulariodescargaaudio.reset();
  1812.         };
  1813.       }
  1814.  
  1815.       // Invertir contenido
  1816.  
  1817.       // const background_image = $e('#background_image');
  1818.       // const color_bg = $e('#color_bg');
  1819.       // const alertShown = localStorage.getItem('alertShown');
  1820.       // const alertShownBg = localStorage.getItem('alertShownBg');
  1821.       // if (!alertShown) {
  1822.       //   color_bg.addEventListener('change', () => {
  1823.       //     alert('disable cinematic mode in the video');
  1824.       //     localStorage.setItem('alertShown', true);
  1825.       //   });
  1826.       // }
  1827.       // if (!alertShownBg) {
  1828.       //   background_image.addEventListener('input', () => {
  1829.       //     alert('disable cinematic mode in the video');
  1830.       //     localStorage.setItem('alertShownBg', true);
  1831.       //   });
  1832.       // }
  1833.  
  1834.  
  1835.  
  1836.       const btnImagen = $e('#imagen');
  1837.       const formularioButtons = $e('#eyes');
  1838.       const invertirVista = $e('#invertir');
  1839.  
  1840.       const reverse = $e('#columns');
  1841.  
  1842.       let countViewRow = 0; // Count
  1843.       if (invertirVista != undefined) {
  1844.         invertirVista.onclick = () => {
  1845.           countViewRow += 1;
  1846.           switch (countViewRow) {
  1847.             case 1:
  1848.               reverse.style.flexDirection = 'row-reverse';
  1849.               break;
  1850.             case 2:
  1851.               reverse.style.flexDirection = 'row';
  1852.               countViewRow = 0;
  1853.               break;
  1854.           }
  1855.         };
  1856.       }
  1857.  
  1858.       // valido modo oscuro y venta de video
  1859.       // Repeat video button
  1860.       let countRepeat = 0; // count
  1861.       const repeat = $e('#repeatvideo'); // Repeat button
  1862.       const imarepeat = $e('.icon-tabler-repeat'); // img repeat
  1863.       const videoFull = $e(
  1864.         '#movie_player > div.html5-video-container > video'
  1865.       );
  1866.       if(repeat != undefined) {
  1867.  
  1868.         repeat.onclick = () => {
  1869.           if (
  1870.             $e('#cinematics > div') != undefined ||
  1871.             videoFull != undefined
  1872.           ) {
  1873.             countRepeat += 1;
  1874.             setInterval(() => {
  1875.               switch (countRepeat) {
  1876.                 case 1:
  1877.                   document
  1878.                     .querySelector(
  1879.                       '#movie_player > div.html5-video-container > video'
  1880.                     )
  1881.                     .setAttribute('loop', 'true');
  1882.                   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">
  1883.                       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1884.                       <path d="M4 12v-3c0 -1.336 .873 -2.468 2.08 -2.856m3.92 -.144h10m-3 -3l3 3l-3 3"></path>
  1885.                       <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>
  1886.                       <path d="M3 3l18 18"></path>
  1887.                    </svg> `; // img repeat
  1888.                   break;
  1889.                 case 2:
  1890.                   countRepeat = 0;
  1891.                   document
  1892.                     .querySelector(
  1893.                       '#movie_player > div.html5-video-container > video'
  1894.                     )
  1895.                     .removeAttribute('loop');
  1896.                   imarepeat.innerHTML = ` <svg  xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-repeat" width="24"
  1897.                       height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
  1898.                       stroke-linecap="round" stroke-linejoin="round">
  1899.                       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1900.                       <path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"></path>
  1901.                       <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path>
  1902.                     </svg>`;
  1903.                   break;
  1904.               }
  1905.             }, 1000);
  1906.           }
  1907.           }
  1908.       }
  1909.  
  1910.       // Background transparent
  1911.  
  1912.       const cinematica = $e('#cinematics > div');
  1913.       if (cinematica != undefined) {
  1914.         cinematica.style =
  1915.           'position: fixed; inset: 0px; pointer-events: none; transform: scale(1.5, 2)';
  1916.       }
  1917.       const btnReset = $e('#reset_button'); // Reset button
  1918.       if (btnReset != undefined) {
  1919.         btnReset.addEventListener('click', function () {
  1920.           if (localStorage.getItem('colores') != null) {
  1921.             localStorage.removeItem('colores');
  1922.             $e('#ojosprotect').style.backgroundColor =
  1923.               'transparent';
  1924.             setTimeout(() => {
  1925.               location.reload();
  1926.             }, 400);
  1927.           }
  1928.         });
  1929.       }
  1930.  
  1931.       if (btnImagen != undefined) {
  1932.         btnImagen.onclick = () => {
  1933.           if (
  1934.             $e('#cinematics > div') != undefined ||
  1935.             videoFull != undefined
  1936.           ) {
  1937.             const parametrosURL = new URLSearchParams(window.location.search);
  1938.             let enlace = parametrosURL.get('v');
  1939.  
  1940.             // Construir la URL de la imagen
  1941.             const imageUrl = `https://i.ytimg.com/vi/${enlace}/maxresdefault.jpg`;
  1942.  
  1943.             // Realizar la solicitud para obtener la imagen
  1944.             fetch(imageUrl)
  1945.               .then((response) => {
  1946.                 if (!response.ok) {
  1947.                   throw new Error(`HTTP error! Status: ${response.status}`);
  1948.                 }
  1949.                 return response.blob();
  1950.               })
  1951.               .then((blob) => {
  1952.                 // Obtener el tamaño de la imagen en kilobytes
  1953.                 const imageSizeKB = blob.size / 1024;
  1954.  
  1955.                 // Verificar si el tamaño de la imagen es menor o igual a 20 KB
  1956.                 if (imageSizeKB >= 20) {
  1957.                   window.open(
  1958.                     `https://i.ytimg.com/vi/${enlace}/maxresdefault.jpg`,
  1959.                     'popUpWindow',
  1960.                     'height=500,width=400,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes'
  1961.                   );
  1962.                   // Crear una URL para la imagen
  1963.                   const imageUrlObject = URL.createObjectURL(blob);
  1964.  
  1965.                   // Crear un enlace para descargar la imagen
  1966.                   const enlaceDescarga = $cl('a');
  1967.                   enlaceDescarga.href = imageUrlObject;
  1968.                   const titleVideo = $e(
  1969.                     'h1.style-scope.ytd-watch-metadata'
  1970.                   ).innerText;
  1971.                   enlaceDescarga.download = `${titleVideo}_maxresdefault.jpg`;
  1972.  
  1973.                   // Simular un clic en el enlace para iniciar la descarga
  1974.                   enlaceDescarga.click();
  1975.  
  1976.                   // Limpiar la URL del objeto después de la descarga
  1977.                   URL.revokeObjectURL(imageUrlObject);
  1978.                 } else {
  1979.                   console.log(
  1980.                     'La imagen no excede los 20 KB. No se descargará.'
  1981.                   );
  1982.                 }
  1983.               })
  1984.               .catch((error) => {
  1985.                 alert('No found image');
  1986.                 console.error('Error al obtener la imagen:', error);
  1987.               });
  1988.           }
  1989.         };
  1990.       }
  1991.       // for background image file photo higt quality
  1992.       // const fileInput = document.getElementById('background_image');
  1993.       // const backgroundDiv = $e('ytd-app');
  1994.  
  1995.       // const storedImage = localStorage.getItem('backgroundImage');
  1996.       // if (storedImage) {
  1997.       //   backgroundDiv.style = `background-size: contain; background-repeat: repeat; background-image: url(${storedImage}) !important`;
  1998.       // }
  1999.  
  2000.       // fileInput.addEventListener('change', (event) => {
  2001.       //   const file = event.target.files[0];
  2002.       //   if (file) {
  2003.       //     const reader = new FileReader();
  2004.       //     reader.onload = function (e) {
  2005.       //       const imageUrl = e.target.result;
  2006.       //       localStorage.setItem('backgroundImage', imageUrl);
  2007.       //       backgroundDiv.style.backgroundImage = `url(${imageUrl})`;
  2008.       //     };
  2009.       //     reader.readAsDataURL(file);
  2010.       //   }
  2011.       // });
  2012.  
  2013.  
  2014.       const externalLink = $e('.external_link');
  2015.       if (externalLink != undefined) {
  2016.         externalLink.onclick = () => {
  2017.           const parametrosURL = new URLSearchParams(window.location.search); // Url parametros
  2018.           let enlace;
  2019.           enlace = parametrosURL.get('v');
  2020.           window.open(
  2021.             `https://www.y2mate.com/es/convert-youtube/${enlace}`,
  2022.             'popUpWindow',
  2023.             'height=800,width=1000,left=50%,top=100,resizable=no,scrollbars=yes,toolbar=no,menubar=yes,location=no,directories=yes, status=no'
  2024.           );
  2025.         };
  2026.       }
  2027.       const viewExternalLink = $e('.view_external_link');
  2028.       if (viewExternalLink != undefined) {
  2029.         viewExternalLink.onclick = () => {
  2030.           $e('video').click();
  2031.           const parametrosURL = new URLSearchParams(window.location.search); // Url parametros
  2032.           let enlace;
  2033.           enlace = parametrosURL.get('v');
  2034.           window.open(
  2035.             `https://www.youtube.com/embed/${enlace}?rel=0&controls=2&color=white&iv_load_policy=3&showinfo=0&modestbranding=1&autoplay=1`
  2036.           );
  2037.         };
  2038.       }
  2039.       const viewPictureToPicture = $e(
  2040.         '.video_picture_to_picture'
  2041.       );
  2042.       if (viewPictureToPicture != undefined) {
  2043.         viewPictureToPicture.onclick = () => {
  2044.           const video = $e('video');
  2045.           // Verifica si el navegador admite Picture-in-Picture
  2046.           if ('pictureInPictureEnabled' in document) {
  2047.             // Verifica si el video aún no está en modo Picture-in-Picture
  2048.             if (!document.pictureInPictureElement) {
  2049.               // Intenta activar el modo Picture-in-Picture
  2050.               video
  2051.                 .requestPictureInPicture()
  2052.                 .then(() => {
  2053.                   // El video está ahora en modo Picture-in-Picture
  2054.                 })
  2055.                 .catch((error) => {
  2056.                   console.error(
  2057.                     'Error al activar el modo Picture-in-Picture:',
  2058.                     error
  2059.                   );
  2060.                 });
  2061.             } else {
  2062.               // video picture
  2063.             }
  2064.           } else {
  2065.             alert('Picture-in-Picture not supported');
  2066.           }
  2067.         };
  2068.  
  2069.         // Filtro de pantalla
  2070.         if (formularioButtons != undefined) {
  2071.           formularioButtons.addEventListener('input', function () {
  2072.             if (
  2073.               $e('#cinematics > div') != undefined ||
  2074.               videoFull != undefined
  2075.             ) {
  2076.               $e('#ojosprotect').style.backgroundColor =
  2077.                 formularioButtons.value;
  2078.             }
  2079.           });
  2080.         }
  2081.         clearInterval(renderizarButtons);
  2082.       }
  2083.  
  2084.       const checked_updates = $e('.checked_updates');
  2085.  
  2086.       if (checked_updates != undefined) {
  2087.         checked_updates.onclick = () => {
  2088.           window.open(
  2089.             `https://update.gf.qytechs.cn/scripts/460680/Youtube%20Tools%20All%20in%20one%20local%20download%20mp3%20mp4%20HIGT%20QUALITY%20return%20dislikes%20and%20more.user.js`
  2090.           );
  2091.         };
  2092.       }
  2093.  
  2094.       const screenShotVideo = $e('.screenshot_video');
  2095.       if (screenShotVideo != undefined) {
  2096.         screenShotVideo.onclick = () => {
  2097.           const video = $e('video');
  2098.           const canvas = $cl('canvas');
  2099.           canvas.width = video.videoWidth;
  2100.           canvas.height = video.videoHeight;
  2101.           const context = canvas.getContext('2d');
  2102.           context.drawImage(video, 0, 0, canvas.width, canvas.height);
  2103.           const imagenURL = canvas.toDataURL('image/png');
  2104.           const enlaceDescarga = $cl('a');
  2105.           enlaceDescarga.href = imagenURL;
  2106.           const titleVideo = $e(
  2107.             'h1.style-scope.ytd-watch-metadata'
  2108.           ).innerText;
  2109.           enlaceDescarga.download = `${video.currentTime.toFixed(
  2110.             0
  2111.           )}s_${titleVideo}.png`;
  2112.           enlaceDescarga.click();
  2113.         };
  2114.       } else {
  2115.         const containerButtons = $e('.containerButtons');
  2116.  
  2117.         if (containerButtons != undefined) {
  2118.           containerButtons.innerHTML = '';
  2119.         }
  2120.       }
  2121.       clearInterval(renderizarButtons);
  2122.     }
  2123.  
  2124.  
  2125.  
  2126.  
  2127.   console.log('Scrip en ejecución by: DeveloperMDCM  MDCM');
  2128.   const HEADER_STYLE = 'color: #F00; font-size: 24px; font-family: sans-serif;';
  2129.   const MESSAGE_STYLE = 'color: #00aaff; font-size: 16px; font-family: sans-serif;';
  2130.   const CODE_STYLE = 'font-size: 14px; font-family: monospace;';
  2131.  
  2132.   console.log(
  2133.     '%cYoutube Tools Extension NEW UI\n' +
  2134.       '%cRun %c(v2.2.90)\n' +
  2135.       'By: DeveloperMDCM.',
  2136.     HEADER_STYLE,
  2137.     CODE_STYLE,
  2138.     MESSAGE_STYLE
  2139.   );
  2140.  
  2141.  
  2142.  
  2143.  
  2144.  
  2145.   // Add event listeners to all inputs
  2146.   const inputs = $m('input');
  2147.   inputs.forEach((input) => {
  2148.     input.addEventListener('change', applySettings);
  2149.     if (input.type === 'range') {
  2150.       input.addEventListener('change', () => {
  2151.         updateSliderValues();
  2152.         applySettings();
  2153.       });
  2154.     }
  2155.   });
  2156.  
  2157.   // Export configuration
  2158.  
  2159. //   Settings saved
  2160. //   const settings = GM_getValue('ytSettingsMDCM', '{}');
  2161. //   $id('config-data').value = settings;
  2162.  
  2163.   $id('export-config').addEventListener('click', () => {
  2164.     const settings = GM_getValue('ytSettingsMDCM', '{}');
  2165.     $id('config-data').value = settings;
  2166.     const configData = settings;
  2167.     try {
  2168.       JSON.parse(configData); // Validate JSON
  2169.       GM_setValue('ytSettingsMDCM', configData);
  2170.       alert('Configuration export successfully!');
  2171.     } catch (e) {
  2172.       alert('Invalid configuration data. Please check and try again.');
  2173.     }
  2174.   });
  2175.   // Import configuration
  2176.   $id('import-config').addEventListener('click', () => {
  2177.     const configData = $id('config-data').value;
  2178.     try {
  2179.       JSON.parse(configData); // Validate JSON
  2180.       GM_setValue('ytSettingsMDCM', configData);
  2181.       alert('Configuration imported successfully!');
  2182.       window.location.reload();
  2183.     } catch (e) {
  2184.       alert('Invalid configuration data. Please check and try again.');
  2185.     }
  2186.   });
  2187.   panel.style.display = 'none'; // Ensure panel is hidden on load
  2188.  
  2189.   // Load saved settings
  2190.   // Visible element DOM
  2191.   function checkElement(selector, callback) {
  2192.     const interval = setInterval(() => {
  2193.       if ($e(selector)) {
  2194.         clearInterval(interval);
  2195.  
  2196.         callback();
  2197.       }
  2198.     }, 100);
  2199.   }
  2200.  
  2201.   checkElement('ytd-topbar-menu-button-renderer', loadSettings);
  2202.  
  2203. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址