De-bloat Twitch

Fixes Twitch -isms and hides parts of the UI that I find annoying
换行
// ==UserScript==
// @name        De-bloat Twitch
// @description Fixes Twitch -isms and hides parts of the UI that I find annoying
// @namespace   https://faulty.equipment/
// @match       https://www.twitch.tv/*
// @version     1.1
// @grant       GM_addStyle
// @license     GNU AGPLv3
// @icon        https://www.google.com/s2/favicons?domain=twitch.tv
// ==/UserScript==

(function() {
    GM_addStyle(`
/* Hide front page carousel */
.front-page-carousel { display: none; }

/* Hide "watch streak" part of the points menu */
div[aria-describedby=channel-points-reward-center-body] .scrollable-area.scrollable-area--suppress-scroll-x + div { display: none; }

/* Hide top gifters/etc */
.chat-room__content > div:has(.bits-leaderboard-expanded-top-three-entry),
.chat-room__content > div:has(.channel-leaderboard-header-rotating__users) { display: none; }

/* Hide follower/sub goals */
.about-section__actions--wide:has(div[role=progressbar]) { display:none; }

/* List-style rewards */
.rewards-list {
  flex-wrap: nowrap !important;
  flex-direction: column;
}
.reward-list-item {
  width: initial !important;
  position: relative;
  margin-bottom: 0.5rem !important;
}
div.reward-icon--large {
  height: 2.5rem;
  width: 9rem;
}
.reward-icon__image { display: none !important; }
.reward-list-item button + div {
  position: absolute;
  top: 0;
  left: 10rem;
  pointer-events: none;
  padding-top: 0 !important;
  display: flex;
  align-items: center;
  height: 100%;
}
div.reward-icon__cost {
  height: initial;
  position: relative !important;
}
#channel-points-reward-center-body  { margin-top: 5rem; }
#channel-points-reward-center-body:has(.rewards-list) {
  margin-top: 0;
}

/* Taller points menu */
div[aria-describedby=channel-points-reward-center-body] > div {
  --menu-height: 40rem;
  max-height: var(--menu-height) !important;
}
div.reward-center__content { height: var(--menu-height); }

/* Compact points menu header */
#channel-points-reward-center-header { display: none !important; }
.rewards-list .esGgHZ { padding-top: 0 !important; }
div.reward-center__content .tw-popover-header {
  position: absolute;
  right: 0;
  width: 130px;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 10;
}
.rewards-popover-header {
    flex-direction: row-reverse !important;
    align-items: center;
    justify-content: space-between;
}

/* Hide bit count in rewards button */
button[aria-label='Bits and Points Balances'] div.chMBew > div.kKpGeT:has(svg) + div,
button[aria-label='Bits and Points Balances'] div.chMBew > div.kKpGeT:has(svg) {
    display: none !important;
}
`);

  // Util hack for rendering shenanigans (ie. Twitch is a slow mess)
  const wait = async (ms) => new Promise(resolve => setTimeout(resolve, ms));

  async function run() {
    // Wait a bit (Twitch page is sloooow)
    await wait(7000);
    // Auto-click dismiss monthly recap
    document.querySelector(".tw-callout__close button")?.click();

    // More powerup removal that needs logic because CSS isnt the best touring machine
    document.querySelector("button[aria-label='Bits and Points Balances']")?.addEventListener("click", async () => {
      await wait(200);
      // Remove powerups
      const powerup = document.querySelector(".rewards-list > div:has(>p)");
      while (powerup.nextElementSibling.firstElementChild.tagName != 'P') powerup.nextElementSibling.remove();
      powerup.remove();
    });
  }
  run();

})();
欢迎访问Greasy Fork镜像
