Add media browser feature with UI improvements
- Refactored index.html: Split into separate HTML (309 lines), CSS (908 lines), and JS (1,286 lines) files - Implemented media browser with folder configuration, recursive navigation, and thumbnail display - Added metadata extraction using mutagen library (title, artist, album, duration, bitrate, codec) - Implemented thumbnail generation and caching with SHA256 hash-based keys and LRU eviction - Added platform-specific file playback (os.startfile on Windows, xdg-open on Linux, open on macOS) - Implemented path validation security to prevent directory traversal attacks - Added smooth thumbnail loading with fade-in animation and loading spinner - Added i18n support for browser (English and Russian) - Updated dependencies: mutagen>=1.47.0, pillow>=10.0.0 - Added comprehensive media browser documentation to README Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
88
README.md
88
README.md
@@ -89,6 +89,94 @@ We welcome translations for additional languages! To contribute a new locale:
|
||||
|
||||
See [CLAUDE.md](CLAUDE.md#internationalization-i18n) for detailed translation guidelines.
|
||||
|
||||
## Media Browser
|
||||
|
||||
The Media Browser feature allows you to browse and play media files from configured folders directly through the Web UI.
|
||||
|
||||
### Browser Features
|
||||
|
||||
- **Folder Configuration** - Mount multiple media folders (music/video directories)
|
||||
- **Recursive Navigation** - Browse through folder hierarchies with breadcrumb navigation
|
||||
- **Thumbnail Display** - Automatically generated thumbnails from album art
|
||||
- **Metadata Extraction** - View title, artist, album, duration, bitrate, and more
|
||||
- **Remote Playback** - Play files on the PC running the media server (not in the browser)
|
||||
- **Last Path Memory** - Automatically returns to your last browsed location
|
||||
- **Lazy Loading** - Thumbnails load only when visible for better performance
|
||||
|
||||
### Configuration
|
||||
|
||||
Add media folders in your `config.yaml`:
|
||||
|
||||
```yaml
|
||||
# Media folders for browser
|
||||
media_folders:
|
||||
music:
|
||||
path: "C:\\Users\\YourUsername\\Music"
|
||||
label: "My Music"
|
||||
enabled: true
|
||||
videos:
|
||||
path: "C:\\Users\\YourUsername\\Videos"
|
||||
label: "My Videos"
|
||||
enabled: true
|
||||
|
||||
# Thumbnail size: "small" (150x150), "medium" (300x300), or "both"
|
||||
thumbnail_size: "medium"
|
||||
```
|
||||
|
||||
### How Playback Works
|
||||
|
||||
When you play a file from the Media Browser:
|
||||
|
||||
1. The file is opened using the **default system media player** on the PC running the media server
|
||||
2. This is designed for **remote control scenarios** where you browse media from one device (e.g., Home Assistant dashboard, phone) but want audio to play on the PC
|
||||
3. The media player must support the **Windows Media Session API** for playback tracking
|
||||
|
||||
### Media Player Compatibility
|
||||
|
||||
**⚠️ Important Limitation:** Not all media players expose their playback information to the Windows Media Session API. This means some players will open and play the file, but the Media Server UI won't show playback status, track information, or allow remote control.
|
||||
|
||||
**✅ Compatible Players** (work with playback tracking):
|
||||
|
||||
- **VLC Media Player** - Full support
|
||||
- **Groove Music** (Windows 10/11 built-in) - Full support
|
||||
- **Spotify** - Full support (if already running)
|
||||
- **Chrome/Edge/Firefox** - Full support for web players
|
||||
- **foobar2000** - Full support (with proper configuration/plugins)
|
||||
|
||||
**❌ Limited/No Support:**
|
||||
|
||||
- **Windows Media Player Classic** - Opens files but doesn't expose session info
|
||||
- **Windows Media Player** (classic version) - Limited session support
|
||||
|
||||
**Recommendation:** Set **VLC Media Player** or **Groove Music** as your default audio player for the best experience with the Media Browser.
|
||||
|
||||
#### Changing Your Default Media Player (Windows)
|
||||
|
||||
1. Open Windows Settings → Apps → Default apps
|
||||
2. Search for "Music player" or "Video player"
|
||||
3. Select VLC Media Player or Groove Music
|
||||
4. Files opened from Media Browser will now use the selected player
|
||||
|
||||
### API Endpoints
|
||||
|
||||
The Media Browser exposes several REST API endpoints:
|
||||
|
||||
| Endpoint | Method | Description |
|
||||
|--------------------------|--------|-----------------------------------|
|
||||
| `/api/browser/folders` | GET | List configured media folders |
|
||||
| `/api/browser/browse` | GET | Browse directory contents |
|
||||
| `/api/browser/metadata` | GET | Get media file metadata |
|
||||
| `/api/browser/thumbnail` | GET | Get thumbnail image |
|
||||
| `/api/browser/play` | POST | Open file with default player |
|
||||
|
||||
All endpoints require bearer token authentication.
|
||||
|
||||
### Security Notes
|
||||
|
||||
- **Path Traversal Protection** - All paths are validated to prevent directory traversal attacks
|
||||
- **Folder Restrictions** - Only configured folders are accessible
|
||||
- **Authentication Required** - All endpoints require a valid API token
|
||||
|
||||
## Requirements
|
||||
|
||||
- Python 3.10+
|
||||
|
||||
Reference in New Issue
Block a user