☰

Hide Youtube Player When Paused

Automatically hide the player when video is paused and mouse not hovering, as if the video is playing

  1. // ==UserScript==
  2. // @name         Hide Youtube Player When Paused
  3. // @namespace    PlanetXX2
  4. // @version      2024-11-13.1
  5. // @description  Automatically hide the player when video is paused and mouse not hovering, as if the video is playing
  6. // @license      MIT
  7. // @author       PlanetXX2
  8. // @match        https://*.youtube.com/*
  9. // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (function () {
  14.     'use strict';
  15.  
  16.     let player = null;
  17.     let playerParent = null;
  18.     let isListening = false;
  19.     let waitForReadyInterval = null;
  20.     let lastState = "paused"; // paused, playing
  21.  
  22.     const eventListenerMouseOver = () => {
  23.         setTimeout(() => {
  24.             player.classList.remove("ytp-autohide");
  25.         }, 50);
  26.     }
  27.     const eventListenerMouseLeave = () => {
  28.         setTimeout(() => {
  29.             player.classList.add("ytp-autohide");
  30.         }, 50);
  31.     }
  32.  
  33.     function playerStateChanged() {
  34.         if (player.classList.contains("paused-mode") && !isListening) {
  35.             isListening = true;
  36.             playerParent.addEventListener("mouseover", eventListenerMouseOver);
  37.             playerParent.addEventListener("mouseleave", eventListenerMouseLeave);
  38.         } else if (isListening) {
  39.             isListening = false;
  40.             playerParent.removeEventListener("mouseover", eventListenerMouseOver);
  41.             playerParent.removeEventListener("mouseleave", eventListenerMouseLeave);
  42.         }
  43.     }
  44.  
  45.     function playerReady() {
  46.         let ob = new MutationObserver(() => {
  47.             if (player.classList.contains("paused-mode")) {
  48.                 if (lastState === "playing") {
  49.                     lastState = "paused";
  50.                     playerStateChanged();
  51.                 }
  52.             } else {
  53.                 if (lastState === "paused") {
  54.                     lastState = "playing";
  55.                     playerStateChanged();
  56.                 }
  57.             }
  58.         });
  59.         ob.observe(player, {
  60.             attributes: true,
  61.             attributeFilter: ["class"]
  62.         });
  63.     }
  64.  
  65.     // Wait for the player to be ready
  66.     function waitForReady() {
  67.         waitForReadyInterval = setInterval(function () {
  68.             player = document.getElementById("movie_player");
  69.             if (player) {
  70.                 console.log(player)
  71.                 playerParent = player.parentElement;
  72.  
  73.                 clearInterval(waitForReadyInterval);
  74.                 playerReady();
  75.                 console.log("Player ready");
  76.             }
  77.         }, 500);
  78.     }
  79.  
  80.     // reset the state when page navigate
  81.     window.navigation.addEventListener("navigate", (e) => {
  82.         console.log("BBB",e)
  83.         console.log("AAA", window.location.pathname);
  84.         playerParent && playerParent.removeEventListener("mouseover", eventListenerMouseOver);
  85.         playerParent && playerParent.removeEventListener("mouseleave", eventListenerMouseLeave);
  86.         player = null;
  87.         playerParent = null;
  88.         isListening = false;
  89.         lastState = "paused";
  90.         clearInterval(waitForReadyInterval)
  91.  
  92.         if(e.destination.url.includes("/watch") || e.destination.url.includes("/live")){
  93.             waitForReady();
  94.         }
  95.     });
  96.  
  97.     if(window.location.pathname.includes("/watch") || window.location.pathname.includes("/live")){
  98.         waitForReady();
  99.     }
  100.  
  101. })();