Volume buttons in card_media_player (and other improvements)

[antonio1475]

Is your enhancement request related to a problem? Please describe. The Media_player card has some shortcomings for me:

1. Volume slider pointless when needing to move in small increments, and always moving between 20-40% volume at max.
2. Controls & text not readable with many album covers (different colors, letters, etc).

Describe the solution you'd like Update to the existing card. I'm sorry that I don't understand how contibuting in GitHub works...

Describe alternatives you've considered I created a custom card to add:

1. Volume buttons (1% for TVs, 5% for speakers)
2. Mute acts as toggle (check line 450)
3. background semi-transparent layer for readability (the css already had 0.15 opacity but wasn't displayed. Added background-blend-mode: "multiply" to make it effective)
4. Adjust Pause button to use mdi:play-pause by default, and then added status playing to show mdi:pause (eg. a TV that's not reporting the playback status was always showing mdi:pause, even when playing).
5. Added/changed some hold_actions to toggle the player.

See yaml comparison here: https://www.textcompare.org/yaml/?id=637f742eb35ae78d291d9cff

@rairulyle or anyone if you want to use this for an appropiate code change, please by all means. Also, the mute icon could probably change based on the mute status, but I don't know how to pull an attribute for the status.

Note: I made some changes just for me, that might not want on the public version (eg changed some variable defaults, aspect ratio, hold to toggle, etc)

Additional context Now vs proposed changes: Note: screenshot made with opacity 0.25 for background, plus another 0.25 for the buttons. yaml above has 0.15 & 0.2 respectively.

[antonio1475]

I just saw by chance that background-blend-mode: justify was removed here: https://github.com/UI-Lovelace-Minimalist/UI/issues/970#issuecomment-1242976950

[antonio1475]

I made further changes so that the volume changes by 1 for TVs, and 5% for speakers.

                  volume_level: |
                      [[[
                        var volume = states[entity.entity_id].attributes.volume_level;
                        if (states[entity.entity_id].attributes.device_class === "tv"){
                          volume = states[entity.entity_id].attributes.volume_level + 0.01;
                        }
                        if (states[entity.entity_id].attributes.device_class === "speaker"){
                          volume = states[entity.entity_id].attributes.volume_level + 0.05;
                        }
                        return volume;
                      ]]]

Receiver, or simply an 'else' would be missing but I don't need it. https://www.home-assistant.io/integrations/media_player/#device-class

Note: I don't even know what programming language that is (javascript, C#,??) so this came with a lot of tinkering without knowing what I'm doing. It just works, but it can most likely be done better.

[fjeddy]

Great work, hopefully they merge this before the climate crisis has kicked in! :P

While you are at it, the transparency for the controls is absolutely horrible for certain graphics. When the background is really colorful or has dark colors, it's impossible to see the controls, literally, impossible. I'm kind of amazed that people hasn't reacted and gotten this fixed long ago.

But to the point; would you consider adding a config option that would allow us to define the actual transparency of the buttons? (Play, pause, volume slider, volume buttons etc).

An example of how bad it is.

[antonio1475]

Great work, hopefully they merge this before the climate crisis has kicked in! :P

This is not a PR. It's an issue where I explain what I've done, but this won't be merged unless it's properly done by someone, using my edits or from scratch.

While you are at it, the transparency for the controls is absolutely horrible for certain graphics. When the background is really colorful or has dark colors, it's impossible to see the controls, literally, impossible. I'm kind of amazed that people hasn't reacted and gotten this fixed long ago.

That is why my edits make the background image semi-opaque (point 3).

But to the point; would you consider adding a config option that would allow us to define the actual transparency of the buttons? (Play, pause, volume slider, volume buttons etc).

I played with that and it looked bad, honestly. So I stuck to make the background semi-opaque, which takes care of the overall visibility.

Reminder that you can use my card as a custom card 😃

[fjeddy]

Yeah, it's the massive github changes, was sure this was a PR, should have checked better :P Not to mention that the entire issue in itself is laid out like a PR ! And since this isn't a PR, then no code is actually included, so using your card as a custom card won't work either :P

[antonio1475]

Yeah, it's the massive github changes, was sure this was a PR, should have checked better :P Not to mention that the entire issue in itself is laid out like a PR ! And since this isn't a PR, then no code is actually included, so using your card as a custom card won't work either :P

You can use this card. On my first post there is a link.

1. Open it and copy the yaml on the right side.
2. Go to /config/ui_lovelace_minimalist/custom_cards
3. Inside it, create custom_card_media_player_buttons.yaml and paste the card code from point 1
4. Reload UI LOVELACE MINIMALIST (Developer Tools)
5. Edit your ui-lovelace.yaml to replace the template in your player card to custom_card_media_player_buttons instead

You can do this with any custom card yaml you find or create. Remember to follow the steps, especially 4 & 5 with every time (i.e. after adding/editing a custom card, you'll need to reload Minimalist and edit ui-lovelace.yaml (add a space somewhere) to make it re-load the dashboard or you'll still see the old version).

Old but useful link: https://ui-lovelace-minimalist.github.io/UI/development/custom_cards/ There's an even better one somewhere but can't find it. The folder and language.yaml file are no longer needed since now the engine translation is used, so just dropping the card yaml in the custom_cards folder works.

Good luck.

[antonio1475]

Additional code to open the web/app of known streaming platforms when clicking the icon, instead of the more-info (leave that for the name/label tap action). Around line 120, on item1 > item1 tap_action, add:

                action: |
                    [[[
                      if (entity.attributes.media_title || entity.attributes.app_name){
                        return "url" || "more-info";
                      }
                    ]]]
                url_path: |
                    [[[
                      if (entity.attributes.media_title || entity.attributes.app_name){
                        var apptv = entity.attributes.media_title;
                        var appspeaker = entity.attributes.app_name;
                        var url = {
                          "Spotify": "https://open.spotify.com/",
                          "Plex": "https://app.plex.tv/",
                          "YouTube": "https://www.youtube.com/",
                          "Netflix": "https://www.netflix.com/",
                        }
                        return url[apptv] || url[appspeaker] || " ";
                      }
                    ]]]

It's not perfect at all and I'm sure it doesn't cover all use cases, but it works for my use (I just wanted to cover Spotify but tried to go a bit beyond for anyone who needs it...