Hide Youtube controls by pressing h

Hide youtube controls.js

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==

(function() {
  "use strict";

  let myvideo = document.querySelector(".video-stream");
  let current = document.querySelector(".ytp-time-current");
  let progress = document.querySelector(".ytp-play-progress");
  let load = document.querySelector(".ytp-load-progress");
  let pause = document.querySelector(".ytp-large-play-button.ytp-button");

  myvideo.addEventListener("progress", function() {
    var duration = myvideo.duration;
    if (duration > 0) {
      for (var i = 0; i < myvideo.buffered.length; i++) {
        if (
          myvideo.buffered.start(myvideo.buffered.length - 1 - i) <
          myvideo.currentTime
        ) {
          load.style.transform =
            "scaleX(" +
            myvideo.buffered.end(myvideo.buffered.length - 1 - i) / duration +
            ")";
          break;
        }
      }
    }
  });

  myvideo.addEventListener("timeupdate", function() {
    var duration = myvideo.duration;
    if (duration > 0) {
      progress.style.transform =
        "scaleX(" + myvideo.currentTime / myvideo.duration + ")";
      current.innerText =
        "" +
        Math.floor(myvideo.currentTime / 60) +
        ":" +
        Math.floor(myvideo.currentTime % 60)
          .toString()
          .padStart(2, "0");
    }
  });

  // setInterval(() => {
  //   progress.style.transform =
  //     "scaleX(" + myvideo.currentTime / myvideo.duration + ")";

  //   load.style.transform =
  //     "scaleX(" + myvideo.buffered.end(0) / myvideo.duration + ")";

  //   current.innerText =
  //     "" +
  //     Math.floor(myvideo.currentTime / 60) +
  //     ":" +
  //     Math.floor(myvideo.currentTime % 60)
  //       .toString()
  //       .padStart(2, "0");
  // }, 1000);

  var showCss = [
    ".ytp-chrome-bottom {display:block !important; }",
    ".ytp-gradient-top {display:block !important; opacity: 1 !important;}",
    ".ytp-gradient-bottom {display:block !important; opacity: 1 !important;}",
    ".ytp-autohide .ytp-chrome-bottom {display:block !important; opacity:1 !important; }"
  ].join("\n");

  var hideCss = [
    ".ytp-gradient-top {display:none !important; opacity: 1 !important;}",
    ".ytp-gradient-bottom {display:none !important; opacity: 1 !important;}",
    ".ytp-autohide .ytp-chrome-bottom {display:none !important; opacity:1 !important; }"
  ].join("\n");

  var css = showCss;

  if (typeof GM_addStyle != "undefined") {
    GM_addStyle(css);
  } else if (typeof PRO_addStyle != "undefined") {
    PRO_addStyle(css);
  } else if (typeof addStyle != "undefined") {
    addStyle(css);
  } else {
    var node = document.createElement("style");
    node.type = "text/css";
    node.appendChild(document.createTextNode(css));
    var heads = document.getElementsByTagName("head");
    if (heads.length > 0) {
      heads[0].appendChild(node);
    } else {
      // no head yet, stick it whereever
      document.documentElement.appendChild(node);
    }
  }

  document.addEventListener("keypress", function(e) {
    console.log(e.key == "h");
    if (e.key == "p") {
      let opacity = pause.style.opacity;
      if (opacity == "0") {
        opacity = "1";
      } else {
        opacity = "0";
      }
      pause.style.setProperty("opacity", opacity, "important");
    } else if (e.key == "h") {
      let opacity = document.querySelector(".ytp-chrome-bottom").style.opacity;

      if (opacity == "0") {
        opacity = "1";
      } else {
        opacity = "0";
      }

      document
        .querySelector(".ytp-gradient-bottom")
        .style.setProperty("opacity", opacity, "important");

      document
        .querySelector(".ytp-chrome-bottom")
        .style.setProperty("opacity", opacity, "important");
    }
  });
})();