🎵 CodeBeats

A sleek, modern Spotify controller for Visual Studio Code. Control your music without leaving your editor.

📸 Screenshots

Compact Player View

Compact Player

Full View Player

✨ Features

🎛️ Complete Playback Control

Play/Pause - Control playback with a single click
Next/Previous - Skip tracks effortlessly
Shuffle - Toggle shuffle mode on/off
Repeat - Cycle through off/context/track modes
Volume Control - Smooth slider with mute/unmute
Progress Bar - Real-time track progress with smooth animations

💚 Smart Music Management

Like/Unlike Tracks - Save favorites to your Spotify library
Now Playing - Beautiful vinyl record player display
Up Next - See what's coming up in your queue
Device Selection - Switch between Spotify devices easily

📊 Status Bar Integration

Always Visible - Current track info in VS Code status bar
Quick Controls - Click to play/pause instantly
Live Updates - Auto-refreshes every 5 seconds

🎨 Beautiful UI

Compact Design - Fits perfectly in your sidebar
Vinyl Aesthetics - Spinning album art record player
Smooth Animations - Polished transitions and effects
Glassmorphism - Modern, frosted glass design
Dark Theme Optimized - Seamless VS Code integration

🔍 Multiple Access Points

Activity Bar Icon - Dedicated music note icon
Explorer Sidebar - Available in file explorer
Status Bar - Quick access from bottom bar

📦 Installation

From VS Code Marketplace (Coming Soon)

Open VS Code
Go to Extensions (Cmd+Shift+X / Ctrl+Shift+X)
Search for "CodeBeats"
Click Install
⚠️ Setup Required - See Quick Start below (5 minutes)

🚀 Quick Start

1. Create Spotify Developer App

Go to Spotify Developer Dashboard
Log in and click "Create app"
Fill in the form (in order):
- App name: "CodeBeats" (or any name)
- App description: "VS Code music controller"
- Redirect URI: https://127.0.0.1:4567/callback ⚠️ Important!
- Which API/SDKs: Select "Web API" ✅
- ℹ️ CodeBeats is a remote control (uses Web API), not a player (doesn't need Web Playback SDK)
Accept terms and click "Save"
Copy your Client ID

2. Configure Client ID

Option A - VS Code Settings (Recommended):

Open Settings: Cmd+, (Mac) or Ctrl+, (Windows/Linux)
Search for: spotify or codebeats
Find "CodeBeats: Spotify Client Id"
Paste your Client ID
Done! ✅

3. Connect Spotify

Click the music note icon (♪) in the Activity Bar
Click "Connect Spotify"
Browser security warning: Click "Advanced" → "Proceed" (this is safe)
Authorize in your browser
Start playing music! 🎉

🎮 Usage

Playback Controls

Play/Pause - Main play button or click status bar
Skip - Previous/Next buttons
Shuffle - Click 🔀 to toggle
Repeat - Click 🔁 to cycle modes
Like - Click 💚 to save to Liked Songs

Volume Control

Drag slider - Adjust volume (0-100%)
Click speaker icon - Mute/unmute
Icon changes - Reflects volume level

Device Selection

Click "Select Playback Device"
Choose from available Spotify devices
Transfers playback instantly

⚙️ Configuration

Environment Variables (.env file)

SPOTIFY_CLIENT_ID=your_client_id_here

VS Code Settings

Alternatively, use VS Code settings:

{
  "codebeats.spotifyClientId": "your_client_id_here"
}

🔒 Privacy & Security

Secure Authentication - Uses Spotify's PKCE OAuth flow
Local Storage - Tokens stored in VS Code's secure secret storage
No Backend - Direct connection to Spotify API
Open Source - Audit the code yourself

Required Permissions

CodeBeats requests these Spotify scopes:

user-read-playback-state - Read current playback
user-modify-playback-state - Control playback
user-library-read - Check if tracks are liked
user-library-modify - Like/unlike tracks
streaming - Stream audio (future feature)

🛠️ Troubleshooting

"403 Forbidden" Error

Problem: Your account isn't on the app allowlist.

Solution:

Go to Spotify Developer Dashboard
Open your app → Settings → User Management
Add your Spotify email
Accept the invitation

"No Active Device" Error

Problem: Spotify isn't running on any device.