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

Merge pull request #812 from dmitrylyzo/perfect_slider-2

Browse source 
Enhance volume slider
This commit is contained in:
dkanada 2020-02-19 23:49:38 +09:00 • committed by GitHub
commit 9f42297077
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 80 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

26
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">';
@ -187,14 +187,29 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
volumeSliderContainer.classList.remove('hide');
}
var volumeSliderTimer;
function setVolume() {
clearTimeout(volumeSliderTimer);
volumeSliderTimer = null;
if (currentPlayer) {
currentPlayer.setVolume(this.value);
}
}
function setVolumeDelayed() {
if (!volumeSliderTimer) {
var that = this;
volumeSliderTimer = setTimeout(function () {
setVolume.call(that);
}, 700);
}
}
volumeSlider.addEventListener('change', setVolume);
volumeSlider.addEventListener('mousemove', setVolume);
volumeSlider.addEventListener('touchmove', setVolume);
volumeSlider.addEventListener('mousemove', setVolumeDelayed);
volumeSlider.addEventListener('touchmove', setVolumeDelayed);
positionSlider = elem.querySelector('.nowPlayingBarPositionSlider');
positionSlider.addEventListener('change', function () {
@ -393,7 +408,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 +419,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;
}

34
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 {
@ -615,15 +609,27 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
return datetime.getDisplayRunningTime(ticks);
};
context.querySelector(".nowPlayingVolumeSlider").addEventListener("change", function () {
var volumeSliderTimer;
function setVolume() {
clearTimeout(volumeSliderTimer);
volumeSliderTimer = null;
playbackManager.setVolume(this.value, currentPlayer);
});
context.querySelector(".nowPlayingVolumeSlider").addEventListener("mousemove", function () {
playbackManager.setVolume(this.value, currentPlayer);
});
context.querySelector(".nowPlayingVolumeSlider").addEventListener("touchmove", function () {
playbackManager.setVolume(this.value, currentPlayer);
});
}
function setVolumeDelayed() {
if (!volumeSliderTimer) {
var that = this;
volumeSliderTimer = setTimeout(function () {
setVolume.call(that);
}, 700);
}
}
context.querySelector(".nowPlayingVolumeSlider").addEventListener("change", setVolume);
context.querySelector(".nowPlayingVolumeSlider").addEventListener("mousemove", setVolumeDelayed);
context.querySelector(".nowPlayingVolumeSlider").addEventListener("touchmove", setVolumeDelayed);
context.querySelector(".buttonMute").addEventListener("click", function () {
playbackManager.toggleMute(currentPlayer);
});