soyoh/SpotifyViewsDemo.html

## SpotifyViewsDemo.html

<!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>

	<!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>