|
1 | | -[](https://github.com/custom-components/hacs) [](https://github.com/custom-cards/spotify-card)  |
2 | | - |
3 | | -[](https://www.buymeacoffee.com/fondberg) |
4 | | - |
5 | | -## Home Assistant Spotify Lovelace Card |
6 | | -**DISCLAIMER**: *This project is a private open source project and doesn't have any connection with Spotify.* |
7 | | - |
8 | | -Web component card which can be used as a Lovelace [Home Assistants](https://www.home-assistant.io/lovelace/]) card. |
9 | | - |
10 | | -Forum thread: https://community.home-assistant.io/t/spotify-lovelace-card/103525 |
11 | | - |
12 | | -This card supports listing the users currently available devices and the users top playlists on [Spotify](https://www.spotify.com). |
13 | | -Choose an online media player and click on a playlist to play it on the device. |
14 | | -This component will query the current playback from the Spotify Web API and tries to reflect the current status wrt to device and playlist if something is playing. |
15 | | - |
16 | | -The component uses the [Spotify Web API](https://developer.spotify.com/documentation/web-api/). |
17 | | - |
18 | | - |
19 | | - |
20 | | -## See release information in github for release notes |
21 | | - |
22 | | -### Requirements |
23 | | -This should now work in all newer major browsers. If it does not work for you please provide detailed reports in an issue ticket. |
24 | | - |
25 | | -### Installation |
26 | | -Create a new app at [Spotify developer console](https://developer.spotify.com/my-applications/#!/applications) |
27 | | -or use the one created for the HA Spotify component (see below). |
28 | | -Make sure you edit the settings and adds the redirect URL for the tab the card has. |
29 | | - |
30 | | -Example: `https://<your public home assistant hostname>:8123/lovelace/media`. |
31 | | - |
32 | | -For more information about how to create an app see [Home Assistant Spotify Component documentation](https://www.home-assistant.io/components/media_player.spotify/). |
33 | | - |
34 | | -Add the resource in lovelace config: |
35 | | - |
36 | | -##### HACS users: |
37 | | -Follow the HACS instructions when installing it. |
38 | | - |
39 | | - |
40 | | -##### Latest release using cdn: |
41 | | -``` |
42 | | - - type: module |
43 | | - url: >- |
44 | | - https://cdn.jsdelivr.net/gh/custom-cards/[email protected]/dist/spotify-card.umd.js |
45 | | -``` |
46 | | - |
47 | | -##### Add the card to lovelace config |
48 | | -Now add the card like this: |
49 | | -``` |
50 | | - cards: |
51 | | - - type: 'custom:spotify-card' |
52 | | - client_id: <YOUR CLIENT ID> |
53 | | - limit: <optional number of playlists to retrieve (default 10)> |
54 | | - device: <optional name of a device to pre-select> |
55 | | - player: <optional use this player only, value should be the same name as the displayname of the player> |
56 | | - featuredPlaylists: <optional show featured playlists instead of users playlists> |
57 | | - featuredPlaylistsCountryCode: <optional country code to show featured playlist relevent to a particular country. https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 > |
58 | | - dailyMixes: <optional show daily mixes, requires spotcast> |
59 | | - height: <optional pixels height for the playlist element. If content is larger scrolling will be enabled> |
60 | | - random_song: <optional boolean to start playlists from a random song> |
61 | | -``` |
62 | | - |
63 | | -If you add the `device` setting, the card will select it by default and will not display the dropdown menu. |
64 | | - |
65 | | -### General usage |
66 | | -This library can of course also be used on other websites or projects other than Home Assistant |
67 | | - |
68 | | -### CONTRIBUTING |
69 | | -Please contribute and help.Before creating a large PR make sure to sync about it with me. |
70 | | - |
71 | | -### Donate |
72 | | -If you like this and want to buy me a coffee |
73 | | - |
74 | | -<a href="https://www.buymeacoffee.com/fondberg" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a> |
75 | | -### License |
76 | | -This library is licensed under Apache 2.0, see [LICENSE](./LICENSE) |
| 1 | +[](https://github.com/custom-components/hacs) [](https://github.com/custom-cards/spotify-card) |
| 2 | + |
| 3 | + |
| 4 | + |
| 5 | +## Home Assistant Spotify Lovelace Card |
| 6 | + |
| 7 | +**DISCLAIMER**: _This project is a private open source project and doesn't have any connection with Spotify._ |
| 8 | + |
| 9 | +This card supports listing the users currently available devices and the users playlists on [Spotify](https://www.spotify.com). Choose an online media player and click on a playlist to play it on the device. This component will query the current playback from the [Spotify Integration](https://www.home-assistant.io/integrations/spotify/) and tries to reflect the currently playing playlist. |
| 10 | + |
| 11 | +The component uses the [Spotify Integration](https://www.home-assistant.io/integrations/spotify/) and [spotcast](https://github.com/fondberg/spotcast) and both of them have to be installed for the card to function properly. |
| 12 | + |
| 13 | +The forum thread can be found [here](https://community.home-assistant.io/t/spotify-lovelace-card/103525) |
| 14 | + |
| 15 | +<img src="pics/grid.png" width="300"> |
| 16 | + |
| 17 | +## See release information on Github for release notes |
| 18 | + |
| 19 | +### Requirements |
| 20 | + |
| 21 | +[Spotify Integration](https://www.home-assistant.io/integrations/spotify/) and [spotcast](https://github.com/fondberg/spotcast) have to be installed (Spotcast is needed for many other things than playing on cast devices). |
| 22 | +This card should work in all newer major browsers. If it does not work for you please provide detailed reports in an issue ticket. |
| 23 | + |
| 24 | +### Installation |
| 25 | + |
| 26 | +#### HACS users |
| 27 | + |
| 28 | +Follow the HACS instructions when installing it. |
| 29 | + |
| 30 | +#### Manually |
| 31 | + |
| 32 | +Copy the content of the `dist` folder to `www/community/spotify_card/` in your Home Assistant configuration directory. Create these folders if they do not exist. |
| 33 | + |
| 34 | +Then you have to add spotify card to your resources. This can be done via `Settings -> Lovelace Dashboards -> Resources`. Add this path: |
| 35 | + |
| 36 | +``` |
| 37 | + /local/community/spotify-card/spotify-card.js |
| 38 | +``` |
| 39 | + |
| 40 | +If you do not have the `Resources` tab available, you have to enable the advanced mode for Lovelace. To do so, click on your username on your Home Assistant dashboard and enanble the setting. |
| 41 | + |
| 42 | +### Usage |
| 43 | + |
| 44 | +Add the card via lovelace to your dashboard. All of the settings can be configured via the visual editor. |
| 45 | + |
| 46 | +If you are not using the visual configuration of Lovelace you can add the card like this: |
| 47 | + |
| 48 | +``` |
| 49 | + cards: |
| 50 | + - type: 'custom:spotify-card' |
| 51 | + account: <optional> which account to use for spotcast. Defaults to "default" |
| 52 | + height: <optional pixels height for the playlist element. If content is larger scrolling will be enabled> |
| 53 | + limit: <optional number of playlists to retrieve (default 10)> |
| 54 | + device: <optional name of a device to pre-select> |
| 55 | + playlist_type: <optional featured|discover-weekly> Change type of playlists shown. Default are your normal playlists. |
| 56 | + always_play_random_song: <optional true> Set to start playlists from a random song. |
| 57 | + country_code: <optional country code to show featured playlist relevent to a particular country. https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 > |
| 58 | + hide_warning: <optional true> Hide warnings if they are displayed. |
| 59 | + name: <optional name> Custom title. Leave empty to hide. |
| 60 | + display_style: <optional Grid> Change default display style. |
| 61 | + grid_covers_per_row: <optional number> Number of covers per row (default 3) in Grid-view. |
| 62 | + spotify_entity: <optional> Name of your spotify media player entity if it doesn't start with "spotify" |
| 63 | + default_device: <optional> Name of your spotify connect or chromecast device, e.g. "Kitchen" |
| 64 | +``` |
| 65 | + |
| 66 | +### Screenshots |
| 67 | + |
| 68 | +<img src="pics/list.png" height="300"> |
| 69 | +<img src="pics/conf.png" height="300"> |
| 70 | + |
| 71 | +### General usage |
| 72 | + |
| 73 | +This library can of course also be used on other websites or projects other than Home Assistant |
| 74 | + |
| 75 | +### CONTRIBUTING |
| 76 | + |
| 77 | +Please contribute and help. Before creating a large PR make sure to sync about it with me. |
| 78 | + |
| 79 | +### License |
| 80 | + |
| 81 | +This library is licensed under Apache 2.0, see [LICENSE](./LICENSE) |
0 commit comments