Elevate your workspace with TechnoMindz Media Hub — a sleek, powerful, and responsive media controller designed to keep your focus sharp and your music perfectly synced directly inside Visual Studio Code.
Preview
Demo
See TechnoMindz Media Controller controlling your system media directly from VS Code.
▶️ Watch the Full Demo Video Here
⚠️ This extension currently works only on Windows because it uses the Windows Media Transport Controls API via WinRT.
You can find the repo here : TechnoMindz Media Hub
Features
- Spotify-Style Webview UI: A beautiful, dark-themed responsive UI panel that sits cleanly in your Explorer sidebar.
- Adaptive Layout: Regardless of how narrow or short you compress your sidebar, the Media Hub dynamically adjusts its Flexbox layout to keep album art and controls instantly accessible.
- Live System Synchronization: Automatically detects the active media session (Spotify, Apple Music, YouTube in a browser, etc.) playing on Windows and binds to it.
- Real-Time Progress Tracking: View your exact playback position with a dynamic scrubber that tracks milliseconds live.
- Interactive Scrubber: Click or drag the progress bar to instantly seek to any point in the track.
- Auto-Scrolling Marquees: Long track titles or artist names automatically scroll across the screen so nothing is ever cut off.
- Integrated Controls:
- Play / Pause
- Next Track
- Previous Track
- Fallback Branding: Automatically displays the custom TechnoMindz logo when no album art is provided by the media source.
- Status Bar Integration: A lightweight hoverable track display sits quietly at the bottom of VS Code alongside quick-access media buttons.
Requirements
This extension requires a Windows OS environment to function, as it uses native Windows Runtime (WinRT) bindings and the winsdk API to interface directly with the global system Media Transport Controls.
Python Environment
To fetch Album Art and live timeline scrubber properties, the extension spins up a lightweight Python background process.
You will need Python 3 installed and accessible via your system PATH or integrated .venv.
Dependencies:
You must install the required dependency using Python.
Open a terminal and run:
pip install winsdk
Make sure Python is installed on your computer and available in your system PATH.
Step-by-Step Installation
- Open VS Code (
Ctrl + Shift + X to open Extensions).
- Search for TechnoMindz Media Controller and click Install.
- Ensure Python 3 is installed on your computer and added to your system PATH.
- Open a new terminal in VS Code (or your command prompt) and run this exact command to install the required Windows integrations:
pip install winsdk
- Reload VS Code.
Developer Setup
- Clone the repository into your VS Code extensions folder or open the folder directly in VS Code.
- Run
npm install to install extension dependencies.
- Ensure your Python environment has
winsdk installed (pip install winsdk).
- Press
F5 to open an Extension Development Host with the Media Hub loaded.
How to Use
Once installed and activated:
- Open the Explorer sidebar in VS Code (
Ctrl + Shift + E).
- Expand the accordion tab labeled
TechnoMindz Media Hub.
- Play any media on your system (Spotify, Chrome, YouTube, Music apps).
- The panel will instantly sync with the playing track, displaying the Album Art, Artist, Title, and playback scrubber.
- Use the UI buttons or the bottom Status bar buttons to control your system's media without ever leaving your editor.
Commands
You can also control media from the Command Palette.
Open Command Palette (Ctrl + Shift + P) and run:
Media: Play / PauseMedia: Next TrackMedia: Previous Track
First Run
When the extension starts for the first time, it launches a lightweight Python background process that connects to Windows Media Transport Controls.
If no media is currently playing, the panel will display the TechnoMindz logo until a media session becomes active.
Extension Settings
Currently, TechnoMindz Media automatically locks onto the most actively playing session on your Windows system. If you pause a session, it deliberately "sticks" to the paused app ID so you don't mysteriously jump to other inactive apps.
Known Issues
- Linux / macOS Support: Because this relies deeply on Windows standard
winsdk and internal Media Transport controls, this extension currently only works fully on Windows operating systems.
- Web Browser Media Art: Some web browser media sessions (like a YouTube tab in Chrome) might not always export high-res Album Art to the Windows Media Transport pipeline depending on the browser version. The extension handles this gracefully by defaulting to the TechnoMindz logo.
Release Notes
0.0.1
Initial release of TechnoMindz Media.
- Fully integrated Spotify-style Webview Interface.
- Live python-powered timeline scrubbing and Base64 Thumbnail extraction.
- Completely responsive CSS architecture with Marquee wrappers.
- Windows Media Session sticky binding.
