☰

Youtube Tools

Youtube Tools All in one

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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