Vikindor / Twitch - Toggle Video Quality

Published:

Version: 1.2.8+affa5df updated

Summary: Adds a customizable button to toggle stream quality (lowest <-> preferred) with optional auto-mute

Homepage: https://github.com/Vikindor/twitch-toggle-video-quality/

Support: https://github.com/Vikindor/twitch-toggle-video-quality/issues

License: GPL-3.0-only

Antifeature: unspecified

Twitch - Toggle Video Quality

Userscript that adds a configurable button to Twitch for quickly switching stream quality between the lowest available (with optional automatic muting) and a preferred resolution (e.g., 1080p).

Designed for users who want fast quality control without opening the player settings menu.


💥 New: This userscript is also available as part of Twitch Enhancer, a browser extension for Chrome and Firefox that combines it with other Twitch quality-of-life improvements.
Learn more: Twitch Enhancer


✨ Features

  • Toggle between lowest available quality and your preferred resolution.
  • Automatically falls back to the highest available resolution if the preferred one is not present.
  • Optional auto-mute when switching to lowest quality.
  • Optional persistent selection (quality and mute status survive page reload).
  • Two UI modes:
    • Minimal -- small icon button inside player controls.
    • Header -- purple "Quality" button in the channel header (next to "Subscribe").
  • Localized button label — automatically matches the Twitch interface language.
  • RTL-aware layout — spacing adapts correctly for right-to-left interface (Arabic).
  • Uses Twitch's internal player API (no UI clicking).
  • Fully client-side. No external dependencies.

🖼 Screenshots

Header button

Header button screenshot

Minimal button

Minimal button screenshot

🔧 Configuration

Inside the script:

const PREFERRED_HIGH = 1080;      // Preferred resolution (e.g., 1080). Falls back if unavailable.
const MUTE_ON_LOW = true;         // Automatically mute when switching to lowest quality.
const PERSIST_SELECTION = true;   // Persist quality + mute across page reload.
const VISUAL_MODE = 'header';     // 'minimal' or 'header'

âš™ How it works (High-Level)

  • Accesses Twitch's internal React player instance.
  • Uses native methods:
    • setQuality()
    • getQualities()
    • setMuted()
  • Selects lowest quality by bitrate.
  • Selects preferred resolution by matching height (e.g., 1080).
  • Synchronizes state with Twitch's own localStorage keys:
    • video-quality
    • video-muted
  • Restores mute state after player initialization.

No UI automation. No simulated clicks.

Rating: 0