SideTube - YouTube in Your Sidebar 📺

Watch YouTube videos directly inside VS Code without leaving your flow!

🤔 The Problem

Context switching kills productivity. Whether you are:

1. Learning: Watching a coding tutorial.
2. Focusing: Listening to Lofi beats or a Podcast.
3. Debugging: Checking a quick solution video.

Every time you Alt-Tab to Chrome to skip an ad or change the video, you lose your coding context. Splitting windows on your OS wastes screen real estate and feels clunky.

State of Flow? Broken. 🛑

✨ The Solution: SideTube

SideTube brings the full YouTube experience into a dedicated, controllable VS Code sidebar.

• ✅ Tutorials: Follow along line-by-line in split view.
• ✅ Music/Lofi: Keep your background playlists running without opening a browser.
• ✅ Podcasts: Listen while you code.
• ✅ Zero Distractions: Only what you want to watch.

🏗️ Architecture Overview

High-Level Architecture

+-----------------------------------------------------------------+
|                        VS Code Extension                        |
+-----------------------------------------------------------------+
|                                                                 |
|  +------------------+    +---------------------------------+    |
|  |   Activity Bar   |    |          Webview Panel          |    |
|  |     (Sidebar)    |    |  +---------------------------+  |    |
|  |                  |    |  |      Embedded iFrame      |  |    |
|  |  +------------+  |    |  |                           |  |    |
|  |  | Video 1 >  |--+----+->|    YouTube Player API     |  |    |
|  |  | Video 2 >  |  |    |  |                           |  |    |
|  |  | Video 3 >  |  |    |  +---------------------------+  |    |
|  |  +------------+  |    |               ^                 |    |
|  |                  |    |               |                 |    |
|  +------------------+    +---------------+-----------------+    |
|                                          |                      |
|  +---------------------------------------+-----------------+    |
|  |             Local HTTP Proxy Server                     |    |
|  |        (Dedicated per video, random port)               |    |
|  |                  127.0.0.1:XXXXX                        |    |
|  +---------------------------------------------------------+    |
|                                                                 |
|  +---------------------------------------------------------+    |
|  |             VS Code Extension State                     |    |
|  |        (Global State for History Storage)               |    |
|  +---------------------------------------------------------+    |
|                                                                 |
+-----------------------------------------------------------------+

Core Components

1. Extension Entry Point (extension.ts)

The main activation point that registers all commands and initializes the sidebar:

export function activate(context: vscode.ExtensionContext) {
    // Register sidebar provider
    // Register commands: addVideo, playVideo, clearHistory, deleteVideo
    // Handle video playback and server management
}

Registered Commands: | Command | Description | |---------|-------------| | codecast.addVideo | Pastes a YouTube Video or Playlist URL | | codecast.playVideo | Opens the video in a new webview panel | | codecast.clearHistory | Clears entire watch history | | codecast.deleteVideo | Removes a specific video from history | | codecast.toggleFavorite | Stars/Unstars a video | | codecast.unfavorite | Removes star (via context menu) |

2. Sidebar Provider (SidebarProvider.ts)

Implements TreeDataProvider to display the video history in the VS Code sidebar:

export class SidebarProvider implements vscode.TreeDataProvider<HistoryItem> {
    // Manages video history (add, delete, clear)
    // Persists data using VS Code's globalState API
    // Refreshes tree view on changes
}

HistoryItem Interface:

interface HistoryItem {
    id: string;        // YouTube Video ID
    title: string;     // Video Title
    timestamp: number; // When it was added
    isFavorite?: boolean; // Star status
    type?: 'video' | 'playlist'; // Item type
    children?: HistoryItem[]; // For nested playlists
}

3. Local HTTP Proxy Server

This is the secret sauce that makes reliable YouTube playback possible inside VS Code:

+---------------------------------------------------------+
|               Why a Local Proxy Server?                 |
+---------------------------------------------------------+
|                                                         |
|  VS Code Webview has strict Content Security Policy     |
|  (CSP) that blocks direct YouTube embeds.               |
|                                                         |
|  Solution: Serve content from localhost!                |
|                                                         |
|     +---------+         +-----------------+             |
|     | Webview | ------->| 127.0.0.1:PORT  |             |
|     +---------+  iframe | Local Server    |             |
|                         +--------+--------+             |
|                                  |                      |
|                                  v                      |
|                         +-----------------+             |
|                         | YouTube iFrame  |             |
|                         | Player API      |             |
|                         +-----------------+             |
|                                                         |
+---------------------------------------------------------+

Key Features:

• Dedicated Server Per Video: Each video gets its own server on a random port, preventing shared-state conflicts
• Unique Origins: Each tab has a unique origin (http://127.0.0.1:RANDOM_PORT), isolating cookies and localStorage
• Automatic Cleanup: Server closes when the panel is disposed

4. Webview Panel

Displays the video player with full YouTube iframe API support:

+---------------------------------------------+
|  Webview Panel                              |
|  +---------------------------------------+  |
|  |                                       |  |
|  |     +---------------------------+     |  |
|  |     |                           |     |  |
|  |     |     YouTube Video         |     |  |
|  |     |     (Full Controls)       |     |  |
|  |     |                           |     |  |
|  |     +---------------------------+     |  |
|  |                                       |  |
|  +---------------------------------------+  |
|  Streaming via Local Proxy (Port XXXXX)     |
+---------------------------------------------+

📂 Project Structure

vs-code_extension/
├── 📁 src/
│   ├── 📄 extension.ts        # Main extension entry point
│   └── 📄 SidebarProvider.ts  # Sidebar tree data provider
├── 📁 out/                    # Compiled JavaScript output
├── 📁 .vscode/                # VS Code configuration
├── 📄 package.json            # Extension manifest
├── 📄 tsconfig.json           # TypeScript configuration
└── 📄 README.md               # This file

🛠️ How It Works (Step by Step)

Adding a Video

sequenceDiagram
    participant User
    participant Extension
    participant NoEmbed API
    participant GlobalState
    participant Sidebar

    User->>Extension: Click "Add Video" button
    Extension->>User: Show input box for URL
    User->>Extension: Paste YouTube URL
    Extension->>Extension: Extract Video ID (regex)
    Extension->>NoEmbed API: Fetch video title
    NoEmbed API->>Extension: Return video metadata
    Extension->>GlobalState: Save to history
    GlobalState->>Sidebar: Refresh tree view
    Extension->>Extension: Auto-play video

Playing a Video

sequenceDiagram
    participant User
    participant Extension
    participant HTTPServer
    participant Webview
    participant YouTube API

    User->>Extension: Click video in sidebar
    Extension->>HTTPServer: Start dedicated server (Port 0 = random)
    HTTPServer->>Extension: Return server instance + port
    Extension->>Webview: Create panel (ViewColumn.Beside)
    Webview->>HTTPServer: Request /player?v=VIDEO_ID
    HTTPServer->>Webview: Return HTML with YouTube iframe
    Webview->>YouTube API: Load player
    YouTube API->>Webview: Stream video
    Note over User,YouTube API: Video plays in VS Code!

🚀 Installation & Development

Prerequisites

• Node.js 16+
• VS Code 1.80.0+

Setup

# Clone the repository
git clone <repository-url>
cd vs-code_extension

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch for changes (development)
npm run watch

Running the Extension

1. Open the project in VS Code
2. Press fn + F5 or F5 to launch the Extension Development Host
3. In the new VS Code window, look for the SideTube icon in the Activity Bar

📦 Extension Manifest

Key configurations in package.json:

Contribution Points

• Views Container: Adds SideTube to the Activity Bar
• Views: "SideTube Player" tree view
• Commands: Add, Play, Delete, Clear History
• Menus: Title bar buttons + inline context menu

🔒 Technical Challenges Solved

1. YouTube Embedding in Webview

VS Code's CSP blocks direct YouTube embeds. Solved by creating a local HTTP server that serves allowed content.

2. Multi-Tab Support

Each video gets a dedicated server on a unique port, ensuring no shared state between tabs.

3. Server Lifecycle Management

Servers are automatically cleaned up when panels are closed, preventing resource leaks.

4. Video Title Fetching

Uses the free NoEmbed API to fetch video titles without requiring a YouTube API key.

🎯 Features

• 📺 Watch & Code: YouTube videos open in a dedicated, locked sidebar (Split View).
• 📂 Playlist Import: Paste a YouTube Playlist URL to import entire courses instantly as collapsible folders.
• ⭐ Favorites: Star (★) your best tutorials. They stay at the top with a visible gold star icon.
• ⏱️ Auto-Resume: Videos automatically remember where you left off.
• ⏯️ Smart Controls: Play/Pause directly from the sidebar; the icon updates in real-time.
• 🧠 Smart Focus: Opening a video automatically returns focus to your code editor.
• 🧹 Clean Experience: Minimal distractions with related videos limited to the same channel.
• ✅ History Management: Track, search, and manage your watch history.
• ✅ Privacy: Local proxy server ensures each video runs in a sandboxed environment.
• ✅ Drag & Drop: (Coming soon)
• ✅ Multi-tab/side-by-side video support
• ✅ Context menu checks for easy management

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📜 License

This project is licensed under the MIT License.

👨‍💻 Author

Created with ❤️ to make learning programming more seamless.

Remember: Learning to code shouldn't require a screen-splitting headache!