Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

QR Code Addition, Cover Art in Lists, Playlist Seeding #1

Open
wants to merge 4 commits into from

2 participants

Andrew Burgess Michael Klein
Andrew Burgess

Things that I added:

  • QR Code with Spartify URL, so that people with phones can scan the code and automatically open the site
  • Cover art appearing in search/queue lists
  • Playlist seeding
  • Drop a playlist into the drop zone to have all of the tracks added to the queue
  • The order the tracks are added is randomized to add a bit of spice
Andrew Burgess andrewburgess Added QR code from Google Charts for easier phone access 90b0263
Andrew Burgess andrewburgess Working on adding cover art to search/queue items 265d63d
Andrew Burgess andrewburgess Implemented drop area for seed playlists.
Instead of purely relying on EchoNest, the user can drop a playlist onto the
drop zone and have all of the tracks voted for, and added to the queue.

The playlist contents are randomized to spice things up as well
06a15e7
Andrew Burgess andrewburgess Cleaned up some debug stuff 9b75327
Michael Klein

nice, would like to see the new features online

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 4 unique commits by 1 author.

Jan 08, 2012
Andrew Burgess andrewburgess Added QR code from Google Charts for easier phone access 90b0263
Jan 09, 2012
Andrew Burgess andrewburgess Working on adding cover art to search/queue items 265d63d
Jan 19, 2012
Andrew Burgess andrewburgess Implemented drop area for seed playlists.
Instead of purely relying on EchoNest, the user can drop a playlist onto the
drop zone and have all of the tracks voted for, and added to the queue.

The playlist contents are randomized to spice things up as well
06a15e7
Andrew Burgess andrewburgess Cleaned up some debug stuff 9b75327
This page is out of date. Refresh to see the latest.
6 Spotify/Spartify/index.html
@@ -2,6 +2,8 @@
2 2 <html>
3 3 <head>
4 4 <meta charset="utf-8">
  5 + <link rel="stylesheet" href="sp://import/css/api.css" />
  6 + <link rel="stylesheet" href="sp://import/css/adam.css" />
5 7 <link href="spartify.css" rel="stylesheet">
6 8 <title>Spartify</title>
7 9 </head>
@@ -12,7 +14,9 @@
12 14 </section>
13 15 <section class="view-party">
14 16 <p class="message">Great! Now tell your friends to go to spartify.com on their mobile phones and enter the following party code to start voting: <code id="party-code">XXXXX</code>
15   - <p><input id="search" placeholder="Search for songs">
  17 + <p><img id="qr-code" /></p>
  18 + <div class="drop-zone">Drop Playlist Here to Populate</div>
  19 + <p><input id="search" placeholder="Search for songs"></p>
16 20 <ul class="track-list" id="search-results"></ul>
17 21 <h2>Queue</h2>
18 22 <ul class="track-list" id="queue"></ul>
3  Spotify/Spartify/manifest.json
@@ -10,7 +10,8 @@
10 10 "en"
11 11 ],
12 12 "RequiredPermissions": [
13   - "http://www.spartify.com"
  13 + "http://www.spartify.com",
  14 + "https://chart.googleapis.com"
14 15 ],
15 16 "ApiPermissions": {
16 17 "core": ["private"]
25 Spotify/Spartify/spartify.css
@@ -227,3 +227,28 @@ section {
227 227 #search-results {
228 228 margin: 3px 0 20px;
229 229 }
  230 +
  231 +.cover {
  232 + float:left;
  233 + height: 48px;
  234 + width: 48px;
  235 + margin-right: 5px;
  236 + margin-top: -4px;
  237 +}
  238 +
  239 +.cover .image {
  240 + height: 48px;
  241 + width: 48px;
  242 + float: left;
  243 +}
  244 +
  245 +.drop-zone {
  246 + height: 50px;
  247 + border: 5px dashed #86A3A3;
  248 + border-radius: 10px;
  249 + margin: 10px 0;
  250 + font-size: 20px;
  251 + color: #ccc;
  252 + font-weight: bold;
  253 + padding-top: 30px;
  254 +}
73 Spotify/Spartify/spartify.js
@@ -3,6 +3,8 @@
3 3 sp = getSpotifyApi(1);
4 4
5 5 var m = sp.require('sp://import/scripts/api/models');
  6 +var ui = sp.require("sp://import/scripts/ui");
  7 +var dnd = sp.require('sp://import/scripts/dnd');
6 8
7 9 exports.init = init;
8 10
@@ -84,6 +86,7 @@ var el = {
84 86 createParty: $('#create-party'),
85 87 leaveParty: $('#leave-party'),
86 88 partyCode: $('#party-code'),
  89 + qrCode: $('#qr-code'),
87 90 queue: $('#queue'),
88 91 queueHeader: $('.view-party h2'),
89 92 search: $('#search'),
@@ -109,12 +112,18 @@ function fillTrackList(element, tracks) {
109 112 if (!li.length) {
110 113 li = $('<li>')
111 114 .data('track', track)
112   - .attr('data-uri', track.uri)
  115 + .attr('data-uri', track)
113 116 .append(
  117 + $('<div class="cover">'),
114 118 $('<span class="title">').text(track.title),
115 119 $('<span class="artist">').text(track.artist),
116 120 $('<span class="vote">+1</span>'))
117 121 .appendTo(element);
  122 +
  123 + m.Track.fromURI(track.uri, function(t) {
  124 + var cover = new ui.SPImage(t.data.album.cover);
  125 + li.find(".cover").append(cover.node);
  126 + });
118 127 } else {
119 128 traversed.push(li[0]);
120 129 }
@@ -192,6 +201,7 @@ function enterParty(code) {
192 201 el.queueHeader.hide();
193 202 localStorage.partyCode = code;
194 203 el.partyCode.text(localStorage.partyCode);
  204 + el.qrCode.attr('src', 'https://chart.googleapis.com/chart?chs=100x100&cht=qr&chl=http://spartify.com/' + localStorage.partyCode);
195 205 el.body.attr('id', 'view-party');
196 206
197 207 playlist = null;
@@ -238,7 +248,8 @@ function init() {
238 248 var track = tracks[i];
239 249 list.push({
240 250 album: track.album.name,
241   - artist: track.artists[0].name,
  251 + artist: getArtistNameList(track.artists),
  252 + cover: track.album.cover,
242 253 length: track.duration,
243 254 title: track.name,
244 255 uri: track.uri
@@ -249,7 +260,7 @@ function init() {
249 260
250 261 function search() {
251 262 counter++;
252   - sp.core.suggestSearch(query, {
  263 + sp.core.search("*" + query + "*", true, false, {
253 264 onSuccess: (function (i) {
254 265 return function (data) {
255 266 if (counter > i) {
@@ -316,4 +327,60 @@ function init() {
316 327
317 328 currentTrack = m.player.track;
318 329 });
  330 +
  331 +
  332 + var drop = document.querySelector(".drop-zone");
  333 + drop.addEventListener("dragenter", function(e) {
  334 + this.style.background = "#444444";
  335 + }, false);
  336 +
  337 + drop.addEventListener("dragover", function(e) {
  338 + e.preventDefault();
  339 + e.dataTransfer.dropEffect = "copy";
  340 + return false;
  341 + }, false);
  342 +
  343 + drop.addEventListener("dragleave", function(e) {
  344 + this.style.background = "inherit";
  345 + }, false);
  346 +
  347 + drop.addEventListener("drop", function(e) {
  348 + this.style.background = "inherit";
  349 + var link = m.Link.fromURL(e.dataTransfer.getData("Text"));
  350 + m.Playlist.fromURI(link.uri, function(p) {
  351 + var ints = new Array();
  352 + for (var i = 0; i < p.data.length; i++)
  353 + ints.push(i);
  354 + var i, j, k;
  355 + var temp;
  356 + for (i = 0; i < 20; i++) {
  357 + for (j = 0; j < p.data.length; j++) {
  358 + k = Math.floor(Math.random() * p.data.length);
  359 + temp = ints[j];
  360 + ints[j] = ints[k];
  361 + ints[k] = temp;
  362 + }
  363 + }
  364 +
  365 + $.each(ints, function(index, value) {
  366 + if (m.Link.getType(p.data.get(value)) != m.Link.TYPE.LOCAL_TRACK) {
  367 + var t = p.data.get(value);
  368 + setTimeout(function() {
  369 + m.Track.fromURI(t, function(track) {
  370 + vote(track);
  371 + });
  372 + }, index * 1000);
  373 + }
  374 + });
  375 + });
  376 + }, false);
319 377 }
  378 +
  379 +function getArtistNameList(artists) {
  380 + var a = artists[0].name.decodeForHTML();
  381 + for (var j = 1; j < artists.length; j++) {
  382 + a += ", " + artists[j].name.decodeForText();
  383 + }
  384 +
  385 + return a;
  386 +}

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.