mini-media-player v1.2.2

Mini Media Player

A minimalistic yet customizable media player card for Home Assistant Lovelace UI.

Inspired by Custom UI: Mini media player and custom-lovelace.

Install

This card is available in HACS (Home Assistant Community Store)

Simple install

1. Download and copy mini-media-player-bundle.js from the latest release into your config/www directory.

2. Add a reference to mini-media-player-bundle.js inside your ui-lovelace.yaml.

   resources:
     - url: /local/mini-media-player-bundle.js?v=1.2.2
       type: module

CLI install

1. Move into your config/www directory

2. Grab mini-media-player-bundle.js

   $ wget https://github.com/kalkih/mini-media-player/releases/download/v1.2.2/mini-media-player-bundle.js

3. Add a reference to mini-media-player-bundle.js inside your ui-lovelace.yaml.

   resources:
     - url: /local/mini-media-player-bundle.js?v=1.2.2
       type: module

(Optional) Add to custom updater

1. Make sure you've the custom_updater component installed and working.

2. Add a new reference under card_urls in your custom_updater configuration in configuration.yaml.

   custom_updater:
     card_urls:
       - https://raw.githubusercontent.com/kalkih/mini-media-player/master/tracker.json

Updating

1. Find your mini-media-player-bundle.js file in config/www or wherever you ended up storing it.

2. Replace the local file with the latest one attached in the latest release.

3. Add the new version number to the end of the cards reference url in your ui-lovelace.yaml like below.

   resources:
     - url: /local/mini-media-player-bundle.js?v=1.2.2
       type: module

You may need to empty the browsers cache if you have problems loading the updated card.

Using the card

Options

Card options

Idle object

TTS object

1 Does not support the language option.

2 Does not support language & entity_id options.

3 Requires a custom notify service named ga_broadcast, see example below.

4 Requires the card entity name to match the notify service name, if they don't match please specify the notify service name in the entity_id option.

# configuration.yaml
notify:
  - name: ga_broadcast
    platform: rest
    resource: http://[xxx.x.x.xxx]:5000/broadcast_message

Speaker group object

See Speaker group management for example usage.

1 Currently not yet available in Home Assistant, soon™

Speaker entity object

Shortcuts object

See card with media shortcuts for example usage.

1 Examples, source for active source or sound_mode for active sound mode.

Shortcut item object

1 Only compatible with script & service shortcuts, useful for sending variables to script.

Hide object

Theme variables

The following variables are available and can be set in your theme to change the appearence of the card. Can be specified by color name, hexadecimal, rgb, rgba, hsl, hsla, basically anything supported by CSS.

Example usage

Basic card

- type: custom:mini-media-player
  entity: media_player.kitchen_speakers

Compact card

Setting either volume and/or controls to true in the hide option object will render the player as a single row.

- type: custom:mini-media-player
  entity: media_player.example
  icon: mdi:spotify
  artwork: cover
  hide:
    volume: true
    source: true
    power_state: false

Card with media shortcuts

You can specify media shortcuts through the shortcuts option, either as a list or as buttons or why not both?

- entity: media_player.spotify
  type: custom:mini-media-player
  artwork: cover
  source: icon
  hide:
    volume: true
  shortcuts:
    columns: 4 # Max buttons per row
    buttons:
      # Start predefined playlist
      - icon: mdi:cat
        type: playlist
        id: spotify:user:spotify:playlist:37i9dQZF1DZ06evO2O09Hg
      # Change the source to bathroom
      - icon: mdi:dog
        type: source
        id: Bathroom
      # Trigger script
      - icon: mdi:dog
        type: script
        id: script.script_name
      ... # etc.

Grouped cards

Set the group option to true when nesting mini media player cards inside other cards that already have margins/paddings.

- type: entities
  entities:
    - type: custom:mini-media-player
      entity: media_player.multiroom_player
      group: true
      source: icon
      info: short
      hide:
        volume: true
        power: true
    - type: custom:mini-media-player
      entity: media_player.kitchen_speakers
      group: true
      hide:
        controls: true
    - type: custom:mini-media-player
      entity: media_player.bathroom_speakers
      group: true
      hide:
        controls: true
    - type: custom:mini-media-player
      entity: media_player.bedroom_speakers
      group: true
      hide:
        controls: true
    - type: custom:mini-media-player
      entity: media_player.patio_speakers
      group: true
      hide:
        controls: true

Stacked cards

By using vertical and horizontal stacks, you can achieve many different setups.

- type: horizontal-stack
  cards:
    - entity: media_player.tv_livingroom
      type: custom:mini-media-player
      info: short
      artwork: cover
      hide:
        mute: true
        icon: true
        power_state: false
    - entity: media_player.tv_bedroom
      type: custom:mini-media-player
      info: short
      artwork: cover
      hide:
        mute: true
        icon: true
        power_state: false
- type: horizontal-stack
  cards:
    - entity: media_player.cc_patio
      type: custom:mini-media-player
      hide:
        icon: true
    - entity: media_player.cc_kitchen
      type: custom:mini-media-player
      hide:
        icon: true
    - entity: media_player.cc_bath
      type: custom:mini-media-player
      hide:
        icon: true

Speaker group management

Specify all your speaker entities in a list under the option speaker_group -> entities. They obviously need to be of the same platform.

• The card does only allow changes to be made to groups where the entity of the card is the coordinator/master speaker.
• Checking a speakers in the list will make it join the group of the card entity. (media_player.sonos_office in the example below).
• Unchecking a speaker in the list will remove it from any group it's a part of.

- type: custom:mini-media-player
  entity: media_player.sonos_office
  hide:
    power: true
    icon: true
    source: true
  speaker_group:
    platform: sonos
    show_group_count: true
    entities:
      - entity_id: media_player.sonos_office
        name: Sonos Office
      - entity_id: media_player.sonos_livingroom
        name: Sonos Livingroom
      - entity_id: media_player.sonos_kitchen
        name: Sonos Kitchen
      - entity_id: media_player.sonos_bathroom
        name: Sonos Bathroom
      - entity_id: media_player.sonos_bedroom
        name: Sonos Bedroom

If you are planning to use the speaker_group option in several cards, creating a separate yaml file for the list is highly recommended, this will result in a less cluttered ui-lovelace.yaml and also make the list easier to manage and maintain. You then simply reference the file containing the list using entities: !include filename.yaml for every occurrence of entities in your ui-lovelace.yaml.

This is however only possible when you have lovelace mode set to yaml in your HA configuration, see Lovelace YAML mode for more info.

Development

If you plan to contribute back to this repo, please fork & create the PR against the dev branch.

Clone this repository into your config/www folder using git.

$ git clone https://github.com/kalkih/mini-media-player.git

Add a reference to the card in your ui-lovelace.yaml.

resources:
  - url: /local/mini-media-player/dist/mini-media-player-bundle.js
    type: module

Instructions

Requires nodejs & npm

1. Move into the mini-media-player repo, checkout the dev branch & install dependencies.

$ cd mini-media-player && git checkout dev && npm install

2. Make changes to the source

3. Build the source by running

$ npm run build

4. Refresh the browser to see changes

   Make sure cache is cleared or disabled

5. (Optional) Watch the source and automatically rebuild on save

$ npm run watch

The new mini-media-player-bundle.js will be build and ready inside /dist.

Getting errors?

Make sure you have javascript_version: latest in your configuration.yaml under frontend:.

Make sure you have the latest version of mini-media-player-bundle.js.

If you have issues after updating the card, try clearing your browsers cache or restart Home Assistant.

If you are getting "Custom element doesn't exist: mini-media-player" or running older browsers try replacing type: module with type: js in your resource reference, like below.

resources:
  - url: ...
    type: js

Inspiration

• @ciotlosm - custom-lovelace
• @c727 - Custom UI: Mini media player

License

This project is under the MIT license.