Lovelace: Mini Media Player

Daniel_Berntsson · July 12, 2019, 11:18am

i got help to install this, i workt great, BUT then i removed:
lovelace:
mode: yaml

do be avalebe to use card, and its gone:( have no ide what i need to change to make come back.

resources:
  - url: /local/community/mini-media-player/mini-media-player.js?v=1.2.2
    type: module
title: Home title
views:
  - title: First tab
    cards:
      - type: custom:mini-media-player
        entity: media_player.kok
        icon: mdi:spotify
        artwork: cover
        hide:
          volume: true
          source: true
          power_state: false

is my lovelace.ymal

benm7 · July 12, 2019, 11:48am

Is there any way to make the overlay/background of this transparent/none so that it fits in to my theme set up as below? At the moment it shows a solid background.

kalkih · July 12, 2019, 12:02pm

Hey, when you disable yaml mode, ui-locelace.yaml is no longer being used, so you’ll have to add the card resource reference through the raw config editor in the home assistant user interface.
See step 3 here.

Yes, the card background is based on the style variable --ha-card-background, so you can either change this variable in your theme (will apply to all cards) or set it manually for specific card(s) using something like lovelace-card-mod.

Edit: Btw, make sure you got the latest release of the card, the background color was based on --paper-card-background-color in earlier releases.

benm7 · July 12, 2019, 12:20pm

Thanks heaps for fast response! Have tried that but doesn’t seem to do anything. Am on v1.2.2 as well which looks like the latest on HACS. Here is my code:

      - type: custom:mini-media-player
        style: |
          ha-card {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: none;
            --paper-item-icon-color: var(--primary-text-color);
            ha-card-background: rgba(148,50,52,0.0)
          }
        entity: media_player.kids_google_home

Any ideas why it might not be working?

benm7 · July 12, 2019, 12:28pm

Ignore me, got it to work by adding the – thanks so much!

Daniel_Berntsson · July 12, 2019, 4:02pm

I did make the changes i the raw config, save and restart. but no media player.
I just copy the url i had in my old file, what i know work using the other methed.
bu no luck

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

nickrout · July 12, 2019, 10:57pm

your indentation is wrong.

kalkih · July 12, 2019, 10:58pm

Try, type: module, if that doesn’t work try clearing the browser cache.
And If still no luck, try installing the card from scratch, this guide by @thomasloven is great, combined with the card readme on github.

Daniel_Berntsson · July 14, 2019, 12:07pm

http://hassio.local:8123/community_plugin/mini-media-player/mini-media-player.js:1:68547 Uncaught NotSupportedError: Failed to execute ‘define’ on ‘CustomElementRegistry’: the name “mmp-group-item” has already been used with this registry

i get this

kalkih · July 14, 2019, 1:41pm

Okay, that seems to suggest that the code is being loaded twice, make sure the resource reference is only included once, could be a cache issue, try clearing the browser cache manually,

Daniel_Berntsson · July 14, 2019, 3:16pm

no luck:/

i just get No card type found.
i am using HACS and i have check the so the name of the patch i correct, i have cleard the cache 5times. Will try install it the old way and see if its get me any luck. Starting to think somthing is wrong whit HACS insall, cant get any one to work from it

EDIT: i tried install it the “old” way, and not using HACS i now works like a charm. now i need to figuer out how to write the code to make it work like i whant:S

Daniel_Berntsson · July 15, 2019, 3:31pm

i mange to get it to works… took way to long but now it works.

dont know if this is the thing i looking for but, maybe some one can show me the patch:)

I want to make a media play for example mini media player to play music from spotify and be available to chose if i want to play it in kitchen, livingroom and so one.

Is mini media player the right thing?

regard

kalkih · July 15, 2019, 4:33pm

Great, what was the issue?

What type of media devices are they? You could potentially do this through mini media player shortcuts but I would need to know what kind of media devices you got to give you an explicit example.

Daniel_Berntsson · July 15, 2019, 5:35pm

i have paste the code in hear…
that have a -type but when i have save my raw-config swap it to url instead. so every time i write -typ i cant find the card. But then i wrote typ of mistake… and notis it was asking for a entity

i have google hub, google audio cast, apple tv 4, i think of geting more more google audio.

exus85 · July 17, 2019, 10:52am

Work in progress
panel mode/popup card/mini media players/spotcast/custom slider

tc23 · July 18, 2019, 5:59pm

Is there anything specific I need to do to get icon_state to work? Right now, the icon doesn’t change color when powered on. The power button does, but not the icon. Right now, I have it set to icon_state: true under the respective entity, but no change occurs to the icon when powered on or off

KoltesPunti · July 18, 2019, 7:01pm

At first thank you for your great work

After a lot of tries i get the mini player to work (phew)!
Is there any chance to get Heos Group Playing?

spacebass · July 18, 2019, 7:28pm

Well, add me to the list of using HACS and having some issues…
I’m using storage mode. I found and edited my .storage/lovelace to be:

 1 {
      2     "data": {
      3         "config": {
      4             "resources": [
      5                 {
      6                     "type": "module",
      7                     "url": "/community_plugin/mini-media-player/mini-media-player-bundle.js"
      8                 }
      9             ],
     10             "views": [
     11                 {
     12                     "badges": [],
     13                     "cards": [

(numbers are from :set number in vi )

My card looks like:

entity: media_player.kitchen
type: 'custom:mini-media-player'

I’ve tried it with and without a ‘-’ before type … no joy either way.
and Im getting the dreaded

Custom element doesn’t exist: mini-media-player.

if I do https://hostname:8123/community_plugin/mini-media-player/mini-media-player-bundle.js I get the JS code (eg: the page loads)

Anyone have any troubleshooting tips?

kalkih · July 18, 2019, 9:44pm

Icon state was removed a few months ago, might come back in the future.

Thanks!
I’m not familiar with heos sorry, but a after a quick look at the heos HA component it seems like groups are not yet implemented/supported (source), so I don’t think so unfortunately.

Are you sure the url is correct? My HACS tells me the url is /community_plugin/mini-media-player/mini-media-player.js (without the “-bundle”) part, but if you can access the currect url through the browser it seems to be ok.

You could also try editing the config from the ui through the “raw config editor” see here.

You could try replacing type: module with type: js if you are running an older browser.

tc23 · July 19, 2019, 1:06am

Thanks! Is there a way to change the icon color? I tried the mini-media-player-base-color mentioned in a post above, but that didn’t work