mopidy-musicbox-webclient/mopidy_musicbox_webclient/static/index.html
jcass c132f9b5df fix:Replace Javascript dialogs and buttons with jQuery Mobile equivalents.
Use 'm3u' format for saving playlists. Invalidate the playlist cache on refresh or external changes.

Replace links with buttons and text with icons.

Fixes #113. Fixes #173. Fixes #177.
2016-02-29 20:35:32 +02:00

536 lines
23 KiB
HTML

<!DOCTYPE html>
<html manifest="mb.appcache">
<head>
<title>Musicbox</title>
<meta charset="utf-8">
<script type="text/javascript" src="vendors/jquery/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendors/jquery_mobile_flat_ui_theme/jquery.mobile.flatui.min.css"/>
<script>
//configuration
var isMusicBox = '{{musicbox}}' == 'True'; // Remove MusicBox only content (e.g. settings, system pages)
var websocketUrl = ('{{useWebsocketUrl}}' == 'True') ? '{{websocket_url}}' : ''
var hasAlarmClock = '{{alarmclock}}' == 'True'; // Add Alarm Clock icons
$(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" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<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, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="imagetoolbar" content="no" />
<meta content="true" name="MSSmartTagsPreventParsing" />
<meta http-equiv="cleartype" content="on" />
<script src="vendors/jquery_mobile/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-2016 Wouter van Wijk" />
<link rel="stylesheet" type="text/css" href="css/webclient.css" />
<link rel="stylesheet" type="text/css" href="vendors/font_awesome/css/font-awesome.min.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="navhome" data-icon="false">
<a href="#home" onclick="switchContent('home' ); return false;">
<span class="navtxt"> Home </span><i class="fa fa-home"></i></a>
</li>
<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="navcurrent" data-icon="false">
<a href="#current" onclick="switchContent('current' ); return false;">
<span class="navtxt">Queue </span><i class="fa fa-bars"></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="navstream" data-icon="false">
<a href="#stream" onclick="switchContent('stream' ); return false;">
<span class="navtxt">Streams </span><i class="fa fa-rss"></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="navAlarmClock" data-icon="false">
<a href="/alarmclock/">
<span class="navtxt"> Alarm Clock </span><i class="fa fa-clock-o"></i></a>
</li>
<li id="navToggleFullscreen" data-icon="false">
<a href="#">
<span class="navtxt" id="toggletxt"> 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 data-icon="false">
<div><!-- slider for volume -->
<a href="#" onclick="doMute(); return false;"><span title="Toggle mute"><i id="mutebt" class="fa fa-volume-up"></i></span></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"/>
</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="" alt="Album cover"/></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">&nbsp;</h4>
<a href="#" onclick="closePopups();"><img id="artistpopupimage" src="" alt="Album artist"/></a>
</div>
<div data-role="popup" data-transition="none" data-theme="c" id="popupBrowse">
<div data-role="collapsible-set">
<ul data-role="listview" data-icon="false" id="popupBrowseLv">
<li>
<a href="#" onclick="return playBrowsedTracks(PLAY_ALL);">Play All</a>
</li>
<li>
<a href="#" onclick="return playBrowsedTracks(PLAY_NOW);">Play <span class="popupTrackName"></span></a>
</li>
<li class="addqueue">
<a href="#" onclick="return playBrowsedTracks(PLAY_NEXT);">Play Track Next</a>
</li>
<li class="addqueue">
<a href="#" onclick="return playBrowsedTracks(ADD_THIS_BOTTOM);">Add Track to Bottom of Queue</a>
</li>
<li class="addqueue">
<a href="#" onclick="return playBrowsedTracks(ADD_ALL_BOTTOM);">Add All to Bottom of Queue</a>
</li>
</ul>
</div>
</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>
<a href="#" onclick="return playTrack(PLAY_NOW);">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('#popupTracks')">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('#popupQueue')">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-theme="b" id="popupSave" class="popupDialog">
<form>
<p>Save current queue to a playlist.
<input id="saveinput" placeholder="Playlist name" class="span2" data-clear-btn="true"
onkeypress="return savePressed(event.keyCode);" type="text"/>
<div data-role="controlgroup" data-type="horizontal" align="center">
<button class="btn" type="button" onclick="return saveQueue();">
Ok
</button>
<button class="btn" type="button" onclick="return $('#popupSave').popup('close');">
Cancel
</button>
</div>
</form>
</div>
<!--/save queue to playlist-->
<div data-role="popup" data-theme="b" id="popupOverwrite" class="popupDialog">
<form>
<p>Overwrite existing playlist with same name?
<div data-role="controlgroup" data-type="horizontal" align="center">
<button class="btn" type="button" id="overwriteConfirmBtn">
Ok
</button>
<button class="btn" type="button" onclick="$('#popupOverwrite').popup('close'); return $('#popupSave').popup('open');">
Cancel
</button>
</div>
</form>
</div><!--/overwrite existing playlist-->
<div data-role="header" data-tap-toggle="false" id="header" data-position="fixed" class="header-breakpoint headerbtn">
<a id="headermenubtn" href="#panel"><i class="fa fa-align-justify"></i></a>
<h1 id="contentHeadline">Musicbox</h1>
<a id="headersearchbtn" href="#" onclick="switchContent('search' ); return false;" title="Search"><i class="fa fa-search"></i></a>
</div>
<!-- /header -->
<div data-role="content" id="homepane" class="pane">
<div id="homerows" class="ui-grid-a ui-responsive">
<a href="#nowPlaying" onclick="switchContent('nowPlaying' ); return false;">
<div class="ui-block-a">
<i class="fa fa-music"></i>
<h4>Now Playing</h4>
</div>
</a>
<a href="#current" onclick="switchContent('current' ); return false;">
<div class="ui-block-b">
<i class="fa fa-bars"></i>
<h4>Queue</h4>
</div>
</a>
<a href="#playlists" onclick="switchContent('playlists' ); return false;">
<div class="ui-block-a">
<i class="fa fa-star"></i>
<h4>Playlists</h4>
</div>
</a>
<a href="#browse" onclick="switchContent('browse' ); return false;">
<div class="ui-block-b">
<i class="fa fa-folder"></i>
<h4>Browse</h4>
</div>
</a>
<a href="#stream" onclick="switchContent('stream' ); return false;">
<div class="ui-block-a">
<i class="fa fa-rss"></i>
<h4>Streams</h4>
</div>
</a>
<a href="#search" onclick="switchContent('search' ); return false;">
<div class="ui-block-b">
<i class="fa fa-search"></i>
<h4>Search</h4>
</div>
</a>
<a id="homeAlarmClock" href="/alarmclock/">
<div class="ui-block-a">
<i class="fa fa-clock-o"></i>
<h4>Alarm Clock</h4>
</div>
</a>
<a id="homesettings" href="/settings/">
<div class="ui-block-b">
<i class="fa fa-gear"></i>
<h4>Settings</h4>
</div>
</a>
<a id="homeshutdown" href="system.html">
<div class="ui-block-a">
<i class="fa fa-power-off"></i>
<h4>System</h4>
</div>
</a>
</div>
</div>
<!--/homepane-->
<div id="nowPlayingpane" data-role="content" class="pane">
<img id="controlspopupimage" src="images/default_cover.png" alt="Album cover"/>
<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"></span>
<span id="songlength" class="pull-right"></span>
<label for="trackslider" disabled="disabled" class="ui-hidden-accessible">Position</label>
<input id="trackslider" name="trackslider" data-mini="true" type="range" />
</div>
</div>
<!-- /nowplaying -->
<div data-role="content" id="playlistspane" class="pane">
<div class="ui-grid-a">
<div class="ui-block-a">
<h4>Playlists</h4>
</div>
<div align="right" class="ui-block-b" data-role="controlgroup" data-type="horizontal">
<button class="btn" type="button" title="Refresh playlists" onclick="return refreshPlaylists();">
<i class="fa fa-refresh"></i>
</button>
</div>
</div>
<div class="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>
<div>
<ul class="table" id="playlisttracks"></ul>
</div>
</div>
</div>
</div>
<!--/playlistspane-->
<div data-role="content" id="browsepane" class="pane">
<h4>Browse</h4>
<h5 id="browsepath"></h5>
<ul id="browselist" class="table"></ul>
</div>
<!--/browsepane-->
<div data-role="content" class="pane" id="currentpane">
<div class="ui-grid-a">
<div class="ui-block-a">
<h4>Play Queue</h4>
</div>
<div align="right" class="ui-block-b" data-role="controlgroup" data-type="horizontal">
<button class="btn" type="button" title="Save queue to playlist" onclick="return showSavePopup();">
<i class="fa fa-floppy-o"></i>
</button>
<button class="btn" type="button" title="Clear queue" onclick="return clearQueue();">
<i class="fa fa-trash-o"></i>
</button>
</div>
</div>
<div class="ui-grid">
<ul class="table" id="currenttable"></ul>
</div>
</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" alt="Album cover"/></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" alt="Album artist"/></a>
<h3 id="h_artistname"></h3>
<ul class="table" id="artiststable"></ul>
</div>
<div data-role="content" class="pane" id="searchpane">
<h4>Search</h4>
<div class="ui-grid pl-breakpoint">
<div class="ui-block">
<form>
<p>Search for artists, albums, or specific tracks.
<select id="selectSearchService">
<!-- data-native-menu="false">
multiple="multiple" data-native-menu="false">
<option data-placeholder="true">Choose services</option> -->
</select>
<input id="searchinput" placeholder="Search term" class="span2" data-clear-btn="true"
onkeypress="return searchPressed(event.keyCode);" type="text"/>
<button class="btn" type="button" onclick="return initSearch(event.value);">
Search!
</button>
</form>
</div>
</div>
<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>
<!-- search div -->
<div data-role="content" class="pane" id="streampane">
<h4>Streams</h4>
<div class="ui-grid-a pl-breakpoint">
<div class="ui-block-a" style="padding: 5px">
<form>
<p>Play a specific stream/track and optionally save it to your favourites.
<button class="btn" type="button" onclick="return getCurrentlyPlaying();">
Get currently playing
</button>
<input id="streamuriinput" placeholder="URI" class="span2" data-clear-btn="true"
onkeypress="return streamPressed(event.keyCode);" type="text"/>
<button class="btn" type="button" onclick="return playStreamUri();">
Play
</button>
<input id="streamnameinput" placeholder="Name" class="span2" data-clear-btn="true"
onkeypress="return streamPressed(event.keyCode);" type="text"/>
<button class="btn" type="button" onclick="return addFavourite();">
Save
</button>
<br/>
</form>
</div>
<div class="ui-block-b" style="padding: 5px">
<ul id="streamuristable" class="table"></ul>
</div>
</div>
</div>
<div data-role="footer" data-tap-toggle="false" data-position="fixed" id="normalFooter">
<div class="footerControls">
<div class="songinfo" id="songinfo">
<a href="#"><div style="float: left"><img id="infocover" src="images/default_cover.png" alt="Album cover"/></div></a>
<div class="songinfo-text">
<div id="infoname"></div>
<div id="infoartist"></div>
</div>
</div>
<div class="playicon">
<a href="#" onclick="doPlay(); return false"><span id="btplay" title="Play"><i class="fa fa-play"></i></span></a>
</div>
</div>
</div>
<div data-role="footer" data-tap-toggle="false" data-position="fixed" id="nowPlayingFooter">
<div class="footerControls" style="padding-left: 10px;">
<div style="float: left;">
<a href="#" onclick="doPrevious(); return false"><span id="btprev" title="Previous"><i class="fa fa-fast-backward"></i></span></a>
<a href="#" onclick="doPlay(); return false"><span id="btplayNowPlaying" title="Play"><i class="fa fa-play"></i></span></a>
<a href="#" onclick="doNext(); return false"><span id="btnext" title="Next"><i class="fa fa-fast-forward"></i></span></a>
</div>
<div style="float: right; margin-right: 10px;">
<a href="#" onclick="doRandom(); return false"><span id="randombt" title="Random"><i class="fa fa-random"></i></span></a>
<a href="#" onclick="doRepeat(); return false"><span id="repeatbt" title="Repeat"><i class="fa fa-repeat"></i></span></a>
<a href="#" onclick="doConsume(); return false"><span id="consumebt" title="Consume"><i class="fa fa-cutlery"></i></span></a>
<a href="#" onclick="doSingle(); return false"><span id="singlebt" title="Single"><i class="fa fa-dot-circle-o"></i></span></a>
<a href="#" onclick="doShuffle(); return false"><span id="shufflebt" title="Shuffle"><i class="fa fa-arrows-v"></i></span></a>
</div>
</div>
</div>
<!-- /footer -->
</div>
<!-- /page one -->
<script type="text/javascript" src="vendors/mopidy/mopidy.min.js"></script>
<script type="text/javascript" src="vendors/jquery_cookie/jquery.cookie.js"></script>
<script type="text/javascript" src="vendors/media_progress_timer/timer.js"></script>
<script type="text/javascript" src="js/progress_timer.js"></script>
<script type="text/javascript" src="js/controls.js"></script>
<script type="text/javascript" src="js/library.js"></script>
<script type="text/javascript" src="js/functionsvars.js"></script>
<script type="text/javascript" src="js/process_ws.js"></script>
<!-- use lastfm -->
<script type="text/javascript" src="vendors/lastfm/lastfm.api.md5.js"></script>
<script type="text/javascript" src="vendors/lastfm/lastfm.api.js"></script>
<script type="text/javascript" src="vendors/lastfm/lastfm.api.cache.js"></script>
<script type="text/javascript" src="js/images.js"></script>
<script type="text/javascript" src="js/gui.js"></script>
</body>
</html>