YouTubeでスクロールしたら小さいプレーヤーを表示するUserScript

youtube-scroll-mini-player.user.js

// ==UserScript==
// @name        YouTube Scroll Mini Player
// @version     1.0.5
// @author      mkizka
// @description YouTubeでスクロールしたら小さいプレーヤーを表示するUserScript
// @homepage    https://gist.github.com/mkizka/e5771459a160dc39f3fc632269ab6c57
// @match       https://www.youtube.com/*
// ==/UserScript==

(function () {
  let isActive = false;
  console.info("ytsmp loaded");
  setInterval(() => {
    const player = document.querySelector("#movie_player");
    const video = player.querySelector("video");
    const rightControls = player.querySelector(".ytp-right-controls");
    const miniWidth = 480;
    const miniHeight = 270;
    const shouldMinimize =
      window.pageYOffset > player.parentElement.offsetHeight * 0.75;
    if (!isActive && shouldMinimize) {
      console.info("ytsmp minimized");
      player.style = `
        position: fixed;
        right: 20px;
        bottom: 20px;
        height: ${miniHeight}px;
        width: ${miniWidth}px;
        z-index: 10000;
      `;
      video.style = `
        width: ${miniWidth}px;
        height: ${miniHeight}px;
      `;
      rightControls.style.display = "none";
      isActive = true;
    }
    if (isActive && !shouldMinimize) {
      console.info("ytsmp reset");
      player.style = "";
      video.style = `
        width: ${player.offsetWidth}px;
        height: ${player.offsetHeight}px;
      `;
      rightControls.style.display = "block";
      isActive = false;
    }
    window.dispatchEvent(new Event('resize'))
  }, 500);
})();