Skip to content
This repository has been archived by the owner on Feb 4, 2024. It is now read-only.

config option updates #5

Merged
merged 1 commit into from
Oct 12, 2019
Merged

config option updates #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 30 additions & 24 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,23 @@ Note: There is another Spotify Playlist card by user @fondberg [here](https://gi


## Features
- Works with [Spotcast component][spotcast].
- Works with [Spotcast component][spotcast] and Alexa media player component.
- Press/click on the image to start the playlist on the selected media player.
- Specify the number of columns and image size.
- Specify the number of columns.
- No white background!

## Installation

### HACS Install
Include this [repository][spotify-playlist-card] as a custom repository in the HACS settings.
Include this [repository][spotify-playlist-card] as a custom plugin in the HACS settings.

```
https://github.com/dnguyen800/spotify-playlist-card
```

If added correctly, the repository should be listed like below:
![hacs][hacs-image]


### Manual install

Expand All @@ -47,38 +47,44 @@ resources:

```yaml
- type: "custom:spotify-playlist-card"
entity: sensor.spotifyplaylist
sensor: sensor.spotify_playlist
playback_method: spotcast
speaker_entity: "media_player.google_home"
gradient_level: 0.7
grid_gap: '8px'
show_playlist_titles: true
shuffle: true
columns: 3
size: '15vmin'
media_player: spotcast
speaker_name: "Dan's Room display"
```


## Options

| Name | Type | Requirement | Description | Default
| ---- | ---- | ------- | ----------- | -------
| type | string | **Required** | `custom:spotify-playlist-card`
| entity | string | **Required** | Name of the Spotify Playlist sensor that holds your playlist info. | `sensor.spotifyplaylist`
| columns | int | **Optional** | Number of columns to display. | 3
| size | string | **Optional** | Size of playlist image. Follows CSS units such as `px`, `%`, `vw`, `vh`, `vmin`, `vmax`. | `15vmin`
| show_name | boolean | **Optional** | Displays playlist names. | `false`
| show_title | boolean | **Optional** | Displays the card title. | `false`
| title | string | **Optional** | Card title. | `Playlists`
| media_player | string | **Optional** | Media player used. Accepted choices are: `spotcast`, `echo`, `spotify`. | `spotify`
| speaker_name | string | **Optional** | The name of the speaker that will play the music. When using Spotcast, use the name listed exactly from `sensor.chromecast_devices`, like `Living Room Speaker`. If using Amazon Echo or Spotify as the media player, list the full entity name, such as "media_player.spotify" | `media_player.spotify`
| type | string | **Required** | `custom:spotify-playlist-card` | None
| sensor | string | **Required** | Name of the Spotify Playlist sensor that holds your playlist info. | None
| columns | int | **Optional** | Number of columns to display. | `3`
| gradient_level | string | **Optional** | Choose a value between 0 and 1 for the gradient level used when `show_playlist_titles` is enabled. | `0.8`
| grid_gap | string | **Optional** | Define the size of the gap between playlist images. | `8px`
| show_playlist_titles| boolean | **Optional** | Add a text title at the bottom of each playlist. | `false`
| shuffle | boolean | **Optional** | Set the Spotify `shuffle` setting. | `false`
| playback_method | string | **Optional** | Speaker playback method for Spotify. Acceptable choices are: `spotcast`, `alexa`, or `spotify` | `spotify`
| speaker_entity | string | **Optional** | The name of the speaker that will play the music. When using Spotcast, use the `entity_id` of the Chromecast device listed in Home Assistant. If using Amazon Echo or Spotify as the media player, list the full entity name, such as "media_player.spotify" | `media_player.spotify`


### Sample for ui-lovelace.yaml:

```yaml
- type: "custom:spotify-playlist-card"
entity: sensor.spotifyplaylist
media_player: spotcast
speaker_name: "Dan's Room display"
sensor: sensor.spotify_playlist
playback_method: spotcast
speaker_entity: "media_player.google_home"
gradient_level: 0.7
grid_gap: '8px'
show_playlist_titles: true
shuffle: true
columns: 3
size: '15vmin'
```
[hacs-image]: images/hacs.png
[js-file]: https://raw.githubusercontent.com/dnguyen800/spotify-playlist-card/master/dist/spotify-playlist-card.js
Expand All @@ -102,7 +108,7 @@ resources:
## FAQ
- I press on a playlist button but I don't hear the playlist playing.

If you are using `media_player: spotify`, and not `spotcast` or `echo`, you will not be able to play music on idle speakers. To remedy, start playing Spotify on any device, then try pressing the playlist button again.
If you are using `media_player: spotify`, and not `spotcast` or `echo`, you will not be able to play music on idle speakers. To remedy, start playing Spotify on any device, then try pressing the playlist image again.

## Support
I am studying Python as a hobby and this is my first public project. Unfortunately, I know nothing about Javascript and relied on studying other Lovelace custom cards to write this. Suggestions are welcome but no promises if I can fix anything! If you're familiar with CSS, then you can edit the CSS style in the .js file directly!
Expand Down
24 changes: 12 additions & 12 deletions dist/spotify-playlist-card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@


// Examples of using an HA entity's attributes:
// This example looks into HA entity (sensor.spotifyplaylist), the attribute called 'Unorganized', and sub attribute 'name'
// This example looks into HA entity (sensor.spotify_playlist), the attribute called 'Unorganized', and sub attribute 'name'
// const entityId = this.config.entity;
// const playlist = hass.states[entityId].attributes;
// ${playlist['Unorganized']['name']}
Expand Down Expand Up @@ -33,7 +33,7 @@ class SpotifyPlaylistCard extends HTMLElement {
const showPlaylistTitles = config.show_playlist_titles ? 1 : 0;


if (!config.entity) {
if (!config.sensor) {
throw new Error('Please define the name of the Spotify Playlist sensor.');
}

Expand Down Expand Up @@ -113,7 +113,7 @@ class SpotifyPlaylistCard extends HTMLElement {
this.myhass = hass;

try {
playlist = hass.states[config.entity].attributes;
playlist = hass.states[config.sensor].attributes;
// Beginning of CSS grid
card_content += `
<div class="outercontainer">
Expand Down Expand Up @@ -143,31 +143,31 @@ class SpotifyPlaylistCard extends HTMLElement {
// Add a click event to any CSS objects that has an ID: playlist01, playlist02, etc.
try {
// need to redefine 'playlist' as it was walked through in entirety in prev for loop.
playlist = hass.states[config.entity].attributes;
const mediaPlayer = config.media_player ? config.media_player : "default";
const speakerName = config.speaker_name ? config.speaker_name : "media_player.spotify";
playlist = hass.states[config.sensor].attributes;
const playbackMethod = config.playback_method ? config.playback_method : "default";
const speakerEntity = config.speaker_entity ? config.speaker_entity : "media_player.spotify";
const shuffleBoolean = config.shuffle ? config.shuffle : true;
const shuffleParameters = { "entity_id": speakerName, "shuffle": shuffleBoolean };
const shuffleParameters = { "entity_id": speakerEntity, "shuffle": shuffleBoolean };
let playlistParameters = {};

// Learn about:
// hass.callService: https://developers.home-assistant.io/docs/en/frontend_data.html#hassuser
for (let entry in playlist) {
if (entry !== "friendly_name" && entry !== "icon" && entry !== "homebridge_hidden") {
card.querySelector(`#playlist${playlist[entry]['id']}`).addEventListener('click', event => {
if (mediaPlayer == "alexa") {
if (playbackMethod == "alexa") {
this.myhass.callService('media_player', 'shuffle_set', shuffleParameters);
playlistParameters = {"entity_id": speakerName, "media_content_type": "SPOTIFY", "media_content_id": `${playlist[entry]['name']}`};
playlistParameters = {"entity_id": speakerEntity, "media_content_type": "SPOTIFY", "media_content_id": `${playlist[entry]['name']}`};
this.myhass.callService('media_player', 'play_media', playlistParameters);
}
else if (mediaPlayer == "spotcast") {
else if (playbackMethod == "spotcast") {
this.myhass.callService('media_player', 'shuffle_set', shuffleParameters);
playlistParameters = {"entity_id": speakerName, "uri": `${playlist[entry]['uri']}`, "random_song": shuffleBoolean };
playlistParameters = {"entity_id": speakerEntity, "uri": `${playlist[entry]['uri']}`, "random_song": shuffleBoolean };
this.myhass.callService('spotcast', 'start', playlistParameters);
}
else {
this.myhass.callService('media_player', 'shuffle_set', shuffleParameters);
playlistParameters = {"entity_id": speakerName, "media_content_type": "playlist", "media_content_id": `${playlist[entry]['uri']}`};
playlistParameters = {"entity_id": speakerEntity, "media_content_type": "playlist", "media_content_id": `${playlist[entry]['uri']}`};
this.myhass.callService('media_player', 'play_media', playlistParameters);
}
});
Expand Down