Commit d4e3b6fb authored by Jonas Haraldsson's avatar Jonas Haraldsson

replace progress-bar with progress-slider

parent 61fb64f7
......@@ -96,10 +96,14 @@ function playerReady() {
$("#love").fadeTo("normal", 1);
$("#open_tag").fadeTo("normal", 1);
$("#volume").fadeTo("normal", 1);
$("#progressbar").progressbar({ value: 0 });
$("#player > #interface").show();
$("#tags").placeholdr({placeholderText: example_tags});
$("#volume-slider").slider({range: "min", min: 0, max: 100, value: 60, slide: setVolume});
$("#progress-slider").slider({
value:0, range: "min", min:0, max:100, slide: function(event, progress) {
setProgress(progress.value);
}
});
// If logged in, enable tune buttons
if(ws_key) {
......@@ -121,6 +125,17 @@ function playerReady() {
player_ready = true;
}
/**
* Set progress of currently loaded track
*
* @param value Number between 0 and 100
*/
function setProgress(value) {
try {
audio.currentTime = audio.duration * (value / 100);
} catch (e) {}
}
/**
* Begins playback
*/
......@@ -166,7 +181,7 @@ function seekForward() {
*/
function updateProgress() {
if (audio.duration > 0) {
$("#progressbar").progressbar('option', 'value', (audio.currentTime / audio.duration) * 100);
$("#progress-slider").slider('option', 'value', (audio.currentTime / audio.duration) * 100);
$("#duration").text(friendlyTime(audio.duration));
} else {
$("#duration").text(friendlyTime(0));
......
......@@ -266,6 +266,27 @@ body{ font:16px/24px sans-serif; }
top: 0;
}
#progress .ui-slider-horizontal {
height: 11px;
background:none;
cursor:pointer;
}
#progress .ui-slider-horizontal .ui-slider-range {
background-image: url("../img/player/pbar-ani.gif");
}
#progress .ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 0em;
height: 1em;
cursor: pointer;
}
#progress .ui-slider-horizontal .ui-slider-handle {
top: -.1em;
margin-left: 0em;
background: #f57900;
display: none;
}
/* ==============
MOBILE: Menu
......
......@@ -29,7 +29,7 @@
</div>
<div id="progress">
<div id="progressbar"></div>
<div id="progress-slider" title="Seek to time"></div>
<span id="scrobbled">Scrobbled</span>
<span id="currenttime"></span>/<span id="duration"></span>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment