{"id":13613831,"url":"https://github.com/custom-cards/spotify-card","last_synced_at":"2025-04-05T08:08:38.338Z","repository":{"id":34254038,"uuid":"173955605","full_name":"custom-cards/spotify-card","owner":"custom-cards","description":"Spotify playlist card for Home Assistant card","archived":false,"fork":false,"pushed_at":"2023-05-29T10:51:50.000Z","size":3377,"stargazers_count":391,"open_issues_count":62,"forks_count":63,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-03-29T07:07:52.798Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/custom-cards.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":["fondberg"]}},"created_at":"2019-03-05T13:51:35.000Z","updated_at":"2025-03-03T04:39:34.000Z","dependencies_parsed_at":"2024-01-05T21:05:42.637Z","dependency_job_id":null,"html_url":"https://github.com/custom-cards/spotify-card","commit_stats":null,"previous_names":[],"tags_count":78,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/custom-cards%2Fspotify-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/custom-cards%2Fspotify-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/custom-cards%2Fspotify-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/custom-cards%2Fspotify-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/custom-cards","download_url":"https://codeload.github.com/custom-cards/spotify-card/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305935,"owners_count":20917208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T20:00:53.988Z","updated_at":"2025-04-05T08:08:38.302Z","avatar_url":"https://github.com/custom-cards.png","language":"TypeScript","funding_links":["https://github.com/sponsors/fondberg"],"categories":["Lovelace User Interface","Install from Source","Dashboards","TypeScript"],"sub_categories":["Custom Lovelace UI Cards","Smart Home Automation","Custom Cards"],"readme":"[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/custom-components/hacs) [![spotify-card](https://img.shields.io/github/release/custom-cards/spotify-card.svg)](https://github.com/custom-cards/spotify-card)\r\n\r\n![Build](https://github.com/custom-cards/spotify-card/workflows/Build/badge.svg)\r\n\r\n## Home Assistant Spotify Lovelace Card\r\n\r\n**DISCLAIMER**: _This project is a private open source project and doesn't have any connection with Spotify._\r\n\r\nThis 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.\r\n\r\nThe 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.\r\n\r\nThe forum thread can be found [here](https://community.home-assistant.io/t/spotify-lovelace-card/103525)\r\n\r\n\u003cimg src=\"pics/grid.png\" width=\"300\"\u003e\r\n\r\n## See release information on Github for release notes\r\n\r\n### Requirements\r\n\r\n[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).\r\nThis card should work in all newer major browsers. If it does not work for you please provide detailed reports in an issue ticket.\r\n\r\n### Installation\r\n\r\n#### HACS users\r\n\r\nFollow the HACS instructions when installing it.\r\n\r\n#### Manually\r\n\r\nCopy 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.\r\n\r\nThen you have to add spotify card to your resources. This can be done via `Settings -\u003e Lovelace Dashboards -\u003e Resources`. Add this path:\r\n\r\n```\r\n  /local/community/spotify-card/spotify-card.js\r\n```\r\n\r\nIf 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.\r\n\r\n### Usage\r\n\r\nAdd the card via lovelace to your dashboard. All of the settings can be configured via the visual editor.\r\n\r\n#### Advanced usage\r\n\r\n##### Device filtering\r\n\r\nIf you want to hide specific devices, you can do so in the advanced tab of the visual editor. If you are not using the visual editor see [YAML mode](YAML-mode).\r\nYou can enter as many regular expressions as you like, separated by a comma. If any of these rules apply to a device-name it will be hidden. The rules are evaluated against the whole device-name so `room` will not match `bedroom`. Here are a few examples:\r\n\r\n- `.*room` hides all devices ending with room\r\n- `bath.*,kids.*` hides all devices which start with bath or kids\r\n\r\n##### Playlist filtering\r\n\r\nYou can filter the playlists you want on a specific card instance. Just enter as many regular expressions as you like, separated by a comma.\r\nPlaylists are first requested through spotcast websocket API, and *then* filtered. It means that if you fetch 10 playlists, only those 10 will be filtered.\r\n\r\nThe filters are inclusive, so it means that, as soon as you set at least one filter, a playlist will be included *only* if it matches at least one filter.\r\n\r\nFilters can apply on any top-level attributes (ie any attributes defined in [interface](https://github.com/custom-cards/spotify-card/blob/master/src/types.ts#L129)).\r\n\r\nYou can specify filters in 2 ways:\r\n\r\n- with only pattern, ex `.*rock.*`, then it will filter only on `name` attribute\r\n- with field + pattern, ex `description:.*rock.*`, then it will filter on given field.\r\n\r\n##### Known Spotify Connect devices\r\n\r\nYou can specify a pre-known Spotify Connect devices that are not showing up in the devices list although they are available in the network.\r\nThis is useful for smart WiFi speakers that are not connected specifically to your Spotify account and are available visible only inside the home WiFi network, such as Sonos speakers. \r\n\r\nTo add a device, start a playback on it and then click the add button in the card editor. You can also manually configure devices, if know the device id (see [spotcast guide for finding the device id](https://github.com/fondberg/spotcast#find-spotify-device-id)).\r\n\r\n#### YAML mode\r\n\r\nIf you are not using the visual configuration of Lovelace you can add the card like this:\r\n\r\n```yaml\r\n  cards:\r\n    - type: 'custom:spotify-card'\r\n      account: \u003coptional\u003e which account to use for spotcast. Defaults to \"default\"\r\n      height: \u003coptional pixels height for the playlist element. If content is larger scrolling will be enabled\u003e\r\n      limit: \u003coptional number of playlists to retrieve (default 10)\u003e\r\n      device: \u003coptional name of a device to pre-select\u003e\r\n      playlist_type: \u003coptional featured|discover-weekly\u003e Change type of playlists shown. Default are your normal playlists.\r\n      always_play_random_song: \u003coptional true\u003e Set to start playlists from a random song.\r\n      country_code: \u003coptional country code to show featured playlist relevent to a particular country. https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 \u003e\r\n      hide_warning: \u003coptional true\u003e Hide warnings if they are displayed.\r\n      name: \u003coptional name\u003e Custom title. Leave empty to hide.\r\n      display_style: \u003coptional Grid\u003e Change default display style.\r\n      grid_covers_per_row: \u003coptional number\u003e Number of covers per row (default 3) in Grid-view.\r\n      spotify_entity: \u003coptional\u003e Name of your spotify media player entity if it doesn't start with \"spotify\"\r\n      default_device: \u003coptional\u003e Name of your spotify connect or chromecast device, e.g. \"Kitchen\"\r\n      filter_devices: \u003coptional Array\u003e Hides devices which matches any array entry. The entries have to be regular expressions and are matched against the full device-name. The following are examples\r\n        - .*room \u003chides all devices ending with room\u003e\r\n        - bath.*,kids.* \u003chides all devices which start with bath or kids\u003e\r\n      known_connect_devices: \u003coptional\u003e List of known Spotify Connect devices, see [Known Spotify Connect devices](Known-Spotify-Connect-devices) section\r\n        - id: The Spotify Connect device id\r\n          name: The name of the device\r\n          entity_id: \u003coptional\u003e The Home Assistant media player entity id of this device (e.g. from Sonos integration)\r\n```\r\n\r\n### Screenshots\r\n\r\n\u003cimg src=\"pics/list.png\" height=\"300\"\u003e\r\n\u003cimg src=\"pics/conf.png\" height=\"300\"\u003e\r\n\r\n### General usage\r\n\r\nThis library can of course also be used on other websites or projects other than Home Assistant\r\n\r\n### CONTRIBUTING\r\n\r\nPlease contribute and help. Before creating a large PR make sure to sync about it with me.\r\n\r\n### License\r\n\r\nThis library is licensed under Apache 2.0, see [LICENSE](./LICENSE)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcustom-cards%2Fspotify-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcustom-cards%2Fspotify-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcustom-cards%2Fspotify-card/lists"}