☰

Twitch Auto Theater and Statistics

Auto theater Twitch video and show statistics

目前为 2023-12-09 提交的版本。查看 最新版本。

// ==UserScript==
// @name         Twitch Auto Theater and Statistics
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Auto theater Twitch video and show statistics
// @author       JoseBaGra
// @match        *.twitch.tv/*
// @match        twitch.tv/*
// @match        https://twitch.tv/*
// @icon         https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://twitch.tv
// @license      MIT
// ==/UserScript==
const videoStatsTheatreClass = 'video-stats-theatre';

const style = `<style id="xCustomCSS" type="text/css" class="stylus">
:root {
    --zindex: 1;
}
.${videoStatsTheatreClass} {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 99999;
    font-weight: bold;
    opacity:0.7;
    zoom:0.9;
    pointer-events: none;
}
</style>`;

const videoStatsQuery = '.metadata-layout__support + div > div:nth-child(2) div:nth-child(2) div:nth-child(1)';
const videoPlayerQuery = '.video-player__container';
const theatreModeButtonQuery = '[aria-label="Theatre Mode (alt+t)"]';
const videoPlayerTheatreClass = 'video-player__container--theatre';

const stylesIntervalID = setInterval(() => {
    if (!document.getElementById('xCustomCSS')) {
        document.body.insertAdjacentHTML('afterend', style);
        clearInterval(stylesIntervalID);
    }
}, 200);

const videoObserver = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        if (mutation.attributeName === 'class') {
            const videoStats = document.querySelector(videoStatsQuery);
            if(videoStats) {
                if (mutation.target.classList.contains(videoPlayerTheatreClass)) {
                    videoStats.classList.add(videoStatsTheatreClass);
                } else {
                    videoStats.classList.remove(videoStatsTheatreClass);
                }
            }
        }
    });
});

const createObsever = setInterval(() => {
    const videoPlayer = document.querySelector(videoPlayerQuery)
    if(videoPlayer) {
        videoObserver.observe(videoPlayer, {attributes: true,})
        clearInterval(createObsever)
    }
}, 200);


const waitForNewVideoStatsForAddTheTheatreClass = (videoStats) => {
    const newVideoStats = document.querySelector(videoStatsQuery)
    if(newVideoStats !== videoStats) {
        newVideoStats.classList.add(videoStatsTheatreClass)
        return;
    }
    setTimeout(waitForNewVideoStatsForAddTheTheatreClass, 0, videoStats)
}

const enterTheaterMode = setInterval(() => {
    const videoStats = document.querySelector(videoStatsQuery);
    console.log(videoStats)
    if (videoStats) {
        clearInterval(enterTheaterMode);
        document.querySelector(theatreModeButtonQuery).click();
        waitForNewVideoStatsForAddTheTheatreClass(videoStats)
    }
}, 200);