📺 Material Media Card
NOTE
✨ Available on 💎 Pro & Ultimate Version Only
✨ Overview
The Material Media Card provides a clean and modern interface for controlling your media players. Following Material You design principles, it offers dynamic icons, artwork visibility, and intuitive playback controls.
✨ Key Features
- Dynamic Icons: Automatically switches icons based on the device type (TV, speaker, etc.).
- App Recognition: Displays specific icons for popular services like Netflix, Prime Video, and YouTube.
- Artwork Support: Shows high-quality media covers when content is playing.
- Progress Tracking: Includes an optional progress bar and time indicator.
- Responsive Controls: Quick access to play, pause, skip, and volume.
⚙️ Configuration
| Name | Type | Default | Description |
|---|---|---|---|
type | string | Required | custom:material-media-card |
entity | string | Required | The entity ID of the media player (e.g., media_player.living_room_tv). |
name | string | Optional | Overrides the friendly name of the media player. |
icon | string | Optional | Overrides the default icon. |
settings | object | Optional | Detailed behavior and visibility settings. |
tap_action | object | Optional | Action to perform on tap. |
hold_action | object | Optional | Action to perform on hold. |
double_tap_action | object | Optional | Action to perform on double tap. |
Settings Options (settings)
| Name | Type | Default | Description |
|---|---|---|---|
show_name | boolean | false | Displays the player name next to the icon. |
show_dynamic_icon | boolean | true | Enables device-specific dynamic icons. |
show_app_icon | boolean | true | Shows the current application icon (Netflix, YouTube, etc.). |
show_cover | boolean | true | Displays the media artwork if available. |
show_time | boolean | true | Shows playback progress and time information. |
🚀 Usage Examples
Example Configuration:
yaml
type: custom:material-media-card
entity: media_player.google_home_mini
name: Studio Speaker
settings:
show_name: true
show_cover: true
show_time: true
tap_action:
action: more-info🎨 Extended Customization
⚠️ LICENSE
Only for PRO and ULTIMATE users, get your licence now 🚀.
This card have a own version of Card-Mod. You can inject custom CSS to override any style or create unique animations.
💡 ADVANCED STYLING
👉 Check out the Styling Guide.