mirror of
https://github.com/SuperBFG7/ympd
synced 2024-12-24 01:50:27 +00:00
Replaced bootstrap-slider with version from https://github.com/seiyria/bootstrap-slider
Reworked primary navbar
This commit is contained in:
jcorporation
parent
51dcb88a7b
commit
a6b614b8c1
24
README.md
24
README.md
@ -1,15 +1,18 @@
|
||||
[](https://travis-ci.org/notandy/ympd)
|
||||
ympd
|
||||
myMPD
|
||||
====
|
||||
|
||||
Standalone MPD Web GUI written in C, utilizing Websockets and Bootstrap/JS
|
||||
myMPD is a lightweight MPD web client that runs without a dedicated webserver or interpreter.
|
||||
It's tuned for minimal resource usage and requires only very litte dependencies.
|
||||
myMPD is a fork of ympd.
|
||||
|
||||
This fork supports display of coverimages.
|
||||
Link your mpd music directory to ```/path/to/src/htdocs/library``` and put ```folder.jpg``` files in your album directories
|
||||
This fork provides a reworked ui based on Bootstrap 4.
|
||||
|
||||
http://www.ympd.org
|
||||
|
||||
|
||||
UI Components
|
||||
-------------
|
||||
- Bootstrap 4: https://getbootstrap.com/
|
||||
- Bootstrap Notify: http://bootstrap-notify.remabledesigns.com/
|
||||
- Material Design Icons: https://material.io/tools/icons/?style=baseline
|
||||
- Sammy.js: http://sammyjs.org/
|
||||
|
||||
Dependencies
|
||||
------------
|
||||
@ -25,6 +28,7 @@ Unix Build Instructions
|
||||
3. create makefile ```cmake .. -DCMAKE_INSTALL_PREFIX:PATH=/usr -DWITH_DYNAMIC_ASSETS=ON -DCMAKE_BUILD_TYPE=RELEASE```
|
||||
4. build ```make```
|
||||
5. install ```sudo make install``` or just run with ```./ympd```
|
||||
6. Link your mpd music directory to ```/path/to/src/htdocs/library``` and put ```folder.jpg``` files in your album directories
|
||||
|
||||
Run flags
|
||||
---------
|
||||
@ -64,5 +68,5 @@ Dirble support
|
||||
|
||||
Copyright
|
||||
---------
|
||||
|
||||
2013-2014 <andy@ndyk.de>
|
||||
ympd: 2013-2014 <andy@ndyk.de>
|
||||
myMPD: 2018 <mail@jcgames.de>
|
||||
|
||||
1912
htdocs/css/bootstrap-grid.css
vendored
1912
htdocs/css/bootstrap-grid.css
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
7
htdocs/css/bootstrap-grid.min.css
vendored
7
htdocs/css/bootstrap-grid.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
330
htdocs/css/bootstrap-reboot.css
vendored
330
htdocs/css/bootstrap-reboot.css
vendored
@ -1,330 +0,0 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v4.1.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2018 The Bootstrap Authors
|
||||
* Copyright 2011-2018 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-ms-overflow-style: scrollbar;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #212529;
|
||||
text-align: left;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
[tabindex="-1"]:focus {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
text-decoration: underline;
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #0056b3;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]):focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
color: #6c757d;
|
||||
text-align: left;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button,
|
||||
html [type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
outline-offset: -2px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
/*# sourceMappingURL=bootstrap-reboot.css.map */
|
||||
File diff suppressed because one or more lines are too long
8
htdocs/css/bootstrap-reboot.min.css
vendored
8
htdocs/css/bootstrap-reboot.min.css
vendored
@ -1,8 +0,0 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v4.1.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2018 The Bootstrap Authors
|
||||
* Copyright 2011-2018 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}
|
||||
/*# sourceMappingURL=bootstrap-reboot.min.css.map */
|
||||
File diff suppressed because one or more lines are too long
321
htdocs/css/bootstrap-slider.css
vendored
Normal file
321
htdocs/css/bootstrap-slider.css
vendored
Normal file
@ -0,0 +1,321 @@
|
||||
/*! =======================================================
|
||||
VERSION 10.0.2
|
||||
========================================================= */
|
||||
/*! =========================================================
|
||||
* bootstrap-slider.js
|
||||
*
|
||||
* Maintainers:
|
||||
* Kyle Kemp
|
||||
* - Twitter: @seiyria
|
||||
* - Github: seiyria
|
||||
* Rohit Kalkur
|
||||
* - Twitter: @Rovolutionary
|
||||
* - Github: rovolution
|
||||
*
|
||||
* =========================================================
|
||||
*
|
||||
* bootstrap-slider is released under the MIT License
|
||||
* Copyright (c) 2017 Kyle Kemp, Rohit Kalkur, and contributors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person
|
||||
* obtaining a copy of this software and associated documentation
|
||||
* files (the "Software"), to deal in the Software without
|
||||
* restriction, including without limitation the rights to use,
|
||||
* copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the
|
||||
* Software is furnished to do so, subject to the following
|
||||
* conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be
|
||||
* included in all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
* OTHER DEALINGS IN THE SOFTWARE.
|
||||
*
|
||||
* ========================================================= */
|
||||
.slider {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
.slider.slider-horizontal {
|
||||
width: 210px;
|
||||
height: 20px;
|
||||
}
|
||||
.slider.slider-horizontal .slider-track {
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
margin-top: -5px;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
.slider.slider-horizontal .slider-selection,
|
||||
.slider.slider-horizontal .slider-track-low,
|
||||
.slider.slider-horizontal .slider-track-high {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.slider.slider-horizontal .slider-tick,
|
||||
.slider.slider-horizontal .slider-handle {
|
||||
margin-left: -10px;
|
||||
}
|
||||
.slider.slider-horizontal .slider-tick.triangle,
|
||||
.slider.slider-horizontal .slider-handle.triangle {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
border-width: 0 10px 10px 10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom-color: #2e6da4;
|
||||
margin-top: 0;
|
||||
}
|
||||
.slider.slider-horizontal .slider-tick-container {
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.slider.slider-horizontal .slider-tick-label-container {
|
||||
white-space: nowrap;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.slider.slider-horizontal .slider-tick-label-container .slider-tick-label {
|
||||
padding-top: 4px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.slider.slider-horizontal .tooltip {
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.slider.slider-horizontal.slider-rtl .slider-track {
|
||||
left: initial;
|
||||
right: 0;
|
||||
}
|
||||
.slider.slider-horizontal.slider-rtl .slider-tick,
|
||||
.slider.slider-horizontal.slider-rtl .slider-handle {
|
||||
margin-left: initial;
|
||||
margin-right: -10px;
|
||||
}
|
||||
.slider.slider-horizontal.slider-rtl .slider-tick-container {
|
||||
left: initial;
|
||||
right: 0;
|
||||
}
|
||||
.slider.slider-horizontal.slider-rtl .tooltip {
|
||||
-ms-transform: translateX(50%);
|
||||
transform: translateX(50%);
|
||||
}
|
||||
.slider.slider-vertical {
|
||||
height: 210px;
|
||||
width: 20px;
|
||||
}
|
||||
.slider.slider-vertical .slider-track {
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
left: 25%;
|
||||
top: 0;
|
||||
}
|
||||
.slider.slider-vertical .slider-selection {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.slider.slider-vertical .slider-track-low,
|
||||
.slider.slider-vertical .slider-track-high {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.slider.slider-vertical .slider-tick,
|
||||
.slider.slider-vertical .slider-handle {
|
||||
margin-top: -10px;
|
||||
}
|
||||
.slider.slider-vertical .slider-tick.triangle,
|
||||
.slider.slider-vertical .slider-handle.triangle {
|
||||
border-width: 10px 0 10px 10px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border-left-color: #2e6da4;
|
||||
border-right-color: #2e6da4;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.slider.slider-vertical .slider-tick-label-container {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.slider.slider-vertical .slider-tick-label-container .slider-tick-label {
|
||||
padding-left: 4px;
|
||||
}
|
||||
.slider.slider-vertical .tooltip {
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.slider.slider-vertical.slider-rtl .slider-track {
|
||||
left: initial;
|
||||
right: 25%;
|
||||
}
|
||||
.slider.slider-vertical.slider-rtl .slider-selection {
|
||||
left: initial;
|
||||
right: 0;
|
||||
}
|
||||
.slider.slider-vertical.slider-rtl .slider-tick.triangle,
|
||||
.slider.slider-vertical.slider-rtl .slider-handle.triangle {
|
||||
border-width: 10px 10px 10px 0;
|
||||
}
|
||||
.slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label {
|
||||
padding-left: initial;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.slider.slider-disabled .slider-handle {
|
||||
background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
|
||||
background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
|
||||
background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0);
|
||||
}
|
||||
.slider.slider-disabled .slider-track {
|
||||
background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
|
||||
background-image: -o-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
|
||||
background-image: linear-gradient(to bottom, #e5e5e5 0%, #e9e9e9 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.slider input {
|
||||
display: none;
|
||||
}
|
||||
.slider .tooltip.top {
|
||||
margin-top: -36px;
|
||||
}
|
||||
.slider .tooltip-inner {
|
||||
white-space: nowrap;
|
||||
max-width: none;
|
||||
}
|
||||
.slider .hide {
|
||||
display: none;
|
||||
}
|
||||
.slider-track {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
|
||||
background-image: -o-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
|
||||
background-image: linear-gradient(to bottom, #f5f5f5 0%, #f9f9f9 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.slider-selection {
|
||||
position: absolute;
|
||||
background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
|
||||
background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
|
||||
background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.slider-selection.tick-slider-selection {
|
||||
background-image: -webkit-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
|
||||
background-image: -o-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
|
||||
background-image: linear-gradient(to bottom, #8ac1ef 0%, #82b3de 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0);
|
||||
}
|
||||
.slider-track-low,
|
||||
.slider-track-high {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.slider-handle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #337ab7;
|
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
|
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
|
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
|
||||
filter: none;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
||||
border: 0px solid transparent;
|
||||
}
|
||||
.slider-handle.round {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.slider-handle.triangle {
|
||||
background: transparent none;
|
||||
}
|
||||
.slider-handle.custom {
|
||||
background: transparent none;
|
||||
}
|
||||
.slider-handle.custom::before {
|
||||
line-height: 20px;
|
||||
font-size: 20px;
|
||||
content: '\2605';
|
||||
color: #726204;
|
||||
}
|
||||
.slider-tick {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
|
||||
background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
|
||||
background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
filter: none;
|
||||
opacity: 0.8;
|
||||
border: 0px solid transparent;
|
||||
}
|
||||
.slider-tick.round {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.slider-tick.triangle {
|
||||
background: transparent none;
|
||||
}
|
||||
.slider-tick.custom {
|
||||
background: transparent none;
|
||||
}
|
||||
.slider-tick.custom::before {
|
||||
line-height: 20px;
|
||||
font-size: 20px;
|
||||
content: '\2605';
|
||||
color: #726204;
|
||||
}
|
||||
.slider-tick.in-selection {
|
||||
background-image: -webkit-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
|
||||
background-image: -o-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
|
||||
background-image: linear-gradient(to bottom, #8ac1ef 0%, #82b3de 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0);
|
||||
opacity: 1;
|
||||
}
|
||||
41
htdocs/css/bootstrap-slider.min.css
vendored
Normal file
41
htdocs/css/bootstrap-slider.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -220,4 +220,31 @@ main {
|
||||
|
||||
.card-body {
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
.slider-handle.custom {
|
||||
background: transparent none;
|
||||
}
|
||||
.slider-handle.custom::before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.slider-selection {
|
||||
background:#28a745 !important;
|
||||
}
|
||||
|
||||
#progressbar .slider-track, #volumebar .slider-track {
|
||||
height: 20px !important;
|
||||
}
|
||||
|
||||
#progressbar {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#volumebar {
|
||||
width:160px;
|
||||
}
|
||||
|
||||
.slider-handle {
|
||||
visibility:hidden !important;
|
||||
}
|
||||
@ -9,7 +9,7 @@
|
||||
<title>myMPD</title>
|
||||
|
||||
<link href="css/bootstrap.css" rel="stylesheet">
|
||||
|
||||
<link href="css/bootstrap-slider.css" rel="stylesheet">
|
||||
<link href="css/mpd.css" rel="stylesheet">
|
||||
<link href="assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
|
||||
<script src="js/modernizr-custom.js"></script>
|
||||
@ -21,9 +21,9 @@
|
||||
<body>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
|
||||
<div class="dropdown justify-content-start">
|
||||
<a class="navbar-brand dropdown-toggle" data-toggle="dropdown" href="/#/playing/"><span style="font-size:24px;float:left;margin-right:5px;" class="material-icons">play_circle_outline</span></a>
|
||||
<div class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuButton">
|
||||
<div class="dropdown col-auto mr-auto">
|
||||
<a class="navbar-brand dropdown-toggle" data-toggle="dropdown" href="/#/playing/"><span style="font-size:24px;float:left;margin-right:5px;" class="material-icons">play_circle_outline</span>myMPD</a>
|
||||
<div class="dropdown-menu bg-dark">
|
||||
<h1 class="dropdown-header text-light">myMPD</h1>
|
||||
<div class="dropdown-divider"></div>
|
||||
<form id="search" class="px-4 py-3" role="search">
|
||||
@ -33,11 +33,10 @@
|
||||
<a id="nav-dirble" class="dropdown-item" href="#/dirble/">Dirble</a>
|
||||
<a id="nav-addstream" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#addstream">Add Stream</a>
|
||||
<a id="nav-settings" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<form id="btn-outputs-block" class="px-4 py-3"></form>
|
||||
<a id="nav-updatedb" class="dropdown-item text-light bg-dark" href="#" onclick="updateDB();">Update Database</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar navbar-nav flex-row ml-md-auto d-md-flex" role="toolbar">
|
||||
<div class="btn-toolbar col-auto" role="toolbar">
|
||||
<div class="btn-group mr-2" role="group">
|
||||
<button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_SET_PREV');">
|
||||
<span class="material-icons">skip_previous</span>
|
||||
@ -54,11 +53,21 @@
|
||||
<span class="material-icons">skip_next</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group mr-2">
|
||||
<div class="btn btn-secondary">
|
||||
<div class="btn-group" role="group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<span id="volume-icon" class="material-icons">volume_up</span>
|
||||
<div id="volumeslider"></div>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right bg-dark">
|
||||
<h1 class="dropdown-header text-light">Volume: <span id="volumePrct"></span></h1>
|
||||
<form class="px-4 py-3" style="padding-top:0px !important;">
|
||||
<div class="btn-group btn-secondary" role="group" style="border-radius:0.25rem">
|
||||
<input type="button" class="btn btn-secondary" value="−" onclick="chVolume(-5)"/>
|
||||
<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="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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -108,13 +117,17 @@
|
||||
|
||||
<div id="nowplaying">
|
||||
<div id="album-cover"></div>
|
||||
<h1>
|
||||
<span id="currenttrack"></span>
|
||||
</h1>
|
||||
<h1 id="currenttrack"></h1>
|
||||
<h3 id="artist"></h3>
|
||||
<h4 id="album"></h4>
|
||||
<p id="counter" class="text pull-right"> </p>
|
||||
<div id="progressbar"></div>
|
||||
<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"/>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<p id="counter" class="text"> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ol id="breadcrumb" class="breadcrumb hide">
|
||||
@ -181,7 +194,7 @@
|
||||
<footer class="footer">
|
||||
<nav class="navbar navbar-expand navbar-dark fixed-bottom bg-dark">
|
||||
<div class="d-flex flex-fill navbar-nav" id="navbar-bottom">
|
||||
<div class="nav-item flex-fill text-center" id="nav-playing"><a class="nav-link" href="#/playing/">Playing</a></div>
|
||||
<div class="nav-item flex-fill text-center" id="nav-playing"><a class="nav-link" href="#/playing/">Playback</a></div>
|
||||
<div class="nav-item flex-fill text-center" id="nav-queue"><a class="nav-link" href="#/queue/0">Queue</a></div>
|
||||
<div class="nav-item flex-fill text-center" id="nav-browse"><a class="nav-link" href="#/browse/0/">Browse</a></div>
|
||||
</div>
|
||||
@ -201,9 +214,6 @@
|
||||
<div class="modal-body">
|
||||
<h4><a style="color:#28a745" href="https://github.com/jcorporation/ympd"><span class="material-icons">play_circle_outline</span> myMPD</a> – <small>MPD Web GUI - written in C, utilizing Websockets and Bootstrap/JS</small></h4>
|
||||
<p>myMPD is a lightweight MPD web client that runs without a dedicated webserver or interpreter. It's tuned for minimal resource usage and requires only very litte dependencies. myMPD is a fork of <a style="color:#28a745" href="http://www.ympd.org">ympd</a>.</p>
|
||||
<h5>myMPD uses following excellent software:</h5>
|
||||
<h6><a style="color:#28a745" href="http://cesanta.com/docs.html">Mongoose</a> <small>GPLv2</small></h6>
|
||||
<h6><a style="color:#28a745" href="http://www.musicpd.org/libs/libmpdclient/">libMPDClient</a> <small>BSD License</small></h6>
|
||||
<hr />
|
||||
<div class="row">
|
||||
<div class="form-group col-md-6">
|
||||
@ -241,15 +251,7 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="row">
|
||||
<div class="form-group col-md-6">
|
||||
<button type="button" class="btn btn-secondary btn-block" onclick="updateDB();">
|
||||
<span class="glyphicon glyphicon-refresh"></span> Update Database
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<hr/>
|
||||
<form role="form">
|
||||
<div class="row">
|
||||
<div class="form-group col-md-9">
|
||||
@ -371,7 +373,7 @@
|
||||
<script src="js/jquery-3.3.1.min.js"></script>
|
||||
<script src="js/jquery.cookie.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/bootstrap-slider.js"></script>
|
||||
<script src="js/bootstrap-slider.min.js"></script>
|
||||
<script src="js/bootstrap-notify.min.js"></script>
|
||||
<script src="js/sammy.js"></script>
|
||||
<script src="js/jquery-ui-sortable.min.js"></script>
|
||||
|
||||
2
htdocs/js/bootstrap-notify.min.js
vendored
Normal file
2
htdocs/js/bootstrap-notify.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1973
htdocs/js/bootstrap-slider.js
vendored
1973
htdocs/js/bootstrap-slider.js
vendored
File diff suppressed because it is too large
Load Diff
5
htdocs/js/bootstrap-slider.min.js
vendored
Normal file
5
htdocs/js/bootstrap-slider.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -41,6 +41,8 @@ var filter = "";
|
||||
var dirble_api_token = "";
|
||||
var dirble_stations = false;
|
||||
var playstate = "";
|
||||
var progressBar;
|
||||
var volumeBar;
|
||||
|
||||
var app = $.sammy(function() {
|
||||
|
||||
@ -203,14 +205,19 @@ var app = $.sammy(function() {
|
||||
|
||||
$(document).ready(function(){
|
||||
webSocketConnect();
|
||||
$("#volumeslider").slider(0);
|
||||
$("#volumeslider").on('slider.newValue', function(evt,data){
|
||||
socket.send("MPD_API_SET_VOLUME,"+data.val);
|
||||
|
||||
volumeBar=$('#volumebar').slider();
|
||||
volumeBar.slider('setValue',0);
|
||||
volumeBar.slider('on','slideStop', function(value){
|
||||
socket.send("MPD_API_SET_VOLUME,"+value);
|
||||
});
|
||||
$('#progressbar').slider(0);
|
||||
$("#progressbar").on('slider.newValue', function(evt,data){
|
||||
|
||||
progressBar=$('#progressbar').slider();
|
||||
progressBar.slider('setValue',0);
|
||||
|
||||
progressBar.slider('on','slideStop', function(value){
|
||||
if(current_song && current_song.currentSongId >= 0) {
|
||||
var seekVal = Math.ceil(current_song.totalTime*(data.val/100));
|
||||
var seekVal = Math.ceil(current_song.totalTime*(value/100));
|
||||
socket.send("MPD_API_SET_SEEK,"+current_song.currentSongId+","+seekVal);
|
||||
}
|
||||
});
|
||||
@ -578,9 +585,9 @@ function webSocketConnect() {
|
||||
var elapsed_minutes = Math.floor(obj.data.elapsedTime / 60);
|
||||
var elapsed_seconds = obj.data.elapsedTime - elapsed_minutes * 60;
|
||||
|
||||
$('#volumeslider').slider(obj.data.volume);
|
||||
volumeBar.slider('setValue',obj.data.volume);
|
||||
var progress = Math.floor(100*obj.data.elapsedTime/obj.data.totalTime);
|
||||
$('#progressbar').slider(progress);
|
||||
progressBar.slider('setValue',progress);
|
||||
|
||||
$('#counter')
|
||||
.text(elapsed_minutes + ":" +
|
||||
@ -746,16 +753,13 @@ function get_appropriate_ws_url()
|
||||
|
||||
var updateVolumeIcon = function(volume)
|
||||
{
|
||||
$("#volume-icon").removeClass("glyphicon-volume-off");
|
||||
$("#volume-icon").removeClass("glyphicon-volume-up");
|
||||
$("#volume-icon").removeClass("glyphicon-volume-down");
|
||||
|
||||
$('#volumePrct').text(volume+' %');
|
||||
if(volume == 0) {
|
||||
$("#volume-icon").addClass("glyphicon-volume-off");
|
||||
$("#volume-icon").text("volume_off");
|
||||
} else if (volume < 50) {
|
||||
$("#volume-icon").addClass("glyphicon-volume-down");
|
||||
$("#volume-icon").text("volume_down");
|
||||
} else {
|
||||
$("#volume-icon").addClass("glyphicon-volume-up");
|
||||
$("#volume-icon").text("volume_up");
|
||||
}
|
||||
}
|
||||
|
||||
@ -1238,3 +1242,12 @@ function add_filter () {
|
||||
|
||||
$('#filter').append('<a class="btn btn-secondary material-icons" id="fplist" onclick="set_filter(\'plist\')" href="#/browse/'+pagination+'/'+browsepath+'">list</a>');
|
||||
}
|
||||
|
||||
function chVolume (increment) {
|
||||
var aktValue=volumeBar.slider('getValue');
|
||||
var newValue=aktValue+increment;
|
||||
if (newValue<0) { newValue=0; }
|
||||
else if (newValue > 100) { newValue=100; }
|
||||
volumeBar.slider('setValue',newValue);
|
||||
socket.send("MPD_API_SET_VOLUME,"+newValue);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user