{"_id":"mini-media-player","_rev":"6-99370124af0070b754fb7637a02e2918","time":{"0.9.8":"2019-01-21T14:48:32.507Z","created":"2019-01-23T02:43:23.550Z","0.9.9":"2019-01-23T02:43:23.643Z","modified":"2022-05-09T09:45:38.658Z","1.0.0":"2019-02-07T20:57:20.227Z","1.1.2":"2019-05-09T23:12:31.451Z","1.2.2":"2019-07-24T15:35:41.222Z"},"name":"mini-media-player","dist-tags":{"latest":"1.2.2"},"versions":{"0.9.9":{"name":"mini-media-player","version":"0.9.9","description":"A minimalistic yet customizable media player card for Home Assistant Lovelace UI","keywords":["home-assistant","homeassistant","hass","automation","lovelace","media","custom-cards"],"main":"mini-media-player.js","repository":{"type":"git","url":"git+ssh://git@github.com/kalkih/mini-media-player.git"},"author":{"name":"Karl Kihlström","email":"mrkihlstrom@gmail.com"},"license":"MIT","dependencies":{"@polymer/lit-element":"0.6.3","resize-observer-polyfill":"^1.5.1"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.2.3","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-transform-template-literals":"^7.2.0","@babel/preset-env":"^7.2.3","babel-preset-minify":"^0.5.0","rollup":"^0.66.6","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-terser":"^3.0.0"},"scripts":{"build":"rollup -c && babel mini-media-player-bundle.js --out-file mini-media-player-bundle.js","rollup":"rollup -c","watch":"rollup -c --watch"},"gitHead":"a2854bdddce1f4a802179622278288d43da1c54e","bugs":{"url":"https://github.com/kalkih/mini-media-player/issues"},"homepage":"https://github.com/kalkih/mini-media-player#readme","_id":"mini-media-player@0.9.9","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"kalkih","email":"mrkihlstrom@gmail.com"},"dist":{"integrity":"sha512-YBByVZOtGTrAuuhNshXlRkyj73Xe//A9oYhxnYvqlXAg49GQakDD3j9y8UD0qH4DnS8J46LyTKOjODwe1bkJQg==","shasum":"bd1dfbd78477fff00d2bbaeb98080e712b53235b","tarball":"https://registry.npmjs.org/mini-media-player/-/mini-media-player-0.9.9.tgz","fileCount":8,"unpackedSize":66008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR9TMCRA9TVsSAnZWagAAFjUP/2PNzXgm97DY52WUW354\n6mzbE08HbWv8lA8VgJZa6kbzaHe0aVqu9I9MW2iX0MHvmJmT0sXkIHpWY0x+\nxJyyPMvAbdIP/cio/23UxiN6Xm0x3O9b1R0AjfAFjh/4GOmfsiaOWbcndLg6\nppQfg1eOEbkcLS0Q8uHRppJcz4Osvo8FlbMBDbI4Q8Yf5hJ3mqde/nrVOucA\ngilnOcCl0tWy8pzqhmT/MYEcV5ph275wBZvA28rsFhm5vew7GEDGKCh16x+v\nBB1zjZaPn+9GdYXWg1tOQ9RqIAKeD6zcvJoGeXCUEOlZaWHPwO4InqqWqUMW\nEOCH32N4mIPOiwES7Vrsa4u5naD87jy33Dxd2yb79497grRfyO9/C6crXDm3\n6wVUJbdtxMAHTDE3bzSN5xOUmvrAGs5IJm5QMovdKm3g2i2hGrE9Dk6pZ0rs\n6MBWroGAB+CoEPeIQIXF/QqXj+JBMvWkPeTTJ3rwQQ7ns6bVI2Q3149B7f1x\nRc0vh+jEoIRUmQJIkf/qx95Ufm+S7SvgMx6uCPezMl/4Ep25OBGlqtGuW7E8\nQGQcLSzNlGftlEWgq0mMtt5LGHm59Yu7JFb48nI3Mcipp+oLLJ8fp+cI2GDH\nseSRrvysoJ5PYFylRDqx6BUYEfKhXfRy/lGbJire+izqZCC9uEmpblDpryvz\nSWl5\r\n=v6dO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE3VpRavqJHSrVNfGZQOnwCobnd5Qj6mVNEwtQUUd9nPAiEAyyNZeWVJTYlBZpDetzYKUnAc7pqG5YEpwmJjdmc6ctQ="}]},"maintainers":[{"name":"kalkih","email":"mrkihlstrom@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mini-media-player_0.9.9_1548211403551_0.14219400079520983"},"_hasShrinkwrap":false},"1.0.0":{"name":"mini-media-player","version":"1.0.0","description":"A minimalistic yet customizable media player card for Home Assistant Lovelace UI","keywords":["home-assistant","homeassistant","hass","automation","lovelace","media","custom-cards"],"main":"main.js","repository":{"type":"git","url":"git+ssh://git@github.com/kalkih/mini-media-player.git"},"author":{"name":"Karl Kihlström","email":"mrkihlstrom@gmail.com"},"license":"MIT","dependencies":{"@polymer/lit-element":"0.6.3","resize-observer-polyfill":"^1.5.1"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.2.3","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-transform-template-literals":"^7.2.0","@babel/preset-env":"^7.2.3","babel-preset-minify":"^0.5.0","eslint":"^5.11.1","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.14.0","rollup":"^0.66.6","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-terser":"^3.0.0"},"scripts":{"build":"npm run lint && npm run rollup && npm run babel","rollup":"rollup -c","babel":"babel mini-media-player-bundle.js --out-file mini-media-player-bundle.js","lint":"eslint main.js","watch":"rollup -c --watch"},"gitHead":"99da4e90645ad4b071224eb4c8eb1a18468fab2c","bugs":{"url":"https://github.com/kalkih/mini-media-player/issues"},"homepage":"https://github.com/kalkih/mini-media-player#readme","_id":"mini-media-player@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"kalkih","email":"mrkihlstrom@gmail.com"},"dist":{"integrity":"sha512-GDWXLvBSQrijnAR968RnQTK//L4sHaUsErZSoiq70dK890Y9rFRm4n0UVBiPeu78kUp89CBeLicHXbmNE+0k4g==","shasum":"670da3ed472b945471b1dccca02a278d70a6741b","tarball":"https://registry.npmjs.org/mini-media-player/-/mini-media-player-1.0.0.tgz","fileCount":12,"unpackedSize":71740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXJuwCRA9TVsSAnZWagAAbcEP/jhhFfilIBzIBrLaU9F+\ncQyidyH12Vduh9oslqLUd4lMkWvtokFuFm5LEkZW8Yd2Hw9LYVX62GEEKCo4\nFE0h6Gs58UkLtNJyP3Pcep5k9IPHtQRboDGdcDx3NtphBiSbtm6NdQI/2e8S\nlg2G7pxYROJ4hy4ROz0rr3CW5+15ksch4NQed9nQx8m3G9MLx8r4q9vCFQ3N\nU0fThNdRyacj29ZNgNfSn6WwYKHkhxD+xTvrslqvd7WBb9kcfPMyhnxwrETW\nNRUCy9J8axXob4lQnd8wLJRGA+GuMdfpSuOFZBB07KbwC8jYbbB0BB7tgTKa\ntU1gHmD5ZZ/V8SrgQc/LB8Ac/7AMN1s3Nf0JozmmemFylcTcVCYQK9CCwS0i\nDgdxqXUR4Fyxe+xH9Vvix4TjaDfYiwoTUZeyXDLRillpAiKIuK655M6jByT8\n04XdE6i6giB2lc4L5F7+YsV7CDmJ0b6YSQj+7+5+on0VD0s8v8LgY4qIs0bG\nZ3K5lOTWoJaOiuUTrbZD3hbQGTNKtW0WeOQ1/k+/3CURU3CtIucLBKGpikOP\nUIg3fqStFveWI8CDvMQ5PFl5BNXeyHbYJBu0NArQ9EKezU0iQxDKDYYj3hzv\n8HJEc1nqpKWMNiO+RelIYKo0WCeVT/p3qYmu6cfZbBlE83tHUGD4u20sJ8yb\nhRKx\r\n=kbTf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBHmFXD9bBoD/vCCgXY2b56xmo/deh7yFeCaVOJZu+k4AiA4myXlOMSS7mRodPvPp60a0h9e76iUHUimCT0TAzJMvw=="}]},"maintainers":[{"name":"kalkih","email":"mrkihlstrom@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mini-media-player_1.0.0_1549573040136_0.7509554269165053"},"_hasShrinkwrap":false},"1.1.2":{"name":"mini-media-player","version":"1.1.2","description":"A minimalistic yet customizable media player card for Home Assistant Lovelace UI","keywords":["home-assistant","homeassistant","hass","automation","lovelace","media","custom-cards"],"main":"src/main.js","module":"src/main.js","repository":{"type":"git","url":"git+ssh://git@github.com/kalkih/mini-media-player.git"},"author":{"name":"Karl Kihlström","email":"mrkihlstrom@gmail.com"},"license":"MIT","dependencies":{"lit-element":"^2.1.0","lit-html":"^1.0.0","resize-observer-polyfill":"^1.5.1"},"devDependencies":{"@babel/cli":"^7.4.3","@babel/core":"^7.4.3","@babel/plugin-proposal-class-properties":"^7.3.3","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-transform-template-literals":"^7.2.0","@babel/preset-env":"^7.3.1","babel-plugin-iife-wrap":"^1.1.0","babel-preset-minify":"^0.5.0","eslint":"^5.16.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"2.16.0","rollup":"^0.66.6","rollup-plugin-node-resolve":"^3.4.0"},"scripts":{"build":"npm run lint && npm run rollup && npm run babel","rollup":"rollup -c","babel":"babel dist/mini-media-player-bundle.js --out-file dist/mini-media-player-bundle.js","lint":"eslint src/* --ext .js","watch":"rollup -c --watch"},"gitHead":"6c9bd98968065a7fd310c4d9d6200107f125f3b3","bugs":{"url":"https://github.com/kalkih/mini-media-player/issues"},"homepage":"https://github.com/kalkih/mini-media-player#readme","_id":"mini-media-player@1.1.2","_nodeVersion":"8.12.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-Ri+DtfpRlvFUEFTGIPN1Ohmm5ytqgSd03mXdXtAvl6NcTgPqkmrw9dOFtkk0JHU9t0fnhTo9+UKcGEaFoU/6tA==","shasum":"578ece7d58aa8ea6dcc2744bcccf98fc07d30707","tarball":"https://registry.npmjs.org/mini-media-player/-/mini-media-player-1.1.2.tgz","fileCount":28,"unpackedSize":97350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1LPgCRA9TVsSAnZWagAAwyMP/3HY1KbAURBArZOtgvnC\nlmjFB73PZnhEM0HsbdjIDXFrFGBZ33m7AwqEbYvR+5VfjYZmCzDQsikJ+RXT\n7l1gZA7F53opKAbvQ6wFAHwW2Lj+pLIXKhRMB/sikv7sojzetLBww6rUaBXx\nGsjCNWanTXwLePHl3Ov56iM6gB7ljnK/wiwOJBor6xzMowTYIKbNKuqQoV5D\nC48aENhnIPWSEse8AbcpgpXNddO9tOGiiIub7ccDgzMWez6ny6ovMpFBMfsE\nMHOLFeEzbPYEv/apvQ7y3mI7kdEZaILEUTcbFhDEPTvvGXyGegf6B18vqg09\nyHC8SgxwZ8fsGwALDQ1Xq8E0Lchj0PnXgBGkCydq9Cok+easCMqNxEkBT27d\nDutPGSEIp7fAoM7EKoyLcYACo0TPvvHnaiq2e32z7p/DwWzrfvCK+4mihZoc\nzD67gTA0iLwoX6DS9l/RizrEXYXGTwHmErtl2MJHxJzUYsKIvWBT1wAvGy6i\nEQJD+fP1S6RUnpwAdCvynEcbwB29WQ927Co1OvRjdkx953sxSoQSK3J9RWaR\nZTsSPCTfez+guGXBQecas1FMMzT2XPc/60Sa4VH8eFZFdNO+sRg6/00AhB5t\nqY3uyt6T0H4q61yWFy5HJ6PEJpZODmtGwtDp2xgUZOYN8JJ/MeOsl4DmYWKB\nzsMJ\r\n=l0cF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGg2sjOuNAgILiCOTpMJG9Lk4CwIkRy4i+WoJadL2kD1AiBvknJ0o9ESy+PS29nsqqtzviqjCZNyjoyNXs9i5ESEEQ=="}]},"maintainers":[{"name":"kalkih","email":"mrkihlstrom@gmail.com"}],"_npmUser":{"name":"kalkih","email":"mrkihlstrom@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mini-media-player_1.1.2_1557443551250_0.12477042087410761"},"_hasShrinkwrap":false},"1.2.2":{"name":"mini-media-player","version":"1.2.2","description":"A minimalistic yet customizable media player card for Home Assistant Lovelace UI","keywords":["home-assistant","homeassistant","hass","automation","lovelace","media","custom-cards"],"main":"src/main.js","module":"src/main.js","repository":{"type":"git","url":"git+ssh://git@github.com/kalkih/mini-media-player.git"},"author":{"name":"Karl Kihlström","email":"mrkihlstrom@gmail.com"},"license":"MIT","dependencies":{"lit-element":"^2.1.0","lit-html":"^1.0.0","resize-observer-polyfill":"^1.5.1"},"devDependencies":{"@babel/cli":"^7.4.3","@babel/core":"^7.4.3","@babel/plugin-proposal-class-properties":"^7.3.3","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-transform-template-literals":"^7.2.0","@babel/preset-env":"^7.3.1","babel-plugin-iife-wrap":"^1.1.0","babel-preset-minify":"^0.5.0","eslint":"^5.16.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"2.16.0","rollup":"^0.66.6","rollup-plugin-node-resolve":"^3.4.0"},"scripts":{"build":"npm run lint && npm run rollup && npm run babel","rollup":"rollup -c","babel":"babel dist/mini-media-player-bundle.js --out-file dist/mini-media-player-bundle.js","lint":"eslint src/* --ext .js","watch":"rollup -c --watch"},"gitHead":"8cedc884d867ec117343778a7f37aaf066fc832c","bugs":{"url":"https://github.com/kalkih/mini-media-player/issues"},"homepage":"https://github.com/kalkih/mini-media-player#readme","_id":"mini-media-player@1.2.2","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-SeAX4IZND91zxmvS6HZ51MXBUpaAHeVsamstxFQacw5VpmYyKNN0pIinlSuQSmFviy55Zx96tIeZNsLL8ObVew==","shasum":"f8ead1b150d649860841163d1f22d356d606b5b0","tarball":"https://registry.npmjs.org/mini-media-player/-/mini-media-player-1.2.2.tgz","fileCount":30,"unpackedSize":105663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdOHrOCRA9TVsSAnZWagAAgugP/j97OwLuBXZwpyITAwdO\ntSbuJX3rrZN7ZFGFT2FkX6CYXmj7/1wtvBXBxvxCgqY4eEh8tSL8CvpsmJ0z\n81aP7dN4S2T50Km2Tp4xn203Lix/Vjb4mp1LjZjUWsMCmZ5pJEyAwdpzQGbU\nzjW+ncc1pKpAqAMF2RfErzqfQljqPdqdXG5ITB6d9NxHSIGqWWrLRhMekh5N\nlYfCokkwoo9RLC2Qu/di3XTynjvmN74PcryLExZSZdunkzX+Cg5W//gJ4lIS\nzBJ8eBzFB0BJWGVRJ6zJKI4f7o7rvUYP9LS8SgwPQD7UDG6og08uLabuqYQt\nZSalqQGYYmGruBpA9uYdH6rMXChZ8lmVq+/YaO0DP7Zy470p5O9DasjuUQTz\nRjGoTMrjSvMwGepirZiSYwEMbZ8D1L1dJQWoG5xIMp54Znk5XD58UfNDXL/P\nvpmJoQId5ajpclmf1eVlmbqHrGmuHN2dE8v0ljERGcTGTULIE9+XThfaCNrU\nNm1tKXjF0VOE4bp//pVJhN5wDiB7FyM8MhCLs+C+iFm+nnfkbA7SPLeuoXR8\n7/4JnZBSxAk5koJxOH21yWaL0ZJv2XtnN8WRDRohNxLsNfYP/t4/4OdERwKj\n8sQoEnvpXi+lgzYSTMZnQbq5iLnX3522dh6zhWScYlESgz1EJkqhu141oIe8\n/NwR\r\n=4CBv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBivdmxVatgLu2t4zLz1U5q3BPt2nsEhWWMFlVxLgP8JAiBc70diau4XnUr86mk2Yf102Zl3cTfkwg3p5LKBNTsQyw=="}]},"maintainers":[{"name":"kalkih","email":"mrkihlstrom@gmail.com"}],"_npmUser":{"name":"kalkih","email":"mrkihlstrom@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mini-media-player_1.2.2_1563982541076_0.7148662346056036"},"_hasShrinkwrap":false}},"maintainers":[{"name":"kalkih","email":"mrkihlstrom@gmail.com"}],"description":"A minimalistic yet customizable media player card for Home Assistant Lovelace UI","homepage":"https://github.com/kalkih/mini-media-player#readme","keywords":["home-assistant","homeassistant","hass","automation","lovelace","media","custom-cards"],"repository":{"type":"git","url":"git+ssh://git@github.com/kalkih/mini-media-player.git"},"author":{"name":"Karl Kihlström","email":"mrkihlstrom@gmail.com"},"bugs":{"url":"https://github.com/kalkih/mini-media-player/issues"},"license":"MIT","readme":"# Mini Media Player\n\n[![](https://img.shields.io/github/release/kalkih/mini-media-player.svg?style=flat-square)](https://github.com/kalkih/mini-media-player/releases/latest)\n[![](https://img.shields.io/travis/kalkih/mini-media-player.svg?style=flat-square)](https://travis-ci.org/kalkih/mini-media-player)\n\nA minimalistic yet customizable media player card for [Home Assistant](https://github.com/home-assistant/home-assistant) Lovelace UI.\n\nInspired by [Custom UI: Mini media player](https://community.home-assistant.io/t/custom-ui-mini-media-player/40135) and [custom-lovelace](https://github.com/ciotlosm/custom-lovelace).\n\n![Preview Image](https://user-images.githubusercontent.com/457678/47517460-9282d600-d888-11e8-9705-cf9ec3698c3c.png)\n\n## Install\n\n*This card is available in [HACS](https://github.com/custom-components/hacs) (Home Assistant Community Store)*\n\n### Simple install\n\n1. Download and copy `mini-media-player-bundle.js` from the [latest release](https://github.com/kalkih/mini-media-player/releases/latest) into your `config/www` directory.\n\n2. Add a reference to `mini-media-player-bundle.js` inside your `ui-lovelace.yaml`.\n\n  ```yaml\n  resources:\n    - url: /local/mini-media-player-bundle.js?v=1.2.2\n      type: module\n  ```\n\n### CLI install\n\n1. Move into your `config/www` directory\n\n2. Grab `mini-media-player-bundle.js`\n\n  ```console\n  $ wget https://github.com/kalkih/mini-media-player/releases/download/v1.2.2/mini-media-player-bundle.js\n  ```\n\n3. Add a reference to `mini-media-player-bundle.js` inside your `ui-lovelace.yaml`.\n\n  ```yaml\n  resources:\n    - url: /local/mini-media-player-bundle.js?v=1.2.2\n      type: module\n  ```\n\n### *(Optional)* Add to custom updater\n\n1. Make sure you've the [custom_updater](https://github.com/custom-components/custom_updater) component installed and working.\n\n2. Add a new reference under `card_urls` in your `custom_updater` configuration in `configuration.yaml`.\n\n  ```yaml\n  custom_updater:\n    card_urls:\n      - https://raw.githubusercontent.com/kalkih/mini-media-player/master/tracker.json\n  ```\n\n## Updating\n1. Find your `mini-media-player-bundle.js` file in `config/www` or wherever you ended up storing it.\n\n2. Replace the local file with the latest one attached in the [latest release](https://github.com/kalkih/mini-media-player/releases/latest).\n\n3. Add the new version number to the end of the cards reference url in your `ui-lovelace.yaml` like below.\n\n  ```yaml\n  resources:\n    - url: /local/mini-media-player-bundle.js?v=1.2.2\n      type: module\n  ```\n\n*You may need to empty the browsers cache if you have problems loading the updated card.*\n\n## Using the card\n\n### Options\n\n#### Card options\n| Name | Type | Default | Since | Description |\n|------|------|---------|-------|-------------|\n| type | string | **required** | v0.1 | `custom:mini-media-player`\n| entity | string | **required** | v0.1 | An entity_id from an entity within the `media_player` domain.\n| name | string | optional | v0.6 | Override the entities friendly name.\n| icon | string | optional | v0.1 | Specify a custom icon from any of the available mdi icons.\n| more_info | boolean | true | v0.1 | Enable the \"more info\" popup dialog when pressing on the card.\n| group | boolean | optional | v0.1 | Removes paddings, background color and box-shadow.\n| hide | object | optional | v1.0.0 | Manage visible UI elements, see [hide object](#hide-object) for available options.\n| 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.\n| tts | object | optional | v1.0.0 | Show Text-To-Speech input, see [TTS object](#tts-object) for available options.\n| source | string | optional | v0.7 | Change source select appearance, `icon` for just an icon, `full` for the full source name.\n| sound_mode | string | optional | v1.1.2 | Change sound mode select appearance, `icon` for just an icon, `full` for the full sound mode name.\n| 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.\n| volume_stateless | boolean | false | v0.6 | Swap out the volume slider for volume up & down buttons.\n| max_volume | number | optional | v0.8.2 | Specify the max vol limit of the volume slider (number between 1 - 100).\n| min_volume | number | optional | v1.1.2 | Specify the min vol limit of the volume slider (number between 1 - 100).\n| replace_mute | string | optional | v0.9.8 | Replace the mute button, available options are `play`, `stop`, `next`.\n| 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`.\n| idle_view | object | optional | v1.0.0 | Display a less cluttered view when idle, See [Idle object](#idle-object) for available options.\n| background | string | optional | v0.8.6 | Background image, specify the image url `\"/local/background-img.png\"` e.g.\n| speaker_group | object | optional | v1.0.0 | Speaker group management for supported platforms, see [Speaker group object](#speaker-group-object) for available options.\n| shortcuts | object | optional | v1.0.0 | Media shortcuts in a list or as buttons, see [Shortcut object](#shortcuts-object) for available options.\n\n#### Idle object\n| Name | Type | Default | Description |\n|------|------|---------|-------------|\n| when_idle | boolean | optional | Render the idle view when player state is `idle`.\n| when_paused | boolean | optional | Render the idle view when player state is `paused`\n| when_standby | boolean | optional | Render the idle view when player state is `standby`\n| after | string | optional | Specify a number (minutes) after which the card renders as idle *(only supported on platforms exposing `media_position_updated_at`)*.\n\n#### TTS object\n| Name | Type | Default | Description |\n|------|------|---------|-------------|\n| platform | string | **required** | Specify [TTS platform](https://www.home-assistant.io/components/tts/), e.g. `google_translate` or `amazon_polly`, `alexa`<sup>[1](#tts_foot1)</sup> for [\"Alexa as Media Player\"](https://community.home-assistant.io/t/echo-devices-alexa-as-media-player-testers-needed/58639), `ga`<sup>[2](#tts_foot2)</sup><sup>[3](#tts_foot3)</sup> for use with [Google Assistant Webserver](https://community.home-assistant.io/t/community-hass-io-add-on-google-assistant-webserver-broadcast-messages-without-interrupting-music/37274) or [Assistant Relay](https://github.com/greghesp/assistant-relay), `sonos`<sup>[2](#tts_foot2)</sup> for use with modified [sonos_say script](https://github.com/kalkih/mini-media-player/issues/86#issuecomment-465541825), `webos`<sup>[4](#tts_foot4)</sup>.\n| language | string | optional | The output language.\n| 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.\n| volume | float | optional | Volume level of tts output (0 - 1), only supported by platform `sonos`.\n| type | string | optional | `tts`, `announce` or `push`, defaults to `tts`, only supported by platform `alexa`, more info [here](https://github.com/keatontaylor/alexa_media_player/wiki/Notification-Component#functionality).\n\n<a name=\"tts_foot1\"><sup>1</sup></a> Does not support the `language` option.\n\n<a name=\"tts_foot2\"><sup>2</sup></a> Does not support `language` & `entity_id` options.\n\n<a name=\"tts_foot3\"><sup>3</sup></a> Requires a custom notify service named `ga_broadcast`, see example below.\n\n<a name=\"tts_foot4\"><sup>4</sup></a> 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.\n\n```yaml\n# configuration.yaml\nnotify:\n  - name: ga_broadcast\n    platform: rest\n    resource: http://[xxx.x.x.xxx]:5000/broadcast_message\n```\n\n#### Speaker group object\nSee [Speaker group management](#speaker-group-management) for example usage.\n\n| Name | Type | Default | Description |\n|------|------|---------|-------------|\n| entities | list | **required** | A list containing [speaker entities](#speaker-entity-object) of one of supported platforms, to enable group management of those speakers.\n| platform | string | 'sonos' | The media_player platform to control. `sonos` or `yamaha_musiccast`<sup>[1](#speaker_foot1)</sup>.\n| sync_volume | boolean | optional | Keep volume Synchronize between grouped speakers.\n| expanded | boolean | optional | Make the speaker group list expanded by default.\n| show_group_count | boolean | true | Have the number of grouped speakers displayed (if any) in the card name.\n\n<a name=\"speaker_foot1\"><sup>1</sup></a> Currently not yet available in Home Assistant, *soon™*\n\n#### Speaker entity object\n| Name | Type | Default | Description |\n|------|------|---------|-------------|\n| entity_id | string | **required** | The *entity_id* for the speaker entity.\n| name | string | **required** | A display name.\n| volume_offset | number | optional | Volume offset *(0-100)* when used with `sync_volume`.\n\n#### Shortcuts object\nSee [card with media shortcuts](#card-with-media-shortcuts) for example usage.\n\n| Name | Type | Default | Description |\n|------|------|---------|-------------|\n| list | list | optional | A list of [shortcut items](#shortcut-item-object) to be presented as a list, see shortcut item object.\n| buttons | list | optional | A list of [shortcut items](#shortcut-item-object) to be presented as buttons.\n| hide_when_off | boolean | false | Hide the shortcuts while the entity is off.\n| columns | integer (1-5) | 2 | Specify the max number of buttons per row.\n| column_height | number | optional | Specify the column height in pixels.\n| label | string | `shortcuts...` | Specify a custom default label for the shortcut dropdown.\n| attribute | string | optional | Specify any attribute exposed by the media player entity. The attribute value (if exists) is compared with shortcut `id`'s to distinguish selected/active shortcut<sup>[1](#shortcuts_foot1)</sup>.\n| align_text | string | optional | Specify alignment of button icon/text `left`, `right`, `center`.\n\n<a name=\"shortcuts_foot1\"><sup>1</sup></a> Examples, `source` for active source or `sound_mode` for active sound mode.\n\n#### Shortcut item object\n| Name | Type | Default | Description |\n|------|------|---------|-------------|\n| name | string | optional | A display name.\n| icon | string | optional | A display icon *(any mdi icon)*.\n| type | string | **required** | Type of shortcut. A media type: `music`, `tvshow`, `video`, `episode`, `channel`, `playlist` e.g. or an action type: `source`, `sound_mode`, `script` or `service`.\n| id | string | **required** | The 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/(sound mode) name can also be specified to change source/(sound mode), use together with type `source`/`sound_mode`. If type `script` specify the script name here or `service` specify the `<domain>.<service>`.\n| data | list | optional | Extra service payload<sup>[1](#shortcut_foot1)</sup>.\n\n<a name=\"shortcut_foot1\"><sup>1</sup></a> Only compatible with `script` & `service` shortcuts, useful for sending variables to script.\n\n#### Hide object\n| Name | Type | Default | Description |\n|------|------|---------|-------------|\n| name | boolean | false | The name.\n| icon | boolean | false | The entity icon.\n| info | boolean | false | The media information.\n| power | boolean | false | The power button.\n| source | boolean | false | The source select.\n| sound_mode | boolean | true | The sound_mode select.\n| controls | boolean | false | The media playback controls.\n| volume | boolean | false | The volume controls.\n| mute | boolean | false | The mute button.\n| progress | boolean | false | The progress bar.\n| runtime | boolean | true | The media runtime indicators.\n| artwork_border | boolean | true | The border of the `default` artwork picture.\n| power_state | boolean | true | Dynamic color of the power button to indicate on/off.\n| shuffle | boolean | true | The shuffle button (only for players with `shuffle_set` support).\n\n\n### Theme variables\nThe following variables are available and can be set in your theme to change the appearence of the card.\nCan be specified by color name, hexadecimal, rgb, rgba, hsl, hsla, basically anything supported by CSS.\n\n| name | Default | Description |\n|------|---------|-------------|\n| mini-media-player-base-color | var(--primary-text-color) & var(--paper-item-icon-color) | The color of base text, icons & buttons\n| mini-media-player-accent-color | var(--accent-color) | The accent color of UI elements\n| mini-media-player-overlay-color | rgba(0,0,0,0.5) | The color of the background overlay\n| mini-media-player-overlay-base-color | white | The color of base text, icons & buttons while artwork cover is present\n| mini-media-player-overlay-accent-color | white | The accent color of UI elements while artwork cover is present\n| mini-media-player-media-cover-info-color | white | Color of the media information text while artwork cover is present\n\n### Example usage\n\n#### Basic card\n<img src=\"https://user-images.githubusercontent.com/457678/52081816-771c1b00-259b-11e9-8c1e-cfd93ac3e66d.png\" width=\"500px\" alt=\"Basic card example\" />\n\n```yaml\n- type: custom:mini-media-player\n  entity: media_player.kitchen_speakers\n```\n\n#### Compact card\nSetting either `volume` and/or `controls` to `true` in the `hide` option object will render the player as a single row.\n\n<img src=\"https://user-images.githubusercontent.com/457678/53042774-569efc80-3487-11e9-8242-03d388d40c34.png\" width=\"500px\" alt=\"Compact card example\" />\n\n```yaml\n- type: custom:mini-media-player\n  entity: media_player.example\n  icon: mdi:spotify\n  artwork: cover\n  hide:\n    volume: true\n    source: true\n    power_state: false\n```\n\n#### Card with media shortcuts\nYou can specify media shortcuts through the `shortcuts` option, either as a list or as buttons or why not both?\n\n<img src=\"https://user-images.githubusercontent.com/457678/53040712-5e0fd700-3482-11e9-9990-6ca13b871f50.png\" width=\"500px\" alt=\"Card with media shortcuts example\">\n\n```yaml\n- entity: media_player.spotify\n  type: custom:mini-media-player\n  artwork: cover\n  source: icon\n  hide:\n    volume: true\n  shortcuts:\n    columns: 4 # Max buttons per row\n    buttons:\n      # Start predefined playlist\n      - icon: mdi:cat\n        type: playlist\n        id: spotify:user:spotify:playlist:37i9dQZF1DZ06evO2O09Hg\n      # Change the source to bathroom\n      - icon: mdi:dog\n        type: source\n        id: Bathroom\n      # Trigger script\n      - icon: mdi:dog\n        type: script\n        id: script.script_name\n      ... # etc.\n```\n\n#### Grouped cards\nSet the `group` option to `true` when nesting mini media player cards inside other cards that already have margins/paddings.\n\n<img src=\"https://user-images.githubusercontent.com/457678/52081831-800cec80-259b-11e9-9b35-63b23805c879.png\" width=\"500px\" alt=\"Grouped cards example\" />\n\n```yaml\n- type: entities\n  entities:\n    - type: custom:mini-media-player\n      entity: media_player.multiroom_player\n      group: true\n      source: icon\n      info: short\n      hide:\n        volume: true\n        power: true\n    - type: custom:mini-media-player\n      entity: media_player.kitchen_speakers\n      group: true\n      hide:\n        controls: true\n    - type: custom:mini-media-player\n      entity: media_player.bathroom_speakers\n      group: true\n      hide:\n        controls: true\n    - type: custom:mini-media-player\n      entity: media_player.bedroom_speakers\n      group: true\n      hide:\n        controls: true\n    - type: custom:mini-media-player\n      entity: media_player.patio_speakers\n      group: true\n      hide:\n        controls: true\n```\n\n#### Stacked cards\nBy using vertical and horizontal stacks, you can achieve many different setups.\n\n<img src=\"https://user-images.githubusercontent.com/457678/52081830-800cec80-259b-11e9-9a77-0e8585c3f71c.png\" width=\"500px\" alt=\"Stacked cards example\" />\n\n```yaml\n- type: horizontal-stack\n  cards:\n    - entity: media_player.tv_livingroom\n      type: custom:mini-media-player\n      info: short\n      artwork: cover\n      hide:\n        mute: true\n        icon: true\n        power_state: false\n    - entity: media_player.tv_bedroom\n      type: custom:mini-media-player\n      info: short\n      artwork: cover\n      hide:\n        mute: true\n        icon: true\n        power_state: false\n- type: horizontal-stack\n  cards:\n    - entity: media_player.cc_patio\n      type: custom:mini-media-player\n      hide:\n        icon: true\n    - entity: media_player.cc_kitchen\n      type: custom:mini-media-player\n      hide:\n        icon: true\n    - entity: media_player.cc_bath\n      type: custom:mini-media-player\n      hide:\n        icon: true\n```\n\n#### Speaker group management\nSpecify all your speaker entities in a list under the option `speaker_group` -> `entities`. They obviously need to be of the same platform.\n\n* The card does only allow changes to be made to groups where the entity of the card is the coordinator/master speaker.\n* Checking a speakers in the list will make it join the group of the card entity. (*`media_player.sonos_office`* in the example below).\n* Unchecking a speaker in the list will remove it from any group it's a part of.\n\n<img src=\"https://user-images.githubusercontent.com/457678/52181170-53511300-27ef-11e9-9d54-aa9c84a96168.gif\" width=\"500px\" alt=\"sonos group management example\">\n\n```yaml\n- type: custom:mini-media-player\n  entity: media_player.sonos_office\n  hide:\n    power: true\n    icon: true\n    source: true\n  speaker_group:\n    platform: sonos\n    show_group_count: true\n    entities:\n      - entity_id: media_player.sonos_office\n        name: Sonos Office\n      - entity_id: media_player.sonos_livingroom\n        name: Sonos Livingroom\n      - entity_id: media_player.sonos_kitchen\n        name: Sonos Kitchen\n      - entity_id: media_player.sonos_bathroom\n        name: Sonos Bathroom\n      - entity_id: media_player.sonos_bedroom\n        name: Sonos Bedroom\n```\n\nIf 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.\nYou then simply reference the file containing the list using `entities: !include filename.yaml` for every occurrence of `entities` in your `ui-lovelace.yaml`.\n\nThis is however only possible when you have lovelace mode set to yaml in your HA configuration, see [Lovelace YAML mode](https://www.home-assistant.io/lovelace/yaml-mode/) for more info.\n\n## Development\n*If you plan to contribute back to this repo, please fork & create the PR against the [dev](https://github.com/kalkih/mini-media-player/tree/dev) branch.*\n\n**Clone this repository into your `config/www` folder using git.**\n\n ```console\n$ git clone https://github.com/kalkih/mini-media-player.git\n```\n\n**Add a reference to the card in your `ui-lovelace.yaml`.**\n\n```yaml\nresources:\n  - url: /local/mini-media-player/dist/mini-media-player-bundle.js\n    type: module\n```\n\n### Instructions\n\n*Requires `nodejs` & `npm`*\n\n1. Move into the `mini-media-player` repo, checkout the *dev* branch & install dependencies.\n```console\n$ cd mini-media-player && git checkout dev && npm install\n```\n\n2. Make changes to the source\n\n3. Build the source by running\n```console\n$ npm run build\n```\n\n4. Refresh the browser to see changes\n\n    *Make sure cache is cleared or disabled*\n\n5. *(Optional)* Watch the source and automatically rebuild on save\n```console\n$ npm run watch\n```\n\n*The new `mini-media-player-bundle.js` will be build and ready inside `/dist`.*\n\n\n## Getting errors?\nMake sure you have `javascript_version: latest` in your `configuration.yaml` under `frontend:`.\n\nMake sure you have the latest version of `mini-media-player-bundle.js`.\n\nIf you have issues after updating the card, try clearing your browsers cache or restart Home Assistant.\n\nIf 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.\n\n```yaml\nresources:\n  - url: ...\n    type: js\n```\n\n## Inspiration\n- [@ciotlosm](https://github.com/ciotlosm) - [custom-lovelace](https://github.com/ciotlosm/custom-lovelace)\n- [@c727](https://github.com/c727) - [Custom UI: Mini media player](https://community.home-assistant.io/t/custom-ui-mini-media-player/40135)\n\n## License\nThis project is under the MIT license.\n","readmeFilename":"README.md"}