mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Make configurable slider progress bar update

Browse source
This commit is contained in:
Dmitry Lyzo 2020-02-15 16:18:24 +03:00
parent 990e0de950
commit bb1ba5a29e
6 changed files with 24 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/elements/emby-slider/emby-slider.js
View file

@ -72,11 +72,15 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
return Math.min(Math.max(fraction, 0), 1);
}
function updateValues() {
/**
* Updates progress bar.
*
* @param {boolean} [isValueSet] update by 'valueset' event or by timer
*/
function updateValues(isValueSet) {
// Do not update values when dragging with keyboard to keep current progress for reference
// Do not update values when touched to keep current progress for reference
if (!!this.keyboardDragging || !!this.touched) {
// Do not update values by 'valueset' in case of soft-implemented dragging
if (!!isValueSet && (!!this.keyboardDragging || !!this.touched)) {
return;
}
@ -84,7 +88,9 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
var value = range.value;
// put this on a callback. Doing it within the event sometimes causes the slider to get hung up and not respond
requestAnimationFrame(function () {
// Keep only one per slider frame request
cancelAnimationFrame(range.updateValuesFrame);
range.updateValuesFrame = requestAnimationFrame(function () {
var backgroundLower = range.backgroundLower;
@ -191,6 +197,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
dom.addEventListener(this, 'input', function (e) {
this.dragging = true;
if (this.dataset.sliderKeepProgress !== 'true') {
updateValues.call(this);
}
var bubbleValue = mapValueToFraction(this, this.value) * 100;
updateBubble(this, bubbleValue, sliderBubble);
@ -204,7 +214,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
dom.addEventListener(this, 'change', function () {
this.dragging = false;
updateValues.call(this);
if (this.dataset.sliderKeepProgress === 'true') {
updateValues.call(this);
}
sliderBubble.classList.add('hide');
hasHideClass = true;
@ -278,7 +291,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
}
if (supportsValueSetOverride) {
this.addEventListener('valueset', updateValues);
this.addEventListener('valueset', updateValues.bind(this, true));
} else {
startInterval(this);
}
@ -457,7 +470,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
if (interval) {
clearInterval(interval);
}
range.interval = setInterval(updateValues.bind(range), 100);
range.interval = setInterval(updateValues.bind(range, true), 100);
}
EmbySliderPrototype.detachedCallback = function () {