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

7
src/components/nowplayingbar/nowplayingbar.js
View file

@ -31,7 +31,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
html += '<div class="nowPlayingBarTop">';
html += '<div class="nowPlayingBarPositionContainer sliderContainer">';
html += '<input type="range" is="emby-slider" pin step=".01" min="0" max="100" value="0" class="slider-medium-thumb nowPlayingBarPositionSlider"/>';
html += '<input type="range" is="emby-slider" pin step=".01" min="0" max="100" value="0" class="slider-medium-thumb nowPlayingBarPositionSlider" data-slider-keep-progress="true"/>';
html += '</div>';
html += '<div class="nowPlayingBarInfoContainer">';
@ -393,7 +393,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
var showMuteButton = true;
var showVolumeSlider = true;
var progressElement = volumeSliderContainer.querySelector('.mdl-slider-background-lower');
if (supportedCommands.indexOf('ToggleMute') === -1) {
showMuteButton = false;
@ -405,10 +404,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
muteButton.querySelector('i').innerHTML = 'volume_up';
}
if (progressElement) {
progressElement.style.width = (volumeLevel || 0) + '%';
}
if (supportedCommands.indexOf('SetVolume') === -1) {
showVolumeSlider = false;
}

6
src/components/remotecontrol/remotecontrol.js
View file

@ -279,8 +279,6 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
var supportedCommands = currentPlayerSupportedCommands;
var showMuteButton = true;
var showVolumeSlider = true;
var volumeSlider = view.querySelector('.nowPlayingVolumeSliderContainer');
var progressElement = volumeSlider.querySelector('.mdl-slider-background-lower');
if (-1 === supportedCommands.indexOf("Mute")) {
showMuteButton = false;
@ -303,10 +301,6 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
view.querySelector(".buttonMute i").innerHTML = "volume_up";
}
if (progressElement) {
progressElement.style.width = (volumeLevel || 0) + '%';
}
if (showMuteButton) {
view.querySelector(".buttonMute").classList.remove("hide");
} else {

6
src/controllers/playback/videoosd.js
View file

@ -862,8 +862,6 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
var supportedCommands = currentPlayerSupportedCommands;
var showMuteButton = true;
var showVolumeSlider = true;
var volumeSlider = view.querySelector('.osdVolumeSliderContainer');
var progressElement = volumeSlider.querySelector('.mdl-slider-background-lower');
if (-1 === supportedCommands.indexOf("Mute")) {
showMuteButton = false;
@ -886,10 +884,6 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
view.querySelector(".buttonMute i").innerHTML = "volume_up";
}
if (progressElement) {
progressElement.style.width = (volumeLevel || 0) + '%';
}
if (showMuteButton) {
view.querySelector(".buttonMute").classList.remove("hide");
} else {

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 () {

2
src/nowplaying.html
View file

@ -9,7 +9,7 @@
<h2 class="nowPlayingPageTitle"></h2>
<div class="sliderContainer nowPlayingPositionSliderContainer">
<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" />
<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" data-slider-keep-progress="true" />
</div>
<div class="nowPlayingInfoButtons">

2
src/videoosd.html
View file

@ -18,7 +18,7 @@
<div class="flex flex-direction-row align-items-center">
<div class="osdTextContainer startTimeText" style="margin: 0 .25em 0 0;"></div>
<div class="sliderContainer flex-grow" style="margin: .5em .5em .25em;">
<input type="range" step=".01" min="0" max="100" value="0" is="emby-slider" class="osdPositionSlider" />
<input type="range" step=".01" min="0" max="100" value="0" is="emby-slider" class="osdPositionSlider" data-slider-keep-progress="true" />
</div>
<div class="osdTextContainer endTimeText" style="margin: 0 0 0 .25em;"></div>
</div>