Custom UI: Mini media player

anon35356645 · January 30, 2018, 9:13am

Tring to put as button a spotify playlist (with mopidy), but is not working. Can’tsee the error (the card is showing nothing

  mopidy_sleeping_playlist:
    sequence:
      - service: media_player.play_media
        data_template:
          entity_id: media_player.mopidy
          media_content_type: 'audio/mp4'
          media_content_id: 'spotify:user:xxx:playlist:xxx'
      - delay: "00:00:01"
      - service: media_player.play_media
        data_template:
          media_content_id: 'http://192.168.1.239:8000/mopidy.mp3'
          media_content_type: 'audio/mp4'
          entity_id: "{{ entity_id }}"


homeassistant:
  customize:
    input_text.living_room_speaker:
      icon: mdi:cast
      custom_ui_state_card: state-card-mini-media-player
      config:
        player: media_player.living_room_speaker
        buttons:
          - name: Main
            icon: mdi:music-note
            script: script.play_rautemusik_main
          - name: Rock
            icon: mdi:music-note
            script: script.play_rautemusik_rock
          - name: Sleeping
            icon: mdi:music-note
            script: script.mopidy_sleeping_playlist

cameron · January 30, 2018, 12:28pm

Try changing media_content_type: ‘audio/mp4’

To-
media_content_type: playlist
media_content_id: ‘spotify:user:xxx:playlist:xxx’

And-
media_content_id: ‘http://192.168.1.239:8000/mopidy.mp3’
media_content_type: music

anon35356645 · January 30, 2018, 12:42pm

I will, please note that my script is working well somewhere else

cameron · January 30, 2018, 12:45pm

Ok
I have tried Mopidy on another Rpi but it would not enable the spotify plug in.
But thats a topic for another day.

anon35356645 · January 30, 2018, 12:49pm

I installed it in few seconds no problem, problem is that is not working as the spotify media player of this custom_ui

anon35356645 · January 30, 2018, 4:48pm

was an error on my config.
Now the button shows but the script is not executed, or something is wrong

  mopidy_sleeping_playlist:
    sequence:
      - service: media_player.play_media
        data_template:
          entity_id: media_player.mopidy
          media_content_type: 'playlist'
          media_content_id: 'spotify:user:cxxxa:playlist:3xxxxgM'
      - delay: "00:00:01"
      - service: media_player.play_media
        data_template:
          media_content_id: 'http://192.168.1.239:8000/mopidy.mp3'
          media_content_type: 'music'
          entity_id: "{{ entity_id }}"

anon35356645 · January 30, 2018, 5:18pm

I never understood this well. Where does this apply in the above configuration?

anon35356645 · January 30, 2018, 5:21pm

@eddi89 shall I follow the above? The combinations to try are so many, and everytime I restart I need 5-7 minutes

iantrich · January 30, 2018, 8:02pm

Do you know if I could accomplish the following in a custom card?

I have quite a few Google Home devices and you are able to get timer information using the following local API GET call: /setup/assistant/alarms

If I had a Google Home, named media_player.office_home and I created a RESTful sensor named sensor.office_home. Would it be possible to use the media_player currently in the custom state card to pull in info from the sensor using the same name?

iantrich · January 30, 2018, 8:39pm

Absolutely, I will! Looking through your contributions has given me a lot of insight into this. Thanks!

snjoetw · January 31, 2018, 1:16am

Not related to this topic But would you mind sharing your theme? It looks awesome!

cameron · January 31, 2018, 10:02am

Hi @snjoetw the theme is called ‘midnight’ hope this is what you want.

themes:  
  midnight:
    # Main colors
    primary-color: '#5294E2'                                                        # Header
    accent-color: '#E45E65'                                                         # Accent color
    dark-primary-color: 'var(--accent-color)'                                       # Hyperlinks                                         
    light-primary-color: 'var(--accent-color)'                                      # Horizontal line in about
                                                                             
    # Text colors                                                                  
    primary-text-color: '#FFFFFF'                                                   # Primary text colour, here is referencing dark-primary-color
    text-primary-color: 'var(--primary-text-color)'                                 # Primary text colour
    secondary-text-color: '#5294E2'                                                 # For secondary titles in more info boxes etc.
    disabled-text-color: '#7F848E'                                                  # Disabled text colour
    label-badge-border-color: 'green'                                               # Label badge border, just a reference value   

    # Background colors                                                            
    primary-background-color: '#383C45'                                             # Settings background
    secondary-background-color: '#383C45'                                           # Main card UI background  
    divider-color: 'rgba(0, 0, 0, .12)'                                             # Divider 
  
    # Table rows                                                                   
    table-row-background-color: '#353840'                                           # Table row
    table-row-alternative-background-color: '#3E424B'                               # Table row alternative
                                                                             
    # Nav Menu                                                                   
    paper-listbox-color: 'var(--primary-color)'                                     # Navigation menu selection hoover
    paper-listbox-background-color: '#2E333A'                                       # Navigation menu background
    paper-grey-50: 'var(--primary-text-color)'                                   
    paper-grey-200: '#414A59'                                                       # Navigation menu selection
                                                                             
    # Paper card                                                               
    paper-card-header-color: 'var(--accent-color)'                                  # Card header text colour
    paper-card-background-color: '#434954'                                          # Card background colour
    paper-dialog-background-color: '#434954'                                        # Card dialog background colour
    paper-item-icon-color: 'var(--primary-text-color)'                              # Icon color
    paper-item-icon-active-color: '#F9C536'                                         # Icon color active
    paper-item-icon_-_color: 'green'           
    paper-item-selected_-_background-color: '#434954'                               # Popup item select                      
    paper-tabs-selection-bar-color: 'green'

    # Labels 
    label-badge-red: 'var(--accent-color)'                                          # References the brand colour label badge border
    label-badge-text-color: 'var(--primary-text-color)'                             # Now same as label badge border but that's a matter of taste
    label-badge-background-color: '#2E333A'                                         # Same, but can also be set to transparent here

    # Switches
    paper-toggle-button-checked-button-color: 'var(--accent-color)'
    paper-toggle-button-checked-bar-color: 'var(--accent-color)'
    paper-toggle-button-checked-ink-color: 'var(--accent-color)'
    paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
    paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
    paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'  

    # Sliders
    paper-slider-knob-color: 'var(--accent-color)'
    paper-slider-knob-start-color: 'var(--accent-color)'
    paper-slider-pin-color: 'var(--accent-color)'
    paper-slider-active-color: 'var(--accent-color)'
    paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
    paper-slider-secondary-color: 'var(--secondary-background-color)'
    paper-slider-disabled-active-color: 'var(--disabled-text-color)'
    paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'

    # Google colors
    google-red-500: '#E45E65'
    google-green-500: '#39E949'

Kanishkaz · January 31, 2018, 11:28pm

This is great. Cleaned up my UI a lot. Thanks

snjoetw · February 1, 2018, 9:55am

thanks so much!

fernandex00 · February 5, 2018, 1:11am

this work on hass.io, is there a tutorial for this?

Cezex · February 10, 2018, 11:00pm

At my place volume is controlled by amplituner so I don’t want/need to change it in any other players. That’s why I’ve made some tweaks which allows me to to hide power button and volume slider and make the card more compact.

If anyone will be interested I can post the files.

cameron · February 11, 2018, 10:43pm

For some reason the state-card-mini-media-player has stopped working i have tried the Ctrl +F5 and still not there.
HA pops up a message at bottom of the page saying “Service System_log/write called”

Any help with this please.

jaburges · February 12, 2018, 5:51am

yes please - always good to see other implementations

jaburges · February 12, 2018, 6:22am

Where is spotify getting its ‘source’ from?

is there a way to set the output for Spotify?
I have 2 sonos rooms, and wondering if there is a way to from the spotify menu set what to play and then where?

love this btw, just implemented in my HA setup so thanks! @eddi89

boojew · February 12, 2018, 2:07pm

I think 0.63 broke this. In my logs, I’m seeing:

https://myhost/local/custom_ui/state-card-mini-media-player.html:154:33 Uncaught TypeError: Cannot read property 'player' of undefined

as well as

2018-02-12 08:48:49 ERROR (MainThread) [frontend.js.latest.201802090] :0:0 Script error. 2018-02-12 08:48:49 ERROR (MainThread) [frontend.js.latest.201802090] :0:0 Script error. 2018-02-12 08:48:49 ERROR (MainThread) [frontend.js.latest.201802090] :0:0 Script error. 2018-02-12 08:48:49 ERROR (MainThread) [frontend.js.latest.201802090] :0:0 Script error. 2018-02-12 08:48:49 ERROR (MainThread) [frontend.js.latest.201802090] :0:0 Script error. 2018-02-12 08:48:49 ERROR (MainThread) [frontend.js.latest.201802090] :0:0 Script error. 2018-02-12 08:48:49 ERROR (MainThread) [frontend.js.latest.201802090] :0:0 Script error. 2018-02-12 08:48:49 ERROR (MainThread) [frontend.js.latest.201802090] :0:0 Script error. 2018-02-12 08:48:49 ERROR (MainThread) [frontend.js.latest.201802090] :0:0 Script error.