419 lines
18 KiB
HTML
419 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<!-- <html manifest="mb.manifest"> -->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="js/jquery-1.10.2.min.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css"/>
|
|
<script type='application/javascript' src='js/fastclick.js'></script>
|
|
<script>
|
|
//configuration
|
|
var wsLocation = location.host.split(':')[0] + ':6680'; //for musicbox configuration and normal operation of mopidy http. remove port from location.host before adding :6680
|
|
// var wsLocation = location.host; //for running on port 80
|
|
|
|
|
|
$(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>
|
|
<link rel="icon" type="image/gif" href="images/icons/musicbox32.gif" />
|
|
<link rel="apple-touch-icon" href="images/icons/musicbox57.png" />
|
|
<link rel="apple-touch-icon" sizes="72x72" href="images/icons/musicbox72.png" />
|
|
<link rel="apple-touch-icon" sizes="114x114" href="images/icons/musicbox114.png" />
|
|
<link rel="shortcut icon" type="image/x-icon" href="images/icons/musicbox32.gif" />
|
|
|
|
<!-- Tile icon for Win8 (144x144 + tile color) -->
|
|
<meta name="msapplication-TileImage" content="mopidy/favicon.png" />
|
|
<meta name="msapplication-TileColor" content="#eee" />
|
|
|
|
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<link rel="apple-touch-startup-image" href="images/startup.png" />
|
|
<meta name="apple-mobile-web-app-title" content="MusicBox" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="HandheldFriendly" content="True" />
|
|
<meta name="MobileOptimized" content="320" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
|
<meta name="apple-mobile-web-app-title" content="MusicBox" />
|
|
<meta http-equiv="imagetoolbar" content="no" />
|
|
<meta content="true" name="MSSmartTagsPreventParsing" />
|
|
|
|
<meta http-equiv="cleartype" content="on" />
|
|
|
|
<script src="js/jquery.mobile-1.3.2.min.js"></script>
|
|
<meta name="description" content="MusicBox" />
|
|
<meta name="author" content="Wouter van Wijk" />
|
|
<meta name="copyright" content="(c) 2012-2013 Wouter van Wijk" />
|
|
<link href="css/webclient.css" rel="stylesheet" />
|
|
<link href="css/jquery.mobile.iscrollview.css" rel="stylesheet" />
|
|
<link rel="stylesheet" href="css/font-awesome.min.css" />
|
|
|
|
<!-- <link rel="stylesheet" href="css/add2home.css"> -->
|
|
</head>
|
|
|
|
<body>
|
|
<div data-role="page" id="page" class="ui-responsive-panel" data-theme="c">
|
|
<div data-role="panel" id="panel" data-position="left" data-theme="a" data-display="reveal" data-position-fixed="true">
|
|
|
|
|
|
<ul class="ui-listview mainNav" data-role="listview" data-theme="a">
|
|
<li id="navnowPlaying" data-icon="false">
|
|
<a href="#nowPlaying" onclick="switchContent('nowPlaying' ); return false;">
|
|
<span class="navtxt"> Now Playing </span><i class="fa fa-music"></i></a>
|
|
</li>
|
|
<li id="navplaylists" data-icon="false">
|
|
<a href="#playlists" onclick="switchContent('playlists' ); return false;">
|
|
<span class="navtxt"> Playlists </span><i class="fa fa-star"></i></a>
|
|
</li>
|
|
<li id="navbrowse" data-icon="false">
|
|
<a href="#browse" onclick="switchContent('browse' ); return false;">
|
|
<span class="navtxt"> Browse </span><i class="fa fa-folder"></i></a>
|
|
</li>
|
|
<li id="navcurrent" data-icon="false">
|
|
<a href="#current" onclick="switchContent('current' ); return false;">
|
|
<span class="navtxt">Queue </span><i class="fa fa-align-left"></i></a>
|
|
</li>
|
|
<li id="navsearch" data-icon="false">
|
|
<a href="#search" onclick="switchContent('search' ); return false;">
|
|
<span class="navtxt">Search </span><i class="fa fa-search"></i></a>
|
|
</li>
|
|
<li id="navradio" data-icon="false">
|
|
<a href="#radio" onclick="switchContent('radio' ); return false;">
|
|
<span class="navtxt">Radio </span><i class="fa fa-rss"></i></a>
|
|
</li>
|
|
<li id="navEnterFullscreen" data-icon="false">
|
|
<a href="#">
|
|
<span class="navtxt"> Fullscreen </span><i class="fa fa-desktop"></i></a>
|
|
</li>
|
|
<li id="navExitFullscreen" class="hidden" data-icon="false">
|
|
<a href="#">
|
|
<span class="navtxt"> Exit Fullscreen </span><i class="fa fa-desktop"></i></a>
|
|
</li>
|
|
<li id="navSettings" data-icon="false">
|
|
<a href="/Settings">
|
|
<span class="navtxt"> Settings </span><i class="fa fa-cog"></i></a>
|
|
</li>
|
|
<li id="navshutdown" data-icon="false">
|
|
<a href="system.html">
|
|
<span class="navtxt">System </span><i class="fa fa-power-off"></i></a>
|
|
</li>
|
|
<li id="" data-icon="false">
|
|
<div><!-- slider for volume -->
|
|
<a href="#" onclick="doMute(); return false;"><i class="fa fa-volume-up" id="mutebt"></i></a>
|
|
<label for="volumeslider" class="ui-hidden-accessible">Volume</label>
|
|
<input id="volumeslider" data-highlight="true" name="volumeslider" data-mini="true" type="range" min="0"
|
|
value="0" max="100" onchange="doVolume(this.value);"/>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<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>
|
|
<a href="#" onclick="closePopups();"><img id="coverpopupimage" src=""/></a>
|
|
</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>
|
|
<a href="#" onclick="closePopups();"><img id="artistpopupimage" src=""/></a>
|
|
</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 class="popupAlbumName"></span></a>
|
|
</li>
|
|
<li id="popupArtistsLi">
|
|
<a href="#" onclick="showArtist()" class="popupArtistHref">Show Artist <span
|
|
class="popupArtistName"></span>
|
|
</a>
|
|
</li>
|
|
<div data-role="collapsible" data-icon="false" data-inset="false" class="popupArtistsDiv">
|
|
<h2>Artists</h2>
|
|
<ul data-icon="false" data-inset="false" data-role="listview" class="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 playTrackQueue();">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 class="popupAlbumName"></span></a>
|
|
</li>
|
|
<li id="popupArtistsLi">
|
|
<a href="#" onclick="showArtist()" class="popupArtistHref">Show Artist <span
|
|
class="popupArtistName"></span>
|
|
</a>
|
|
</li>
|
|
<div data-role="collapsible" data-icon="false" data-inset="false" class="popupArtistsDiv">
|
|
<h2>Artists</h2>
|
|
<ul data-icon="false" data-inset="false" data-role="listview" class="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 headerbtn">
|
|
<a href="#panel" style="margin-left: -12px; padding-top: 2px;" id="headermenubtn"><i class="fa fa-align-justify"></i></a>
|
|
<!-- <a id="headerplaylistsbtn" href="#" class="" onclick="switchContent('playlists' ); return false;">
|
|
<i class="fa fa-star"></i></a>
|
|
-->
|
|
<h1 id="contentHeadline" >Musicbox</h1>
|
|
<a id="headersearchbtn" href="#" class="ui-btn-icon-right headerbtn" onclick="switchContent('search' ); return false;">
|
|
<i class="fa fa-search"></i></a>
|
|
</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">
|
|
<div id="playlisttracksback" style="height: 30px; margin: 2px; padding-top: 2px; background-color: #aaa;"><a style="display:block; padding: 5px;" href="#" onclick="return togglePlaylists();"><i class="fa fa-arrow-circle-left"></i> Back</a></div>
|
|
<ul class="table" id="playlisttracks"></ul>
|
|
</div>
|
|
|
|
</div>
|
|
<!--/playlistspane-->
|
|
|
|
<div data-role="content" id="browsepane" class="pane">
|
|
<h3>Browse</h3>
|
|
<h4 id="browsepath"></h4>
|
|
<ul id="browselist" class="table"></ul>
|
|
</div>
|
|
<!--/browsepane-->
|
|
|
|
<div id="nowPlayingpane" data-role="content" class="pane">
|
|
|
|
|
|
<img id="controlspopupimage" src=""/>
|
|
|
|
|
|
<div class="nowPlaying-artistInfo">
|
|
<h3 id="modalname"></h3>
|
|
<p class="artistAlbumLine"><span id="modalartist"></span> - <span id="modalalbum"></span></p>
|
|
</div>
|
|
|
|
<div id="slidercontainer"><!-- slider for track position -->
|
|
<span id="songelapsed" class="pull-left"> 0:00 </span>
|
|
<span id="songlength" class="pull-right"> 0:00 </span>
|
|
<label for="trackslider" disabled="disabled" class="ui-hidden-accessible">Position</label>
|
|
<input id="trackslider" name="trackslider" data-mini="true" type="range" onchange="doSeekPos(this.value);" />
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<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>
|
|
<div id="albumstable"></div>
|
|
|
|
</div>
|
|
|
|
<div data-role="content" class="pane" id="artistspane">
|
|
<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>
|
|
|
|
<div class="" id="searchtracks">
|
|
<h4>Tracks</h4>
|
|
<ul id="trackresulttable" class="table"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- search div -->
|
|
|
|
<div data-role="content" class="pane" id="radiopane">
|
|
<h4>Radio</h4>
|
|
|
|
<div>
|
|
<ul id="radiostationstable" class="table"></ul>
|
|
<p>Add an url of a radio station stream that you want to listen to in the boxes below. The last 25 stations are saved locally (not
|
|
on the server yet). To find stations, use the Browse function with extensions like Dirble or TuneIn, the right values will appear in these boxes automatically. Or use websites like <a href="http://www.listenlive.eu/" target="_blank">Listenlive</a> or <a
|
|
href="http://www.dirble.com/" target="_blank">Dirble</a>.</p>
|
|
|
|
<form>
|
|
<input id="radiouriinput" placeholder="Playlist URI" class="span2" data-clear-btn="true"
|
|
onkeypress="return radioPressed(event.keyCode);" id="appendedInputButton" type="text"/>
|
|
<input id="radionameinput" placeholder="Name" class="span2" data-clear-btn="true"
|
|
onkeypress="return radioPressed(event.keyCode);" id="appendedInputButton" type="text"/>
|
|
<button class="btn" type="button" onclick="return addRadioUri();">
|
|
Play / Save
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div data-role="footer" data-tap-toggle="false" data-position="fixed" id="normalFooter">
|
|
<div id="songinfo" class="">
|
|
<a href="#"><img id="infocover" src="images/default_cover.png" width="36" height="36"/></a>
|
|
|
|
<div class="songinfo-text">
|
|
<div id="infoname"></div>
|
|
<div id="infoartist"></div>
|
|
</div>
|
|
</div>
|
|
<div id="controldiv" class="playPausebtn">
|
|
<a href="#" onclick="doPlay(); return false"><span id="btplay"><img src="images/icons/pause_32x32.png"
|
|
alt="Play" id="playimg"/></span></a>
|
|
</div>
|
|
</div>
|
|
<div data-role="footer" data-tap-toggle="false" data-position="fixed" id="nowPlayingFooter">
|
|
<!-- <p id="buttons">
|
|
|
|
<select name="flip-random" id="flip-random" data-role="slider" data-mini="true" >
|
|
<option value="off">Shuffle</option>
|
|
<option value="on">Shuffle</option>
|
|
</select>
|
|
<select name="flip-repeat" id="flip-repeat" data-role="slider" data-mini="true">
|
|
<option value="off">Repeat</option>
|
|
<option value="on">Repeat</option>
|
|
</select>
|
|
|
|
|
|
</p> -->
|
|
<!-- <a href="#" onclick="doShuffle(); return false" title="Shuffle"><img src="images/icons/fork_21x24.png"-->
|
|
<!--id="shufflebt" alt=""/></a>-->
|
|
|
|
<p id="buttons"' style="float:right; margin-top: 20px; margin-right: 5px;">
|
|
<a href="#" onclick="doRandom(); return false"><i class="fa fa-random" id="randombt"></i></a>
|
|
<a href="#" onclick="doRepeat(); return false"><i class="fa fa-repeat" id="repeatbt"></i></a>
|
|
<a href="#" onclick="doShuffle(); return false" title="Shuffle"><i class="fa fa-code-fork" id="shufflebt"></i></a>
|
|
</p>
|
|
|
|
<div class="nowPlayingControls" style="float:left; margin-left: 5px;">
|
|
<a href="#" onclick="doPrevious(); return false"><span id="btprev"><i class="fa fa-fast-backward"></i></span></a>
|
|
<a href="#" onclick="doPlay(); return false"><span id="btplayNowPlaying"><i class="fa fa-play"></i></span></a>
|
|
<a href="#" onclick="doNext(); return false"><span id="btnext"><i class="fa fa-fast-forward"></i></span></a>
|
|
</div>
|
|
</div>
|
|
<!-- /footer -->
|
|
|
|
|
|
</div>
|
|
<!-- /page one -->
|
|
<script type="text/javascript" src="/mopidy/mopidy.min.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.cookie.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>
|
|
<script src="js/radiostations.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>
|