1
0
mirror of https://github.com/SuperBFG7/ympd synced 2024-06-25 22:23:16 +00:00

Removed first jQuery dependencies, cleanup javascript, removed bootstrap-slider

This commit is contained in:
jcorporation 2018-06-28 23:51:24 +01:00
parent fed98f8423
commit e6fef5a174
8 changed files with 590 additions and 649 deletions

View File

@ -43,11 +43,9 @@ install(FILES htdocs/js/modernizr-custom.min.js DESTINATION share/${PROJECT_NAME
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/bootstrap-notify.min.js DESTINATION share/${PROJECT_NAME}/htdocs/js/)
install(FILES htdocs/js/bootstrap-slider.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/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/bootstrap-slider.min.css DESTINATION share/${PROJECT_NAME}/htdocs/css/)
install(FILES htdocs/css/mpd.min.css DESTINATION share/${PROJECT_NAME}/htdocs/css/)
install(DIRECTORY htdocs/assets DESTINATION share/${PROJECT_NAME}/htdocs)
install(DIRECTORY DESTINATION /var/lib/${PROJECT_NAME}/)

View File

@ -13,7 +13,6 @@ UI Components
-------------
- Bootstrap 4: https://getbootstrap.com/
- Bootstrap Notify: http://bootstrap-notify.remabledesigns.com/
- Bootstrap Slider: https://github.com/seiyria/bootstrap-slider
- Material Design Icons: https://material.io/tools/icons/?style=baseline
- jQuery: https://jquery.com/

File diff suppressed because one or more lines are too long

View File

@ -17,10 +17,6 @@ body {
background-color:#888;
}
#volumeslider {
width: 104px;
}
button {
overflow: hidden;
}
@ -36,7 +32,6 @@ button {
#counter {
font-size: 22px;
margin-top: -2px;
margin-left: 10px;
min-width: 50px;
}
@ -127,6 +122,10 @@ tbody {
font-feature-settings: 'liga';
}
.material-icons-small {
font-size: 16px;
}
main {
padding-top:20px;
}
@ -150,26 +149,16 @@ main {
overflow-x:hidden;
}
.slider-selection {
background:#28a745 !important;
}
#progressbar .slider-track {
height: 20px !important;
}
#progressbar {
#progressBar {
width:100%;
margin-top:8px;
}
#volumebar {
#volumeBar {
margin-top:2px;
width:160px;
}
.slider-handle {
visibility:hidden !important;
}
[data-notify="title"] {
font-size:120%;
}
@ -184,7 +173,7 @@ main {
#BrowseDatabaseFilterLetters > button,
#BrowsePlaylistsFilterLetters > button
{
min-width:28px;
width:28px;
}
.col-md {
@ -203,4 +192,6 @@ button.active {
color: #fff;
background-color: #28a745 !important;
border-color: #28a745 !important;
}
}

View File

@ -6,12 +6,9 @@
<meta name="description" content="myMPD - fast and lightweight MPD webclient">
<meta name="author" content="mail@jcgames.de">
<title>myMPD</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-slider.min.css" rel="stylesheet">
<link href="css/mpd.css" rel="stylesheet">
<link href="assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="apple-touch-icon" href="assets/appicon.png"/>
@ -25,7 +22,7 @@
</a>
<div class="dropdown-menu bg-dark">
<form id="search" class="px-4 py-3" role="search">
<input type="text" class="form-control" placeholder="Search">
<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>
@ -37,22 +34,22 @@
</div>
<div class="btn-toolbar col-auto pl-0 pr-0" role="toolbar">
<div class="btn-group mr-2" role="group">
<button id="btnPrev" type="button" class="btn btn-secondary pl-2 pr-2" onclick="clickPrev();;">
<span class="material-icons">skip_previous</span>
<button id="btnPrev" type="button" class="btn btn-secondary pl-2 pr-2 material-icons" onclick="clickPrev();;">
skip_previous
</button>
<button id="btnStop" type="button" class="btn btn-secondary pl-2 pr-2" onclick="clickStop();">
<span class="material-icons">stop</span>
<button id="btnStop" type="button" class="btn btn-secondary pl-2 pr-2 material-icons" onclick="clickStop();">
stop
</button>
<button id="btnPlay" type="button" class="btn btn-secondary pl-2 pr-2" onclick="clickPlay();">
<span class="material-icons">pause</span>
<button id="btnPlay" type="button" class="btn btn-secondary pl-2 pr-2 material-icons" onclick="clickPlay();">
pause
</button>
<button id="btnNext" type="button" class="btn btn-secondary pl-2 pr-2" onclick="clickNext();">
<span class="material-icons">skip_next</span>
<button id="btnNext" type="button" class="btn btn-secondary pl-2 pr-2 material-icons" onclick="clickNext();">
skip_next
</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-secondary dropdown-toggle pl-2 pr-2" type="button" data-toggle="dropdown">
<span id="volume-icon" class="material-icons">volume_up</span>
<button id="volumeIcon" class="btn btn-secondary dropdown-toggle pl-2 pr-2 material-icons" type="button" data-toggle="dropdown">
volume_up
</button>
<div class="dropdown-menu dropdown-menu-right bg-dark">
<h2 class="dropdown-header text-light">Volume: <span id="volumePrct"></span></h2>
@ -60,16 +57,16 @@
<div class="btn-group" role="group">
<input type="button" class="btn btn-secondary" value="&minus;" onclick="chVolume(-5)"/>
<div class="btn btn-secondary">
<input id="volumebar" data-slider-id="volumebar" data-slider-handle="custom" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0"/>
<input type="range" min="0" max="100" step="1" class="form-control-range" id="volumeBar">
</div>
<input type="button" class="btn btn-secondary" value="+" onclick="chVolume(5)"/>
</div>
</form>
<div class="dropdown-divider"></div>
<form id="btn-outputs-block" class="px-4 py-3"></form>
<form id="outputs" class="px-4 py-3"></form>
</div>
</div>
</div>
</div>
</nav>
</header>
<main class="container">
@ -85,7 +82,7 @@
<h4 id="album"></h4>
<div class="row">
<div class="col-8">
<input id="progressbar" data-slider-id='progressbar' data-slider-handle='custom' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0"/>
<input type="range" min="0" max="100" step="1" class="form-control-range" id="progressBar">
</div>
<div class="col-4">
<p id="counter" class="text">&nbsp;&nbsp;</p>
@ -132,13 +129,13 @@
</div>
</form>
<div id="QueuePaginationTop" class="btn-group mr-2">
<button onclick="gotoPage('prev',this,event)" id="QueuePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<button onclick="gotoPage('prev')" id="QueuePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="QueuePaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
<div class="dropdown-menu bg-dark px-2" id="QueuePaginationTopPages">
<div class="dropdown-menu bg-dark px-2 pages" id="QueuePaginationTopPages">
</div>
</div>
<button onclick="gotoPage('next',this,event)" id="QueuePaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
<button onclick="gotoPage('next')" id="QueuePaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div>
</div>
@ -164,20 +161,20 @@
</tbody>
</table>
</div>
<div class="btn-toolbar" id="queueButtonsBottom" role="toolbar">
<div class="btn-toolbar" id="QueueButtonsBottom" role="toolbar">
<div class="btn-group mr-2">
<button type="button" class="btn btn-secondary" onclick="scrollToTop()" title="To top">
<span class="material-icons">keyboard_arrow_up</span>
</button>
</div>
<div id="QueuePaginationBottom" class="btn-group mr-2 dropup">
<button onclick="gotoPage('prev',this,event)" id="QueuePaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<button onclick="gotoPage('prev')" id="QueuePaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="QueuePaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
<div class="dropdown-menu bg-dark px-2" id="QueuePaginationBottomPages">
<div class="dropdown-menu bg-dark px-2 pages" id="QueuePaginationBottomPages">
</div>
</div>
<button onclick="gotoPage('next',this,event)" id="QueuePaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
<button onclick="gotoPage('next')" id="QueuePaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div>
</div>
</div>
@ -206,13 +203,13 @@
</div>
</div>
<div id="BrowsePlaylistsPaginationTop" class="btn-group mr-2">
<button onclick="gotoPage('prev',this,event)" id="BrowsePlaylistsPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<button onclick="gotoPage('prev')" id="BrowsePlaylistsPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="BrowsePlaylistsPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
<div class="dropdown-menu bg-dark px-2" id="BrowsePlaylistsPaginationTopPages">
<div class="dropdown-menu bg-dark px-2 pages" id="BrowsePlaylistsPaginationTopPages">
</div>
</div>
<button onclick="gotoPage('next',this,event)" id="BrowsePlaylistsPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
<button onclick="gotoPage('next')" id="BrowsePlaylistsPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div>
</div>
@ -241,13 +238,13 @@
</button>
</div>
<div id="BrowsePlaylistsPaginationBottom" class="btn-group mr-2 dropup">
<button onclick="gotoPage('prev',this,event)" id="BrowsePlaylistsPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<button onclick="gotoPage('prev')" id="BrowsePlaylistsPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="BrowsePlaylistsPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
<div class="dropdown-menu bg-dark px-2" id="BrowsePlaylistsPaginationBottomPages">
<div class="dropdown-menu bg-dark px-2 pages" id="BrowsePlaylistsPaginationBottomPages">
</div>
</div>
<button onclick="gotoPage('next',this,event)" id="BrowsePlaylistsPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
<button onclick="gotoPage('next')" id="BrowsePlaylistsPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div>
</div>
</div>
@ -264,13 +261,13 @@
</div>
</div>
<div id="BrowseDatabasePaginationTop" class="btn-group mr-2">
<button onclick="gotoPage('prev',this,event)" id="BrowseDatabasePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<button onclick="gotoPage('prev')" id="BrowseDatabasePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="BrowseDatabasePaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
<div class="dropdown-menu bg-dark px-2" id="BrowseDatabasePaginationTopPages">
<div class="dropdown-menu bg-dark px-2 pages" id="BrowseDatabasePaginationTopPages">
</div>
</div>
<button onclick="gotoPage('next',this,event)" id="BrowseDatabasePaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
<button onclick="gotoPage('next')" id="BrowseDatabasePaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div>
</div>
@ -300,13 +297,13 @@
</button>
</div>
<div id="BrowseDatabasePaginationBottom" class="btn-group mr-2 dropup">
<button onclick="gotoPage('prev',this,event)" id="BrowseDatabasePaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<button onclick="gotoPage('prev')" id="BrowseDatabasePaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="BrowseDatabasePaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
<div class="dropdown-menu bg-dark px-2" id="BrowseDatabasePaginationBottomPages">
<div class="dropdown-menu bg-dark px-2 pages" id="BrowseDatabasePaginationBottomPages">
</div>
</div>
<button onclick="gotoPage('next',this,event)" id="BrowseDatabasePaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
<button onclick="gotoPage('next')" id="BrowseDatabasePaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div>
</div>
@ -323,13 +320,13 @@
</div>
</div>
<div id="BrowseFilesystemPaginationTop" class="btn-group mr-2">
<button onclick="gotoPage('prev',this,event)" id="BrowseFilesystemPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<button onclick="gotoPage('prev')" id="BrowseFilesystemPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="BrowseFilesystemPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
<div class="dropdown-menu bg-dark px-2" id="BrowseFilesystemPaginationTopPages">
<div class="dropdown-menu bg-dark px-2 pages" id="BrowseFilesystemPaginationTopPages">
</div>
</div>
<button onclick="gotoPage('next',this,event)" id="BrowseFilesystemPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
<button onclick="gotoPage('next')" id="BrowseFilesystemPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div>
</div>
@ -365,13 +362,13 @@
</button>
</div>
<div id="BrowseFilesystemPaginationBottom" class="btn-group mr-2 dropup">
<button onclick="gotoPage('prev',this,event)" id="BrowseFilesystemPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<button onclick="gotoPage('prev')" id="BrowseFilesystemPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="BrowseFilesystemPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
<div class="dropdown-menu bg-dark px-2" id="BrowseFilesystemPaginationBottomPages">
<div class="dropdown-menu bg-dark px-2 pages" id="BrowseFilesystemPaginationBottomPages">
</div>
</div>
<button onclick="gotoPage('next',this,event)" id="BrowseFilesystemPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
<button onclick="gotoPage('next')" id="BrowseFilesystemPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div>
</div>
</div>
@ -405,13 +402,13 @@
<button id="searchAddAllSongs" class="btn btn-secondary" onclick="addAllFromSearch();">Add all</button>
</div>
<div id="AearchPaginationTop" class="btn-group mr-2">
<button onclick="gotoPage('prev',this,event)" id="SearchPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<button onclick="gotoPage('prev')" id="SearchPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="SearchPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
<div class="dropdown-menu bg-dark px-2" id="SearchPaginationTopPages">
<div class="dropdown-menu bg-dark px-2 pages" id="SearchPaginationTopPages">
</div>
</div>
<button onclick="gotoPage('next',this,event)" id="SearchPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
<button onclick="gotoPage('next')" id="SearchPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div>
</div>
<div class="table-responsive-md">
@ -443,13 +440,13 @@
</button>
</div>
<div id="SearchPaginationBottom" class="btn-group mr-2 dropup">
<button onclick="gotoPage('prev',this,event)" id="SearchPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<button onclick="gotoPage('prev')" id="SearchPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="SearchPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
<div class="dropdown-menu bg-dark px-2" id="SearchPaginationBottomPages">
<div class="dropdown-menu bg-dark px-2 pages" id="SearchPaginationBottomPages">
</div>
</div>
<button onclick="gotoPage('next',this,event)" id="SearchPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
<button onclick="gotoPage('next')" id="SearchPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div>
</div>
</div>
@ -494,24 +491,24 @@
<form class="needs-validation" id="settingsFrm" novalidate>
<div class="row">
<div class="form-group col-md-6" data-toggle="buttons">
<button id="btnrandom" type="button" class="btn btn-secondary btn-block" title="Random">
<button id="btnRandom" type="button" class="btn btn-secondary btn-block" title="Random">
Random
</button>
</div>
<div class="form-group col-md-6" data-toggle="buttons">
<button id="btnconsume" type="button" class="btn btn-secondary btn-block" title="Consume">
<button id="btnConsume" type="button" class="btn btn-secondary btn-block" title="Consume">
Consume
</button>
</div>
</div>
<div class="row">
<div class="form-group col-md-6" data-toggle="buttons">
<button id="btnsingle" type="button" class="btn btn-secondary btn-block" title="Single">
<button id="btnSingle" type="button" class="btn btn-secondary btn-block" title="Single">
Single
</button>
</div>
<div class="form-group col-md-6" data-toggle="buttons">
<button id="btnrepeat" type="button" class="btn btn-secondary btn-block" title="Repeat">
<button id="btnRepeat" type="button" class="btn btn-secondary btn-block" title="Repeat">
Repeat
</button>
</div>
@ -673,7 +670,6 @@
</div><!-- /.modal -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap-slider.min.js"></script>
<script src="js/bootstrap-notify.min.js"></script>
<script src="js/mpd.js"></script>
</body>

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@ -577,13 +577,13 @@ int mympd_put_state(char *buffer, int *current_song_id, int *next_song_id, unsi
mpd_status_get_queue_version(status)
);
len += json_printf(&out, ",outputs: {");
len += json_printf(&out, ",outputs: [");
mpd_send_outputs(mpd.conn);
nr=0;
while ((output = mpd_recv_output(mpd.conn)) != NULL) {
if (nr++) len += json_printf(&out, ",");
len += json_printf(&out, "\"%d\":%d",
len += json_printf(&out, "{id: %d, state: %d}",
mpd_output_get_id(output),
mpd_output_get_enabled(output)
);
@ -594,7 +594,7 @@ int mympd_put_state(char *buffer, int *current_song_id, int *next_song_id, unsi
mpd_connection_clear_error(mpd.conn);
}
len += json_printf(&out, "}}}");
len += json_printf(&out, "]}}");
*current_song_id = mpd_status_get_song_id(status);
*next_song_id = mpd_status_get_next_song_id(status);
@ -686,13 +686,13 @@ int mympd_put_outputnames(char *buffer)
int nr;
struct json_out out = JSON_OUT_BUF(buffer, MAX_SIZE);
len = json_printf(&out,"{type: outputnames, data:{");
len = json_printf(&out,"{type: outputnames, data: { outputs: [");
mpd_send_outputs(mpd.conn);
nr=0;
while ((output = mpd_recv_output(mpd.conn)) != NULL) {
if (nr++) len += json_printf(&out, ",");
len += json_printf(&out,"\"%d\":%Q",
len += json_printf(&out,"{id: %d, name: %Q}",
mpd_output_get_id(output),
mpd_output_get_name(output)
);
@ -703,7 +703,7 @@ int mympd_put_outputnames(char *buffer)
mpd_connection_clear_error(mpd.conn);
}
len += json_printf(&out,"}}");
len += json_printf(&out,"]}}");
if (len > MAX_SIZE) fprintf(stderr,"Buffer truncated\n");
return len;