Twitch - Fullscreen Optimized

This resolves the frame drops and stuttering issues when watching Twitch in full screen on low-end GPUs.解决低端gpu观看twitch全屏时的掉帧、卡顿问题。

Zainstaluj skrypt ?

Zadaj pytanie, napisz recenzję, lub zgłoś ten skrypt.

Wrap lines

// ==UserScript==
// @name         Twitch - Fullscreen Optimized
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  This resolves the frame drops and stuttering issues when watching Twitch in full screen on low-end GPUs.解决低端gpu观看twitch全屏时的掉帧、卡顿问题。
// @author       Martin______X
// @match        https://www.twitch.tv/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=twitch.tv
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
    "use strict";

    // Fullscreen Switch
    function togglePureFullscreen() {
        const player = document.querySelector(".video-player");
        if (!player) return;
        if (!document.fullscreenElement) {
            player.requestFullscreen().catch(e => {});
        } else {
            document.exitFullscreen().catch(e => {});
        }
    }

    // Intercept fullscreen button & double click event.
    const mouseEvents = ['click', 'dblclick'];
    mouseEvents.forEach(type => {
        document.addEventListener(type, (e) => {
            const isBtn = e.target.closest('[data-a-target="player-fullscreen-button"]');
            const isVid = type === 'dblclick' && e.target.closest('.video-player__container');

            if (isBtn || isVid) {
                e.stopImmediatePropagation(); // Stop twitch
                e.preventDefault();
                togglePureFullscreen();
            }
        }, true); // switch fullscreen mode before Twitch.
    });

    // Intercept shortcut F key.
    document.addEventListener("keydown", (e) => {
        const isTyping = ["INPUT", "TEXTAREA"].includes(document.activeElement.tagName) || document.activeElement.isContentEditable;
        if (!isTyping && e.key.toLowerCase() === 'f') {
            e.stopImmediatePropagation();
            e.preventDefault();
            togglePureFullscreen();
        }
    }, true);

    // override css to protect render performance
    const style = document.createElement("style");
    style.textContent = `
            :fullscreen .video-player,
            :fullscreen .video-player__container,
            :fullscreen .channel-root__player-container,
            :fullscreen .channel-root__player,
            :fullscreen body,
            :fullscreen html {
                      height: 100% !important;
                      max-height: 100% !important;
                      overflow: hidden !important;
            }
    `;
    document.head.appendChild(style);
})();