Browse, play, and manage audio & video files directly inside VS Code — a full media library with professional player UI/UX.
A beautiful, feature-rich media explorer and player that brings your audio and video collection into VS Code with thumbnails, waveforms, playlists, advanced search, and a sleek fullscreen-capable video player.
Made with ❤️ by Anand Shah for developer community.
✨ Features
- 🎨 Professional Media Player: Modern, polished UI/UX with custom controls, seek bar, volume, playback speed (0.5x–2x), picture-in-picture, fullscreen support for videos, keyboard shortcuts (Space, arrows, F for fullscreen, M for mute).
- 📱 Media Explorer: Virtualized grid, list, or compact views in the Activity Bar. Progressive loading with rich thumbnails (FFmpeg-powered).
- 🔍 Advanced Search & Sort: Powerful query language (
type:video, artist:"name", resolution:>=1080p, duration:>5m) + sorting by metadata.
- 📋 Playlists: Create, manage, import/export, drag-and-drop reordering, "Recent" history.
- 📊 Rich Metadata: Extracts title, artist, album, codec, bitrate, resolution, duration using
music-metadata + ffprobe.
- 🎵 Waveforms: Clickable audio waveform visualization.
- 🛠 File Management: Safe rename, delete (to trash), bulk move/copy, duplicate detection via content hash.
- 📁 Folder Navigation: Dedicated sidebar tree to filter by folder.
- 🔄 Honest Format Support: Graceful degradation for exotic formats (transcode via optional FFmpeg or "Open Externally").
- ⌨️ Keyboard Shortcuts & Accessibility: Full keyboard support, focus management, theme-aware design.
- ⚡ Zero mandatory deps: Works out of the box; FFmpeg optional for enhanced features.
🚀 Quick Start
- Install MediaStudio from the VS Code Marketplace.
- Open the MediaStudio icon in the Activity Bar (or run
MediaStudio: Scan Workspace).
- Your workspace media files will appear automatically (audio, video, optional images).
- Double-click any file to open the professional player.
- For video files, press
F or use the fullscreen button for immersive viewing.
- (Optional) Install FFmpeg for thumbnails, waveforms, and support for more formats.
🎮 Usage
- Player Controls: Play/pause, precise seeking, adjustable speed, volume slider, PiP, fullscreen.
- Keyboard:
Space: Play/Pause←/→: Seek 5s (Shift for 30s)F: Fullscreen (videos)M: Mute
- Explorer: Use search bar, sort dropdown, view toggles, playlist chips.
- Context Menu: Right-click files in Explorer for quick actions (Open, Metadata, Reveal, Rename, Delete).
See MediaStudio-Architecture.md for technical details.
⚙️ Configuration
Key settings (Preferences → Settings → search "mediastudio"):
| Setting |
Default |
Description |
mediastudio.defaultView |
"grid" |
Default layout (grid | list | compact) |
mediastudio.autoScan |
true |
Auto-scan workspace on open |
mediastudio.generateThumbnails |
true |
Generate video thumbnails (needs FFmpeg) |
mediastudio.generateWaveforms |
true |
Generate audio waveforms (needs FFmpeg) |
mediastudio.ffmpegPath |
"" |
Custom path to FFmpeg/ffprobe |
mediastudio.includeImages |
false |
Include image files in explorer |
mediastudio.confirmDelete |
true |
Confirm before deleting files |
📋 Changelog
See CHANGELOG.md for detailed version history. Latest improvements include a more professional player UI/UX with dedicated fullscreen support for videos.
🤝 Contributing
Contributions, issues, and feature requests are welcome! See CONTRIBUTING.md for details.
Please run the test suite before submitting PRs.
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ by Anand Shah for developer community.
Bringing professional media playback and management to every VS Code user.
| |
