🎵 Streamify - Adaptive Music Widget for OBS

Adaptive music widget for OBS Studio with Spotify API integration. Displays current track with beautiful animations, supports various screen resolutions and provides web interface for configuration.

✨ Features

• 🎨 Adaptive Design - automatic scaling for different resolutions
• 🎵 Spotify Integration - real-time current track display (every 2 seconds)
• 🎬 Beautiful Animations - vinyl effect, smooth transitions, animated background
• 📱 QR Code - quick access to track on mobile
• 📊 Audio Visualizer - dynamic effects synchronized with music
• 🌈 Adaptive Colors - progress bar automatically adapts to album cover colors
• ⚙️ Web Configurator - convenient setup through browser
• 🎯 OBS Ready - easy connection via Browser Source

🚀 Quick Start

1. Installation

Use the automated batch file for Windows (Recommended):

# For Windows users - this handles all dependency issues
start.bat

Manual installation:

# Main application
npm install

# Backend
cd backend
npm install
cd ..

⚠️ Important: If you encounter @rollup/rollup-win32-x64-msvc errors, use the start.bat file which automatically fixes these dependency issues.

2. Spotify API Setup

1. Create an application in Spotify Developer Dashboard
2. Get Client ID and Client Secret
3. In app settings, add Redirect URI: http://127.0.0.1:4000/callback

3. Launch Application

Automatic Launch (Windows - Recommended):

start.bat

This batch file will:

• Clean and reinstall dependencies (fixing rollup issues)
• Start backend on port 3001
• Start frontend on port 4000
• Handle all npm dependency conflicts automatically

Manual Launch:

# Start backend (port 3001)
cd backend && npm run dev &

# Start frontend (port 4000)
npm run dev

4. Configuration

1. Open http://127.0.0.1:4000/config
2. Enter Client ID and Client Secret from Spotify
3. Click "Connect Spotify" and authorize the application
4. Configure visual parameters and positioning
5. Save settings

5. OBS Setup

Method 1: Simple URL (if localStorage works in OBS)

1. Add Browser Source in OBS
2. URL: http://127.0.0.1:4000/
3. Width/Height: according to your resolution
4. Uncheck "Shutdown source when not visible"

Method 2: URL with tokens (if OBS localStorage is isolated)

1. Open http://127.0.0.1:4000/ in your browser
2. Open Developer Tools (F12) → Console
3. Run this code:

const accessToken = localStorage.getItem('spotify_access_token');
const refreshToken = localStorage.getItem('spotify_refresh_token');
console.log(`http://127.0.0.1:4000/?access_token=${accessToken}&refresh_token=${refreshToken}`);

4. Copy the generated URL and use it in OBS Browser Source

🔧 URL Parameters for OBS

You can override settings directly in the URL:

http://127.0.0.1:4000/?width=1920&height=1080&position=center&offsetX=0&offsetY=100

Available parameters:

• width, height - widget dimensions
• position - position (center, left, right)
• offsetX, offsetY - offset in pixels
• access_token, refresh_token - Spotify authentication tokens

📁 Project Structure

streamify/
├── src/
│   ├── components/          # React components
│   │   ├── MusicWidget/     # Main widget
│   │   ├── Config/          # Configuration components
│   │   └── Layout/          # Adaptive layout
│   ├── hooks/               # React hooks
│   ├── services/            # API services
│   ├── types/               # TypeScript types
│   └── pages/               # Application pages
├── backend/
│   └── src/                 # Express.js backend
├── public/                  # Static files
└── start.bat               # Windows launcher (fixes dependencies)

🎨 Supported Resolutions

• 1920×1080 (Full HD)
• 2560×1440 (QHD)
• 2880×1620 (Retina)
• Automatic scaling for other resolutions

🔍 Troubleshooting

Dependency Issues (rollup-win32-x64-msvc errors)

Solution: Use start.bat which automatically fixes these issues:

start.bat  # This handles all npm dependency conflicts

Backend Unavailable

# Check backend status
curl http://127.0.0.1:3001/health

# Restart backend
cd backend && npm run dev

CORS Errors

• Make sure to use 127.0.0.1 instead of localhost
• Verify backend is running on port 3001

Spotify Issues

• Check Client ID and Client Secret are correct
• Ensure Redirect URI in Spotify Dashboard: http://127.0.0.1:4000/callback
• Use Web API, not Web Playback SDK
• Make sure Spotify is actively playing music

Widget Not Showing in OBS

• Ensure both services are running (use start.bat)
• Use exact URL: http://127.0.0.1:4000/
• If localStorage doesn't work in OBS, use URL with tokens (Method 2 above)
• Check Browser Source settings in OBS
• Uncheck "Shutdown source when not visible" in OBS Browser Source

OBS Browser Source Settings

• URL: http://127.0.0.1:4000/ (or with tokens)
• Width: 800+ (recommended: 1920)
• Height: 600+ (recommended: 1080)
• Shutdown source when not visible: ❌ UNCHECKED
• Refresh browser when scene becomes active: ✅ CHECKED

🛠️ Development

# Development mode
start.bat            # Automatic launch of both services (Windows)
npm run dev          # Frontend on port 4000
cd backend && npm run dev  # Backend on port 3001

# Production build
npm run build

# Type checking
npm run typecheck

# Linting
npm run lint

📋 API Endpoints

• GET /health - backend status check
• GET /api/config - get settings
• POST /api/config - save settings
• DELETE /api/config - delete settings

🎵 Spotify API

The application uses Spotify Web API with Authorization Code Flow:

• Does not require Premium subscription
• Only works with active Spotify playback
• Automatic token refresh
• Data updates every 2 seconds for smooth progress bar
• Adaptive colors extracted from album artwork

🚨 Common Issues & Solutions

1. "Can't find rollup-win32-x64-msvc" → Use start.bat
2. "Config loading..." → Check backend is running on port 3001
3. "Connect Spotify" in OBS → Use URL with tokens (Method 2)
4. Widget not updating → Ensure Spotify is actively playing
5. Black screen in OBS → Check URL and Browser Source settings

📄 License

MIT License