https://github.com/jmperez/spotify-coverart

Polymer Web component to render Spotify cover arts
https://github.com/jmperez/spotify-coverart

Last synced: 29 days ago
JSON representation

Polymer Web component to render Spotify cover arts

• Host: GitHub
• URL: https://github.com/jmperez/spotify-coverart
• Owner: JMPerez
• License: mit
• Created: 2014-06-28T11:36:21.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-12-13T15:04:00.000Z (almost 10 years ago)
• Last Synced: 2024-10-10T11:03:57.664Z (about 1 month ago)
• Language: CSS
• Homepage: http://jmperezperez.com/spotify-coverart/spotify-coverart/demo.html
• Size: 1.06 MB
• Stars: 0
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Cover art polymer element

This is an example of a [Polymer Web Component](http://www.polymer-project.org) that implements a square image placeholder with a list of images sources, so it loads the most suitable one depending on size and pixel density.

- [Demo](http://jmperezperez.com/spotify-coverart/spotify-coverart/demo.html)

- [Documentation](http://jmperezperez.com/spotify-coverart/spotify-coverart/)

## Usage

You just need to include the polymer platform and this element in the head of

your html page.

Then, you can start using the `spotify-coverart` element as any other HTML element

in your page. Set the `images` property to an array of objects containing `width`,

`height` and `url` of the image, sorted by descending size:

```html

  

  

  

```

Each coverart will run a timer periodically to monitor changes in the size of the component. In order to avoid this, use the attribute `detectSizeChange="false"`.

## Running the example

To launch the example, install the `spotify-coverart` bower component:

```sh

$ bower install spotify-coverart

```

Then launch a web server:

```sh

$ ruby -run -e httpd . -p 5000 # "python -m SimpleHTTPServer 5000" will also do the trick

```

Then, you only need to navigate to `http://localhost:5000/spotify-coverart/demo.html` from any modern browser. Note that you need to run the server from the parent folder, not from the `spotify-coverart` folder.

## TODO

- Prevent loading a smaller image if a larger one is already in place.

- Replace a smaller version with a larger one in a smoother way, waiting for the one to be loaded.