Youtube Music Video Remover

Removes the annoying video player on youtube music

目前為 2023-08-04 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         Youtube Music Video Remover
// @namespace    https://greasyfork.org
// @version      0.2
// @description  Removes the annoying video player on youtube music
// @author       Red & one other person
// @match        https://music.youtube.com/watch*
// @match        https://music.youtube.com/*
// @icon         https://music.youtube.com/favicon.ico
// @grant        none
// ==/UserScript==

let watchModActive = false;
let watchModSleepTime = 6000;
let watchModSleepStart = 0;
const watchModClicks = 3;

const backgroundColor = '#300606'
const textColor = '#202020'


let doneNonWatchStyles = false;
let doneWatchStyles = false;
function doNonWatchStyles() {
  if (doneNonWatchStyles) return;
  const element_list_background = document.querySelector("ytmusic-section-list-renderer");
  element_list_background.style.backgroundColor = backgroundColor;
  doneNonWatchStyles = true;
}

function doWatchStyles() {
  if (doneWatchStyles) return;
  doneWatchStyles = true;
}

function reset_watchModSleepStart(additionalTime = 0) {
  watchModSleepStart = Date.now() + additionalTime;
}

function updateWatchElement() {
  let watchElement = document.querySelector(".watch-element");
  let contentInfo = document.querySelector(".content-info-wrapper.ytmusic-player-bar");
  if (!watchElement) return;
  let clickCount = parseInt(watchElement.getAttribute('data-click-count'), 10);
  clickCount = isNaN(clickCount) ? 0 : clickCount;
  if (clickCount >= watchModClicks) return;
  if (!contentInfo) {
    setTimeout(updateWatchElement, 100);
    return;
  }
  watchElement.innerHTML = contentInfo.children[0].innerHTML;
  setTimeout(updateWatchElement, 5000);
}

function checkWatchElement() {
  let watchElement = document.querySelector(".watch-element");

  if (!watchElement) return;

  let currentTime = Date.now();
  let timeElapsed = currentTime - watchModSleepStart;

  if (timeElapsed >= watchModSleepTime) {
    watchElement.style.zIndex = 5;
    watchElement.style.opacity = '1';
    watchElement.setAttribute('data-click-count', '0');
    setTimeout(updateWatchElement, 100)
  } else {
    setTimeout(checkWatchElement, 100);
  }
}

function addWatch() {
  console.log('Adding watch mod...');
  watchModActive = true;
  setTimeout(doWatchStyles(), 100);

  let watchElement = document.createElement('div');
  watchElement.className = 'watch-element';
  watchElement.style.position = 'absolute';
  watchElement.style.top = '0';
  watchElement.style.left = '0';
  watchElement.style.width = '100%';
  watchElement.style.height = '100%';
  watchElement.style.backgroundColor = 'black';
  // Automatically set / reset to 0 depending on state
  // watchElement.style.zIndex = 5;
  watchElement.style.opacity = 0;
  watchElement.style.transition = 'opacity 1s ease';
  watchElement.style.color = textColor;
  watchElement.style.fontSize = 'xx-large';
  watchElement.style.textAlign = 'center';
  watchElement.style.justifyContent = 'center';
  watchElement.style.userSelect = 'none';
  watchElement.style.display = 'flex';
  watchElement.style.flexDirection = 'column';

  document.body.appendChild(watchElement);
  reset_watchModSleepStart(2000);
  // account for youtube music load time here
  setTimeout(checkWatchElement, 2000);

  watchElement.addEventListener('click', (event) => {
    let clickCount = parseInt(watchElement.getAttribute('data-click-count'), 10);
    clickCount = isNaN(clickCount) ? 0 : clickCount;
    clickCount++;
    watchElement.setAttribute('data-click-count', clickCount.toString());

    if (clickCount < watchModClicks)  {
      watchElement.innerHTML = `Press ${watchModClicks - clickCount} times to exit to YouTube Music UI`;
      event.stopPropagation();
    } else if (clickCount === watchModClicks) {
      watchElement.innerHTML = '';
      watchElement.style.opacity = 0;
      reset_watchModSleepStart();

      setTimeout(() => {
        watchElement.style.zIndex = 0;
      }, 1000)

      setTimeout(checkWatchElement, 1000);
    } else {
      reset_watchModSleepStart();
    }
  });
};

function removeWatch() {
  console.log('Removing watch mod...');
  watchModActive = false;
  let watchElement = document.querySelector(".watch-element");
  if (!watchElement) return;
  watchElement.remove();
  setTimeout(doNonWatchStyles(), 100);
}

function checkWatch() {
  if (window.location.pathname.endsWith('watch')) {
    switch (watchModActive) {
      case true:
        break;
      case false:
        addWatch();
        break;
    }
    return true;
  } else {
    switch (watchModActive) {
      case false:
        break;
      case true:
        removeWatch();
        break;
    }
    return false;
  }
}

(function() {
  'use strict';

  const elementToObserve = document.querySelector("#main-panel");
  const observer = new MutationObserver(function() {
    elementToObserve.remove();
  });

  observer.observe(elementToObserve, {subtree: true, childList: true});

  const element_sideBar = document.querySelector(".side-panel.modular.style-scope.ytmusic-player-page");
  element_sideBar.style.width = "100%";
  element_sideBar.style.margin = "0px";
  element_sideBar.style.maxWidth = "none";
  element_sideBar.style.backgroundColor = backgroundColor

  const element_navBar = document.querySelector("ytmusic-nav-bar");
  element_navBar.style.backgroundColor = backgroundColor;

  const element_player_background = document.querySelector("#player-page");
  element_player_background.style.backgroundColor = backgroundColor;

  const element_guide_background = document.querySelector("#guide-renderer");
  element_guide_background.style.backgroundColor = backgroundColor;

  const element_bottomBar = document.querySelector('ytmusic-player-bar');
  element_bottomBar.style.backgroundColor = backgroundColor

  //const element_sidePanel = document.querySelectorAll(".content.style-scope.ytmusic-player-page");
  //element_sidePanel.style.width = "100%";
  //element_sidePanel.style.padding = "0px";

  const watch = checkWatch();

  if (watch) {
    doWatchStyles();
  } else {
    doNonWatchStyles();
  }
})();




setInterval(checkWatch, 500);