andpp/mopidy-musicbox-webclient
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

'toast' loading message when playing a song, popup for queue

Browse Source
This commit is contained in:
Wouter van Wijk 2013-06-28 15:58:53 +02:00
parent 9b83e89a98
commit e3a0db9d43
3 changed files with 47 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
webclient/index.html
View File

@ -3,8 +3,9 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
<script src="js/jquery-1.8.3.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" /> -->
<script type='application/javascript' src='js/fastclick.js'></script>
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script type="text/javascript">
@ -77,7 +78,7 @@
<span id="popupTrackName"></span>
</li>
--> <li>
<a href="#" onclick="return playTrack();">Play <span id="popupTrackName"></span></a>
<a href="#" onclick="return playTrack();">Play <span class="popupTrackName"></span></a>
</li>
<li class="addqueue">
<a href="#" onclick="return playTrack(PLAY_NEXT);">Play Track Next</a>
@ -103,6 +104,30 @@
</div>
</div>
<div data-role="popup" data-transition="none" data-theme="c" id="popupQueue">
<div data-role="collapsible-set">
<ul data-role="listview" data-icon="false" id="popupQueueLv">
<li>
<a href="#" onclick="return playTrack();">Play <span class="popupTrackName"></span></a>
</li>
<li>
<a href="#" onclick="return removeTrack();">Remove from Queue</a>
</li>
<li>
<a href="#" onclick="showAlbumPopup()">Show Album <span id="popupAlbumName"></span></a>
</li>
<li id="popupArtistsLi">
<a href="#" onclick="showArtist()" id="popupArtistHref">Show Artist <span id="popupArtistName"></span>
</a>
</li>
<div data-role="collapsible" data-icon="false" data-inset="false" id="popupArtistsDiv">
<h2>Artists</h2>
<ul data-icon="false" data-inset="false" data-role="listview" id="popupArtistsLv"></ul>
</div>
</ul>
</div>
</div>
<div data-role="header" data-tap-toggle="false" id="header" data-position="fixed" class="ui-grid-b header-breakpoint">
<div id="controldiv" class="ui-block-a">

16
webclient/js/controls.js vendored
View File

@ -8,7 +8,7 @@ function playTrack(addtoqueue) {
}
$('#popupTracks').popup('close');
$('#controlsmodal').popup('close');
showLoading(true);
toast('Loading...');
//function playtrack(uri, playlisturi) {
playlisturi = $('#popupTracks').data("list");
@ -17,7 +17,6 @@ function playTrack(addtoqueue) {
var trackslist = new Array();
var track, tracksbefore, tracksafter;
var tracks = getTracksFromUri(playlisturi);
// console.log(tracks);
if (tracks) {
if (!addtoqueue) {
clearQueue();
@ -35,7 +34,6 @@ function playTrack(addtoqueue) {
mopidy.playback.next();
}
mopidy.playback.play();
showLoading(false);
return false;
}
@ -57,29 +55,25 @@ function playTrack(addtoqueue) {
switch (addtoqueue) {
case ADD_THIS_BOTTOM:
mopidy.tracklist.add(tracks.slice(selected, selected + 1));
showLoading(false);
return false;
case PLAY_NEXT:
mopidy.tracklist.add(tracks.slice(selected, selected + 1), playing + 1);
showLoading(false);
return false;
case ADD_ALL_BOTTOM:
mopidy.tracklist.add(tracks);
showLoading(false);
return false;
}
// play now: first add track to be played, then the other tracks
// first add track to be played, then the other tracks
mopidy.tracklist.add(tracks.slice(selected, selected + 1) );
mopidy.playback.play();
//wait 1 second before adding the rest to give server the time to start playing
//wait 1.5 second before adding the rest to give server the time to start playing
setTimeout(function() {
mopidy.tracklist.add(tracks.slice(0, selected), 0);
if (selected < tracks.length) {
mopidy.tracklist.add(tracks.slice(selected + 1) );
}
}, (1000));
showLoading(false);
}, (1500));
mopidy.playback.play();
return false;
}

15
webclient/js/functionsvars.js
View File

@ -292,3 +292,18 @@ function timeFromSeconds(length) {
var s = Math.floor(d % 3600 % 60);
return ((h > 0 ? h + ":" : "") + (m > 0 ? (h > 0 && m < 10 ? "0" : "") + m + ":" : "0:") + (s < 10 ? "0" : "") + s);
}
/******* Toast ***/
function toast (message, delay) {
message = message || "Loading...";
delay = delay || 1000;
$.mobile.showPageLoadingMsg("a", message);
if(delay > 0) {
setTimeout(function(){
$.mobile.hidePageLoadingMsg();
}, delay);
}
}