93274f8993
Currently, the tracks are just listed in the table and no action can be taken on them. Eventually, the same popup menu as before or something equivalent should be added.
287 lines
16 KiB
HTML
Executable File
287 lines
16 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<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" />
|
|
<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">
|
|
$(document).bind("mobileinit", function() {
|
|
$.extend($.mobile, {
|
|
ajaxEnabled : false,
|
|
hashListeningEnabled : false,
|
|
// linkBindingEnabled: false
|
|
// buttonMarkup.hoverDelay: 100,
|
|
// buttonMarkup.corners: false
|
|
});
|
|
});
|
|
window.addEventListener('load', function() {
|
|
new FastClick(document.body);
|
|
}, false);
|
|
</script>
|
|
<script src="js/jquery.mobile-1.3.1.js"></script>
|
|
<meta http-equiv="imagetoolbar" content="no" />
|
|
<meta content="true" name="MSSmartTagsPreventParsing" />
|
|
<link rel="apple-touch-icon" href="/mopidy/favicon.png" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="description" content="">
|
|
<meta name="author" content="Wouter van Wijk">
|
|
<meta name="copyright" content="(c) 2012-2013 Wouter van Wijk" />
|
|
<link href="css/ws.css" rel="stylesheet">
|
|
<link href="css/jquery.mobile.iscrollview.css" rel="stylesheet">
|
|
|
|
<!-- <link rel="stylesheet" href="css/add2home.css"> -->
|
|
</head>
|
|
|
|
<body>
|
|
<div data-role="page" data-theme="c" id="page">
|
|
|
|
<div id="coverpopup" data-role="popup" data-theme="c">
|
|
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
|
|
<h3 id="coverpopupalbumname"></h3>
|
|
<h4 id="coverpopupartist"></h4>
|
|
<img id="coverpopupimage" src="" />
|
|
</div>
|
|
|
|
<div id="artistpopup" data-role="popup" data-theme="c">
|
|
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
|
|
<h4 id="artistpopupname">bbb</h4>
|
|
<img id="artistpopupimage" src="" />
|
|
</div>
|
|
|
|
<div id="controlsmodal" data-role="popup" data-theme="c">
|
|
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
|
|
<p id="buttons">
|
|
<a href="#" onclick="doRandom(); return false"><img src="images/icons/loop_alt2_16x14.png" alt="" id="randombt" /></a>
|
|
<a href="#" onclick="doRepeat(); return false"><img src="images/icons/reload_12x14.png" id="repeatbt" alt="" /></a>
|
|
<a href="#" onclick="doShuffle(); return false" title="Shuffle"><img src="images/icons/fork_21x24.png" id="shufflebt" alt="" /></a>
|
|
</p>
|
|
<div>
|
|
<a href="#" onclick="doMute(); return false;"><img id="mutebt" src="images/icons/volume_16x12.png" alt="" /></a>
|
|
<label for="volumeslider" class="ui-hidden-accessible">Volume</label>
|
|
<input id="volumeslider" name="volumeslider" data-mini="true" type="range" min="0" value="0" max="100" onchange="doVolume(this.value);" />
|
|
</div>
|
|
<h3 id="modalname"></h3>
|
|
<h4 id="modalartist"></h4>
|
|
<h4 id="modalalbum"></h4>
|
|
<img id="controlspopupimage" src="" />
|
|
|
|
</div>
|
|
|
|
<div data-role="popup" data-transition="none" data-theme="c" id="popupTracks">
|
|
<div data-role="collapsible-set">
|
|
<ul data-role="listview" data-icon="false" id="popupTracksLv">
|
|
<!-- <li data-role="divider">
|
|
<span id="popupTrackName"></span>
|
|
</li>
|
|
--> <li>
|
|
<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>
|
|
</li>
|
|
<li class="addqueue">
|
|
<a href="#" onclick="return playTrack(ADD_THIS_BOTTOM);">Add Track to Bottom of Queue</a>
|
|
</li>
|
|
<li class="addqueue">
|
|
<a href="#" onclick="return playTrack(ADD_ALL_BOTTOM);" id="liaddtobottom">Add all to Bottom of 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="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">
|
|
<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_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_24x24.png" alt="Next Track" /></a></span>
|
|
<span id="btcontrols"><a href="#controlsmodal" data-position-to="window" 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">
|
|
<a href="#controlsmodal" data-position-to="window" data-rel="popup">
|
|
<img id="infocover" src="images/icons/cd_32x32.png" width="36" height="36"></img> <div id="infoname"></div> <div id="infoartist"></div> </a>
|
|
</div>
|
|
|
|
<div id="slidercontainer" class="ui-block-c">
|
|
<span id="songelapsed" class="pull-left"> 0:00 </span>
|
|
<span id="songlength" class="pull-right"> 0:00 </span>
|
|
<label for="trackslider" class="ui-hidden-accessible">Position</label>
|
|
<input id="trackslider" name="trackslider" data-mini="true" type="range" onchange="doSeekPos(this.value);" />
|
|
</div>
|
|
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content" id="playlistspane" class="pane ui-grid-a pl-breakpoint">
|
|
<div class="ui-block-a scroll" id="playlistslistdiv">
|
|
<ul id="playlistslist" class="table"></ul>
|
|
</div>
|
|
<div class="ui-block-b scroll" id="playlisttracksdiv">
|
|
<ul class="table" id="playlisttracks"></ul>
|
|
<!-- <ul id="playlisttracks"></ul> -->
|
|
<!-- <ul data-role="listview" data-theme="c" data-icon="false" id="playlisttracks" data-inset="true"></ul> -->
|
|
</div>
|
|
|
|
</div><!--/playlistspane-->
|
|
|
|
<div data-role="content" class="pane" id="currentpane">
|
|
<a style="float:right" onclick="return clearQueue();" data-role="button">Clear</a><h4>Play Queue</h4>
|
|
<!-- <ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul>
|
|
<ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul> -->
|
|
<ul class="table" id="currenttable"></ul>
|
|
</div>
|
|
|
|
<div data-role="content" class="pane" id="albumspane">
|
|
<a href="#coverpopup" data-position-to="window" data-rel="popup"><img height="90" src="" id="albumviewcover" /></a>
|
|
<h3 id="h_albumname"></h3>
|
|
<h5 id="h_albumartist"></h5>
|
|
<!-- <ul data-role="listview" data-icon="false" data-inset="true" id="albumstable"></ul> -->
|
|
<ul class="table" id="albumstable"></ul>
|
|
</div>
|
|
|
|
<div data-role="content" class="pane" id="artistspane">
|
|
<!-- <h4>Artist</h4> -->
|
|
<a href="#artistpopup" data-position-to="window" data-rel="popup"><img height="90" src="" id="artistviewimage" /></a>
|
|
<h3 id="h_artistname"></h3>
|
|
<ul class="table" id="artiststable"></ul>
|
|
</div>
|
|
|
|
<div data-role="content" class="pane" id="searchpane">
|
|
<div class="">
|
|
<form>
|
|
<input id="searchinput" class="span2" data-clear-btn="true" onkeypress="return searchPressed(event.keyCode);" id="appendedInputButton" type="text" />
|
|
<button class="btn" type="button" onclick="return initSearch(event.value);" >
|
|
Search!
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
<div id="searchresults">
|
|
<div class="ui-grid-a srch-breakpoint">
|
|
<div class="ui-block-a" id="searchartists">
|
|
<div data-role="listview" data-inset="true">
|
|
<div data-role="header">
|
|
<h4>Artists</h4>
|
|
</div>
|
|
<div data-role="content">
|
|
<ul data-role="listview" id="artistresulttable"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui-block-b" id="searchalbums">
|
|
<div data-role="listview" data-inset="true">
|
|
<div data-role="header">
|
|
<h4>Albums</h4>
|
|
</div>
|
|
<div data-role="content">
|
|
<ul data-role="listview" id="albumresulttable"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- grid a -->
|
|
|
|
<div class="" id="searchtracks">
|
|
<div data-role="header">
|
|
<h4>Tracks</h4>
|
|
</div>
|
|
<div data-role="content">
|
|
<table data-role="table" data-mode="reflow" id="trackresulttable" class="ui-responsive table-stroke">
|
|
<thead>
|
|
<tr>
|
|
<th>Track</th>
|
|
<th data-priority="1">Artist</th>
|
|
<th data-priority="2">Time</th>
|
|
<th data-priority="3">Album</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- search div -->
|
|
|
|
<div data-role="footer" data-tap-toggle="false" data-position="fixed">
|
|
<div data-role="navbar" data-iconpos="left">
|
|
<ul>
|
|
<li id="navplaylists">
|
|
<a href="#playlists" onclick="switchContent('playlists' ); return false;"><img src="images/icons/list_nested_24x21.png" /> Playlists </a>
|
|
</li>
|
|
<li id="navcurrent">
|
|
<a href="#current" onclick="switchContent('current' ); return false;"><img src="images/icons/list_24x21.png" /> Queue </a>
|
|
</li>
|
|
<li id="navsearch">
|
|
<a href="#search" onclick="switchContent('search' ); return false;" ><img src="images/icons/magnifying_glass_24x24.png" /> Search </a>
|
|
</li>
|
|
</ul>
|
|
</div><!-- /navbar -->
|
|
</div><!-- /footer -->
|
|
</div>
|
|
<!-- content -->
|
|
</div><!-- /page one -->
|
|
<script type="text/javascript" src="/mopidy/mopidy.js"></script>
|
|
<script type="text/javascript" src="js/iscroll-lite.js"></script>
|
|
<!-- <script type="text/javascript" src="js/jquery.mobile.iscrollview-closure-min.js"></script> -->
|
|
|
|
<script src="js/jquery.truncate.min.js"></script>
|
|
<!-- <script type="text/javascript" src="js/add2home.js" charset="utf-8"></script> -->
|
|
<script src="js/controls.js"></script>
|
|
<script src="js/library.js"></script>
|
|
<script src="js/functionsvars.js"></script>
|
|
<script src="js/process_ws.js"></script>
|
|
|
|
<!-- use lastfm -->
|
|
<script type="text/javascript" src="js/lastfm.api.md5.js"></script>
|
|
<script type="text/javascript" src="js/lastfm.api.js"></script>
|
|
<script type="text/javascript" src="js/lastfm.api.cache.js"></script>
|
|
|
|
<script src="js/lastfm.js"></script>
|
|
|
|
<script src="js/gui.js"></script>
|
|
</body>
|
|
</html>
|