All geek questions in one place

How to Use "Standardized Track Lists" in Spotify Applications

Spotify UI recommendations for Spotify apps ( https://developer.spotify.com/technologies/apps/guidelines/design/ ) say: "When you specify tracks in your application, use our standardized track lists", I can not find examples in documentation on how to use these "standardized track lists." Using the Inspector, I found classes in list.css (for example, sp-list and sp-item) that I think I need to use, but could not fully work out to recreate the look of the Spotify track list. The Billboard Top Charts app seems to use track lists as I need, but I can’t find a way to find out how they do it, since the inspector works only for your own applications, as far as I can tell.

Does anyone have any tips or examples?

+4
source share
2 answers

Some examples

sp = getSpotifyApi(1); var m = sp.require("sp://import/scripts/api/models"); var v = sp.require("sp://import/scripts/api/views"); // Example 1 var tpl = new m.Playlist(); var tempList = new v.List(tpl); tpl.add(m.Track.fromURI("spotify:track:4z4t4zEn4ElVPGmDWCzRQf")); tpl.add(m.Track.fromURI("http://open.spotify.com/track/7E8JGVhbwWgAQ1DtfatQEl")); tpl.add(m.Track.fromURI("spotify:track:40YBc3mR3yyqyYvtesQOMj")); tpl.add(m.Track.fromURI("spotify:local:Rolling+Stones:A+Bigger+Bang:Rain+Fall+Down:293")); document.body.appendChild(tempList.node); // Example 2 var pl = m.Playlist.fromURI("spotify:user:username:playlist:424km2k4m24"); var list = new v.List(pl); document.body.appendChild(list.node); // Example 3 var album = m.Album.fromURI("spotify:album:1vWnB0hYmluskQuzxwo25a"); var albumList = new v.List(album); albumList.node.classList.add("album"); document.body.appendChild(albumList.node);
+10
source

Thanks for asking, I had exactly the same question!

I also have a problem when I don't get any actual content - just a wrapper div. Apart from api.css, it works, but the list is clearly not compiled. Including css / list.css also just breaks it. Creating my own copy and selectively commenting on list.css, I found an insult rule:

 .sp-list > div {

if you change it to

 .sp-list {

then he does a fine. I don’t know what is going on. Obviously, this solution is not an idea, because I just duplicated what it meant to be a shared resource ...

0
source

Source: https://habr.com/ru/post/1387626/

More articles:


All Articles