Как использовать «стандартные списки треков» в приложениях Spotify - PullRequest
Новая
       21

Как использовать «стандартные списки треков» в приложениях Spotify

4 голосов
/ 22 декабря 2011

В руководствах по пользовательскому интерфейсу Spotify для приложений Spotify (по адресу https://developer.spotify.com/technologies/apps/guidelines/design/) сказано «При составлении списка дорожек в вашем приложении используйте наши стандартизированные списки дорожек». В документации по использованию этих «стандартизованных дорожек» я не могу найти никаких примеров.списки ". Используя Инспектор, я нашел классы в list.css (такие как sp-list и sp-item), которые, как мне кажется, мне нужно использовать, но я не смог понять, как их использовать для воссозданияПосмотрите списки треков Spotify.В приложении Billboard Top Charts, похоже, используются списки треков так, как мне нужно, но я не могу найти способ посмотреть, как они это делают, так как Инспектор работает только для ваших собственных приложений, насколько я могуРасскажите.

У кого-нибудь есть советы или примеры?

Ответы [ 2 ]

10 голосов
/ 23 декабря 2011

Некоторые примеры 

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);
0 голосов
/ 23 декабря 2011

Спасибо за вопрос, у меня тоже был точно такой же вопрос!

У меня тоже возникает проблема, когда я не добавляю никакого реального контента - только обертку div.Не включая api.css, он работает, но список явно не стилизован.Включение css / list.css тоже напрямую его ломает.Создавая собственную копию и выборочно комментируя list.css, я обнаружил, что нарушающим правилом является: 

.sp-list > div {

, если вы измените его на 

.sp-list {

, тогда оно будет отображаться нормально.Понятия не имею, что происходит.Очевидно, что это решение не является идеей, потому что я просто продублировал то, что должно быть общим ресурсом ...

...