LELU Twitch aware Video Inverter

changes the appearance of the video stream image to its normal state
当前为 2024-11-09 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         LELU Twitch aware Video Inverter
// @version      1.0.0
// @description  changes the appearance of the video stream image to its normal state
// @author       LeLuAware
// @license      MIT
// @match        https://www.twitch.tv/*
// @match        *://*.twitch.tv/*
// @match        *://twitch.tv/*
// @grant        none
// @icon 
// @namespace https://gf.qytechs.cn/users/594536
// ==/UserScript==


 
function toggleInvert() {
    const video = document.querySelector("video");
    if (video) {
      const style = video.style;
      style.transform = style.transform ? '' : 'rotate(180deg)';
      style.filter = style.filter ? '' : 'invert(1)';
    }
  }
  
  // A function for adding an inversion button to the player Twitch
  function addInvertButtonToTwitch() {
    const video = document.querySelector('video');
    if (!video) return;
  
    // find a container for the control buttons (Twitch uses .player-controls to control the player)
    const controls = document.querySelector('.player-controls');
    if (!controls) return; // Если контейнер не найден, выходим
  
    // Check if there is already such a button
    if (document.querySelector('.invert-button')) return;
  
    // Creating an inversion button
    const button = document.createElement('button');
    button.className = 'invert-button';
    button.innerText = '🌌';  // The inversion symbol
    button.title = 'invert the video screen';
  
    // Adding a click handler
    button.addEventListener('click', toggleInvert);
  
    // Adding a button to the Twitch control panel
    controls.appendChild(button);
  }
  
  // We start adding the button after loading the content
  window.addEventListener('DOMContentLoaded', () => {
    addInvertButtonToTwitch();
  });
  
  // For dynamic video pages (for example, Twitch)
  const observer = new MutationObserver(() => {
    addInvertButtonToTwitch();
  });
  observer.observe(document.body, { childList: true, subtree: true });
欢迎访问Greasy Fork镜像
