Lovelace: Mini Media Player

Share your Projects! Dashboards & Frontend
2926

Hello, sorry i can never figure out how to make the coding look right on here. and it doesn’t prompt me to fix it anymore. This code below works great to type in a move click the button and it plays on my roku(plex) every time

Can someone please tell me how to get the movies to start at the beginning? It always picks up where it left off, and it’s annoying. I want default to be start from the beginning always

media_content_id: “{ "library_name": "Movies", "title": "{{ states(‘input_text.plex’) }}" }”

media_content_type: movies ‘’

2927

Try formatting the code and put it back. Seems to me you are using " everywhere and that would be wrong.

Use " on the outside and ’ on the inside. Also it looks like you have a trailing " at the end after movies.

2928

Sharing my Mini media player card i made into a Kodi remote, should be fine to use as is, just replace the entity names with your kodi instance

2023-12-17 21_23_04-Andrew Dashboard – Home Assistant - Vivaldi
2023-12-17 21_23_04-Andrew Dashboard – Home Assistant - Vivaldi505×757 55.9 KB

entity: media_player.kodiinstance
type: custom:mini-media-player
card_mod:
  style: |
    :host {
      --mini-media-player-button-color: deepskyblue;
    }
    mmp-shortcuts {
        color: black;
    }
artwork: cover
hide:
  power: true
source: full
info: short
controls: true
icon: mdi:kodi
name: Kodi - instancename
shortcuts:
  columns: 3
  column_height: 70
  buttons:
    - name: menu
      icon: mdi:menu
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: Input.ContextMenu
    - icon: mdi:arrow-up-bold-circle
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: Input.Up
    - icon: mdi:chevron-double-up
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: Input.ExecuteAction
        action: pageup
    - icon: mdi:arrow-left-bold-circle
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: Input.Left
    - icon: mdi:check-circle-outline
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: Input.Select
    - icon: mdi:arrow-right-bold-circle
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: Input.Right
    - icon: mdi:backburger
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: Input.Back
    - icon: mdi:arrow-down-bold-circle
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: Input.Down
    - icon: mdi:chevron-double-down
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: Input.ExecuteAction
        action: pagedown
    - icon: mdi:chevron-double-left
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: Input.ExecuteAction
        action: stepback
    - icon: mdi:pause
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: Input.ExecuteAction
        action: playpause
    - icon: mdi:chevron-double-right
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: Input.ExecuteAction
        action: stepforward
    - name: home
      icon: mdi:home
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: Input.Home
    - icon: mdi:stop
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: Input.ExecuteAction
        action: stop
    - name: info
      icon: mdi:information-outline
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: Input.InfoPreformatted text
    - name: Movies
      icon: mdi:movie-open
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: GUI.ActivateWindow
        window: videos
        parameters:
          - MovieTitles
    - name: TV Shows
      icon: mdi:television
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: GUI.ActivateWindow
        window: videos
        parameters:
          - TvshowTitles
    - name: Music
      icon: mdi:music
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: GUI.ActivateWindow
        window: music
    - name: TV Channels
      icon: mdi:television-box
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: GUI.ActivateWindow
        window: tvchannels
    - name: FS Music
      icon: mdi:fullscreen
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: GUI.ActivateWindow
        window: visualisation
    - name: FS Video
      icon: mdi:fullscreen
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: GUI.ActivateWindow
        window: fullscreenvideo
    - name: TV Guide
      icon: mdi:television-guide
      type: service
      id: kodi.call_method
      data:
        entity_id: media_player.kodi_instancename
        method: GUI.ActivateWindow
        window: tvguide
1 Like
2929

Hey,

Having some issues with readability.

My player is in full-cover, but this way I can’t read the artist/title as well as buttons. So I designed some 80% black background images for the buttons and changed the font in themes
(using mini-media-player-base-color: white
mini-media-player-icon-color: white ).

Works fine while playing, but if its off the text goes back to black and I can’t read it on those dark buttons.

Is there a way to get the album cover above the player? Or have permanent text color (even if it’s only on the buttons)?

second issue: I managed to get a list in the shortcuts. But it shows “shortcuts…” as text. Any way to change that? Can’t seem to figure that one out. :frowning:

2930

I seem to have something of a challenge, this what I am trying to do might not be doable, but I will for sure try anyway :wink:

I have a pair of KEF LSX2 active Speakers. And an Epson projector. Now when I change source on My KEF I also trigger a start of the projector. Works great. However one thing I can not solve is that I would like to have a mini media player with two buttons to control the light output of my projector, cmode=Natural or Dynamic. So I coded this:

type: entities
entities:
  - type: custom:mini-media-player
    entity: media_player.my_kef_lsx_ii_speakers
    group: true
    volume_stateless: true
    volume_step: '2'
    artwork: material
    hide:
      source: 'no'
      volume_level: false
    shortcuts:
      columns: 3
      buttons:
        - icon: mdi:video-box
          name: Projektor
          type: source
          id: optical
        - icon: null
          name: Low Lamp
          type: service
          id: media_player.volume_set
          data:
            entity_id: media_player.epson
            cmode: Natural

Of course this does not work - I hoped it would but no.

So what I am after is in the same “frame” of the mini-media-player (KEF) address a function of the other media-player (Epson) - a cross call maybe I could call this?

Any ideas how to achieve this would be very much welcome :slight_smile:

2931

Maybe if you create a new media player that pilots both your projector and your speakers?

See here: https://www.home-assistant.io/integrations/universal/

2 Likes
2932

What is the best mini-media-player tts config for using the sonos tts announce function? You can also configure the volume then.
It should be configured using play_media.

Example:

service: media_player.play_media
target:
  entity_id: media_player.sonos
data:
  announce: true
  media_content_id: >
    media-source://tts/cloud?message="I am very loud"
  media_content_type: "music"
  extra:
    volume: 80
2933

How is this related to mini-media-player.

2934

As it’s related to the tts config of the mini-media-player card?
Sonos has a new tts announce function.
Would be great to be able to use that when using tts through the mini-media-player card.

Maybe the initial question wasn’t that clear so I changed it a little bit :slight_smile:

1 Like
2935

I tried the suggestion to combine into one media player - however the function I need, called CMODE (Color Mode) is not a part of normal media player setups, so I never got that to work.

In the end, I choosed to solve this by using a script to be called from a shortcut button - this works perfect!

1 Like
2936

Hello, does anyone know how i can change the volume value from % to dB

tried to modify

    `}renderVolLevel(){return I`
      <span class="mmp-media-controls__volume__level">${this.vol}%</span>

to

    `}renderVolLevel(){return I`
      <span class="mmp-media-controls__volume__level">${this.vol}dB</span>

but after deleting of browser cache and restart of homeassistant its unchanged and shows %

did also make a new .gz did also not work

2937

@orangelizard In case you still need Bose SoundTouch zone support for mini-media player …

Check out my SoundTouchPlus GitHub Project wiki page for more information.

Regarding zones … the SoundTouchPlus integration provides Grouping support; the original soundtouch integration does not support the MediaPlayerEntityFeature.GROUPING, so it relies on custom services to perform the group functions.

With SoundTouchPlus, you can use the standard HA join and unjoin services to control grouping functionality (e.g. create zone, add / remove members, etc). It pretty much renders all of the above methods you mentioned moot, as you can do all of those with the join / unjoin service calls.

Examples:
Create group - bose_st10_1 is master, bose_st10_2,3,4 are members.

service: media_player.join
target:
  entity_id:
    - media_player.bose_st10_1
  device_id: []
  area_id: []
data:
  group_members:
    - media_player.bose_st10_2
    - media_player.bose_st10_3
    - media_player.bose_st10_4

Remove members bose_st10_2,3 from the group:

service: media_player.unjoin
data: {}
target:
  entity_id:
    - media_player.bose_st10_3
    - media_player.bose_st10_4

The mini-media player also supports the join / unjoin calls for grouping as well. Here is how I have mine configured (I have four ST-10’s and an ST-300). Just use platform: media_player (instead of platform: soundtouch):

...
    speaker_group:
      platform: media_player
      show_group_count: true
      sync_volume: true
      icon: mdi:speaker-multiple
      entities:
        - entity_id: media_player.bose_st10_1
          name: Bose ST10-1
        - entity_id: media_player.bose_st10_2
          name: Bose ST10-2
        - entity_id: media_player.bose_st10_3
          name: Bose ST10-3
        - entity_id: media_player.bose_st10_4
          name: Bose ST10-4
        - entity_id: media_player.bose_st300
          name: Bose ST-300 SoundBar

Hope it helps!

2 Likes
2938

Did you ever find a solution to this. Trying to to just re-post your initial question

2940

@ karaminder What’s that mdi: icon you’re using for the homepod mini?
image

2941

I got the HomePod mini icon from elax46’s Custom Brand Icons.

icon: 'phu:homepod-mini'
2942

Quite new to HA, so maybe a very dumb question:

I would like to use the Mini Media Player with some buttons for my favourite web radio stations. Two problems, I face (the two basic questions)

1.) how to write the YAML in order to get the stream of the chosen web radio?
2.) how to copy the URI from the Media Sources->Radio Browser dialog? (the preferred stations are there, but with Dr.Google I do not find the URIs)

So, to make it clear, how should I modify the YAML if I would like to listen to e.g. Aardvark Blues FM

entity: media_player.heos
type: custom:mini-media-player
shortcuts:
  columns: 4
  buttons:
    - icon: mdi:cat
      type: ????
      id: ???

Thanks in advance for your hints!
Christof

2943

Play the stream and then do to the states ui in developer tools, and see those details.

2944

I thought it was just me. My Chromecast speakers are not being highlighted either. My Playlist however are. Very odd. Here’s my code:

type: custom:mini-media-player
entity: media_player.youtube_music_player
artwork: cover
source: icon
icon: playlist-music
shortcuts:
  columns: 3
  attribute: source
  buttons:
    - name: Desk Clock
      type: source
      id: desk_clock
    - name: DJ
      type: source
      id: dj_chromecast
    - name: Hub Max
      type: source
      id: living_room_hub_max
  label: playlists...
  list:
    - name: Mascika
      type: channel
      id: PLXMl88-tJbHKWDPcEz3xg7JXeygiMFRjA
    - name: Dennis Brown
      type: playlist
      id: PLXMl88-tJbHI7MqXvt6QNy2_bVndSYjzF

mini-media

2945

I did get the URLs by inspecting the media in the web developer console. Nice!

Now I also would like to add icons for the radio station. So I copied them to the local www directory, but it is not displayed: (the URL is ok if I open it in the web bowser)

    - id: media-source://radio_browser/5ca129d5-30f6-4b97-9069-9177991d2587
      icon_image: http://homeassistant.local:8123/local/img/r886_2.jpeg
      type: music

KR,
Christof

2946

Could this be a conflict with ytube_music_player? I realized that their Id is based on the Entity ID, which more than likely would not match any attribute from the Media Player. Thoughts?