Skip to content

Commit

Permalink
v2.0.0 Major rewrite (#88)
Browse files Browse the repository at this point in the history
* Add work from FL550 plus device fetching

* Remove cricle ci

* Move to newer build

* add more files

* Playback works

* Fully working version

* Added account and more types

* Add shuffle and play pause

* Small fixes!

* Fix play pause icon for grid

* First beta release

* Add cast debug

* Add filter of cast devices

* Fixes for beta

* Add catch to see what causes the issue for the user

* More debug

* bump version

* catch entitly list filtering

* catch entitly list filtering

* stop using entity list for casts

* account for error in fetching casts

* catch player ws as well

* print errors

* stop updating state when not shown

* 2.0.0

* 2.0.0-beta.16

* Add account to readme

* Grid auto width with one setting

* beta16

* Fix spotify entity not having spotify in the name

* Move spotcast test to render

* add default device name

* beta 19

* debug build

* Add setTimeout for subscribe

* Check if connection is null

* Get hass object on update

* v2.0.0
  • Loading branch information
fondberg authored Jul 24, 2020

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 2629d33 commit a01f2ed
Showing 33 changed files with 6,177 additions and 3,089 deletions.
37 changes: 0 additions & 37 deletions .circleci/config.yml

This file was deleted.

22 changes: 22 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module"
},
"plugins": ["@typescript-eslint"],
"rules": {
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-unused-vars": [
"warn",
{
"argsIgnorePattern": "^_"
}
]
}
}
5 changes: 2 additions & 3 deletions .github/workflows/build.yml
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@

name: "Build"

on:
push:
branches:
branches:
- master
pull_request:
branches:
branches:
- master

jobs:
7 changes: 7 additions & 0 deletions .prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
printWidth: 120,
tabWidth: 2,
};
387 changes: 186 additions & 201 deletions LICENSE
100644 → 100755

Large diffs are not rendered by default.

157 changes: 81 additions & 76 deletions README.md
100644 → 100755
Original file line number Diff line number Diff line change
@@ -1,76 +1,81 @@
[![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) ![Maintenance](https://img.shields.io/maintenance/yes/2020.svg)

[![Buy me a coffee](https://img.shields.io/static/v1.svg?label=Buy%20me%20a%20coffee&message=🥨&color=black&logo=buy%20me%20a%20coffee&logoColor=white&labelColor=6f4e37)](https://www.buymeacoffee.com/fondberg)

## Home Assistant Spotify Lovelace Card
**DISCLAIMER**: *This project is a private open source project and doesn't have any connection with Spotify.*

Web component card which can be used as a Lovelace [Home Assistants](https://www.home-assistant.io/lovelace/]) card.

Forum thread: https://community.home-assistant.io/t/spotify-lovelace-card/103525

This card supports listing the users currently available devices and the users top 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 Web API and tries to reflect the current status wrt to device and playlist if something is playing.

The component uses the [Spotify Web API](https://developer.spotify.com/documentation/web-api/).

![Screenshot](/spotify-card-highlight.png)

## See release information in github for release notes

### Requirements
This should now work in all newer major browsers. If it does not work for you please provide detailed reports in an issue ticket.

### Installation
Create a new app at [Spotify developer console](https://developer.spotify.com/my-applications/#!/applications)
or use the one created for the HA Spotify component (see below).
Make sure you edit the settings and adds the redirect URL for the tab the card has.

Example: `https://<your public home assistant hostname>:8123/lovelace/media`.

For more information about how to create an app see [Home Assistant Spotify Component documentation](https://www.home-assistant.io/components/media_player.spotify/).

Add the resource in lovelace config:

##### HACS users:
Follow the HACS instructions when installing it.


##### Latest release using cdn:
```
- type: module
url: >-
https://cdn.jsdelivr.net/gh/custom-cards/[email protected]/dist/spotify-card.umd.js
```

##### Add the card to lovelace config
Now add the card like this:
```
cards:
- type: 'custom:spotify-card'
client_id: <YOUR CLIENT ID>
limit: <optional number of playlists to retrieve (default 10)>
device: <optional name of a device to pre-select>
player: <optional use this player only, value should be the same name as the displayname of the player>
featuredPlaylists: <optional show featured playlists instead of users playlists>
featuredPlaylistsCountryCode: <optional country code to show featured playlist relevent to a particular country. https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 >
dailyMixes: <optional show daily mixes, requires spotcast>
height: <optional pixels height for the playlist element. If content is larger scrolling will be enabled>
random_song: <optional boolean to start playlists from a random song>
```

If you add the `device` setting, the card will select it by default and will not display the dropdown menu.

### General usage
This library can of course also be used on other websites or projects other than Home Assistant

### CONTRIBUTING
Please contribute and help.Before creating a large PR make sure to sync about it with me.

### Donate
If you like this and want to buy me a coffee

<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>
### License
This library is licensed under Apache 2.0, see [LICENSE](./LICENSE)
[![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)

![Build](https://github.com/custom-cards/spotify-card/workflows/Build/badge.svg)

## Home Assistant Spotify Lovelace Card

**DISCLAIMER**: _This project is a private open source project and doesn't have any connection with Spotify._

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.

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.

The forum thread can be found [here](https://community.home-assistant.io/t/spotify-lovelace-card/103525)

<img src="pics/grid.png" width="300">

## See release information on Github for release notes

### Requirements

[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).
This card should work in all newer major browsers. If it does not work for you please provide detailed reports in an issue ticket.

### Installation

#### HACS users

Follow the HACS instructions when installing it.

#### Manually

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.

Then you have to add spotify card to your resources. This can be done via `Settings -> Lovelace Dashboards -> Resources`. Add this path:

```
/local/community/spotify-card/spotify-card.js
```

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.

### Usage

Add the card via lovelace to your dashboard. All of the settings can be configured via the visual editor.

If you are not using the visual configuration of Lovelace you can add the card like this:

```
cards:
- type: 'custom:spotify-card'
account: <optional> which account to use for spotcast. Defaults to "default"
height: <optional pixels height for the playlist element. If content is larger scrolling will be enabled>
limit: <optional number of playlists to retrieve (default 10)>
device: <optional name of a device to pre-select>
playlist_type: <optional featured|discover-weekly> Change type of playlists shown. Default are your normal playlists.
always_play_random_song: <optional true> Set to start playlists from a random song.
country_code: <optional country code to show featured playlist relevent to a particular country. https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 >
hide_warning: <optional true> Hide warnings if they are displayed.
name: <optional name> Custom title. Leave empty to hide.
display_style: <optional Grid> Change default display style.
grid_covers_per_row: <optional number> Number of covers per row (default 3) in Grid-view.
spotify_entity: <optional> Name of your spotify media player entity if it doesn't start with "spotify"
default_device: <optional> Name of your spotify connect or chromecast device, e.g. "Kitchen"
```

### Screenshots

<img src="pics/list.png" height="300">
<img src="pics/conf.png" height="300">

### General usage

This library can of course also be used on other websites or projects other than Home Assistant

### CONTRIBUTING

Please contribute and help. Before creating a large PR make sure to sync about it with me.

### License

This library is licensed under Apache 2.0, see [LICENSE](./LICENSE)
4 changes: 3 additions & 1 deletion TODO.md
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
###
- Add visualization for tring to start new playback
- Localisation
- check why shuffle doesn't work (uses media_player.spotify)
Loading

0 comments on commit a01f2ed

Please sign in to comment.