Skip to content

Instantly share code, notes, and snippets.

@liesen

liesen/SpotifyViewsDemo.html

Created December 1, 2011 16:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save liesen/1418053 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save liesen/1418053 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. liesen created this gist Dec 1, 2011.
    122 changes: 122 additions & 0 deletions SpotifyViewsDemo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,122 @@

    <!DOCTYPE html>
    <html>
    <head>
    <title>API</title>
    <link rel="stylesheet" href="sp://import/css/adam.css">
    <style>
    body {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    max-height: 100%;
    }

    a { color: #DDD; }
    a:hover { color: #FFF; }

    .sp-list { height: 400px; }
    .sp-list.custom {
    margin: 10px 0;
    height: 100px;
    }

    /**
    * Player styles
    */
    .sp-player {
    background: #474747 url("sp://import/img/placeholders/60-album.png") 50% 50% no-repeat;
    background-size: 120px 120px;
    display: inline-block;
    height: 128px;
    position: relative;
    z-index: 10;
    }
    .sp-player .sp-image {
    cursor: default;
    display: inline-block;
    position: relative;
    height: 128px;
    width: 128px;
    }
    .sp-player .sp-image::before {
    background-image: url("sp://import/img/play-big.png");
    background-clip: content-box;
    background-position-x: -180px;
    content: "";
    display: block;
    height: 59px;
    left: 50%;
    margin: -29px 0 0 -29px;
    position: absolute;
    top: 50%;
    width: 59px;
    }
    .sp-player .sp-image:hover::before { background-position-x: -240px; }
    .sp-player .sp-image:active::before { background-position-x: -300px; }
    .sp-player.paused .sp-image::before { background-position-x: 0; }
    .sp-player.paused .sp-image:hover::before { background-position-x: -60px; }
    .sp-player.paused .sp-image:active::before { background-position-x: -120px; }

    .sp-player .sp-image {
    height: 128px;
    width: 128px;
    }
    </style>
    </head>
    <body>
    <script>
    sp = getSpotifyApi(1);
    var m = sp.require("sp://import/scripts/api/models");
    var v = sp.require("sp://import/scripts/api/views");

    var customList = new v.List(m.Playlist.fromURI("spotify:user:webkittest:playlist:1Cavir4OAawcByJVNmXAfe"), function(track) {
    return new v.Track(track, v.Track.FIELD.STAR | v.Track.FIELD.SHARE | v.Track.FIELD.NAME);
    });
    customList.node.classList.add("custom");
    document.body.appendChild(customList.node);

    var pl = m.Playlist.fromURI("spotify:user:mattias:playlist:1PDwG4hvy5n2pBf93A8R3r", onLoad);

    var list = v.getTrackList(pl);
    document.body.appendChild(list.node);


    var album = m.Album.fromURI("spotify:album:2p4mNgu2szxiGpZv5JFYjJ", function(a) {
    var player = new v.Player();
    player.track = a.get(0);
    player.context = a;
    document.body.appendChild(player.node);
    });

    //customList.collection = pl;

    function onLoad(pl) {
    var player = new v.Player();
    // Play track 10 in pl from context pl
    // player.play(pl.get(10), pl);
    // this also works, if you don't want to start playing
    player.track = pl.get(0);
    player.context = pl;
    document.body.appendChild(player.node);
    }


    //m.library.starredPlaylist.observe(m.EVENT.CHANGE, starredListChanged)

    // Test temporary playlist
    /*
    var tpl = new m.Playlist();
    tpl.add(pl.get(0));
    tpl.add(pl.get(1));
    tpl.add(pl.get(2));
    var tplPlayer = new v.Player();
    tplPlayer.track = tpl.get(0);
    tplPlayer.context = tpl;
    var tempList = new v.List();
    tempList.collection = tpl;
    document.body.appendChild(tplPlayer.node);
    document.body.appendChild(tempList.node);
    */
    </script>
    </body>
    </html>