Skip to content
Minimalistic media card for Home Assistant Lovelace UI
Branch: dev
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Change TTS method for alexa custom component (#96) Mar 12, 2019
.babelrc Add iife wrap to improve compatibility Mar 7, 2019
.eslintrc.yml
.gitignore Break out media player specifics to a model Mar 3, 2019
.nvmrc
.travis.yml
LICENSE
README.md
changelog.md Update version info 🌟 Mar 7, 2019
package.json
rollup.config.js
tracker.json Update version info 🌟 Mar 7, 2019

README.md

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.

Preview Image

Install

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.0.3
    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.0.3/mini-media-player-bundle.js
  1. Add a reference to mini-media-player-bundle.js inside your ui-lovelace.yaml.
resources:
  - url: /local/mini-media-player-bundle.js?v=1.0.3
    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.0.3
    type: module

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

Using the card

Options

Card options

Name Type Default Since Description
type string required v0.1 custom:mini-media-player
entity string required v0.1 An entity_id from an entity within the media_player domain.
title string optional v0.1 Set a custom card title.
name string optional v0.6 Override the entities friendly name.
icon string optional v0.1 Specify a custom icon from any of the available mdi icons.
more_info boolean true v0.1 Enable the "more info" popup dialog when pressing on the card.
group boolean optional v0.1 Removes paddings, background color and box-shadow.
hide object optional v1.0.0 Manage visible UI elements, see hide object for available options.
artwork string default v0.4 cover to display current artwork in the card background, full-cover to display full artwork, none to hide artwork, full-cover-fit for full cover without cropping.
tts object optional v1.0.0 Show Text-To-Speech input, see TTS object for available options.
source string optional v0.7 Change how the source is shown, icon to only display the, full display the full source name.
info string optional v1.0.0 Change how the media information is displayed, short to limit media information to one row, scroll to scroll overflowing media info.
volume_stateless boolean false v0.6 Swap out the volume slider for volume up & down buttons.
max_volume number true v0.8.2 Specify a volume limit for the volume slider (number between 1 - 100).
replace_mute string optional v0.9.8 Replace the mute button, available options are play, stop, next.
toggle_power boolean true v0.8.9 Set to false to change the power button behaviour to media_player.turn_on/media_player.turn_off.
idle_view object optional v1.0.0 Display a less cluttered view when idle, See Idle object for available options.
background string optional v0.8.6 Background image, specify the image url "/local/background-img.png" e.g.
sonos object optional v1.0.0 Sonos group management, see Sonos object for available options.
shortcuts object optional v1.0.0 Media shortcuts in a list or as buttons, see Shortcut object for available options.

Idle object

Name Type Default Description
when_idle boolean optional Render the idle view when player state is idle.
when_paused boolean optional Render the idle view when player state is paused
when_standby boolean optional Render the idle view when player state is standby
after string optional Specify a number (minutes) after which the card renders as idle (only supported on platforms exposing media_position_updated_at).

TTS object

Name Type Default Description
platform string required Specify TTS platform, e.g. google or amazon_polly, alexa for the "Alexa as Media Player" custom_component, ga for use with Google Assistant Webserver or Assistant Relay, sonos for use with modified sonos_say script.
language string optional The output language.
entity_id string/list optional The entity_id of the desired output entity or a list of entity_id's, can also be all to broadcast to all entities.
volume float optional Volume level of tts message (0 - 1), only supported by sonos at the moment.

Using the ga platform will restrict the use of language & entity_id options, this also applies to alexa & sonos (sonos_say script). Using ga also requires that a custom notify service is set up with the name ga_broadcast, example below.

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

Sonos object

See Sonos group management for example usage.

Name Type Default Description
entities list required A list containing Sonos entities, to enable group management of Sonos speakers.
sync_volume boolean optional Keep volume Synchronize between grouped speakers.
expanded boolean optional Make the Sonos list expanded by default.
show_group_count boolean true Have the number of grouped speakers displayed (if any) in the card name.

Sonos entity object

Name Type Default Description
entity_id string required The entity_id for the Sonos entity.
name string required A display name.
volume_offset number optional Volume offset (0-100) when used with sync_volume.

Shortcuts object

See card with media shortcuts for example usage.

Name Type Default Description
list list optional A list of shortcut items to be presented as a list, see shortcut item object.
buttons list optional A list of shortcut items to be presented as buttons.
hide_when_off boolean false Hide the shortcuts while the entity is off.
columns integer (1-4) 2 Specify the max number of buttons per row.

Shortcut item object

Name Type Default Description
name string optional A display name.
icon string optional A display icon (any mdi icon).
type string required A media type. Must be one of music, tvshow, video, episode, channel, playlist, source or script
id string required A media identifier. The format of this is component dependent. For example, you can provide URLs to Sonos & Cast but only a playlist ID to iTunes & Spotify. A source name can also be specified to change source, use together with type source or a script entity for use with script.

Hide object

Name Type Default Description
name boolean false The name.
icon boolean false The entity icon.
info boolean false The media information.
power boolean false The power button.
source boolean false The source button.
controls boolean false The media playback controls.
volume boolean false The volume controls.
mute boolean false The mute button.
progress boolean false The progress bar.
artwork_border boolean true The border of the default artwork picture.
power_state boolean true Dynamic color of the power button to indicate on/off.
icon_state boolean true Dynamic color of the entity icon to indicate on/off.
shuffle boolean true The shuffle button (only for players with shuffle_set support).

Theme variables

The following variables are available and can be set in your theme to change the appearence of the card. | name | Default | Description | |------|---------|-------------| | mini-media-player-accent-color | var(--accent-color) | Accent color | mini-media-player-media-cover-info-color | white | Color of the media information while artwork cover exists

More coming...

Example usage

Basic card

Basic card example

- 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.

Compact card example

- 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?

Card with media shortcuts example

- 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.

Grouped cards example

- 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.

Stacked cards example

- 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

Sonos group management

Specify all your Sonos entities in a list under the option sonos -> entities.

  • 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.

sonos group management example

- type: custom:mini-media-player
  entity: media_player.sonos_office
  hide:
    power: true
    icon: true
    source: true
  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 sonos 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
  1. Make changes to the source

  2. Build the source by running

$ npm run build
  1. Refresh the browser to see changes

    Make sure cache is cleared or disabled

  2. (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

License

This project is under the MIT license.

You can’t perform that action at this time.