├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── workflows │ └── hacs.yml ├── .gitignore ├── README.md ├── hacs.json ├── img ├── card_mod_2.png ├── card_mod_3.png ├── card_mod_4.png ├── card_mod_grouping_margin.png ├── custom_favorites.png ├── device_icons.png ├── dynamic_volumes.png ├── grouping.png ├── groups.png ├── media_browser.png ├── media_content_id.png ├── player.png ├── queue.png ├── sections.png ├── styling.png └── volumes.png └── src └── CODE.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [punxaphil] 2 | patreon: PunxaPhil 3 | custom: ['https://www.buymeacoffee.com/punxaphil'] 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: bug 6 | assignees: '' 7 | --- 8 | 9 | 14 | 15 | **Checklist:** 16 | 17 | - [ ] I updated to the latest version available 18 | - [ ] I cleared the cache of my browser 19 | 20 | **Release with the issue:** 21 | 22 | **Last working release (if known):** 23 | 24 | **Browser and Operating System:** 25 | 26 | 29 | 30 | **Description of problem:** 31 | 32 | 35 | 36 | **Javascript errors shown in the web inspector (if applicable):** 37 | 38 | ``` 39 | 40 | ``` 41 | 42 | **Additional information:** 43 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: feature request 6 | assignees: '' 7 | --- 8 | 9 | **Is your feature request related to a problem? Please describe.** 10 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 11 | 12 | **Describe the solution you'd like** 13 | A clear and concise description of what you want to happen. 14 | 15 | **Describe alternatives you've considered** 16 | A clear and concise description of any alternative solutions or features you've considered. 17 | 18 | **Additional context** 19 | Add any other context or screenshots about the feature request here. 20 | -------------------------------------------------------------------------------- /.github/workflows/hacs.yml: -------------------------------------------------------------------------------- 1 | name: HACS Action 2 | 3 | on: 4 | push: 5 | pull_request: 6 | schedule: 7 | - cron: "25 23 * * *" 8 | 9 | jobs: 10 | hacs: 11 | name: HACS Action 12 | runs-on: ubuntu-latest 13 | steps: 14 | - name: HACS Action 15 | uses: hacs/action@main 16 | with: 17 | category: plugin -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | dist/ 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Maxi Media Player 2 | 3 | Maxi Media Player for Home Assistant UI with a focus on managing multiple media players! 4 | 5 | ## Features: 6 | 7 | * Group/Ungroup speakers 8 | * Control multiple speakers 9 | * Play favorites from list 10 | * Media browser button 11 | * Control individual volumes in a group 12 | * Artwork background 13 | * Possibility to override artwork 14 | * Shuffle and repeat mode 15 | * Theming 16 | * Configurable styling 17 | * Dynamic volume level slider 18 | * Track progress bar 19 | 20 | and more! 21 | 22 | ![player.png](https://github.com/punxaphil/maxi-media-player/raw/main/img/player.png) 23 | ![media_browser.png](https://github.com/punxaphil/maxi-media-player/raw/main/img/media_browser.png) 24 | ![groups.png](https://github.com/punxaphil/maxi-media-player/raw/main/img/groups.png) 25 | ![grouping.png](https://github.com/punxaphil/maxi-media-player/raw/main/img/grouping.png) 26 | ![volumes.png](https://github.com/punxaphil/maxi-media-player/raw/main/img/volumes.png) 27 | 28 | ## Support the project 29 | 30 | Do you like the Maxi Media Player? Support the project with a coffee ☕️ 31 | 32 | [![BMC](https://www.buymeacoffee.com/assets/img/custom_images/white_img.png)](https://www.buymeacoffee.com/punxaphil) 33 | 34 | # Installation 35 | ## With HACS (recommended) 36 | Recommended way of installing this card is with HACS [Home Assistant Community Store](https://hacs.xyz/). 37 | 38 | ## Without HACS 39 | 1. Download this file: maxi-media-player.js 40 | 1. Add this file into your /www folder 41 | 1. On your dashboard click on the icon at the right top corner then on Edit dashboard 42 | 1. Click again on that icon and then on Manage resources 43 | 1. Click on Add resource 44 | 1. Copy and paste this: /local/maxi-media-player.js?v=1 45 | 1. Click on JavaScript Module then Create 46 | 1. Go back and refresh your page 47 | 1. You can now click on Add card in the bottom right corner and search for Maxi Media Player 48 | 1. After any update of the file you will have to edit /local/maxi-media-player.js?v=1 and change the version to any higher number 49 | 50 | ## Usage 51 | 52 | ### Individual sections 53 | 54 | By default, all sections of the card is available, and you can jump between them in the footer of the card. 55 | 56 | However, you can also select individual sections to enable. Use this if you want to show the different sections next to 57 | each other (by adding multiple instances of the card with different sections enabled). 58 | 59 | By using the section configuration you can utilise the full power of Home Assistant's layout capabilities and also drag in other cards in your Dashboard view. 60 | 61 | ### Configuration 62 | 63 | Use the Visual Editor in Home Assistant to configure the card. Most options are available there. 64 | 65 | ### Configuration in YAML 66 | 67 | ```yaml 68 | type: custom:maxi-media-player 69 | entities: # Required unless you specify entityPlatform 70 | - media_player.kitchen_player 71 | - media_player.hallway_player 72 | - media_player.bedroom_player 73 | - media_player.livingroom_player 74 | excludeItemsInEntitiesList: true # Will invert the selection in the `entities` list, so that all players that are not in the list will be used. 75 | entityPlatform: sonos # will select all entities for this platform. Will override the `entities` list if set. 76 | ``` 77 | 78 | All settings below are optional 79 | ```yaml 80 | # common for all sections 81 | title: '' 82 | sections: # see explanation further up 83 | - volumes 84 | - groups 85 | - grouping 86 | - media browser 87 | - player 88 | widthPercentage: 75 # default is 100. Use this to change the width of the card. 89 | heightPercentage: 75 # default is 100. Use this to change the height of the card. Set to 'auto' to make the card height adjust to the content. 90 | footerHeight: 4 # default is 5. Unit is 'rem'. Use this to change the height of the footer. 91 | entityId: media_player.bedroom # Forces this player to be the selected one on loading the card (overrides url param etc) 92 | entityNameRegexToReplace: ' PLAYER' # Regex pattern to replace parts of the entity names 93 | entityNameReplacement: '' 94 | volumeStepSize: 1 # Use this to change the step size when using volume up/down. Default is to use the step size of Home Assistant's media player integration. 95 | adjustVolumeRelativeToMainPlayer: true # default is false, which means all players will be set to the same volume as the main player. If set to true, volume will be adjusted relative to the main player in the group. 96 | sectionButtonIcons: # customize icons for the section buttons 97 | player: mdi:ab-testing 98 | mediaBrowser: mdi:star-box-multiple 99 | groups: mdi:multicast 100 | grouping: mdi:group 101 | volumes: mdi:volume-high 102 | mediaTitleRegexToReplace: '.wav?.*' # Regex pattern to replace parts of the media title 103 | mediaTitleReplacement: ' radio' # Replacement for the media title regex pattern 104 | inverseGroupMuteState: true # default is false, which means that only if all players are muted, mute icon shows as 'muted'. If set to true, mute icon will show as 'muted' if any player is muted. 105 | 106 | # groups specific 107 | groupsTitle: '' 108 | hideGroupCurrentTrack: true # default is false, which means song/track info for groups will be shown 109 | 110 | # grouping specific 111 | groupingTitle: '' 112 | predefinedGroups: # defaults to empty 113 | - name: Inside 114 | volume: 15 # If you want to set the volume of all speakers when grouping 115 | unmuteWhenGrouped: true # If you want to unmute all speakers when grouping 116 | entities: 117 | - media_player.bedroom 118 | - media_player.hall 119 | - name: Kitchen&Hall 120 | media: Legendary # If you want to start playing a specific favorite when grouping 121 | entities: # Use below format if you want to set the volume of the speakers when grouping 122 | - player: media_player.kitchen 123 | volume: 10 124 | - player: media_player.hall 125 | volume: 5 126 | - name: All (except TV) 127 | excludeItemsInEntitiesList: true # Invert entities selection, so that all players will be grouped except those in the entities list 128 | entities: 129 | - media_player.tv 130 | skipApplyButtonWhenGrouping: true # default is false. Will skip the apply button when grouping. 131 | dontSwitchPlayerWhenGrouping: true # default is false. Will not switch to another player if main player is ungrouped. 132 | groupingButtonIcons: # Use this to set custom icons for the grouping buttons. 133 | predefinedGroup: mdi:account-group # default is mdi:speaker-multiple 134 | joinAll: mdi:account-multiple # default is mdi:checkbox-multiple-marked-outline 135 | unJoinAll: mdi:account-remove # default is mdi:minus-box-multiple-outline 136 | 137 | # player specific 138 | hidePlayerControlNextTrackButton: true # default is false, hides player control next track button. 139 | hidePlayerControlPrevTrackButton: true # default is false, hides player control previous track button. 140 | hidePlayerControlRepeatButton: true # default is false, hides player control track repeat mode button. 141 | hidePlayerControlShuffleButton: true # default is false, hides player control track shuffle mode button. 142 | hidePlayerControlPowerButton: true # default is false, hides player control power button if media player TURN_ON feature is enabled. This setting does nothing if media player TURN_ON feature is not supported. 143 | showVolumeUpAndDownButtons: true # default is false, shows buttons for increasing and decreasing volume 144 | showFastForwardAndRewindButtons: true # default is false, shows fast forward and rewind buttons 145 | fastForwardAndRewindStepSizeSeconds: 60 # default is 15 seconds 146 | labelWhenNoMediaIsSelected: 'No media selected' 147 | labelForTheAllVolumesSlider: 'All volumes' 148 | mediaArtworkOverrides: # Show your own selected artwork if certain rules match 149 | - mediaTitleEquals: TV 150 | imageUrl: https://cdn-icons-png.flaticon.com/512/716/716429.png 151 | sizePercentage: 40 152 | - mediaContentIdEquals: "x-htastream:RINCON_949F3EC2E15B01400:spdif" 153 | imageUrl: https://cdn-icons-png.flaticon.com/512/4108/4108783.png 154 | - mediaTitleEquals: p4malmo-aac-192 155 | imageUrl: >- 156 | https://mytuner.global.ssl.fastly.net/media/tvos_radios/2BDTPrpMbn_cTdteqo.jpg 157 | - mediaArtistEquals: Metallica 158 | imageUrl: >- 159 | https://mytuner.global.ssl.fastly.net/media/tvos_radios/2BDTPrpMbn_cTdteqo.jpg 160 | - mediaAlbumNameEquals: "Master of Puppets" 161 | imageUrl: >- 162 | https://mytuner.global.ssl.fastly.net/media/tvos_radios/2BDTPrpMbn_cTdteqo.jpg 163 | - mediaChannelEquals: "Sky Radio Smooth Hits" 164 | imageUrl: https://cdn-icons-png.flaticon.com/512/4108/4108794.png 165 | - ifMissing: true # ifMissing will only be used if none of the "Equals" overrides above resulted in a match 166 | imageUrl: https://cdn-icons-png.flaticon.com/512/651/651758.png 167 | customFavorites: # Read more in 'Custom Favorites' section below 168 | media_player.tv: # set this to 'all' to show the custom favorite for all players 169 | - title: TV # Must match the name of the source (unless you specify media_content_id/type as shown below) 170 | thumbnail: https://cdn-icons-png.flaticon.com/512/716/716429.png 171 | all: 172 | - title: BBC 173 | media_content_id: media-source://radio_browser/98adecf7-2683-4408-9be7-02d3f9098eb8 174 | media_content_type: music 175 | thumbnail: http://cdn-profiles.tunein.com/s24948/images/logoq.jpg?t=1 176 | dynamicVolumeSlider: true # default is false. See more in section further down. 177 | dynamicVolumeSliderThreshold: 30 # default is 20. Use this to change the threshold for the dynamic volume slider. 178 | dynamicVolumeSliderMax: 40 # default is 30. Use this to change the max value for the dynamic volume slider. 179 | artworkHostname: http://192.168.0.59:8123 #default is ''. Usually not needed, but depending on your setup your device might not be able to access the artwork on the default host. One example where it could be needed is if you cast the dashboard with Google Cast. 180 | showAudioInputFormat: true # default is false. Will show the audio input format (e.g. Dolby Digital) in the player section if available. By default, it will only show if the input format in the volumes section. 181 | fallbackArtwork: https://cdn-icons-png.flaticon.com/512/651/651717.png # Override default fallback artwork image if artwork is missing for the currently selected media. 182 | entitiesToIgnoreVolumeLevelFor: # default is empty. Use this if you want to ignore volume level for certain players in the player section. Useful if you have a main device with fixed volume. 183 | - media_player.my_sonos_port_device 184 | artworkMinHeight: 10 # default is 5. Use this to change the minimum height of the artwork in the player section. Unit is in rem. 185 | artworkAsBackground: true # default is false. Will show the artwork as background for the player section. 186 | playerVolumeEntityId: media_player.bedroom # default is empty. Use this to control the volume of another player in the player section. Entity ID must the selected player or part of the selected player's group, otherwise it will not be controlled. 187 | allowPlayerVolumeEntityOutsideOfGroup: true # default is false. Will allow the playerVolumeEntityId to be outside the group of the selected player. 188 | showSourceInPlayer: true # default is false. Will show the source (if available) in the player section. 189 | showBrowseMediaInPlayerSection: true # default is false. Will show the browse media button in the player section. 190 | showChannelInPlayer: true # default is false. Will show the channel (if available) in the player section. This can for instance be the radio station name. 191 | hidePlaylistInPlayer: true # default is false. Will hide the playlist name in the player section. 192 | stopInsteadOfPause: true # default is false. Will show the stop button instead of the pause button when media is playing. 193 | 194 | # media browser specific 195 | favoritesItemsPerRow: 1 # default is 4. Use this to show items as list. 196 | favoritesHideTitleForThumbnailIcons: true # default is false. Only makes a difference if favoritesItemsPerRow > 1. Will hide title for thumbnail artworks. 197 | customFavoriteThumbnails: 198 | Voyage: https://i.scdn.co/image/ab67706f000000027b2e7ee752dc222ff2fd466f 199 | customFavoriteThumbnailsIfMissing: 200 | Ed Sheeran Radio: https://i.scdn.co/image/ab6761610000e5eb4d2f80ceffc6c70a432ccd7c 201 | Legendary: https://i.scdn.co/image/ab67706f000000027b2e7ee752dc222ff2fd466f 202 | fallback: https://cdn-icons-png.flaticon.com/512/651/651717.png # will use this if thumbnail is missing and none of the above matches. Defaults to image of music notes. 203 | favoritesToIgnore: # will compare both against title and media_content_id 204 | - My Favorite Album # Hide specific title 205 | - Christmas # Hide any titles matching 'Christmas' 206 | - radio_browser # Hide any radio stations from radio_browser (since their media_content_id contains this string) 207 | topFavorites: # Show these favorites at the top of the list 208 | - Legendary 209 | - Country Rocks 210 | - Kacey Musgraves Radio 211 | numberOfFavoritesToShow: 10 # Use this to limit the amount of favorites to show 212 | hideBrowseMediaButton: true # default is false. Hides the button to open the media browser. 213 | replaceHttpWithHttpsForThumbnails: true # default is false. Use this if you want to replace http with https for thumbnails. 214 | mediaBrowserTitle: My favorites # default is 'All favorites'. Use this to change the title for the media browser/favorites section. 215 | sortFavoritesByType: true # default is false. Will group favorites by type (e.g. radio, playlist, album). 216 | 217 | # volumes specific 218 | hideVolumeCogwheel: true # default is false. Will hide the cogwheel for the volumes section. 219 | 220 | ``` 221 | 222 | ## Using individual section cards 223 | 224 | As mentioned earlier, use the individual sections for more layout flexibility. 225 | 226 | Here is an example: 227 | 228 | ![sections.png](https://github.com/punxaphil/maxi-media-player/raw/main/img/sections.png) 229 | ```yaml 230 | type: horizontal-stack 231 | cards: 232 | - type: custom:maxi-media-player 233 | sections: 234 | - groups 235 | - volumes 236 | - type: custom:maxi-media-player 237 | sections: 238 | - player 239 | - type: custom:maxi-media-player 240 | sections: 241 | - grouping 242 | - media browser 243 | ``` 244 | 245 | ## Theme variables 246 | 247 | The following variables are being used and can be set in your theme to change the appearance of the card: 248 | ``` 249 | --accent-color 250 | --primary-color 251 | --secondary-text-color 252 | --secondary-background-color 253 | --disabled-text-color 254 | ``` 255 | 256 | Read more about using theme variables here: https://www.home-assistant.io/integrations/frontend/#defining-themes 257 | 258 | ## Custom Favorites 259 | 260 | You can add your own buttons to the Favorites section. This can be useful if you want to quickly start a specific radio station or playlist. 261 | 262 | To determine what to configure for a button do the following: 263 | 1. Start playing the radio station or playlist you want to add. This can for instance be done in this card's media browser or in the built-in Home Assistant Media page. 264 | 2. Open the Developer Tools in Home Assistant. 265 | 3. Go to the States tab. 266 | 4. Find the media player entity that is playing the radio station or playlist. 267 | 5. Look for the `media_content_id` and `media_content_type` attributes. 268 | 6. For the thumbnail, you can inspect the HTML to see what image the media browser is using, or you can also use a local URL if you have the image stored locally. 269 | 7. Use these values to configure the custom favorite. 270 | 271 | Example: 272 | ![custom_favorites.png](https://github.com/punxaphil/maxi-media-player/raw/main/img/custom_favorites.png) 273 | 274 | ```yaml 275 | type: custom:maxi-media-player 276 | customFavorites: 277 | all: # 'all' means it will show for all players, otherwise specify the entity_id of the player. 278 | - title: BBC 279 | media_content_id: x-rincon-mp3radio://http://stream.live.vc.bbcmedia.co.uk/bbc_world_service 280 | media_content_type: music 281 | thumbnail: http://cdn-profiles.tunein.com/s24948/images/logoq.jpg?t=1 282 | ``` 283 | 284 | ### Finding media_content_id (advanced) 285 | 286 | If you want to find the `media_content_id` for a specific radio station or playlist, sometimes the above method is not enough. If so, you can use the following method to find it: 287 | 1. Open Media tab 288 | 2. Open Chrome Dev Tools 289 | 3. Go to Network tab 290 | 4. Filter on "WS" 291 | 5. Reload page 292 | 6. Now you will see a row `websocket`, click on `websocket` 293 | 7. Select Messages tab 294 | 8. Add filter `play_media` 295 | 9. Now navigate to your playlist, and start playing it 296 | 10. A line will appear, click on it 297 | 11. Expand the JSON object, and look under `service_data` 298 | There you will see something like: 299 | ``` 300 | entity_id: "media_player.kok" 301 | media_content_id: "spotify://8fb1de564ba7e4c8c4512361860574c83b9/spotify:playlist:1Oz4xMzRKtRiEs51243ZknqGJm" 302 | media_content_type: "spotify://playlist" 303 | ``` 304 | 305 | ![media_content_id.png](https://github.com/punxaphil/maxi-media-player/raw/main/img/media_content_id.png) 306 | 307 | 308 | ## Dynamic volume level slider 309 | 310 | The volume level slider is dynamically adjusting its scale. If volume is below 20% it will show a scale up to 30%. Above 311 | 20% it will show a scale up to 100%. The color will also change from green to red clearly indicating which scale is 312 | being used. 313 | 314 | ![dynamic_volumes.png](https://github.com/punxaphil/maxi-media-player/raw/main/img/dynamic_volumes.png) 315 | 316 | Enable it in config with `dynamicVolumeSlider: true` 317 | 318 | ## Linking to specific player 319 | 320 | Append `#media_player.my_sonos_player` to page URL to have that player selected. 321 | 322 | If `entityId` is configured for the card, the url param will be ignored. See more in the Usage section above. 323 | 324 | ## Sort order of entities 325 | 326 | If you want to have a custom sorting for your entities in the groups section you can use the `entities` configuration. 327 | Default is otherwise to sort by entity name. 328 | 329 | Example: 330 | ```yaml 331 | type: custom:maxi-media-player 332 | entities: 333 | - media_player.sonos_kitchen 334 | - media_player.sonos_hallway 335 | - media_player.sonos_bedroom 336 | - media_player.sonos_livingroom 337 | ``` 338 | 339 | ## Device icons 340 | 341 | You can configure icons for your devices. This is done under Home Assistant -> Settings -> Entities, select your device then configure the Icon property. If you have configured an icon, it will show in the groups section of the card. 342 | It is recommended to install this one in HACS GitHub - elax46/custom-brand-icons. It has a lot of icons for different devices. 343 | 344 | ![device_icons.png](https://github.com/punxaphil/maxi-media-player/raw/main/img/device_icons.png) 345 | 346 | ## CSS Styling 347 | 348 | The recommend way to change look and feel is to use the built-in theming capabilities in Home Assistant. If that is not enough this card supports being styled with [card_mod](https://github.com/thomasloven/lovelace-card-mod). 349 | 350 | Example: 351 | 352 | ```yaml 353 | type: custom:maxi-media-player 354 | card_mod: 355 | style: | 356 | ha-card { 357 | color: white !important; 358 | background: gray; 359 | --accent-color: pink; 360 | --primary-color: white; 361 | --secondary-text-color: white; 362 | --secondary-background-color: pink; 363 | } 364 | ``` 365 | 366 | The above YAML renders the following: 367 | 368 | ![styling.png](https://github.com/punxaphil/maxi-media-player/raw/main/img/styling.png) 369 | 370 | ### More card_mod examples 371 | 372 | #### Example 1 - Reduce margin for grouping list items 373 | 374 | ![card_mod_grouping_margin.png](https://github.com/punxaphil/maxi-media-player/raw/main/img/card_mod_grouping_margin.png) 375 | 376 | ```yaml 377 | card_mod: 378 | style: 379 | mxmp-groups$ mxmp-group$: | 380 | mwc-list-item { 381 | margin: 5px !important; 382 | } 383 | .row { 384 | margin: 0 !important; 385 | } 386 | ``` 387 | 388 | #### Example 2 - Resize volume and icons 389 | ```yaml 390 | card_mod: 391 | style: 392 | .: | 393 | mxmp-player$ mxmp-player-controls$ mxmp-volume$: | 394 | ha-control-slider { 395 | height: 10px; 396 | } 397 | ha-icon-button { 398 | --mdc-icon-button-size: 2rem !important; 399 | --mdc-icon-size: 1.5rem !important; 400 | } 401 | 402 | ``` 403 | 404 | #### Example 3 - Change the font and background color of grouping button 405 | ```yaml 406 | card_mod: 407 | style: 408 | mxmp-grouping$: | 409 | mxmp-grouping-button { 410 | --accent-color: black; 411 | font-size: 30px; 412 | } 413 | ``` 414 | 415 | #### Example 4 - Resize controls area in player section 416 | ```yaml 417 | card_mod: 418 | style: 419 | mxmp-player$: | 420 | .controls { 421 | margin: 0 3rem !important; 422 | } 423 | ``` 424 | 425 | #### Example 5 - Hide entity/group name and album name 426 | ```yaml 427 | card_mod: 428 | style: 429 | mxmp-player$ mxmp-player-header$: | 430 | .entity,.artist-album { 431 | display: none; 432 | } 433 | ``` 434 | 435 | #### Example 6 - More transparent title track and volume slider 436 | ```yaml 437 | card_mod: 438 | style: 439 | .: '' 440 | mxmp-player$: | 441 | .controls { 442 | background-color: rgba(var(--rgb-card-background-color), 0.4) !important; 443 | } 444 | mxmp-player-header { 445 | background-color: rgba(var(--rgb-card-background-color), 0.4) !important; 446 | } 447 | ``` 448 | 449 | #### Example 7 - Make the padding smaller around the artwork of the thumbnails in the favorites section 450 | ```yaml 451 | card_mod: 452 | style: 453 | mxmp-media-browser$ mxmp-media-browser-icons$: | 454 | ha-control-button { 455 | --control-button-padding: 4px; 456 | } 457 | ``` 458 | 459 | #### Example 8 - Remove artwork in player section 460 | ```yaml 461 | card_mod: 462 | style: 463 | mxmp-player$: | 464 | .artwork { 465 | display: none !important; 466 | } 467 | ``` 468 | 469 | #### Example 9 - Hide volume slider and mute icon 470 | ```yaml 471 | card_mod: 472 | style: 473 | "mxmp-player$ mxmp-player-controls$": | 474 | mxmp-volume { 475 | display: none; 476 | } 477 | ``` 478 | 479 | #### Example 10 - Hide background from controls when artwork is shown as background 480 | ```yaml 481 | artworkAsBackground: true 482 | card_mod: 483 | style: | 484 | ha-card { 485 | --rgb-card-background-color: false; 486 | } 487 | ``` 488 | 489 | #### Example 11 - Modify transparency of background from controls when artwork is shown as background 490 | ```yaml 491 | artworkAsBackground: true 492 | card_mod: 493 | style: 494 | mxmp-player$: | 495 | [background] { 496 | background-color: rgba(0,0,0, 0.3) !important; 497 | } 498 | ``` 499 | 500 | #### Example 12 - Show only player and now playing text information 501 | ```yaml 502 | heightPercentage: auto 503 | sections: 504 | - player 505 | card_mod: 506 | style: 507 | mxmp-player$: | 508 | .artwork { 509 | display: none; 510 | } 511 | .controls { 512 | display: none; 513 | } 514 | ``` 515 | 516 | #### Example 13 - Style the favorite section 517 | ```yaml 518 | card_mod: 519 | style: 520 | mxmp-media-browser$ mxmp-media-browser-icons$: | 521 | div { 522 | border: 1px solid white; 523 | color: red !important; 524 | } 525 | ``` 526 | 527 | #### Example 14 - Color of the player controls 528 | ```yaml 529 | card_mod: 530 | style: 531 | mxmp-player$ mxmp-player-controls$: | 532 | .icons * { 533 | color: pink; 534 | } 535 | ``` 536 | 537 | #### Example 15 - Remove the top "All favorites" and "Browse media" from the favorites section 538 | ```yaml 539 | card_mod: 540 | style: 541 | mxmp-media-browser$: | 542 | mxmp-media-browser-header { 543 | display: none; 544 | } 545 | ``` 546 | 547 | #### Example 16 - Change colors of titles in favorites 548 | ```yaml 549 | card_mod: 550 | style: 551 | mxmp-media-browser$ mxmp-media-browser-icons$: | 552 | .title { 553 | color: red !important; 554 | background-color: blue !important; 555 | } 556 | ``` 557 | 558 | #### Example 17 - Remove everything except the album art 559 | ```yaml 560 | card_mod: 561 | style: 562 | mxmp-player$: | 563 | mxmp-player-header, mxmp-player-controls { 564 | display: none; 565 | } 566 | ``` 567 | 568 | #### Example 18 - Hide the volume button and percentage 569 | ```yaml 570 | card_mod: 571 | style: 572 | mxmp-player$ mxmp-player-controls$ mxmp-volume$: | 573 | .volume-level, ha-icon-button { 574 | display:none !important; 575 | } 576 | ``` 577 | 578 | ![img.png](https://github.com/punxaphil/maxi-media-player/raw/main/img/card_mod_2.png) 579 | 580 | #### Example 19 - Changing the font size of song title 581 | ```yaml 582 | card_mod: 583 | style: 584 | mxmp-player$ mxmp-player-header$: | 585 | .song { 586 | font-size: 1.2em; !important; 587 | } 588 | ``` 589 | 590 | #### Example 20 - Artwork position 591 | ```yaml 592 | heightPercentage: auto 593 | card_mod: 594 | style: 595 | mxmp-player$: | 596 | .container { 597 | grid-template-areas: 598 | 'header artwork' 599 | 'controls artwork' !important; 600 | grid-template-columns: 2fr 1fr !important; 601 | } 602 | ``` 603 | 604 | ![img.png](https://github.com/punxaphil/maxi-media-player/raw/main/img/card_mod_3.png) 605 | 606 | #### Example 21 - Size of group buttons 607 | ```yaml 608 | card_mod: 609 | style: 610 | mxmp-groups$: | 611 | mwc-list { 612 | width: 10rem; 613 | } 614 | ``` 615 | 616 | #### Example 22 - Font size for everything 617 | ```yaml 618 | card_mod: 619 | style: | 620 | div { 621 | font-size: 22px !important; 622 | } 623 | ``` 624 | 625 | #### Example 23 - Increase entity font 626 | ```yaml 627 | card_mod: 628 | style: 629 | mxmp-player$ mxmp-player-header$: | 630 | .entity { 631 | font-size: 12px !important; 632 | } 633 | ``` 634 | 635 | #### Example 24 - Hide the select all/none buttons at the top of the groupings page 636 | ```yaml 637 | card_mod: 638 | style: 639 | mxmp-grouping$: | 640 | mxmp-grouping-button { 641 | display: none; 642 | } 643 | ``` 644 | 645 | #### Example 25 - reduce min-width of the card 646 | ```yaml 647 | widthPercentage: 30 648 | card_mod: 649 | style: 650 | .: | 651 | ha-card { 652 | min-width: 10rem !important; 653 | } 654 | ``` 655 | 656 | #### Example 26 - Padding and border around grouping items 657 | ```yaml 658 | card_mod: 659 | style: 660 | mxmp-grouping$: | 661 | .item { 662 | padding-top: 0rem !important; 663 | padding-bottom: 0 !important; 664 | border-bottom: 1px solid #333; 665 | } 666 | ``` 667 | ![img.png](https://github.com/punxaphil/maxi-media-player/raw/main/img/card_mod_4.png) 668 | 669 | #### Example 27 - Larger icons in the player section 670 | ```yaml 671 | card_mod: 672 | style: 673 | mxmp-player$ mxmp-player-controls$: | 674 | .icons { 675 | margin-bottom: 1rem; 676 | } 677 | mxmp-ha-player,ha-icon-button { 678 | --mdc-icon-size: 3rem !important; 679 | --mdc-icon-button-size: 4rem !important; 680 | } 681 | .big-icon { 682 | --mdc-icon-size: 7rem !important; 683 | --mdc-icon-button-size: 4rem !important; 684 | } 685 | ``` 686 | -------------------------------------------------------------------------------- /hacs.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Maxi Media Player", 3 | "render_readme": true, 4 | "filename": "maxi-media-player.js" 5 | } 6 | -------------------------------------------------------------------------------- /img/card_mod_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punxaphil/maxi-media-player/15703b34a41b25441e9042e88ba15bda46dc2dd6/img/card_mod_2.png -------------------------------------------------------------------------------- /img/card_mod_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punxaphil/maxi-media-player/15703b34a41b25441e9042e88ba15bda46dc2dd6/img/card_mod_3.png -------------------------------------------------------------------------------- /img/card_mod_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punxaphil/maxi-media-player/15703b34a41b25441e9042e88ba15bda46dc2dd6/img/card_mod_4.png -------------------------------------------------------------------------------- /img/card_mod_grouping_margin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punxaphil/maxi-media-player/15703b34a41b25441e9042e88ba15bda46dc2dd6/img/card_mod_grouping_margin.png -------------------------------------------------------------------------------- /img/custom_favorites.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punxaphil/maxi-media-player/15703b34a41b25441e9042e88ba15bda46dc2dd6/img/custom_favorites.png -------------------------------------------------------------------------------- /img/device_icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punxaphil/maxi-media-player/15703b34a41b25441e9042e88ba15bda46dc2dd6/img/device_icons.png -------------------------------------------------------------------------------- /img/dynamic_volumes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punxaphil/maxi-media-player/15703b34a41b25441e9042e88ba15bda46dc2dd6/img/dynamic_volumes.png -------------------------------------------------------------------------------- /img/grouping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punxaphil/maxi-media-player/15703b34a41b25441e9042e88ba15bda46dc2dd6/img/grouping.png -------------------------------------------------------------------------------- /img/groups.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punxaphil/maxi-media-player/15703b34a41b25441e9042e88ba15bda46dc2dd6/img/groups.png -------------------------------------------------------------------------------- /img/media_browser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punxaphil/maxi-media-player/15703b34a41b25441e9042e88ba15bda46dc2dd6/img/media_browser.png -------------------------------------------------------------------------------- /img/media_content_id.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punxaphil/maxi-media-player/15703b34a41b25441e9042e88ba15bda46dc2dd6/img/media_content_id.png -------------------------------------------------------------------------------- /img/player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punxaphil/maxi-media-player/15703b34a41b25441e9042e88ba15bda46dc2dd6/img/player.png -------------------------------------------------------------------------------- /img/queue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punxaphil/maxi-media-player/15703b34a41b25441e9042e88ba15bda46dc2dd6/img/queue.png -------------------------------------------------------------------------------- /img/sections.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punxaphil/maxi-media-player/15703b34a41b25441e9042e88ba15bda46dc2dd6/img/sections.png -------------------------------------------------------------------------------- /img/styling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punxaphil/maxi-media-player/15703b34a41b25441e9042e88ba15bda46dc2dd6/img/styling.png -------------------------------------------------------------------------------- /img/volumes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/punxaphil/maxi-media-player/15703b34a41b25441e9042e88ba15bda46dc2dd6/img/volumes.png -------------------------------------------------------------------------------- /src/CODE.md: -------------------------------------------------------------------------------- 1 | Code is found here: https://github.com/punxaphil/custom-sonos-card 2 | --------------------------------------------------------------------------------