Display stream uptime, viewer count, quality, and delay in fullscreen/theater mode with customizable settings.
# Twitch Stream Info Overlay
**Twitch Stream Info Overlay** is a userscript that adds a sleek, customizable overlay to the Twitch video player in Fullscreen and Theater Mode. It displays real-time stream metrics including **Stream Uptime**, **Viewer Count**, **Video Quality**, and **Buffer Delay**.
Everything is customizable via a built-in settings menu integrated directly into the Twitch chat header.
## 🚀 Features
* **⏱️ Accurate Uptime**: Fetches the exact stream start time using Twitch's API (GraphQL) to ensure the timer is always 100% accurate, even if you join late.
* **👁️ Live Viewer Count**: Shows the current number of viewers watching the stream.
* **📺 Quality & Diagnostics**: Optionally display the current video resolution (e.g., 1080p, 720p) and buffer delay/latency.
* **🎨 Fully Customizable**:
* **Position**: Place the overlay in any of the 4 corners (Top-Left, Top-Right, Bottom-Left, Bottom-Right).
* **Precision Control**: Fine-tune the position with manual **X** and **Y** pixel offsets.
* **Opacity**: Adjust the transparency of the overlay background to blend in or stand out.
* **🛠️ Integrated Settings**: A new "Overlay Settings" button (🛠️) is added to the Twitch Chat header for easy access.
* **🏃 Smart Behavior**: Automatically appears only when you enter Theater Mode or Fullscreen, and stays contained within the video player frame.
## 📸 Usage
1. Install the script.
2. Open any active Twitch stream.
3. Look for the **🛠️ (Tools)** icon in the specific chat header (next to the chat settings gear).
4. Click it to open the **Overlay Settings** menu.
5. Toggle the metrics you want to see, choose your preferred corner, and adjust opacity/offsets.
6. Enter **Theater Mode** (Alt+T) or **Fullscreen** (F) to see the overlay in action!
## 🔧 Installation
1. Install a userscript manager like **Tampermonkey** (Chrome, Edge, Safari, Opera) or **Violentmonkey** (Firefox).
2. Click the "Install this script" button above.
3. Confirm the installation in your userscript manager.
## 📝 Changelog
**v2.0**
* Complete rewrite for better performance.
* Moved overlay inside the video player container for perfect positioning.
* Added "Overlay Settings" menu to Chat Header.
* Added Manual X/Y Offset controls.
* Added Opacity slider.
* Fixed Uptime accuracy using GraphQL.
---
*Developed to provide a better viewing experience without clutter.*
