Youtube Tools All in one local download mp3 mp4 HIGT QUALITY return dislikes and more

Youtube Tools All in one local Download mp4, MP3 HIGT QUALITY without external service auto repeat video, skip ads, return dislikes and more

Install this script?
Author's suggested script

You may also like Whatsapp Tool all in one.

Install this script
// ==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.3
// @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/
// ==/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 6px; padding: 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();
        }
      }, 1500);
      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 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 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 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 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 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 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 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 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 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 btnFondo = document.querySelector("#fondo"); // Fondo cinematica completa
        const invertirVista = document.querySelector("#invertir"); // Intercambiar vista

        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: red;";
        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";

        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, 2)";
          document.querySelector(
            "#cinematics > div > canvas:nth-child(1)"
          ).style = "position: absolute; width: 100%; height: 100vh;";
          document.querySelector(
            "#cinematics > div > canvas:nth-child(2)"
          ).style =
            "position: absolute; width: 100%; height: 100vh; opacity: 0.2;";
        }
        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);
})();