add album covers from lastfm, changed all lists to display albums and covers
This commit is contained in:
Wouter van Wijk
parent
0ef4ab8c0b
commit
9286353322
@ -2532,7 +2532,7 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid
|
||||
border-bottom-left-radius: inherit;
|
||||
}
|
||||
.ui-li>.ui-btn-inner { display: block; position: relative; padding: 0; }
|
||||
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .7em 15px; display: block; }
|
||||
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .4em 10px; display: block; }
|
||||
.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { min-height: 59px; padding-left: 100px; }
|
||||
.ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon { min-height: 20px; padding-left: 40px; }
|
||||
.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-count, .ui-li-divider.ui-li-has-count { padding-right: 45px; }
|
||||
|
||||
@ -5,6 +5,12 @@
|
||||
|
||||
/****************************
|
||||
* Responsive stuff
|
||||
* * iphone 3 20em
|
||||
* landscape 30
|
||||
* iphone 4 40em
|
||||
* landscape 60
|
||||
* ipad landsc 64
|
||||
* portr 48
|
||||
****************************/
|
||||
|
||||
@media all and (min-width: 50.1em) {
|
||||
@ -18,15 +24,13 @@
|
||||
clear: left;
|
||||
}
|
||||
.header-breakpoint.ui-grid-b .ui-block-a {
|
||||
width: 21.95%;
|
||||
width: 21%;
|
||||
}
|
||||
.header-breakpoint.ui-grid-b .ui-block-b {
|
||||
width: 37.92%;
|
||||
display: block;
|
||||
width: 37%;
|
||||
}
|
||||
.header-breakpoint.ui-grid-b .ui-block-c {
|
||||
width: 37.1%;
|
||||
display: block;
|
||||
width: 35.1%;
|
||||
}
|
||||
.pl-breakpoint.ui-grid-a .ui-block-a {
|
||||
clear: left;
|
||||
@ -40,44 +44,38 @@
|
||||
#playlisttablediv {
|
||||
margin-left: 10px;
|
||||
}
|
||||
#header {
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media all and (max-width: 50em) {
|
||||
/* tablet etc */
|
||||
@media all and (max-width: 50em) and (min-width: 30.1em) {
|
||||
.header-breakpoint.ui-grid-b .ui-block-a {
|
||||
width: 39.95%;
|
||||
}
|
||||
.header-breakpoint.ui-grid-b .ui-block-c {
|
||||
width: 59%;
|
||||
width: 50%;
|
||||
}
|
||||
.header-breakpoint.ui-grid-b .ui-block-b {
|
||||
display: none;
|
||||
}
|
||||
#header {
|
||||
height: 50px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 35em) {
|
||||
/* phone */
|
||||
@media all and (max-width: 30em) {
|
||||
.pl-breakpoint .ui-block-a, .pl-breakpoint .ui-block-b {
|
||||
width: 100%;
|
||||
}
|
||||
.header-breakpoint.ui-grid-b .ui-block-a {
|
||||
width: 40%;
|
||||
width: 35%;
|
||||
clear: left;
|
||||
}
|
||||
.header-breakpoint.ui-grid-b .ui-block-c {
|
||||
width: 45%;
|
||||
width: 40%;
|
||||
}
|
||||
.header-breakpoint.ui-grid-b .ui-block-b {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/************************
|
||||
* Volume Slider
|
||||
***********************/
|
||||
@ -101,7 +99,7 @@
|
||||
}
|
||||
|
||||
#slidercontainer {
|
||||
margin-top: 10px;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
@ -125,6 +123,7 @@
|
||||
#controldiv {
|
||||
height: 30px;
|
||||
width: 230px;
|
||||
margin-top: -3px;
|
||||
margin-left: -5px;
|
||||
display: inline;
|
||||
}
|
||||
@ -139,7 +138,7 @@
|
||||
}
|
||||
|
||||
#nextimg, #previmg {
|
||||
margin-top: 20px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
#backimg {
|
||||
@ -207,9 +206,12 @@
|
||||
.currenttrack {
|
||||
background-image: url('../images/icons/play_alt_16x16.png');
|
||||
background-repeat: no-repeat;
|
||||
background-color: #fff;
|
||||
background-color: #eee;
|
||||
background-position: 4px center;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.currenttrack a {
|
||||
margin-left: 14px;
|
||||
}
|
||||
|
||||
#modalalbum a, #modalartist a {
|
||||
@ -229,6 +231,15 @@ a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.ui-li-divider {
|
||||
height: 37px;
|
||||
}
|
||||
|
||||
.ui-li-divider a p {
|
||||
color: #555 !important;
|
||||
font-size: 120% !important;
|
||||
}
|
||||
|
||||
#artistviewimage, #albumviewcover {
|
||||
float: right;
|
||||
heigth: 90px;
|
||||
@ -239,21 +250,40 @@ a {
|
||||
width: 36px;
|
||||
heigth: 36px;
|
||||
margin-right: 5px;
|
||||
/* border: 1px solid #666; */
|
||||
/* border: 1px solid #666; */
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.artistcover {
|
||||
float: left;
|
||||
float: right;
|
||||
width: 40px;
|
||||
heigth: 40px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
#popupTrackName, #popupAlbumName, .popupArtistName {
|
||||
font-style: oblique;
|
||||
}
|
||||
|
||||
#controlsmodal {
|
||||
min-width:300px;
|
||||
}
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.pright {
|
||||
display: inline;
|
||||
margin-top: 4px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.artistname {
|
||||
font: bold;
|
||||
}
|
||||
|
||||
#h_artistname {
|
||||
margin-bottom: 65px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#header {
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
BIN
webclient/images/icons/new_window_16x16.png
Executable file
BIN
webclient/images/icons/new_window_16x16.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 166 B |
BIN
webclient/images/icons/new_window_24x24.png
Executable file
BIN
webclient/images/icons/new_window_24x24.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 174 B |
Binary file not shown.
|
Before Width: | Height: | Size: 215 B |
Binary file not shown.
|
Before Width: | Height: | Size: 266 B |
Binary file not shown.
|
Before Width: | Height: | Size: 345 B |
Binary file not shown.
|
Before Width: | Height: | Size: 389 B |
Binary file not shown.
|
Before Width: | Height: | Size: 183 B |
@ -86,10 +86,9 @@
|
||||
<li>
|
||||
<a href="#" onclick="return playTrack();">Play Track <span id="popupTrackName"></span></a>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<a href="#">Add tracks to bottom of queue</a>
|
||||
<li id="liaddtobottom">
|
||||
<a href="#" onclick="return playTrack(true);">Add tracks to bottom of queue</a>
|
||||
</li>
|
||||
-->
|
||||
<li>
|
||||
<a href="#" onclick="showAlbumPopup()">Show Album <span id="popupAlbumName"></span></a>
|
||||
</li>
|
||||
@ -106,10 +105,10 @@
|
||||
|
||||
<div id="controldiv" class="ui-block-a">
|
||||
<span id="btback"><a href="#" onclick="return backbt();"> <img id="backimg"src="images/icons/arrow_left_alt1_24x24.png" /></a></span>
|
||||
<span id="btprev"><a href="#" onclick="doPrevious(); return false"><img id="previmg" src="images/icons/first_16x16.png" alt="Previous Track" /></a></span>
|
||||
<span id="btprev"><a href="#" onclick="doPrevious(); return false"><img id="previmg" src="images/icons/first_24x24.png" alt="Previous Track" /></a></span>
|
||||
<span id="btplay"><a href="#" onclick="doPlay(); return false"><img src="images/icons/pause_32x32.png" alt="Play" id="playimg" /></a></span>
|
||||
<span id="btnext"><a href="#" onclick="doNext(); return false"><img id="nextimg" src="images/icons/last_16x16.png" alt="Next Track" /></a></span>
|
||||
<span id="btcontrols"><a href="#controlsmodal" data-rel="popup"><img src="images/icons/cog_24x24.png" id="controlsimg" alt="More controls" class="breakafter" /></a></span>
|
||||
<span id="btnext"><a href="#" onclick="doNext(); return false"><img id="nextimg" src="images/icons/last_24x24.png" alt="Next Track" /></a></span>
|
||||
<span id="btcontrols"><a href="#controlsmodal" data-rel="popup"><img src="images/icons/new_window_24x24.png" id="controlsimg" alt="More controls" class="breakafter" /></a></span>
|
||||
</div>
|
||||
|
||||
<div id="songinfo" class=" ui-block-b">
|
||||
@ -134,7 +133,7 @@
|
||||
<ul id="playlistslist" data-icon="false" data-inset="true" data-role="listview" data-filter="true"></ul>
|
||||
</div>
|
||||
<div class="ui-block-b" id="playlisttablediv">
|
||||
<ul data-role="listview" data-icon="false" id="playlisttable" data-inset="true" data-filter="true"></ul>
|
||||
<ul data-role="listview" data-theme="c" data-icon="false" id="playlisttable" data-inset="true" data-filter="true"></ul>
|
||||
<img src="images/loader.gif" id="playlistloader" class= "loader" />
|
||||
</div>
|
||||
|
||||
@ -142,7 +141,7 @@
|
||||
|
||||
<div data-role="content" class="pane" id="currentpane">
|
||||
<h4>Play Queue</h4>
|
||||
<ul data-role="listview" data-icon="false" data-inset="true" id="currenttable"></ul>
|
||||
<ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul>
|
||||
<img src="images/loader.gif" id="currentloader" class= "loader" />
|
||||
</div>
|
||||
|
||||
@ -158,10 +157,7 @@
|
||||
<!-- <h4>Artist</h4> -->
|
||||
<a href="#artistpopup" data-rel="popup"><img height="90" src="" id="artistviewimage" /></a>
|
||||
<h3 id="h_artistname"></h3>
|
||||
|
||||
<!-- <ul data-role="listview" data-icon="false" id="artistslist" data-inset="true"></ul> -->
|
||||
|
||||
<div id="artiststable"></div>
|
||||
<ul data-role="listview" data-icon="false" data-inset="true" id="artiststable"></ul>
|
||||
<img src="images/loader.gif" id="artistsloader" class="loader" />
|
||||
</div>
|
||||
|
||||
|
||||
42
webclient/js/controls.js
vendored
42
webclient/js/controls.js
vendored
@ -1,7 +1,7 @@
|
||||
/********************************************************
|
||||
* play an uri from a trackslist or the current playlist
|
||||
*********************************************************/
|
||||
function playTrack() {
|
||||
function playTrack(addtobottom) {
|
||||
$('#popupTracks').popup('close');
|
||||
$('#controlsmodal').popup('close');
|
||||
|
||||
@ -14,13 +14,19 @@ function playTrack() {
|
||||
var track;
|
||||
switchContent('current', uri);
|
||||
var tracks = getTracksFromUri(playlisturi);
|
||||
|
||||
if (tracks) {
|
||||
mopidy.tracklist.clear();
|
||||
if (!addtobottom) {
|
||||
mopidy.tracklist.clear();
|
||||
}
|
||||
mopidy.tracklist.add(tracks);
|
||||
$(CURRENT_PLAYLIST_TABLE).empty();
|
||||
} else {
|
||||
tracks = currentplaylist;
|
||||
}
|
||||
|
||||
if (addtobottom) { return false;}
|
||||
|
||||
mopidy.playback.stop(true);
|
||||
|
||||
for (var i = 0; i < tracks.length; i++) {
|
||||
@ -37,8 +43,6 @@ function playTrack() {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**********************
|
||||
* Buttons
|
||||
*/
|
||||
@ -129,6 +133,7 @@ function doRepeat() {
|
||||
|
||||
/*********************
|
||||
* Track Slider
|
||||
* Use a timer to prevent looping of commands
|
||||
*********************/
|
||||
|
||||
function doSeekPos(value) {
|
||||
@ -138,20 +143,24 @@ function doSeekPos(value) {
|
||||
if (!initgui) {
|
||||
pauseTimer();
|
||||
//set timer to not trigger it too much
|
||||
mopidy.playback.pause();
|
||||
seekTimer = setTimeout(triggerPos, 250);
|
||||
posChanging = true;
|
||||
seekTimer = setTimeout(triggerPos, 200);
|
||||
}
|
||||
}
|
||||
|
||||
function triggerPos() {
|
||||
console.log(newposition);
|
||||
if (mopidy) {
|
||||
mopidy.playback.stop();
|
||||
mopidy.playback.seek(newposition);
|
||||
mopidy.playback.resume();
|
||||
posChanging = false;
|
||||
}
|
||||
}
|
||||
|
||||
function setPosition(pos) {
|
||||
if (posChanging) {
|
||||
return;
|
||||
}
|
||||
var oldval = initgui;
|
||||
if (pos > songlength) {
|
||||
pos = songlength;
|
||||
@ -165,11 +174,13 @@ function setPosition(pos) {
|
||||
}
|
||||
|
||||
/********************
|
||||
* Volume
|
||||
* Volume slider
|
||||
* Use a timer to prevent looping of commands
|
||||
*/
|
||||
|
||||
function setVolume(value) {
|
||||
var oldval = initgui;
|
||||
console.log('volume: ' + value);
|
||||
initgui = true;
|
||||
$("#volumeslider").val(value).slider('refresh');
|
||||
initgui = oldval;
|
||||
@ -177,11 +188,17 @@ function setVolume(value) {
|
||||
|
||||
function doVolume(value) {
|
||||
if (!initgui) {
|
||||
console.log('volume: ' + value);
|
||||
volumeChanging = true;
|
||||
clearInterval(volumeTimer);
|
||||
volumeTimer = setTimeout(triggerVolume, 2000);
|
||||
mopidy.playback.setVolume(parseInt(value));
|
||||
}
|
||||
}
|
||||
|
||||
function triggerVolume() {
|
||||
volumeChanging = false;
|
||||
}
|
||||
|
||||
function doMute() {
|
||||
//only emit the event, not the status
|
||||
if (muteVolume == -1) {
|
||||
@ -195,8 +212,9 @@ function doMute() {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*******
|
||||
* Track timer
|
||||
* Track timer
|
||||
*/
|
||||
|
||||
//timer function to update interface
|
||||
@ -213,7 +231,7 @@ function resumeTimer() {
|
||||
|
||||
function initTimer() {
|
||||
pauseTimer();
|
||||
// setPosition(0);
|
||||
// setPosition(0);
|
||||
resumeTimer();
|
||||
}
|
||||
|
||||
@ -221,5 +239,3 @@ function pauseTimer() {
|
||||
clearInterval(posTimer);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -18,7 +18,11 @@ var random;
|
||||
var repeat;
|
||||
var currentVolume = -1;
|
||||
var muteVolume = -1;
|
||||
var volumeChanging = false;
|
||||
var posChanging = false;
|
||||
|
||||
var posTimer;
|
||||
var volumeTimer;
|
||||
var seekTimer;
|
||||
var initgui = true;
|
||||
var currentpos = 0;
|
||||
@ -54,13 +58,12 @@ TRACK_TIMER = 1000;
|
||||
//check status timer, every 5 or 10 sec
|
||||
STATUS_TIMER = 10000;
|
||||
|
||||
|
||||
/*******
|
||||
*
|
||||
*/
|
||||
function scrollToTop() {
|
||||
var divtop = 0;
|
||||
// console.log(divtop);
|
||||
// console.log(divtop);
|
||||
$('body,html').animate({
|
||||
scrollTop : divtop
|
||||
}, 250);
|
||||
@ -87,6 +90,84 @@ function getAlbum(pl) {
|
||||
};
|
||||
}
|
||||
|
||||
/********************************************************
|
||||
* break up results and put them in album tables
|
||||
*********************************************************/
|
||||
function albumTracksToTable(pl, table, uri) {
|
||||
var tmp = '';
|
||||
$(table).empty();
|
||||
var child = '';
|
||||
for (var i = 0; i < pl.length; i++) {
|
||||
popupData[pl[i].uri] = pl[i];
|
||||
child = '<li><a href="#" onclick="return popupTracks(event, \'' + uri + '\',\'' + pl[i].uri + '\');">';
|
||||
child += '<p style="float:right; display: inline;">' + timeFromSeconds(pl[i].length / 1000) + '</p><h1>' + pl[i].name + '</h1></a></li>';
|
||||
tmp += child;
|
||||
};
|
||||
$(table).html(tmp);
|
||||
$(table).attr('data', uri);
|
||||
//set click handlers
|
||||
/* $(table + ' .name').click(function() {
|
||||
return playtrack(this.id, uri)
|
||||
});*/
|
||||
//create (for new tables)
|
||||
$(table).listview().trigger("create");
|
||||
//refresh
|
||||
$(table).listview('refresh');
|
||||
}
|
||||
|
||||
function resultsToTables(results, target, uri) {
|
||||
$(target).html('');
|
||||
|
||||
//break into albums and put in tables
|
||||
var newalbum = [];
|
||||
var html = '';
|
||||
var nexturi = '';
|
||||
var tableid, j, artistname, alburi;
|
||||
var targetmin = target.substr(1);
|
||||
$(target).attr('data', uri);
|
||||
|
||||
for (var i = 0; i < results.length; i++) {
|
||||
newalbum.push(results[i]);
|
||||
nexturi = '';
|
||||
if (i < results.length - 1) {
|
||||
nexturi = results[i + 1].album.uri;
|
||||
}
|
||||
if (results[i].album.uri != nexturi) {
|
||||
// console.log(i);
|
||||
|
||||
tableid = 'art' + i;
|
||||
html += '<li data-role="list-divider" data-theme="d"><a href="#" onclick="return showAlbum(\'' + results[i].album.uri + '\');">';
|
||||
html += '<img id="' + targetmin + '-cover-' + i + '" class="artistcover" width="40" height="40" />';
|
||||
html += '<p class="artistname">' + results[i].album.name + '</p><p>';
|
||||
for (j = 0; j < results[i].album.artists.length; j++) {
|
||||
html += results[i].album.artists[j].name;
|
||||
html += (j == results[i].album.artists.length - 1) ? '' : ' / ';
|
||||
//stop after 3
|
||||
if (j > 2) {
|
||||
child += '...';
|
||||
break;
|
||||
}
|
||||
}
|
||||
html += '</p></a></li>';
|
||||
// html += '<ul data-role="listview" data-inset="true" data-icon="false" class="" id="' + tableid + '"></ul>';
|
||||
for (j = 0; j < newalbum.length; j++) {
|
||||
popupData[newalbum[j].uri] = newalbum[j];
|
||||
html += '<li id="' + newalbum[j].uri + '"><a href="#" onclick="return popupTracks(event, \'' + uri + '\',\'' + newalbum[j].uri + '\');">';
|
||||
html += '<p class="pright">' + timeFromSeconds(newalbum[j].length / 1000) + '</p><h1>' + newalbum[j].name + '</h1></a></li>';
|
||||
};
|
||||
artistname = results[i].artists[0].name;
|
||||
getCover(artistname, results[i].album.name, target + '-cover-' + i, 'small');
|
||||
// customTracklists[results[i].album.uri] = newalbum;
|
||||
newalbum = [];
|
||||
}
|
||||
}
|
||||
//console.log(html);
|
||||
tableid = "#" + tableid;
|
||||
$(target).html(html);
|
||||
$(target).attr('data', uri);
|
||||
$(target).listview('refresh');
|
||||
}
|
||||
|
||||
//process updated playlist to gui
|
||||
function playlisttotable(pl, table, uri) {
|
||||
var tmp = '';
|
||||
@ -121,7 +202,7 @@ function playlisttotable(pl, table, uri) {
|
||||
// <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
|
||||
for (var j = 0; j < pl[i].artists.length; j++) {
|
||||
child += pl[i].artists[j].name;
|
||||
child += (j == pl[i].artists.length - 1) ? '' : ' / ';
|
||||
child += (j == pl[i].artists.length - 1) ? '' : ' / ';
|
||||
//stop after 3
|
||||
if (j > 2) {
|
||||
child += '...';
|
||||
@ -130,7 +211,7 @@ function playlisttotable(pl, table, uri) {
|
||||
}
|
||||
child += ' / <em>' + pl[i].album.name + '</em></p>';
|
||||
|
||||
// child += '<p>' + pl[i].album.name + '</p>';
|
||||
// child += '<p>' + pl[i].album.name + '</p>';
|
||||
child += '</a></li>';
|
||||
tmp += child;
|
||||
};
|
||||
@ -139,30 +220,7 @@ function playlisttotable(pl, table, uri) {
|
||||
$(table).attr('data', uri);
|
||||
|
||||
//create (for new tables)
|
||||
// $(table).listview().trigger("create");
|
||||
//refresh
|
||||
$(table).listview('refresh');
|
||||
}
|
||||
|
||||
function albumtrackstotable(pl, table, uri) {
|
||||
var tmp = '';
|
||||
$(table).empty();
|
||||
var child = '';
|
||||
for (var i = 0; i < pl.length; i++) {
|
||||
popupData[pl[i].uri] = pl[i];
|
||||
child = '<li><a href="#" onclick="return popupTracks(event, \'' + uri + '\',\'' + pl[i].uri + '\');">';
|
||||
child += '<p style="float:right; display: inline;">' + timeFromSeconds(pl[i].length / 1000) +
|
||||
'</p><h1>' + pl[i].name + '</h1></a></li>';
|
||||
tmp += child;
|
||||
};
|
||||
$(table).html(tmp);
|
||||
$(table).attr('data', uri);
|
||||
//set click handlers
|
||||
/* $(table + ' .name').click(function() {
|
||||
return playtrack(this.id, uri)
|
||||
});*/
|
||||
//create (for new tables)
|
||||
$(table).listview().trigger("create");
|
||||
// $(table).listview().trigger("create");
|
||||
//refresh
|
||||
$(table).listview('refresh');
|
||||
}
|
||||
|
||||
@ -1,21 +1,23 @@
|
||||
/* gui interactions here
|
||||
* set- functions only set/update the gui elements
|
||||
* do- functions interact with the server
|
||||
* show- functions do both
|
||||
*/
|
||||
* set- functions only set/update the gui elements
|
||||
* do- functions interact with the server
|
||||
* show- functions do both
|
||||
*/
|
||||
/********************
|
||||
* Song Info Sreen
|
||||
********************/
|
||||
function resetSong() {
|
||||
pauseTimer();
|
||||
setPlayState(false);
|
||||
setPosition(0);
|
||||
var data = new Object;
|
||||
data.name = '';
|
||||
data.artists = '';
|
||||
data.length = 0;
|
||||
data.uri = '';
|
||||
setSongInfo(data);
|
||||
if (!posChanging) {
|
||||
pauseTimer();
|
||||
setPlayState(false);
|
||||
setPosition(0);
|
||||
var data = new Object;
|
||||
data.name = '';
|
||||
data.artists = '';
|
||||
data.length = 0;
|
||||
data.uri = '';
|
||||
setSongInfo(data);
|
||||
}
|
||||
}
|
||||
|
||||
function expandSonginfo() {
|
||||
@ -61,7 +63,7 @@ function setSongInfo(data) {
|
||||
artiststext += ', ';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (data.album) {
|
||||
$("#modalalbum").html('Album: <a href="#" onclick="return showAlbum(\'' + data.album.uri + '\');">' + data.album.name + '</a>');
|
||||
}
|
||||
@ -81,10 +83,7 @@ function setSongInfo(data) {
|
||||
$("#songlength").html(timeFromSeconds(data.length / 1000));
|
||||
|
||||
resizeSonginfo();
|
||||
|
||||
$('#currenttable li').each(
|
||||
function() {
|
||||
//console.log(this.className);
|
||||
$('#currenttable li').each(function() {
|
||||
$(this).removeClass("currenttrack");
|
||||
if (this.id == data.uri) {
|
||||
$(this).addClass('currenttrack');
|
||||
@ -97,8 +96,9 @@ function setSongInfo(data) {
|
||||
* @param {Object} listuri
|
||||
* @param {Object} trackuri
|
||||
*/
|
||||
function popupTracks (e, listuri, trackuri) {
|
||||
if (!e) var e = window.event;
|
||||
function popupTracks(e, listuri, trackuri) {
|
||||
if (!e)
|
||||
var e = window.event;
|
||||
//console.log('list: ' + listuri + ', track: ' + trackuri);
|
||||
$('#popupTrackName').html(popupData[trackuri].name);
|
||||
$('#popupAlbumName').html(popupData[trackuri].album.name);
|
||||
@ -107,35 +107,47 @@ function popupTracks (e, listuri, trackuri) {
|
||||
if (popupData[trackuri].artists.length == 1) {
|
||||
|
||||
//this doesnt work
|
||||
// child += '<a href="#" onclick="showArtist(\'' +popupData[trackuri].artists[0].uri + '\');">Show Artist <span class="popupArtistName">' + popupData[trackuri].artists[0].name + '</span></a>';
|
||||
$('#popupTracksLv').append($('<li/>', { 'id': "popupArtistsLi"})
|
||||
.append($('<a/>', {
|
||||
'href': '#',
|
||||
'onclick': 'showArtist(\'' +popupData[trackuri].artists[0].uri + '\');',
|
||||
'text': 'Show Artist '
|
||||
// child += '<a href="#" onclick="showArtist(\'' +popupData[trackuri].artists[0].uri + '\');">Show Artist <span class="popupArtistName">' + popupData[trackuri].artists[0].name + '</span></a>';
|
||||
$('#popupTracksLv').append($('<li/>', {
|
||||
'id' : "popupArtistsLi"
|
||||
}).append($('<a/>', {
|
||||
'href' : '#',
|
||||
'onclick' : 'showArtist(\'' + popupData[trackuri].artists[0].uri + '\');',
|
||||
'text' : 'Show Artist '
|
||||
}).append($('<span/>', {
|
||||
'class': 'popupArtistName',
|
||||
'text': popupData[trackuri].artists[0].name
|
||||
'class' : 'popupArtistName',
|
||||
'text' : popupData[trackuri].artists[0].name
|
||||
}))));
|
||||
|
||||
|
||||
$('#popupArtistsDiv').hide();
|
||||
// console.log(child);
|
||||
// $('#popupArtistsLi').html(child).show();
|
||||
// console.log(child);
|
||||
// $('#popupArtistsLi').html(child).show();
|
||||
} else {
|
||||
for (var j = 0; j < popupData[trackuri].artists.length; j++) {
|
||||
child += '<li><a href="#" onclick="showArtist(\'' + popupData[trackuri].artists[j].uri + '\');"><span class="popupArtistName">' + popupData[trackuri].artists[j].name + '</span></a></li>';
|
||||
for (var j = 0; j < popupData[trackuri].artists.length; j++) {
|
||||
child += '<li><a href="#" onclick="showArtist(\'' + popupData[trackuri].artists[j].uri + '\');"><span class="popupArtistName">' + popupData[trackuri].artists[j].name + '</span></a></li>';
|
||||
}
|
||||
//console.log(child);
|
||||
$('#popupArtistsLi').hide();
|
||||
$('#popupArtistsLv').html(child).show();
|
||||
$('#popupArtistsDiv').show();
|
||||
$('#popupArtistsLv').listview("refresh");
|
||||
}
|
||||
$('#popupTracksLv') .listview().trigger("create");
|
||||
}
|
||||
var hash = document.location.hash.split('?');
|
||||
var divid = hash[0].substr(1);
|
||||
if (divid == 'current') {
|
||||
$("#liaddtobottom").hide();
|
||||
} else {
|
||||
$("#liaddtobottom").show();
|
||||
}
|
||||
|
||||
$('#popupTracksLv').listview().trigger("create");
|
||||
|
||||
$('#popupTracksLv').listview('refresh');
|
||||
|
||||
$('#popupTracks').data("list", listuri).data("track", trackuri).popup("open", { x: e.pageX, y: e.pageY } );
|
||||
$('#popupTracks').data("list", listuri).data("track", trackuri).popup("open", {
|
||||
x : e.pageX,
|
||||
y : e.pageY
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -210,7 +222,9 @@ function initSocketevents() {
|
||||
});
|
||||
|
||||
mopidy.on("event:volumeChanged", function(data) {
|
||||
setVolume(data["volume"]);
|
||||
if (!volumeChanging) {
|
||||
setVolume(data["volume"]);
|
||||
}
|
||||
});
|
||||
|
||||
mopidy.on("event:playbackStateChanged", function(data) {
|
||||
@ -239,10 +253,10 @@ function initSocketevents() {
|
||||
* initialize software
|
||||
**********************/
|
||||
$(document).ready(function() {
|
||||
//$(document).bind("pageinit", function() {
|
||||
//$(document).bind("pageinit", function() {
|
||||
|
||||
$(window).hashchange();
|
||||
|
||||
|
||||
// Connect to server
|
||||
mopidy = new Mopidy();
|
||||
//initialize events
|
||||
@ -254,19 +268,18 @@ $(document).ready(function() {
|
||||
switchContent("playlists");
|
||||
}
|
||||
|
||||
|
||||
// $("#songinfo").resize(resizeSonginfo());
|
||||
initgui = false;
|
||||
window.onhashchange = locationHashChanged;
|
||||
// Log all events
|
||||
mopidy.on(function() {
|
||||
// console.log(arguments);
|
||||
// console.log(arguments);
|
||||
});
|
||||
|
||||
|
||||
//update gui status every x seconds from mopdidy
|
||||
setInterval(updateTimer, STATUS_TIMER);
|
||||
|
||||
//only show backbutton if in UIWebview
|
||||
|
||||
//only show backbutton if in UIWebview
|
||||
if (window.navigator.standalone) {
|
||||
$("#btback").show();
|
||||
} else {
|
||||
@ -283,7 +296,7 @@ function switchContent(divid, uri) {
|
||||
if (uri) {
|
||||
hash += "?" + uri;
|
||||
}
|
||||
// $.mobile.changePage("#" + hash);
|
||||
// $.mobile.changePage("#" + hash);
|
||||
location.hash = "#" + hash;
|
||||
}
|
||||
|
||||
@ -291,7 +304,7 @@ function switchContent(divid, uri) {
|
||||
function updateStatusOfAll() {
|
||||
mopidy.playback.getCurrentTrack().then(processCurrenttrack, console.error);
|
||||
mopidy.playback.getTimePosition().then(processCurrentposition, console.error);
|
||||
//TODO check offline?
|
||||
//TODO check offline?
|
||||
}
|
||||
|
||||
//update everything as if reloaded
|
||||
@ -307,42 +320,42 @@ function updateStatusOfAll() {
|
||||
}
|
||||
|
||||
function locationHashChanged() {
|
||||
var hash = document.location.hash.split('?');
|
||||
//remove #
|
||||
var divid = hash[0].substr(1);
|
||||
var uri = hash[1];
|
||||
$('#navcurrent a').removeClass('ui-state-active ui-state-persist ui-btn-active');
|
||||
$('#navplaylists a').removeClass('ui-state-active ui-state-persist ui-btn-active');
|
||||
$('#navsearch a').removeClass('ui-state-active ui-state-persist ui-btn-active');
|
||||
// alert(divid);
|
||||
switch(divid) {
|
||||
case 'current':
|
||||
$('#navcurrent a').addClass('ui-state-active ui-state-persist ui-btn-active');
|
||||
break;
|
||||
case 'playlists':
|
||||
$('#navplaylists a').addClass('ui-state-active ui-state-persist ui-btn-active');
|
||||
break;
|
||||
case 'search':
|
||||
$('#navsearch a').addClass( $.mobile.activeBtnClass );
|
||||
$("#searchinput").focus();
|
||||
if (customTracklists['allresultscache'] == '') {
|
||||
initSearch($('#searchinput').val());
|
||||
}
|
||||
break;
|
||||
case 'artists':
|
||||
if (uri != '') {
|
||||
showArtist(uri);
|
||||
}
|
||||
break;
|
||||
case 'albums':
|
||||
if (uri != '') {
|
||||
showAlbum(uri);
|
||||
}
|
||||
break;
|
||||
}
|
||||
// Set the page title based on the hash.
|
||||
document.title = PROGRAM_NAME;
|
||||
$('.pane').hide();
|
||||
$('#' + divid + 'pane').show();
|
||||
return false;
|
||||
var hash = document.location.hash.split('?');
|
||||
//remove #
|
||||
var divid = hash[0].substr(1);
|
||||
var uri = hash[1];
|
||||
$('#navcurrent a').removeClass('ui-state-active ui-state-persist ui-btn-active');
|
||||
$('#navplaylists a').removeClass('ui-state-active ui-state-persist ui-btn-active');
|
||||
$('#navsearch a').removeClass('ui-state-active ui-state-persist ui-btn-active');
|
||||
// alert(divid);
|
||||
switch(divid) {
|
||||
case 'current':
|
||||
$('#navcurrent a').addClass('ui-state-active ui-state-persist ui-btn-active');
|
||||
break;
|
||||
case 'playlists':
|
||||
$('#navplaylists a').addClass('ui-state-active ui-state-persist ui-btn-active');
|
||||
break;
|
||||
case 'search':
|
||||
$('#navsearch a').addClass($.mobile.activeBtnClass);
|
||||
$("#searchinput").focus();
|
||||
if (customTracklists['allresultscache'] == '') {
|
||||
initSearch($('#searchinput').val());
|
||||
}
|
||||
break;
|
||||
case 'artists':
|
||||
if (uri != '') {
|
||||
showArtist(uri);
|
||||
}
|
||||
break;
|
||||
case 'albums':
|
||||
if (uri != '') {
|
||||
showAlbum(uri);
|
||||
}
|
||||
break;
|
||||
}
|
||||
// Set the page title based on the hash.
|
||||
document.title = PROGRAM_NAME;
|
||||
$('.pane').hide();
|
||||
$('#' + divid + 'pane').show();
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -23,12 +23,9 @@ $(window).load(function() {
|
||||
|
||||
function getCover(nwartist, nwalbum, image, size) {
|
||||
$(image).attr('src', '../images/icons/cd_32x32.png');
|
||||
// console.log(nwartist + ' - ' + nwalbum + ' - ' + image);
|
||||
lastfm.album.getInfo({artist: nwartist, album: nwalbum}, {success: function(data){
|
||||
// console.log(data);
|
||||
for (var i = 0; i < data.album.image.length; i++) {
|
||||
if ( data.album.image[i]['size'] == size) {
|
||||
// console.log(image + ' - ' + data.album.image[i]['#text']);
|
||||
$(image).attr('src', data.album.image[i]['#text']);
|
||||
}
|
||||
}
|
||||
|
||||
@ -151,7 +151,7 @@ function showAlbum(uri) {
|
||||
//fill from cache
|
||||
var pl = getTracksFromUri(uri);
|
||||
if (pl) {
|
||||
albumtrackstotable(pl, ALBUM_TABLE, uri);
|
||||
albumTracksToTable(pl, ALBUM_TABLE, uri);
|
||||
var albumname = getAlbum(pl);
|
||||
var artistname = getArtist(pl);
|
||||
$('#h_albumname').html(albumname);
|
||||
|
||||
@ -16,7 +16,9 @@ function processCurrenttrack(data) {
|
||||
* process results of volume
|
||||
*********************************************************/
|
||||
function processVolume(data) {
|
||||
setVolume(data);
|
||||
if (!volumeChanging) {
|
||||
setVolume(data);
|
||||
}
|
||||
}
|
||||
|
||||
/********************************************************
|
||||
@ -84,8 +86,10 @@ function processGetPlaylists(resultArr) {
|
||||
function processGetTracklist(resultArr) {
|
||||
//cache result
|
||||
var newplaylisturi = resultArr.uri;
|
||||
//console.log(newplaylisturi);
|
||||
playlists[newplaylisturi] = resultArr;
|
||||
playlisttotable(playlists[newplaylisturi].tracks, PLAYLIST_TABLE, newplaylisturi);
|
||||
resultsToTables(playlists[newplaylisturi].tracks, PLAYLIST_TABLE, newplaylisturi);
|
||||
// playlisttotable(playlists[newplaylisturi].tracks, PLAYLIST_TABLE, newplaylisturi);
|
||||
// $('#playlistloader').hide();
|
||||
showLoading(false);
|
||||
scrollToTop();
|
||||
@ -96,7 +100,7 @@ function processGetTracklist(resultArr) {
|
||||
*********************************************************/
|
||||
function processCurrentPlaylist(resultArr) {
|
||||
currentplaylist = resultArr;
|
||||
playlisttotable(resultArr, CURRENT_PLAYLIST_TABLE);
|
||||
resultsToTables(resultArr, CURRENT_PLAYLIST_TABLE);
|
||||
mopidy.playback.getCurrentTrack().then(processCurrenttrack, console.error);
|
||||
}
|
||||
|
||||
@ -105,35 +109,9 @@ function processCurrentPlaylist(resultArr) {
|
||||
*********************************************************/
|
||||
function processArtistResults(resultArr) {
|
||||
customTracklists[resultArr.uri] = resultArr;
|
||||
$(ARTIST_TABLE).html('');
|
||||
|
||||
//break into albums and put in tables
|
||||
var newalbum = [];
|
||||
var nexturi = '';
|
||||
var html, tableid;
|
||||
resultsToTables(resultArr, ARTIST_TABLE, resultArr.uri);
|
||||
var artistname = getArtist(resultArr);
|
||||
|
||||
for (var i = 0; i < resultArr.length; i++) {
|
||||
newalbum.push(resultArr[i]);
|
||||
nexturi = '';
|
||||
if (i < resultArr.length - 1) {
|
||||
nexturi = resultArr[i + 1].album.uri;
|
||||
}
|
||||
// console.log(i);
|
||||
if (resultArr[i].album.uri != nexturi) {
|
||||
tableid = 'art' + i;
|
||||
html = '<a href="#" onclick="return showAlbum(\'' + resultArr[i].album.uri + '\');"><img id="artistcover-' + i + '" class="artistcover" width="40" height="40" />';
|
||||
html += '<h4>' + resultArr[i].album.name + '</h4></a>';
|
||||
html += '<ul data-role="listview" data-inset="true" data-icon="false" class="" id="' + tableid + '"></ul>';
|
||||
tableid = "#" + tableid;
|
||||
$(ARTIST_TABLE).append(html);
|
||||
albumtrackstotable(newalbum, tableid, resultArr[i].album.uri);
|
||||
getCover(artistname, resultArr[i].album.name, '#artistcover-' + i, 'small');
|
||||
$(tableid).listview('refresh');
|
||||
customTracklists[resultArr[i].album.uri] = newalbum;
|
||||
newalbum = [];
|
||||
}
|
||||
}
|
||||
$('#h_artistname, #artistpopupname').html(artistname);
|
||||
getArtistImage(artistname, '#artistviewimage, #artistpopupimage', 'extralarge');
|
||||
showLoading(false);
|
||||
@ -144,7 +122,7 @@ function processArtistResults(resultArr) {
|
||||
*********************************************************/
|
||||
function processAlbumResults(resultArr) {
|
||||
customTracklists[resultArr.uri] = resultArr;
|
||||
albumtrackstotable(resultArr, ALBUM_TABLE, resultArr.uri);
|
||||
albumTracksToTable(resultArr, ALBUM_TABLE, resultArr.uri);
|
||||
var albumname = getAlbum(resultArr);
|
||||
var artistname = getArtist(resultArr);
|
||||
$('#h_albumname').html(albumname);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user