Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

252 lines (205 sloc) 7.331 kb
<!DOCTYPE html>
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.1.4.2.min.js"></script>
<script src="global.js" type="text/javascript"></script>
<script type="text/javascript">
// Get music info from Spotify API
safari.application.addEventListener("command", perform, false);
var uri;
function perform(event){
if(event.command === "spotify-lookup"){
// If the user is in the search view; scroll back up to the lookup view again.
type = "track";
url = ""+type;
// Get the Spotify URI from global.js.
uri = encodeURI(getURI(url, type));
var lookupURL = "";
url: lookupURL,
data: "uri="+uri,
processData: false,
success: success
// Set the href to the freetext search button
$("#freetext-search-button").attr("href", "spotify:search:track%3a%22"+ event.userInfo +"%22");
function success(data){
var track = {
name: $(data).find("name").first().text(),
album: $(data).find("album name").text(),
albumURI: $(data).find("album").attr("href"),
artist: $(data).find("artist name").text(),
artistURI: $(data).find("artist").attr("href"),
trackLength: secondsToTime(parseInt($(data).find("length").text()))
.text('"''" ('+ track.trackLength.m +':'+track.trackLength.s+')')
.attr("href", uri)
.attr("title", 'open "''" in Spotify');
.before('<span class="sep">●</span>')
.attr("href", track.artistURI)
.attr("title", "open "+track.artist +" in Spotify");
.before('<span class="sep">●</span>')
.text('from the album "'+track.album+'"')
.attr("href", track.albumURI)
.attr("title", 'open "'+ track.album+'" in Spotify');
$("#open-button").attr("href", uri);
$("body *").hide();
// Bar UI functions
var visibility;
visibility = $("#open-button, #freetext-search-button").css("display");
setTimeout('$("#search-form input").focus()', 200);
$("#open-button, #freetext-search-button").css("display", visibility);
//var type = $("").text().toLowerCase();
var type = "track";
var searchTerm = encodeURI($("input[type='search']").val());
url = ""+type;
url: url,
data: "q="+searchTerm,
success: searchSuccess
var pages;
var width = 0;
var currentPage = 1;
function searchSuccess(data){
var name = $(this).find("name").first().text();
var uri = $(this).attr("href");
var artist = $(this).find("artist name").text();
var album = $(this).find("album name").text();
var albumDate = $(this).find("album released").text().substring(0, 4);
$("#results").append('<a href="'+uri+'" title="'+ artist + ' ('+ albumDate +')">'+name+'</a> |');
// Get number of pages
pages = Math.ceil(parseInt($("#results").css("width"))/780);
// Make the next button clickable now when we've got some content
$("nav span[rel=next]").removeClass("disabled");
// Scroll to the first page
$("#results").css("-webkit-transform", "translate(0,0)");
$("nav span[rel=prev]").click(function(){
if(currentPage > 1){
slide(width -= 780);
if(currentPage == 1) $(this).addClass("disabled");
$("nav span[rel=next]").click(function(){
if(currentPage < pages){
slide(width += 780);
if(currentPage == pages) $(this).addClass("disabled");
function slide(width){
$("nav span").removeClass("disabled");
$("#results").css("-webkit-transform", "translate(-"+width+"px, 0)");
$("nav span#left:not(.disabled)").click(function(){
if($("#results").attr("data-position") == 0) $(this).addClass("disabled");
else $(this).removeClass("disabled");
width -= 780;
$("#results").css("-webkit-transform", "translate(-"+width+"px, 0)").attr("data-position", width);
// Helper functions
function secondsToTime(secs)
var hours = Math.floor(secs / (60 * 60));
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
if(seconds < 10) seconds = "0"+seconds;
var obj = {
h: hours,
m: minutes,
s: seconds
return obj;
function setupControls(){
function hideButtons(){
$("#open-button, #freetext-search-button").hide();
<div id="wrapper" class="">
<span id="intro">Hi! To begin, right-click on a track or artist and choose "Show music info" | Contact <a href="" id="contact">Johan</a> if there are issues</span>
<a title="" id="track-name" href=""></a> <a title="" id="artist-name" href=""></a> <a title="" id="album-name" href=""></a>
<div id="search">
<form id="search-form">
<input type="search" tabindex="0" placeholder="Search" size="30" results="5" />
<div id="results-wrapper">
<div id="results">
<span rel="prev" class="disabled">◀</span><span rel="next" class="disabled">▶</span>
<div id="float-right">
<img id="loader" src="loader.gif" alt="Loading..." />
<a id="open-button" class="button" title="open the current track in Spotify" href="">Open in Spotify</a>
<a id="freetext-search-button" class="button" title="search for more tracks like this one in Spotify" href="">Search in Spotify</a>
<a id="search-button" title="Search">Search</a>
<a id="close-bar" class="close" onclick="getExtensionBar().hide();"></a>
Jump to Line
Something went wrong with that request. Please try again.