LELU Twitch Aware Video Inverter (Centered Button)

Adds a centered "Invert Screen" button for Twitch video player
当前为 2024-11-09 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         LELU Twitch Aware Video Inverter (Centered Button)
// @version      1.0.8
// @description  Adds a centered "Invert Screen" button for Twitch video player
// @author       LeLuAware
// @license      MIT
// @match        https://www.twitch.tv/*
// @match        *://*.twitch.tv/*
// @match        *://twitch.tv/*
// @grant        none
// @namespace https://gf.qytechs.cn/users/594536
// ==/UserScript==

// Добавляем CSS для кнопки инверсии
function addCSS() {
    const css = `
        .invert-button {
            background-color: rgba(0, 0, 0, 0.6);
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }
        .invert-button:hover {
            background-color: rgba(150, 80, 210, 0.8);
        }
    `;
    const style = document.createElement('style');
    style.textContent = css;
    document.head.appendChild(style);
}

// Функция для инверсии и поворота видео
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)';
    }
}

// Функция для добавления кнопки инверсии в плеер Twitch
function addInvertButtonToTwitch() {
    const video = document.querySelector('video');
    if (!video) return;

    // Проверяем, есть ли уже такая кнопка
    if (document.querySelector('.invert-button')) return;

    // Создаем кнопку инверсии
    const button = document.createElement('button');
    button.className = 'invert-button';
    button.innerText = 'Invert Screen';  // Текст кнопки
    button.title = 'Invert the video screen';

    // Добавляем обработчик кликов
    button.addEventListener('click', toggleInvert);

    // Добавляем кнопку в плеер Twitch
    const playerContainer = video.closest('.video-player');
    if (playerContainer) {
        playerContainer.style.position = 'relative'; // Убедимся, что контейнер имеет относительное позиционирование
        playerContainer.appendChild(button);
    }
}

// Запускаем добавление CSS и кнопки после загрузки контента
window.addEventListener('DOMContentLoaded', () => {
    addCSS();
    addInvertButtonToTwitch();
});

// Для динамических страниц с видео (например, Twitch)
const observer = new MutationObserver(() => {
    addInvertButtonToTwitch();
});
observer.observe(document.body, { childList: true, subtree: true });
欢迎访问Greasy Fork镜像
