|
|
@@ -181,11 +181,11 @@ function applyStatus(st) { |
|
|
currentLength = st.length; |
|
|
currentLength = st.length; |
|
|
progressFill.style.width = (st.position / st.length * 100).toFixed(1) + '%'; |
|
|
progressFill.style.width = (st.position / st.length * 100).toFixed(1) + '%'; |
|
|
timeCurrent.textContent = fmtTime(st.position); |
|
|
timeCurrent.textContent = fmtTime(st.position); |
|
|
timeLength.textContent = '-' + fmtTime(st.length - st.position); |
|
|
|
|
|
|
|
|
timeLength.textContent = fmtTime(st.length); // total track length |
|
|
} else { |
|
|
} else { |
|
|
progressFill.style.width = '0%'; |
|
|
progressFill.style.width = '0%'; |
|
|
timeCurrent.textContent = '0:00'; |
|
|
timeCurrent.textContent = '0:00'; |
|
|
timeLength.textContent = '-0:00'; |
|
|
|
|
|
|
|
|
timeLength.textContent = '0:00'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
btnPlay.textContent = st.state === 'playing' ? SYM.pause : SYM.play; |
|
|
btnPlay.textContent = st.state === 'playing' ? SYM.pause : SYM.play; |
|
|
@@ -215,9 +215,8 @@ qsa('.btn-seek').forEach(function(btn) { |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
$('progress-bar').addEventListener('click', function(e) { |
|
|
$('progress-bar').addEventListener('click', function(e) { |
|
|
var current = parseTime(timeCurrent.textContent); |
|
|
|
|
|
var remaining = parseTime(timeLength.textContent.replace('-', '')); |
|
|
|
|
|
var total = current + remaining; |
|
|
|
|
|
|
|
|
var current = parseTime(timeCurrent.textContent); |
|
|
|
|
|
var total = parseTime(timeLength.textContent); // right value is now total length |
|
|
if (!total) return; |
|
|
if (!total) return; |
|
|
var rect = e.currentTarget.getBoundingClientRect(); |
|
|
var rect = e.currentTarget.getBoundingClientRect(); |
|
|
var target = Math.round((e.clientX - rect.left) / rect.width * total); |
|
|
var target = Math.round((e.clientX - rect.left) / rect.width * total); |
|
|
|