better control-buttons, cleanup, comments
This commit is contained in:
Wouter van Wijk
parent
0469c3de11
commit
cb2850b705
184
css/ws.css
184
css/ws.css
@ -1,178 +1,122 @@
|
||||
/*@navbarBackground: green;
|
||||
@navbarBackgroundHighlight: green;
|
||||
@navbarLinkColor: white;
|
||||
@navbarLinkColorHover: white;
|
||||
|
||||
.navbar .nav {
|
||||
height: @navbarHeight;
|
||||
}
|
||||
.navbar .nav > li > a {
|
||||
padding: (@navbarHeight - 20)/2 10px ((@navbarHeight - 20)/2 + 1);
|
||||
}
|
||||
.navbar .brand {
|
||||
padding: (((@navbarHeight - 20) / 2) * 0.8) 20px (((@navbarHeight - 20) / 2) * 1.2);
|
||||
}
|
||||
/*
|
||||
*
|
||||
*/
|
||||
|
||||
.content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menutext {
|
||||
vertical-align: bottom;
|
||||
vertical-align:bottom;
|
||||
}
|
||||
|
||||
#trackslider {
|
||||
width: 90%;
|
||||
width:90%;
|
||||
}
|
||||
|
||||
#slidercontainer {
|
||||
margin-left: 2%;
|
||||
width: 95%;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
margin-left:2%;
|
||||
width:95%;
|
||||
margin-top:5px;
|
||||
margin-bottom:5px;
|
||||
}
|
||||
|
||||
#mainmenu a {
|
||||
margin-right: 5px;
|
||||
display: inline;
|
||||
margin-right:5px;
|
||||
display:inline;
|
||||
}
|
||||
|
||||
.menutext a:hover {
|
||||
text-decoration: none;
|
||||
text-underline-position: 0;
|
||||
text-decoration:none;
|
||||
text-underline-position:0;
|
||||
}
|
||||
|
||||
#controlbt {
|
||||
margin-left: 5px;
|
||||
width: 90px;
|
||||
height: 30px;
|
||||
#controlbt a {
|
||||
margin-top: 4px;
|
||||
margin-left:8px;
|
||||
}
|
||||
|
||||
#playpause {
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
a.name, a.album, a.artist {
|
||||
display: block;
|
||||
height: 100%;
|
||||
display:block;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
padding-top: 80px;
|
||||
padding-top:80px;
|
||||
}
|
||||
|
||||
@media (max-width: 979px) {
|
||||
body {
|
||||
padding-top: 0px;
|
||||
}
|
||||
.btsquare {
|
||||
display: block;
|
||||
}
|
||||
@media(max-width:979px) {
|
||||
body {
|
||||
padding-top:0px;
|
||||
}
|
||||
.btsquare {
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 979px) {
|
||||
.btsquare {
|
||||
display: inline;
|
||||
}
|
||||
@media(min-width:979px) {
|
||||
.btsquare {
|
||||
display:inline;
|
||||
}
|
||||
}
|
||||
|
||||
.nobreak, .btsquare {
|
||||
display: inline;
|
||||
display:inline;
|
||||
}
|
||||
|
||||
#allresultloader, .loader {
|
||||
display: none;
|
||||
display:none;
|
||||
}
|
||||
|
||||
#playlistslist li {
|
||||
padding: 5px;
|
||||
list-style-type: none;
|
||||
padding:5px;
|
||||
list-style-type:none;
|
||||
}
|
||||
|
||||
#playlistslist li:nth-of-type(odd) {
|
||||
background-color: #444;
|
||||
background-color:#444;
|
||||
}
|
||||
|
||||
#playlistslist li:nth-of-type(even) {
|
||||
background-color: #333;
|
||||
background-color:#333;
|
||||
}
|
||||
|
||||
#volumecontainer {
|
||||
margin-top: 3px;
|
||||
margin-top:3px;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
padding: 9px 0;
|
||||
padding:9px 0;
|
||||
}
|
||||
.sidebar-nav li {
|
||||
margin-top: 20px;
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
#searchresults {
|
||||
display: none;
|
||||
display:none;
|
||||
}
|
||||
|
||||
.resultrow:hover {
|
||||
background-color: #555 !important;
|
||||
background-color:#555 !important;
|
||||
}
|
||||
.brand {
|
||||
margin-right: 20px;
|
||||
margin-right:20px;
|
||||
}
|
||||
.nav img {
|
||||
margin-top: 16px;
|
||||
margin-top:16px;
|
||||
}
|
||||
|
||||
.navbar, .navbar-inner, .container {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
div {
|
||||
/* border: 1px solid #444; */
|
||||
}
|
||||
|
||||
.breakafter {
|
||||
margin-right: 15px;
|
||||
margin-right:15px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display:none;
|
||||
display:none;
|
||||
}
|
||||
|
||||
.currenttrack {
|
||||
font-weight: bold;
|
||||
background-image: url('../img/icons/play_alt_16x16.png');
|
||||
background-repeat:no-repeat;
|
||||
padding-left: 20px;
|
||||
font-weight:bold;
|
||||
background-image:url('../img/icons/play_alt_16x16.png');
|
||||
background-repeat:no-repeat;
|
||||
padding-left:20px;
|
||||
}
|
||||
|
||||
#songinfo {
|
||||
overflow: hidden;
|
||||
margin-top: 5px;
|
||||
/* border: 1px solid white; */
|
||||
overflow:hidden;
|
||||
margin-top:5px;
|
||||
/* border: 1px solid white; */
|
||||
}
|
||||
|
||||
#infoname {
|
||||
overflow: hidden;
|
||||
font: bold;
|
||||
color: #ddd;
|
||||
font-size: 14px;
|
||||
text-shadow: 1px 1px #555;
|
||||
/* border: 1px solid white; */
|
||||
overflow:hidden;
|
||||
font:bold;
|
||||
color:#ddd;
|
||||
font-size:14px;
|
||||
text-shadow:1px 1px #555;
|
||||
/* border: 1px solid white; */
|
||||
}
|
||||
|
||||
#infoartist {
|
||||
overflow: hidden;
|
||||
color: #aaa;
|
||||
font-size: 11px;
|
||||
text-shadow: 1px 1px #333;
|
||||
overflow:hidden;
|
||||
color:#aaa;
|
||||
font-size:11px;
|
||||
text-shadow:1px 1px #333;
|
||||
}
|
||||
|
||||
#playlistpane {
|
||||
visibility: hidden;
|
||||
visibility:hidden;
|
||||
}
|
||||
|
||||
BIN
img/icons/pause_32x32.png
Normal file
BIN
img/icons/pause_32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 179 B |
BIN
img/icons/play_32x32.png
Normal file
BIN
img/icons/play_32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 306 B |
223
index.html
223
index.html
@ -4,90 +4,83 @@
|
||||
<meta http-equiv="imagetoolbar" content="no" />
|
||||
<meta content="true" name="MSSmartTagsPreventParsing" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=9" />
|
||||
|
||||
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0, user-scalable = no" />
|
||||
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0, user-scalable = no" />
|
||||
<!-- <meta name="viewport" content="width=device-width, user-scalable=no"> -->
|
||||
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> -->
|
||||
|
||||
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
|
||||
<link rel="apple-touch-icon" href="img/icons/headphones_32x28.png" />
|
||||
|
||||
<script src="js/html5slider.js"></script>
|
||||
|
||||
<script src="js/html5slider.js"></script>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title>Mopidy</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Wouter van Wijk">
|
||||
<meta name="copyright" content="(c) 2012 Wouter van Wijk" />
|
||||
<meta name="copyright" content="(c) 2012/2013 Wouter van Wijk" />
|
||||
<!-- Styles -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="css/bootstrap-responsive.css" rel="stylesheet">
|
||||
<link href="css/ws.css" rel="stylesheet">
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="/mopidy/mopidy.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container-fluid">
|
||||
<a type="button" class="btn btn-navbar" style="margin-left: 5px" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<img src="img/icons/arrow_down_16x16.png" /></a>
|
||||
<div class="nav pull-right" id="mainmenu">
|
||||
<a href="#playlists"><img src="img/icons/list_nested_24x21.png" /><div class="nav-collapse menutext nobreak hidden-phone"> Playlists</div></a>
|
||||
<a href="#current"><img src="img/icons/list_24x21.png" /><div class="nav-collapse nobreak menutext hidden-phone"> Queue</div></a>
|
||||
<a href="#search"><img src="img/icons/magnifying_glass_24x24.png" /><div class="nav-collapse nobreak menutext hidden-phone"> Search</div></a>
|
||||
</div>
|
||||
<div id="controlbt" class="nav span2">
|
||||
<span><a href="#" onclick="doPrevious(); return false"><img src="img/icons/first_16x16.png" alt="Previous Track" /></a></span>
|
||||
<span id="playpause"><a href="#" onclick="doPlayPause(); return false"><img src="img/icons/pause_18x24.png" style="margin-top: 8px;" alt="Play" id="playbt" /></a></span>
|
||||
<span><a href="#" onclick="doNext(); return false"><img src="img/icons/last_16x16.png" alt="Next Track" class="breakafter" /></a></span>
|
||||
</div>
|
||||
<div class="nav nav-collapse span2">
|
||||
<a href="#" onclick="doShuffle(); return false"><img src="img/icons/loop_alt2_16x14.png" alt="" id="shufflebt" /></a>
|
||||
<a href="#" onclick="doRepeat(); return false"><img src="img/icons/reload_12x14.png" id="repeatbt" alt="" /></a>
|
||||
<a href="#" onclick="doMute(); return false;"><img id="mutebt" src="img/icons/volume_16x12.png" alt="" /></a>
|
||||
<!-- <a href="#plus" class="dropdown-toggle" data-toggle="dropdown"><img src="img/icons/plus_12x12.png" alt="" /></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="#buttonGroups">Add to playlist</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#buttonDropdowns">Favorite Song</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#buttonDropdowns">Favorite Album</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#buttonDropdowns">Favorite Artist</a>
|
||||
</li>
|
||||
</ul>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div id="songinfo" class="nav nav-collapse span5" onclick="expandSonginfo();">
|
||||
<span class="nav nav-collapse span5" id="infoname"></span>
|
||||
<br/>
|
||||
<span class="nav nav-collapse span5" id="infoartist"></span>
|
||||
<br/>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- songinfo -->
|
||||
|
||||
</div><!-- /container -->
|
||||
<div class="nav-collapse" id="slidercontainer">
|
||||
<span id="songelapsed">0:00</span>
|
||||
<input id="trackslider" type="range" onmousedown="pauseTimer();" onchange="doSeekPos(this.value);" class="nobreak" />
|
||||
<span id="songlength" class="pull-right">0:00</span>
|
||||
<div class="navbar-inner">
|
||||
<div class="container-fluid">
|
||||
<a type="button" class="btn btn-navbar" style="margin-left: 5px" data-toggle="collapse" data-target=".nav-collapse"> <img src="img/icons/arrow_down_16x16.png" /></a>
|
||||
<div class="nav pull-right" id="mainmenu">
|
||||
<a href="#playlists"><img src="img/icons/list_nested_24x21.png" />
|
||||
<div class="nav-collapse menutext nobreak hidden-phone">
|
||||
Playlists
|
||||
</div></a>
|
||||
<a href="#current"><img src="img/icons/list_24x21.png" />
|
||||
<div class="nav-collapse nobreak menutext hidden-phone">
|
||||
Queue
|
||||
</div></a>
|
||||
<a href="#search"><img src="img/icons/magnifying_glass_24x24.png" />
|
||||
<div class="nav-collapse nobreak menutext hidden-phone">
|
||||
Search
|
||||
</div></a>
|
||||
</div>
|
||||
<div id="controlbt" class="nav span2">
|
||||
<span><a href="#" onclick="doPrevious(); return false"><img src="img/icons/first_16x16.png" alt="Previous Track" /></a></span>
|
||||
<span id="playpause"><a href="#" onclick="doPlayPause(); return false"><img src="img/icons/pause_18x24.png" alt="Play" id="playbt" /></a></span>
|
||||
<span><a href="#" onclick="doNext(); return false"><img src="img/icons/last_16x16.png" alt="Next Track" class="breakafter" /></a></span>
|
||||
</div>
|
||||
<div class="nav nav-collapse span2">
|
||||
<a href="#" onclick="doRandom(); return false"><img src="img/icons/loop_alt2_16x14.png" alt="" id="randombt" /></a>
|
||||
<a href="#" onclick="doRepeat(); return false"><img src="img/icons/reload_12x14.png" id="repeatbt" alt="" /></a>
|
||||
<a href="#" onclick="doMute(); return false;"><img id="mutebt" src="img/icons/volume_16x12.png" alt="" /></a>
|
||||
<!-- <a href="#plus" class="dropdown-toggle" data-toggle="dropdown"><img src="img/icons/plus_12x12.png" alt="" /></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="#buttonGroups">Add to playlist</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#buttonDropdowns">Favorite Song</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#buttonDropdowns">Favorite Album</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#buttonDropdowns">Favorite Artist</a>
|
||||
</li>
|
||||
</ul>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div id="songinfo" class="nav nav-collapse span5" onclick="expandSonginfo();">
|
||||
<span class="nav nav-collapse span5" id="infoname"></span>
|
||||
<br/>
|
||||
<span class="nav nav-collapse span5" id="infoartist"></span>
|
||||
<br/>
|
||||
</div>
|
||||
|
||||
</div><!-- /container -->
|
||||
<div class="nav-collapse" id="slidercontainer">
|
||||
<span id="songelapsed">0:00</span>
|
||||
<input id="trackslider" type="range" onmousedown="pauseTimer();" onchange="doSeekPos(this.value);" class="nobreak" />
|
||||
<span id="songlength" class="pull-right">0:00</span>
|
||||
</div>
|
||||
|
||||
</div><!-- /.navbar-inner -->
|
||||
</div><!-- /.navbar -->
|
||||
@ -143,9 +136,9 @@
|
||||
<div class="span11 content" id="albumspane">
|
||||
<div class="row-fluid">
|
||||
<div>
|
||||
<h4>Album</h4>
|
||||
<h3 id="h_albumname"></h3>
|
||||
<h5 id="h_albumartist"></h5>
|
||||
<h4>Album</h4>
|
||||
<h3 id="h_albumname"></h3>
|
||||
<h5 id="h_albumartist"></h5>
|
||||
<p>
|
||||
<ul id="albumslist"></ul>
|
||||
</p>
|
||||
@ -194,8 +187,8 @@
|
||||
<input id="searchinput" onkeypress="return searchPressed(event.keyCode);" type="text" class="search-query" placeholder="Search..." />
|
||||
</form>
|
||||
|
||||
<img src="img/loader.gif" id="allresultloader" class= "loader" />
|
||||
|
||||
<img src="img/loader.gif" id="allresultloader" class= "loader" />
|
||||
|
||||
<div id="searchresults">
|
||||
<div class="span5" id="searchartists">
|
||||
<h4>Artists</h4>
|
||||
@ -205,58 +198,62 @@
|
||||
</div>
|
||||
<div class="span5" id="searchalbums">
|
||||
<h4>Albums</h4>
|
||||
<table class="table table-striped">
|
||||
<tbody id="albumresulttable"></tbody>
|
||||
</table>
|
||||
<table class="table table-striped">
|
||||
<tbody id="albumresulttable"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="span10" style="text-align: center" id="expandsearch">
|
||||
<a href="#" onclick="toggleSearch(); return false;"><img src="img/icons/arrow_down_16x16.png"></a>
|
||||
</div>
|
||||
<div class="span10" style="text-align: center" id="expandsearch"><a href="#" onclick="toggleSearch(); return false;"><img src="img/icons/arrow_down_16x16.png"></a></div>
|
||||
<div class="span11" id="searchtracks">
|
||||
<h4>Tracks</h4>
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Artist</th>
|
||||
<th>Album</th>
|
||||
<th>Length</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="trackresulttable"></tbody>
|
||||
</table>
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Artist</th>
|
||||
<th>Album</th>
|
||||
<th>Length</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="trackresulttable"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- search div -->
|
||||
</div>
|
||||
<!-- search div -->
|
||||
|
||||
</div><!--/row fluid-->
|
||||
</div><!--/.fluid-container-->
|
||||
|
||||
<div id="offlinemodal" class="modal hide fade">
|
||||
<div class="modal-header">
|
||||
<h3>Offline</h3>
|
||||
<div id="offlinemodal" class="modal hide fade">
|
||||
<div class="modal-header">
|
||||
<h3>Offline</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
Cannot connect to the server. Please wait...
|
||||
<br/>
|
||||
<br/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
<img src="img/loader.gif" id="offlinemodalloader" class="loader" />
|
||||
Cannot connect to the server... <br/>Please wait.
|
||||
<br/><br/>
|
||||
</p>
|
||||
|
||||
<div id="loadingmodal" class="modal hide fade">
|
||||
<div class="modal-header">
|
||||
<h3>Loading data...</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
Getting data from the server. Please wait...
|
||||
<br/>
|
||||
<br/>
|
||||
This could take a while (Too much of a while actually. Will be fixed...)
|
||||
<br/>
|
||||
<br/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="loadingmodal" class="modal hide fade">
|
||||
<div class="modal-header">
|
||||
<h3>Loading data...</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
<img src="img/loader.gif" id="loadingmodalloader" class="loader" />
|
||||
Getting data from the server... <br/><br/>
|
||||
Please wait.<br/><br/>
|
||||
This could take a while (Too much of a while actually. Will be fixed...)
|
||||
<br/><br/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Le javascript
|
||||
================================================== -->
|
||||
|
||||
@ -14,7 +14,7 @@ var socket;
|
||||
|
||||
//values for controls
|
||||
var play = false;
|
||||
var shuffle;
|
||||
var random;
|
||||
var repeat;
|
||||
var currentVolume = -1;
|
||||
var muteVolume = -1;
|
||||
@ -46,25 +46,24 @@ SEARCH_TRACK_TABLE = '#trackresulttable';
|
||||
//A hack to find the name of the first artist of a playlist. this is not yet returned by mopidy
|
||||
//does not work wel with multiple artists of course
|
||||
function getArtist(pl) {
|
||||
for (var i = 0; i < pl.length; i++) {
|
||||
for (var j = 0; j < pl[i]["artists"].length; j++) {
|
||||
if (pl[i]["artists"][j]["name"] != '') {
|
||||
return pl[i]["artists"][j]["name"];
|
||||
}
|
||||
for (var i = 0; i < pl.length; i++) {
|
||||
for (var j = 0; j < pl[i]["artists"].length; j++) {
|
||||
if (pl[i]["artists"][j]["name"] != '') {
|
||||
return pl[i]["artists"][j]["name"];
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
//A hack to find the first album of a playlist. this is not yet returned by mopidy
|
||||
function getAlbum(pl) {
|
||||
for (var i = 0; i < pl.length; i++) {
|
||||
if(pl[i]["album"]["name"] != '') {
|
||||
return pl[i]["album"]["name"];
|
||||
}
|
||||
};
|
||||
for (var i = 0; i < pl.length; i++) {
|
||||
if (pl[i]["album"]["name"] != '') {
|
||||
return pl[i]["album"]["name"];
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
//process updated playlist to gui
|
||||
function playlisttotable(pl, table, uri) {
|
||||
/* <tr>
|
||||
@ -77,18 +76,18 @@ function playlisttotable(pl, table, uri) {
|
||||
tmp = '';
|
||||
$(table).empty();
|
||||
|
||||
// console.log(pl.length);
|
||||
//console.log(pl);
|
||||
for (var i = 0; i < pl.length; i++) {
|
||||
// console.log(pl[i]);
|
||||
var child = '<tr class="resultrow"><td><a href="#" class="name" id="' + pl[i]["uri"] + '">' + pl[i]["name"] + "</a></td><td>";
|
||||
for (var j = 0; j < pl[i]["artists"].length; j++) {
|
||||
//console.log(j);
|
||||
child += '<a href="#" class="artist" id="' + pl[i]["artists"][j]["uri"] + '">' + pl[i]["artists"][j]["name"] + "</a>";
|
||||
}
|
||||
child += '</td><td><a href="#" class="album" id="' + pl[i]["album"]["uri"] + '">' + pl[i]["album"]["name"] + '</a></td><td><a href="#" class="time" id="' + pl[i]["uri"] + '">' + timeFromSeconds(pl[i]["length"] / 1000) + '</a></td></tr>';
|
||||
tmp += child;
|
||||
};
|
||||
// console.log(pl.length);
|
||||
//console.log(pl);
|
||||
for (var i = 0; i < pl.length; i++) {
|
||||
// console.log(pl[i]);
|
||||
var child = '<tr class="resultrow"><td><a href="#" class="name" id="' + pl[i]["uri"] + '">' + pl[i]["name"] + "</a></td><td>";
|
||||
for (var j = 0; j < pl[i]["artists"].length; j++) {
|
||||
//console.log(j);
|
||||
child += '<a href="#" class="artist" id="' + pl[i]["artists"][j]["uri"] + '">' + pl[i]["artists"][j]["name"] + "</a>";
|
||||
}
|
||||
child += '</td><td><a href="#" class="album" id="' + pl[i]["album"]["uri"] + '">' + pl[i]["album"]["name"] + '</a></td><td><a href="#" class="time" id="' + pl[i]["uri"] + '">' + timeFromSeconds(pl[i]["length"] / 1000) + '</a></td></tr>';
|
||||
tmp += child;
|
||||
};
|
||||
$(table).html(tmp);
|
||||
$(table).attr('data', uri);
|
||||
//set click handlers
|
||||
@ -103,27 +102,25 @@ function playlisttotable(pl, table, uri) {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function getPlaylistFromUri(uri) {
|
||||
for (var i = 0; i < playlists.length; i++) {
|
||||
if(playlists[i]["uri"] == uri) {
|
||||
return playlists[i];
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < playlists.length; i++) {
|
||||
if (playlists[i]["uri"] == uri) {
|
||||
return playlists[i];
|
||||
}
|
||||
}
|
||||
|
||||
if(customPlaylists[uri]) {
|
||||
return customPlaylists[uri];
|
||||
}
|
||||
if (customPlaylists[uri]) {
|
||||
return customPlaylists[uri];
|
||||
}
|
||||
}
|
||||
|
||||
function getTracksFromUri(uri) {
|
||||
pl = getPlaylistFromUri(uri);
|
||||
if(pl) {
|
||||
return pl.tracks;
|
||||
} else if (customTracklists[uri]) {
|
||||
return customTracklists[uri];
|
||||
}
|
||||
pl = getPlaylistFromUri(uri);
|
||||
if (pl) {
|
||||
return pl.tracks;
|
||||
} else if (customTracklists[uri]) {
|
||||
return customTracklists[uri];
|
||||
}
|
||||
}
|
||||
|
||||
//convert time to human readable format
|
||||
|
||||
340
js/gui.js
340
js/gui.js
@ -13,12 +13,12 @@ function showartist(nwuri) {
|
||||
if (pl) {
|
||||
playlisttotable(pl, ARTIST_TABLE, nwuri)
|
||||
$('#h_artistname').html(getArtist(pl));
|
||||
mopidy.library.lookup(nwuri).then(handleArtistResults,console.error);
|
||||
mopidy.library.lookup(nwuri).then(processArtistResults, console.error);
|
||||
} else {
|
||||
$('#h_artistname').html('');
|
||||
$('#artistsloader').show();
|
||||
mopidy.library.lookup(nwuri).then(handleArtistResults,console.error);
|
||||
}
|
||||
mopidy.library.lookup(nwuri).then(processArtistResults, console.error);
|
||||
}
|
||||
//show
|
||||
switchContent('artists', nwuri);
|
||||
return false;
|
||||
@ -33,13 +33,13 @@ function showalbum(uri) {
|
||||
playlisttotable(pl, ALBUM_TABLE, uri)
|
||||
$('#h_albumname').html(getAlbum(pl));
|
||||
$('#h_albumartist').html(getArtist(pl));
|
||||
mopidy.library.lookup(uri).then(handleAlbumResults,console.error);
|
||||
mopidy.library.lookup(uri).then(processAlbumResults, console.error);
|
||||
} else {
|
||||
$('#h_albumname').html('');
|
||||
$('#h_albumartist').html('');
|
||||
$('#albumsloader').show();
|
||||
mopidy.library.lookup(uri).then(handleAlbumResults,console.error);
|
||||
}
|
||||
mopidy.library.lookup(uri).then(processAlbumResults, console.error);
|
||||
}
|
||||
//show
|
||||
switchContent('albums', uri);
|
||||
return false;
|
||||
@ -58,20 +58,30 @@ function resetSong() {
|
||||
}
|
||||
|
||||
function expandSonginfo() {
|
||||
|
||||
|
||||
}
|
||||
|
||||
function resizeSonginfo () {
|
||||
function resizeSonginfo() {
|
||||
$("#infoname").html(songname);
|
||||
|
||||
$("#infoartist").html(artistshtml);
|
||||
|
||||
if( (artiststext.length > 90) || ( songname.length > 60)) {
|
||||
if ((artiststext.length > 90) || (songname.length > 60)) {
|
||||
$("#infoartist").html(artiststext);
|
||||
//bug in truncate?
|
||||
var spanwidth = $("#infoartist").width() - 1;
|
||||
$("#infoname").truncate({ width: spanwidth, token: '…', center: true, multiline: false});
|
||||
$("#infoartist").truncate({ width: spanwidth, token: '…', center: true, multiline: false});
|
||||
$("#infoname").truncate({
|
||||
width : spanwidth,
|
||||
token : '…',
|
||||
center : true,
|
||||
multiline : false
|
||||
});
|
||||
$("#infoartist").truncate({
|
||||
width : spanwidth,
|
||||
token : '…',
|
||||
center : true,
|
||||
multiline : false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -90,26 +100,26 @@ function setSongInfo(data) {
|
||||
artiststext += ', ';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$("#trackslider").attr("max", data["length"]);
|
||||
$("#songlength").html(timeFromSeconds(data["length"] / 1000));
|
||||
|
||||
resizeSonginfo();
|
||||
|
||||
$('#currenttable tr .name').each(
|
||||
function() {
|
||||
//console.log(this.className);
|
||||
this.className = "name";
|
||||
if(this.id == data["uri"]) {
|
||||
this.className += ' currenttrack';
|
||||
// this.parentNode.parentNode.style.marginLeft="20px";
|
||||
}
|
||||
} );
|
||||
|
||||
$('#currenttable tr .name').each(function() {
|
||||
//console.log(this.className);
|
||||
this.className = "name";
|
||||
if (this.id == data["uri"]) {
|
||||
this.className += ' currenttrack';
|
||||
// this.parentNode.parentNode.style.marginLeft="20px";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* Toggle state of play button */
|
||||
function setPlayState(nwplay) {
|
||||
if (nwplay) {
|
||||
$("#playbt").attr('src', 'img/icons/pause_18x24.png');
|
||||
$("#playbt").attr('src', 'img/icons/pause_32x32.png');
|
||||
} else {
|
||||
$("#playbt").attr('src', 'img/icons/play_alt_32x32.png');
|
||||
}
|
||||
@ -119,30 +129,32 @@ function setPlayState(nwplay) {
|
||||
//play or pause
|
||||
function doPlayPause() {
|
||||
if (!play) {
|
||||
mopidy.playback.play().then(console.log);
|
||||
mopidy.playback.play().then();
|
||||
} else {
|
||||
mopidy.playback.pause().then(console.log);
|
||||
mopidy.playback.pause().then();
|
||||
}
|
||||
setPlayState(!play);
|
||||
}
|
||||
|
||||
/* Show tracks of playlist */
|
||||
function setPlaylist(uri) {
|
||||
$(PLAYLIST_TABLE).empty();
|
||||
$('#playlisttablediv').show();
|
||||
// $('#playlistloader').show();
|
||||
|
||||
pl = getPlaylistFromUri(uri);
|
||||
|
||||
//console.log(pl);
|
||||
playlisttotable(pl["tracks"], PLAYLIST_TABLE, uri);
|
||||
$('body,html').scrollTop($("#playlistspane").offset().top - 100);
|
||||
return false;
|
||||
$(PLAYLIST_TABLE).empty();
|
||||
$('#playlisttablediv').show();
|
||||
// $('#playlistloader').show();
|
||||
|
||||
pl = getPlaylistFromUri(uri);
|
||||
|
||||
//console.log(pl);
|
||||
playlisttotable(pl["tracks"], PLAYLIST_TABLE, uri);
|
||||
$('body,html').scrollTop($("#playlistspane").offset().top - 100);
|
||||
return false;
|
||||
}
|
||||
|
||||
/* Initialise search */
|
||||
function searchPressed(key) {
|
||||
value = $('#searchinput').val();
|
||||
// console.log(value);
|
||||
// console.log(key);
|
||||
// console.log(value);
|
||||
// console.log(key);
|
||||
switchContent('search');
|
||||
|
||||
if (key == 13) {
|
||||
@ -168,34 +180,15 @@ function initSearch(value) {
|
||||
delete customTracklists['albumresultscache'];
|
||||
delete customTracklists['trackresultscache'];
|
||||
$("#searchresults").hide();
|
||||
mopidy.library.search({any: value}).then(handleSearchResults, console.error);
|
||||
mopidy.library.search({
|
||||
any : value
|
||||
}).then(processSearchResults, console.error);
|
||||
}
|
||||
}
|
||||
|
||||
function initAlbumSearch(value) {
|
||||
if (customTracklists['albumresultscache']) { return; }
|
||||
value = $('#searchinput').val();
|
||||
mopidy.library.search({album: value}).then(handleAlbumSearchResults, console.error);
|
||||
return false;
|
||||
}
|
||||
|
||||
function initTrackSearch(value) {
|
||||
if (customTracklists['trackresultscache']) { return; }
|
||||
value = $('#searchinput').val();
|
||||
mopidy.library.search({track: value}).then(handleTrackSearchResults, console.error);
|
||||
return false;
|
||||
}
|
||||
|
||||
function initArtistSearch(value) {
|
||||
if (customTracklists['artistresultscache']) { return; }
|
||||
value = $('#searchinput').val();
|
||||
mopidy.library.search({artist: value}).then(handleArtistSearchResults, console.error);
|
||||
return false;
|
||||
}
|
||||
|
||||
function doMute() {
|
||||
//only emit the event, not the status
|
||||
|
||||
|
||||
if (muteVolume == -1) {
|
||||
$("#mutebt").attr('src', 'img/icons/volume_mute_24x18.png');
|
||||
muteVolume = currentVolume;
|
||||
@ -220,38 +213,38 @@ function setRepeat(nwrepeat) {
|
||||
repeat = nwrepeat;
|
||||
}
|
||||
|
||||
function setShuffle(nwshuffle) {
|
||||
if (shuffle == nwshuffle) {
|
||||
function setRandom(nwrandom) {
|
||||
if (random == nwrandom) {
|
||||
return
|
||||
}
|
||||
if (!nwshuffle) {
|
||||
$("#shufflebt").attr('src', 'img/icons/loop_alt2_24x21.png');
|
||||
if (!nwrandom) {
|
||||
$("#randombt").attr('src', 'img/icons/loop_alt2_24x21.png');
|
||||
} else {
|
||||
$("#shufflebt").attr('src', 'img/icons/loop_24x24.png');
|
||||
$("#randombt").attr('src', 'img/icons/loop_24x24.png');
|
||||
}
|
||||
shuffle = nwshuffle;
|
||||
random = nwrandom;
|
||||
}
|
||||
|
||||
function doPrevious() {
|
||||
// if position > one second -> go to begin, else go to previous track
|
||||
if (currentposition > 5000) {
|
||||
// if position > one second -> go to begin, else go to previous track
|
||||
if (currentposition > 5000) {
|
||||
doSeekPos(0);
|
||||
} else {
|
||||
mopidy.playback.previous();
|
||||
}
|
||||
} else {
|
||||
mopidy.playback.previous();
|
||||
}
|
||||
}
|
||||
|
||||
function doNext() {
|
||||
mopidy.playback.next();
|
||||
mopidy.playback.next();
|
||||
}
|
||||
|
||||
function doShuffle() {
|
||||
if (shuffle == false) {
|
||||
function doRandom() {
|
||||
if (random == false) {
|
||||
mopidy.playback.setRandom(true);
|
||||
} else {
|
||||
mopidy.playback.setRandom(false);
|
||||
}
|
||||
setShuffle(!shuffle);
|
||||
setRandom(!random);
|
||||
}
|
||||
|
||||
function doRepeat() {
|
||||
@ -266,8 +259,8 @@ function doRepeat() {
|
||||
function doVolume(value) {
|
||||
console.log(value);
|
||||
if (!initgui) {
|
||||
mopidy.playback.setVolume(value);
|
||||
}
|
||||
mopidy.playback.setVolume(value);
|
||||
}
|
||||
}
|
||||
|
||||
function doSeekPos(value) {
|
||||
@ -281,18 +274,22 @@ function doSeekPos(value) {
|
||||
}
|
||||
|
||||
function triggerPos() {
|
||||
if (mopidy) {mopidy.playback.seek(val);}
|
||||
if(play) { resumeTimer();}
|
||||
if (mopidy) {
|
||||
mopidy.playback.seek(val);
|
||||
}
|
||||
if (play) {
|
||||
resumeTimer();
|
||||
}
|
||||
}
|
||||
|
||||
function getPlaylists() {
|
||||
// d = new Date();
|
||||
// console.log('Getplaylists: ' + d.getMilliseconds() );
|
||||
mopidy.playlists.getPlaylists().then(handleGetplaylists, console.error);
|
||||
// d = new Date();
|
||||
// console.log('Getplaylists: ' + d.getMilliseconds() );
|
||||
mopidy.playlists.getPlaylists().then(processGetplaylists, console.error);
|
||||
}
|
||||
|
||||
function getCurrentPlaylist() {
|
||||
mopidy.tracklist.getTracks().then(handleCurrentPlaylist, console.error);
|
||||
mopidy.tracklist.getTracks().then(processCurrentPlaylist, console.error);
|
||||
}
|
||||
|
||||
function setPosition(pos) {
|
||||
@ -301,21 +298,21 @@ function setPosition(pos) {
|
||||
initgui = true;
|
||||
$("#trackslider").attr("value", currentposition);
|
||||
initgui = oldval;
|
||||
$("#songelapsed").html(timeFromSeconds(currentposition / 1000));
|
||||
$("#songelapsed").html(timeFromSeconds(currentposition / 1000));
|
||||
}
|
||||
|
||||
//update everything as if reloaded
|
||||
function updateStatusOfAll() {
|
||||
mopidy.playback.getCurrentTrack().then(currentTrackResults, console.error);
|
||||
mopidy.playback.getTimePosition().then(currentPositionResults, console.error);
|
||||
mopidy.playback.getState().then(currentStateResults, console.error);
|
||||
mopidy.playback.getCurrentTrack().then(processCurrenttrack, console.error);
|
||||
mopidy.playback.getTimePosition().then(processCurrentposition, console.error);
|
||||
mopidy.playback.getState().then(processPlaystate, console.error);
|
||||
|
||||
mopidy.playback.getRepeat().then(repeatResults, console.error);
|
||||
mopidy.playback.getRandom().then(randomResults, console.error);
|
||||
mopidy.playback.getRepeat().then(processRepeat, console.error);
|
||||
mopidy.playback.getRandom().then(processRandom, console.error);
|
||||
}
|
||||
|
||||
function initSocketevents() {
|
||||
mopidy.on("state:online", function () {
|
||||
mopidy.on("state:online", function() {
|
||||
$(window).hashchange();
|
||||
$("#offlinemodal").modal('hide');
|
||||
$("#loadingmodal").modal('show');
|
||||
@ -325,63 +322,47 @@ function initSocketevents() {
|
||||
$("#loadingmodal").modal('show');
|
||||
});
|
||||
|
||||
mopidy.on("state:offline", function () {
|
||||
mopidy.on("state:offline", function() {
|
||||
resetSong();
|
||||
$("#offlinemodal").modal('show');
|
||||
});
|
||||
|
||||
mopidy.on("event:trackPlaybackStarted", function (data) {
|
||||
mopidy.playback.getTimePosition().then(currentPositionResults, console.error);
|
||||
mopidy.on("event:trackPlaybackStarted", function(data) {
|
||||
mopidy.playback.getTimePosition().then(processCurrentposition, console.error);
|
||||
setSongInfo(data.tl_track.track);
|
||||
setPlayState(true);
|
||||
setPlayState(true);
|
||||
initTimer();
|
||||
});
|
||||
|
||||
mopidy.on("event:trackPlaybackPaused", function (data) {
|
||||
mopidy.on("event:trackPlaybackPaused", function(data) {
|
||||
setSongInfo(data.tl_track.track);
|
||||
pauseTimer();
|
||||
setPlayState(false);
|
||||
});
|
||||
|
||||
mopidy.on("event:playlistsLoaded", function (data) {
|
||||
mopidy.on("event:playlistsLoaded", function(data) {
|
||||
$("#loadingmodal").modal('show');
|
||||
getPlaylists();
|
||||
});
|
||||
|
||||
mopidy.on("event:playbackStateChanged", function (data) {
|
||||
switch (data["new_state"]){
|
||||
case "stopped":
|
||||
mopidy.on("event:playbackStateChanged", function(data) {
|
||||
switch (data["new_state"]) {
|
||||
case "stopped":
|
||||
resetSong();
|
||||
break;
|
||||
case "playing":
|
||||
mopidy.playback.getTimePosition().then(currentPositionResults, console.error);
|
||||
case "playing":
|
||||
mopidy.playback.getTimePosition().then(processCurrentposition, console.error);
|
||||
resumeTimer();
|
||||
setPlayState(true);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
mopidy.on("event:tracklistChanged", function (data) {
|
||||
mopidy.on("event:tracklistChanged", function(data) {
|
||||
getCurrentPlaylist();
|
||||
});
|
||||
|
||||
/* mopidy.on("event:trackPlaybackStopped", function (data) {
|
||||
pauseTimer();
|
||||
setPlayState(false);
|
||||
});
|
||||
|
||||
mopidy.on("event:trackPlaybackEnded", function (data) {
|
||||
pauseTimer();
|
||||
setPlayState(false);
|
||||
});
|
||||
|
||||
mopidy.on("event:trackPlaybackResumed", function (data) {
|
||||
mopidy.playback.getTimePosition().then(currentPositionResults, console.error);
|
||||
resumeTimer();
|
||||
setPlayState(true);
|
||||
});
|
||||
*/
|
||||
mopidy.on("event:seeked", function (data) {
|
||||
mopidy.on("event:seeked", function(data) {
|
||||
setPosition(parseInt(data["time_position"]));
|
||||
});
|
||||
}
|
||||
@ -390,12 +371,8 @@ function setVolume(value) {
|
||||
$("#volumeslider").attr("value", value);
|
||||
}
|
||||
|
||||
|
||||
function switchContent(divid, uri) {
|
||||
//TODO
|
||||
// History.pushState({viewpane:divid, state:uri}, divid, "?" + divid + "/" + uri);
|
||||
hash = divid;
|
||||
console.log("switchc hash:" + hash);
|
||||
if (uri) {
|
||||
hash += "/" + uri;
|
||||
}
|
||||
@ -406,92 +383,99 @@ function switchContent(divid, uri) {
|
||||
function updateTimer() {
|
||||
currentposition += 100;
|
||||
setPosition(currentposition);
|
||||
// $("#songelapsed").html(timeFromSeconds(currentposition / 1000));
|
||||
// $("#songelapsed").html(timeFromSeconds(currentposition / 1000));
|
||||
}
|
||||
|
||||
function resumeTimer () {
|
||||
function resumeTimer() {
|
||||
pauseTimer();
|
||||
posTimer = setInterval(updateTimer, 100);
|
||||
}
|
||||
|
||||
function initTimer () {
|
||||
function initTimer() {
|
||||
pauseTimer();
|
||||
setPosition(0);
|
||||
resumeTimer();
|
||||
}
|
||||
|
||||
function pauseTimer () {
|
||||
clearInterval(posTimer);
|
||||
function pauseTimer() {
|
||||
clearInterval(posTimer);
|
||||
}
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
mopidy = new Mopidy(); // Connect to server
|
||||
mopidy.on(console.log); // Log all events
|
||||
mopidy = new Mopidy();
|
||||
// Connect to server
|
||||
mopidy.on(console.log);
|
||||
// Log all events
|
||||
initSocketevents();
|
||||
|
||||
|
||||
$('.content').hide();
|
||||
$('.sidebar-nav a').bind('click', function(e) {
|
||||
var divid = $(e.target).attr('href').substr(1);
|
||||
var uri = $(divid + "table").attr('data');
|
||||
|
||||
|
||||
switchContent(divid, uri);
|
||||
});
|
||||
|
||||
resetSong();
|
||||
//TODO
|
||||
//setVolume(50);
|
||||
|
||||
//history
|
||||
// Bind an event to window.onhashchange that, when the hash changes, gets the
|
||||
// hash and adds the class "selected" to any matching nav link.
|
||||
$(window).hashchange( function(){
|
||||
var hash = location.hash.split("/");
|
||||
|
||||
//remove #
|
||||
divid = hash[0].substr(1);
|
||||
uri = hash[1];
|
||||
|
||||
switch(divid) {
|
||||
case 'current':
|
||||
break;
|
||||
case 'playlists':
|
||||
break;
|
||||
case 'search':
|
||||
$("div.searchpane input").focus();
|
||||
if (customTracklists['allresultscache'] == '') { initSearch( $('#searchinput').val() ); }
|
||||
break;
|
||||
case 'artists':
|
||||
if(uri != '') { showartist(uri);}
|
||||
break;
|
||||
case 'albums':
|
||||
if(uri != '') { showalbum(uri);}
|
||||
break;
|
||||
}
|
||||
//history
|
||||
// Bind an event to window.onhashchange that, when the hash changes, gets the
|
||||
// hash and adds the class "selected" to any matching nav link.
|
||||
$(window).hashchange(function() {
|
||||
var hash = location.hash.split("/");
|
||||
|
||||
// Set the page title based on the hash.
|
||||
document.title = divid;
|
||||
//remove #
|
||||
divid = hash[0].substr(1);
|
||||
uri = hash[1];
|
||||
|
||||
|
||||
$('.content').hide();
|
||||
$('.nav li').removeClass('active');
|
||||
$('#li' + divid).addClass('active');
|
||||
|
||||
$('#' + divid).removeClass('active');
|
||||
$('#' + divid).addClass('active');
|
||||
|
||||
$('#' + divid + 'pane').show();
|
||||
return false;
|
||||
});
|
||||
|
||||
if (location.hash.length < 2) {
|
||||
switchContent("playlists");
|
||||
switch(divid) {
|
||||
case 'current':
|
||||
break;
|
||||
case 'playlists':
|
||||
break;
|
||||
case 'search':
|
||||
$("div.searchpane input").focus();
|
||||
if (customTracklists['allresultscache'] == '') {
|
||||
initSearch($('#searchinput').val());
|
||||
}
|
||||
break;
|
||||
case 'artists':
|
||||
if (uri != '') {
|
||||
showartist(uri);
|
||||
}
|
||||
break;
|
||||
case 'albums':
|
||||
if (uri != '') {
|
||||
showalbum(uri);
|
||||
}
|
||||
break;
|
||||
}
|
||||
// $("#songinfo").resize(resizeSonginfo());
|
||||
initgui = false;
|
||||
//update gui every x seconds from mopdidy
|
||||
// setInterval(updateStatusOfAll, 5000);
|
||||
|
||||
// Set the page title based on the hash.
|
||||
document.title = divid;
|
||||
|
||||
$('.content').hide();
|
||||
$('.nav li').removeClass('active');
|
||||
$('#li' + divid).addClass('active');
|
||||
|
||||
$('#' + divid).removeClass('active');
|
||||
$('#' + divid).addClass('active');
|
||||
|
||||
$('#' + divid + 'pane').show();
|
||||
return false;
|
||||
});
|
||||
|
||||
if (location.hash.length < 2) {
|
||||
switchContent("playlists");
|
||||
}
|
||||
// $("#songinfo").resize(resizeSonginfo());
|
||||
initgui = false;
|
||||
//update gui every x seconds from mopdidy
|
||||
// setInterval(updateStatusOfAll, 5000);
|
||||
});
|
||||
|
||||
function backbt() {
|
||||
|
||||
181
js/ws.js
181
js/ws.js
@ -1,80 +1,94 @@
|
||||
/**
|
||||
* @author Wouter van Wijk
|
||||
*
|
||||
* communication with ws server
|
||||
* these functions communication with ws server
|
||||
*
|
||||
*/
|
||||
|
||||
//play uri, update playlist to player if needed
|
||||
/********************************************************
|
||||
* play an uri from a trackslist or the current playlist
|
||||
*********************************************************/
|
||||
function playtrack(uri, playlisturi) {
|
||||
trackslist = new Array();
|
||||
// console.log('play uri:' + uri);
|
||||
// console.log('playlist uri:' + playlisturi);
|
||||
var track;
|
||||
switchContent('current', uri);
|
||||
tracks = getTracksFromUri(playlisturi);
|
||||
if (tracks) {
|
||||
$(CURRENT_PLAYLIST_TABLE).empty();
|
||||
mopidy.tracklist.clear();
|
||||
mopidy.tracklist.add(tracks);
|
||||
// console.log(tracks);
|
||||
} else {
|
||||
tracks = currentplaylist;
|
||||
}
|
||||
for (var i = 0; i < tracks.length; i++) {
|
||||
if(tracks[i].uri == uri) {
|
||||
switchContent('current', uri);
|
||||
tracks = getTracksFromUri(playlisturi);
|
||||
if (tracks) {
|
||||
$(CURRENT_PLAYLIST_TABLE).empty();
|
||||
mopidy.tracklist.clear();
|
||||
mopidy.tracklist.add(tracks);
|
||||
} else {
|
||||
tracks = currentplaylist;
|
||||
}
|
||||
for (var i = 0; i < tracks.length; i++) {
|
||||
if (tracks[i].uri == uri) {
|
||||
track = i + 1;
|
||||
}
|
||||
}
|
||||
// console.log(pl.tracks);
|
||||
}
|
||||
}
|
||||
console.log(track);
|
||||
|
||||
mopidy.playback.stop(true);
|
||||
for (var i = 0; i < track; i++) {
|
||||
mopidy.playback.next();
|
||||
}
|
||||
mopidy.playback.play();
|
||||
//(track);
|
||||
return false;
|
||||
mopidy.playback.stop(true);
|
||||
for (var i = 0; i < track; i++) {
|
||||
mopidy.playback.next();
|
||||
}
|
||||
mopidy.playback.play();
|
||||
//(track);
|
||||
return false;
|
||||
}
|
||||
|
||||
function currentTrackResults (data) {
|
||||
//modify results for songinfo
|
||||
// var tr = new Object();
|
||||
// tr["track"] = data;
|
||||
/********************************************************
|
||||
* process results of a (new) currently playing track
|
||||
*********************************************************/
|
||||
function processCurrenttrack(data) {
|
||||
setSongInfo(data);
|
||||
}
|
||||
|
||||
function repeatResults (data) {
|
||||
/********************************************************
|
||||
* process results of a repeat
|
||||
*********************************************************/
|
||||
function processRepeat(data) {
|
||||
setRepeat(data);
|
||||
}
|
||||
|
||||
function randomResults (data) {
|
||||
setShuffle(data);
|
||||
/********************************************************
|
||||
* process results of random
|
||||
*********************************************************/
|
||||
function processRandom(data) {
|
||||
setRandom(data);
|
||||
}
|
||||
|
||||
function currentPositionResults (data) {
|
||||
pos = parseInt(data);
|
||||
setPosition(pos);
|
||||
console.log('pos:' + pos);
|
||||
/********************************************************
|
||||
* process results of current position
|
||||
*********************************************************/
|
||||
function processCurrentposition(data) {
|
||||
pos = parseInt(data);
|
||||
setPosition(pos);
|
||||
console.log('pos:' + pos);
|
||||
}
|
||||
|
||||
function currentStateResults (data) {
|
||||
/********************************************************
|
||||
* process results playstate
|
||||
*********************************************************/
|
||||
function processPlaystate(data) {
|
||||
console.log(data);
|
||||
if(data == 'playing') {
|
||||
setPlayState(true);
|
||||
resumeTimer();
|
||||
} else {
|
||||
setPlayState(false);
|
||||
}
|
||||
if (data == 'playing') {
|
||||
setPlayState(true);
|
||||
resumeTimer();
|
||||
} else {
|
||||
setPlayState(false);
|
||||
}
|
||||
}
|
||||
|
||||
//process results of list of playlists of the user
|
||||
function handleGetplaylists(resultArr) {
|
||||
/********************************************************
|
||||
* process results of list of playlists of the user
|
||||
*********************************************************/
|
||||
function processGetplaylists(resultArr) {
|
||||
/*<p><ul><li>Donec id elit non mi porta</li><li>Gravida at eget metus. Fusce dapibus.</li><li>Tellus ac cursus commodo</li></p>
|
||||
<p><a class="btn" href="#">More »</a></p>
|
||||
*/
|
||||
if ((!resultArr) || (resultArr == '') ) { return; }
|
||||
if ((!resultArr) || (resultArr == '')) {
|
||||
return;
|
||||
}
|
||||
playlists = resultArr;
|
||||
tmp = '';
|
||||
for (var i = 0; i < playlists.length; i++) {
|
||||
@ -87,8 +101,10 @@ function handleGetplaylists(resultArr) {
|
||||
$("#loadingmodal").modal('hide');
|
||||
}
|
||||
|
||||
//process results of a returned playlist
|
||||
function handlePlaylist(resultArr) {
|
||||
/********************************************************
|
||||
* process results of a returned playlist
|
||||
*********************************************************/
|
||||
function processSinglePlaylist(resultArr) {
|
||||
//cache
|
||||
newplaylisturi = resultArr["uri"];
|
||||
playlists[newplaylisturi] = resultArr;
|
||||
@ -96,14 +112,19 @@ function handlePlaylist(resultArr) {
|
||||
$('#playlistloader').hide();
|
||||
}
|
||||
|
||||
//process results of a returned playlist
|
||||
function handleCurrentPlaylist(resultArr) {
|
||||
/********************************************************
|
||||
* process results of a returned playlist
|
||||
*********************************************************/
|
||||
function processCurrentPlaylist(resultArr) {
|
||||
currentplaylist = resultArr;
|
||||
playlisttotable(resultArr, CURRENT_PLAYLIST_TABLE);
|
||||
mopidy.playback.getCurrentTrack().then(currentTrackResults, console.error);
|
||||
}
|
||||
|
||||
function handleSearchResults(resultArr) {
|
||||
/********************************************************
|
||||
* process results of a search
|
||||
*********************************************************/
|
||||
function processSearchResults(resultArr) {
|
||||
$(SEARCH_TRACK_TABLE).empty();
|
||||
$(SEARCH_ARTIST_TABLE).empty();
|
||||
$(SEARCH_ALBUM_TABLE).empty();
|
||||
@ -115,60 +136,54 @@ function handleSearchResults(resultArr) {
|
||||
var artists = resultArr[1].artists;
|
||||
var child = '';
|
||||
|
||||
|
||||
for (var i = 0; i < artists.length; i++) {
|
||||
child += '<tr class="resultrow';
|
||||
if (i > 4) {
|
||||
child += " hidden";
|
||||
}
|
||||
child += '"><td><a href="#" onclick="return showartist(this.id, uri)" id="' + artists[i]["uri"] + '">' + artists[i]["name"] + "</a></td></tr>";
|
||||
child += '<tr class="resultrow';
|
||||
if (i > 4) {
|
||||
child += " hidden";
|
||||
}
|
||||
child += '"><td><a href="#" onclick="return showartist(this.id, uri)" id="' + artists[i]["uri"] + '">' + artists[i]["name"] + "</a></td></tr>";
|
||||
}
|
||||
$(SEARCH_ARTIST_TABLE).html(child);
|
||||
|
||||
|
||||
child = '';
|
||||
var albums = resultArr[1].albums;
|
||||
|
||||
|
||||
for (var i = 0; i < albums.length; i++) {
|
||||
child += '<tr class="resultrow';
|
||||
if (i > 4) {
|
||||
child += " hidden";
|
||||
}
|
||||
child += '"><td><a href="#" onclick="return showalbum(this.id, uri)" id="' + albums[i]["uri"] + '">' + albums[i]["name"] + "</a></td><td>";
|
||||
for (var j = 0; j < albums[i].artists.length; j++) {
|
||||
//console.log(j);
|
||||
child += '<a href="#" onclick="return showartist(this.id, uri)" id="' + albums[i].artists[j]["uri"] + '">' + albums[i].artists[j]["name"] + "</a>";
|
||||
}
|
||||
child += '</td></tr>';
|
||||
child += '<tr class="resultrow';
|
||||
if (i > 4) {
|
||||
child += " hidden";
|
||||
}
|
||||
child += '"><td><a href="#" onclick="return showalbum(this.id, uri)" id="' + albums[i]["uri"] + '">' + albums[i]["name"] + "</a></td><td>";
|
||||
for (var j = 0; j < albums[i].artists.length; j++) {
|
||||
//console.log(j);
|
||||
child += '<a href="#" onclick="return showartist(this.id, uri)" id="' + albums[i].artists[j]["uri"] + '">' + albums[i].artists[j]["name"] + "</a>";
|
||||
}
|
||||
child += '</td></tr>';
|
||||
}
|
||||
$(SEARCH_ALBUM_TABLE).html(child);
|
||||
|
||||
/* playlisttotable(resultArr[1].albums, SEARCH_ALBUM_TABLE, 'albumresultscache');
|
||||
customTracklists['albumresultscache'] = resultArr[1].albums;
|
||||
$('#albumresultloader').hide();
|
||||
playlisttotable(resultArr[1].artists, SEARCH_ARTIST_TABLE, 'artistresultscache');
|
||||
customTracklists['artistresultscache'] = resultArr[1].artists;
|
||||
*/
|
||||
$('#expandsearch').show();
|
||||
|
||||
$('#allresultloader').hide();
|
||||
}
|
||||
|
||||
function handleArtistResults(resultArr) {
|
||||
// console.log(resultArr.tracks);
|
||||
// console.log(resultArr);
|
||||
/********************************************************
|
||||
* process results of an artist lookup
|
||||
*********************************************************/
|
||||
function processArtistResults(resultArr) {
|
||||
customTracklists[resultArr["uri"]] = resultArr;
|
||||
playlisttotable(resultArr, ARTIST_TABLE, resultArr["uri"]);
|
||||
$('#h_artistname').html(getArtist(resultArr));
|
||||
$('#artistsloader').hide();
|
||||
}
|
||||
|
||||
function handleAlbumResults(resultArr) {
|
||||
//console.log(resultArr.tracks);
|
||||
//console.log(resultArr);
|
||||
/********************************************************
|
||||
* process results of an album lookup
|
||||
*********************************************************/
|
||||
function processAlbumResults(resultArr) {
|
||||
customTracklists[resultArr["uri"]] = resultArr;
|
||||
playlisttotable(resultArr, ALBUM_TABLE, resultArr["uri"]);
|
||||
$('#h_albumname').html(getAlbum(resultArr));
|
||||
//$('#h_albumartist').html('<a href="#" onclick="return showartist(this.id, uri)" id="' + resultArr["uri"] + '">' + getArtist(resultArr) + '</a>');
|
||||
$('#h_albumartist').html(getArtist(resultArr));
|
||||
$('#albumsloader').hide();
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user