☰

Twitch Auto Theater and Statistics

Auto theater Twitch video and show statistics

目前為 2023-12-21 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         Twitch Auto Theater and Statistics
// @namespace    http://tampermonkey.net/
// @version      1.5
// @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 sevenTVStylesheetID = "#seventv-stylesheet";

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);
  const sevenTVStylesheet = document.querySelector(sevenTVStylesheetID);
  if (videoStats) {
    clearInterval(enterTheaterMode);
    document.querySelector(theatreModeButtonQuery).click();
    waitForNewVideoStatsForAddTheTheatreClass(videoStats);
    
    if(sevenTVStylesheet) {
      setInterval(() => {
        const videoPlayer = document.querySelector(videoPlayerQuery);
        const videoStats = document.querySelector(videoStatsQuery);
        if (videoPlayer.classList.contains(videoPlayerTheatreClass)) {
          videoStats.classList.add(videoStatsTheatreClass);
        } else {
          videoStats.classList.remove(videoStatsTheatreClass);
        }
      }, 1000 * 60 ) // 1090ms & 60 = 60 seconds
    }
  }
}, 200);