This resolves the frame drops and stuttering issues when watching Twitch in full screen on low-end GPUs.解决低端gpu观看twitch全屏时的掉帧、卡顿问题。
// ==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);
})();