VibeBar 🎵

A single-file now-playing widget for YouTube Music Desktop v2. Features dynamic color theming from album art.

✨ Features

• 🎨 Dynamic Color Theming — automatically extracts colors from album art
• 🌊 Animated Waveforms — visualizer-style bars that pulse with playback
• 🔒 Secure OAuth — token-based auth with YouTube Music Desktop v2
• 📦 Single File — just one HTML file per theme, no dependencies

🚀 Quick Start

Prerequisites

1. YouTube Music Desktop (v2.x) — Download here
2. OBS Studio (or any streaming software with browser sources)

Installation

1. Download the widget

   # Clone the repo
   git clone https://github.com/yourusername/vibebar.git
   cd vibebar

2. Enable YTM Desktop Companion Server

   • Open YouTube Music Desktop
   • Go to Settings → Integrations
   • Turn ON Companion Server
   • Turn ON Enable companion authorization

3. Add to OBS

   • Add a new Browser Source
   • Point it to ytm-widget.html
   • Set dimensions: Width: 1200px, Height: 420px
   • Check ✅ "Shutdown source when not visible"

4. First-time setup

   • Click "Connect to YTMDesktop" in the widget
   • Accept the authorization prompt in YTM Desktop
   • Token is saved — reconnects automatically after this

🎨 Creating Custom Themes

All themes use CSS variables at the top of the file:

:root {
  --c1: #000000;        /* Background dark */
  --c2: #23222e;        /* Background light */
  --c3: #a1b6fc;        /* Accent color */
  --c4: #c0c9f0;        /* Title text */
  --c5: rgba(225, 192, 240, 0.6); /* Artist text */
  --art: 30vw;          /* Album art size */
  --gap: 1.6vw;         /* Space between sections */
  --pill-r: 2.2vw;      /* Border radius */
}

Change these values to customize colors, sizes, and spacing.

⚙️ Configuration

Polling Rate

Find this in the widget file if you want to change update speed:

pollMs: 500,  // Check for updates every 500ms (default)

Idle Timeout

Widget fades out after 6 seconds of no playback:

idleMs: 6000,  // Hide after 6 seconds idle (default)

🛠️ How It Works

1. Authentication — Uses YTM Desktop v2's Companion API with OAuth-style token flow
2. Polling — Requests /api/v1/state every 500ms for track info
3. Color Extraction — ColorThief.js analyzes album art and generates palette
4. Dynamic Updates — CSS variables update on track change for smooth transitions
5. Seamless Scrolling — Duplicates text in a flex container for infinite loop effect

🐛 Troubleshooting

Widget shows "Connect to YTMDesktop" but won't connect

• Make sure YTM Desktop is running
• Check that Companion Server is ON in Settings → Integrations
• Try port 9863 in your browser: http://localhost:9863/api/v1/state

Token expired / session lost

• Click "Connect" again and re-authorize
• Token is stored in localStorage and persists between OBS restarts

Title text is cut off / not scrolling

• Make sure your OBS Browser Source width matches the widget width (1200px default)
• Text should auto-scroll when it overflows — if not, check browser console for errors

Colors look wrong / too dark

• Some album art produces very dark colors — adjust opacity in theme builder
• Or manually edit --c1-rgb and --c2-rgb in the CSS

Waveform not animating

• This is a CSS animation — make sure OBS isn't throttling the browser source
• Uncheck "Shutdown source when not visible" if it's on a hidden scene

🤝 Contributing

Contributions are welcome! Feel free to:

• 🐛 Report bugs via Issues
• 💡 Suggest features or new themes
• 🎨 Submit your custom themes as PRs
• 📖 Improve documentation

📄 License

MIT License — see LICENSE for details.

You're free to use, modify, and distribute VibeBar in any project, including commercial streams.

🙏 Credits

Built with:

• ColorThief for palette extraction
• Outfit font by Rodrigo Fuenzalida
• Inspired by the YouTube Music Desktop community

If VibeBar improved your stream, consider ⭐ starring the repo!