mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2025-10-31 05:43:01 +00:00
Code Issues Releases Wiki Activity

Replaced bootstrap.bundle.min.js and jquery-3.3.1.min.js with bootstrap-native-v4.min.js

Browse Source
This commit is contained in:
jcorporation
2018-07-02 23:02:02 +01:00
parent 691b90a2c9
commit a9d4c0b5e9
7 changed files with 50 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
CMakeLists.txt
View File

@@ -41,8 +41,7 @@ install(FILES mympd.1 DESTINATION ${CMAKE_INSTALL_PREFIX}/share/man/man1)
install(FILES htdocs/index.html DESTINATION share/${PROJECT_NAME}/htdocs/)
install(FILES htdocs/player.html DESTINATION share/${PROJECT_NAME}/htdocs/)
install(FILES htdocs/js/player.min.js DESTINATION share/${PROJECT_NAME}/htdocs/js/)
install(FILES htdocs/js/bootstrap.bundle.min.js DESTINATION share/${PROJECT_NAME}/htdocs/js/)
install(FILES htdocs/js/jquery-3.3.1.min.js DESTINATION share/${PROJECT_NAME}/htdocs/js/)
install(FILES htdocs/js/bootstrap-native-v4.min.js DESTINATION share/${PROJECT_NAME}/htdocs/js/)
install(FILES htdocs/js/mpd.min.js DESTINATION share/${PROJECT_NAME}/htdocs/js/)
install(FILES htdocs/css/bootstrap.min.css DESTINATION share/${PROJECT_NAME}/htdocs/css/)
install(FILES htdocs/css/mpd.min.css DESTINATION share/${PROJECT_NAME}/htdocs/css/)

2
README.md
View File

@@ -13,7 +13,7 @@ UI Components
-------------
- Bootstrap 4: https://getbootstrap.com/
- Material Design Icons: https://material.io/tools/icons/?style=baseline
- jQuery: https://jquery.com/
- Bootstrap Native: http://thednp.github.io/bootstrap.native/
Backend
-------

35
htdocs/index.html
View File

@@ -25,11 +25,11 @@
<input id="inputSearch" type="text" class="form-control" placeholder="Search">
</form>
<div class="dropdown-divider"></div>
<a id="nav-addstream" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#addstream">Add Stream</a>
<a id="nav-addstream" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#modalAddstream">Add Stream</a>
<a id="nav-updatedb" class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'updateDB','options':[]}">Update Database</a>
<a id="nav-localplayer" class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'openLocalPlayer','options':[]}" data-toggle="dropdown">Local Player</a>
<a id="nav-settings" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#settings">Settings</a>
<a id="nav-about" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#about">About</a>
<a id="nav-localplayer" class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'openLocalPlayer','options':[]}">Local Player</a>
<a id="nav-settings" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#modalSettings">Settings</a>
<a id="nav-about" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#modalAbout">About</a>
</div>
</div>
<div class="btn-toolbar col-auto pl-0 pr-0" role="toolbar">
@@ -93,11 +93,11 @@
<div class="card hide" id="cardQueue">
<div class="card-header">
<a href="#" data-toggle="collapse" data-target="#queue-buttons" class="text-dark">Queue</a>
<a href="#" data-target="#queue-buttons" class="text-dark">Queue</a>
<span id="panel-heading-queue" class="text pull-right"></span>
</div>
<div class="card-body">
<div class="btn-toolbar collapse show card-toolbar" id="queue-buttons" role="toolbar">
<div class="btn-toolbar card-toolbar" id="queue-buttons" role="toolbar">
<div id="queue-actions" class="btn-group mr-2">
<button type="button" class="btn btn-secondary" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_SEND_SHUFFLE'}]}" title="Shuffle queue">
<span class="material-icons">shuffle</span>
@@ -105,7 +105,7 @@
<button type="button" class="btn btn-secondary" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_RM_ALL'}]}" title="Clear queue">
<span class="material-icons">clear_all</span>
</button>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#savequeue" title="Save queue">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modalSavequeue" title="Save queue">
<span class="material-icons">save</span>
</button>
</div>
@@ -195,7 +195,7 @@
</div>
<div class="card-body hide" id="cardBrowsePlaylists">
<div class="btn-toolbar collapse show card-toolbar" id="BrowsePlaylistsButtons" role="toolbar">
<div class="btn-toolbar card-toolbar" id="BrowsePlaylistsButtons" role="toolbar">
<div class="btn-group mr-2">
<button id="BrowsePlaylistsFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
<div class="dropdown-menu bg-dark px-2" id="BrowsePlaylistsFilterLetters">
@@ -250,7 +250,7 @@
<div class="card-body hide" id="cardBrowseDatabase">
<div class="btn-toolbar collapse show card-toolbar" id="BrowseDatabaseButtons" role="toolbar">
<div class="btn-toolbar card-toolbar" id="BrowseDatabaseButtons" role="toolbar">
<div class="btn-group mr-2">
<button data-href="{'cmd': 'appGoto', 'options': ['Browse','Database','Artist']}" id="btnBrowseDatabaseArtist" type="button" class="btn btn-secondary hide">&laquo; Artists</button>
</div>
@@ -309,7 +309,7 @@
</div>
<div class="card-body hide" id="cardBrowseFilesystem">
<div class="btn-toolbar collapse show card-toolbar" id="BrowseFilesystemButtons" role="toolbar">
<div class="btn-toolbar card-toolbar" id="BrowseFilesystemButtons" role="toolbar">
<div class="btn-group mr-2 pull-right">
<button data-href="{'cmd': 'addAllFromBrowse', 'options': []}" id="BrowseFilesystemAddAllSongs" class="btn btn-secondary">Add all</button>
</div>
@@ -378,7 +378,7 @@
<span id="panel-heading-search" class="text pull-right"></span>
</div>
<div class="card-body">
<div class="btn-toolbar collapse show card-toolbar" id="SearchButtons" role="toolbar">
<div class="btn-toolbar card-toolbar" id="SearchButtons" role="toolbar">
<form id="search2" role="search">
<div class="input-group mr-2">
<input type="text" class="form-control" placeholder="Search" id="searchstr2"/>
@@ -478,7 +478,7 @@
</div>
<!-- Modal -->
<div class="modal fade" id="settings" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" aria-hidden="true">
<div class="modal fade" id="modalSettings" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@@ -572,7 +572,7 @@
</div><!-- /.modal -->
<!-- Modal -->
<div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" aria-hidden="true">
<div class="modal fade" id="modalAbout" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@@ -615,7 +615,7 @@
</div><!-- /.modal -->
<!-- Modal -->
<div class="modal fade" id="addstream" tabindex="-1" role="dialog" aria-labelledby="addstreamLabel" aria-hidden="true">
<div class="modal fade" id="modalAddstream" tabindex="-1" role="dialog" aria-labelledby="addstreamLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@@ -625,7 +625,7 @@
</button>
</div>
<div class="modal-body">
<form>
<form id="addstreamFrm">
<div class="row">
<div class="form-group col-md-12">
<label class="control-label" for="streamurl">Stream URL</label>
@@ -642,7 +642,7 @@
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="savequeue" tabindex="-1" role="dialog" aria-labelledby="savequeueLabel" aria-hidden="true">
<div class="modal fade" id="modalSavequeue" tabindex="-1" role="dialog" aria-labelledby="savequeueLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@@ -668,8 +668,7 @@
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap-native-v4.min.js"></script>
<script src="js/mpd.js"></script>
</body>
</html>

2
htdocs/js/bootstrap-native-v4.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

6
htdocs/js/bootstrap.bundle.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
htdocs/js/jquery-3.3.1.min.js vendored
View File

File diff suppressed because one or more lines are too long

44
htdocs/js/mpd.js
View File

@@ -67,6 +67,12 @@ domCache.progressBar = document.getElementById('progressBar');
domCache.volumeBar = document.getElementById('volumeBar');
domCache.outputs = document.getElementById('outputs');
var modalConnectionError = new Modal(document.getElementById('modalConnectionError'));
var modalSettings = new Modal(document.getElementById('modalSettings'));
var modalAddstream = new Modal(document.getElementById('modalAddstream'));
var modalSavequeue = new Modal(document.getElementById('modalSavequeue'));
var mainMenu = new Dropdown(document.getElementById('mainMenu'));
function appPrepare() {
if (app.current.app != app.last.app || app.current.tab != app.last.tab || app.current.view != app.last.view) {
//Hide all cards + nav
@@ -261,11 +267,11 @@ function appInit() {
}
}, false);
$('#about').on('shown.bs.modal', function () {
document.getElementById('modalAbout').addEventListener('shown.bs.modal', function () {
sendAPI({"cmd": "MPD_API_GET_STATS"}, parseStats);
})
$('#settings').on('shown.bs.modal', function () {
document.getElementById('modalSettings').addEventListener('shown.bs.modal', function () {
getSettings();
document.getElementById('settingsFrm').classList.remove('was-validated');
document.getElementById('inputCrossfade').classList.remove('is-invalid');
@@ -273,20 +279,24 @@ function appInit() {
document.getElementById('inputMixrampdelay').classList.remove('is-invalid');
})
$('#addstream').on('shown.bs.modal', function () {
document.getElementById('modalAddstream').addEventListener('shown.bs.modal', function () {
document.getElementById('streamurl').focus();
})
$('#addstream form').on('submit', function (e) {
document.getElementById('addstreamFrm').addEventListener('submit', function () {
addStream();
});
$('#mainMenu').on('shown.bs.dropdown', function () {
document.getElementById('mainMenu').addEventListener('shown.bs.dropdown', function () {
var si = document.getElementById('inputSearch');
si.value = '';
si.focus();
});
document.getElementById('inputSearch').addEventListener('click', function(event) {
event.stopPropagation();
});
addFilterLetter('BrowseFilesystemFilterLetters');
addFilterLetter('BrowseDatabaseFilterLetters');
addFilterLetter('BrowsePlaylistsFilterLetters');
@@ -397,11 +407,13 @@ function appInit() {
document.getElementById('inputSearch').addEventListener('keypress', function (event) {
if ( event.which == 13 )
$('#mainMenu > a').dropdown('toggle');
mainMenu.toggle();
}, false);
document.getElementById('search').addEventListener('submit', function () {
appGoto('Search', undefined, undefined, app.current.page + '/Any Tag/' + document.getElementById('inputSearch').value);
var searchStr = document.getElementById('inputSearch').value;
appGoto('Search', undefined, undefined, app.current.page + '/Any Tag/' + searchStr);
document.getElementById('searchstr2').value = searchStr;
return false;
}, false);
@@ -446,7 +458,7 @@ function webSocketConnect() {
socket.onopen = function() {
console.log("connected");
showNotification('Connected to myMPD','','','success');
$('#modalConnectionError').modal('hide');
modalConnectionError.hide();
appRoute();
}
@@ -482,7 +494,7 @@ function webSocketConnect() {
socket.onclose = function(){
console.log('disconnected');
$('#modalConnectionError').modal('show');
modalConnectionError.show();
setTimeout(function() {
console.log('reconnect');
webSocketConnect();
@@ -1045,7 +1057,7 @@ function appendQueue(type, uri, name) {
}
function showMenu(el) {
var type = el.parentNode.parentNode.getAttribute('data-type');
/* var type = el.parentNode.parentNode.getAttribute('data-type');
var uri = el.parentNode.parentNode.getAttribute('data-uri');
if ((app.current.app == 'Browse' && app.current.tab == 'Filesystem') || app.current.app == 'Search' ||
(app.current.app == 'Browse' && app.current.tab == 'Database' && app.current.view == 'Album')) {
@@ -1077,6 +1089,7 @@ function showMenu(el) {
});
}
$(el).popover('show');
*/
}
function sendAPI(request, callback) {
@@ -1122,12 +1135,13 @@ function clickNext() {
function delQueueSong(tr,event) {
event.stopPropagation();
if ( $('#btntrashmodeup').hasClass('active') )
/* if ( $('#btntrashmodeup').hasClass('active') )
sendAPI({"cmd": "MPD_API_RM_RANGE", "data": {"start":0, "end": (tr.index() + 1)}});
else if ( $('#btntrashmodesingle').hasClass('active') )
sendAPI({"cmd": "MPD_API_RM_TRACK", "data": { "track": tr.attr('trackid')}});
else if ( $('#btntrashmodedown').hasClass('active') )
sendAPI({"cmd": "MPD_API_RM_RANGE", "data": {"start": tr.index(), "end":-1}});
*/
}
function delPlaylist(tr) {
@@ -1182,7 +1196,7 @@ function confirmSettings() {
"notificationWeb": (document.getElementById('btnnotifyWeb').classList.contains('active') ? 1 : 0),
"notificationPage": (document.getElementById('btnnotifyPage').classList.contains('active') ? 1 : 0)
}}, getSettings);
$('#settings').modal('hide');
modalSettings.hide();
} else {
document.getElementById('settingsFrm').classList.add('was-validated');
}
@@ -1226,7 +1240,7 @@ function addStream() {
if (streamUrl.value != '')
sendAPI({"cmd": "MPD_API_ADD_TRACK","data": {"uri": streamUrl.value}});
streamUrl.value = '';
$('#addstream').modal('hide');
modalAddstream.hide();
}
function saveQueue() {
@@ -1234,7 +1248,7 @@ function saveQueue() {
if (plName.value != '')
sendAPI({"cmd":"MPD_API_SAVE_QUEUE","data":{"plist": plName.value}});
plName.value = '';
$('#savequeue').modal('hide');
modalSavequeue.hide();
}
function showNotification(notificationTitle,notificationText,notificationHtml,notificationType) {