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

fix:Replace Javascript dialogs and buttons with jQuery Mobile equivalents.

Browse Source 
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.
This commit is contained in:
jcass 2016-02-22 09:37:47 +02:00
parent 27c85106b6
commit c132f9b5df
5 changed files with 131 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.rst
View File

@ -79,6 +79,9 @@ v2.2.0 (UNRELEASED)
- No longer interferes with changes to Mopidy's volume levels that are triggered externally. (Fixes: `#162 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/162>`_).
- Volume slider now works with Mopidy-ALSAMixer again. (Fixes: `#168 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/168>`_).
- Now falls back to track artist if album artist is not available for rendering cover art. (Fixes: `#128 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/128>`_).
- Replace Javascript prompt with jQuery Mobile equivalent. (Fixes: `#113 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/113>`_).
- Fix playlist refresh button. (Fixes: `#173 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/173>`_).
- Update save queue functionality to use 'm3u' format. (Fixes: `#177 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/177>`_).
v2.1.1 (2016-02-04)
-------------------

4
mopidy_musicbox_webclient/static/css/webclient.css
View File

@ -378,6 +378,10 @@
border: 1px solid #aaa;
}
.popupDialog {
padding: 10px;
}
/*dont hide clear buttons in text input */
.ui-input-clear-hidden {
display: block !important;

62
mopidy_musicbox_webclient/static/index.html
View File

@ -207,6 +207,37 @@
</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>
@ -297,8 +328,16 @@
<!-- /nowplaying -->
<div data-role="content" id="playlistspane" class="pane">
<a style="float:right; padding: 1.2em 10px" onclick="return refreshPlaylists();"><i class="fa fa-refresh"></i></a>
<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>
@ -307,9 +346,11 @@
<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-->
@ -321,11 +362,22 @@
<!--/browsepane-->
<div data-role="content" class="pane" id="currentpane">
<a style="float:right" onclick="return clearQueue();" data-role="button">Clear</a>
<a style="float:right; margin-right: 0.5em" onclick="return saveQueue();" data-role="button">Save</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> -->
<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">

66
mopidy_musicbox_webclient/static/js/controls.js vendored
View File

@ -207,39 +207,67 @@ function removeTrack() {
}
function clearQueue() {
mopidy.playback.stop();
resetSong();
mopidy.tracklist.clear();
resetSong();
mopidy.tracklist.clear().then(
resetSong()
);
return false;
}
function savePressed(key) {
if (key == 13) {
saveQueue();
return false;
}
return true;
}
function showSavePopup(){
mopidy.tracklist.getTracks().then(function(tracks) {
if (tracks.length > 0) {
$('#saveinput').val('');
$('#popupSave').popup('open');
}
});
}
function saveQueue() {
mopidy.tracklist.getTracks().then(function(tracks) {
if (tracks.length > 0) {
var plname = window.prompt("Playlist name:", "").trim();
if (plname != null && plname != "") {
mopidy.playlists.filter({"name": plname}).then(function(existing) {
var exists = false;
for (var i = 0; i < existing.length; i++) {
exists = exists || existing[i].uri.indexOf("m3u:") == 0 || existing[i].uri.indexOf("local:") == 0;
}
if (!exists || window.confirm("Overwrite existing playlist \"" + plname + "\"?")) {
mopidy.playlists.create({'name': plname, 'uri_scheme': "local"}).then(function(playlist) {
playlist.tracks = tracks;
mopidy.playlists.save({'playlist': playlist}).then();
getPlaylists();
var playlistName = $('#saveinput').val().trim();
if (playlistName != null && playlistName != "") {
getPlaylistByName(playlistName, 'm3u', false).then(function(exists) {
if (exists) {
$('#popupSave').popup('close');
$('#popupOverwrite').popup('open');
$('#overwriteConfirmBtn').click(function() {
initSave(playlistName, tracks);
});
} else {
initSave(playlistName, tracks);
}
});
}
}
});
return false;
}
function initSave(playlistName, tracks) {
$('#popupOverwrite').popup('close');
$('#popupSave').popup('close');
$('#saveinput').val('');
toast('Saving...');
mopidy.playlists.create({'name': playlistName, 'uri_scheme': "m3u"}).then(function(playlist) {
playlist.tracks = tracks;
mopidy.playlists.save({'playlist': playlist}).then();
});
}
function refreshPlaylists() {
mopidy.playlists.refresh();
mopidy.playlists.refresh().then(function() {
playlists = {};
$('#playlisttracksdiv').hide();
$('#playlistslistdiv').show();
});
return false;
}

14
mopidy_musicbox_webclient/static/js/gui.js
View File

@ -259,6 +259,20 @@ function initSocketevents() {
getPlaylists();
});
mopidy.on("event:playlistChanged", function(data) {
$('#playlisttracksdiv').hide();
$('#playlistslistdiv').show();
delete playlists[data["playlist"].uri];
getPlaylists();
});
mopidy.on("event:playlistDeleted", function(data) {
$('#playlisttracksdiv').hide();
$('#playlistslistdiv').show();
delete playlists[data["uri"]];
getPlaylists();
});
mopidy.on("event:volumeChanged", function(data) {
setVolume(data.volume);
});