How to create a “carousel”-like widget in spotify

2020-03-04 02:15发布

站内问答 / 移动开发
1393 1 3

Is it possible using the spotify apps API to create one of these widgets filled with my data of choice? enter image description here

标签： spotify
举报
1条回答
smile是对你的礼貌
2楼-- · 2020-03-04 02:42

Yes, by using import/scripts/pager. Here's an example, extracted and simplified from the "What's New" app. Your pager.js:

"use strict";

sp = getSpotifyApi(1);
var p = sp.require('sp://import/scripts/pager');
var dom = sp.require('sp://import/scripts/dom');

exports.init = init;

function init() {
  var pagerSection = dom.queryOne('#pager');
  var datasource = new DataSource([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);

  var options = {
    perPage: 5,
    hidePartials: true,
    orientation: 'vertical',      // 'vertical', 'horizontal'
    pagingLocation: 'top',        // 'top', 'bottom'
    bullets: false,
    listType: 'list',             // 'table', 'list'
    context: 'aToplist'           // some string unique for each pager
  };

  var pager = new p.Pager(datasource, options);
  pager.h2.innerHTML = "Example Pager";
  dom.adopt(pagerSection, pager.node);
}

function DataSource(data) {
  var data = data;

  this.count = function() {
    return data.length;
  };

  this.makeNode = function(index) {
    var dataItem = data[index];
    var li = new dom.Element('li');

    var nameColumn = new dom.Element('div', {
      className: 'nameColumn',
      html: '<div class="nameColumn">'+
              '<a href="#" class="name">Name' + dataItem + '</a>'+
              '<a href="#" class="creator">Creator' + dataItem +'</a>'+
            '</div>'
    });

    dom.adopt(li, nameColumn);
    return li;
  };
}

Your index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="pager.css">
</head>

<body onload="sp = getSpotifyApi(1); sp.require('pager').init();">
  <div id="wrapper">
    <section class="toplists" id="bottomToplists">
      <section id="pager" class="playlists playlistsTable toplist"></section>
    </section>
  </div>
</body>
</html>

And lastly, copy the whatsnew.css into your project and rename it to pager.css. You will of course need to clean up the css and modify the elements in your index.html to fit with your app but this is a good starting point.

The "What's New" app also has an example of a horizontal pager with album artwork. Take a look at this question and answer to figure out how to extract the source of the app.

Also note that I am not sure whether the pager.js will be part of the public API. If not then you can of course extract it into your own pager widget and use it anyway.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(3)