// ==UserScript== dislikes, auto repeat vid
// @name         Youtube Tools All in one local download mp3 mp4 HIGT QUALITY return dislikes and more
// @name:zh-TW   本地 YouTube 下載器
// @name:zh-HK   本地 YouTube 下載器
// @name:zh-CN   本地 YouTube 下载器
// @name:ja      ローカル YouTube ダウンローダー
// @name:kr      로컬 YouTube 다운로더
// @name:ar      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:bg      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:cs      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:da      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:de      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:el      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:eo      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:es      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:fi      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:fr      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:fr-CA   Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:he      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:hu      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:id      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:it      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:ko      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:nb      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:nl      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:pl      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:pt-BR   Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:ro      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:ru      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:sk      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:sr      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:sv      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:th      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:tr      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:uk      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:ug      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @name:vi      Youtube Tools All in one local Download MP4, MP3 HIGT QUALITY without external service and more.
// @description         Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:ar      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:bg      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:da      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:de      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:el      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:eo      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:fi      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:fr-CA   Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:he      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:hu      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:id      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:it      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:ko      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:nb      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:nl      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:pl      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:pt-BR   Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:ro      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:ru      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:sk      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:sr      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:sv      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:th      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:tr      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:uk      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:ug      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:vi      Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @homepage     https://github.com/DeveloperMDCM/
// @version      1.8.6
// @description        Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @description:zh-TW  無需第三方服務即可下載 YouTube 視頻等。
// @description:zh-HK  無需第三方服務即可下載 YouTube 視頻等
// @description:zh-CN  无需通过第三方服务等即可下载 YouTube 视频
// @description:ja     外部サービスなどを使わずに YouTube 動画をダウンロード
// @description:kr     외부 서비스 등 없이 YouTube 동영상 다운로드
// @description:fr     Obtenez un lien brut de YouTube sans service externe. et de plus
// @description:cs     Stahujte videa z YouTube bez externích služeb. a více
// @description:en     Download MP4, MP3 HIGT QUALITY without external services. and more
// @description:es     Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more
// @author       MDCM
// @homepage            https://github.com/DeveloperMDCM/
// @match        https://*.youtube.com/*
// @exclude      *://music.youtube.com/*
// @exclude      *://*.music.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        GM_info
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        unsafeWindow
// @run-at       document-end
// @compatible chrome
// @compatible firefox
// @compatible opera
// @compatible safari
// @compatible edge
// @compatible brave
// @license MIT
// @namespace https://github.com/DeveloperMDCM/
// @downloadURL none
// ==/UserScript==
// new update 1/09/2023
(function () {
  // Youtube tools by: DeveloperMDCM
  // https://github.com/DeveloperMDCM/Youtube-tools-extension

  "use strict";
  // // Obtén la referencia al elemento de video
  // const videoElement = document.getElementById('miVideo'); // Reemplaza 'miVideo' con el ID de tu elemento de video

  // // Establece el atributo loop en true
  // if (videoElement) {
  //   videoElement.loop = true;
  // }

  function MDCM() {
    const existeFormButton = document.querySelector(
      "#below > ytd-watch-metadata > div.container > form"
    );
    if (!existeFormButton) {
      const mdcm = document.querySelector("#MDCM");
      const sms = document.querySelector("#below > ytd-watch-metadata");
      if (!mdcm) {
        if (sms != undefined) {
          const mdcm = document.createElement("P");
          mdcm.innerHTML =
            '<a id="MDCM" target="_blank" style="margin: 10px 0; font-size: 14px; color: #24ff; text-decoration: none; display: flex; align-items: center; justify-content: center; font-style: italic;font-weight: 700;" href="https://github.com/DeveloperMDCM/Youtube-tools-extension">Link GitHub Repository<h4></h4</a>';
          sms.appendChild(mdcm);
        }
      }
    }
  }

  function paramsVideoURL() {
    const parametrosURL = new URLSearchParams(window.location.search); // Url parametros
    return parametrosURL.get("v");
  }
  let ad = true;

  function eliminarAnuancios() {
    // Skip ads video / saltar publicidad
    const buttonSkip = document.querySelector(".ytp-ad-skip-button.ytp-button");
    const validar = undefined;
    let ytpminiplayerscrim = document.querySelector("ytp-miniplayer-scrim");
    let cross = document.getElementsByClassName(
      "ytp-ad-overlay-close-container"
    )[0];
    let skip = document.getElementsByClassName("ytp-ad-skip-button")[0];
    let ad1 = document.querySelector(
      "#contents > ytd-promoted-sparkles-web-renderer"
    );
    let ad2 = document.querySelector(
      "#player-ads > ytd-player-legacy-desktop-watch-ads-renderer"
    );
    let ad3 = document.querySelector("#action-companion-click-target");
    let ad4 = document.querySelector(
      "#player-overlay\\:0 > div.ytp-ad-player-overlay-flyout-cta.ytp-ad-player-overlay-flyout-cta-rounded"
    );
    let ad5 = document.querySelector(
      "#invideo-overlay\\:0 > div > div.ytp-ad-image-overlay"
    );
    let ad6 = document.querySelector("#root");
    let ad7 = document.querySelector(
      "#rendering-content > ytd-video-masthead-ad-v3-renderer"
    );
    let ad8 = document.querySelector(
      "#player-ads > ytd-player-legacy-desktop-watch-ads-renderer"
    );
    let ad9 = document.querySelector(".ytp-ad-text-overlay");
    const adVideo = document.querySelectorAll(".ad-showing")[0];
    const adTimeVideo = document.querySelector(
      ".ytp-ad-text.ytp-ad-preview-text"
    );
    const video = document.querySelector("video");
    if (adVideo != validar && video != validar && adTimeVideo != validar) {
      video.currentTime = video.duration;
    }
    if (ytpminiplayerscrim != validar) alert("eliminado");
    if (ad1 != validar) ad1.remove();
    if (ad2 != validar) ad2.remove();
    if (ad3 != validar) ad3.remove();
    if (ad4 != validar) ad4.remove();
    if (ad5 != validar) ad5.remove();
    if (ad6 != validar && ad) {
      ad6.style.display = "none";
      ad = false;
    }
    if (ad7 != validar) ad7.remove();
    if (ad8 != validar) ad8.remove();
    if (ad9 != validar) ad9.remove();
    if (cross != validar) cross.click();
    if (skip != validar) skip.click();
    if (buttonSkip != validar) {
      buttonSkip.click();
    }
  }

  const cargarDislikes = async () => {
    try {
      const video = document.querySelector(
        "#movie_player > div.html5-video-container > video"
      );
      if (video != undefined && validoUrl.split("/")[3] !== "shorts") {
        const addDislike = document.createElement("P"); // Texto count dislikes
        validoUrl = document.location.href;
        const btnDislike = document.querySelector(
          "#segmented-dislike-button yt-button-shape > button"
        );
        const resultado = document.querySelector(
          "#segmented-dislike-button > ytd-toggle-button-renderer > yt-button-shape > button > yt-touch-feedback-shape"
        );
        const res = await fetch(
          `https://returnyoutubedislikeapi.com/Votes?videoId=${paramsVideoURL()}`
        );
        const {
          dislikes
        } = await res.json();
        addDislike.textContent = `${FormatiarNumero(dislikes, 0)}`;
        if (btnDislike != undefined) {
          btnDislike.style = "width: 90px; margin: 0 2px; padding: 0 2px";
        }
        resultado.insertAdjacentElement("afterend", addDislike);
        const iconLike = document.querySelector(
          "#segmented-like-button > ytd-toggle-button-renderer > yt-button-shape > button > div.yt-spec-button-shape-next__icon > yt-icon > yt-animated-icon"
        );
        const inconDislike = document.querySelector(
          "#segmented-dislike-button > ytd-toggle-button-renderer > yt-button-shape > button > div > yt-icon"
        );
        if (iconLike != undefined && iconLike != inconDislike) {
          document.querySelector(
            "#segmented-like-button > ytd-toggle-button-renderer > yt-button-shape > button > div.yt-spec-button-shape-next__icon > yt-icon > yt-animated-icon"
          ).innerHTML = `
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
       <path d="M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 016 15.375c0-1.75.599-3.358 1.602-4.634.151-.192.373-.309.6-.397.473-.183.89-.514 1.212-.924a9.042 9.042 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75 2.25 2.25 0 012.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23h-.777zM2.331 10.977a11.969 11.969 0 00-.831 4.398 12 12 0 00.52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 01-.924-3.977c0-1.708.476-3.305 1.302-4.666.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227z" />
       </svg>`;
          document.querySelector(
            "#segmented-dislike-button > ytd-toggle-button-renderer > yt-button-shape > button > div > yt-icon"
          ).innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
       <path d="M15.73 5.25h1.035A7.465 7.465 0 0118 9.375a7.465 7.465 0 01-1.235 4.125h-.148c-.806 0-1.534.446-2.031 1.08a9.04 9.04 0 01-2.861 2.4c-.723.384-1.35.956-1.653 1.715a4.498 4.498 0 00-.322 1.672V21a.75.75 0 01-.75.75 2.25 2.25 0 01-2.25-2.25c0-1.152.26-2.243.723-3.218C7.74 15.724 7.366 15 6.748 15H3.622c-1.026 0-1.945-.694-2.054-1.715A12.134 12.134 0 011.5 12c0-2.848.992-5.464 2.649-7.521.388-.482.987-.729 1.605-.729H9.77a4.5 4.5 0 011.423.23l3.114 1.04a4.5 4.5 0 001.423.23zM21.669 13.773c.536-1.362.831-2.845.831-4.398 0-1.22-.182-2.398-.52-3.507-.26-.85-1.084-1.368-1.973-1.368H19.1c-.445 0-.72.498-.523.898.591 1.2.924 2.55.924 3.977a8.959 8.959 0 01-1.302 4.666c-.245.403.028.959.5.959h1.053c.832 0 1.612-.453 1.918-1.227z" />
     </svg>
     `;
        }
      }
    } catch (error) {
      // Error
      console.log(error);
    }
  };

  // Función para adaptar dislikes
  let validoUrl = document.location.href;
  // Función para formatear los dislikes
  let prevUrl = undefined;

  function FormatiarNumero(num, digits) {
    const lookup = [{
      value: 1,
      symbol: "",
    },
    {
      value: 1e3,
      symbol: " K",
    },
    {
      value: 1e6,
      symbol: " M",
    },
    ];
    const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
    const item = lookup
      .slice()
      .reverse()
      .find((item) => {
        return num >= item.value;
      });
    return item ?
      (num / item.value).toFixed(digits).replace(rx, "$1") + item.symbol :
      "0";
  }
  const shortDislike = async () => {
    validoUrl = document.location.href;
    const validoVentanaShort = document.querySelectorAll(
      "#dislike-button > yt-button-shape > label > div > span"
    );
    try {
      if (
        validoVentanaShort != undefined &&
        validoUrl.split("/")[3] === "shorts"
      ) {
        const res = await fetch(
          `https://returnyoutubedislikeapi.com/Votes?videoId=${validoUrl.split("/")[4]
          }`
        );
        const {
          dislikes
        } = await res.json();
        for (var i = 0; i < validoVentanaShort.length; i++) {
          validoVentanaShort[i].textContent = `${FormatiarNumero(dislikes, 0)}`;
        }
      }
    } catch (error) {
      console.log(error);
    }
  };

  setInterval(() => {
    const currUrl = window.location.href;
    const validoVentanaShort = document.querySelectorAll(
      "#dislike-button > yt-button-shape > label > div > span"
    );
    if (currUrl != prevUrl) {
      MDCM();
      setTimeout(() => {
        eliminarAnuancios();
      }, 100);
      setTimeout(() => {
        if (
          document.querySelector(
            "#movie_player > div.html5-video-container > video"
          ) != undefined &&
          document.querySelector(
            "#subscribe-button-shape > button > yt-touch-feedback-shape > div > div.yt-spec-touch-feedback-shape__fill"
          ) != null
        ) {
          cargarDislikes();
        }
      }, 2000);
      if (
        validoVentanaShort != undefined &&
        validoUrl.split("/")[3] === "shorts"
      ) {
        setTimeout(() => {
          shortDislike();
        }, 500);
      }
      prevUrl = currUrl;
    }

    // Lógica adicional
  }, 1000); // Cada 1s

  function cargarScript() {
    console.log("Scrip en ejecución by: DeveloperMDCM");
    console.log("https://github.com/DeveloperMDCM");
    //('Script by: DeveloperMDCM')

    // Menu Buttons

    let validoBotones = true;

    const menuBotones = `
    <!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* For Chrome or Safari */
progress::-webkit-progress-bar {
  background-color: #ff0000;
  ;
}

progress::-webkit-progress-value {
  background-color: #06d406;
}


/* For Firefox */
progress {
  background-color: #ff0000;
  border: none;
}

progress::-moz-progress-bar {
  background-color: #06d406;
}

.barralikes {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta http-equiv="Pragma" content="no-cache">
<style>
.mdcm:hover {
  cursor: pointer;
}

.hidden {
  display: none;
}

.mdcm {
  font-size: 10px;
}

.btn_download {
  font-size: 1.2rem;
  padding: 3px;
  color: #fff;
  border-radius: 5px;
  background-color: #ec3203;
}

#subscribe-button>ytd-subscribe-button-renderer>yt-button-shape>button:hover {
  zoom: 0.9;
}

.containerButtons {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  user-select: none;

  border-radius: 20px;
  margin: 0 auto;
  padding: 4px;
}

.containerButtons button,
input {
  display: flex;
  flex-direction: column-reverse;
  margin: 0 5px;
  align-items: center;
  cursor: pointer;
  border-radius: 10px;
}

.containerButtons h1,
h2 {
  user-select: none;
}

#MDCM {
  animation: mdcm 10s infinite alternate;
  position: relative;
  transition: 4s;
}

.containerButtons button .containerButtons button svg {
  width: 50px;
  height: 40px;
}

#color,
#eyes {
  opacity: 0;
  position: absolute;
  height: 90%;
  bottom: 0;
  top: 0;
  width: 17px;
}

/* width */
::-webkit-scrollbar {
  width: 4px;
  height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: ##d5d5d5;

}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #000;

}

.containerall {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container .botoncalidades {
  margin: 3px 2px;
  width: 24.6%;
}

.botoncalidades:first-child {
  background-color: #0af;
}

.botoncalidades:last-child {
  background-color: red;
  width: 100px;
}

.selectcalidades,
.botoncalidades,
.selectcalidadesaudio {
  width: 50%;
  height: 27.8px;
  background-color: #fff;
  color: #000;
  font-size: 25px;
  text-align: center;
  border: none;
  font-size: 20px;
  margin: 2px 2px;
}

.botoncalidades {
  width: 70px;
  height: 30px;
  background-color: rgb(4, 156, 22);
  border: 0px solid #000;
  color: #fff;
  font-size: 20px;
  border-radius: 10px;
  margin: 2px 2px;
}

.botoncalidades:hover,
.bntcontainer:hover {
  cursor: pointer;
}

.ocultarframe,
.ocultarframeaudio {
  display: none;
}

.progress-button:hover {
  background-color: #000;
}

.progress-button {
  display: inline-block;
  font-size: 1em;
  color: #fff;
  text-decoration: none;
  line-height: 1;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
  height: 100%;
  box-shadow: 0 1px 1px #ccc;
  border-radius: 2px;
  cursor: pointer;
  background-color: #000;
}

#downloadButton:hover .progress-button {
  filter: brightness(95%);
}

.progress-button.in-progress,
.progress-button.finished {
  color: red;
}

.progress-button.in-progress:after,
.progress-button.finished:after {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  padding-top: inherit;
  color: #fff;
  left: 0;
}

.progress-button.in-progress:after {
  content: attr(data-loading);
}

.progress-button.finished:after {
  content: attr(data-finished);
}

.progress-button .tz-bar {
  background-color: #f00;
  height: 3px;
  bottom: 0;
  left: 0;
  width: 0;
  position: absolute;
  z-index: 1;
  border-radius: 0 0 2px 2px;
  -webkit-transition: width 0.5s, height 0.5s;
  -moz-transition: width 0.5s, height 0.5s;
  transition: width 0.5s, height 0.5s;
}

.progress-button .tz-bar.background-horizontal {
  height: 100%;
  border-radius: 2px;
}

.progress-button .tz-bar.background-vertical {
  height: 0;
  top: 0;
  width: 100%;
  border-radius: 2px;
}

.buttonTitle {
  font-size: 0.5em;
  margin-top: 4px;
}

#containerbutton {
  height: 100px;
  text-align: center;
}

#containerbutton:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;

}


#percentageText {
  width: 95%;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  z-index: 3;
}

.headerbutton {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

.progress-containerbutton {
  width: 99%;
  height: 20px;
  background: #3e3e3c;
}

.progress-bar {
  height: 20px;
  background: #f00;
  width: 0%;
}

.grecaptcha-badge {
  visibility: hidden;
}

button {
  margin: 0;
  padding: 0;
}

button:hover {
  color: #ec3203;
}
.botones_div {
  background-color: transparent;
  border: none;
  color: #999999;
}

</style>

<body>

<div class="container">
  <form>
    <div class="containerButtons">
      <div style="position:relative; display:inline-block ">

        <button title="Text color" class="botones_div" type="button">

          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-palette" 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>
            <path
              d="M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25">
            </path>
            <path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
            <path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
            <path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
          </svg>
          <input id="color" list="presetColors1" type="color" value="#ffffff"></button></div>
      <datalist id="presetColors1">
        <option value="#ff00aa" />
        <option value="#fbff00" />
        <option value="#ff0000" />
        <option value="#00ff00" />
        <option value="#0000ff" />
      </datalist>
      <button title="Image video" class="botones_div" type="button" id="imagen">

        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-photo-down" 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>
          <path d="M15 8h.01"></path>
          <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>
          <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l4 4"></path>
          <path d="M14 14l1 -1c.653 -.629 1.413 -.815 2.13 -.559"></path>
          <path d="M19 16v6"></path>
          <path d="M22 19l-3 3l-3 -3"></path>
        </svg>
      </button>
      <button title="Reverse" class="botones_div" type="button" id="invertir">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrows-diff" 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>
          <path d="M11 16h10"></path>
          <path d="M11 16l4 4"></path>
          <path d="M11 16l4 -4"></path>
          <path d="M13 8h-10"></path>
          <path d="M13 8l-4 4"></path>
          <path d="M13 8l-4 -4"></path>
        </svg>
      </button>
      <button title="reset" class="botones_div" type="button" id="reset">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-power" 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>
          <path d="M7 6a7.75 7.75 0 1 0 10 0"></path>
          <path d="M12 4l0 8"></path>
        </svg>
      </button>

      <div style="position:relative; display:inline-block ">
        <button title="Filter eyes" class="botones_div" type="button">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brightness-half"
            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>
            <path d="M12 9a3 3 0 0 0 0 6v-6z"></path>
            <path
              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">
            </path>
          </svg>
          <input id="eyes" list="presetColors" type="color" value="#ffffff"></button>
        <datalist id="presetColors">
          <option value="#000000" />
          <option value="#fbff00" />
          <option value="#ff0000" />
          <option value="#00ff00" />
          <option value="#0000ff" />
        </datalist>
      </div>
      <button title="Repeat video" class="botones_div" type="button" id="repeatvideo">

        <svg  xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-repeat" 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>
          <path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"></path>
          <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path>
        </svg>
      </button>
      <button title="MP4" type="button" class="btn1 botones_div">

        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-download"
          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>
          <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
          <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>
          <path d="M12 17v-6"></path>
          <path d="M9.5 14.5l2.5 2.5l2.5 -2.5"></path>
        </svg>
      </button>
      <button title="MP3" type="button" class="btn2 botones_div">

        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-music" 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>
          <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
          <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>
          <path d="M11 16m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
          <path d="M12 16l0 -5l2 1"></path>
        </svg>
      </button>
      <button title="External Download" type="button" class="external_link botones_div">
        
        <svg xmlns="http://www.w3.org/2000/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">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <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>
            <path d="M11 13l9 -9"></path>
            <path d="M15 4h5v5"></path>
         </svg>
      </button>
      <button title="Close" type="button" class="btn3 botones_div">

        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-x" 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>
          <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
          <path d="M10 10l4 4m0 -4l-4 4"></path>
        </svg>
      </button>
    </div>
    <div>
    </div>
  </form>
  <div id="ojosprotect"
    style="position: fixed; pointer-events: none; width: 100%; height: 100%; left: 0px; top: 0px; opacity: 0.2; z-index: 10; display: block;">
  </div>
</div>
<form class="formulariodescarga" action="">
  <div class="containerall">
  <select class="selectcalidades  ocultarframe" required>
    <option selected disabled>Calidad del video / Quality video</option>
    <option value="360">360p Mp4</option>
    <option value="480">480p Mp4</option>
    <option value="720">720p HD Mp4 Default</option>
    <option value="1080">1080p FULL HD Mp4</option>
    <option value="4k">2160p 4K WEBM</option>
    <option value="8k">4320p 8K WEBM</option>
    </select>
    <iframe id="descargando"  style="z-index: 99; border: none; height: 27.4px; width: 50%;"  class="containerall ocultarframe" src="" frameborder="0"></iframe>
 
  </div>
  </form>
  <form class="formulariodescargaaudio" action="">
  <div class="containerall">
  <select class="selectcalidadesaudio ocultarframeaudio" required>
    <option selected disabled>Calidad del Audio / Quality Audio</option>
    <option value="flac">Audio FLAC UHQ</option>
    <option value="wav">Audio WAV UHQ</option>
    <option value="mp3">Audio MP3 Default</option>
    <option value="m4a">Audio M4A</option>
    <option value="aac">Audio AAC</option>
    <option value="opus">Audio OPUS</option>
    <option value="ogg">Audio OGG</option>
    </select>
    <iframe id="descargandomp3"  style="z-index: 99; border: none; height: 27.4px; width: 50%;"  class="containerall ocultarframeaudio" src="" frameborder="0"></iframe>
 
    </iframe>
   
  </div>
  </form>
    </body>
    </html>
    `;

    // TODO: Inicia y inserta los botones
    setInterval(() => {
      // se repite  1 vez

      const addButton = document.querySelector(
        ".style-scope .ytd-watch-metadata"
      );
      if (addButton && validoBotones) {
        validoBotones = false;
        addButton.insertAdjacentHTML("beforebegin", menuBotones);
        // document.querySelector("video").style.borderRadius = "30px";
        // Formulario de botones para descargar

        const formulariodescarga = document.querySelector(
          ".formulariodescarga"
        );
        const formulariodescargaaudio = document.querySelector(
          ".formulariodescargaaudio"
        );
        const framedescarga = document.querySelector("#descargando");
        const framedescargamp3 = document.querySelector("#descargandomp3");
        formulariodescarga.addEventListener("click", (e) => {
          e.preventDefault();
        });
        formulariodescargaaudio.addEventListener("click", (e) => {
          e.preventDefault();
        });
        const btn1mp4 = document.querySelector(".btn1");
        const btn2mp3 = document.querySelector(".btn2");
        const btn3cancel = document.querySelector(".btn3");
        const selectcalidades = document.querySelector(".selectcalidades");
        const selectcalidadesaudio = document.querySelector(
          ".selectcalidadesaudio"
        );

        selectcalidades.addEventListener("change", (e) => {
          framedescarga.src = `https://loader.to/api/button/?url=${window.location.href}&f=${e.target.value}&color=f00`;
          framedescarga.classList.remove("ocultarframe");
        });

        selectcalidadesaudio.addEventListener("change", (e) => {
          framedescargamp3.src = `https://loader.to/api/button/?url=${window.location.href}&f=${e.target.value}&color=049c16`;
          // console.log(e.target.value)
          framedescargamp3.classList.remove("ocultarframeaudio");
        });

        btn3cancel.onclick = () => {
          formulariodescarga.style.display = "none";
          formulariodescargaaudio.style.display = "none";
        };

        btn1mp4.onclick = () => {
          selectcalidades.classList.remove("ocultarframe");
          framedescarga.classList.add("ocultarframe");
          formulariodescarga.classList.remove("ocultarframe");
          formulariodescarga.style.display = "";
          selectcalidadesaudio.classList.add("ocultarframeaudio");
          formulariodescargaaudio.classList.add("ocultarframe");
          formulariodescarga.reset();
        };
        btn2mp3.onclick = () => {
          formulariodescargaaudio.classList.remove("ocultarframe");
          formulariodescarga.classList.add("ocultarframe");
          framedescargamp3.classList.remove("ocultarframeaudio");
          formulariodescargaaudio.style.display = "";
          selectcalidadesaudio.classList.remove("ocultarframeaudio");
          framedescargamp3.classList.add("ocultarframeaudio");
          formulariodescargaaudio.reset();
        };

        const reverse = document.querySelector("#columns"); // Invertir contenido
        const btnReset = document.querySelector("#reset"); // Reset button
        const InputColor = document.querySelector("#color"); // Input color
        const btnImagen = document.querySelector("#imagen"); // Download image video
        const formularioButtons = document.querySelector("#eyes"); // Filtro de pantalla
        const invertirVista = document.querySelector("#invertir"); // Intercambiar vista
        const externalLink = document.querySelector(".external_link");
        const buttonsVideo = document.querySelector(
          "#top-row.ytd-watch-metadata"
        ); // Botones para video

        reverse.style.flexDirection = "row";
        buttonsVideo.style =
          "display: flex;flex-direction: column;justify-content: center;align-items: center ;";
        document.querySelector("#title > h1").style =
          "text-align: center; color: #939392;";
        document.querySelector("#owner").style.justifyContent = "center";
        //document.querySelector("#search-icon-legacy.ytd-searchbox").style.backgroundColor = "gray";

        let countViewRow = 0; // Count
        invertirVista.onclick = () => {
          countViewRow += 1;
          switch (countViewRow) {
            case 1:
              reverse.style.flexDirection = "row-reverse";
              break;
            case 2:
              reverse.style.flexDirection = "row";
              countViewRow = 0;
              break;
          }
        };

        // valido modo oscuro y venta de video
        // Repeat video button
        let countRepeat = 0; // count
        const repeat = document.querySelector("#repeatvideo"); // Repeat button
        const imarepeat = document.querySelector(".icon-tabler-repeat"); // img repeat
        const videoFull = document.querySelector(
          "#movie_player > div.html5-video-container > video"
        );
        repeat.onclick = () => {
          if (
            document.querySelector("#cinematics > div") != undefined ||
            videoFull != undefined
          ) {
            countRepeat += 1;
            setInterval(() => {
              switch (countRepeat) {
                case 1:
                  document
                    .querySelector(
                      "#movie_player > div.html5-video-container > video"
                    )
                    .setAttribute("loop", "true");
                  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">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M4 12v-3c0 -1.336 .873 -2.468 2.08 -2.856m3.92 -.144h10m-3 -3l3 3l-3 3"></path>
                    <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>
                    <path d="M3 3l18 18"></path>
                 </svg> `; // img repeat
                  break;
                case 2:
                  countRepeat = 0;
                  document
                    .querySelector(
                      "#movie_player > div.html5-video-container > video"
                    )
                    .removeAttribute("loop");
                  imarepeat.innerHTML = ` <svg  xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-repeat" 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>
                    <path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"></path>
                    <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path>
                  </svg>`;
                  break;
              }
            }, 1000);
          } else {
            mostrarAlerta("Active Dark Theme in Youtube page");
          }
        };
        // Background transparent

        btnReset.addEventListener("click", function () {
          localStorage.clear();
          if (document.querySelector("#cinematics > div") != undefined) {
            document.body.style.setProperty(
              "--yt-spec-text-primary",
              "#ffffff"
            );
            // document.body.style.setProperty('--yt-spec-text-secondary', '#ffffff');
            document.body.style.setProperty(
              "--yt-spec-static-overlay-background-brand",
              "#ffffff"
            );
            document.body.style.setProperty(
              "--yt-spec-static-overlay-background-brand",
              "red"
            );
            document.querySelector("#cinematics > div").style =
              "position: relative; inset: 0px; pointer-events: none; background: transparent";
            document.body.style.setProperty(
              "--yt-spec-static-brand-red",
              "#ff0000"
            );
            document.body.style.setProperty(
              "--yt-spec-static-brand-white",
              "gray"
            );
            document.querySelector("#ojosprotect").style.backgroundColor =
              "transparent";
            // document.body.style.setProperty("--ytd-searchbox-legacy-border-color", "#ffffff");
            document.querySelector("#logo-icon").style.color = "#ffffff";
            document.body.style.setProperty(
              "--yt-spec-general-background-a",
              "#000000"
            );
            if (document.querySelector("html[dark] [dark]") != undefined) {
              document.querySelector(
                "html[dark] [dark]"
              ).style.backgroundColor = "#000000";
            }
            document.querySelector(
              "ytd-playlist-panel-renderer[modern-panels]:not([within-miniplayer]) #container.ytd-playlist-panel-renderer"
            ).style = "";
          } else if (document.querySelector("#cinematics > div") === null) {
            document.body.style.setProperty("--yt-spec-text-primary", "#000");
            document.body.style.setProperty(
              "--yt-spec-static-brand-red",
              "#ff0000"
            );
            document.body.style.setProperty(
              "--yt-spec-static-brand-white",
              "#fff"
            );
            document.querySelector("#ojosprotect").style.backgroundColor =
              "transparent";
            document.querySelector("#logo-icon").style.color = "#000";
            document.querySelector(
              "ytd-playlist-panel-renderer[modern-panels]:not([within-miniplayer]) #container.ytd-playlist-panel-renderer"
            ).style = "";
          } else {
            mostrarAlerta("Active Dark Theme in Youtube page");
          }
        });
        reverse.style.flexDirection = "row";

        externalLink.onclick = () => {
          const parametrosURL = new URLSearchParams(window.location.search); // Url parametros
          let enlace;
          enlace = parametrosURL.get("v");
          window.open(
            `https://www.y2mate.com/es/convert-youtube/${enlace}`,
            "popUpWindow",
            "height=800,width=1000,left=50%,top=100,resizable=no,scrollbars=yes,toolbar=no,menubar=yes,location=no,directories=yes, status=no"
          );
        };

        btnImagen.onclick = () => {
          if (
            document.querySelector("#cinematics > div") != undefined ||
            videoFull != undefined
          ) {
            const parametrosURL = new URLSearchParams(window.location.search); // Url parametros
            let enlace;
            enlace = parametrosURL.get("v");
            window.open(
              `https://i.ytimg.com/vi/${enlace}/maxresdefault.jpg`,
              "popUpWindow",
              "height=500,width=400,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes"
            );
          } else {
            mostrarAlerta("Active Dark Theme in Youtube page");
          }
        };
        // Input color
        InputColor.addEventListener("input", function () {
          localStorage.setItem("colorTextPage", InputColor.value);
          const colorTextPage = localStorage.getItem("colorTextPage");
          // console.log(colorTextPage);
          if (
            document.querySelector("#cinematics > div") != undefined ||
            videoFull != undefined
          ) {
            document.body.style.setProperty(
              "--yt-spec-text-primary",
              colorTextPage
            );
            //document.body.style.setProperty("--yt-spec-text-secondary", "#ffffff");
            document.body.style.setProperty(
              "--yt-spec-static-overlay-background-brand",
              colorTextPage
            );
            document.body.style.setProperty(
              "--yt-spec-static-brand-red",
              colorTextPage
            );
            //document.body.style.setProperty("--yt-spec-static-brand-white", colorTextPage);
            document.querySelector("#logo-icon").style.color = colorTextPage;
            // document.querySelector("#subscribe-button > ytd-subscribe-button-renderer > yt-button-shape > button").style = "color: black; background-color: white; border: 2px solid black;";
          } else {
            mostrarAlerta("Active Dark Theme in Youtube page");
          }
        });

        // Filtro de pantalla
        formularioButtons.addEventListener("input", function () {
          if (
            document.querySelector("#cinematics > div") != undefined ||
            videoFull != undefined
          ) {
            document.querySelector("#ojosprotect").style.backgroundColor =
              formularioButtons.value;
          } else {
            mostrarAlerta("Active Dark Theme in Youtube page");
          }
        });
      }

      //
      // localStorage.setItem('colorTextPage', ""); Update
      if (
        document.querySelector("#cinematics > div") != undefined ||
        document.querySelector("#contents")
      ) {
        if (document.querySelector("#cinematics > div") != undefined) {
          document.querySelector("#cinematics > div").style =
            "position: fixed; inset: 0px; pointer-events: none; transform: scale(1.5, 3)";
          if (document.querySelector("html[dark] [dark]") != undefined) {
            document.querySelector("html[dark] [dark]").style.backgroundColor =
              "transparent";
          }

          document.body.style.setProperty(
            "--yt-spec-general-background-a",
            "transparent"
          );
          if (
            document.querySelector(
              "ytd-playlist-panel-renderer[modern-panels]:not([within-miniplayer]) #container.ytd-playlist-panel-renderer"
            ) != undefined
          ) {
            document.querySelector(
              "ytd-playlist-panel-renderer[modern-panels]:not([within-miniplayer]) #container.ytd-playlist-panel-renderer"
            ).style = "border: 3px solid red; background-color: #352e2e29";
          }
          const colorTextPage = localStorage.getItem("colorTextPage");
          document.body.style.setProperty(
            "--yt-spec-text-primary",
            colorTextPage
          );
          //document.body.style.setProperty("--yt-spec-text-secondary", "#ffffff");
          document.body.style.setProperty(
            "--yt-spec-static-overlay-background-brand",
            colorTextPage
          );
          document.body.style.setProperty(
            "--yt-spec-static-brand-red",
            colorTextPage
          );
          //document.body.style.setProperty("--yt-spec-static-brand-white", colorTextPage);
          document.querySelector("#logo-icon").style.color = colorTextPage;
          // document.querySelector("#subscribe-button > ytd-subscribe-button-renderer > yt-button-shape > button").style = "color: black; background-color: white; border: 2px solid black;";
        }
      }
    }, 1000); // Termina setIterval

    // Mostrar alerta de activar modo oscuro
    function mostrarAlerta(mensaje) {
      alert("Active Dark Theme in Youtube page");
      const addButton = document.querySelector(
        "#below > ytd-watch-metadata > div.container > form"
      );
      const existeAlerta = document.querySelector(".alerta");
      if (!existeAlerta) {
        if (addButton != undefined) {
          const modeDark = document.createElement("P");
          modeDark.innerHTML = `<h1 class="alerta" style="color: red; background-color: white; border: 2px solid white; text-aling: center; display: flex;  align-items: center; justify-content: center;">${mensaje}</h1>`;
          addButton.appendChild(modeDark);
          setTimeout(() => {
            modeDark.remove();
          }, 7000);
        }
      }
    }
  }
  // Variables para la traduccion de comentarios
  let traducido; // Texto traducido
  let urlLista; // Url lista
  //TODO: Traducir comentarios
  async function traductor() {
    const texto = document.querySelectorAll("#content-text");
    let o = `?client=dict-chrome-ex&sl=auto&tl=${navigator.language}&q=`;
    for (let i = 0; i < texto.length; i++) {
      const botonTraducir = document.createElement("BUTTON");
      botonTraducir.classList.add("mdcm");
      botonTraducir.textContent = "Traducir";
      botonTraducir.style.backgroundColor = "black";
      botonTraducir.style.color = "white";
      botonTraducir.style.borderRadius = "5px";
      botonTraducir.style.padding = "2px";
      botonTraducir.setAttribute("id", `btn${i}`);
      texto[i].insertAdjacentElement("afterend", botonTraducir);
      const mdcm = document.querySelectorAll(`.mdcm`);
      mdcm[i].onclick = function () {
        traducido = o;
        urlLista = traducido + texto[i].textContent;
        fetch("https://translate.googleapis.com/translate_a/t" + urlLista) //API
          .then((response) => response.json())
          .then((datos) => {
            texto[i].textContent = datos[0][0];
            mdcm[i].textContent = "Traducido";
          });
      };
    }
  }

  // Limpiar botones de comentarios
  function limpiarHTML() {
    const buttons = document.querySelectorAll(".mdcm");
    [].forEach.call(buttons, function (buttons) {
      buttons.remove();
    });
    traductor();
  }

  // TODO: mostrar boton de traducir en comentarios cuando sean visibles
  window.onscroll = () => {
    const divEl = document.querySelector("#content-text");
    if (divEl != undefined) {
      limpiarHTML();
    }
  };

  function init() {
    cargarScript();
  }
  window.addEventListener("DOMContentLoaded", init);
})();